@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
#top { position: fixed; left: 0; right: 0; top: 0; z-index: 10; height:100px; transition-duration: 200ms; }
body.scrolled #top { height:70px; }
#top .top-wrap { display: flex; align-items: center; justify-content: space-between; padding: 0 50px; background: rgba(0, 0, 0, 0.5); height:100%; transition-duration: 200ms; }
#top .top-wrap .logo { width: 250px; height: 60px; background: url("../img/logo-white.png") left center/contain no-repeat; }
#top.bg .top-wrap .logo, body.menu-on #top .top-wrap .logo { background-image: url("../img/logo.png"); }

#top .top-wrap .right { display: flex; align-items: center; height:100%; }
#top .top-wrap .right .txt { margin: 0 15px; color: white; }
#top.bg .top-wrap .right .txt, body.menu-on #top .top-wrap .right .txt { color: #333; }
#top .top-wrap .right .txt span { margin-left: 7px; }
@media (max-width: 1500px) { 
#top .top-wrap .right .txt { display: none; } 
}

#top .top-wrap .right .top-search { position: relative; margin: 0 15px; }
#top .top-wrap .right .top-search .searchbox { width: 150px; height: 40px; line-height: 40px; padding: 0 40px 0 15px; border: 1px solid #666; border-radius: 20px; background: transparent; color: white; transition-duration: 200ms; }
#top.bg .top-wrap .right .top-search .searchbox { border-color: #ccc; color: #333; }
body.menu-on #top .top-wrap .right .top-search .searchbox { border-color: #ccc; color: #333; }
#top .top-wrap .right .top-search .searchbox:focus { outline: none; }
#top .top-wrap .right .top-search button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; line-height: 30%; text-align: center; background-color: transparent; border: 0; color: white; transition-duration: 200ms; }
#top.bg .top-wrap .right .top-search button { color: #333; }
body.menu-on #top .top-wrap .right .top-search button { color: #333; }
#top .top-wrap .right .top-search button:focus { outline: none; }
#top.bg .top-wrap .right .top-search { /*display: none;*/ }

@media (max-width: 1000px) { 
#top .top-wrap .right .top-search { display: none; } 
}

#top .top-wrap .right .lang { position: relative; padding: 0 20px; background: transparent; cursor: pointer; height:100%; }
#top .top-wrap .right .lang .item { display: flex; align-items: center; height: 100%; font-size: 20px; color: white; }
#top.bg .top-wrap .right .lang .item { color: #333; }
body.menu-on #top .top-wrap .right .lang .item { color: #333; }
#top .top-wrap .right .lang .sub { position: absolute; left:50%; transform:translateX(-50%); padding:10px; background: white; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); display: none; }
#top .top-wrap .right .lang .sub a { display: flex; align-items: center; color: #333; font-size: 14px; font-weight: 700; }
#top .top-wrap .right .lang .sub a img { width: 25px; height: 25px; }
#top .top-wrap .right .lang .sub a span { margin-left: 10px; }
#top.bg .top-wrap { background: white; }
body.menu-on #top .top-wrap { background: white; }

@media (max-width: 1500px) { 
#top .top-wrap { padding: 0 25px; } 
}
@media (min-width: 768px) { 
/*#top.bg, body.menu-on #top { border-bottom: 1px solid #ddd; }*/
}

#menu-wrap-bottom-bg { position: absolute; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.75); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); display: none; }

/* 상단 우측 메뉴버튼 */
#top .top-menu-btn { transition-duration: 300ms; position: relative; width: 40px; height: 40px; }
#top .top-menu-btn div { background-color: #fff; position: absolute; left: 50%; top: 50%; width: 25px; height: 4px; border-radius: 2px; transform: translate(-50%, -50%); transition: all .5s; }
#top .top-menu-btn div:nth-child(1) { margin-top: -7px; }
#top .top-menu-btn div:nth-child(3) { margin-top: 7px; }

#top.bg .top-menu-btn div, body.menu-on #top .top-menu-btn div { background-color: #333; } 

body.m-menu-on #top .top-menu-btn div { margin-top: 0; }
body.m-menu-on #top .top-menu-btn div:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) scaleX(1.3); }
body.m-menu-on #top .top-menu-btn div:nth-child(2) { opacity: 0; }
body.m-menu-on #top .top-menu-btn div:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.3); }

/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { transition-duration: 200ms; height: 100%; }
#menu .ul { display: flex; align-items: stretch; justify-content: space-between; height: 100%; }
#menu .ul .li { position: relative; }
#menu .ul .li .a { display: flex; align-items: center; height: 100%; padding: 0 40px; text-align: center; color: white; font-size: 18px; font-weight:800 }
#top.bg #menu .ul .li .a, body.menu-on #menu .ul .li .a { color: #333; }
/*
#menu .ul .li::after { content: ""; display: block; position: absolute; z-index: 1; left:50%; right:50%; bottom:0; height: 3px; transition-duration: 200ms; opacity:0; }
#menu .ul .li:hover::after { left: -20px; right: -20px; opacity:1; }
*/

#menu .sub-wrap { position: absolute; padding:15px 0; transition-duration: 300ms;  }
#menu .sub-wrap .sub-a { display:block; line-height:1.2; color:#333; white-space: nowrap; padding:15px 20px;  font-size: 17px; font-weight:600}
#menu .sub-wrap .sub-a:hover { text-decoration:underline; }

#menu .sub-wrap.depth2 { background:#fff; left:50%; top:100%; transform:translateX(-50%); min-width:150px; height:0; padding:0; overflow:hidden; }
#menu .sub-wrap.depth2.on { height:auto; padding:15px 0; overflow:visible; transition-duration: 500ms; }
#menu .sub-wrap.depth2:before { content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:100%; width:0; height:3px; transition-duration: 500ms; }
#menu .sub-wrap.depth2.on:before { width:100%; }

#menu .sub-wrap.depth2 li { position:relative; }
#menu .sub-wrap.depth2 li > .sub-a { padding-right:40px; position:relative; }
#menu .sub-wrap.depth2 i { position:absolute; right:20px; top:50%; transform:translateY(-50%); }

#menu .sub-wrap.depth3 { background:#eee; left:100%; top:-15px; transform:translateX(50px); min-width:200px; margin-left:-1px; opacity:0; visibility:hidden; }
#menu .sub-wrap.depth3.on { transform:translateX(0); opacity:1; visibility:visible; }
#menu .sub-wrap.depth3 .sub-a { }

.top_qa a{ color: white; font-size: 18px; font-weight:800; padding-right:50px;  padding-left:35px;  background-image:url('/thema/khome006/img/top_qa_icon.png'); background-repeat:no-repeat}
.top_qa a:hover{  text-decoration:none; color:#f17f42;  background-image:url('/thema/khome006/img/top_qa_icon_on.png'); background-repeat:no-repeat }

body.menu-on #top .top_qa a { color:#000; background-image:url('/thema/khome006/img/top_qa_icon2.png'); }
@media (max-width: 1400px) { 
  #menu .ul .li .a { padding: 0 35px; }
}
@media (max-width: 1199px) { 
  #menu .ul .li .a { padding: 0 15px; }
}