@charset "utf-8";
main b {font-weight: 700;}
main .m-tit {font-family: 'HSSaemaul-Regular'; font-size: 5rem; position: relative; width: fit-content; color: #f4a300;}
main .m-tit::before {content:""; position: absolute; bottom:0; left:0; width: 100%; height: 2px; background: #f4a300;}
main .m-tit::after {content:""; position: absolute; top:0; left:-10px; width: 2.8rem; height: 2.8rem; background: url(../images/main/m-tit_1.png) no-repeat center center / 100%; transform: translateX(-100%);}
main .m-tit+.m-tit::after {
    display: none;
}

main .box-tit {font-family: 'HSSaemaul-Regular';}
main .box-tit h3 {font-size: 6.5rem; letter-spacing: -0.03em;}
main .box-tit p {font-size: 4rem;}
main .box-txt {display: flex; flex-flow: column wrap; align-items: flex-start; margin-top: -10.5rem;}
main .box-txt h4 {font-size: 3rem; font-family: 'HSSaemaul-Regular'; display: inline-block; padding: 1.4rem 2.5rem; border: 1px solid #000; border-bottom:0; border-radius: 1.5rem 1.5rem 0 0; letter-spacing: -0.025em;}
main .box-txt > div {padding: 2rem 2rem 2rem 3rem; background: #fff;border: 1px solid #000; width: 100%; border-radius: 0 1.5rem 1.5rem 1.5rem}
main .box-txt p {font-size: 2.3rem;}
main .box-txt p:not(:last-child) {margin-bottom: 1rem;}
main .box-txt .arr {justify-content: flex-end; align-items: center; margin-top: 1rem;}
main .box-txt .arr h5 {font-size: 1.8rem; font-weight: 500; margin-right: 1.4rem; padding-block: .5rem; position: relative;}
main .box-txt .arr h5::before {content:""; position: absolute; bottom:0; left:0; width: 0; height: .5px; background: #000; transition: all .3s;}
main .box-txt .arr div {width: 4rem; height: 4rem; border-radius: 50%; background: #000; align-items: center; justify-content: center; padding: .8rem; position: relative;}
main .box-txt .arr div::before {content:""; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #fff; border-radius: 50%; transition: all .3s; border: 1px solid #000;}
main .box-txt .arr img {position: relative; z-index: 1;}
main .box a:hover .arr div::before {width: 101%; height: 101%;}
main .box a:hover .arr img {filter: brightness(0);}
main .box a:hover .arr h5::before {width: 100%;}
@media (max-width:1200px) {
    main .m-tit {margin-left: 3rem;}
}
@media (max-width:800px) {
    main .box-txt {margin-top: -4rem;}
}

.main01 {padding-block: 16rem 9rem; text-align: center; background: #fff1e0; position: relative;}
.main01 .inner {max-width: 1320px; position: relative; }
.main01 .inner > :not(.snow-ani) {position: relative; z-index: 2;}
.main01 #m1-title {width: min(700px,90%); margin: 0 auto;}
.main01 p {font-size: 2.6rem; font-weight: 500; line-height: 1.6; letter-spacing: -0.03em; margin-block:0 5rem;}

.main01 #m1-bg {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 92%;
}

.main01 .snow-ani img {position: absolute; z-index: 1; opacity: 0;}
.main01 .snow-ani .snow1 {left: 74%; top: 0%; width: clamp(35px, 5vw, 60px); animation: snow-ani1 3s  linear infinite;} /* 7% */
.main01 .snow-ani .snow2 {left: 87%; top:30%; width: clamp(50px, 7.5vw, 90px); animation: snow-ani2 3s  linear infinite;} /* 40% */
.main01 .snow-ani .snow3 {left: 0; top: 40%; width: clamp(90px, 15vw, 175px); animation: snow-ani3 3s .5s linear infinite;} /* 50% */
@keyframes snow-ani1 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        top:15%
    }
    100% {
        opacity: 0;
        top:30%;
        transform: rotate(90deg);
    }
}
@keyframes snow-ani2 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        top:45%
    }
    100% {
        opacity: 0;
        top:60%;
        transform: rotate(90deg);
    }
}
@keyframes snow-ani3 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        top:60%
    }
    100% {
        opacity: 0;
        top:75%;
        transform: rotate(90deg);
    }
}
@media (max-width:1080px) {
    .main01 p {font-size: 2.4rem;}
}
@media (max-width:800px) {
    .main01 p {max-width: 590px; margin-inline: auto;}
    .main01 p br {display: none;}

    .main01 #m1-bg {
        top: 45%;
    }
}

.main02 {padding-block: 9rem 13rem;background: #fff1e0;}
.main02 .m-tit {margin-bottom: 7rem;}
.main02 .m-tit:not(:first-child) {margin-top: 8rem;}
.main02 .box-wrap {display: grid; grid-template-columns: repeat(2,1fr);  gap:  8rem;}
.main02 .box-tit {margin-bottom: 3.5rem;}
.main02 .box-tit p {color: #4ab7f0;}
.main02 .box-img {margin-left: 7rem;}
.main02 .box-txt {margin-right: 4rem; position: relative;}
.main02 .box-txt h4 span {font-family: '굴림';}
/* .main02 .box-txt p {text-indent: -1rem; padding-left: 1rem; letter-spacing: -0.02em;} */
.main02 .box-txt p { padding-left: 3rem; letter-spacing: -0.02em; position: relative;}
.main02 .box-txt p::before {
    content:""; 
    position: absolute; 
    top:.2em; 
    left:0; 
    width: 2.5rem; 
    height: 2.5rem; 
    border-radius: 50%;
    background: url(../images/common/ico_check.svg) no-repeat center center / 60%;
}
.main02 .box2 {margin-top: 25rem;}
.main02 .box3 {margin-top: -30rem;}
.main02 .box1 .box-txt {margin-top: -14.5rem;}
.main02 .box1 .box-txt h4 span:first-child {margin-left: -1em;}
.main02 .box1 .box-txt h4 { background: #fdc759}
.main02 .box1 .box-txt p::before {
    background-color:#fdc759;
}
.main02 .box2 .box-txt h4 { background: #ff9999}
.main02 .box2 .box-txt p::before {
    background-color:#ff9999;
}
.main02 .box3 .box-tit h3 {
    letter-spacing: -0.08em;
}
.main02 .box3 .box-txt h4 { background: #c483e2}
.main02 .box3 .box-txt p::before {
    background-color:#c483e2;
}
.main02 .box4 .box-txt h4 { background: #bff1a0}
.main02 .box4 .box-txt p::before {
    background-color:#aade8a;
}
.main02 .box5 .box-txt h4 { background: #7bcdff}
.main02 .box5 .box-txt p::before {
    background-color:#7bcdff;
}


.main022 {padding-block: 12rem 9rem;background: url(../images/main/main_bg_1.jpg) #ecffe0 no-repeat center top / 100%;}
.main022 .m-tit {color: #449d0c; position: relative; z-index: 2;}
.main022 .m-tit::before {background: #449d0c;}
.main022 .m-tit:first-child::after {background: url(../images/main/m-tit_2.png) no-repeat center center / 100%;}
.main022 .box5 {
    margin-top: 28rem;
}
.main022 .box5 .box-txt .arr {
    margin-top: -4.5rem;
}

@media (max-width:1200px) {
    .main02 .box-wrap {gap: 7rem;}
}
@media (max-width:1080px) {
    .main02 .box-wrap {gap: 6rem;}
    .main022 .box5 .box-txt .arr {
        margin-top: 0rem;
    }
    
}
@media (max-width:800px) {
    .main02 .box-wrap {grid-template-columns: repeat(1,1fr);gap: 8rem;}
    .main02 .box2,
    .main02 .box3,
    .main022 .box2 {
        margin-top: 0;
    }
    .main02 .box-img {text-align: right;}
    .main02 .box-img img {width: 100%;}
    .main02 .box-tit {margin-bottom: 3.5rem;}
    .main02 .m-tit:nth-of-type(2),
    .main022 .m-tit:nth-of-type(2) {
        margin-top: 8rem;
    }
}



/* .main03 .inner {position: relative;}
.main03 .img {position: absolute; bottom:0; left:0; }
.main03 .img img {width: 90%;}
.main03 .box {width: calc(50% - 8rem); position: relative; margin: 14rem 4rem 0 auto;}
.main03 .box-tit {width: fit-content; margin: 0 auto;}
.main03 .box-txt { margin-top:5rem;}
.main03 .box-txt h4 { background: #a8d8fa;} */
/* @media (min-width:1921px) {
    .main03 {background-size: 100% 15rem;}
}
@media (max-width:1200px) {
    .main03 .box-img {width: 55%;}
    .main03 .box-content {width: calc(50% - 4rem); margin-inline: auto 4rem;}
}
@media (max-width:800px) {
    .main03 .img {width: 100%; position: static;}
    .main03 .box {width: 100%; margin:4rem auto 0;}
    .main03 .box-tit {width: 100%;}
    .main03 .box-tit br {display: none;}
} */

.main04 {padding-block: 10rem 12rem; background: url(../images/main/main_bg_2.jpg) #ffe9f6 no-repeat center top / 100%;}

.main04 .inner {  } /* overflow: hidden; */

.main04 .m-tit {color: #f883c8; }
.main04 .m-tit::before {background: #f883c8;}
.main04 .m-tit::after {background: url(../images/main/m-tit_3.png) no-repeat center center / 100%;}
.main04 .m-tit span {color: #f883c8; font-size: 5rem;}
.main04 .box-tit {margin-block: 8rem 5rem ;}

.main04 .main04-slide { padding-inline: 15vw; position: relative; overflow-x: hidden; padding-bottom: 2rem; padding-top:30px; transition: opacity 0.3s;} 
.main04 .main04-slide .swiper-slide::before {content:""; position: absolute; top:2px; left:50%; width: min(328px,90%); height: 10rem ;background: url(../images/main/main4_icon1.png) no-repeat center center / 100%; transform: translate(-50%,-50%);}
.main04 .main04-slide .swiper-slide::after {content:""; position: absolute; bottom:0; right:0; width: 100%; height: 100%; background: #f2f2f2; border:1px solid #000; z-index: -1; border-radius: 1.5rem; transform: translate(1rem, 1rem);}
.main04 .main04-slide .swiper-slide .content {display: flex; flex-flow: column wrap; border-radius: 1.5rem; border: 1px solid #000; overflow: hidden; height: 100%; background: #fff;}
.main04 .main04-slide .swiper-slide .img {display: flex;} 
.main04 .main04-slide .swiper-slide .img img {width: 100%; object-fit: cover;}
.main04 .main04-slide .swiper-slide .txt {padding: 2rem 3rem; background: #fff; }
.main04 .main04-slide .swiper-slide .txt span {font-size: 1.8rem; padding: 0.2rem 1.5rem; border-radius: 3rem; color: #fff; background: #000; font-weight: 700;}
.main04 .main04-slide .swiper-slide .txt p {font-size: 2.3rem; font-weight: 500; margin-top: 1.5rem; line-height: 1.4; letter-spacing: -0.02em;}

.main04 .main04-slide .swiper-slide {opacity: 0.5; height: auto;}
.main04 .main04-slide .swiper-slide-active,
.main04 .main04-slide .swiper-slide-next,
.main04 .main04-slide .swiper-slide-next + .swiper-slide {opacity: 1;}
.main04 .swiper-button-prev, 
.main04 .swiper-button-next {background-image: none; top:50%; width: 5rem; height: 5rem; border-radius: 50%; background: #000; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
.main04 .swiper-button-prev {left: 13.5vw;}
.main04 .swiper-button-next {right: 13.5vw; left: auto;}
.main04 .swiper-button-prev img, 
.main04 .swiper-button-next img {width: 45%; position: relative; z-index: 1;}
.main04 .swiper-button-prev img {transform: scale(-1,1);}
.main04 .swiper-button-prev::before,
.main04 .swiper-button-next::before {content:""; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #fff; border-radius: 50%; transition: all .3s; border: 1px solid #000;}
.main04 .swiper-button-prev:hover::before,
.main04 .swiper-button-next:hover::before {width: 101%; height: 101%;}
.main04 .swiper-button-prev:hover img, 
.main04 .swiper-button-next:hover img {filter: brightness(0);}
@media (min-width:1921px) {
    .main04 {background-size: 100% 15rem;}
}
@media (max-width:1200px) {
    .main04 .main04-slide .swiper-slide-next + .swiper-slide {opacity: 0.5;}
}
@media (max-width:600px) {
    .main04 .main04-slide .swiper-slide-next {opacity: 0.5;}
}