@charset "utf-8";
@import url("font.css");

/* 태그초기화 */
*{margin:0; padding:0; box-sizing:border-box;}
html, body, h1, h2, h3, h4, h5, h6, hr, div, dl, dd, dt, ul, li, ol, form, fieldset, caption, table, th, td, textarea, select, iframe, input, legend, p, img, pre, q, button, blockquote{margin:0px; padding:0px;}
html, body{height:100%; min-height:100%; font-family:"Noto Sans KR", "Malgun Gothic","Nanum Gothic","AppleSDGothicNeo-Light","Dotum","Arial", sans-serif; font-weight:400; font-size:15px; color:#181818; line-height:1;letter-spacing:-1px;}
h1, h2, h3, h4, h5, h6{font-size:inherit;}
ul, ol{list-style:none;}																																  
button{border:0px; background:none; cursor:pointer; font:inherit; vertical-align:middle;}
em, address, i{ font-style:normal;}
img{border:0px; vertical-align:top;}
a{text-decoration:none; color:#222;}
/* a:link, a:visited, a:hover, a:active{color:inherit} */
table{width:100%; border-spacing:0px; border-collapse:collapse;}
caption{overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0;}
legend{position:absolute; top:0px; left:-9999px; font-size:0px; line-height:0px; text-indent:-9999px;}
textarea{resize:none;}
hr{overflow:hidden; position:absolute; top:0px;left:-9999px; width:0; height:0;}
input[type="submit"], input[type="reset"], input[type="image"]{border:0px; background:none; cursor:pointer;}
input[type="checkbox"], input[type="radio"]{border:0px;}
input, select,textarea{padding-left:10px;font-family:inherit; font-size:inherit; color:inherit; border:0px; background:#fff;outline:none;}
.noscroll{overflow:hidden; position:absolute; width:100%;}
.wrap{position: relative;width:100%; min-height:100%; max-width:640px;margin:0 auto;overflow: hidden;}
#mask{z-index:9;top:0px;left:0px;width:100%;height:100%;background:#000;opacity:0.7;filter:Alpha(opacity=70); position:absolute;}
.container{padding:0 0 75px;}
.inner{padding:0 15px;margin:0 auto;}
input:-internal-autofill-selected{background:none;}
strong{font-weight:500;}

/* 공통클래스 */
.af::after{display:block;content:'';clear:both;}
.fl{float:left;}
.fr{float:right;}
.pr{position:relative;}
.pa{position:absolute;}
.pl{position:relative;}
.skip{overflow:hidden; position:absolute; top:0px; left:-9999px; font-size:0px; line-height:0px; width:1px; height:1px; text-indent:-9999px;}
.clr{clear:both;}
.tl{text-align:left !important;}
.tc{text-align:center !important;}
.tr{text-align:right;}
.clearfix{*zoom:1;}
.clearfix:before, .clearfix:after{display:block; content:''; line-height:0px;}
.clearfix:after{clear:both;}
.nodata{width: 100% !important;margin: 0 !important;max-width: 100% !important;padding:50px 0; text-align:center; color:#666;}
.product_best::after{display:none; position:absolute;right:11px;top:11px;width:35px;height:35px;content:'BEST';text-align:center;background:#181818;font-weight:500;font-size:12px;line-height:35px;color:#fff;}
.product_sold_out .img::after{position:absolute;left:0;bottom:0;width:100%;height:30px;content:'일시품절';text-align:center;background:rgba(0,0,0,0.3);line-height:30px;color:#fff;font-size:12px;font-weight:500;}
.dim-layer {background-color: rgba(0,0,0,0.8);}


/* margin */
.mt0{margin-top:0px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt40{margin-top:40px !important;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}
.mt80{margin-top:80px;}
.mt90{margin-top:90px;}
.mt100{margin-top:100px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb50{margin-bottom:50px;}
.mb70{margin-bottom:70px;}
.mb100{margin-bottom:100px;}
.mr10{margin-right:10px;}
.mr20{margin-right:20px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}

/* padding */
.pt20{padding-top:20px !important;}
.pt30{padding-top:30px !important;}
.pr10{padding-right:10px}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pb5{padding-bottom:5px !important;}
.pb10{padding-bottom:10px !important;}
.pb15{padding-bottom:15px !important;}
.pb20{padding-bottom:20px !important;}
.pb30{padding-bottom:30px !important;}
.pl10{padding-left:10px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl70{padding-left:70px;}

/* btn */
button{outline:none;}
.orange{background:#ed8953; border:1px solid #ed8953; color:#fff;}
.borange{background:#fff; border:1px solid #ed8953; color:#ed8953;}
.gray{background:#777; border:1px solid #666; color:#fff;}
.bgray{background:#fff; border:1px solid #666; color:#666;}
.navy{background:#253a49; border:1px solid #253a49; color:#fff;}
.green{background:#7bc570; border:1px solid #7bc570; color:#fff;}
.blue{background:#6993ff; border:1px solid #6993ff; color:#fff;}
.red{background:#ff6565; border:1px solid #ff6565; color:#fff;}
.black{background:#333333; border:1px solid #111; color:#fff;}
.yellow{background:#fee300; border:1px solid #fee300; color:#111;}
.bgreen{background:#fff; border:1px solid #7bc570; color:#7bc570;}
.bgreen:hover{background:#7bc570; border:1px solid #7bc570; color:#fff;}
.bblue{background:#fff; border:1px solid #6993ff; color:#6993ff;}
.bblue:hover{background:#6993ff; border:1px solid #6993ff; color:#fff;}
.bblack{background:#fff; border:1px solid #111; color:#111;}
.bblack:hover{background:#111; border:1px solid #111; color:#fff;}
 .small{padding:3px 5px; font-size:13px;}
 .medium{min-width:150px; height:38px; padding:0 10px; font-size:15px;}
 .large{width:210px; height:50px; padding:0 20px; font-size:17px; font-weight:500;}

/* input[type="checkbox"], input[type="radio"] style */
.inp_checkbox{color:#111; cursor:pointer; display:inline-block;}
.inp_checkbox label{cursor:pointer; display:inline-block; height:32px; padding-left:40px; background:url(../images/common/checkbox_off.png) 0 0 no-repeat; vertical-align:top; line-height:32px;}
.inp_checkbox label.on{background:url(../images/common/checkbox_on.png) 0 0 no-repeat;}
.inp_checkbox input[type=checkbox]{width:0px; height:0px; opacity:0; filter:alpha(opacity=0);}
.inp_radio{color:#111; cursor:pointer; display:inline-block;  }
.inp_radio + .inp_radio{margin-left:20px;}
.inp_radio label{cursor:pointer; display:inline-block; padding-left:40px;line-height:32px;  background:url(../images/common/radio_off.png) 0 0 no-repeat; vertical-align:top; }
.inp_radio label.on{background:url(../images/common/radio_on.png) 0 0 no-repeat;}
.inp_radio input[type=radio]{width:0px; height:0px; opacity:0; filter:alpha(opacity=0);}

/* font color */
.font_red{color:#ff5757 !important;}
.font_blue{color:#3297f5 !important;}
.font_green{color:#7cc570 !important;}
.font_orange{color:#ff6326 !important;}
.font_yellow{color:#fffd73 !important;}
.font_gray{color:#888 !important;}

/* header */
.header{}
.header_top{position:relative;height:60px;box-sizing:border-box;border-bottom:1px solid #ddd;}
.header h1{float:left;height:100%;padding:15px 0 0 15px;}
.header h1 img{width:120px;}
.header_r{float:right;height:100%;}
.search_btn{display:inline-block;height:100%;padding-top: 20px;margin-right:14px;}
.search_btn img{width:19.5px;}
.header .search_box{display:none;float:left;position:absolute;top:0;left:0;width:100%;height:60px;padding: 10px 15px;background:#333;}
.header .search_box.on{display:block;}
.header .search_box .search{position:relative;width:calc(100% - 37px);top:50%;transform:translateY(-50%); height:40px;margin-left: 37px;background:#fff;border-radius:40px; overflow:hidden;}
.header .search_box .search_close{position:absolute;top:50%;transform:translateY(-50%);width:22px;height:22px;background:url(../images/common/ico_search_close.png) 0 50% no-repeat;background-size:22px;}
.header .search_box .search_close span{font-size:0;}
.header .search_box .search input[type="text"]{float:left; width:calc(100% - 34px); padding-left:15px; height:100%; background:none; outline:0; color:#111; font-size:13px;}
.header .search_box .search input:-ms-input-placeholder{color:#a8a8a8;font-weight:400;}
.header .search_box .search input::-webkit-input-placeholder{color:#a8a8a8;font-weight:400;}
.header .search_box .search input::-moz-placeholder{color:#a8a8a8;font-weight:400;}
.header .search_box .search button{float:left;position:absolute;top:50%;transform:translateY(-50%);right:15px;width:19px; height:19px; background:url(../images/common/ic_search.png) 50% 50% no-repeat; outline:0;background-size:19.5px;}
.all_menu {display: inline-block;height:100%;padding: 21px 15px 0 0;}
.all_menu img{width:22px;}


header .nav {position: absolute;left:-120%;top: 0;z-index: 101;width: calc(100% - 48px);height: 100%;transition: left 0.7s;box-sizing: border-box; z-index:999999;background:#fff;}
header .nav.on {left: 0; min-height:100%; }
.gnb{background:#fff;}
header .nav h2 {width: 100%;height:60px;padding-left: 15px;font-size:18px;font-weight:500;color:#fff;background:#111;line-height:60px;}
.nav ul li .dp1{display: inline-block;position:relative;width:100%;padding-left:15px;border-bottom: 1px solid #ddd;line-height: 51px;font-weight: 700;background:#fff;font-size: 15px;}
.nav ul li .dp1::after{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:20px;height:100%;background:url(../images/common/m_menu_off.png)no-repeat 0 50%;content:''; background-size:20px;}
.nav ul li.on .dp1::after{background:url(../images/common/m_menu_on.png)no-repeat 0 50%;content:'';}
.nav ul li:hover >.dp1,.nav ul li.on >.dp1{color:#ed8953;}
.nav ul li.on{height:auto;}
.nav .dp2{display:none;padding:20px 15px;color:#666;font-size:13px;font-weight:400;background:#f4f4f4;}
.nav ul li dp2.on{display:block;}
.nav .dp2 li{float:left;position:relative;width:50%;line-height: 25px;}
.nav .dp2 li:hover a{text-decoration:underline;}
.nav .dp2 li:nth-child(2n){padding-left:9px;}
.nav .dp2 li:nth-child(2n)::before{position:absolute;top:50%;transform:translateY(-50%);left:0;width:2px;height:11px;background:#ccc;content:'';}
.nav .utill{padding:30px 20px 20px;}
.nav .utill dt{font-size:17px; font-weight:700; }
.nav .utill dd{overflow:hidden; margin-top:5px;}
.nav .utill dd a{position:relative; float:left; display:inline-block; width:calc(50% - 5px); margin:5px 0px; padding:15px 10px; border:1px solid #ddd; border-radius:10px; font-size:15px; font-weight:500;}
.nav .utill dd a:nth-child(even){margin-left:10px;}
.nav .utill dd a:after{position:absolute; top:50%; left:calc(100% - 20px ); display:inline-block; content:''; width:8px; height:14px; margin-top:-6px; background:url(../images/common/ic_arr.png) 0 0 no-repeat; background-size:8px 14px;}
.nav .menu_close {position: absolute;right:15px;top: 19px;width:22px;height:22px;background: url(../images/common/ic_menu_close.png)no-repeat;background-size: 22px;}
.nav .menu_close span{font-size:0;}
.menu_dim{position: absolute;left: -120%;top: 0;z-index: 999998;width:100%;height: 100%;background: rgba(0,0,0, 0.8);transition: left 0.7s;}
.menu_dim.on {left: 0;}

/* footer */
.footer{}
.footer .menu{overflow:hidden; border-top:1px solid #ddd; border-bottom:1px solid #ddd; line-height:42px;}
.footer .menu .inner{width:340px;}
.footer .menu li{float:left;}
.footer .menu li a{display:inline-block;position:relative;padding:0 10px;font-size:13px; color:#666;}
.footer .menu li a::after{display:inline-block;position:absolute;top:50%;transform:translateY(-50%);right:0;width:1px;height:10px;background:#ddd;content:'';}
.footer .menu li:last-child a::after{display:none;}
/* .footer .menu li:last-child a{padding:0 0 0 13px;} */
.footer .foot_contents{padding:22px 0 105px; background:#f8f8f8;}
.footer .foot_contents .box1{width:100%;}
.footer .foot_contents .box1 dt{display:inline-block;margin-right:10px;vertical-align:middle;font-size:14px; font-weight:500;}
.footer .foot_contents .box1 .txt1{display:inline-block;vertical-align:middle;font-size:21px; font-weight:700;}
.footer .foot_contents .box1 .txt2{margin-top:11px; font-size:12px; color:#888;}

.footer .address{padding-top:15px; margin-top:15px; border-top:1px solid #ddd;}
.footer .address p{line-height:19.5px;}
.footer .address p:nth-child(3) span:nth-child(4){margin-right:0;}
.footer .address p strong{font-weight:500;font-size:12px;}
.footer .address p span{display:inline-block; margin-right:11px; font-size:12px; color:#888888;}

/* quick */
.quick{position:fixed;bottom:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);max-width:640px;width:100%;height:60px;padding:10px 0 10px;box-sizing:border-box;z-index:99999;background:#fff;box-shadow:5px 0 10px rgba(0,0,0,0.1);}
.quick .menu{width: 100%;height: 100%;}
.quick .menu li{float:left;width:20%;height:100%; text-align:center;}
.quick .menu li a{display:inline-block;width:100%;height:27px;}
.q_home a{background:url(../images/common/ic_home.png)no-repeat 50% 0;background-size:23px;}
.q_wish a{background:url(../images/common/ic_wish.png)no-repeat 50% 0;background-size:24px;}
.q_cart a{background:url(../images/common/ic_cart.png)no-repeat 50% 0;background-size:25px;}
.q_mypage a{background:url(../images/common/ic_mypage.png)no-repeat 50% 0;background-size:23px;}
.btn_top a{background:url(../images/common/btn_top.png)no-repeat 50% 0;background-size:15px;}
.quick .menu li span{display:block;padding-top:30px;text-align:center;font-weight:500;font-size:10px;}