/* 공톹ㅇ */
.m-tit{ font-size: 30px;}
.m-tit span{color:#fecc40}
.m-sub{font-size: 17px;padding-top: 10px;font-weight: 600;    width: 240px;}
:lang(en) .m-sub{width: 300px; font-weight:500;}


/* 메인01 */
.main01{}
.main01 > div{}
.main01 > div div{}
.main01 > div div i{display: block; background-position: center !important; background-size: cover !important; height:100vh;}
.main01 > div div i.m01-img1{background:url(https://d32l5afo82wu4y.cloudfront.net/static/user/img/banner02.jpg) no-repeat;}
.main01 > div div i.m01-img2{background:url(https://d32l5afo82wu4y.cloudfront.net/static/user/img/banner01.jpg) no-repeat;}
.main01 .m01-txt{position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; text-align: center;}
.main01 .m01-txt h1{font-size: 35px;}
.main01 .m01-txt h1 strong{font-size: 55px;}
.main01 .m01-txt p{font-size: 20px;}
.main01 .scroll{position: absolute; color: #fff; bottom: 40px; left: 50%; transform: translateX(-50%);font-size: 17px; font-weight: 600;}
.main01 .scroll span{}
.main01 .scroll p{}
/* .main01 .scroll {padding-top: 80px;} */

.main01 .scroll span { position: absolute; left: 50%; width: 17px; height: 17px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg) translateX(-50%); animation: scrl 2s infinite; opacity: 0;}
.main01 .scroll span:nth-of-type(1) {bottom:77px; animation-delay: 0s;}
.main01 .scroll span:nth-of-type(2) {bottom: 63px; animation-delay: .15s;}
.main01 .scroll span:nth-of-type(3) {bottom: 50px; animation-delay: .3s;}

@keyframes scrl {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}

/* 메인02 */
.main02{position:relative;}
.main02:before{position: absolute; content: ""; background: url(https://d32l5afo82wu4y.cloudfront.net/static/user/img/m02-bg.png) no-repeat; bottom: 0px; right: 0; background-size: cover; background-position: center;width: 460px; height: 490px;}
.main02 > div{}
.main02 .m02-top{display: flex; justify-content: space-between;}
.main02 .m02-top > div h2 span{}
.main02 .m02-top > div:last-child{width: calc(100% - 300px); margin-left: 22%;}
:lang(en) .main02 .m02-top > div:last-child{    margin-left: 15%;}
.main02 .m02-top ul{display: flex; }
.main02 .m02-top ul li{    width: 20%;}
.main02 .m02-top ul li div{}
.main02 .m02-top ul li div i{display: block; width: 40px; margin: 0 auto;}
.main02 .m02-top ul li div p{text-align: center; margin-top: 16px;}
.main02 .m02-btm{}
.main02 .slick-dots li button:before{display:none}
.main02 .m02-btm > div{}
.main02 .m02-btm > div i{    background: url(https://d32l5afo82wu4y.cloudfront.net/static/user/img/m02-img.jpg) no-repeat; background-position: center; background-size: cover !important; padding-bottom: 70%; width: 100%; display: block;}
.main02 .slick-track{display:flex !important}
.main02 .slick-slide{position:relative; margin:0px 10px; height: auto !important;    border: 1px solid #ddd; background: #fff; border-radius: 20px; overflow: hidden;}
.main02 .slick-slide .txt-1{padding: 35px 20px 90px 20px;}
.main02 .slick-slide .txt-1 li{display: flex; margin-bottom: 10px;}
.main02 .slick-slide .txt-1 li h3{font-size: 17px; width: 80px; margin-right: 10px; color: #f7b600;}
:lang(en) .main02 .slick-slide .txt-1 li h3{font-weight:500;}
.main02 .slick-slide .txt-1 li p{width:calc(100% - 80px)}
.main02 .slick-slide div{display: flex;    position: absolute; width: 100%; bottom: 0;}
.main02 .slick-slide div a{width: 50%; text-align: center; font-size: 15px; padding: 16px 0px; color:#fff;}
:lang(en) .main02 .slick-slide div a{padding:16px 8px;    display: flex; justify-content: center; align-items: center;}
.main02 .slick-slide div a:first-child{background: #a1a1a1;}
.main02 .slick-slide div a:last-child{background:#fecc40}
.main02 .slick-slide div a span{}
.main02 .slick-next{right:-20px;}
.main02 .slick-prev { left: -55px;}
.main02 .slick-prev.slick-disabled:before, .main02 .slick-next.slick-disabled:before{opacity:initial}
.main02 .slick-next:before{ content:""; background:url(https://d32l5afo82wu4y.cloudfront.net/static/user/img/arrow-4.png) no-repeat #fff; border-radius:50%; width:40px; height:40px; background-size: cover; background-position: center;}
.main02 .slick-prev:before{ background:url(https://d32l5afo82wu4y.cloudfront.net/static/user/img/arrow-l.png) no-repeat #fff; border-radius:50%; width:40px; height:40px; background-size: cover; background-position: center;}


/* 메인03 */
.main03{background:#f5f5f5;}
.main03 .m03-top{display: flex;}
.main03 .m03-top > div{ width: 50%; padding: 40px; border-radius:15px;}
.main03 .m03-top > div:first-child{background: #283a67; color:#fff; margin-right:30px;}
.main03 .m03-top > div:last-child{background:#fff; border:1px solid #283a67;}
.main03 .m03-top > div h3{position:relative; font-size: 23px;   margin-bottom: 20px;}
.main03 .m03-top > div h3:before{position:absolute; content:""; width:80%; height:2px; right: 0; top: 50%; transform: translateY(-50%);}
:lang(en) .main03 .m03-top > div h3:before{width: 70%;}
.main03 .m03-top > div:first-child h3{color:#f5f5f5;  }
.main03 .m03-top > div:first-child h3:before{background:#fff;}
.main03 .m03-top > div:first-child li{border-bottom: 1px solid rgb(236 236 236 / 46%);}
.main03 .m03-top > div:last-child li{border-bottom: 1px solid #777;}
.main03 .m03-top > div:last-child h3:before{background:#283a67;}
.main03 .m03-top > div ul{}
.main03 .m03-top > div ul li{padding: 16px 0px;}
.main03 .m03-top > div ul li div{display: flex; justify-content: space-between;    align-items: center;}
.main03 .m03-top > div ul li div h4{font-size: 17px; font-weight: 500;cursor:pointer;  margin-right:20px;  width: 600px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.main03 .m03-top > div ul li div h4 span{color: #ff3838; font-weight: 600; margin-right: 10px;}
.main03 .m03-top > div ul li div em{font-size: 15px;}
.main03 .m03-btm{display: flex;justify-content: space-between;}
.main03 .m03-btm .m03-slide-wrap{ width: calc(100% - 300px);}
.main03 .m03-btm .m03-slide{ margin-left: 18%; }
.main03 .m03-btm .m03-slide div{}
.main03 .m03-btm .m03-slide div i{display:block;background-position: center; background-size: cover;}
.main03 .m03-btm .m03-slide div{}
.main03 .m03-btm .m03-slide div p{position: absolute; bottom: 0; background: rgb(255 255 255 / 90%); width: 100%; padding: 7px 15px;font-size: 17px; font-weight: 600;}
.main03 .m03-btm .m03-slide .slick-slide{position:relative; cursor:pointer; margin:0px 7px; border: 1px solid #ddd; border-radius: 10px; overflow: hidden;}
.main03 .slick-prev { left: -55px;}
.main03 .slick-prev.slick-disabled:before, .main03 .slick-next.slick-disabled:before{opacity:initial}
.main03 .slick-next:before{ content:""; background:url(https://d32l5afo82wu4y.cloudfront.net/static/user/img/arrow-4.png) no-repeat; width:40px; height:40px; background-size: cover; background-position: center;}
.main03 .slick-prev:before{ background:url(https://d32l5afo82wu4y.cloudfront.net/static/user/img/arrow-l.png) no-repeat; width:40px; height:40px; background-size: cover; background-position: center;}
.main03 .slick-dots li button{display: none;}







/* ********************************************* *
 * 1770px
 * ********************************************* */
 @media screen and (max-width: 1770px){
    .main02 .slick-prev{left: -10px; z-index: 9;}
    .main02 .slick-next { right: 10px; }
    .slick-prev:before{content:"" !important}


}

/* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){
    :lang(en) .main03 .m03-top > div h3:before{width: 60%;}
    :lang(en) .main03 .m03-btm .m03-slide div p{font-size: 16px; font-weight: 500; line-height: 1.3;}

}

/* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width: 1200px){

    .main02 .m02-top > div:last-child{margin-left: 10%;}
    .main03 .m03-top > div h3{font-size: 20px;}
    .main03 .m03-top > div ul li{padding: 13px 0px;}
    .main03 .m03-top > div{padding:30px;}
}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){

    .main02 .slick-slide .txt-1{padding: 35px 20px 70px 20px;}
    .main02 .slick-slide .txt-1 li h3{font-weight: 500;}

    .main03 .m03-btm{flex-direction: column;}
    .main03 .m03-btm .m03-slide-wrap{width:100%;}
    .main03 .m03-btm .m03-slide{margin-left: 0;}
    .main03 .slick-prev { left: -15px; z-index: 9; }
    .main03 .slick-next{    right: 5px;}

    .main03 .m03-btm .m03-slide div{margin-top: 16px;}
    :lang(en) .main02 .slick-slide .txt-1 li{    flex-direction: column;}
    :lang(en) .main02 .slick-slide .txt-1 li h3{width:100%;}
    :lang(en) .main02 .slick-slide .txt-1 li p{width:100%;line-height: 1.5;}

    :lang(en) .main02 .m02-top > div:last-child{    margin-left: 8%;}
}


/* ********************************************* *
* 960px
* ********************************************* */
@media screen and (max-width: 960px){
    .main01 .m01-txt h1{font-size: 30px;}
    .main01 .m01-txt h1 strong{font-size: 50px;}
    .main01 .m01-txt p{font-size: 18px;}

    .main02 .m02-top{flex-direction: column;align-items: center;}
    .main02 .m02-top > div:last-child { margin-left: 0; width: 100%; margin-top: 30px;}
    .m-sub{width:100%;}
    .m-tit{text-align: center;}
    .main03 .m03-top{flex-direction: column;}
    .main03 .m03-top > div:first-child{margin-right:0px;}
    .main03 .m03-top > div:last-child{margin-top:20px}
    .main03 .m03-top > div{width:100%;}

    .m-sub{text-align: center;}
    :lang(en) .m-sub{margin:0 auto;}



}


/* ********************************************* *
* 860px
* ********************************************* */
@media screen and (max-width: 860px){

    .main02 .slick-slide .txt-1 li h3{font-size: 16px;}

}
@media screen and (max-width: 768px){

    section .mt130{margin-top:90px}
    .main02 .m02-top ul li div i{width:30px;}
    .m-tit{font-size: 27px;}
    .main03 .m03-top > div ul li div h4{font-size: 16px;}
    .main03 .m03-top > div ul li div h4 span{font-weight: 500;}

}


/* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){
    section .mt130{margin-top:50px}
    .main01 .m01-txt{width:100%;}
    .main01 .m01-txt h1{    font-size: 25px;}
    .main01 .m01-txt h1 strong{font-size: 40px;}
    .main01 .scroll p{font-weight: 500; font-size: 15px;}
    .main01 .scroll span{width:10px; height:10px;}
    .main02 .m02-top > div:last-child{overflow-x: scroll;}
    .main02 .m02-top ul{    width: 670px;}
    .m-tit{font-size: 24px;}
    .m-sub{font-weight: 500;}
    .main02 .slick-slide .txt-1{    padding: 30px 20px 50px 20px;}
    .main02 .slick-slide .txt-1 li p{font-size: 15px;}
    .main03 .m03-top > div{padding:20px;}
    .main03 .m03-top > div h3{margin-bottom: 10px;}
    .main03 .m03-top > div h3:before{    width: 82%; height: 2px;}

    .main03 .m03-btm .m03-slide div p{font-weight: 500; font-size: 16px;}

}


/* ********************************************* *
* 550px
* ********************************************* */
@media screen and (max-width: 550px){
    .main02 .slick-slide .txt-1 { padding: 30px 20px 80px 20px;}
}


/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){
    .main01 .m01-txt h1{font-size: 20px;}
    .main01 .m01-txt h1 strong{font-size: 30px;}
    .main01 .m01-txt p{font-size: 16px;}
    .main02 .m02-top ul{    width: 600px;}
    .main02 .m02-top ul li div i{width:25px;}
    .main02 .m02-top ul li div p{font-size: 15px;margin-top:13px;}
    .m-tit{font-size: 20px;}
    .m-sub{font-size: 16px;padding-top: 5px;text-align: center;}
    .main03 .m03-top > div h3{font-size: 17px;}
    .main03 .m03-top > div h3:before{width: 75%;     height: 1px;}
    .main03 .m03-top > div ul li{padding:10px 0px;}
    .main03 .m03-top > div ul li div h4{font-size: 15px;}



}

/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){

    .main02 .m02-top ul li div p{font-size: 14px;}
    .main02 .slick-slide div a{font-size: 13px; padding: 13px 0px;}
    .main03 .m03-top > div h3:before{width: 67%;}
    .main02 .slick-slide .txt-1 li{    flex-direction: column; align-items: flex-start;}
    .main02 .slick-slide .txt-1{padding: 30px 20px 60px 20px;}
    :lang(en) .main03 .m03-top > div h3:before{display:none;}
}

/* ********************************************* *
* 300px
* ********************************************* */
@media screen and (max-width: 300px){
    .main02 .slick-slide .txt-1 li{    flex-direction: column;   margin-bottom: 7px;}
    .main02 .slick-slide .txt-1 li h3{width:100%;margin-right: 0px;}
    .main02 .slick-slide .txt-1 li p{width:100%;}
    .main02 .slick-slide .txt-1{margin:16px; }
}