@charset "UTF-8";
@import url("../../../main/css/main.css");
/*-------------------------------------------------
title       : 메인
Author      : 조민지
Create date : 2020-06-05
-------------------------------------------------*/

#visual { z-index: 2; }

.section1 { display: inline-block; overflow: visible; width: 100%; padding-bottom: 25rem; vertical-align: top; }
.section1::before { position: absolute; left: 50%; top: -25rem; z-index: -1; width: 1000%; height: 100%; background: linear-gradient(to bottom, #e3e6e8, #fff, rgba(255, 255, 255, 0)); content: ''; transform: translateX(-50%); }

.news > .title { background: url('/eng/img/main/news.jpg') no-repeat center center / cover; }

.research { float: left; position: relative; width: calc(100% - 52rem); }
.research h2 { display: inline-block; position: relative; margin-bottom: 2rem; font-size: 3.5rem; color: #222; line-height: 1.2; vertical-align: top; }
.research h2::after { position: absolute; right: -1rem; top: 0; width: 1rem; height: 1rem; border-radius: 100%; background-color: #eedc23; content: ''; }

.research .more { overflow: hidden; position: absolute; right: 0; top: 0; width: 4rem; height: 4rem; border: 2px solid #1b1b1b; font-size: 1.9rem; color: #11252d; text-align: center; line-height: 3.6rem; }
.research .more::before { display: block; font-family: 'xeicon'; content: ''; transition: all 0.2s; }
.research .more:hover::before,
.research .more:focus::before { transform: rotate(180deg); }

.research .list a { display: block; position: relative; padding: 2rem 0 2rem 7rem; }
.research .list a:hover .title,
.research .list a:focus .title { color: #333; text-decoration: underline; }
.research .list li + li a { border-top: 1px solid #dbdbdb; }
.research .list .txt { display: none; }
.research .list .desc { display: block; overflow: hidden; height: 5rem; }
.research .list .title { display: block; font-size: 1.8rem; line-height: 2.5rem; transition: all 0.2s; }
.research .list .date { overflow: hidden; position: absolute; top: 2rem; left: 0; width: 3.5rem; padding-top: 2.75rem; font-size: 1.5rem; color: #333; text-indent: -2rem; text-align: center; }
.research .list .date strong { position: absolute; left: 0; top: 0; width: 100%; font-size: 3rem; text-indent: 0; text-align: center; line-height: 1; }

.banner { float: right; width: 44.5rem; }

.banner ul { overflow: hidden; margin-bottom: 2rem; }
.banner li { float: left; width: calc(50% - 1rem); }
.banner li + li { float: right; }
.banner li + li a { background: url('/eng/img/main/banner2.gif') no-repeat right bottom #004da6; }
.banner li a { display: block; position: relative; height: 21rem; padding: 2.5rem; background: url('/eng/img/main/banner1.gif') no-repeat right bottom #0590ae; font-size: 2.2rem; color: #fff; line-height: 2.6rem; }
.banner li a:hover span,
.banner li a:focus span { opacity: 1; }
.banner li span { position: absolute; left: 2.5rem; bottom: 2.5rem; font-size: 1.6rem; opacity: 0.35; transition: all 0.2s; }

.banner .pr { display: block; float: none; width: 100%; height: 21rem; margin: 0; }
.banner .pr .title { bottom: 0; padding: 1.5rem 2.5rem; background: none; line-height: 1.2; }
.banner .pr img { height: auto; }
.banner .pr:hover img ,
.banner .pr:focus img { transform: translate(-50%, -50%) scale(1.2); }

.latest .more {left: 10rem;}

.section2 .list .desc { font-size: 1.6rem; }
.section2 .list .desc strong { font-size: 4rem; }
.section2 .list .desc a { font-weight: 600; }
.section2 .list .list1 .desc strong { font-size: 3.5rem; }

.section3 .list .desc h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 4rem; width: 100%; }
.section3 .list .desc span { font-size: 1.6rem; }
.section3 .list .img a { font-weight: 600; }