@charset "UTF-8";
/*-------------------------------------------------
title       : 메인
Author      : 조민지
Create date : 2020-12-30
-------------------------------------------------*/
@import url("../../../eng/css/common_main.css");

#visual .group1 .desc { padding: 6rem 3rem 5.5rem 13.5rem; }
#visual .group1 .desc strong { overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.42857; height: 5.6em; /* 210218 수정 */ }
#visual .group2 .title { width: 12.8rem; }
.section1 .latest .group2 .label a { left: 18rem; }
.section2 { width: 134rem; max-width: calc(100% - 4rem); margin-left: auto !important; margin-right: auto !important; display: block; padding: 6rem 0; }
.section2::before { background: linear-gradient(-15deg, #EFF4F8 45%, #FFF2F9 55%); }
.section2::after { display: block; clear: both; width: 100%; height: 0; content: ''; }
.section2 h2.title { font-size: 2.8rem; margin-bottom: 2.5rem; color: #151515; }
.section2 .group { display: inline-block; width: 100%; height: auto; font-size: 0; vertical-align: top; white-space: nowrap; }
.section2 .group::before { display: none; }
.section2 .group::after { display: block; position: static; clear: both; width: 100%; height: 0; margin: 0; padding: 0; opacity: 0 !important; border: 0 none; }
.section2 .news_cate { display: none; }
.section2 .news_tit { font-size: 1.8rem; display: block; height: 14.5rem; padding: 3rem; background: url("/eng/img/main/event.png") no-repeat 90% 85% #1A3D69; color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; word-break: keep-all; }
.section2 .news_txt { font-size: 1.6rem; height: 15.5rem; padding: 1.5rem 3rem; background-color: #fff; }
.section2 .news_txt p { height: 5rem; text-overflow: ellipsis; overflow: hidden; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 2.5rem; white-space: normal; word-break: break-all; }
.section2 .news_txt p span { font-weight: 600; }
.section2 .news_txt p.event_date { margin-bottom: 0.7rem; }
.section2 .news_date { font-size: 1.4rem; position: absolute; left: 3rem; bottom: 3rem; color: #555; }
.section2 .news_date::before { display: inline-block; position: relative; top: 1px; font-family: "xeicon"; vertical-align: top; position: relative; top: -0.1rem; margin-right: 0.5rem; color: #777; content: ''; }
.section2 .board { display: inline-block; width: 30.5rem; margin-right: 4rem; padding: 0; white-space: normal; vertical-align: top; }
.section2 .board:last-child { margin-right: 0; }
.section2 .board a { display: block; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; }
.section2 .board a:hover, .section2 .board a:focus { -webkit-box-shadow: 0 0.3rem 0.6rem rgba(144, 144, 144, 0.16); box-shadow: 0 0.3rem 0.6rem rgba(144, 144, 144, 0.16); }
.section2 .board a:hover .news_tit, .section2 .board a:focus .news_tit { background-color: #25206B; }
.section2 .more { top: 6rem; width: 4rem; height: 4rem; line-height: 4rem; }
.section2 .mCSB_scrollTools .mCSB_draggerRail { width: 0.8rem; border-radius: 0; background-color: rgba(79, 84, 114, 0.4); opacity: 1; }
.section2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 0.8rem; border-radius: 0; background-color: #D9000D !important; opacity: 1; }

.section3  {
	display: flex; 
	display: -webkit-flex; 
	flex-flow: row wrap;
	margin: 0 -1rem;
	text-align: left;
	}
.section3 .box {
    width: calc(25% - 2rem);
	margin: 0 1rem;
    overflow: hidden;
	}
.perspective-section {
    position: relative;
    min-height: 48.1rem;
    padding: 3.5rem 3rem 0;
	}
.perspective-section::before {
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #F5F5F5;
	content: '';  
	z-index: -1;
	}	
.perspective-section .title {
	margin-bottom: 2.4rem;
    line-height: 1.5;
    letter-spacing: -0.1px;
    font-size: 2rem;
	}
.perspective-section .title::after {
	display: block;
	width: 2.5rem;
	height: .6rem;
	margin-top: 2.2rem;
	background-color:#00A1ED;
	content: '';
	}
.perspective-section p {
    margin-bottom: 4rem;
    line-height: 1.25;
	}	
.video-box {
	display: block;
    width: 100%;
	color: #fff;
	}	
.video-box + .video-box {
	margin-top: 2rem;
	} 
.video-box a {
	display: block;
    padding: 0 2.5rem 1rem;
	background-color: #395679;
	overflow: hidden;
	}
.video-box .thumb {
	display: block;
	position: relative;
    height: 0;
    margin: 0 -2.5rem;
    padding-bottom: 16rem;
    background-color: #000;
    overflow: hidden;
	}
.video-box .thumb img {
	position: absolute;
    top: 50%;
	left: 0;
	width: 100%;
    transform: translateY(-50%);
	}
.video-box .thumb::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5rem;
    height: 5rem;
    border-radius: 100%;
    border: 0.5rem solid #fff;
    color: #fff;
    text-align: center;
    text-indent: 0.25rem;
    line-height: 4rem;
    transform: translate(-50%, -50%);
    font-family: "xeicon";
    font-size: 4rem;
    opacity: 0.8;
    content: '';
    z-index: 2;
	}
.video-box .thumb::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5rem;
    height: 5rem;
    border-radius: 100%;
    border: 0.5rem solid #fff;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 3;
    content: '';
	}
.video-box .title {
	margin: 1rem 0 .4rem;
    line-height: 1.2;
	font-size: 1.9rem;
	}	
.video-box .txt {
	display: block;
	color: rgba(255,255,255, .5);
    line-height: 1.5;	
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
	font-size: 1.6rem;
    overflow: hidden;
	}
.eaer-section {
    position: relative;
    padding: 3.5rem 3rem;
	background-color: #667280;
	color: #fff;
	}	
.eaer-section::after {
    position: absolute;
    top: 4.8rem;
    right: 6rem;
    width: 10.9rem;
    height: 10.9rem;
    background: url("/main/img/main/item2.png") no-repeat;
    background-size: 100% 100%;
    content: '';
	}
.eaer-section .title {
    max-height: 6rem;
    line-height: 1.5;
    letter-spacing: -0.1px;
    font-size: 2rem;
    }
.eaer-section a {
	position: relative;
	display: block;
	overflow: hidden;
	}
.eaer-section > a {
    height: 12.5rem;
	}
.eaer-section i {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 12rem;
    line-height: 12rem;
    z-index: 1;
	}
.eaer-section p {
    width: 14rem;
    min-height: 7.7rem;
    margin-bottom: 2rem;
    padding-top:2.5rem;
    word-break: keep-all;
	}	
.eaer-section .more {
    position: absolute;
    left: 0;
    bottom: 0;
	}
.eaer-list {
    margin-top: 2rem;
    font-size: 1.5rem;
	overflow: hidden;
	}
.eaer-list > li {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #7D8894;
    line-height: 1.5;
	}
.eaer-list > li a {
	text-overflow: ellipsis;
    white-space: nowrap;
    }
.section3 .icon-box {
    display: block;
    margin-top: -1rem !important;
    margin-bottom:-1rem !important;
	padding-left: 0;
	}	
.icon-box .item {display: block; position: relative;  width: 100%; height: calc(50% - 2rem); margin: 1rem 0; padding: 3.5rem 3rem; background-color: #0083D0; color: #fff; overflow: hidden;}
.icon-box .item::after {position: absolute;bottom: 2rem; right: 1rem; width: 10.9rem; height: 10.9rem; content: '';}
.icon-box .item strong {display: block; max-height: 6rem; line-height: 1.5; letter-spacing: -0.1px;  overflow: hidden; }
.icon-box .item ul {position: relative; width: 22rem; margin: 1rem 0 1rem; z-index: 1;}
.icon-box .item ul li { padding-left: 1rem; font-size: 1.5rem; line-height: 1.8rem; }
.icon-box .item ul li + li { margin-top: 0.3rem; }
.icon-box .item ul li::before { content: '-'; margin-left: -1rem; margin-right: 0.5rem; }
.icon-box .item .more { position: absolute; left: 3rem; bottom: 2.5rem; }
.icon-box .item1 {margin-bottom: 2rem;}
.icon-box .item1 ul { margin-top: 1.5rem; }
.icon-box .item1::after { background: url("/eng/img/main/item1.png") no-repeat 0 0/cover; }
.icon-box .item3::after { background: url("/eng/img/main/item3.png") no-repeat 0 0/cover; }
.icon-box .item3 {background-color: #395679;}
    
.about {
	width: 34rem;
    height: 100%;
    min-height: 48.1rem;
    padding: 3.5rem 3rem;
    background: url(/eng/img/main/about.jpg) no-repeat right top/cover;
    color: #fff;
	}
.about .title {margin-bottom: 2.5rem;  font-size: 2rem; }
.about span { display: block; width: 23.5rem; max-width: 100%; margin-bottom: 12rem; font-size: 1.8rem; font-style: italic; }
.about .btns { display: flex; display: -webkit-flex; flex-flow: row wrap; margin: -0.5rem;}
.about .btns a {	
	display: block;
	width: calc(50% - 1rem); 
	margin: 0.5rem;
    padding: 2rem 0;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.5);
    text-align: center;
    transition: all 0.3s;
    font-size: 1.6rem;
    font-weight: 500;
	}
.about .btns a:hover, .about .btns a:focus { border-color: #fff; background-color: #fff; color: #151515; }

.icons a { font-weight: 500; }
.icons a.type2 > span { font-size: 1.8rem; }

.pool li a { overflow: hidden; }
.pool li a::before { display: block; content: 'More'; }
.trend em { letter-spacing: -0.1px; }

@media (max-width: 1470px) { 
.section3 .icon-box .item.item1 ul { margin-top: 0.8rem; } 
}
@media (max-width: 1150px) {
.section3 {
    margin: 0 -.5rem;
	}
.section3 .box {
    width: calc(25% - 1rem);
    margin: 0 .5rem;
	}
.eaer-section p {
	width: calc(100% - 11rem);
	}
.about {
    padding: 3rem 2.5rem;
	}
		
}
@media (max-width: 1024px) {
.section3 .box {display: flex; display: -webkit-flex; flex-flow: row wrap; width: calc(100% + 1rem);margin: 0 -.5rem 2rem;}
.video-box {width: calc(50% - 1rem); margin: 0 .5rem;}
.video-box + .video-box {margin-top: 0;}
.box.perspective-section,
.box.eaer-section {
    margin-bottom: 2rem;
	}
.eaer-section .title {
	display: block;
	width: 100%;
	}	
.section3 .icon-box {
    height: 19.5rem;
	}
.icon-box .item {	
	width: calc(50% - 1rem);
    height: 100%;
	margin: 0 .5rem;
	}
.icon-box .item1 ul {
	width: 80%;
	}
.section3 .about {
	clear: both;	
    display: block;
    margin-top: 2rem;
	}
}
@media (max-width: 580px) {
.section3 .box {
    width: 100%;
    margin: 0 0 2rem;
	}	
.video-box {
	width: 100%;
	margin: 0 0 1rem;
	}	
.video-box .thumb {
    padding-bottom:50%;
	}
.box.about {
    min-height: inherit;
	margin: 2rem 0 0;
	}
.about span {
	margin-bottom: 6rem;
	}
.icon-box .item {
	width: 100%;	
    margin: 0;
	}	
.icon-box .item .more {
    position: relative;
    left: auto;
    bottom: auto;
	}	
}
@media (max-width: 475px) {

}