@charset "UTF-8";
/*-------------------------------------------------
title       :메인
Create date :2022-05-16
-------------------------------------------------*/

/*비주얼*/
.visual {background-color:#000; height:97rem; position:relative}
.visual:after {content:''; color:rgba(255,255,255,0.5); font-family:'xeicon'; font-size:4rem; position:absolute; left:50%; bottom:5rem; transform:translateX(-50%)}
.visual .list {height:100%}
.visual .slick-list {height:100%}
.visual .slick-track {height:100%}
.visual .slick-slide {height:100%}
.visual .img img {position:absolute; left:50%; top:0; transform:translateX(-50%); max-width:inherit; min-height:100%; object-fit:cover}
.visual .desc {color:#fff; max-width:140rem; width:calc(100% - 4rem); word-break:keep-all; padding-right:30%; position:absolute; left:50%; top:30rem; transform:translate(-50%)}
.visual .desc .title {display:block; font-size:7.2rem; font-weight:700; line-height:1.2}
.visual .desc .con {display:block; font-size:2rem; font-weight:300; line-height:1.2; margin-top:3.5rem}

.visual .slider-progress {background-color:#fff; width:7rem; height:2px; position:absolute; left:6rem; top:1.2rem}
.visual .slider-progress span {position: absolute;left: 0;bottom: 0;display: block;width: 0px;height: 100%;background-color:#0066b3;transition: all 0s linear;}
.visual .slider-progress span.active {width: 100%;}
.visual .control_box {max-width:140rem; width:calc(100% - 4rem); position:absolute; left:50%; top:70%; transform:translate(-50%, -50%)}
.visual .paging {margin-left:3rem}
.visual .paging span {color:#fff; font-size:1.6rem}
.visual .paging .this {color:#fff !important; font-weight:normal; margin-right:11.5rem}
.visual .paging .this:after {display:none}
.visual .controller {position:absolute; left:-0.3rem; top:-0.3rem}
.visual .controller button:before {color:#fff; font-size:2rem}
.visual .controller .next {margin-left:16rem; margin-right:1rem}


/*공통*/
.section {overflow:hidden; padding:7rem 2rem 10rem; position:relative}
.section .title {color:#fff; display:block; font-size:5.5rem; font-weight:700; margin-bottom:7rem; text-align:center}
.section > div {max-width:140rem; margin:0 auto}
.section > div:after {content:''; background-repeat:no-repeat; background-position:top center; width:13.5rem; height:100%; position:absolute; top:10rem}

/*identity*/
.identity {background-color:#fff}
.identity .title {color:#333}
.identity > div:after {background-image:url('/kor/img/main/identity-bg.png'); right:12rem}
.identity .list {display:flex; justify-content:space-between; width:calc(100% + 1.5rem)}
.identity .list li {height:43rem; width:calc(16.6% - 1.5rem); margin-right:1.5rem; overflow:hidden; position:relative; transition:all .5s; word-break:keep-all; z-index:1}
.identity .list li a {display:block; width:100%; height:100%}
.identity .list .img {position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1}
.identity .list .img img {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; max-width:inherit; min-height:100%; object-fit:cover}

.identity .before {display:flex; flex-direction:column; justify-content:center; text-align:center; height:100%}
.identity .before .tt {color:#fff; font-size:1.4rem; font-weight:700; line-height:1.2}

.identity .after {visibility:hidden; opacity:0; width:0; height:0}
.identity .after .desc {background-color:rgba(0,0,0,0.5); max-width:30rem; height:100%; padding:5.5rem 4rem; position:relative}
.identity .after .tt {color:#fff; display:block; font-size:2rem; font-weight:700; line-height:1.2}
.identity .after .con {color:#fff; display:block; font-size:1.6rem; font-weight:300; line-height:1.4; margin-top:1rem}
.identity .after .more {border:1px solid #fff; border-radius:100%; color:#fff; display:block; font-size:2.4rem; width:4rem; height:4rem; line-height:4rem; text-align:center; overflow:hidden; position:absolute; left:50%; bottom:6rem; transform:translateX(-50%); transition:all .3s}

.identity .list .active {width:100%; max-width:69rem}
.identity .active .before {visibility:hidden; opacity:0; width:0; height:0}
.identity .active .after {visibility:visible; opacity:1; width:100%; height:100%}
.identity li:focus-within .before {visibility:hidden; opacity:0; width:0; height:0}
.identity li:focus-within .after {visibility:visible; opacity:1; width:100%; height:100%}

@media screen and (min-width:1024px) {
	.identity .after .more:hover {background-color:#fff; color:#333}
	.identity .after .more:hover i {transform:rotate(90deg); transition:all .3s}
}

/*business*/
.business {background-color:#333}
.business > div:after {background-image:url('/kor/img/main/business-bg.png'); left:12rem; opacity:0.3}
.business .group {height:54.5rem; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1}
.business .desc {color:#fff; font-size:1.8rem; font-weight:300; line-height:1.6; padding-left:9.5rem; word-break:keep-all}
.business .img {width:79.5rem; height:100%; position:absolute; left:62%; top:0}
.business .group01 b {color:#0285ea; font-weight:700; line-height:1.4}
.business .group01 p {color:#bbb; font-weight:100; font-size:1.6rem}
.business .group02 {margin-top:10rem}
.business .group02 .img {left:auto; right:62%}
.business .group02 .desc {padding-left:calc(50% - 6.5rem); height:100%}
.business .group02 ul {display:flex; flex-direction:column; justify-content:space-around; height:100%}
.business .group02 li {position:relative; padding-left:4rem}
.business .group02 .num {display:block; font-size:2rem; font-weight:300; position:absolute; left:0}
.business .group02 span {color:#bbb; display:inline-block; font-size:2rem; font-weight:100; line-height:1.4; vertical-align:top}
.business .group02 span > b {color:#fff; display:block; font-weight:600}
.business .group02 .eng {width:70%}