/* BASIC css start */
#header {z-index:100}


.header_top {text-align:center; position:relative; background: #d1e5e9; }
.header_top a {display:inline-block; width:100%; height:100%; }
.header_top .closed_btn { position: absolute;  top: 10px; right: 15px; width: 20px; height: 20px; background: url(/design/jh2018/smartpc_2019/img/icon/close_btn.svg) no-repeat center; background-size: 65%; z-index: 3;}
#topBanner {display:none;}

.header_container {width:100%; background: rgba(255, 255, 255, .9)}

.header_mid { position:relative; padding: 25px 30px 0; width: 100%;position:relative; box-sizing:border-box;}
.header_mid .logo {width: 180px; display: inline-block; position: relative;  top: 2px;}
.header_mid .logo a {display: block; width: 100%; height: 100%;}
.header_mid .search {display:inline-block; position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%);}
.header_mid .search form { position: relative;}
.header_mid .search .MS_search_word { width: 450px;  height: 40px; margin: 0; background: none; border: none; border-bottom: 1px solid #111; transition: all 0.3s; line-height: 40px; font-size: 14px; box-sizing:border-box; padding:0 10px}
.header_mid .search .MS_search_word:focus {color: #333;border: 2px solid #111 !important;}
.header_mid .search .search_icon {  position: absolute;  top: 50%; right: 7px; transform: translate(0, -50%); font-size: 28px; font-weight: bold; width: 30px; height: 30px; line-height: 1; text-align: center;}
.header_mid .top_menu { float: right; display: flex; align-items: flex-start; z-index: 1; position: relative;}
.header_mid .top_menu > ul {display: flex} 
.header_mid .top_menu > ul li a {display:inline-block; font-size: 13px; color: #000; padding:9px 17px;}
.header_mid .top_menu > ul.left { margin-right: 15px; }
.header_mid .top_menu > ul.right > li {position:relative; }
.header_mid .top_menu > ul.right > li > a {  width: 36px; height: 36px;padding: 0; text-indent: -9999px; margin-bottom:29px;  }
.header_mid .top_menu > ul.right > li.basket {background: url(/design/jh2018/renewSkin/img/icon_cart.png?913) no-repeat top center/100%; margin-right: 10px; }
.header_mid .top_menu > ul.right > li.my {background: url(/design/jh2018/renewSkin/img/icon_my.png?913) no-repeat top center/100%; }
.header_mid .top_menu > ul.right > li .inside_tab { display:none; position: absolute; top:64px; right: 0;  width: 190px; text-align: left; z-index: 1000; background: rgba(255, 255, 255, .9); font-size: 13px;padding: 20px; box-sizing: border-box;}
.header_mid .top_menu > ul.right > li .inside_tab li {position:relative; display:block}
.header_mid .top_menu > ul.right > li .inside_tab li a {  display: block; line-height: 1.8; font-size: 14px; color: #333; padding:0}
.header_mid .top_menu > ul.right > li .inside_tab li.user {font-size: 15px;  margin-bottom: 12px; font-weight: bold;}
.header_mid .top_menu > ul.right > li .inside_tab li.user .point {text-decoration: underline;   font-weight: bold;}
.header_mid .top_menu > ul.right > li .inside_tab li.logout_btn {  background: #444; width: 100%; margin-top: 20px; } 
.header_mid .top_menu > ul.right > li .inside_tab li.logout_btn a {  display: block; height: 100%; width: 100%;  padding: 11.6px 15px; text-align: center; color: #fff; box-sizing: border-box; }

.header_mid .top_menu > ul.right > li .inside_tab.noMember {text-align:center; }
.header_mid .top_menu > ul.right > li .inside_tab.noMember li {display:inline-block}
.header_mid .top_menu > ul.right > li .inside_tab.noMember li:first-child a::after { content: '|';  display: inline-block; position: absolute; right: -4px; }
.header_mid .top_menu > ul.right > li .inside_tab.noMember li a { padding: 0px 10px}

.header_mid .top_menu > ul.right > li.my:hover .inside_tab {display:block; }
.header_mid .top_menu > ul.right > li.basket:hover .cntPreviewer {display:block; }


.header_btm {padding:0 10px; box-sizing:border-box;}
.header_btm #gnb { font-size:0}
.header_btm #gnb:after {content:""; display:block; clear:both}
.header_btm #gnb .menu_item {position:relative; display:inline-block; ;  }
.header_btm #gnb .menu_item .new > span {position:relative; display:inline-block; }
.header_btm #gnb .menu_item .new > span:after { content: "N";  display: flex; width: 14px; height: 14px; border-radius: 100%; color: #fff; background: #fd4649; justify-content: center; align-items: center; position: absolute; top: -10px; right: -8px; font-size: 10px;}
.header_btm #gnb .menu_item > a {display: block;  font-size: 16px; font-weight: 500; padding: 35px 20px 24px;}
.header_btm #gnb .menu_item > dl {  position: absolute; display: none; top:69px; left: 10px; min-width: 180px; height: auto; text-align: left; padding: 15px 20px; background: rgba(255, 255, 255, .9); z-index: 1;}
.header_btm #gnb .menu_item > dl dd:first-child {  float: left; min-height: 135px;}
.header_btm #gnb .menu_item > dl dd > ul { float: right;}
.header_btm #gnb .menu_item > dl dd > ul .sub { height: 30px;  line-height: 30px;}
.header_btm #gnb .menu_item > dl dd > ul .sub a { color: #555; font-size: 15px;}
.header_btm #gnb .menu_item > dl dd > ul .sub a:hover {color: #000; }
.header_btm #gnb .menu_item.on .line {display: block; opacity: 1; width:calc(100% - 40px)}
.header_btm #gnb .menu_item .line {  position: absolute; left:50%;  bottom: 12px; transform: translate(-50%, 0); width:0; height:2px; background: #111; z-index: 10; opacity: 0; transition: all 0.3s;}



#header.active  {position: fixed; top:0; left:0; margin-top: -50px; height: 90px; width:100%; }
#header.active.no_banner {margin-top:0 !important}
#header.active .header_mid  {padding: 25px 30px;}
#header.active .header_mid .top_menu { margin-top:6px}
#header.active .header_btm {position: relative; right: 0; top: -58px; float: right; margin-right: 20px;}
#header.active .header_btm #gnb .menu_item > a { padding: 10px 25px 40px}
#header.active .header_btm #gnb .menu_item .line {bottom:24px}


#header.active .header_mid .search, #header.active .header_mid .top_menu > ul.left, #header.active .header_btm #sns {display:none; }


#side_menu {display:none;position: fixed;  bottom: 3%; right: 1%;z-index: 900;}

#quick_aside { position: fixed; top: 203px; right: 0; bottom: 0; height: 100%; z-index: 10; margin-right: -212px; box-sizing:border-box;  }
#quick_aside .show_btn { position: absolute;top: 0; bottom: auto; left: -60px; right: auto; width: 60px; height: 60px; border: 1px solid #444; background: #444 url(/design/jh2018/smartpc_2019/img/icon/slide_arrow.svg) no-repeat center center; background-size: 28%; text-indent: -9999px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; outline: none; cursor: pointer;}
#quick_aside .aside_toggle_box {  width: 210px; background: #fff; border: 1px solid #444; overflow: hidden; }
#quick_aside .aside_toggle_box h3 { padding: 17px 15px 18px; font-size: 17px; line-height: 1.5; color: #fff; background: #444; letter-spacing: .5px; position: relative; cursor: pointer; }
#quick_aside .aside_toggle_box h3 .icon { display: block; width: 30px; height: 30px; position: absolute; right: 15px; bottom: auto; top: 15px; left: auto; background: url(/design/jh2018/smartpc_2019/img/icon/slide_arrow.svg) no-repeat center center; transform: rotate(180deg); background-size: 50%;}
#quick_aside .aside_toggle_box ul { overflow: hidden; }
#quick_aside .aside_toggle_box ul li {display: inline-block; width: 50%; float: left; border-bottom: 1px solid #eaeaea;box-sizing: border-box; }
#quick_aside .aside_toggle_box ul li:nth-child(2n-1) { border-right: 1px solid #eaeaea; }
#quick_aside .aside_toggle_box ul li a {display: block; width: 100%; height: 100%; text-align: center; padding: 22px 10px 20px; color: #000; font-size: 12px; } 
#quick_aside .aside_toggle_box ul li a img { display: block; width: 30px; height: 30px; margin: 0 auto 12px; }


#goTopEnd {}
#goTopEnd .goRecent { display: block; width: 35px; height: 35px; line-height: 38px; border-radius: 100%; margin-bottom: 5px; font-size: 21px; background: #f5f5f5; text-align: center; }
#goTopEnd button { display: flex; width: 35px; height: 35px; border-radius: 100%; font-size:19px; background: #f5f5f5; justify-content: center; align-items: center; }
#goTopEnd button span { visibility: inherit; line-height: 1; }
#goTopEnd button.goTop { margin-bottom: 5px; }
#goTopEnd button.goEnd { }


#sns {  display:block; margin-top: 5px; }
#sns ul { overflow: hidden; }
#sns ul li { display:block; border-radius: 100%;  width: 35px; height: 35px; margin-bottom: 5px; }
#sns ul li a { text-indent: -9999px; display: block; width: 100%; height: 100%; border-radius: 100%; background:#f5f5f5 url(/design/jh2018/smartpc_2019/img/icon/facebook.svg) no-repeat center center; background-size: 50%;}
#sns ul li.instagram a { background-image: url(/design/jh2018/smartpc_2019/img/icon/insta.svg); }
#sns ul li.youtube a {  background-image: url(/design/jh2018/smartpc_2019/img/icon/youtube.svg);}
#sns ul li.blog a { background-image: url(/design/jh2018/smartpc_2019/img/icon/blog.png); }
#sns ul li.navertalk a{ background-image: url('/design/jh2018/smartpc_2019/img/icon/sns_navertalk.png'); background-size:60%;}
#sns ul li.kakao a {background-image: url('/design/jh2018/smartskin_2019/img/login_sns_kakao.png'); background-size:65%;  }

@media screen and (max-width: 1800px) {
    #header.active .header_container {height:120px}
    #header.active .header_btm {padding: 0 210px; }
    #header.active .header_btm #gnb .menu_item > a { padding-top: 0;   padding-bottom: 10px;   }
    #header.active .header_btm #gnb .menu_item > dl {top:30px; }
    #header.active .header_btm #gnb .menu_item .line {bottom:5px}
    
}
 
/* BASIC css end */