@charset "UTF-8"; 


.dim { display : none } 
.flex { display : flex; align-items: center; justify-content: space-between; } 

header { border-bottom : 1px solid #ebebeb } 
.top_header { border-bottom : 1px solid #ebebeb; padding : 5px 0 } 
.top_header ul.header_site li { display : inline-block; padding : 0 15px; border-right : 1px solid #eaeaea; font-size : 14px } 
.top_header ul.header_site li a.on { font-weight: 800; color : #000 } 
.top_header ul.header_site li:last-child { border-right : none } 
.top_header .header_sns { margin-right : 10px } 
.top_header .header_sns a { display : inline-block; padding : 0 10px } 
.mobile_menu_open { display : none } 


.nw-header-language { position: relative; width: 110px; } 
.nw-header-language button { height: 36px; width: 100%; box-sizing: border-box; padding-left: 10px; text-align:left; background: url(../img/layout/ico-select-off.png) no-repeat center right 10px; } 
.nw-header-language button.on { background: url(../img/layout/ico-select-on.png) no-repeat center right 10px; } 
.nw-header-language button.on + .lang-list { display:block; } 
.nw-header-language .lang-list { display:none; position: absolute; width: 100%; box-sizing: border-box; border:1px solid #111426; padding: 10px 15px; z-index: 12; background: #fff; } 
.nw-header-language .lang-list a { display: block; font-size:13px; padding: 8px 0; font-family:'MS PGothic', Osaka, Tahoma, 'noto sans kr', SimSun, Arial, sans-serif; } 
.nw-header-language .lang-list .jp { font-family: 'MS PGothic', Osaka, Arial, sans-serif; } 
.nw-header-language .lang-list .zh { font-family: Tahoma, " SimSun ", "SimHei", "Microsoft YaHei" } 
.nw-header-language .lang-list a:hover,
.nw-header-language .lang-list a:focus { color:#000; font-weight:500; } 

#headerInner { position : relative; display : flex; justify-content: space-between } 
#headerInner .logo a { display : block; margin-top : 18px } 
#gnbMenuDiv > ul { position : relative; display : flex; justify-content: space-between; margin-right : 30px } 
#gnbMenuDiv .menu-gnb-depth2,
#gnbMenuDiv .menu-gnb-depth3 { position : absolute; display : none } 
#gnbMenuDiv > ul > li:hover > .menu-gnb-depth2,
#gnbMenuDiv > ul > li.active .menu-gnb-depth2 { display : block } 
#gnbMenuDiv > ul > li:first-child > .menu-gnb-depth2 { left : 15px } 
#gnbMenuDiv > ul > li:nth-child(2) > .menu-gnb-depth2 { left : 150px } 
#gnbMenuDiv > ul > li:nth-child(3) > .menu-gnb-depth2 { left : 280px }
#gnbMenuDiv > ul > li:nth-child(4) > .menu-gnb-depth2 { left : 600px } 
#gnbMenuDiv > ul > li:nth-child(5) > .menu-gnb-depth2 { left : 750px } 
#gnbMenuDiv > ul > li:nth-child(6) > .menu-gnb-depth2 { right : 20px; width : auto } 
#gnbMenuDiv > ul > li > span { font-family: 'Malgun Gothic', 'Dotum'; } 

#gnbMenuDiv .has_depth3 { position : relative } 
#gnbMenuDiv .has_depth3:hover .menu-gnb-depth3,
#gnbMenuDiv .has_depth3.active .menu-gnb-depth3 { display : block } 




#gnbMenuDiv > ul > li > a { display : inline-block; font-size : 20px; font-weight: 500; color : #000; line-height : 77px; padding : 0 30px } 
#gnbMenuDiv .menu-gnb-depth2 { width : 100%; top : 75px; padding : 20px 0 0 0 } 
#gnbMenuDiv .menu-gnb-depth2 > li { display : inline-block; z-index : 2 } 
#gnbMenuDiv .menu-gnb-depth2 > li > a { font-size:17px; color: #666; letter-spacing: -1.5px; text-align : center; padding: 20px 15px; position: relative; } 
#gnbMenuDiv .menu-gnb-depth2 > li > a:after { display: inline-block; width:5px; height:5px; border-radius: 50%; background-color:#aaa; content: ""; position: absolute; top: calc(50% - 3px); right: -3px; } 
#gnbMenuDiv .menu-gnb-depth2 li:last-child a:after { display : none } 


#gnbMenuDiv .menu-gnb-depth3 {position : absolute;top: 0;left : calc(50% - 70px);width : 140px;padding-top: 32px;} 
#gnbMenuDiv .menu-gnb-depth3:before {content : '';width : 0;height : 0;border : 8px solid transparent;border-bottom : 8px solid #222;display: block;margin: 0 auto;position: absolute;top: 16px;left: calc(50% - 4px);} 
#gnbMenuDiv .menu-gnb-depth3 li { background-color : #222 } 
#gnbMenuDiv .menu-gnb-depth3 a { display : block; text-align : center; color : #fff; padding : 10px; background-color : #222; } 
#gnbMenuDiv .menu-gnb-depth3 a:hover { color : #cef2ff } 
#gnbMenuDiv .menu-gnb-depth3 li:first-child { padding-top : 10px; } 
#gnbMenuDiv .menu-gnb-depth3 li:last-child { padding-bottom : 10px } 




header:after { content : ''; width : 100%; height : 50px; background-color :#f1f1f1; display : none } 
header.active:after { display : block } 


.btn-searchlayer-open { position: absolute; right: 0; width: 36px; height: 36px; background: #000 url(../img/layout/ico-search.png) no-repeat center center; border-radius: 50%; font-size:0; line-height: 0; top: 20px; } 
.btn-searchlayer-open:focus-visible, .btn-searchlayer-close:focus-visible { outline: 2px solid #0056b5; } 
.btn-searchlayer-open.active { display : none } 
.btn-searchlayer-close { position: absolute; right: 0; width: 36px; height: 36px; background: #000 url(../img/layout/ic-search-layer-close-x.png) no-repeat center center; border-radius: 50%; font-size:0; line-height: 0; top: -58px; } 

.hd-search { display: none; position: absolute; width: 100%; z-index: 2; } 
.hd-search.active { display : block } 
.hd-search.active > .dim { display : block; position: absolute; width: 100%; bottom: 0; top: 0; left: 0; right: 0; background:rgba(0,0,0,0.7); } 
.hd-search .hd-search-wrap { position: relative; width: 100%; background: #fff; border-top: 1px solid #ebebeb; border-bottom : 1px solid #ebebeb } 
.hd-search .hd-search-inner { max-width: 1410px; margin: 0 auto; padding: 70px 0 80px 0; position: relative; } 
.hd-search .nd-search-form { position:relative; width: 100%; max-width: 760px; margin:0 auto; box-sizing: border-box; padding: 0 10px; } 
.hd-search .nd-search-form input { border:0; background: transparent; border-bottom:2px solid #000; width: 100%; box-sizing: border-box; font-size:22px; 
 font-weight:400; padding:10px 40px 10px 10px; } 
.hd-search .nd-search-form .btn-go-search { position:absolute; background:url(../img/layout/ic-search-layer-btn.png) no-repeat center center; font-size:0; line-height:0; height: 40px; width: 40px; right: 15px; top: 2px; } 

.m-search-header { display:none; background: #fff; padding:20px 0; position: relative; } 



.only_mobile { display : none } 



@media ( max-width : 1280px ) { 
    #headerInner .logo a {margin-top : 15px;margin-bottom: 9px;padding: 0 10px;}
 .only_pc { display : none } 
 .only_mobile { display : block } 
 header:after { display : none !important }
 .btn-searchlayer-open { right : 50px } 
 .mobile_menu_open { display: block; position:absolute; right:10px; top:20px; width:36px; height:36px; background: url(../img/layout/ico-mb-nav.png) no-repeat center center; font-size: 0; line-height: 0; } 
 .mobile_menu_close { position: absolute; top : -4px; right:-2px; width: 60px; height: 60px; background: url(../img/layout/ic-nav-close.png) no-repeat center center; font-size: 0; line-height: 0; } 
 .nav_wrap { display : none; position : fixed; top : 0; right : 0; width : 320px; height : 100%; background-color : #fff; z-index : 9 } 
 .nav_wrap.active { display : block }
 #headerInner .dim { display : none; position : fixed; top : 0; left : 0; width : 100%; background-color : rgba(0,0,0,0.7); z-index : 1 }
 #headerInner .dim.active { display : block }
 .mobile_header { padding : 10px; border-bottom : 1px solid #ccc } 
 .mobile_header img { display : block; width : 140px; height : auto } 


.m-header-site-link { background: #fff; height:42px; padding:10px 20px 0 20px; border-bottom:1px solid #ccc; } 
.m-header-site-link button { width: 100%; font-size:14px; padding:0 20px; height: 32px; line-height: 32px; text-align: left; background: url(../img/layout/ic-select-down.png) no-repeat center right 20px; 
 border:1px solid #D4D4D4; color: #333; background-size: 12px; } 
.m-header-site-link button.on { background-image: url(../img/layout/ic-select-up.png); } 
.m-header-site-link button.on + ul { display: block !important; } 
.m-header-site-link ul { display: none; border:1px solid #000; position: absolute; width: calc(100% - 40px); box-sizing: border-box; top: 93px; z-index: 99999; background: #fff; } 
.m-header-site-link ul li { border-top:1px solid #eeee; } 
.m-header-site-link ul li:first-child { border: 0; } 
.m-header-site-link ul li a { display: block; padding: 15px 20px; } 
.m-header-site-link ul li a:hover,
.m-header-site-link ul li a:focus { color: #000; text-decoration: underline; } 
#gnbMenuDiv { height: calc(100% - 230px); background: #252731;width: 150px;padding: 10px 0; overflow: scroll;overflow-x: hidden;} 
#gnbMenuDiv > ul { display : block; margin : 0 }
#gnbMenuDiv > ul > li > a { display : block; font-size : 15px; padding : 12px 15px; line-height : 100%; color : rgba(255,255,255,0.6) }
#gnbMenuDiv > ul > li:hover > a { color : #fff }
#gnbMenuDiv .menu-gnb-depth2 {position: fixed;height: auto;top: 114px;/* background: #fff; */width: 190px !important;padding: 20px 5px 20px 20px;box-sizing: border-box;right:0 !important;overflow: auto;overflow-x: hidden;/* bottom: 99px; */left: auto !important;} 
#gnbMenuDiv .menu-gnb-depth2 > li { display : block }
#gnbMenuDiv .menu-gnb-depth2 > li > a { display : block; width : 100%; padding : 10px ; text-align : left; font-size : 16px; color : #000 }
#gnbMenuDiv .menu-gnb-depth2 > li > a:after { display : none }
#gnbMenuDiv .menu-gnb-depth3 { position : relative; left : 0; width : 100%; padding : 0 }
#gnbMenuDiv .menu-gnb-depth3:before { display : none }
#gnbMenuDiv .menu-gnb-depth3 li { padding : 0 !important; background-color : transparent }
#gnbMenuDiv .menu-gnb-depth3 a { font-size : 15px; padding : 5px 5px 5px 20px; background-color : transparent; color : #333; text-align : left  }
#gnbMenuDiv .menu-gnb-depth3 a:hover { color : #000 }
#gnbMenuDiv .menu-gnb-depth3 a:before { content : '-'; display : inline-block }




.mobile_header_sns { text-align: center;}
.mobile_header_sns a { display : inline-block; padding : 15px 10px }
.nw-header-language { width : 100% }
 }