@import url("/css/web/basic.css");
/*-------------------------------------------------
Author : SY,CHo
Create date : 2020. 03. 13.

YHY : 2011202 웹접근성 명도대비 수정
-------------------------------------------------*/

#contents {height: auto; overflow: hidden;}

/* ========================================== BODY */

#wrap {width: 100%; background-color: #fff; overflow: hidden;}

.container {margin: 0 auto; width: 100%; max-width: 1400px;}

/* ========================================== 메인메뉴 */

#header {position: absolute;top: 0;left: 0;width: 100%;height: 90px;line-height: 90px;color: #000;letter-spacing: -0.05em;z-index: 12;transition: all 0.25s ease;-webkit-transition: all 0.25s ease;background-color: #fff;} /*21101028 접근성 컬러 수정*/
#header:before {position: absolute; top: 90px; left: 0; width: 100%; height: 0; background-color: #fff; content: ""; border-bottom: 1px solid rgba(72,37,14,0.2); transition: all 0.25s ease; -webkit-transition: all 0.25s ease; z-index:1;}
#header .container {position: relative; padding:0; } /* 200915 수정 */
#header .logo {position: absolute; top: 1rem; left: 0; z-index:2; line-height:0; font-size:0; }/* 200915 로고수정 */
#header .logo h1 { display:inline-block; } /* 201217 로고수정 */
#header .logo a {display: inline-block; height: 49px; line-height:49px; color: #000; font-size:1.1rem; font-weight:500; letter-spacing:-1px; overflow: hidden; }/* 200915 로고수정 */
#header .logo a.logo_cu { width:105px; background: url(/images/web/product/layout/logo.png) no-repeat left top; }/* 200915 로고수정 */
#header .user {position: absolute;top: 27px;left: 10rem;width: 142px;/*200911*/height: 30px;border: 1px solid #06204b;border-radius: 15px;overflow: hidden;z-index:2;}
#header .user:before {position: absolute;top: 0;left: 0;width: 70px;/*200911*/height: 100%;background: #06204b;border-radius: 15px;content: "";transition: all 0.25s ease;-webkit-transition: all 0.25s ease;}
#header .user a {position: relative;float: left;display: block;width: 70px;/*200911*/height: 30px;line-height: 28px;text-align: center;font-size: 0.65rem;transition: all 0.25s ease;-webkit-transition: all 0.25s ease;}
#header span.user a:focus {outline-offset: -5px;outline: 2px dotted;} /*230105*/
#header .user a:nth-of-type(1) {color: #fff;}
#header .user a:nth-of-type(2) {color: #06204b;}
#header .user.enterprise:before {left: 70px;}
#header .user.enterprise a:nth-of-type(1) {color: #06204b;}
#header .user.enterprise a:nth-of-type(2) {color: #fff;}

.searchBox#topSearch {position: absolute; top: 1rem; right: 0; width: 180px;}
.searchBox input {float: left; display: block; width: 100%; height: 40px; line-height: 40px; font-size: 0.7rem; color: #000; background: transparent; border: none; border-bottom: 1px solid #000;}
.searchBox input::placeholder {font-weight: 200; color: #666;}/*230831*/
.searchBox button {float: left; margin-left: -30px; width: 30px; height: 40px; line-height: 40px; font-size: 1.1rem; color: #000;}

#navBg{position: absolute; top: 90px; left: 0; width: 100%; height: 0; background: #fff; transition: all 0.25s ease; -webkit-transition: all 0.25s ease; background:#fff; }

#mainMenu {position: relative; height: 90px; text-align: center; padding:0 9rem 0 16rem; }
#mainMenu .gnb {margin: 0 auto; display: table; height: 90px; text-align: left; overflow:hidden;}
#mainMenu .gnb a {position: relative;}
#mainMenu .gnb a:before {position: absolute; bottom: 0; left: 50%; width: 0; background: #0055a7; content: ""; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
#mainMenu .gnb a:hover {color: #0055a7;}
#mainMenu .gnb a:hover:before {left: 0; width: 100%;}
#mainMenu .gnb > li {display:table-cell; position: relative; text-align: center; }
#mainMenu .gnb > li > a {display: block; padding: 0 2rem; font-size: 1rem; color: #000; white-space: nowrap; text-overflow: ellipsis;}
#mainMenu .gnb > li > a:before {height: 3px;}
#mainMenu .gnb > li.onbank img { padding-bottom:0.25rem; }
#mainMenu .gnb .depth2 {position: absolute; top: 90px; left: 0; display: none; padding: 1rem 0; width: 100%; height: auto;}
#mainMenu .gnb .depth2 > li > a {padding: 0.25rem 0.5rem; color: #666;}
#mainMenu .gnb .depth2 > li > a:before {height: 1px;}
#mainMenu .gnb:after {clear: both; display: block; width: 100%; content: "";}
#mainMenu .gnb .depth2 {padding: 1rem 0; line-height: 1.6;}
#mainMenu .gnb .depth2 > li {margin: 0.5rem 0;}
#mainMenu .gnb .depth2 > li > a {position: relative; display: inline-block; font-weight: 400;}

#header.mainMenuOpen {background: #fff; }
#header.mainMenuOpen .gnb > li .dep2 {border-right:1px solid rgba(0,0,0,0.1);}
#header.mainMenuOpen .gnb > li:first-child .dep2{border-left:1px solid rgba(0,0,0,0.1);}
#header.mainMenuOpen #navBg{border-bottom: 1px solid rgba(72,37,14,0.2);}

#header .allMenu {display: none; }

#fullMenu {position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100vh; line-height: 1; background: #03478e; z-index: 2;}
#fullMenu .container {position: relative; height: 95%;}
#fullMenu h2 {line-height: 80px; text-align: center; font-size: 2rem; font-weight: 100; color: #fff;}
#header #fullMenu .btnSquare {position: absolute; top: 0; right: 0; background: #e7ba1c;}
#fullMenu .fullMenuScroll {padding: 2.5rem 0; height: 100%;}
#fullMenu .gnb a {color: #fff;}
#fullMenu .gnb > li + li {margin-top: 2.5rem;}
#fullMenu .gnb > li > a {font-size: 1.75rem; font-weight: normal;}
#fullMenu .gnb > li > a em {font-family: 'Titillium Web', sans-serif; font-size: 3rem; font-weight: 700; color: #f4c261;}
#fullMenu .gnb .depth2 {margin-top: 1rem; padding: 0; line-height: 1; font-weight: 200; overflow: hidden;}
#fullMenu .gnb .depth2 > li {float: left; margin-left: 2.5%; width: 18%;}
#fullMenu .gnb .depth2 > li:nth-of-type(5n+1) {clear: both; margin-left: 0;}
#fullMenu .gnb .depth2 > li:nth-of-type(n+6) {margin-top: 2.5rem;}
#fullMenu .gnb .depth2 > li >  a {display: block; margin-bottom: 1rem; line-height: 3rem; text-align: center; font-size: 0.9rem; border: 1px solid rgba(255,255,255,0.4);  font-weight: normal;}
#fullMenu .gnb .depth3 > li >  a {position: relative; display: inline-block; padding: 0.5rem 0; padding-left: 15px; color: #cad8e7;  font-weight: normal;}
#fullMenu .gnb .depth3 > li >  a:before {position: absolute; top: 0.8rem; left: 0; width: 4px; height: 4px; border-radius:50%; background: #fff; content: "";}
#fullMenu .gnb .depth4 > li {padding: 0 0.75rem;}
#fullMenu .gnb .depth4 > li >  a {padding-left: 10px; font-weight: normal;}
#fullMenu .gnb .depth4 > li >  a:before {position: absolute; top: 0.9rem; left: 0; width: 5px; height: 1px; background: #fff; content: "";}


/* ========================================== 푸터 레이아웃 */

#footer {position: relative; padding: 4rem 0 2.5rem; width: 100%; text-align: center; font-size: 0.75rem; color: #fff; background: #2e3138;}
#footer .footerLogo {position: relative; padding-bottom: 1.5rem;}
#footer .footerLogo:before,
#footer .footerLogo:after {position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #43464c; content: "";}
#footer .footerLogo:after {bottom: -1px; background: #000;}
#footer .protectionLink {margin: 1.5rem 0;}
#footer .protectionLink a {display: inline-block;}
#footer .protectionLink a strong {font-weight: inherit; color: #cd8902;}
#footer .protectionLink a + a {position: relative; margin-left: 1.5rem;}
#footer .protectionLink a + a:after {position: absolute; top: 4px; left: -0.9rem; width: 6px; height: 6px; background: #1a1c23; transform: rotate(45deg); -webkit-transform: rotate(45deg); content: "";}
#footer address {margin-bottom: 0.5rem; font-size: 0.7rem;}
#footer .copyright {margin-bottom: 1rem; font-size: 0.65rem; color: #999ba0;}
#footer .mark_wa { display:inline-block; width:109px; height:75px; vertical-align:middle; margin-left:1rem } /*210427*/
#footer .mark_wa img {max-width:100%;} /*231117*/
#sns {display: inline-block; margin: 0 auto; overflow: hidden;}
#sns li {float: left;}
#sns li a {position: relative; display: inline-block; margin: 0 0.25rem; width: 50px; height: 50px; color: transparent; overflow: hidden;}
#sns li a span {position: absolute; top: 0; left: 0; display: block; margin-right: 0.5rem; width: 50px; height: 50px; vertical-align: middle; background: url(/images/web/product/layout/sns.png) no-repeat center center; overflow: hidden; transition: .25s; -webkit-transition: .25s;}
#sns li a span.youtube {background-position: 0 0;}
#sns li a span.naverBlog {background-position: -50px 0;}
#sns li a span.naverPost {background-position: -150px 0;} /*230915*/
#sns li a span.facebook {background-position: -100px 0;} /*230915*/
#sns li a:hover span.youtube {background-position: 0 -50px;}
#sns li a:hover span.naverBlog {background-position: -50px -50px;}
#sns li a:hover span.naverPost {background-position: -150px -50px;} /*230915*/
#sns li a:hover span.facebook {background-position: -100px -50px;} /*230915*/

#btnTop {position: absolute;top: -30px;left: 50%;display: inline-block;margin-left: -30px;width: 60px;height: 60px;text-align: center;font-size: 0.6rem;color: #666;background: #fff;border-radius: 50%;}
#btnTop i {display: block; padding-top: 10px; height: 30px; line-height: 20px; font-size: 0.8rem; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
#btnTop:hover i {display: block; padding-top: 5px; line-height: 20px; font-size: 0.8rem;}


@media screen and (max-width: 1400px){
	#header .logo {left: 1rem;}
	#header .user { left:11.5rem; }
	.searchBox#topSearch {right: 1rem;}
	
	#header {padding: 0; height: 140px; }
	#header:before{top:140px;}

	#navBg{top:141px;}
	#mainMenu {display:block; padding: 80px 0 0; height: 60px; }
	#mainMenu .gnb { position:relative; width:100%; height: 60px; border-top:1px solid rgba(0,0,0,0.1);}
	#mainMenu .gnb > li > a {padding: 0 1.5rem; line-height:60px;}
	#mainMenu .gnb .depth2{top:60px;}

	#mainMenu .gnb > li > a {padding: 0 2.3rem;}
}
@media screen and (max-width: 1024px){
	#header {height: 60px; line-height: 60px;}
	#header:before {top: 60px;}
	#header .logo {top: 17px;}
	#header .logo a { height: 30px; line-height:30px; font-size:0.9rem; }/* 200915 수정 */
	#header .logo a.logo_cu { width:65px; background-size: auto 100%; }/* 200915 수정 */
	#header .user {display: none; }

	.searchBox#topSearch {top: 10px; right: 60px;}

	#header .allMenu {display:block; position: absolute; top: 0; right: 0; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 1.5rem; overflow: hidden;}
	#header .allMenu i {transform: rotate(0); -webkit-transform: rotate(0); transform-origin: center center; -webkit-transform-origin: center center; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
	#header .allMenu:hover i {transform: rotate(180deg); -webkit-transform: rotate(180deg);}
	#header .allMenu.hash {display: block;}
	#header .allMenu.hashClose {color: #fff;}

	#mainMenu {display: none;}
	
	#fullMenu h2 {line-height: 60px; font-size: 1.25rem;}
	#fullMenu .container {padding: 0;}
	#fullMenu .fullMenuScroll {padding: 0;}
	#fullMenu .gnb > li + li {margin-top: 0;}
	#fullMenu .gnb > li >  a {position:relative; display: block; padding: 0.75rem 1rem; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.5);}
	#fullMenu .gnb > li >  a em {margin-right: 0.25rem; font-size: 1.25rem; font-weight: 200;}
	#fullMenu .gnb > li.dep > a:after{position: absolute; top: 14px; right: 1rem; font-family: 'xeicon'; font-size: 1rem; color: #fff; content: "\e943"; transition: all .2s ease; -webkit-transition: all .2s ease;}
	#fullMenu .gnb > li.dep.active> a:after{transform: rotate(180deg); -webkit-transform: rotate(180deg);}	
	#fullMenu .gnb .depth2 {margin-top: 0; padding:10px; background:#093c72;}
	#fullMenu .gnb .depth2 > li {float: none; margin: 0; width: 100%;}
	#fullMenu .gnb .depth2 > li:nth-of-type(n+6) {margin-top: 0;}
	#fullMenu .gnb .depth2 > li >  a {position:relative; margin-bottom: 0; display: block; padding: 0.5rem 1rem; line-height: 1.3; text-align: initial; border: none;}
	#fullMenu .gnb .depth3 > li >  a {position:relative; display: block; padding: 0.5rem 1rem 0.5rem 2rem; color: #d8e3ef;}
	#fullMenu .gnb .depth4 > li >  a {position:relative; display: block; padding: 0.5rem 1rem 0.5rem 1.5rem; color: #cad8e7;}
	#fullMenu .gnb .depth4{background:#0c3663; margin:10px 1rem;}
	#fullMenu .gnb .depth4 > li {padding: 0;}
	#fullMenu .gnb .depth3 > li >  a:before {left: 1.3rem;}
	#fullMenu .gnb .depth4 > li >  a:before {left: 0.8rem;}
	#fullMenu .gnb .depth2 > li.dep >  a:after,
	#fullMenu .gnb .depth3 > li.dep >  a:after{position: absolute; top: 14px; right: 1rem; font-family: 'xeicon'; font-size: 0.8rem; color: #fff; content: "\e9c5"; transition: all .2s ease; -webkit-transition: all .2s ease;}
	#fullMenu .gnb .depth3 > li.dep >  a:after{font-size: 0.6rem; color: #d8e3ef; right: 1.1rem}
	#fullMenu .gnb .depth2 > li.dep.active >  a:after,
	#fullMenu .gnb .depth3 > li.dep.active >  a:after,
	#fullMenu .gnb .depth4 > li.dep.active >  a:after{content: "\e9c1"; transform: rotate(180deg); -webkit-transform: rotate(180deg);}
	#fullMenu .gnb {border-top: 1px solid rgba(255,255,255,0.5);}
	#fullMenu .gnb .depth2,
	#fullMenu .gnb .depth3,
	#fullMenu .gnb .depth4 {display: none;}
	#fullMenu .gnb .depth2.active,
	#fullMenu .gnb .depth3.active,
	#fullMenu .gnb .depth4.active {display: block;}

	#footer {line-height: 1.3;}
	#footer .footerInfo {padding: 2rem 1rem 1rem 7rem;}
	#footer address span {white-space: nowrap;}
	#footer address span:first-child::before {display: block; width: 100%; height: 0; content: '';}
}
@media screen and (max-width: 768px){
	#footer {padding: 2.5rem 0;}
	#footer .protectionLink {margin: 1rem 0;}
	#footer .protectionLink a {display: block;}
	#footer .protectionLink a + a {margin-top: 0.25rem; margin-left: 0;}
	#footer .protectionLink a + a:after {display: none;}
}
@media screen and (max-width: 560px){
	#footer .mark_wa { display:none; }/*210510*/
}
@media screen and (max-width: 414px){
	.searchBox#topSearch {display: none;}
	#header.mainMenuOpen .logo {display: none;}
	#header.mainMenuOpen .searchBox#topSearch {display: block; width: calc(100% - 80px);}
	#header.mainMenuOpen .searchBox input::placeholder {color: #fff;}
}