@charset "UTF-8";
/*-------------------------------------------------
title       :main
Author      :yeonachoi
Create date :2021-02-18
-------------------------------------------------*/

body{font-weight:bold;}
.visual{position:relative;height:16.5rem;}
.visual>ul{height: 100%;}
.visual .visual_txt{position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.visual li:before{background:url(../../../main/images/eng/main/visual01.jpg) no-repeat center/cover;height:16.5rem;width:100%;content:'';position: absolute;top:0;left:0;}

.visual h2 span{color:#00436e;font-size:1.1rem;display:block;margin-bottom:1rem;}
.visual h2 strong{font-size:1.3rem;color:#fff;}
.visual .arrow{float:right;}
.visual .arrow a{width:2.3rem;height:2.3rem;border-radius: 50%;border:1px solid rgba(255,255,255,0.4);display:inline-block;color:#fff;text-align: center;transition:all .3s;}
.visual .arrow a > i{line-height: 2.1rem;font-size:.9rem;}
.visual .arrow a:hover,
.visual .arrow a:focus{background:linear-gradient(97deg, #125095 0%, #76b729 100%);border-radius: 30px;background-image: linear-gradient(97deg, #125095 0%, #76b729 100%);background-origin: border-box;background-clip: content-box, border-box;border:1px solid transparent;}
.section{padding:3rem 0;background:#e7ebef;}
.section>.container{overflow:hidden;height:28.5rem;}
.section h3{font-size:1.5rem;}
.section .element1{float:left;width:18.25rem;color:#fff;background:linear-gradient(130deg, #76b729 0%, #125095 100%);height:100%;}
.section .element1>h3>a{height:4rem;line-height:4rem;padding:0 1.9rem;position:relative;display:block;z-index: 1;}
.section .element1>h3>a:hover>i{transform:translateY(-50%) rotate(180deg);-webkit-transition: all .3s;transition: all .3s;}
.section .element1>h3>a>i{opacity:.8;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:2rem;}
.section .element1>h3>a:before{content:'';background:rgba(0,0,0,0.1);width:100%;height:100%;position:absolute;top:0;left:0;z-index: -1;}
.section .element1 .about_icon>li{padding:0 2.5rem;}
.section .element1 .about_icon>li>a{font-size:1.15rem;position:relative;padding:2.3rem 0 2.3rem 3.5rem;display:block;border-bottom:1px solid rgba(255,255,255,.1);}
.section .element1 .about_icon>li>a:before{content:'';position:absolute;top:50%;left:0;background: url(../../../main/images/eng/main/icon1.png) no-repeat;width:40px;height:45px;-webkit-transform: translateY(-50%) scale(1);transform: translateY(-50%) scale(1);}
.section .element1 .about_icon>li.icon2>a:before{background:url(../../../main/images/eng/main/icon2.png) no-repeat;width:37px;height:37;}
.section .element1 .about_icon>li.icon3>a:before{background:url(../../../main/images/eng/main/icon3.png) no-repeat;width:38px;height:39;}
.section .element1 .about_icon>li.icon4>a:before{background:url(../../../main/images/eng/main/icon4.png) no-repeat;width:42px;height:42;}
.section .element1 .about_icon>li.icon4>a{border-bottom:0;}
.section .element1 .about_icon>li>a span{position:relative;}
.section .element1 .about_icon>li>a span:after{content:'';background:#fff;width:0;height:1px;position:absolute;bottom:0;left:0;-webkit-transition: all .4s;transition: all .4s;opacity: 0;}
.section .element1 .about_icon>li>a:hover span:after{width:100%;opacity: 1;}
.section .element1 .about_icon>li>a:hover:before{-webkit-transform: translateY(-50%) scale(1.1);transform: translateY(-50%) scale(1.1);-webkit-transition: all .2s;transition: all .2s;}

.section .element2{float:left;width:calc(100% - 34.05rem);padding:0 1.4rem ;}
.section .block1{margin-bottom:.75rem;height:15.35rem;overflow:hidden;}
.section .element2 .block1>.inner{background:#fff;padding:1.5rem 1.8rem;height:100%;}
.section .element2 .block1>.inner>.txt{overflow:hidden;padding-bottom:1.1rem;}
.section .element2 .block1>.inner>.txt>h3 i{font-size:1rem;margin-left:5px;opacity: .8;}
.section .element2 .block1>.inner>.txt>h3{float:left;}
.section .element2 .block1>.inner>.txt>.btn_line{float:right;height:1.75rem;border:1px solid #b7c3ca;background:#f4f7f8;padding: 0.35rem 0.55rem;text-align: center;margin-top: 4px;font-weight: 400;}
.section .element2 .block1>.inner>.txt>.btn_line:hover{background:#333;color:#fff;-webkit-transition:all .3s;transition:all .3s;}
.section .element2 .block1>.inner>.txt>.btn_line:hover i{color:#fff;}
.section .element2 .block1>.inner>.txt>.btn_line>i{color:#2a2d2e;font-size:.9rem;margin-left:1.1rem;display:inline-block;vertical-align: middle;}
.section .element2 .center_lst{overflow:hidden;width:calc(100% + 1rem);}
.section .element2 .center_lst>li{float:left;width:50%;padding-right:1rem;}
.section .element2 .center_lst>li>a{display:block;}
.section .element2 .center_lst>li>a>.thumb{display:block;overflow:hidden;position:relative;z-index: 0;height:0;margin-bottom:0.65rem;padding-top:56%;background:#000;}
.section .element2 .center_lst>li>a>.thumb:before{position:absolute;top:50%;left:50%;text-align: center;content:"\ea3e";font-size:1.3rem;font-family: 'xeicon';-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:#fff;width:2.1rem;height:2.1rem;border-radius: 50%;border:1px solid rgba(255,255,255,.3);line-height:2.1rem;}
.section .element2 .block2 li>a:before{font-family: 'xeicon';content:"\e913";font-size:1.5rem;opacity: .8;position:absolute;top:1.5rem;right:1.5rem;color:#fff;z-index: 1;font-weight:400;-webkit-transform:rotate(0);transform:rotate(0);-webkit-transition:all .3s;transition:all .3s;}
.section .element2 .block2 li>a:hover:before{font-family: 'xeicon';content:"\e913";font-size:1.5rem;opacity: .8;position:absolute;top:1.5rem;right:1.5rem;color:#fff;z-index: 1;font-weight:400;-webkit-transform:rotate(180deg);transform:rotate(180deg);}
.section .element2 .center_lst>li>a:hover .thumb:before{border:1px solid rgba(255,255,255,1);-webkit-transition:all .3s;transition:all .3s;}
.section .element2 .center_lst>li>a:hover span{text-decoration: underline;}
.section .element2 .center_lst>li>a>.thumb>img{position: absolute; left: 0; top: 50%; z-index: -1; width: 100%; min-height: 100%; transform: translateY(-50%); transition: all 0.2s;}
.section .element2 .center_lst>li>a>.desc{color:#333333;font-weight:400;padding-left:1rem;position: relative;}
.section .element2 .center_lst>li>a>.desc:before{content:"\ea3f";color:#0b60b1;font-size: .8rem;font-family: 'xeicon';position:absolute;top:0;left:0;font-weight: bold;}
.section .element2 .center_lst>li>a>.thumb>img{opacity: .7;}
.section .block2{padding-top:.85rem;height:12.5rem;}
.section .element2 .block2>ul{overflow:hidden;width:calc(100% + 1.5rem);height:100%;}
.section .element2 .block2 li{float:left;width:50%;padding-right:1.5rem;height:100%;}
.section .element2 .block2 li>a{display:block;position:relative;height:100%;}
.section .element2 .block2 li>a>.txt{position:absolute;bottom:2rem;left:2rem;color:#fff;font-size:1.4rem;}
.section .element2 .block2 li .img{width:100%;height:100%;display:block;position:relative;}
.section .element2 .block2 li .img:before{background:rgba(0,0,0,0.42);width:100%;height:100%;content:'';position:absolute;top:0;left:0;}
.section .element2 .block2 li.type2 .img:before{background:rgba(0, 67, 110, .85);}
.section .element2 .block2 li .img img{max-width:100%;height:100%;width:100%;}
.section .element3{overflow:hidden;}
.section .element3 .inner1{position:relative;height:11.15rem;}
.section .element3 .inner1 .arrow{position:absolute;bottom:0;left:0;color:#fff;height:2rem;line-height: 2rem;background:rgba(0,0,0,0.5);width:100%;text-align: right;padding-right:1rem;}

.section .element3 .inner1 .arrow .start{display:none;}
.section .element3 .inner1 .slick-dots{position:absolute;bottom:1.45rem;left:1rem;height:7px;z-index: 1;}
.section .element3 .inner1 .slick-dots li{display:inline-block;z-index: 1;}
.section .element3 .inner1 .slick-dots button{display:block;width:7px;height:7px;border-radius: 50%;text-indent: -99px;background:#fff;font-size:0;opacity: 0.5;}
.section .element3 .inner1 .slick-dots li+li{margin-left:5px;}
.section .element3 .inner1 .slick-dots li.slick-active>button{opacity: 1;}
.section .element3 .inner1>ul,
.section .element3 .inner1>ul li,
.section .element3 .inner1>ul li{height:100%;}
.section .element3 .inner1>ul li a{display:block;height:11.15rem;}
.section .element3 .inner1>ul li img{width:100%;height:100%;max-width: 100%;}
.section .element3 .inner2{height:calc(100% - 11.15rem);padding-top:1rem;}
.section .element3 .inner2>a{display:block;background:#fff;height:100%;position:relative;}
.section .element3 .inner2>a:before{content:'';background:url(../../../main/images/eng/main/com_bg.jpg) no-repeat right/cover;width:5.3rem;height:2.45rem;max-width: 100%;position:absolute;bottom:0;right:0;z-index: 1;}
.section .element3 .inner2>a span{display:inline-block;padding:.75rem 1rem;position:absolute;top:50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);max-width: 100%;height:auto;width:7.75rem;height:3rem;}
.section .element3 .inner2>a span:before{content:"\e940";position:absolute;right:-0.6rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-family: 'xeicon';font-size:.8rem;color:#3d3d3d;opacity: .7;}
.section .element3 .inner1 .arrow .prev,
.section .element3 .inner1 .arrow .next{display:inline-block;}

.section .element3 .block2 > .txt{border:15px solid #fff;padding:1.5rem;height:100%;}
.section .element3 .block2 > .txt>strong{font-size:1.5rem;display:block;margin-bottom:1.5rem;}
.section .element3 .block2 > .txt li + li{margin-top:1rem;}
.section .element3 .block2 > .txt li{position:relative;display:block;font-size:1.1rem;color:#0b60b1;padding-left:1.2rem;}
.section .element3 .block2 > .txt li:nth-child(2){color:#555}
.section .element3 .block2 > .txt li:after{content:'';background:url(../../../main/images/eng/main/ethics1-1.png) no-repeat;width:36px;height:9px;position:absolute;right:0;top:10px;}
.section .element3 .block2 > .txt li:nth-child(2):after{content:'';background:url(../../../main/images/eng/main/ethics2-2.png) no-repeat;}
.section .element3 .block2 > .txt li:before{position: absolute;width:13px;height:15px;background: url(../../../main/images/eng/main/ethics1.png) no-repeat;content:'';left:0;top:6px;}
.section .element3 .block2 > .txt li:nth-child(2):before{position: absolute;width:17px;height:15px;background: url(../../../main/images/eng/main/ethics2.png) no-repeat;content:'';left:0;top:6px;}
.section .element3 .block2 > .txt li>a{display:block;}



@media screen and (max-width:1350px){
  .section .element2 .block1>.inner{padding:1.5rem 1rem;}
}

@media screen and (max-width:1200px){
  .section .element1{float:none;width:100%;margin-bottom:1rem;}
  .section>.container{height:auto;}
  .section .element2{width:calc(100% - 15.3rem);padding:0 1.4rem 0 0;}
  .section .element1 .about_icon{overflow: hidden;}
  .section .element1 .about_icon>li{float:left;width:50%;}
  .section .element2 .center_lst>li>a>.thumb{padding-top:46%;}
  .section .element2 .block1>.inner{padding:1.5rem;}
  .section .element2 .block2 li .img{width:100%;display:block;overflow:hidden;position:relative;z-index: 0;height:0;padding-top:65%;}
  .section .element2 .block2 li .img img{position: absolute;left:0;top:50%;z-index: -1;width:100%;min-height:100%;-webkit-transform: translateY(-50%);transform: translateY(-50%);-webkit-transition: all 0.2s;transition: all 0.2s;}
  .container{max-width: 95%;}

}

@media screen and (max-width:1024px){
  #main{padding-top:4.5rem;}
  .section .element2{float:none;width:100%;padding-right:0;}
  .section .element2 .block1{height:auto;}
  .section .element2 .block2{height:auto;margin-bottom:1rem;}
  .section .element3>div{float:left;width:50%;padding-right:1.5rem;height:auto;margin-bottom:0;}
  .section .element3{overflow:hidden;width:calc(100% + 1.5rem);}
  .section .element3 .block2{padding-top:0;height:17.5rem;}
  .section .element3 .inner1,
  .section .element3 .inner1>ul li a{height:13rem;}
  .section .element3 .inner2{height:3.5rem;margin-top:1rem;padding-top:0;}
  .section .element3 .block2 > .txt{padding:3rem 1.5rem;}
  .section .element2 .center_lst>li>a>.thumb{padding-top:56%;}

}

@media screen and (max-width:768px){
  .section .element1 .about_icon>li>a{display:inline-block;border-bottom:0;}
  .section .element1 .about_icon>li{text-align: center;padding:0 0.4rem;}
  .section .element3 .block2 > .txt{padding:1.5rem;}
  .visual .arrow{float:none;margin-top:2rem;}
  .visual .arrow a + a{margin-left:5px;}

}

@media screen and (max-width:530px){
  .section .element1 .about_icon>li{width:100%;float:none;text-align:left;}
  .section .element1 .about_icon>li>a{display:block;border-bottom:1px solid rgba(255,255,255,.1);}
  .section .element1 .about_icon>li{padding: 0 1.9rem;}
  .section .element2 .center_lst>li,
  .section .element2 .block2 li,
  .section .element3>div{width:100%;float:none;padding-right:0;}
  .section .element2 .center_lst>li+li,
  .section .element2 .block2 li+li{margin-top:1rem;}
  .section .element2 .center_lst,
  .section .element2 .block2>ul,
  .section .element3{width:100%;}
  .section .element3 .block2 > .txt{margin-top:1rem;}
  .section .element3 .block2{height: auto;}
  .section .element3 .inner1, .section .element3 .inner1>ul li a{height:15rem;}
  .section .element2 .block1>.inner{padding:0;background:none;}
  .section h3{font-size:1.2rem;}
  .section .element1 .about_icon>li>a{padding:1.5rem 0 1.5rem 3.5rem;}

}