@charset "UTF-8";
/*-------------------------------------------------
title       : 메인
Author      : ㅈㅁㅈ
Create date : 2020-11-25
-------------------------------------------------*/
#visual { position: relative;padding: 6.5rem 0 12rem; background: url("/main/img/main/visual.png") no-repeat right 0 #211D4A; background-size: auto 100%; text-align: center; }
#visual .group {display: inline-block; height: 39rem; color: #fff; word-break: keep-all;  vertical-align: top; }
#visual .title {
	display: flex; display: -webkit-flex; flex-flow: row wrap; align-items: center; align-content: center;  justify-content: center;
	position: absolute; 
    top: 0;
	left: 26rem;
    width: 8.5rem;
    height: 4.5rem;
    background-color: #E10F21;
    font-size: 1.7rem;
    font-weight: 500;
    overflow: hidden;
    z-index: 1;
	}
#visual .title::after { position: absolute; right: 0; bottom: 0; width: 2.5rem; height: 2.5rem; background-color:#373163; content: ''; -webkit-transform: translate(65%, 60%) rotate(34deg); transform: translate(65%, 60%) rotate(34deg); }

#visual .group1 { position: relative;width: 81.5rem; max-width: 57%; text-align: left;}
#visual .group1 .item { display: block; position: relative; padding-left: 12rem; -webkit-transition: all 0.3s; transition: all 0.3s; }
#visual .group1 .item:hover, #visual .group1 .item:focus { color: #fff; }
#visual .group1 .desc {position: relative; height: 39rem; padding: 6rem 10rem 5.5rem 13.5rem; font-size: 1.5rem;}
#visual .group1 .desc::after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.08);  content: ''; z-index: -1;}
#visual .group1 .desc span { display: block; margin-top: 3rem; opacity: .6;}
#visual .group1 .desc span::before { display: inline-block; position: relative; top: 1px; font-family: "xeicon"; vertical-align: top; margin-right: 1rem; content: ''; }
#visual .group1 i { overflow: hidden; position: absolute; left: 1px; top: 2.5rem; width: 20rem; height: 29.7rem; background-color: #fff; }
#visual .group1 img { height: calc(100% + 1px); margin-left: -1px; -webkit-transition: all 0.3s; transition: all 0.3s; }
#visual .group1 strong { font-size: 2.8rem; line-height: 1.42857; display: block; overflow: hidden; max-height: 8rem; margin: 1rem 0 2.5rem; color: #fff; }
#visual .group1 p { max-height: 7.6rem;color: rgba(255, 255, 255, 0.7);  overflow: hidden;}
#visual .group1 em { font-size: 1.8rem; font-weight: 400; color: #E1CB0F; }
#visual .group1 .control { position: absolute; bottom: 2.5rem; left: 22rem; z-index: 1; width: 1.5rem; height: 3rem; text-align: center; }
#visual .group1 .control button { display: none; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #fff; line-height: 3rem; }
#visual .group1 .control button::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; }
#visual .group1 .control .active { display: block; }
#visual .group1 .control .pause::before { content: ""; }
#visual .group1 .control .play::before { content: ""; }
#visual .group1 .slick-dots { position: absolute; left: 0; bottom: 2.5rem; width: 20.5rem; white-space: nowrap; }
#visual .group1 .slick-dots li { display: inline; }
#visual .group1 .slick-dots button { display: inline-block; width: 3rem; height: 3rem; border-radius: 100%; font-weight: 300; color: #fff; text-align: center; line-height: 3rem; vertical-align: top; -webkit-transition: all 0.3s; transition: all 0.3s; font-size: 1.5rem;}
#visual .group1 .slick-dots button:focus { outline: 1px dotted #fff; }
#visual .group1 .slick-dots .slick-active button { background-color: #E10F21; }
#visual .group2 { position: relative; width: 48.5rem; max-width: 35%; margin-left: 3rem; padding: 5rem 5rem 5.5rem; background-color: rgba(0, 0, 0, 0.25); overflow: hidden;}
#visual .group2 .title {left: 3rem;}
#visual .group2 .title::after {background-color:  #1D1841;}
#visual .group2 .item { display: block; }
#visual .group2 .item:hover i img, #visual .group2 .item:focus i img { opacity: 0.7; -webkit-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); }
#visual .group2 i { position: relative; z-index: 0; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; width: 18rem; height: 18rem; margin: 0 auto; padding: 0 5rem; border-radius: 100%; background-color: #000; font-size: 0; font-weight: 600; vertical-align: top; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; word-break: keep-all; }
#visual .group2 i img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; min-height: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; }
#visual .group2 strong { display: block; margin: 2.5rem 0 0.5rem;  font-size: 1.8rem; font-weight: inherit; line-height: 1.25; }
#visual .group2 span { font-size: 1.5rem; opacity: 0.6; }
#visual .group2 .slick-arrow { overflow: hidden; position: absolute; top: 9rem; left: 0; z-index: 1; width: 6.5rem; height: 1.7rem; margin-top: -0.85rem; padding-top: 1.7rem; border-left: 1px solid #fff; border-bottom: 1px solid #fff; opacity: 0.4; -webkit-transform: skewX(-45deg); transform: skewX(-45deg); -webkit-transition: all 0.3s; transition: all 0.3s; outline: 0 none; }
#visual .group2 .slick-arrow.slick-next { left: auto; right: 0; border-left: 0 none; border-right: 1px solid #fff; -webkit-transform: skewX(45deg); transform: skewX(45deg); }
#visual .group2 .slick-arrow:hover, #visual .group2 .slick-arrow:focus { opacity: 1; outline: 1px dotted #fff; }
#visual .group2 .world .control { position: absolute; top: 2rem; right: 2.5rem; }
#visual .group2 .world .control.open::after { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transition: all 0.3s; transition: all 0.3s; }
#visual .group2 .world .control.open:hover::after, #visual .group2 .world .control.open:focus::after { -webkit-transform: rotate(180deg) translateY(2px); transform: rotate(180deg) translateY(2px); }
#visual .group2 .world .control.open::after { display: inline-block; position: relative; top: 1px; font-family: "xeicon"; vertical-align: top; top: 0.4rem; margin-left: 0.5rem; content: ''; }
#visual .group2 .world .control.open:hover::after, #visual .group2 .world .control.open:focus::after { top: 0.8rem; }
#visual .group2 .world .control.close { display: none; overflow: hidden; width: 2.7rem; height: 2.7rem; text-align: right; line-height: 2.7rem; }
#visual .group2 .world .control.close::before { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transition: all 0.3s; transition: all 0.3s; }
#visual .group2 .world .control.close:hover::before, #visual .group2 .world .control.close:focus::before { -webkit-transform: rotate(180deg) translateY(2px); transform: rotate(180deg) translateY(2px); }
#visual .group2 .world .control.close::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; content: ''; }
#visual .group2 .world .cont { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; }
#visual .group2 .world .cont .map { position: absolute; top: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); overflow: hidden; top: 6.76rem; width: 44.072rem; height: 20.939rem; background: url("/main/img/main/map.png") no-repeat center center/cover; }
#visual .group2 .world .cont .map a { position: absolute; width: 3rem; height: 3rem; border-radius: 100%; border: 1px solid #E10F21; }
#visual .group2 .world .cont .map a::before { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 1rem; height: 1rem; border-radius: 100%; background-color: #E10F21; content: ''; }
#visual .group2 .world .cont .map a.active, #visual .group2 .world .cont .map a:hover, #visual .group2 .world .cont .map a:focus { z-index: 1; }
#visual .group2 .world .cont .map a.active span, #visual .group2 .world .cont .map a:hover span, #visual .group2 .world .cont .map a:focus span { opacity: 1; -webkit-transition: all 0.3s; transition: all 0.3s; }
#visual .group2 .world .cont .map .map1 { top: 34.5%; left: 72.313%; }
#visual .group2 .world .cont .map .map2 { top: 63.708%; left: 83.658%; }
#visual .group2 .world .cont .map .map3 { top: 35.531%; left: 30.563%; }
#visual .group2 .world .cont .map .map4 { top: 34.576%; left: 41.454%; }
#visual .group2 .world .cont .map .map5 { top: 27.412%; left: 8.554%; }
#visual .group2 .world .cont .map .map6 { top: 15.473%; left: 29.882%; }
#visual .group2 .world .cont .map .map7 { top: 51.769%; left: 31.471%; }
#visual .group2 .world .cont .map .map8 { top: 46.993%; left: 23.756%; }
#visual .group2 .world .cont .map .map9 { top: 57.769%; left: 9.461%; }
#visual .group2 .world .cont .map .map10 { top: 32.666%; left: 36.916%; }
#visual .group2 .world .cont .map span { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.5rem; left: 100%; z-index: 0; height: 2rem; margin-left: 1rem; padding: 0 0.75rem 0 0.5rem; border-radius: 2rem; background-color: #E10F21; font-weight: 400; line-height: 2rem; opacity: 0; letter-spacing: -0.05rem; }
#visual .group2 .world .cont .map span::before { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -0.4rem; z-index: -1; width: 1rem; height: 1rem; background-color: #E10F21; content: ''; -webkit-transform: translateY(-50%) scaleY(0.5) rotate(45deg); transform: translateY(-50%) scaleY(0.5) rotate(45deg); }
#visual .group2 .world .cont .map2 span {left: 32%;}
#visual .group2 .world .cont .tag { font-size: 1.4rem; position: absolute; left: 0; bottom: 3rem; width: 100%; padding: 0 4rem; }
#visual .group2 .world .cont .tag a { position: relative; display: inline-block; margin: 0.5rem; vertical-align: top; }
#visual .group2 .world .cont .tag a::after { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: #fff; content: ''; -webkit-transition: all 0.3s; transition: all 0.3s; }
#visual .group2 .world .cont .tag a:hover::after, #visual .group2 .world .cont .tag a:focus::after { width: 100%; }
#visual .group2 .world .cont .tag a.active::after { width: 100%; }
#visual .group2.active .list { opacity: 0; }
#visual .group2.active .world .open { display: none; }
#visual .group2.active .world .close { display: block; }
#visual .group2.active .world .title { margin: 0; padding-top: 1rem; font-weight: 500; line-height: 1.388; font-size: 1.7rem; width: 12.5rem;}
#visual .group2.active .world .cont { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; }
#contents { width: 142rem; max-width: calc(100% - 4rem); margin-left: auto !important; margin-right: auto !important; }
#contents .search {min-height: 9.5rem; margin-bottom: 1rem; background-color: #fff;-webkit-transform: translateY(-50%); transform: translateY(-50%);  overflow: hidden; }
#contents .search .item { float: right; position: relative; display: flex; display: -webkit-flex; flex-flow: row wrap; width: 61%; height: 100%;  min-height: 9.5rem; padding: 0 3rem; background-color: #ECF0F9; }
#contents .search .item .subject {display: flex; display: -webkit-flex; flex-flow: row wrap; align-items: center; align-content: center;    width: 11.5rem;  font-size: 1.8rem; }
#contents .search .item .desc {
    position: relative;
    display: flex; display: -webkit-flex; flex-flow: row wrap; align-items: center; align-content: center;
    width: calc(100% - 11.5rem);
    color: #262F68;
    line-height: 1.2;
    font-weight: 400;
    overflow: hidden;
	}

#contents .search .item a { position: relative; display: inline-block; margin: .2rem 1rem; vertical-align: middle; }
#contents .search .item a::after { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: #262F68; content: ''; -webkit-transition: all 0.3s; transition: all 0.3s; }
#contents .search .item a:hover::after, #contents .search .item a:focus::after { width: 100%; }

#contents .search .form { float: left; width: 39%; padding: 2rem 4rem 2rem 3rem; border: 1px solid #ecf0f9; }
#contents .search .form input { float: left; width: calc(100% - 5.5rem); height: 5.3rem; border: 0 none; color: #777; outline: 0 none; -webkit-transition: all 0.3s; transition: all 0.3s; }
#contents .search .form input::-webkit-input-placeholder { opacity: 1; -webkit-transition: all 0.3s; transition: all 0.3s; }
#contents .search .form input:-ms-input-placeholder { opacity: 1; -webkit-transition: all 0.3s; transition: all 0.3s; }
#contents .search .form input::-ms-input-placeholder { opacity: 1; -webkit-transition: all 0.3s; transition: all 0.3s; }
#contents .search .form input::placeholder { opacity: 1; -webkit-transition: all 0.3s; transition: all 0.3s; }
#contents .search .form input::-webkit-input-placeholder { opacity: 1; -webkit-transition: all 0.3s; transition: all 0.3s; }
#contents .search .form input:hover, #contents .search .form input:focus { color: #262F68; }
#contents .search .form input:hover::-webkit-input-placeholder, #contents .search .form input:focus::-webkit-input-placeholder { color: #262F68; }
#contents .search .form input:hover:-ms-input-placeholder, #contents .search .form input:focus:-ms-input-placeholder { color: #262F68; }
#contents .search .form input:hover::-ms-input-placeholder, #contents .search .form input:focus::-ms-input-placeholder { color: #262F68; }
#contents .search .form input:hover::placeholder, #contents .search .form input:focus::placeholder { color: #262F68; }
#contents .search .form input:hover::-webkit-input-placeholder, #contents .search .form input:focus::-webkit-input-placeholder { color: #262F68; }
#contents .search .form button { overflow: hidden; float: right; width: 5.3rem; height: 5.3rem; -webkit-box-shadow: 0.12rem 0.16rem 0.7rem rgba(0, 0, 0, 0.18); box-shadow: 0.12rem 0.16rem 0.7rem rgba(0, 0, 0, 0.18); border-radius: 100%; background-color: #E10F21; color: #fff; text-align: center; line-height: 5.3rem; -webkit-transition: all 0.3s; transition: all 0.3s; }
#contents .search .form button::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 2rem; content: ''; }
#contents .search .form button:hover, #contents .search .form button:focus { background-color: #37428B; }
.section1 { display: inline-block; width: 100%; padding-bottom: 6rem; vertical-align: top; }
.section1 .latest { position: relative; width: calc(50% - 6.5rem); padding-top: 5.4rem; }
.section1 .latest .label a { font-size: 2.8rem; position: absolute; left: 0; top: 0; font-weight: 300; color: #98A5AD; letter-spacing: -0.1rem; -webkit-transition: all 0.3s; transition: all 0.3s; }
.section1 .latest .blank { font-size: 1.7rem; padding: 2.5rem 0; font-weight: 500; text-align: center; }
.section1 .latest [class*="item"] { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; }
.section1 .latest .more { overflow: hidden; position: absolute; right: 0; top: 0.25rem; width: 4rem; height: 4rem; text-align: right; line-height: 4rem; }
.section1 .latest .more::before { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transition: all 0.3s; transition: all 0.3s; }
.section1 .latest .more:hover::before, .section1 .latest .more:focus::before { -webkit-transform: rotate(180deg) translateY(2px); transform: rotate(180deg) translateY(2px); }
.section1 .latest .more::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 2.5rem; content: ''; }
.section1 .latest .active .label a { font-weight: 600; color: #333; }
.section1 .latest .active [class*="item"] { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; border-top: 0.3rem solid #0D2749; }
.section1 .latest .item1 .list {min-height: 22rem; padding-top: 2rem; }
.section1 .latest .item1 .list a { display: block; position: relative; margin-top: 0.5rem; padding-right: 14rem; }
.section1 .latest .item1 .list a:hover strong::before, .section1 .latest .item1 .list a:focus strong::before { width: 100%; }
.section1 .latest .item1 .list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.7rem; display: block; position: relative; padding-right: 1.7rem; font-weight: 400; /* letter-spacing: -0.85px; */ }
.section1 .latest .item1 .list strong::before { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: #333; content: ''; -webkit-transition: all 0.3s; transition: all 0.3s; }
.section1 .latest .item1 .list strong i {position: absolute;top: 50%; right: 0;transform: translateY(-50%);}
.section1 .latest .item1 .list span { position: absolute; right: 1.5rem; top: -0.2rem; font-weight: 300; color: #555; }
.section1 .latest .group2 .label a { left: 13rem; }
.section1 .latest .group3 .label a { left: 26.5rem; }
.section1 .latest .group5 .label a { left: 16rem; }
.section1 .latest .group6 .label a { left: 29rem; }
.latest1 { float: left; margin: 0 2.5rem 0 4rem; }
.latest2 { float: right; margin: 0 4rem 0 2.5rem; }
.latest2 .item2 .list li a { display: table; width: calc(100% + 0px); table-layout: fixed; margin-top: 2rem; }
.latest2 .item2 .list li a > * { display: table-cell; padding-right: 0px; vertical-align: middle; }
.latest2 .item2 .list li a .img { position: relative; z-index: 0; overflow: hidden; width: 25rem; height: 16rem; }
.latest2 .item2 .list li a .img img { position: absolute; top: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; }
.latest2 .item2 .list li a .desc { padding-left: 2.8rem; }
.latest2 .item2 .list li a .title { font-size: 2rem; line-height: 1.45; display: block; overflow: hidden; max-height: 6rem; }
.latest2 .item2 .list li a .txt { display: block; overflow: hidden; max-height: 5rem; margin: 1rem 0 2.5rem; }
.latest2 .item2 .list li a .date { font-size: 1.4rem; color: #555; }
.section2 { position: relative; z-index: 0; display: inline-block; width: 100%; margin-bottom: 5.5rem; padding: 7rem 0; vertical-align: top; }
.section2::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background-color: #EFF4F8; }
.section2 .group { position: relative; z-index: 0; float: left; width: 52rem; height: 29rem; }
.section2 .group::before { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 4rem; z-index: 2; width: 5rem; height: 5rem; border-radius: 100%; border: 0.5rem solid #fff; color: #fff; text-indent: 0.25rem; text-align: center; line-height: 4rem; content: ''; opacity: 0.8; }
.section2 .group::after { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 3; width: 5rem; height: 5rem; border-radius: 100%; border: 0.5rem solid #fff; content: ''; opacity: 0; }

@-webkit-keyframes play { 
	0% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);  opacity: 0.8; }
	100% { -webkit-transform: translate(-50%, -50%) scale(1.5); transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
	}
@keyframes play { 
	0% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
	100% { -webkit-transform: translate(-50%, -50%) scale(1.5); transform: translate(-50%, -50%) scale(1.5); opacity: 0; } 
	}

.section2 .group:hover::after, .section2 .group:focus::after { -webkit-animation: play 1s infinite; animation: play 1s infinite; }
.section2 .group i { display: block; overflow: hidden; position: relative; height: 100%; }
.section2 .group i::before { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; content: ''; z-index: 1; background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(90%, rgba(0, 0, 0, 0.8))); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 90%); }
.section2 .group img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; }
.section2 .group .desc { position: absolute; left: 2rem; bottom: 2rem; right: 2rem; z-index: 1; padding-right: 10rem; color: #fff; }
.section2 .group .desc em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 2.4rem; display: block; font-weight: 400; }
.section2 .group .desc strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 3rem; display: block; line-height: 1; }
.section2 .group .desc span { position: absolute; right: 0; bottom: 0; }
.section2 .date::before { display: inline-block; position: relative; top: 1px; font-family: "xeicon"; vertical-align: top; margin-right: 0.5rem; font-size: 85%; content: ''; }
.section2 .list { float: right; width: calc(100% - 55rem); }
.section2 .list li { display: table; width: calc(100% + 0px); table-layout: fixed; float: left; position: relative; width: 50%; height: 9rem; margin: 2.5rem 0; padding-left: 20.5rem; color: #555; }
.section2 .list li > * { display: table-cell; padding-right: 0px; vertical-align: middle; }
.section2 .list li:nth-child(3) { clear: both; }
.section2 .list a:hover i::before, .section2 .list a:focus i::before { opacity: 1; }
.section2 .list a:hover img, .section2 .list a:focus img { opacity: 0.5; }
.section2 .list i { overflow: hidden; position: absolute; left: 2rem; top: 0; width: 16rem; height: 9rem; background-color: #000; }
.section2 .list i::before { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 3.5rem; z-index: 1; color: #fff; content: ''; opacity: 0.8; -webkit-transition: all 0.3s; transition: all 0.3s; }
.section2 .list strong { font-size: 1.8rem; line-height: 1.66667; display: block; overflow: hidden; max-height: 9rem; margin-bottom: 0.5rem; color: #0B223E; word-break: keep-all; line-height: 1.2; }
.section2 .list span::before { color: #777; }
.section2 .list img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0.8; -webkit-transition: all 0.3s; transition: all 0.3s; }
.section2 .more { overflow: hidden; position: absolute; right: 0; top: 3rem; width: 2.5rem; height: 2.5rem; text-align: center; line-height: 2.5rem; }
.section2 .more::before { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transition: all 0.3s; transition: all 0.3s; }
.section2 .more:hover::before, .section2 .more:focus::before { -webkit-transform: rotate(180deg) translateY(2px); transform: rotate(180deg) translateY(2px); }
.section2 .more::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 2.5rem; content: ''; }
.section3 {display: flex; display: -webkit-flex; flex-flow: row wrap; text-align: center;  overflow: hidden;}
.section3 .first {width: 42rem; overflow: hidden;}
.section3 .esg {margin-bottom: 2rem; overflow:hidden;}
.section3 .esg a {position: relative; display: block;  height: 100%; background-color: #B9E8D6;}
.section3 .group { margin-top: -2rem; width: calc(100% - 68rem); padding-left: 2rem; text-align: left; vertical-align: top; }
.section3 .group > * { clear: none; float: left; width: calc(50% - 2rem); margin: 2rem 2rem 0 0; }
.section3 .group > *:nth-child(3n + 1) { clear: none; }
.section3 .group > *:nth-child(2n + 1) { clear: both; }
.section3 .group .item { position: relative; z-index: 0; height: 22rem; padding: 3.5rem 3rem; color: #fff; }
.section3 .group .item::after { position: absolute; right: 1rem; bottom: 2rem; z-index: -1; width: 10.9rem; height: 10.9rem; content: ''; }
.section3 .group .item.item1 { background-color: #0083D0; }
.section3 .group .item.item1::after { background: url("/main/img/main/item1.png") no-repeat; background-size: 100% 100%; }
.section3 .group .item.item2 { background-color: #667280; }
.section3 .group .item.item2::after { background: url("/main/img/main/item2.png") no-repeat; background-size: 100% 100%; }
.section3 .group .item.item3 { background-color: #395679; }
.section3 .group .item.item3::after { background: url("/main/img/main/item3.png") no-repeat; background-size: 100% 100%; }
.section3 .group .item.item1 { height: 24rem; }
.section3 .group .item.item1 p { font-family: "Noto Sans SC", "Noto Sans KR", sans-serif; }
.section3 .group .item.item1 i { bottom: 5rem; }
.section3 .group .item.item2::after { right: 6rem; bottom: 6.5rem; }
.section3 .group .item.item3 p { overflow: hidden; max-height: 5.1rem; }
.section3 .group .item strong { font-size: 2rem; display: block; }
.section3 .group .item p { width: 14rem; margin: 2.5rem 0 2rem; word-break: keep-all; }
.section3 .group .item i { position: absolute; right: 3rem; bottom: 3rem; max-width: calc(100% - 20rem); height: 12rem; line-height: 12rem; }
.section3 .group .item img { max-height: 100%; vertical-align: middle; }
.section3 .more { font-weight: 400; }
.section3 .more::after { display: inline-block; position: relative; top: 1px; font-family: "xeicon"; vertical-align: top; position: relative; top: -0.1rem; margin-left: 0.75rem; content: ''; -webkit-transition: all 0.3s; transition: all 0.3s; }
.section3 .more:hover::after, .section3 .more:focus::after { -webkit-animation: more 0.75s infinite alternate; animation: more 0.75s infinite alternate; }
@-webkit-keyframes more { 
	0% { margin-right: 0; }  
	100% { margin-right: -1rem; }
	}
@keyframes more { 
	0% { margin-right: 0; } 
	100% { margin-right: -1rem; } 
	}
.popup {position: relative; height: 22rem; overflow: hidden; }
.popup .control { font-size: 1.8rem; position: absolute; right: 0; top: calc(100% - 2.5rem); width: 2.5rem; height: 2.5rem; text-align: right; line-height: 2.5rem; }
.popup .control button { display: none; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.popup .control button::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; color: #143864; }
.popup .control .active { display: block; }
.popup .control .pause::before { content: ""; }
.popup .control .play::before { content: ""; }
.popup .slick-dots { font-size: 2rem; position: relative; left: 3.5rem; width: 3.5rem; margin-top: 1.5rem; font-weight: 500; color: #143864; text-align: center; }
.popup .slick-dots li { display: none; }
.popup .slick-dots button { font-size: 2.5rem; font-weight: 600; }
.popup .slick-dots span::before { content: '/'; }
.popup .slick-dots .slick-active { display: block; }
.popup .slick-arrow { overflow: hidden; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 3.5rem; color: #143864; line-height: 3.5rem; }
.popup .slick-arrow::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 2.5rem; content: ''; }
.popup .slick-arrow.slick-next { left: 8rem; line-height: 3.2rem; }
.popup .slick-arrow.slick-next::before { content: ''; text-align: right; }
.popup .slick-list a { display: block; background-color: #000; font-size: 0; line-height: 0;  overflow: hidden;}
.popup .slick-list a img { -webkit-transition: all 0.3s; transition: all 0.3s; }
.popup .slick-list a:hover img, .popup .slick-list a:focus img { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.7; }
.popupzone-slider { height: 100%; overflow: hidden;}
.popupzone-slider li {display: inline-block; width: 100%; height: 100%;}
.popupzone-slider li a {display: block; height: 100%;}
.pool { position: relative; height: 24rem; }
.pool h2 { font-size: 2rem; color: #0083D0; }
.pool li { position: relative; min-height: 3.5rem; margin-top: 2rem; padding: 0 10rem 0 3rem; }
.pool li span { font-size: 2rem; position: absolute; left: 0; top: 0; font-weight: 600; color: #0083D0; line-height: 1.2; }
.pool li strong { font-size: 1.7rem; line-height: 1.58824; display: block; overflow: hidden; max-height: 5.2rem; font-weight: 400; color: #143864; word-break: keep-all; }
.pool li a { font-size: 1.5rem; position: absolute; right: 0; top: 0; width: 8.5rem; height: 3.5rem; background-color: #0B223E; color: #fff; text-align: center; line-height: 3.5rem; -webkit-transition: all 0.3s; transition: all 0.3s; }
.pool li a:hover, .pool li a:focus { background-color: #0083D0; }
.pool .more { position: absolute; right: 0; top: 0; }
.trend { float: right; width: 26rem; text-align: left; }
.trend > a { position: relative; display: block; color: #fff; padding: 4rem 0 0 3rem; background-size: cover; background-repeat: no-repeat; }
.trend p { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.5; }
.trend strong { font-size: 2.9rem; display: block; margin-top: 2rem; }
.trend .type1 { height: 24rem; background-image: url("/main/img/main/issue5.png"); }
.trend .type2 { padding: 3.5rem 0 0 3rem; height: 22rem; margin-top: 2rem; background-image: url("/main/img/main/issue6.png"); }
.trend .type2 strong { margin-top: 1.5rem; }
.trend span { position: absolute; bottom: 3rem; left: 3rem; }
.icons { display: table;width: 100%; margin: 6rem auto 7rem; font-weight: 400; color: #151515; text-align: left; font-size: 1.8rem; }
.icons > * { display: table-cell; padding-right: 0px; vertical-align: middle; }
.icons a {display: block; position: relative; height: 7.5rem; padding: 0 1rem; word-break: keep-all; }
.icons a.type1 { width: 15rem; max-width: 100%; }
.icons a.type1::before { display: none; }
.icons a.type1 i { height: 7rem; line-height: 7.5rem; }
.icons a.type1 span { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; }
.icons a.type2 i { float: left; width: 4.5rem; height: 7.5rem; margin-right: 1.5rem; text-align: center; vertical-align: middle; line-height: 7.5rem; }
.icons a.type2 span { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; float: left; max-width: calc(100% - 6rem); height: 7.5rem; font-weight: 500; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1.2; letter-spacing: -0.1rem; }
.icons a.type2 img { vertical-align: middle; }