@charset "utf-8";
/************************************************************************
 * filename : common.css
 * description : 전체페이지 공통
 * date : 2017.08.14
************************************************************************/

/* COMMON */
/*
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 100;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 300;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
 }
*/
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 600;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
 }
 @font-face {
    font-family: 'Noto Sans KR LIGHT';
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
         url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
         url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
  }
html,
body {
  font-size: 14px;
  font-family: 'Noto Sans KR','돋움',Dotum,Arial,sans-serif;
  letter-spacing: -0.3px;
  letter-spacing: -0.02rem;
  line-height: 1.2em;
  position: relative;
  color:#333;
  font-weight: 400;
   /*overflow-x: hidden !important ;*/
}
.m_nav_open{overflow: hidden !important}
.hide{display: none}
a[href^="tel"]{color:inherit; text-decoration:none;}
.inner{width: 1440px;margin:0 auto}
.clear{display: block;clear: both}
.r0{right: 0 !important; left:0 !important;}
.m0 {margin-bottom: 0 !important;}
/* header */
#header{position: fixed;top:0;left:0;right:0;z-index: 100;transition: .3s}
.header_top{background: #2a2829;text-align: center;position: relative;z-index: 1;height:40px;}
/*.header_top .inner{width:100%}*/
.header_top .logo{position: absolute;left:21px;top:8.5px;}
.header_top .logo img{width: 25px;}
#gnb{line-height: 40px;height: 40px;display: inline-block;}
#gnb ul {overflow: hidden}
#gnb ul li{float: left;}
#gnb li a{color:#777;font-size:13px;display: block;text-align: center;;padding:0 20px}
#gnb li.active a{color:#fff;background: #ed1c24;}
#gnb li a:hover{color:#999;}
#gnb li.active a:hover{color:#fff}
.header_top .util{position: absolute;right:180px;top: 13px;font-family: '굴림';letter-spacing: -0.3px;line-height: 12px;font-size:12px}
.header_top .util dl{overflow: hidden}
.header_top .util dl dd{display: inline-block;vertical-align: middle;margin-left: 10px;}
.header_top .util dl dd a{display: block;color:#777;}
.header_top .util dl dd a:hover{color:#999}
.header_top .util dl dd span{vertical-align: middle}
.header_top .util dl dd.login img,
.header_top .util dl dd.logout img{width: 15px;vertical-align: middle;margin-left: 9px}

.header_top .lang{position: absolute;right:15px;top: 11px;font-family: '굴림';letter-spacing: -0.3px;line-height: 18px;width: 150px;}
.header_top .lang>a:hover{color:#999}
.header_top .lang a{color:#777;font-size:13px;vertical-align:middle;line-height: normal;}
.header_top .lang .lang_arr {overflow: hidden;vertical-align: middle;margin-left: 4px;}
.header_top .lang .lang_arr.arr_up{display: none}
.header_top .lang.active .lang_arr.arr_down{display: none}
.header_top .lang.active .lang_arr.arr_up{display: inline-block;}
.header_top .lang .lang_arr img{width: 9px;float: left;}
.header_top .lang .lang_list{display: none;position: absolute;top:26px;left:0;right:0;text-align: left;background: #434142;border:1px solid #a3a3a3;border-top: 0;z-index: 2;}
.header_top .national {vertical-align: -5px; margin-right: 10px; width: 30px; height: 20px;}
.header_top .lang .lang_list img{width:30px;}
.header_top .lang li{border-top:1px solid #a3a3a3}
.header_top .lang li:first-child{border-top: 1px solid #a3a3a3;}
.header_top .lang li a{color:#ccc;padding:4px 13px;display: block;}
.header_top .lang li a:hover{background: #6f6b6d;color:#fff}
.header_top .cur_lang img {vertical-align: -5px !important}
.mobile_nav .m_util{border-bottom: 1px solid #d7d7d7;background:#f5f5f5;}
.mobile_nav .m_util ul{overflow: hidden;text-align: center}
.mobile_nav .m_util ul li{display: inline-block;vertical-align: middle;width: 40%;height: 80px;;padding-top: 15px;box-sizing: border-box}
.mobile_nav .m_util ul li:first-child{margin-right: 4%;}
.mobile_nav .m_util ul li a{display: block;line-height: 50px;font-size:20px;background: #e3e3e3;border-radius: 8px;-moz-border-radius: 8px;-webkit-border-radius: 8px;border:1px solid #e0e0e0;box-sizing: border-box;}

.topCartcount {position:absolute;top:12px;right:270px;width:18px;height:17px;background:url(/static_resources/images/junohair/ico_cart.png) no-repeat 0 0;}
.topCartcount a {display:block;width:30px;height:30px}
.topCartcount em {overflow:hidden;width:0;height:0;font-size:0;line-height:0;text-indent:-9999em;visibility:hidden;outline:none;z-index:-1}
.topCartcount .count {position:absolute;top:-4px;left:10px;height:15px;line-height:1.4;padding:0 5px;border-radius:45%;font-family:'Gulim';font-size:11px;font-weight:600;color:#fff;background:#ed1c24}
.mobile_topCartcount {display:none;}
.miniCartbox {overflow:hidden;visibility:visible;position:fixed;top:40px;left:auto;right:-500px;overflow:hidden;overflow-y:auto;width:435px;max-height:500px;box-shadow: rgba(0,0,0,.33) 0px 12px 12px 0px;background-color:#fff;z-index:1000;box-sizing:border-box;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;}
.miniCartbox.active {right:54px;}
.miniCartbox .box {padding:18px 24px;display:flex;flex-direction:column;box-sizing:border-box;}
.miniCartbox .head {position:relative;padding:15px 0;border-bottom:1px solid rgb(234,234,234)}
.miniCartbox .head .ttl {text-align:left;font-size:22px;font-weight:600;}
.miniCartbox .head .ttl span {font-size:16px;color:#777;}
.miniCartbox .head .price {position:absolute;top:14px;right:0;font-size:18px;color:rgb(137,137,137);}
.miniCartbox .prodorder {position:relative;display:flex;box-sizing:border-box;flex-direction:row;padding:20px 0;border-bottom:1px solid rgb(234,234,234)}
.miniCartbox .prodorder div {box-sizing:border-box}
.miniCartbox .prodorder .prodthum {height:100px;width:100px;margin-right:37px;-webkit-background-size:cover;background-size:cover;background-position:center center}
.miniCartbox .prodorder .prodinfo {flex:1 1 0%;padding-right:20px;}
.miniCartbox .prodorder .prodname {font-size:17px;color:#000;line-height:1.2;}
.miniCartbox .prodorder .countChk {margin-top:10px;}
.miniCartbox .prodorder .countChk select {width:48px;height:25px;line-height:1;padding-left:6px;background-position:30px center;}
.miniCartbox .prodorder .countChk .price {margin-top:10px;font-size:15px;color:rgb(177,177,177);}
.miniCartbox .prodorder .btn_delete {position:absolute;top:22px;right:0;width:12px;height:12px;background:url(/static_resources/images/junohair/sub/jmarket/btn_delete.png) no-repeat center center;-webkit-background-size:12px auto;background-size:12px auto;}

.main_rolling_popup {position:absolute;top:150px;right:50px;width:400px;height:590px;z-index:1100}
.main_rolling_popup .rolling_img a {display:block;width:100%;height:530px}
.main_rolling_popup .rolling_img a img {width:100%;}
.main_rolling_popup .foot {display:flex;justify-content:space-between;height:59px;line-height:59px;background:#222}
.main_rolling_popup .today_close {display:block;width:50%;padding-left:20px;box-sizing:border-box;color:#aaa}
.main_rolling_popup .today_close span {position:relative;padding-left:30px}
.main_rolling_popup .today_close span:after {content:'';display: block;position:absolute;top:50%;left:0;width:18px;height:18px;margin-top:-9px;border:1px solid #bfbfbf;background:#fff}
.main_rolling_popup .close {display:block;width:30%;padding-right:22px;text-align:right;font-size:16px;color:#fff;font-weight:600;box-sizing:border-box;}
.main_rolling_popup .owl-dots {position:absolute;bottom:20px;left:0;width:100%;text-align:center;}
.main_rolling_popup .owl-dots .active {background:#0084ff}
.main_rolling_popup .owl-dot {float:none;display:inline-block;width:10px;height:10px;margin-left:5px}


/* media_query */
@media all and (max-width:1440px){
  .inner{width:1024px;}
}
@media all and (max-width:1024px){
  .inner{width:768px;}
  .header_top{display: none}
  .header_top{text-align: left;padding:9.5px 15px}
  .header_top .inner{width:768px}
  .header_top .logo{position: static}
  #gnb,.lang{display: none}

  .topCartcount {display:none}
  .mobile_topCartcount {display:block;position:absolute;top:0px;right:50px;width:25px;height:23px;background:url(/static_resources/images/junohair/ico_cart_m.png) no-repeat 0 0;-webkit-background-size:25px auto;
  background-size:25px auto;}
  .mobile_topCartcount a {display:block;width:30px;height:30px;}
  .mobile_topCartcount em {overflow:hidden;width:0;height:0;font-size:0;line-height:0;text-indent:-9999em;visibility:hidden;outline:none;z-index:-1}
  .mobile_topCartcount .count {position:absolute;top:-6px;left:16px;height:17px;min-width:17px;text-align:center;line-height:1;padding:2px 5px 0;border-radius:45%;font-family:inherit;font-size:11px;font-weight:700;color:#fff;background:#ed1c24;box-sizing:border-box;}

  .miniCartbox {top:50px;right:-500px;width:380px;max-height:400px;box-shadow: rgba(0,0,0,.33) 0px 6px 6px 0px}
  .miniCartbox.active {right:0px;}
  .miniCartbox .box {padding:12px 18px}
  .miniCartbox .head {padding:10px 0}
  .miniCartbox .head .ttl {font-size:18px}
  .miniCartbox .head .price {top:14px;right:0;font-size:16px}
  .miniCartbox .prodorder {padding:16px 0}
  .miniCartbox .prodorder .prodthum {height:80px;width:80px;margin-right:18px}
  .miniCartbox .prodorder .prodinfo {flex:1 1 0%;padding-right:16px;}
  .miniCartbox .prodorder .prodname {font-size:15px}
  .miniCartbox .prodorder .countChk {margin-top:6px;}
  .miniCartbox .prodorder .countChk .price {margin-top:6px;font-size:14px}

  .main_rolling_popup {top:58px;right:0;left:50%;width:100%;height:auto;padding:0 15px;max-width:660px;box-sizing:border-box;-webkit-transform:translateX(-50%);transform:translateX(-50%);}
  .main_rolling_popup .rolling_cont {position:relative;padding-bottom:50px}
  .main_rolling_popup .rolling_img a {display:block;width:100%;height:100%}
  .main_rolling_popup .rolling_img a img {width:100%;}
  .main_rolling_popup .foot {width:100%;}
  .main_rolling_popup .today_close {display:block;width:58%}
  .main_rolling_popup .today_close span {position:relative;padding-left:30px}
  .main_rolling_popup .today_close span:after {content:'';display: block;position:absolute;top:50%;left:0;width:18px;height:18px;margin-top:-9px;border:1px solid #bfbfbf;background:#fff}
  .main_rolling_popup .close {display:block;width:30%;padding-right:22px;text-align:right;font-size:16px;color:#fff;font-weight:600;box-sizing:border-box;}
  .main_rolling_popup .owl-dots {bottom:3%;}

}
@media all and (max-width:768px){
  #wrap{padding-bottom:61px;}
  .inner{width:95%;}
  .header_top{display: none}
}
@media all and (max-width:500px){
  .mobile_nav .m_util ul li{width: 40%;height: 50px;;padding-top: 10px;}
  .mobile_nav .m_util ul li:first-child{margin-right: 2%;}
  .mobile_nav .m_util ul li a{display: block;line-height: 30px;font-size:14px;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius:4px;}
}

/* privacy */
.privacy .inner{width: 1024px;}
.privacy #contents{padding-bottom: 80px;}
.privacy .p_top{line-height: 120px;text-align: center;font-weight: 600;font-size:30px;color:#777;background: #efefef;}
.privacy .p_mid{margin:20px 0}
.privacy .p_mid .inner{border:1px solid #d5d5d5}
.privacy .p_mid ul{padding:15px }
.privacy .p_mid ul li:first-child{margin-bottom: 12px;}
.privacy .p_mid dt a{font-size:16px;line-height: 22px;font-weight: 600;color:#343434;margin-bottom: 4px;}
.privacy .p_mid dd a{box-sizing: border-box;padding-left: 10px;line-height: 22px;position: relative;}
.privacy .p_mid dd a::after{content: '';display: block;position: absolute;width: 4px;height: 4px;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;overflow: hidden;left:2px;top:8px;background: #555;}
.privacy #contents h3{font-weight: 600;font-size:22px;line-height:30px;display: block;}
.privacy #contents .policy_terms .inner{margin-bottom: 60px;padding-bottom: 60px;border-bottom: 1px dotted #777;}
.privacy #contents .terms_content{word-break: keep-all;font-size:14px;color:#555;line-height:22px}
.privacy #contents .terms_content strong,
.privacy #contents .terms_content span{display: block;color:#333;font-weight: 600;}
.privacy #contents .terms_content strong{margin:30px 0  20px 0;font-size:18px}
.privacy #contents .terms_content span{margin:10px 0 4px 0}

.com_terms{margin-top:20px;line-height: 20px;text-align: center;background: #f0f0f0;border:1px solid #d5d5d5;padding:15px 10px;box-sizing: border-box}
@media all and (max-width:1024px){
  .privacy .inner{width: 95%  ;}
  .privacy #contents{padding-top: 0;padding-bottom: 40px;}
  .privacy .p_top{font-size:20px;line-height: 45px}
}

@media all and (max-width:768px){
  .com_terms{padding:15px 40px}
}

.alert_layer img{max-width:90%;}
.alert_layer{position:fixed;z-index: 2000;background-repeat:no-repeat;width: 100%;height: 100%;top:0;right:0;bottom:0;left:0;margin:0;text-align: center;display: none;background-position: center center;background-size: cover}
.alert_layer div{display: table-cell;vertical-align: middle;}
.alert_layer div div{width: 83px;height: 1px;background: #231f20;margin:22px auto;display: block;}
.alert_layer div p{font-size:24px;line-height: 30px;color:#231f20}
.alert_layer div strong{font-size:42px;color:#231f20}
.alertLayer1 img{width: 315px;}
.alertLayer2 img{width: 315px;}
.alert_overlay{display: none;position: fixed;left:0;top:0;right:0;bottom:0;z-index: 1999;background:url(/static_resources/images/gate_overlay.png)}
.alert_close{position: absolute;top:30px;right:30px}
.alert_close img{width:auto !important}

@media all and (max-width:768px){
  .alert_close {top:15px;right:15px}
  .alert_close img{width: 26px !important;}
}
@media all and (max-width:600px){
  .alert_layer div p{font-size:16px;line-height: 22px;padding:0 10px;word-break: keep-all}
}
.loading{position: fixed;top:0;right:0;left:0;bottom:0;width:100%;height:100%;display: table;z-index: 3000;background:rgba(0,0,0,.8);}
.loading_inner{text-align: center;display: table-cell;vertical-align: middle;}
.loading_inner img{width: 320px;max-width:80%;margin:0 auto}
.loading_inner p{color:#fff;font-size:18px;font-weight: 600;margin: 30px auto 15px auto;}
.loading_inner .loading_dots{text-align: center}
.loading_inner .loading_dots .loading_dot{width: 13px;height: 13px;display: inline-block;
vertical-align: middle;margin:0 5px;border-radius:14px;-moz-border-radius:14px;-webkit-border-radius:14px;background: #ccc;transition:background .4s}
.loading_inner .loading_dots .loading_dot.active{background: #ed1c24;}