@charset "utf-8";
/* CSS Document */

@import url(//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); 
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:700');
body {margin:0;padding:0;font-family:'Open Sans','Nanum Square','Nanum Gothic', 'Noto Sans KR','Malgun Gothic', Arial, Dotum, Gulim, Verdana, Tahoma; font-size: 14px}
div{box-sizing: border-box; font-family:'Open Sans'; letter-spacing: 0.2px}

* div{box-sizing: border-box; font-family:'Open Sans','Nanum Square','Nanum Gothic', 'Noto Sans KR','Malgun Gothic', Arial, Dotum, Gulim, Verdana, Tahoma; }
.m_cate{width: 100%;  float: left; background-color: #231e20; padding: 0PX}
.m_cate ul{width: 100%;height: 50px; background-color: #231e20; display:flex;justify-content: center;flex-wrap: wrap;  flex-direction:row; border-top: 1px solid #494949}
.m_cate ul li{height: 50px; float: left ;  }
.m_cate ul li a{width: 100%; height: 50px; height: 50px; text-align: center; color: #fff; font-size: 14px; line-height: 49px;padding: 0PX 20PX; display: block}
.m_cate ul li.on a{width: 100%; height: 50px; background-color: #fff; height: 50px; text-align: center; color: #333; font-size: 14px; line-height: 49px;padding: 0PX 20PX; display: block}




/*---------------------- ----------------------*/

/**** pc ****/
@media only all and (min-width:1467px) {
	.item_detail{width: 100%;  float: left;  margin-top: 30px; position: relative; padding: 0px 3vw; box-sizing: border-box; margin-bottom: 50px; }
.item_detail .view_fl{width:60%;  float: left; position: relative;  box-sizing: border-box }
.item_detail .view_fr{width:40%;  float:right; position: relative ;  padding-right: 35px; box-sizing: border-box ; }
#imageViewerContainer{width:500px;}
.ubase-box{width:500px}
}
/**** 테블릿 ****/
@media all and (max-width:1466px) and (min-width:1367px) {
	.item_detail{width: 100%;  float: left;  margin-top: 30px; position: relative; padding: 0px 1vw; box-sizing: border-box; margin-bottom: 50px}
.item_detail .view_fl{width:60%;  float: left; position: relative;  box-sizing: border-box }
.item_detail .view_fr{width:40%;  float:right; position: relative ;  padding-right:calc(2vw + 15px) ; box-sizing: border-box ; }
#imageViewerContainer{width:500px;}
.ubase-box{width:500px}
}
/**** 테블릿 ****/
@media all and (max-width:1366px) and (min-width:1060px) {
	.item_detail{width: 100%;  float: left;  margin-top: 30px; position: relative; padding: 0px 0vw; box-sizing: border-box}
.item_detail .view_fl{width:60%;  float: left; position: relative;  box-sizing: border-box }
.item_detail .view_fr{width:40%;  float:right; position: relative ;  padding-left: 30px;padding-right:2vw ;  box-sizing: border-box }
#imageViewerContainer{width:450px}
.ubase-box{width:450px}
}
/**** 테블릿2 ****/
@media all and (max-width:1060px) and (min-width:961px) {
	.item_detail{width: 100%;  float: left;  margin-top: 30px; position: relative; padding: 0px 0vw; box-sizing: border-box}
.item_detail .view_fl{width:60%;  float: left; position: relative;  box-sizing: border-box }
.item_detail .view_fr{width:40%;  float:right; position: relative ; padding-left: 30px; box-sizing: border-box }
#imageViewerContainer{width:400px}
.ubase-box{width:400px}
}
/**** 테블릿3 ****/
@media all and (max-width:960px) and (min-width:768px) {
	.item_detail{width: 100%;  float: left;  margin-top: 30px; position: relative; padding: 0px 1vw; box-sizing: border-box}
.item_detail .view_fl{width:60%;  float: left; position: relative;  box-sizing: border-box }
.item_detail .view_fr{width:40%;  float:right; position: relative ; padding-left: 30px; box-sizing: border-box }
#imageViewerContainer{width:350px}
.ubase-box{width:350px}
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	.item_detail{width: 100%;  float: left;  margin-top: 0px; position: relative; padding: 0px 0vw; margin-bottom: 20px}
.item_detail .view_fl{min-width:280px;  float: left; position: relative;  box-sizing: border-box; min-height: 350px }
.item_detail .view_fr{width:100%;  float:right; position: relative ;  box-sizing: border-box; margin-top: 0px;  }
#imageViewerContainer{width:100%}
.ubase-box{width:100%}
.main_div{margin-top:100px;}
}


/**** pc ****/
@media only all and (min-width:1467px) {
	input.input_ww{width:400px;  float: left; margin: 0px 5px   }
.main_div{margin-top:15px;}

}
/**** 테블릿 ****/
@media all and (max-width:1466px) and (min-width:1367px) {
	input.input_ww{width:300px;  float: left;  margin-top: 30px; position: relative; padding: 0px 3vw; box-sizing: border-box; margin-bottom: 50px;margin: 0px 5px  }
.main_div{margin-top:15px;}
}

/**** 모바일 ****/
@media only all and (max-width:767px) {
input.input_ww{width:100%;  float: left;  margin-top: 30px; position: relative; padding: 0px 3vw; box-sizing: border-box; margin-bottom: 50px; margin: 5px 0px  }
.main_div{margin-top:55px;}
}