@charset "utf-8";

:root {
	--page-theme-color: #2955b6;
}

.none-float-img,
.mobile-ver,
.mobile-navi-box { display: none; } 
.middle-head{padding:10px !important;}
#header { position: fixed; width: 100%; z-index: 1000; top:0;} 
#header .container { display: table; height: 100%; } 
#header .logo { width: 300px; float: left; vertical-align: middle; } 
#header .logo img {width:100%;} 
#header .navi { float: left; display: table; height: 62.41px; width: 56%; text-align: center; padding: 0 5%; } 
#header .navi a { display: table-cell; vertical-align: middle; color: #fff; font-weight: 500; transition: color 0.3s; } 
#header .navi a:hover { color: var(--page-theme-color); } 
#header .login-sect { float: none; display: flex; height: 100%; align-items: center; width: auto; justify-content: flex-end; } 
#header .login-sect .link { display: inline-block; color: #212121; font-size: 15px; margin-left: 20px; cursor: pointer; transition: color 0.3s ease; } 
#header .login-sect .link:first-child { margin-left: 0; } 
#header .login-sect .link:hover { color: var(--page-theme-color); } 
#header .login-sect .floating-menu { display: none; } 
#header .login-sect .floating-menu i { cursor: pointer; transition: color 0.3s; font-size: 18px; vertical-align: -4px; } 
#header .login-sect .floating-menu .baloon-text { background: #000; color: #fff; font-size: 13px; opacity: 0; width: 70px; text-align: center; height: 20px; line-height: 20px; position: absolute; left: 50%; border-radius: 5px; top: 65%; transform: translate(-50%, 80%); transition: all 0.3s; } 
#header .login-sect .floating-menu i:hover { color: var(--page-theme-color); ; } 
#header .login-sect .floating-menu i:hover + .baloon-text { opacity: 1; } 
#header .login-sect .floating-menu .baloon-text:after { border-top: 0px solid transparent; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #000; content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); } 
#header .login-sect .go-ehyn:hover { color: var(--page-theme-color);  !important; } 
#header .login-sect .go-ehyn i { font-size: 20px; transform: translateY(2px); } 

/* 스크롤 아래 내려갔을때 -> 플로팅헤더로 변경 */
#header.floating { position: fixed; background: #fff; border-bottom: 1px solid #e7e7e7; } 
#header.floating .none-float-link { display: none; } 
#header.floating .float-img,
#header.floating .floating-menu { display: block; position: relative; } 
#header.floating .navi a,
#header.floating .login-sect .link { color: #212121; } 
#header.floating .navi a:hover { color: var(--page-theme-color); } 

#header .navi a,
#header .go-ehyn { color:#212121; } 
 
#header .login-link-box { display: block; } 

/* 패밀리 사이트 네비게이션*/
.top-head {background: var(--page-theme-color); height: 50px;line-height: 50px;} 
.top-head .container-sect {width:1535px;margin:0 auto; } 
.top-head .go-micro-site {color: #fff;float: left;font-size: 20px;border-left: 1px solid #2f61d0;border-right: 1px solid #2f61d0;padding: 0 15px;transition: all .3s;} 
.top-head .go-micro-site:hover,
.top-head .go-micro-site.active {background: #1b3878;border-left: 1px solid #1b3878;border-right: 1px solid #1b3878;} 
.top-head .right-menu-bar {float: right; } 
.top-head .right-menu-bar a {color: #fff; } 
.top-head .right-menu-bar a:after { content: "/"; margin: 0 5px 0 7px; } 
.top-head .right-menu-bar a.last-link:after {margin: 0;content: ""; } 
/* // 패밀리 사이트 네비게이션*/

/* 레이어팝업 */
 /* 공통 */
 .layer-popup-wrap { display: none; } 
 .layer-popup-wrap:after { content:""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 9998; } 
 .layer { position: fixed; z-index: 9999; background: #fff; box-shadow: 0 5px 15px rgb(0 0 0 / 20%); border-radius: 3px; left: 50%; transform: translateX(-50%); top: 10%; padding: 32px 24px; } 
 .layer .layer-title { font-size: 24px; text-align: center; font-weight: bold; margin-bottom: 35px; } 
 .layer .layer-input { border: 1px solid #e0e0e0; width: 100%; padding: 10px; height: 42px; font-size: 15px; margin-top: -1px; } 
 .layer .close-layer-style { background: url(../img/close_layer.png) no-repeat; width: 16px; height: 16px; position: absolute; top: 25px; right: 24px; background-size: cover; cursor: pointer; } 
 .layer .close-layer-style:hover { background:url(../img/close_layer_on.png) no-repeat; background-size:cover; } 

 /* 로그인팝업 */
 .layer-login { min-width: 300px; max-width: 400px; width: 90%; } 
 .layer-login .sns-icon { border-radius: 5px; display: block; width: 90%; height: 44px; padding-left: 10px; text-align: center; margin: 5px auto; line-height: 44px; } 
 .layer-login .sns-icon.sns-naver { background: #2cb400 url("/img/mobile/sub/m_naver_login.png")no-repeat 5% center; color: #fff; } 
 .layer-login .sns-icon.sns-kakao { background: #fbe300 url("/img/mobile/sub/m_kakao_login.png")no-repeat 2% center; color: #3b1e1e; } 

/* 미디어쿼리 */
@media (max-width: 1270px){
 .container { width: 100%; padding: 0 10px; } 
 .top-head .container {padding-left:0;} 
 }
@media (max-width: 1000px) { /* 태블릿,모바일 레이아웃 변경 */
 #header { position: fixed; background: #fff; left: 0; height: auto; } 
 #header .login-sect { display: none; } 
 .mobile-ver { display: block; } 
 #header .logo { width:150px; position: relative; left: 50%; transform: translateX(-50%); float: none; display: block; } 
 #header .logo .float-img { display: block !important; } 
 #header .logo .none-float-img { display: none !important; } 
 #header .navi { float: none; display: block; height: auto; text-align: left; padding: 0; text-align: center; position: absolute; background: #fff; left: 0; width: 100%; bottom: -36px; border-top: 1px solid #e7e7e7; padding: 10px; border-bottom: 1px solid #e7e7e7; } 
 #header .navi a { color: #212121 !important; font-weight: normal; padding: 0; font-size: 13px; display: inline-block; margin-right: 5px; } 
 #header .free-call { border: 1px solid #d3d3d3; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #fff; background: var(--page-theme-color); ; font-size: 13px; padding: 5px 10px; transition: all 0.3s; } 
 #header .free-call:hover { background: #f5f5f5; color: #212121; } 
 #header .mobile-navi-btn { position: absolute; transform: translateY(-50%); top: 50%; } 
 #header .mobile-navi-btn .ham { font-size: 20px; color: #333333; cursor: pointer; } 

 #header .mobile-navi-box { width: 100%; height: 100%; position: fixed; top: 0; left: -100%; transition: left 0.3s; display: block; } 
 #header .mobile-navi-box.active { left: 0; } 
 #header .mobile-navi-box .mobile-navi-con { position: absolute; z-index: 3000; width: 280px; height: 100%; background: #fff; overflow-y: auto; overflow-x: hidden; } 
 #header .mobile-navi-box .m-navi-shadow { z-index: 2000; } 
 #header .mobile-navi-box .box-top { background: #2b2b2b; padding: 15px 20px; } 
 #header .mobile-navi-box .box-bottom { overflow-y: auto; } 
 #header .mobile-navi-box .box-top .login-link-box i { display: inline-block; color: #eee; font-size: 40px; background: #757575; border-radius: 100%; } 
 #header .mobile-navi-box .box-top .login-link-box span { display: block; color: #fff; opacity: 0.6; font-size: 14px; margin: 10px 0; } 
 #header .mobile-navi-box .box-bottom .sub-page-list { border-bottom: 1px solid #f3f3f3; } 
 #header .mobile-navi-box .box-bottom .sub-page-list a { display: block; font-size: 14px; padding: 14px 20px 13px; } 
 #header .mobile-navi-box .close-m-navi { color: #fff; font-size: 28px; position: fixed; left: 290px; top: 10px; font-weight: normal; cursor: pointer; display: none; } 
.top-head { position:relative; display:block; height:40px; line-height:40px; } 
.top-head .go-micro-site { font-size: 16px; padding:0 10px; } 
.top-head .right-menu-bar a { font-size:15px; } 
 }
@media (max-width:550px) {
 .mobile-hide-link{display:none;}
 .top-head .right-menu-bar a:first-child:after{content:"";}
}
@media (max-width:480px) {
.top-head .go-micro-site { font-size:13px; padding:0 8px; } 
.top-head .right-menu-bar a { font-size:11px; } 
.top-head .right-menu-bar a:after { margin: 0 3px 0 5px; } 
 }
@media (max-width: 420px){
 #header .free-call { padding: 3px; font-size: 12px; } 
 #header .navi { padding:10px 2px; } 
 #header .navi a { font-size:12px; } 
 }
 @media (max-width: 360px){
 #header .logo { left: 46%; } 
 }