@charset "UTF-8";
/*-------------------------------------------------
title       : 메인
Author      : ㄱㅅㅎ
Create date : 2021-11-29
-------------------------------------------------*/
/************************************************
 * section1
 ************************************************/
.section1{padding:2.7rem 0 3.2rem}
.section1 .container:after{content:"";display:block;clear:both}
.section1 .col{float:left;transition:all .2s}
.section1 .col.left{width:calc(100% - 27.5rem);margin-right:3rem}
.section1 .col.right{float:none;overflow:hidden}
.visual{position:relative;z-index:0}
.visual .list{position:relative;text-align:center}
.visual .list:before,
.visual .list:after{content:"";position:absolute;left:50%;height:22rem;border-radius:1rem;transform:translateX(-50%)}
.visual .list:before{top:.5rem;width:calc(100% - 1.5rem);background:#DCDFE2;z-index:1}
.visual .list:after{top:1rem;width:calc(100% - 3.5rem);background:#F2F4F6;z-index:0}
.visual .list .item{position:relative;height:22rem;background-position:left top;background-repeat:no-repeat;color:#fff}
.visual .list .item .txt{position:absolute;left:0;bottom:0;padding:0 0 2.5rem 2.5rem;word-break:keep-all;text-align:left}
.visual .list .item .txt span{display:block;font-family:"Poppins",sans-serif;font-size:.7rem;font-weight:500;letter-spacing:0}
.visual .list .item .txt strong{display:block;margin-bottom:.9rem;font-size:2.2rem;line-height:2.25rem;letter-spacing:-.0665rem;font-family:"Poppins",sans-serif}
.visual .list .item .txt p{max-width:24.5rem;font-size:.9rem;font-weight:300;letter-spacing:-.025rem}
.visual .list .slick-arrow{position:absolute;left:.5rem;bottom:.35rem;font-size:.75rem;color:#848B9C}
.visual .list .slick-arrow.prev{padding-left:2.5rem}
.visual .list .slick-arrow.next{left:inherit;right:.5rem;padding-right:2.5rem}
.visual .list .slick-arrow:before{content:"";position:absolute;left:0;top:.15rem;width:1.85rem;height:.45rem;background-size:contain;background-repeat:no-repeat}
.visual .list .slick-arrow.prev:before{background-image:url(/en/img/main/img_arrow_prev.png)}
.visual .list .slick-arrow.next:before{left:auto;right:0;background-image:url(/en/img/main/img_arrow_next.png)}
.visual .list .slick-arrow.prev:hover:before,
.visual .list .slick-arrow.prev:focus:before{animation:prev .7s infinite linear}
.visual .list .slick-arrow.next:hover:before,
.visual .list .slick-arrow.next:focus:before{animation:next .7s infinite linear}
.visual .list .slick-list{position:relative;margin-bottom:2rem;border-radius:1rem;z-index:2}
.visual .list .slick-dots,
.visual .list .controls{display:inline-block;vertical-align:middle}
.visual .list .slick-dots li{float:left;height:.6rem;margin:0 .3rem}
.visual .list .slick-dots li button{width:.6rem;height:.6rem;border-radius:50%;background:#DCDFE2;padding-top:.6rem;overflow:hidden;vertical-align:top}
.visual .list .slick-dots li.slick-active button{background:#EE2F00}
.visual .list .controls{margin:.1rem 0 0 .2rem}
.visual .list .controls button{overflow:hidden;width:1rem;height:.7rem;line-height:.8rem;color:#7B838B;font-size:.9rem}
.visual .list .controls button.active{display:none}
.visual .list .controls button:before{display:inline-block;font-family:"xeicon"}
.visual .list .controls button.play:before{content:"\ea3e"}
.visual .list .controls button.stop:before{content:"\ea3b"}
@keyframes prev {
    50%{left:.3rem}
    100%{left:0}
}
@keyframes next {
    50%{right:.3rem}
    100%{right:0}
}

.news{position:relative}
.news h2{padding-bottom:.75rem;line-height:1.85rem;border-bottom:2px solid #a9a9a9;font-size:1.35rem;font-weight:bold;color:#000;font-family:"Poppins", sans-serif}
.news h2 span{color:#ED3539}
.news_list li{padding:1rem 0;border-bottom:1px solid #E1E1E1}
.news_list li .category{float:left;display:inline-block;width:3.8rem;margin-right:.4rem;padding:0 .2rem;height:1.3rem;line-height:1.3rem;font-size:.75rem;text-align:center;color:#fff;background:#1CAEB8}
.news_list li .category.c2{background:#1994D1}
.news_list li .category.c3{background:#405FB4}
.news_list li .category.c4{background:#834ABB}
.news_list li a{display:block}
.news_list li a:after{content:"";display:block;clear:both}
.news_list li a>.thumb{float:right;width:6.65rem;height:4.45rem;overflow:hidden;margin-left:.65rem;text-align:center;border-radius:.5rem}
.news_list li a>.thumb img{height:100%;transition:all .2s}
.news_list li a:hover>.thumb img,
.news_list li a:focus>.thumb img{transform:scale(1.05)}
.news_list li a>strong{position:relative;display:inline-block;margin:0 0 .1rem;max-width:100%;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;color:#151515;font-family:"Poppins", sans-serif}
.news_list li a>strong:after{content:"";position:absolute;left:0;bottom:0;width:0;border-bottom:1px solid #151515;transition:all .2s}
.news_list li a:hover>strong:after,
.news_list li a:focus>strong:after{width:100%}
.news_list li a>p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;height:2.2rem;line-height:1.1rem;font-size:.75rem;color:#555;letter-spacing:-.0265rem}
.news_list li a>span{display:block;margin-top:.55rem;line-height:1rem;font-size:.7rem;color:#999;font-family:"Poppins", sans-serif;font-weight:500}

/************************************************
 * section2
 ************************************************/
.section2{position:relative;z-index:1;padding-top:3.15rem;margin-bottom:3.5rem}
.section2:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:80rem;height:23.5rem;border-radius:2.5rem 2.5rem 0 0;background:linear-gradient(108deg, #EFF4F9 0%, #FFFCF6 100%) 0 0 no-repeat;z-index:0}
.section2 .tit_wrap{text-align:center;margin-bottom:2.45rem}
.section2 .tit{margin-bottom:.45rem;font-size:1.6rem;color:#000;line-height:2.25rem;letter-spacing:-.08rem;font-family:"Poppins",sans-serif}
.section2 .tit span{color:#F23545}
.section2 .sub_tit{color:#555;font-size:.9rem;line-height:1.25rem;letter-spacing:-.0375rem;opacity:.8;word-break:keep-all}

.business .slick-list{width:calc(100% + 2.4rem);padding-top:1rem}
.business .item{position:relative;margin-right:2.4rem}
.business .item .num{position:absolute;left:0;top:-1rem;width:3rem;height:3rem;line-height:3rem;text-align:center;color:#fff;background:#263B75;font-family:"Poppins",sans-serif;font-size:.9rem;font-weight:500;letter-spacing:0;z-index:1}
.business .item .num:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(180deg, #FF3665 0%, #EB3535 100%);z-index:0;opacity:0;transition:all .2s}
.business .item .num i{position:relative;z-index:1}
.business .item a:hover .num:after,
.business .item a:focus .num:after{opacity:1}
.business .item .img{position:relative;height:11.65rem;overflow:hidden;border-radius:0 2rem 0 0}
.business .item .img:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;transition:all .2s}
.business .item .img img{position:absolute;left:50%;top:50%;height:100%;transform:translate(-50%, -50%);transition:all .2s;z-index:0}
.business .item a:hover .img img,
.business .item a:focus .img img{transform:translate(-50%, -50%) scale(1.1)}
.business .item a:hover .img:after,
.business .item a:focus .img:after{opacity:1}
.business .item .img span{opacity:0;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);font-family:"Poppins",sans-serif;font-size:.8rem;color:#fff;letter-spacing:.024rem;transition:all .2s;z-index:1}
.business .item .img span:after{content:"\e9c5";font-family:"xeicon"}
.business .item a:hover .img span,
.business .item a:focus .img span{opacity:1}
.business .item .desc{padding:1.1rem 0 1.5rem;border-bottom:2px solid #EBEBEB;transition:all .2s}
.business .item a:hover .desc,
.business .item a:focus .desc{border-color:#263B75}
.business .item .desc strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:3rem;font-size:1.1rem;font-weight:500;color:#333;line-height:1.5rem;letter-spacing:-.033rem;transition:all .2s;overflow:hidden;text-overflow:ellipsis}
.business .item a:hover .desc strong,
.business .item a:focus .desc strong{color:#3D4A6D}
.business .item .desc p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis;height:3.75rem;color:#767676;font-size:.8rem;line-height:1.25rem;word-break:keep-all}
.business .slick-arrow{position:absolute;top:37%;width:2.5rem;height:2.5rem;text-align:center;overflow:hidden;transform:translateY(-50%);color:#C7C8CC;z-index:1}
.business .slick-arrow:before{display:inline-block;line-height:2.5rem;font-size:2.5rem;font-family:"xeicon"}
.business .slick-arrow.prev{left:-4.6rem}
.business .slick-arrow.next{right:-4.6rem}
.business .slick-arrow.prev:before{content:"\e93d"}
.business .slick-arrow.next:before{content:"\e940"}

/************************************************
 * etc_link
 ************************************************/
.etc_link{margin-top:3.5rem}
.etc_link>ul:after{content:"";display:block;clear:both}
.etc_link>ul>li{float:left;width:calc(50% - 0.5rem);margin-left:1rem}
.etc_link>ul>li:first-child{margin-left:0}
.etc_link>ul>li .icon{display:inline-block;width:3.6rem;height:3.6rem;border-radius:50%;border:5px solid rgba(255,255,255,.3);text-align:center;line-height:calc(3.6rem - 10px);vertical-align:middle;transition:all .3s}
.etc_link>ul>li .icon img{transition:all .3s}
.etc_link>ul>li .link{padding:1.4rem 1.85rem;border-radius:.5rem;overflow:hidden;background:#4252AB url(../img/main/bg_imgGradient.png) right top no-repeat;background-size:auto 100%;color:#fff;transition:all .3s}
.etc_link>ul>li .link.type2{background-color:#29858F}
.etc_link>ul>li .link strong{position:relative;display:inline-block;margin-left:.8rem;font-size:1.25rem;vertical-align:middle}
.etc_link>ul>li .link strong:before{content:"";position:absolute;top:50%;right:-135%;width:5.5rem;height:0;border-bottom:1px solid #fff}
.etc_link>ul>li:nth-child(2) .link strong:before{right:-90%}

.etc_link>ul>li>a:hover .icon{border-color:rgba(255,255,255,.6)}
.etc_link>ul>li>a:hover .icon img{transform:rotateY(180deg)}
.etc_link>ul>li>a:hover .link{background-color:#404b96}
.etc_link>ul>li>a:hover .link.type2{background-color:#27757f}

/************************************************
 * Responsive
 ************************************************/
@media (max-width:1460px){
    .business .slick-arrow{color:#fff}
    .business .slick-arrow.prev{left:0}
    .business .slick-arrow.next{right:0}
}
@media (max-width: 1280px) {
    .section1 .col.left{width:calc(100% - 23.5rem);margin-right:1.5rem}
    .news_list li a>.thumb{margin-left:.5rem}
    .section1 .col.right{width:22rem}
}
@media (max-width: 1024px) {
    .section1 .col.left{float:none;width:100%;margin-right:0}
    .section1 .col.right{width:100%;margin-top:1.5rem}
    .visual .list .item{background-size:cover}

    .business .slick-list{width:calc(100% + 1rem)}
    .business .item{margin-right:1rem}
    .business .item .desc strong{font-size:1rem}
}
@media (max-width: 768px) {
    .section1{padding:1.5rem 0 2rem}
    .section2{padding-top:2rem;margin-bottom:2rem}
    .section2:before{height:22.1rem}
    .section2 .tit{font-size:1.3rem;line-height:2rem}

    .visual .list .item,
    .visual .list:before,
    .visual .list:after{height:18rem}

    .etc_link{margin-top:2rem}
    .etc_link>ul>li{width:100%;margin:1rem 0 0}
    .etc_link>ul>li:first-child{margin-top:0}
    .etc_link>ul>li .link{padding:1rem 1.4rem}
    .etc_link>ul>li .link strong{font-size:1.1rem}
}
@media (max-width:700px){
    .business .item .img{height:10.3rem}
}
@media (max-width:640px){
    .visual .list .item .txt{transition:all .2s;padding:0 1.5rem 1.5rem}
    .visual .list .item .txt strong{font-size:1.5rem}
    .visual .list .item .txt p{font-size:.75rem}
}
@media (max-width:500px){
    .section2 .tit_wrap{margin-bottom:1.5rem}

    .business .slick-arrow{top:38%}
    .business .item .img{height:12rem}
    .business .item .img img{width:auto;height:100%;max-width:inherit}
}
@media (max-width:400px){
    .visual .list .item,
    .visual .list:before,
    .visual .list:after{height:13rem}
    .visual .list .item .txt{padding:0 0 1rem 1rem}

    .business .item .img img{height:100%}
}
@media (max-width:350px){
    .news_list li a>.thumb,
    .news_list li a>.thumb img{width:100%;height:auto}
    .news_list li a>.thumb{margin-bottom:1rem}
}