@charset "utf-8";
/* 메인 공통 */
#main .inner {padding: 0 15px;}
#main .main-tit {margin-bottom: 65px; position: relative; z-index: 4;}
#main .main-tit p {font-size: 24px; color: #7da4e7; font-weight: 700; margin-bottom: 35px;}
#main .main-tit h3 {font-size: 50px; font-family: 'Jal_Onuel'; line-height: 1.5;} 
#main .box-wrap .box .hover-box {position: absolute; top:0; left:0; width: 100%; height: 100%; border-radius: 20px; z-index: 2; justify-content: space-between; align-items: center; opacity: 0; transition: all 0.2s;}
#main .box-wrap .box .hover-box p {font-size: 22px; text-align: center; color: #fff; line-height: 1.8; overflow: hidden; text-overflow: ellipsis;  display: -webkit-box; -webkit-box-orient: vertical;}
#main .box-wrap .box .hover-box h4 {font-size: 180px; color: #facf6d; position: absolute; left:60px;font-family: 'Jal_Onuel';}

#main .box-wrap .box:hover .hover-box {opacity: 1;}
@media (max-width:1440px) {
    #main .inner {padding: 0 4%;}
    #main .main-tit {margin-bottom: 60px;}
    #main .main-tit p {font-size: 22px; margin-bottom: 30px;}
    #main .main-tit h3 {font-size: 46px; } 
    #main .box-wrap .box .hover-box p {font-size: 21px; }
    #main .box-wrap .box .hover-box h4 {font-size: 160px;}
}
@media (max-width:1280px) {
    #main .main-tit {margin-bottom: 50px;}
    #main .main-tit p {font-size: 20px; margin-bottom: 20px;}
    #main .main-tit h3 {font-size: 42px; } 
    #main .box-wrap .box .hover-box p {font-size: 20px; }
    #main .box-wrap .box .hover-box h4 {font-size: 140px;}
    #main .box-wrap .box .hover-box .box-btn {width: 45px;}
}
@media (max-width:1080px) {
    #main .main-tit {margin-bottom: 45px;}
    #main .main-tit p {font-size: 18px; }
    #main .main-tit h3 {font-size: 40px; } 

    #main .box-wrap .box .hover-box p {font-size: 18px; }
    #main .box-wrap .box .hover-box h4 {font-size: 120px;}
}
@media (max-width:768px) {
    #main .main-tit {margin-bottom: 40px;}
    #main .main-tit p {font-size: 17px; margin-bottom: 15px;}
    #main .main-tit h3 {font-size: 32px; } 
    #main .box-wrap .box .hover-box .box-btn {width: 40px;}
    /* 
    #main .box-wrap .box .hover-box p {font-size: 17px; overflow: hidden; text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
    #main .box-wrap .box .hover-box h4 {font-size: 100px; left: 15%;} 
    */
}


#main .main01 {position: relative;}
#main .main01 img {width: 100%; height: 100%; object-fit: cover;}
#main .main01 .txt {position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); }
#main .main01 .txt h2 {font-size: 60px; color: #fff; line-height: 1.4; }
@media (max-width:1440px) {
    #main .main01 { height: clamp(620px,60vw, 930px);}
    #main .main01 .txt h2 {font-size: 56px;}
}
@media (max-width:1280px) {
     #main .main01 .txt h2 {font-size: 48px;}
}
@media (max-width:1080px) {
     #main .main01 .txt h2 {font-size: 42px;}
}
@media (max-width:768px) {
     #main .main01 .txt h2 {font-size: max(34px,5.6vw);}
}

#main .main02 {padding: 150px 0 300px; position: relative;}
#main .main02 .inner {position: relative; justify-content: space-between; align-items: flex-start;}
#main .main02 .inner .main-tit {position: sticky; top:100px;left: 0; width: 350px; height: auto; }
#main .main02 .inner .box-wrap {width: calc(100% - 350px);  justify-content: flex-end; }
#main .main02 .inner .box-wrap .box {margin-bottom: 30px; position: relative; border-radius: 20px; overflow: hidden; max-width: calc(50% - 15px);}
#main .main02 .inner .box-wrap .box:nth-of-type(2n) {margin-left: 30px; position: relative; top: 200px;}
#main .main02 .inner .box-wrap .box .txt {position: absolute; bottom:30px; left:30px; z-index: 1;font-size: 20px; font-weight: 700; color: #fff;}
#main .main02 .inner .box-wrap .box .hover-box {background: #f0bb41; padding: 150px 10px 60px;}
#main .main02 .inner .box-wrap .box .hover-box h4 {color: #facf6d;top:70px; }
#main .main02 .inner .box-wrap .box .hover-box p {-webkit-line-clamp: 4;}
#main .main02 .bg img {max-width: 100%;}
#main .main02 .bg1 {position: absolute; top:0; left: 10%; z-index: -1; }
#main .main02 .bg2 {position: absolute; top:10%; left:0; z-index: -1;}
#main .main02 .bg3 {position: absolute; top:0; right:0;  z-index: -1;}
@media (max-width:1440px) {
    #main .main02 {padding: 120px 0 200px;}
    #main .main02 .inner .main-tit {width: 300px;}
    #main .main02 .inner .box-wrap {width: calc(100% - 320px);}

    #main .main02 .inner .box-wrap .box {margin-bottom: 20px; max-width: calc(50% - 10px);}
    #main .main02 .inner .box-wrap .box:nth-of-type(2n) {margin-left: 20px; top: 150px;}
}
@media (max-width:1080px) {
    #main .main02 {padding: 100px 0 150px;}
    #main .main02 .inner .main-tit {width: 100%; position: static;}
    #main .main02 .inner .box-wrap {justify-content: space-between; width: 100%; }
    #main .main02 .inner .box-wrap .box {width: 49%;max-height: 500px;}
    #main .main02 .inner .box-wrap .box .txt {font-size: 18px;}
    #main .main02 .inner .box-wrap .box img {width: 100%; object-fit: cover;}
    #main .main02 .inner .box-wrap .box:nth-of-type(2n) {top: 100px;}
    #main .main02 .bg1 {left: 5%; width: min(300px,30%);}
    #main .main02 .bg2 {display: none;}
    #main .main02 .bg3 {max-width: 50%;}
}
@media (max-width:768px) {
    #main .main02 {padding: 80px 0 100px;}
    #main .main02 .inner .box-wrap .box .txt {font-size: 16px;}
    #main .main02 .inner .box-wrap .box .hover-box {padding: 40% 10px 20%;}
    #main .main02 .inner .box-wrap .box .hover-box h4 {top: 15%;}
    #main .main02 .inner .box-wrap .box:nth-of-type(2n) {top: 50px;}
}
@media (max-width:500px) {
    #main .main02 .inner .box-wrap .box {width: 100%; max-width: 100%;}
    #main .main02 .inner .box-wrap .box:nth-of-type(2n) {margin-left: 0; top: 0;}
}

#main .main03 {padding: 140px 0 175px; background: #dae9ff;}
#main .main03 .inner2 {max-width: 100%; padding-left: calc(50% - 700px); padding-right: 0;} 
#main .main03 .inner .box-wrap {justify-content: space-between;}
#main .main03 .inner .box-wrap .box {position: relative; width: 32.5%;}
#main .main03 .inner .box-wrap .box > p {font-size: 20px; margin-top: 25px; font-weight: 700; color: #444;}
#main .main03 .inner .box-wrap .box .img {border-radius: 20px; overflow: hidden; position: relative;}
#main .main03 .inner .box-wrap .box .img img {width: 100%; object-fit: cover;}
#main .main03 .inner .box-wrap .box .hover-box {background: #7da4e7; padding: 110px 60px 50px;}
#main .main03 .inner .box-wrap .box .hover-box h4 {color: #9dbaee;top:55px; }
#main .main03 .inner .box-wrap .box .hover-box p {-webkit-line-clamp: 3;}
#main .grid-list-type{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1600px) {
    #main .main03 .inner .box-wrap .box .hover-box {padding: 100px 40px 50px;}
    #main .main03 .inner .box-wrap .box .hover-box h4 {top:30px; left: 40px;}
}
@media (max-width:1440px) {
    #main .main03 {padding: 120px 0;}
    #main .main03 .inner2 {padding-left:4%}
    #main .main03 .inner .box-wrap .box .hover-box {padding: 80px 5% 20px;}
    #main .main03 .inner .box-wrap .box .hover-box h4 {left: 5%;}
    #main .main03 .inner .box-wrap .box .hover-box p {-webkit-line-clamp: 2;}
}

@media (max-width:1080px) {
    #main .main03 {padding: 100px 0;}
    #main .main03 .inner .box-wrap {flex-wrap: nowrap;}
    #main .main03 .inner .box-wrap .box > p {font-size: 18px; }
    #main .main03 .inner .box-wrap .box .hover-box {padding: 23% 5% 10%;}
    #main .main03 .inner .box-wrap .box .hover-box h4 {top: 12%;}
    
}
@media (max-width:768px) {
    #main .main03 {padding: 80px 0;}
    #main .main03 .inner .box-wrap .box > p {font-size: 16px; }
}

#main .main04 {padding: 140px 0 110px; background: #f5f1f0; position: relative;}
#main .main04 .main-tit {margin-bottom: 15px;}
#main .main04 .swiper {z-index: 8;}
#main .main04 .swiper-slide {opacity: 0 !important; position: relative; margin-top: 50px; } 
#main .main04 .swiper-slide-active {opacity: 1 !important;}
#main .main04 .swiper-slide .txt {width: min(930px,70%); background: #fff; display: block; padding: 80px 90px; border-radius: 20px; height: 500px;}
#main .main04 .swiper-slide .txt h4 {font-size: 20px; color: #666; margin-bottom: 20px;}
#main .main04 .swiper-slide .txt h3 {font-size: 30px; font-weight: 700; margin-bottom: 40px;}
#main .main04 .swiper-slide .txt p {font-size: 17px; color: #666; line-height: 1.8;}
#main .main04 .swiper-slide .img {position: absolute; top: -50px; right:0; z-index: 4;}
#main .main04 .swiper-button-next, #main .main04 .swiper-button-prev, #main .main04 .swiper-pagination {position: static; width: auto; top: auto; left: auto; bottom: auto; right: auto; margin: 0; padding: 0;}
#main .main04 .swiper-button-next:after, #main .main04 .swiper-button-prev:after {display: none;}
#main .main04 .slide-pagi-wrap {position: absolute; bottom: 80px; left:90px; align-items: center; z-index: 9;}
#main .main04 .main04-next, #main .main04 .main04-prev {width: 50px; height: 50px; background: url(../images/main04_arr.png)  no-repeat center / contain;}
#main .main04 .main04-next {transform: scale(-1);}
#main .main04 .main04-pagi {margin: 0 20px; font-size: 17px;}
#main .main04 .main04-pagi .swiper-pagination-current {font-weight: 700;}
#main .main04 .bg img {max-width: 100%;}
#main .main04 .bg1 {position: absolute; bottom:0; left: 0; z-index: 1;}
#main .main04 .bg2 {position: absolute; bottom:0; right:0; z-index: 1;}
@media (max-width:1440px) {
    #main .main04 {padding: 120px 0; }
    #main .main04 .swiper-slide .txt {padding: 70px 80px; height: 460px;}
    #main .main04 .swiper-slide .img {width: 45%;}
    #main .main04 .swiper-slide .img img {width: 100%; object-fit: cover;}
    #main .main04 .slide-pagi-wrap {bottom: 70px; left:80px;}
    #main .main04 .bg1 {width: min(207px,15%);}
    #main .main04 .bg2 {width: min(584px,50%); }
}
@media (max-width:1280px) {
    #main .main04 .swiper-slide .txt {padding: 55px 60px; height: 420px;}
    #main .main04 .swiper-slide .txt h4 {font-size: 18px; margin-bottom: 15px;}
    #main .main04 .swiper-slide .txt h3 {font-size: 28px;margin-bottom: 30px;}
    #main .main04 .swiper-slide .txt p {font-size: 16px; }
    #main .main04 .swiper-slide .img img {width: 100%; object-fit: cover;}
    #main .main04 .slide-pagi-wrap {bottom: 55px; left:60px;}
    #main .main04 .main04-pagi {margin: 0 15px; font-size: 16px;}
    #main .main04 .main04-next, #main .main04 .main04-prev {width: 45px; height: 45px;}
}
@media (max-width:1080px) {
    #main .main04 {padding: 100px 0; }
    #main .main04 .swiper-slide .txt {padding: 35px 50px; height: 360px;}
    #main .main04 .swiper-slide .txt h4 {font-size: 17px;}
    #main .main04 .swiper-slide .txt h3 {font-size: 26px;}
    #main .main04 .swiper-slide .txt p {font-size: 15px; }
    #main .main04 .swiper-slide .img {width: 40%;}
    #main .main04 .swiper-slide .img img {width: 100%; object-fit: cover;}
    #main .main04 .slide-pagi-wrap {bottom: 35px; left:50px;}
    #main .main04 .main04-pagi {margin: 0 12px; font-size: 15px;}
}
@media (max-width:768px) {
    #main .main04 {padding: 80px 0;overflow: hidden;}
    #main .main04 .swiper-slide {margin-top: 25px;}
    #main .main04 .swiper-slide .txt {padding:35px 50px 100px; height: auto; width: 100%;}
    #main .main04 .swiper-slide .txt h4 {font-size: 16px;}
    #main .main04 .swiper-slide .txt h3 {font-size: 24px;}
    #main .main04 .swiper-slide .txt p {font-size: 14px; }
    #main .main04 .swiper-slide .txt br {display: none;}
    #main .main04 .swiper-slide .img {display: none;}
    #main .main04 .slide-pagi-wrap {bottom: 30px; left:50px;}
    #main .main04 .main04-pagi {margin: 0 10px; font-size: 14px;}
    #main .main04 .main04-next, #main .main04 .main04-prev {width: 40px; height: 40px;}
    #main .main04 .bg2 {display: none;}
    #main .main04 .bg1 {width: min(207px,25%);}
}