@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
* {
    padding:0;
    margin:0;
    list-style:none;
    text-decoration:none;
}

.background {
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}


#main {
    width:100%;
    overflow:hidden;
}
.sec {
    width:100%;
    position:relative;
}

.sec-title {text-align:center;}

.slick-arrow{
    cursor: pointer;
}
.slick-list,
.slick-track{
    width:100%;height: 100%;
}
.slick-slide{
    position: relative;
}

.slidlogo {position:absolute; top:40px; left:50%; margin-left:-700px; z-index:2;}



#main .banner {
    width:100%;height:950px;
    position:relative;
}
#main .banner div {
    width:100%;height:100%;
}
#main .banner .bn {
    position:relative;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}
#main .banner .bn::before {
    content:'';
    position:absolute;
    top:0;left:0; background-color:rgba(0, 0, 0, 0.3);
    width:100%;height:100%;
    z-index:1;
}
#main .banner .bn01 {
    background-image:url('../img/main/slide1.png');
}
#main .banner .bn02 {
    background-image:url('../img/main/slide2.png');
}
#main .banner .bn03 {
    background-image:url('../img/main/slide3.png');
}
#main .banner .textBox {
    width:80%;
    height:100%;
    margin:0 auto;
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
	align-items: center;
}
@keyframes mainActive01 {
    0% {transform:translateY(-30px);}
    100% {transform:translateY(0px);}
}
@keyframes mainActive02 {
    0% {transform:translateY(30px);}
    100% {transform:translateY(0px);}
}
#main .banner .textBox h1 {
    font-family: "Open Sans", sans-serif;
    font-size:150px;
    font-weight:800;
    line-height:1.1;
	font-style: italic;
    color:#fff;
    overflow:hidden;
	text-align: center;
}
#main .banner .slick-active h1 {
    animation-name:mainActive01;
    animation-duration:0.6s;
}
#main .banner .textBox p {
    margin:35px 0 40px 0;
    font-family: 'Noto Sans KR';
    font-size:34px;
    font-weight:400;
    line-height:1.1;
    color:#fff;
    overflow:hidden;
}
#main .banner .slick-active .textBox p {
    animation-name:mainActive02;
    animation-duration:0.6s;
}
#main .banner .textBox a {
    display:block;
    width:200px;
    height:50px; line-height:50px;
    border:1px solid #fff;
    background-color:transparent;
    box-sizing:border-box;
    text-align:center;
    font-size:16px;
    font-weight:500;color:#fff;
    transition:all 0.6s;
}
#main .banner .textBox a:hover {
    box-shadow: 0 80px 0 0 rgba(0, 0, 0, 0.25) inset, 0 -80px 0 0 rgba(0, 66, 191, 0.747) inset;
    color: #fff;
    border: 1px solid transparent;
}
#main .banner .mainArrow {
    width:auto;
    height: auto;
    position:absolute;
    top: auto;
    bottom: 10%;
    left:50%; transform:translateX(-50%);
}
#main .banner .arrowBox {
    display:flex;
    flex-direction:row;
    align-items:center;
    margin-bottom:10px;
}
#main .banner .arrowBox li:nth-child(1) {
    margin-right:10px;
}
#main .banner .arrowBox .bnArrow{
    display: block;
    width:40px;
    height:40px;
    border: 1px solid #fff;
    border-radius: 50%;
    text-align: center;
    line-height:40px;
    cursor: pointer;
    transition:all 0.6s;
}
#main .banner .arrowBox .bnArrow:hover {
    background-color:rgba(12, 25, 104, 0.5);
    border:none;
}
#main .banner .arrowBox .bnArrow i {
    font-size:1.2em;
    color:#fff;
}
#main .banner .slides-numbers {
    width:90px;
    margin-top:10px;
    text-align:center;
    font-size:1.2em;
    font-weight:400;color:#fff;
    display:inline-block;
}
#main .banner .slides-numbers .total {
    opacity:0.8;
}
@keyframes title{
    from{
        opacity: 0;
        transform: translateY(50px);
    }
    to{
        opacity: 3;
        transform: none;
    }
}
.main-title dd{
    color:#fff;
    font-size: 20px;
    opacity: 0;
}
.main-controll{
    width:200px;height: 50px;
    margin-top:50px;
    position: absolute;
    top:55%;;left:50%;transform: translate(-50%,-50%);
    display: flex;align-items: center;
    justify-content: space-between;
}
.main-controll .slick-arrow{
    color:#fff;
    font-size: 40px;;
}
.main-dots{
    position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);
    display: flex;
    width:65px;
    align-items: center;
    justify-content: space-around;
}
.main-controll button{
    border:none;
    font-size: 0;
    background-color: #ddd;
    width:23px;height: 8px;
    border-radius: 10px;
}
.main-controll .slick-active button{
    background-color: #fff;
}


.sec1-inner .sec-title {padding-top:100px; padding-bottom:50px;}
.sec1-inner .sec-title  div {color:#fff; margin-top:30px; }
.sec1-inner .sec-title  .tit20 {margin:0;}
.sec1-inner {width:100%; height:100%;   background:url('../img/main/sec1Bg.png'); padding-bottom:50px;}
.sec1-contents .swiper {
  height: 100%;    padding:50px;
}

.sec1-contents .swiper .swiper-slide {
 background:#fff; text-align:center;
  display: flex;
  justify-content: center;
  align-items: center;
 
}

.sec1-contents .swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-button-next, .swiper-button-prev {color:#fff;}
.sec1-contents .sec1-con { overflow:hidden;}
.sec1-contents .sec1-con .sec1_thumb {width:100%;}
.sec1-contents .sec1-con .sec1_txt {padding:20px; min-height:300px;}
.sec1-contents .sec1-con .sec1_txt .titleE {font-size:1.39px; color:#a3a3a3;}
.sec1-contents .sec1-con .sec1_txt .titleK {font-size:1.94em; color:#0a165b; font-family:'GongGothicBold'; padding-bottom:20px;}
.sec1-contents .sec1-con .sec1_txt .txt {font-size:1em; line-height:150%; color:#555; }

.btnMoreW {width:300px; margin: 0 auto; background:#fff; color:#000; font-size:20px; text-align: left; padding:20px;}
.btnMoreLine {width:300px; margin: 0 auto; border:1px solid #fff; color:#fff; font-size:20px; text-align: left; padding:20px;}
.btnMoreLine:hover, .btnMoreW:hover {opacity: 0.5;}

.sec2 {background:#0e0e0e; padding:100px 0 100px 0;}
.sec2 .sec-title {color:#fff; margin-bottom:50px;}
.sec2 .sec2-inner {width:100%;}
.sec2 .sec2-inner .sec2-txt {float:left; width:50%; padding-left:15%;}
.sec2 .sec2-inner .sec2-img {float:right; width:50%;}
.sec2 .sec2-inner .sec2-txt dl {color:#fff; width:95%; margin-bottom:20px; border-bottom:1px solid #3e3e3e; padding-bottom:30px;}
.sec2 .sec2-inner .sec2-txt dl dt {font-size:1.67em; margin-bottom:40px;  font-family:'GongGothicBold';  }
.sec2 .sec2-inner .sec2-txt dl dd {font-size:1.11em; font-family:'Cafe24Dangdanghae'; line-height:120%; opacity: 0.8; }
.sec2 .sec2-inner:after {content: ''; display: block; clear: both; }

.sec2 .sec2-inner .swiper {padding-bottom:100px;}
.sec2 .sec2-inner .swiper .swiper-slide { overflow: hidden;}
.sec2 .sec2-inner .swiper .swiper-button-next {top:auto; bottom:0; left:50%; margin-left:50px;}
.sec2 .sec2-inner .swiper .swiper-button-prev {top:auto;  bottom:0; left:50%; margin-left:-50px;}

.sec3  {background:url('../img/main/sec3Bg.png'); padding:100px 0 50px 0; } 
.sec3 .sec-title .tit50 {color:#fff; margin-bottom:50px;}
.sec3 ul { margin-bottom:70px; } 
.sec3 ul li {float:left; width:50%;}
.sec3 ul:after {content: ''; display: block; clear: both; }
.sec3 .btnMore {}




@media screen and (max-width:1400px) {
    .slidlogo { left:5%; margin-left:-0; z-index:2;}
	 .sec3 ul li img {width:100%;}
 

}
@media screen and (max-width:1020px) {
	.slidlogo {display: none;}
    #main .banner {
        height:600px;
    }
    #main .banner .bn {
        padding:0 20px;
    }
    #main .banner .mainArrow {
        width:100%;
        left:0px;
        transform:none;
        top:70%;
    }
    #main .banner .arrowBox {
        top:0;
        left:0px;
        right:0;
        transform:none;
        overflow: hidden;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items:center;
    }
    #main .banner .arrowBox li {
        float:left;
    }
    #main .banner .arrowBox li:nth-child(1) {
        margin-bottom:0;
        margin-right:10px;
    }
    #main .banner .arrowBox li:nth-child(2) {
        margin-bottom:0;
    }
    #main .banner .slides-numbers {
        text-align:center;
        margin:0 auto;
    }
    #main .banner .textBox {
        width:100%;
        align-items:center;
    }
    #main .banner .textBox h1 {
        font-size:2.5em;
    }
    #main .banner .textBox p {
        font-size:1.2em;
    }
    #main .banner .arrowBox .bnArrow {
        width:55px;
        height:55px;
        line-height:50px;
    }
    #main .banner .textBox a {
        width:180px;height:45px; line-height:45px;
    }	
.sec1-contents .sec1-con .sec1_txt { min-height:220px;}	
.sec2 .sec2-inner .sec2-txt {float:left; width:100%; padding-left:5%;}
.sec2 .sec2-inner .sec2-img {display:none;}	
	
	.sec3 ul li {width:100%;}
	
}