@import url("/common/css/basic.css");

/*-------------------------------------------------
Author : SY,CHo
Create date : 2020. 08. 04.
Edit : sehyun oh, 2020. 10. 22.
-------------------------------------------------*/

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

body { font-family:"Arial"; letter-spacing:0; word-wrap:break-word; }

#wrap {width: 100%; overflow: hidden;}

.container {margin: 0 auto; width: 100%; max-width: 1400px;}
.container:after {clear: both; display: block; width: 100%; content: "";}

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

#header {position: relative; width: 100%; height: 5.25rem; background: #fff; z-index: 3;}
#header:after {clear: both; display: block; width: 100%; content: "";}
#header .bgMenuBar {position: absolute; left: 0; top: 5.25rem; display: none; width: 100%; height: 100vh; background: rgba(0,0,0,0.8);}
#header .bgMenuBar .inner {width: 100%; height: auto; background: #fff;}

.utilWrap {height: 3rem;}
#header h1 {float: left; width: 268px; height: 44px; margin-top: 0.35rem; margin-left: 0.25rem;}
#header h1 a {display: block; width: 100%; height: 100%; color: transparent; background: url("/images/web/english/layout/logo.png") no-repeat left top; background-size: 100% 100%; overflow: hidden;}
#util {float: right; display: inline-block; margin-top: 1rem; height: 1rem; line-height: 1rem; font-size: 0.7rem; color: #333;}
#util .fontSize,
#util .name,
#util a {float: left; display: inline-block;}
#util > a {position: relative; padding-right: 1.25rem;}
#util > a:last-of-type { padding-right:0; }
#util > a:before {position: absolute; top: 0.2rem; right: 0.675rem; width: 1px; height: 0.6rem; background: #a0a0a0; content: "";}
#util > a:last-of-type:before { display:none; }
#util > a.globus span {display: block; padding-left: 1rem; letter-spacing: 0; background: url("/images/web/english/layout/ico_globus.png") no-repeat left center; image-rendering:-webkit-optimize-contrast;}
#util > a.symbol img { margin-right:0.2rem; }
#util > a.symbol span { vertical-align:middle; }

.menuWrap {height: 2.25rem; background: #004a8f;}
#mainMenu {float: left; width: calc(100% - 12.25rem); word-break: keep-all;}
#mainMenu .gnb:after {clear: both; display: block; width: 100%; content: "";}
#mainMenu .gnb > li {position: relative; float: left; width: 20%;}
#mainMenu .gnb > li > a {position: relative; display: block; width: 100%; line-height: 2.25rem; text-align: center; /* font-family: 'SCDream'; */ font-size: 0.9rem; font-weight: 600; color: #fff;}
#mainMenu .gnb > li > a.now,
#mainMenu .gnb > li > a:hover {background-color: #206cb3; text-decoration:none;}
#mainMenu .gnb > li > a:after {position: absolute; top: 0.65rem; left: 0; width: 1px; height: 1rem; background: rgba(159,175,217,0.5); content: "";}
#mainMenu .gnb > li:first-of-type > a:after {display: none;}
#mainMenu .gnb > li .depth2 {position: absolute; top: 2.25rem; left: 0; display: none; padding: 0.75rem 0; width: 100%; background: #fff; border-right: 1px solid #d9d9d9;}
#mainMenu .gnb > li:first-of-type .depth2 {border-left: 1px solid #d9d9d9;}
#mainMenu .gnb > li .depth2 > li > a {position: relative; display: block; padding: 0.45rem 0.5rem; line-height: 1.3; /* font-family: 'SCDream'; */ font-size: 0.75rem; color: #222;}
#mainMenu .gnb .depth2 > li.child > a {padding-right: 2rem;}
#mainMenu .gnb .depth2 > li.child > a:before {position: absolute; top: 0.65rem; right: 0.5rem; display: block; width: 6px; height: 11px; background: url("/images/web/english/layout/mob_dep_wh.png") no-repeat; content: ""; -webkit-transition: all .2s ease; -ms-transition: all .2s ease; transition: all .2s ease;}
#mainMenu .gnb > li.on .depth2 > li > a {background: #d3e4ef;}
#mainMenu .gnb > li.on .depth2 > li > a:before {top: 0.8rem; width: 11px; height: 6px; background-image: url("/images/web/english/layout/mob_dep.png");}
#mainMenu .gnb .depth3Wrap {display: none;}
#mainMenu .gnb .depth3Wrap .menuMore {display: block; padding: 0.4rem; text-align: center; background: #fff; border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6;}
#mainMenu .gnb .depth3Wrap .menuMore span {padding-right: 1rem; background: url("/images/web/english/layout/mob_dep.png") no-repeat right center;}
#mainMenu .gnb .depth3 {display: none;}
#mainMenu .gnb .depth3 > li > a {position: relative; display: block; padding: 0.45rem 1rem; line-height: 1.3; /* font-family: "SCDream"; */ font-size: 0.7rem; color: #666;}
#mainMenu .gnb .depth3 > li > a:before {position: absolute; top: 0.85rem; left: 0.7rem; display: block; width: 2px; height: 2px; background: #666; content: "";}
#mainMenu .gnb .depth3 > li > a:hover {background: #d3e4ef; text-decoration:none;}
#mainMenu .gnb .depth3Wrap .depth3 {display: block; height: 7.2rem; overflow: hidden;}
#mainMenu .gnb .depth3Wrap.active .depth3 {height: auto;}
#mainMenu .gnb .depth3Wrap.active .menuMore span {background-image: url("/images/web/english/layout/mob_dep_wh_up.png");}

#mainMenu li.window > a {padding-right: 2rem !important;}
#mainMenu li.window > a:after {position: absolute; top: 0.65rem; right: 0.5rem; display: block; width: 11px; height: 11px; background: url("/images/web/english/layout/ico_window.png") no-repeat center center; content: "";}

/* active - 메인메뉴, depth2 */
#header.mainMenuOpen .bgMenuBar,
#header.mainMenuOpen .gnb .depth2 {display: block;}
#mainMenu .gnb > li.active .depth2 {background: #f9f9f9;}
#mainMenu .gnb .depth2 > li > a:hover,
#mainMenu .gnb .depth2 > li > a:focus,
#mainMenu .gnb .depth2 > li.active > a {background: #d3e4ef; text-decoration:none;}
#mainMenu .gnb .depth2 > li.child > a:hover:before,
#mainMenu .gnb .depth2 > li.child > a:focus:before,
#mainMenu .gnb .depth2 > li.active.child > a:before {top: 0.8rem; width: 11px; height: 6px; background-image: url("/images/web/english/layout/mob_dep.png");}
#mainMenu .gnb .depth2 > li.active.child > .depth3 {display: block;}
#mainMenu .gnb .depth2 > li.child > .depth3Wrap,
#mainMenu .gnb .depth2 > li.child > .depth3Wrap .depth3 {display: block;}

#totalSearch {float: left; display: inline-block; margin-top: 0.25rem; width: 12.25rem; height: 1.75rem; line-height: 1.75rem; color: #000; background: #fff; overflow: hidden;}
#totalSearch input {float: left; display: block; padding:0 0 0 0.5rem; width: calc(100% - 4rem); height: 1.75rem; line-height: 1.75rem; background: transparent; border: none;}
#totalSearch input::placeholder {font-size: 0.7rem; font-weight: 200; color: #888;}
#totalSearch input:-ms-input-placeholder {font-size: 0.7rem; font-weight: 200; color: #888;}
#totalSearch button {display: block; float: left; width: 2rem; height: 1.75rem; background: url("/images/web/english/layout/ico_glass.png") no-repeat center center;}
#totalSearch .btnSearchClose { display:none; }
#openKeyBoard { display:block; position:relative; float:left; width:35px; height:1.75rem; }
#openKeyBoard img { position:absolute; top:0; left:0; bottom:0; right:0; width:20px; height:14px; margin:auto; }

/* 모바일용 버튼 */
.menuWrap .allMenu {position: absolute; bottom: 0.5rem; left: 0.85rem; display: none; padding: 1.25rem 0 0; width: 2.2rem; height: 2.2rem; line-height: 0; text-align: center; background: #fff url("/images/web/english/layout/ico_allMenu.png") no-repeat center 0.4rem; border: 1px solid #c8c8c8;}
.menuWrap .allMenu:hover { text-decoration:none; }
.menuWrap .allMenu em {display: block; margin-top: 0.2rem; line-height: 1; font-size: 0.5rem; color: #555;}
.menuWrap .btnSearch {position: absolute; bottom: 0.5rem; right: 0.85rem; display: none; padding: 0.25rem 0; width: 2.2rem; height: 2.2rem; line-height: 2.2rem; text-align: center; background: #004a8f url("/images/web/english/layout/ico_glass_white.png") no-repeat center center;}

#fullMenu {position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100vh; text-align: left; background: #e3e5ec; z-index: 3;}
#fullMenu .container {position: relative; max-width:1400px; height: 95%;}
#fullMenu h2 {line-height: 80px; text-align: center; font-size: 2rem; font-weight: 100; color: #fff;}
#fullMenu .fullMenuScroll {padding:2.5rem 0; height: 100%;}
#fullMenu .util { display:none; }
#fullMenu .gnb a {color: #333; font-weight:400;}
#fullMenu .gnb > li + li {margin-top: 1rem;}
#fullMenu .gnb > li > a {font-size: 1rem;}
#fullMenu .gnb .depth2 {margin-top: 1rem; padding: 0; line-height: 1.3; font-weight: 200; overflow: hidden;}
#fullMenu .gnb .depth2 > li {float: left; margin-left: 2%; width: 22%;}
#fullMenu .gnb .depth2 > li:nth-of-type(4n+1) {clear: both; margin-left: 0;}
#fullMenu .gnb .depth2 > li:nth-of-type(n+5) {margin-top: 1rem;}
#fullMenu .gnb .depth2 > li > a {display: block; margin-bottom: 0.3rem; line-height: 1.8rem; text-align: center; font-size: 0.75rem; border:1px solid #2987d9; transition:all 0.1s; }
#fullMenu .gnb .depth2 > li > a:hover { background:#2987d9; color:#fff; }
#fullMenu .gnb .depth3 > li a {position: relative; display: inline-block; padding: 0.3rem 0; padding-left: 0.5rem;}
#fullMenu .gnb .depth3 > li > a:before {position: absolute; top: 0.7rem; left: 0; width: 3px; height: 3px; background: #333; content: "";}
#fullMenu .gnb .depth3 > li a:hover { text-decoration:underline; }
#fullMenu .gnb .depth4 > li {padding: 0 0.75rem;}
#fullMenu .gnb .depth4 > li > a {padding-left: 10px; font-size:0.7rem;}
#fullMenu .gnb .depth4 > li > a:before {position: absolute; top: 0.75rem; left: 0; width: 5px; height: 1px; background: #333; content: "";}
#fullMenu .gnb .depth5 > li > a {padding-left: 15px;}
#fullMenu .gnb .depth5 > li > a:before {position: absolute; top: 0.7rem; left: 0; width: 1px; height: 4px; background: #333; content: "";}
#fullMenu .allMenu {position: absolute; top: 0; right: 0; display: inline-block; width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align: center; font-size: 2rem; color: #fff; background: #2987d9; overflow: hidden;}
#fullMenu .allMenu:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("/images/web/english/layout/ico_close_white.png") no-repeat center center; content: ""; 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;}
#fullMenu .allMenu:hover:before {transform: rotate(180deg); -webkit-transform: rotate(180deg);}

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

#footer {padding: 1.75rem 0; border-top:1px solid #dfdfdf; background: #fff; font-size:0.8rem; line-height:1.5; color:#222;}
#footer .copyright { margin-top:0.25rem; letter-spacing:0;}

#footer .top { display:none; position:absolute; top:-2.6rem; right:1rem; z-index:1; }
#footer .top a {display:block;padding: 1.3rem 0 0;width:2.6rem;height:2.6rem;text-align:center;font-size:0.6rem;color:#fff;background: rgba(0,0,0,0.5) url("/images/web/english/layout/ico_top_white.png") no-repeat center 0.4rem;border-radius:50%;background-size: 10px;image-rendering: -webkit-optimize-contrast;}
#footer .top a:hover {background-color: rgba(0,0,0,0.9); text-decoration:none;}

@media screen and (max-width: 1440px){
	.container {max-width:none; padding: 0 1rem;}
}

@media screen and (min-width: 481px) and (max-width: 1024px){
	#util {border: 1px solid #d7d7d7; border-top: none;}
	#util > a:before {height: 100%;}
}

@media screen and (max-width: 1024px){
	.container {padding: 0 0.85rem;}

	#header.mainMenuOpen .bgMenuBar,
	#util .fontSize,
	#mainMenu {display: none;}
	#header {height: 98px; border-bottom: 2px solid #004a8f;}
	.utilWrap {height: 33px;}
	#header h1 {position: absolute; top: 45px; left: 0; right:0; width: 246px; height: 40px; margin:0 auto;}
	#header h1 a {background-image: url("/images/web/english/layout/logoT.png");}
	#util {display: block; margin-top: 0; width: 100%; height: 33px; line-height: 33px;}
	#util > a {padding-right: 0; width: 33.33%; text-align: center;}
	#util > a:before {top: 0; right: 0; background: #d7d7d7;}
	#util > a:nth-last-of-type(2):before,
	#util > a:last-of-type:before {display: none;}
	#util > a.symbol { display:none; }
	#util > a.globus span { display:inline-block; }
	#util .allMenu { display:none; }
	.menuWrap {height: auto; background: transparent;}

	#totalSearch {position: absolute; top: 33px; left: 0; display: none; margin-top: 0; padding: 16px 10px; width: 100%; height: 64px; background: #004a8f;}
	#totalSearch input {width: calc(100% - 70px); padding-right:0.5rem; background: #fff;}
	#totalSearch button,
	#totalSearch .btnSearchClose {display: inline-block; width: 35px; height:35px; background-repeat:no-repeat; background-position:50% 50%;}
	#totalSearch button {background-image: url("/images/web/english/layout/ico_glass_white.png");}
	#totalSearch .btnSearchClose {display:inline-block; background-image: url("/images/web/english/layout/ico_close_white.png");}
	
	#openKeyBoard { display:none; }

	/* 모바일용 버튼 */
	.menuWrap .allMenu {display: inline-block;}
	.menuWrap .btnSearch {display: inline-block;}

	#util,
	.util {display: block; margin: 0; width: 100%; height: 33px; line-height: 33px;}
	#fullMenu .util > a:last-of-type:before {display: none;}

	#fullMenu {width: 50%; background: none;}
	#fullMenu:before {position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: rgba(0,0,0,0.5); content: "";}
	#fullMenu h2 {line-height: 2.5rem; font-size: 1rem;}
	#fullMenu .container {padding: 0; height: 100%; background: #fff;}
	#fullMenu .allMenu {right: -2.5rem; width: 2.5rem; height: 2.5rem; line-height: 2.5rem;}
	#fullMenu .util { display:block; margin: 0; height: auto; overflow: hidden; border-bottom:1px solid #d7d7d7;}
	#fullMenu .util > a { display:block; float:left; position:relative; width:33.33%; text-align:center; }
	#fullMenu .util > a:before {position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #d7d7d7; content: "";}
	#fullMenu .util > a.globus span {display: inline-block; padding-left: 1rem; letter-spacing: 0; background: url("/images/web/english/layout/ico_globus.png") no-repeat left center;}
	#fullMenu .snsLstBox {display: block;}
	#fullMenu .snsLstBox .snsLst {float: none; margin: 0 auto;}
	#fullMenu .fullMenuScroll {padding: 0; height: calc(100% - 77px);}
	#fullMenu .gnb a {position: relative; display: block !important; color: #333; border-bottom: 1px solid #d7d7d7;}
	#fullMenu .gnb li > a:after {position: absolute; top: 0.65rem; right: 1rem; width: 15px; height: 15px; background-size: auto 15px; content: ""; transition: all .2s ease; -webkit-transition: all .2s ease;}
	#fullMenu .gnb li.child > a:after {background: no-repeat center center;}
	#fullMenu .gnb li.link > a:after {top: 0.5rem; background: url("/images/web/english/layout/bullet.png") no-repeat -90px 0;}

	#fullMenu .gnb > li.child > a:after {top: 0.75rem; background-image: url("/images/web/english/layout/m_nav_down.png");}
	#fullMenu .gnb > li.child.down > a {background-color: #004a8f; color: #fff;}
	#fullMenu .gnb > li.child.down > a:hover { text-decoration:none; }
	#fullMenu .gnb > li.child.down > a:after {background-image: url("/images/web/english/layout/m_nav_up.png");}

	#fullMenu .gnb .depth2 > li.child > a:after {background-image: url("/images/web/english/layout/nav_dep2_in.png");}
	#fullMenu .gnb .depth2 > li.child.down > a {background-color: #025cb1; color: #fff;}
	#fullMenu .gnb .depth2 > li.child.down > a:after {background-image: url("/images/web/english/layout/nav_dep2_open.png");}

	#fullMenu .gnb .depth3 > li.child > a:after {background-image: url("/images/web/english/layout/m_nav3_down.png");}
	#fullMenu .gnb .depth3 > li.child.down > a:after {background-image: url("/images/web/english/layout/m_nav3_up.png");}

	#fullMenu .gnb .depth4 > li.child > a:after {background-image: url("/images/web/english/layout/nav_dep4_in.png");}
	#fullMenu .gnb .depth4 > li.child.down > a:after {background-image: url("/images/web/english/layout/nav_dep4_open.png");}

	#fullMenu .gnb .depth4 > li.child.down > a {border-bottom: none;}
	#fullMenu .gnb .depth4 > li.child.down .depth5 {margin: 0 0.75rem 0 1.75rem; padding: 0.5rem 1rem; background: #f2f2f2; border: 1px dashed #a3a3a3;}

	#fullMenu .gnb > li > a {padding: 0.75rem; font-size: 0.9rem;}
	#fullMenu .gnb > li > a em {margin-right: 0.25rem; font-size: 1.25rem; font-weight: 200;}
	#fullMenu .gnb > li + li {margin-top: 0;}
	#fullMenu .gnb ul {display: none;}
	#fullMenu .gnb .depth2 {margin-top: 0;}
	#fullMenu .gnb .depth2 > li {float: none; margin: 0; width: 100%;}
	#fullMenu .gnb .depth2 > li:nth-of-type(n+5) {margin-top: 0;}
	#fullMenu .gnb .depth2 > li > a {margin-bottom: 0; padding: 0.5rem 1rem; line-height: 1.3; text-align: inherit; font-size: 0.8rem; border: none; border-bottom: 1px solid #d7d7d7;}
	#fullMenu .gnb .depth2 > li > a:hover { text-decoration:none; }
	#fullMenu .gnb .depth3 > li > a {padding: 0.5rem 1rem 0.5rem 1.75rem; color: inherit;}
	#fullMenu .gnb .depth3 > li > a:before {top: 0.9rem; left: 1.25rem; width: 3px; height: 3px; background: #b3b3b3; border-radius: 50%;}
	#fullMenu .gnb .depth4 > li {padding: 0;}
	#fullMenu .gnb .depth4 > li > a {padding: 0.5rem 1rem 0.5rem 2.5rem; color: inherit; border-bottom: none;}
	#fullMenu .gnb .depth4 > li > a:before {top: 0.9rem; left: 1.9rem; width: 5px; height: 1px; background: #b3b3b3;}
	#fullMenu .gnb .depth5 > li > a {padding: 0.25rem 0.5rem; color: inherit; border-bottom: none;}
	#fullMenu .gnb .depth5 > li > a:before {top: 0.65rem; left: 0; width: 2px; height: 2px; background: #b3b3b3;}
	
	#footer > .container { position:relative; }
	#footer .top { display:block; }
}

@media screen and (max-width: 768px){
	.container {padding: 0 0.5rem;}

	#fullMenu {width: 80%;}
}

@media screen and (max-width: 600px){
	#util {font-size: 0.65rem;}

	/* 모바일용 버튼 */
	.menuWrap .allMenu {left: 0.5rem;}
	.menuWrap .btnSearch {right: 0.5rem;}
}

@media screen and (max-width: 480px){
	#header .container {padding: 0;}
	#util {display: table; width: 100%; border-bottom: 1px solid #d7d7d7;}
	#util > a {float: none; display: table-cell; padding: 0 0.25rem; width: auto; font-size: 13px; white-space: nowrap;}
	#util > a:before {top: 14px; height: 7px;}
	#util .noShowM {display: none;}

	#fullMenu .util > a { font-size:12px; }
	#fullMenu .util > a:before { top:0; height:100%; }
}

@media screen and (max-width: 380px){
	#header h1 {top: 52px; width:180px; height:30px;}
	#header h1 a {background-image: url("/images/web/english/layout/logoM.png");}
}

@media screen and (max-width: 360px){
	#util > a {font-size: 12px;}
}

@media screen and (max-width: 320px){
	#header h1 {width:156px; height:26px;}
	#header h1 a {background-image: url("/images/web/english/layout/logoM2.png");}

	#util > a {font-size: 11px;}
}