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

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

#header {position: relative; top: auto; left: auto; z-index: 9999;}
#header .logo a {background-image: url(/images/web/english/layout/logo.mainMenuOpen.png);}
#header #mainMenu .gnb > li > a {color: #000;}
#header #mainMenu .gnb > li > a:hover {color: #0055a7;}
#header #util {color: #000;}
.allMenu .bar:before {background-color: #000;}

/* 251127 순차적 구조 나중에 롤백 */
.locationWrap {position: relative; height: 60px; background: #f3f3f3; z-index: 11;}
.locationWrap .container {position: absolute; top: 0;left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.location .home,
.location a {display: inline-block; padding: 0 1rem; line-height: 60px; color: #666;}
.location a {width: 100%; white-space: nowrap;}
.location .home,
.location .depth1 {float: left;}
.location .home i {margin-right: 0.5rem; width: 35px; height: 35px; line-height: 35px; text-align: center; font-size: 1rem; color: #fff; background: #666; border-radius: 50%;}

.location .depth1 {position: relative; transition: all .25s ease; -webkit-transition: all .25s ease;}
.location ul {padding-top: 60px;}
.location li {width: 100%; min-width: 290px; height: 60px; opacity: 0; visibility: hidden; transition: all .25s ease; -webkit-transition: all .25s ease;}/* 200518 */
.location li.active {position: absolute; top: 0; left: 0; opacity: 1; visibility: visible;}
.location li.active > a {position: relative; padding: 0 3rem; color: #000;}
.location li.active > a:before {position: absolute; top: 0; left: 1rem; font-family: 'xeicon'; content: "\e940";}
.location li.active > a:after {position: absolute; top: 0; right: 1rem; font-family: 'xeicon'; content: "\e936";}
.location .depthWrap{display: flex;}
.location .depth1Wrap,
.location .depth2Wrap,
.location .depth3Wrap {position: relative;}
.location .depth1 > li.active .depth2,
.location .depth2 > li.active .depth3 {opacity: 1; visibility: visible;}
.location .depth1,
.location .depth2,
.location .depth3 {display:none; position: relative;top: 0;height: 0;}
.location .depth1.on,
.location .depth2.on,
.location .depth3.on {display:block;}
.location .depth1.open,
.location .depth2.open,
.location .depth3.open {height: auto;}
.location .depth1.open > li,
.location .depth2.open > li,
.location .depth3.open > li {opacity: 1; visibility: visible; background: rgba(57,60,69,0.63);}
.location .depth1.open > li > a,
.location .depth2.open > li > a,
.location .depth3.open > li > a {color: #fff;}
.location .depth1.open > li.active > a:after,
.location .depth2.open > li.active > a:after,
.location .depth3.open > li.active > a:after {content: "\e930";}

/* // 251127 순차적 구조 나중에 롤백 */

.shareWrap {position: absolute; top: 0; right: 0;}
.shareWrap > li {position: relative; float: left;}
.shareWrap a {display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 1rem;}
.shareWrap > li > a {color: #7f7f7f;}
.shareWrap > li > a.share {position: relative;}
.shareWrap > li > a.share:after {position: absolute; left: 0; top: 20px; width: 1px; height: 1rem; background: #ccc; content: "";}
.shareWrap > li > a:hover,
.shareWrap > li > a.active {color: #000;}
.shareWrap a.facebook {color: #fff; background: #1a3d95;}
.shareWrap a.twitter {color: #fff; background: #1da1f2;}
.shareWrap a.kakaotalk {font-size: 25px; color: #3c1e1e; background: #fae301;}
.shareWrap a.kakaostory {font-size: 22px; color: #fff; background: #fbcb00;}
#shareList {position: absolute; left: 0; top: 60px; display: none;}
#shareList a {height: 60px; line-height: 60px;}
#shareList a:focus {border:2px solid #fff; outline-offset:3px !important;} /*20240909 웹접근성*/

/* ========================================== 컨텐츠 레이아웃 */

#contents {position:relative; padding: 1.5rem 0;}
#contents:after {clear: both; display: block; width: 100%; content: "";}
#contents .container{max-width:100%;}

.titleH2 {width:100%; max-width:1400px; margin:0 auto 1.5rem; padding-bottom: 1.5rem; font-size:2rem; font-weight:500; color:#111; text-align: center; border-bottom: 4px solid #ebebea;}

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

/* ========================================== 서브 컨텐츠 */

/* animation */
.mtBox *[class*="mot"]{opacity:0; transition:all .5s ease-out; -webkit-transition:all .5s ease-out;}
.mtBox *[class*="mot"][class$="-left"]{transform:translateX(-30px); -webkit-transform:translateX(-30px);}
.mtBox *[class*="mot"][class$="-right"]{transform:translateX(30px); -webkit-transform:translateX(30px);}
.mtBox *[class*="mot"][class$="-top"]{transform:translateY(-30px); -webkit-transform:translateY(-30px);}
.mtBox *[class*="mot"][class$="-bottom"]{transform:translateY(30px); -webkit-transform:translateY(30px);}
.mtBox.active *[class*="mot"]{opacity:1; transition:all .5s ease-out; -webkit-transition:all .5s ease-out;}
.mtBox.active *[class*="mot1"]{ transition-delay:0s; -webkit-transition-delay:0s; }
.mtBox.active *[class*="mot2"]{ transition-delay:.45s; -webkit-transition-delay:.45s; }
.mtBox.active *[class*="mot3"]{ transition-delay:.9s; -webkit-transition-delay:.9s; }
.mtBox.active *[class*="mot4"]{ transition-delay:1.1s; -webkit-transition-delay:1.1s; }
.mtBox.active *[class*="mot5"]{ transition-delay:1.45s; -webkit-transition-delay:1.45s; }
.mtBox.active *[class*="mot6"]{ transition-delay:1.9s; -webkit-transition-delay:1.9s; }
.mtBox.active *[class*="mot"][class$="-left"]{transform:translateX(0px); -webkit-transform:translateX(0px);}
.mtBox.active *[class*="mot"][class$="-right"]{transform:translateX(0px); -webkit-transform:translateX(0px);}
.mtBox.active *[class*="mot"][class$="-top"]{transform:translateY(0px); -webkit-transform:translateY(0px);}
.mtBox.active *[class*="mot"][class$="-bottom"]{transform:translateY(0px); -webkit-transform:translateY(0px);}

/* 0102 Chairman's Message */
.grtWrap{position:relative; padding-left:600px;}
.grtWrap .grtImgBox{position:absolute; left:0; top:0;}
.grtWrap .grtImg{position:relative; padding:40px;}
.grtWrap .grtImg img{position:relative; width:475px; height:535px; z-index:1;}
.grtWrap .grtImg .name span{display:inline-block;padding:15px 60px 15px 15px;color: #333;font-size:0.8rem;background:#efbf4a url('/images/web/english/sub/grt_mark.png') no-repeat 95% bottom;}
.grtWrap .grtImg .name span strong{ display:block; font-weight:600; font-size:1rem; text-align:left; }
.grtWrap .grtImg .bg{position:absolute; left:0; top:0; width:270px; height:270px; z-index:0;
	background: #006fba; /* Old browsers */
	background: -moz-linear-gradient(left,  #006fba 0%, #17a7db 100%) ; /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #006fba 0%,#17a7db 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #006fba 0%,#17a7db 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006fba', endColorstr='#17a7db',GradientType=1 ); /* IE6-9 */}
.grtWrap .grtCont{color:#000;}
.grtWrap .grtCont h3{font-size:5rem; line-height:1.2; color:#169ED0; text-align:right; letter-spacing:-2px; margin:1rem 0 0;}/*211028 접근성 컬러 수정*/
.grtWrap .grtCont h4{font-size:2.5rem; color:#111; letter-spacing:-1px; line-height:1.2; font-weight:600; margin:1.5rem 0;}
.grtWrap .grtCont h4 strong{font-weight:600;}
.grtWrap .grtCont .txt{font-size:0.8rem;}

/* 0103 Brief History*/
.briefHist dl { position:relative; min-height:32px; padding:0 0 0 250px; margin-top:4rem; overflow:hidden; }
.briefHist dl:after { content:""; position:absolute; left:410px; top:0; width:10px; height:15px; background:#0056a5; }
.briefHist dl:before { content:""; position:absolute; left:410px; top:0; width:10px; height:100%; background:#dadbdd; }
.briefHist dl dt { position:absolute; left:0; top:0; font-family:'Titillium Web'; font-size:2.5rem; color:#0056a5; font-weight:600; line-height:1; letter-spacing:-1px; }
.briefHist dl dd { position:relative; }
.briefHist dl dd ul li { position:relative; padding-left:220px; margin-bottom:0.8rem; }
.briefHist dl dd ul li .date { position:absolute; left:0; top:0; font-size:0.9rem; color:#000; }
.briefHist dl dd ul li div {color: #333;}


/* Highlights */
.highlight dt { font-weight:600 !important; font-size:1.1rem !important; line-height:1.8rem; }
.highlight dt .date {display:block;color: #666;}
.img_table td { padding:0.5rem; }
.highlight .left_img { position:absolute; float:left; width:216px; }
.highlight .right_txt { padding-left:250px; min-height:140px; }

@media screen and (max-width: 1440px){

	.subCont{width:96%; padding:20px 0;}
	.grtWrap { padding-left:600px; }
	
}

@media screen and (max-width: 1240px){
    /* 251127 순차적 구조 나중에 롤백 */
    	.locationWrap .container {padding-right: 120px;}
	.location .home {display: none;}
	.location li {min-width: 100%;}
	.location li.active:after {position: absolute; top: 0; right: -1px; width: 1px; height: 100%; background: #ccc; content: "";}
	.location li.active.depCt:after{display:none;}
	.location li.active > a {padding: 0 1rem;}
	.location li.active > a:before {display: none;}

	.location .depth1Wrap,
	.location .depth2Wrap,
	.location .depth3Wrap {width:100%;}
	.location .depthWrap div:not(.mobLnb){display: none;}
	.location .depth1{width:100%;}
	.location .depth2{width:100%; left:0;}
	.location .depth3 {width:100%; left:0;}
	.location .depth1 > li.active > a{display:none;}
	.location .depth2 > li.active.depCt > a{display:none;}
/* // 251127 순차적 구조 나중에 롤백 */
	/* 0102 Chairman's Message */
	.grtWrap{padding-left:450px;}
	.grtWrap .grtImg{padding:30px;}
	.grtWrap .grtImg img{width:375px; height:auto;}
}

@media screen and (max-width: 1024px){
	#header > .container .allMenu {border-color: #000;}
	#header > .container .allMenu .bar:before {background-color: #000;}
		
	.locationWrap .container {padding-right: 60px;}
	/* .location .home {display: none;}
	.location li {min-width: 100%;}
	.location li.active:after {position: absolute; top: 0; right: -1px; width: 1px; height: 100%; background: #ccc; content: "";}
	.location li.active > a {padding: 0 1rem;}
	.location li.active > a:before {display: none;}
	.location .depth1 {width: 50%;}
	.location .depth2 {width: 100%;} */

	.shareWrap > li > a.print{display:none;}
	.shareWrap > li > a.share:after {display:none;}
		
	/* 0102 Chairman's Message */
	.grtWrap{padding-left:0;}
	.grtWrap .grtImgBox{position:relative; left:auto; top:auto; text-align:center;}
	.grtWrap .grtImg{display:inline-block; float:none;}
	.grtWrap .grtImg .name span{float:left;}
	
	/* 0103 Brief History */
	.briefHist dl { padding:0 0 0 180px; }
	.briefHist dl:before, .briefHist dl:after { left:320px; }
	.briefHist dl dd ul li { padding-left:190px; }

}


@media screen and (max-width: 800px){

	.contBox .list_dl dt br { display:none; }
	.contBox .contnum { float:left; margin-right:10px; }

	/* 0103 Breif History */
	.briefHist dl { padding:0; }
	.briefHist dl:before, .briefHist dl:after { top:75px; left:140px; }
	.briefHist dl dt { position:relative; margin-bottom:1.5rem; }
	
	/* Highlights */
	.highlight .left_img { position:relative; float:none; margin:0 auto 1rem; }
	.highlight .right_txt { padding-left:0; min-height:auto; }
	
}

@media screen and (max-width: 640px){

	.locationWrap .container{padding-right:60px;}
	.location .depth1{width:100%;}
	.location .depth1 > li.active > a{display:none;}
	.location .depth2{left:0;}
		
	/* 0102 Chairman's Message */
	.grtWrap .grtImg img{width:300px; height:auto;}
	.grtWrap .grtCont h3{font-size:3.5rem; }
	.grtWrap .grtCont h4{font-size:2rem; }


	
}

@media screen and (max-width: 560px){

	.locationWrap .container{padding-right:60px;}
	.location .depth1{width:100%;}
	.location .depth1 > li.active > a{display:none;}
	.location .depth2{left:0;}
		
	/* 0102 Chairman's Message */
	.grtWrap .grtImg img{width:300px; height:auto;}
	.grtWrap .grtCont h3{font-size:3.5rem; }
	.grtWrap .grtCont h4{font-size:2rem; }
	
	/* Highlights */
	.img_table td { display:block; }
	
}

@media screen and (max-width: 480px){
		
	/* 0102 Chairman's Message */
	.grtWrap .grtImg{padding:15px;}
	.grtWrap .grtImg img{width:250px; height:auto;}
	.grtWrap .grtImg .bg{width:180px; height:180px;}
	.grtWrap .grtCont h3{font-size:3rem; }
	.grtWrap .grtCont h4{font-size:1.6rem; }
	
	/* 0103 Breif History */
	.briefHist dl:before, .briefHist dl:after { left:130px; width:2px; }
	.briefHist dl dd ul li { padding-left:150px; }

}

@media print {
	#header, #footer, .sVisual, .locationWrap, .titleH2 {display: none; width: 0; height: 0;}
	.container { min-width:100%; page-break-after:always; zoom:65%; }
}