@charset "UTF-8";
/*-------------------------------------------------
메인  / 2020-11-25
-------------------------------------------------*/
.layerPop {position: absolute; max-width: 85%; z-index: 999999;}
.popup_cont {width: 100%; height: calc(100% - 3.3rem); background-color: #fff; text-align: center; overflow: hidden;}
.popup_cont a {display: block;}
.popup_close {background:#000; box-sizing:border-box; clear:both; padding: 5px 10px 5px; color:#fff; overflow:hidden; font-size: 14px; font-family: 'Noto Sans KR', 'Malgun Gothic','맑은고딕','돋움'; letter-spacing: -0.1px;}
.popup_close .pop_close {float: right;}

#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; flex-flow: row wrap; align-items: center; align-content: center;  justify-content: center;
	position: absolute; 
    top: 0;
	left: 26rem;
    width: 13.3rem;
    height: 4.5rem;
    font-size: 1.8rem;
    font-weight: 500;
    overflow: hidden;
    z-index: 1;
	}
#visual .title::before,
#visual .title::after {position: absolute; top: 0; left: 0; width: 91%; height: 100%; background-color: #E10F21; content:''; z-index: -1;}
#visual .title::after {left: auto; right: 0; width: 1.4rem; background: url("/main/img/main/title_bg.png") no-repeat right 0; }

#visual .group1 { position: relative;width: 81.5rem; max-width: 57%; text-align: left;}
#visual .group1 .item { display: block; position: relative; padding-left: 12rem; 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 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; transition: all 0.3s; }
#visual .division {display: block; font-size: 1.8rem; font-weight: 400; color: #E1CB0F; }
#visual .group1 .subject { display: block; font-size: 2.8rem; line-height: 1.42857;overflow: hidden; max-height: 8rem; margin: 1rem 0 2.5rem; color: #fff; }
#visual .group1 .txt { max-height: 7.6rem;color: rgba(255, 255, 255, 0.7);  overflow: hidden;}
#visual .group1 .author { display: block; margin-top: 3rem; opacity: .6;}
#visual .group1 .author::before { display: inline-block; position: relative; top: 1px; font-family: "xeicon"; vertical-align: top; margin-right: 1rem; content: ''; }
#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; 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: 2rem; background-color: #383264;overflow: hidden;}
#visual .group2 .title {left: 3rem;}

#visual .group2 .list {height: 100%; overflow: hidden;}
#visual .group2 .item {position: relative; display: block; }
#visual .group2 .item:hover i img, #visual .group2 .item:focus i img { opacity: 0.7; transform: translate(-50%, -50%) scale(1.2); }
#visual .group2 i {display: block; position: relative; height: 100%;  min-height: 35rem; margin: 0 auto; overflow: hidden;}
#visual .group2 i img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; min-height: 100%; transition: all 0.3s; }
#visual .group2 .title_area {position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem 2rem ; background-color: rgba(0,0,0, .7);font-size: 1.5rem; }
#visual .group2 .subject {display: -webkit-box; height: 6.5rem; margin-bottom: 0.5rem;  line-height: 1.25; font-size: 2.6rem; font-weight: 500; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
#visual .group2 .date {display: block;}
#visual .group2 .slick-arrow {position: absolute; top: 50%; left: 1rem; width: 4rem; height: 4rem; line-height: 0.1; text-indent: -9999px; transition: all 0.3s; transform: translateY(-50%); opacity: 0.5; z-index: 1; overflow: hidden; }
#visual .group2 .slick-arrow.slick-next { left: auto; right: 1rem;}
#visual .group2 .slick-arrow::after {display: block; text-indent: 0; font-size: 4rem; font-family: "xeicon"; content:"\e93b";}
#visual .group2 .slick-arrow.slick-next::after {content:"\e93e";}
#visual .group2 .slick-arrow:hover,
#visual .group2 .slick-arrow:focus {opacity: 1;}

#visual .world_open, 
#visual .close {position: absolute; top: 2rem; right: 2.5rem; }
.world_open::after { transform: rotate(0); transition: all 0.3s; }
.world_open:hover::after, 
.world .control.open:focus::after { transform: rotate(180deg) translateY(2px); }
.world_open::after { display: inline-block; position: relative; top: 1px; font-family: "xeicon"; vertical-align: top; top: 0.4rem; margin-left: 0.5rem; content: ''; }
.world_open:hover::after, 
.world .control.open:focus::after { top: 0.8rem; }
.world {position: absolute; top: 0; left: 0; visibility: hidden; width: 0; height: 0; opacity: 0; overflow: hidden; }
.world .close { display: none; overflow: hidden; width: 2.7rem; height: 2.7rem; text-align: right; line-height: 2.7rem; }
.world .close::before { transform: rotate(0); transition: all 0.3s; }
.world .close:hover::before, 
.world .control.close:focus::before { transform: rotate(180deg) translateY(2px); }
.world .close::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; content: ''; }
#visual .world .title {left: 0; padding-top: 0;}
.world .cont {height: 100%;}
.world .cont .map { position: absolute; top: auto; left: 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; }
.world .cont .map a { position: absolute; width: 3rem; height: 3rem; border-radius: 100%; border: 1px solid #E10F21; }
.world .cont .map a::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1rem; height: 1rem; border-radius: 100%; background-color: #E10F21; content: ''; }
.world .cont .map a.active, 
.world .cont .map a:hover, 
.world .cont .map a:focus { z-index: 1; }
.world .cont .map a.active span, 
.world .cont .map a:hover span, 
.world .cont .map a:focus span { opacity: 1; transition: all 0.3s; }
.world .cont .map .map1 { top: 34.5%; left: 72.313%; }
.world .cont .map .map2 { top: 63.708%; left: 83.658%; }
.world .cont .map .map3 { top: 35.531%; left: 30.563%; }
.world .cont .map .map4 { top: 34.576%; left: 41.454%; }
.world .cont .map .map5 { top: 27.412%; left: 8.554%; }
.world .cont .map .map6 { top: 15.473%; left: 29.882%; }
.world .cont .map .map7 { top: 51.769%; left: 31.471%; }
.world .cont .map .map8 { top: 46.993%; left: 23.756%; }
.world .cont .map .map9 { top: 57.769%; left: 9.461%; }
.world .cont .map .map10 { top: 32.666%; left: 36.916%; }
.world .cont .map span { position: absolute; top: 50%; left: auto; 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; }
.world .cont .map span::before { position: absolute; top: 50%; left: auto; transform: translateY(-50%); left: -0.4rem; z-index: -1; width: 1rem; height: 1rem; background-color: #E10F21; content: ''; transform: translateY(-50%) scaleY(0.5) rotate(45deg); }
.world .cont .map2 span {left: 32%;}
.world .cont .tag { font-size: 1.4rem; position: absolute; left: 0; bottom: 3rem; width: 100%; padding: 0 4rem; }
.world .cont .tag a { position: relative; display: inline-block; margin: 0.5rem; vertical-align: top; }
.world .cont .tag a::after { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: #fff; content: ''; transition: all 0.3s; }
.world .cont .tag a:hover::after, 
.world .cont .tag a:focus::after { width: 100%; }
.world .cont .tag a.active::after { width: 100%; }

#visual .group1.active .list { opacity: 0; }
#visual .group1.active .world_open { display: none;}
#visual .group1.active .world { width: 100%; height: 100%; background-color: #211D4A; visibility: visible; overflow: visible; opacity: 1; z-index: 1;}
#visual .group1.active .close { display: block; }
#visual .group1.active .close::before {display: block; font-size: 2rem; font-family: "xeicon"; content:"\e921";}
#visual .group1.active .world .title {margin: 0; font-weight: 500; line-height: 1.388; font-size: 1.7rem; width: 12.5rem;}

#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;transform: translateY(-50%);  overflow: hidden; }
#contents .search .item { float: right; position: relative; display: 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; 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; 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: ''; transition: all 0.3s; }
#contents .search .item a:hover::after, #contents .search .item a:focus::after { width: 100%; }

#contents .search .form {position: relative; float: left; width: 39%; padding: 2.1rem 4rem 2.1rem 3rem;}
#contents .search .form::after {position: absolute; top: 0; left: 0; width: 100%; height: 100%;  border: 6px solid #ecf0f9; content: ''; z-index: -1;}
#contents .search .form input { float: left; width: calc(100% - 5.5rem); height: 5.3rem; border-color: transparent; color: #333; font-size: 1.8rem; transition: all 0.3s; }
#contents .search .form input::-webkit-input-placeholder { opacity: 1; transition: all 0.3s; }
#contents .search .form input::placeholder { opacity: 1; transition: all 0.3s; }
#contents .search .form input::-webkit-input-placeholder { opacity: 1; 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::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; 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; 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: 400; color: #333; letter-spacing: -0.1rem; 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 { transform: rotate(0); transition: all 0.3s; }
.section1 .latest .more:hover::before, 
.section1 .latest .more:focus::before { 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: 16.5rem; 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 a:focus {outline: 0;}
.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: ''; 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; display: block; color: #555; font-weight: 300;  overflow: hidden;}
.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%; 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: 6.5rem;padding: 6.5rem 0;vertical-align: top;}
.section2 .subject {margin: 0 0 3rem 4rem;font-size: 2.8rem;line-height: 1.2;}
.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%; 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%; 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% { transform: translate(-50%, -50%) scale(1);  opacity: 0.8; }
	100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
	}
@keyframes play { 
	0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
	100% {  transform: translate(-50%, -50%) scale(1.5); opacity: 0; } 
	}

.section2 .group:hover::after,
.section2 .group:focus::after {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: 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%; 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%; transform: translate(-50%, -50%); font-size: 3.5rem; z-index: 1; color: #fff; content: ''; opacity: 0.8; 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%; transform: translate(-50%, -50%); opacity: 0.8; transition: all 0.3s; }
.section2 .more { overflow: hidden; position: absolute; right: 0; top: 7rem; width: 2.5rem; height: 2.5rem; text-align: center; line-height: 2.5rem; }
.section2 .more::before {  transform: rotate(0); transition: all 0.3s; }
.section2 .more:hover::before, .section2 .more:focus::before { 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; flex-flow: row wrap; margin: 0 -1rem; overflow: hidden;}
.section3 .group {width: calc(25% - 2rem); margin: 0 1rem;}
.section3 .group.first {width: calc(30.6% - 2rem);}
.section3 .quick_link {width: 18%; margin-left: 1rem;}
.section3 .quick_link > li {height: calc((100% / 3) - 2rem); background-color: #EFF4F8; border: 1px solid #ddd; text-align: center;}
.section3 .quick_link > li + li {margin-top: 2rem;}
.section3 .quick_link > li a {display: flex; height: 100%; align-items: center; justify-content: center;}

.section3 .box {position: relative; display: block; width: 100%; height: 22rem; margin-bottom: 2rem; padding: 3.5rem 3rem; color: #fff; }
.section3 .box::after {position: absolute; right: 1rem; bottom: 2rem; z-index: -1; width: 10.9rem; height: 10.9rem; content: ''; }
.section3 .box .subject {display: block;  font-size: 1.9rem;}
.section3 .box .desc {display: -webkit-box; width: 14rem; height: 6.8rem; margin: 2.5rem 0 2rem; line-height: 1.4;  -webkit-line-clamp: 3; -webkit-box-orient: vertical;  text-overflow: ellipsis; word-break: keep-all; overflow: hidden;}
.section3 .box i { position: absolute; right: 3rem; bottom: 3rem; max-width: calc(100% - 20rem); height: 12rem; line-height: 12rem; }
.section3 .box img { max-height: 100%; vertical-align: middle; }
.section3 .box .item_link {display: block;}
.section3 .group:nth-of-type(1) .box {padding: 0;}

.section3 .esg {text-align: center; overflow:hidden;}
.section3 .esg a {position: relative; display: block;  height: 100%; background-color: #B9E8D6;}
.section3 .esg img {transition: all 0.3s; }
.section3 .esg a:hover img,
.section3 .esg a:focus img {transform: scale(.9); }

.section3 .academic_journal { background-color: #667280; }
.section3 .academic_journal::after {right: 6rem; bottom: 6.5rem; background: url("/main/img/main/item2.png") no-repeat; background-size: 100% 100%; }

.section3 .comic_economy {background-color: #0083D0;  font-family: "Noto Sans SC", "Noto Sans KR", sans-serif; }
.section3 .comic_economy::after { background: url("/main/img/main/item1.png") no-repeat; background-size: 100% 100%; }
.section3 .comic_economy i { bottom: 5rem; }

.popup {position: relative; height: 22rem; overflow: hidden; }
.popup::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10rem;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 90%);
    content:'';
    }
.popup .control {position: absolute; right: 0; bottom: 0.5rem; width: 2.5rem; height: 2.5rem; text-align: right; line-height: 2.5rem;  font-size: 1.8rem;  z-index: 10;}
.popup .control button { display: none; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #fff; }
.popup .control button::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; }
.popup .control .active { display: block; }
.popup .control .pause::before { content: ""; }
.popup .control .play::before { content: ""; }

.popup .slick-dots {position: absolute; bottom: 0.2rem; left: 3.5rem; width: 3.5rem; color: #fff; text-align: center;  font-size: 2rem; font-weight: 500;  z-index: 10;}
.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 { position: absolute; left: 0.5rem; bottom: 0; width: 2.5rem; height: 3.5rem; color: #fff; line-height: 3.5rem; z-index: 10; overflow: hidden;}
.popup .slick-arrow::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 2.5rem; content: '\e908'; }
.popup .slick-arrow.slick-next { left: 8rem; line-height: 3.2rem; }
.popup .slick-arrow.slick-next::before { content: '\e90b'; text-align: right; }
.popup .slick-list,
.popup .slick-track {height: 100%;}
.popup .slick-list a { display: block; position: relative; height: 100%; background-color: #000; font-size: 0; line-height: 0; overflow: hidden;}
.popup .slick-list a img {transition: all 0.3s; }
.popup .slick-list a:hover img, 
.popup .slick-list a:focus img { transform: scale(1.1); opacity: 0.7; }
.popupzone-slider { height: 100%; overflow: hidden;}
.popupzone-slider .inline {width: 100%; height: 100%; overflow: hidden;}
.popupzone-slider .inline a {display: block; height: 100%;}
.popupzone-slider .inline img {width: 100%; height: 100%;}

.popup2 {position: relative; height: 22rem; overflow: hidden; }
.popup2::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10rem;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 90%);
    content:'';
    }
.popup2 .control {position: absolute; right: 0; bottom: 0.5rem; width: 2.5rem; height: 2.5rem; text-align: right; line-height: 2.5rem;  font-size: 1.8rem;  z-index: 10;}
.popup2 .control button { display: none; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #fff; }
.popup2 .control button::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; }
.popup2 .control .active { display: block; }
.popup2 .control .pause::before { content: ""; }
.popup2 .control .play::before { content: ""; }

.popup2 .slick-dots {position: absolute; bottom: 0.2rem; left: 3.5rem; width: 3.5rem; color: #fff; text-align: center;  font-size: 2rem; font-weight: 500;  z-index: 10;}
.popup2 .slick-dots li { display: none; }
.popup2 .slick-dots button { font-size: 2.5rem; font-weight: 600; }
.popup2 .slick-dots span::before { content: '/'; }
.popup2 .slick-dots .slick-active { display: block; }
.popup2 .slick-arrow { position: absolute; left: 0.5rem; bottom: 0; width: 2.5rem; height: 3.5rem; color: #fff; line-height: 3.5rem; z-index: 10; overflow: hidden;}
.popup2 .slick-arrow::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 2.5rem; content: '\e908'; }
.popup2 .slick-arrow.slick-next { left: 8rem; line-height: 3.2rem; }
.popup2 .slick-arrow.slick-next::before { content: '\e90b'; text-align: right; }
.popup2 .slick-list,
.popup2 .slick-track {height: 100%;}
.popup2 .slick-list a { display: block; position: relative; height: 100%; background-color: #000; font-size: 0; line-height: 0; overflow: hidden;}
.popup2 .slick-list a img {transition: all 0.3s; }
.popup2 .slick-list a:hover img, 
.popup2 .slick-list a:focus img { transform: scale(1.1); opacity: 0.7; }
.popupzone-slider2 { height: 100%; overflow: hidden;}
.popupzone-slider2 .inline {width: 100%; height: 100%; overflow: hidden;}
.popupzone-slider2 .inline a {display: block; height: 100%;}
.popupzone-slider2 .inline img {width: 100%; height: 100%;}

.trend {background: url(/main/img/main/trend02.png) 0 0 / cover; }
.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;}
.trend strong { font-size: 2.9rem; display: block; margin-top: 2rem; }
.trend span { position: absolute; bottom: 3rem; left: 3rem; }
/*.section3 .trend .more {left: 0;}*/
.trend .list {margin-top: 1rem; font-size: 2.4rem; font-weight: 700;}
.trend .list > li {margin-bottom: 0.3rem; line-height: 1.5; position: relative; padding-left: 1.1rem;}
.trend .list > li::before { content: ""; width: 3px; height: 3px; background: #fff; position: absolute; left: 0; top: 1.5rem;}
.section3 .number_economy {background-color: #395679; }
.section3 .number_economy::after { background: url("/main/img/main/item3.png") no-repeat; background-size: 100% 100%; }
.section3 .number_economy .desc {margin-top: 1.5rem;}

.section3 .more { position: absolute;  bottom: 2.5rem; left: 3rem; font-weight: 400; padding: 0; }
.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: ''; transition: all 0.3s; }
.section3 .more:hover::after, .section3 .more:focus::after {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; } 
	}	

.pool { position: relative; height: 24rem;  padding: 3.5rem 3rem; border: solid 1px #eee;}
.pool h2 { font-size: 2rem; color: #0083D0; }
.pool li { position: relative; min-height: 3.5rem; margin-top: 1.2rem; padding-left: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 {display: -webkit-box;height: 4.5rem; color: #143864; line-height: 1.4;-webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;  font-weight: 400; word-break: keep-all; overflow: hidden; }
.pool li a {display: block;}

.icons {display: flex; flex-flow: row wrap; justify-content: center; width: 100%; margin: 4.5rem auto 6.5rem;  color: #151515; font-size: 1.8rem; font-weight: 400;}
.icons > li {padding: 0 3.5%; text-align: center; vertical-align: middle;}
.icons a {position: relative; display: flex; flex-flow: row wrap; align-items: center; word-break: keep-all;  overflow: hidden;}
.icons a.type1 {/* width: 15rem; */margin-right: .15rem;max-width: 100%;}
.icons a.type1::before { display: none; }
.icons a.type1 i {height: 4.5rem;}
.icons a i img {max-height: 100%;}
.icons a.type1 span { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; }
.icons a.type2 i {display: flex; align-items: center; justify-content: center; width: 4.5rem;height: 5rem;margin-right: 1rem;text-align: center;vertical-align: middle;line-height: 4.5rem;}
.icons a.type2 span {display: flex; height: 4.5rem;  line-height: 1.2;letter-spacing: -0.1rem; font-weight: 500; align-items: center; overflow: hidden; }
.icons a.type2 img {vertical-align: middle; }