@charset "UTF-8";

/* main-banner */
.main-banner{width: 100%;height: 100vh;position: relative;}
.main-banner_slide{height: 100%;}
.main-banner_slide .swiper-slide{width: 100%;overflow: hidden;}
.main-banner_slide .img-wrap{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.main-banner img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.3);transition: transform 2s ease; -webkit-transform: scale(1.3); -webkit-transition: transform 2s ease;}
.main-banner_slide .img-wrap::after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .3);backdrop-filter: blur(5px);}
.main-banner .inner{max-width: calc(1320px + 80px);}
.main-txt__wrap{position: absolute;top: 43.8974358974359vh;left: 50%;transform: translate(-50%, 0);z-index: 2;display: flex;align-items: center;justify-content: center;}
.main-banner__txt{position: relative;color: #fff;font-family: var(--font-gmarket);text-align: center;}
.main-banner__txt *{font-family: inherit;} 
.main-banner__txt .txt01{font-size: var(--font-34);font-weight: 500;white-space: nowrap;}
.main-banner__txt .txt02{font-size: var(--font-50);margin-top: 10px;font-weight: 500;white-space: nowrap;}
.main-banner__txt .txt02 b{font-weight: 700;}
.main-banner_slide .swiper-slide-active img { transform: scale(1.1);}
.main-banner .swiper-control{transition-delay: .5s;margin-top: 0;position: absolute;z-index: 1;bottom: 36vh;width: 100%;display: flex;justify-content: center;align-items: center;gap: 0 44px;opacity: 0;transform: translateY(100%);}
.main-banner .swiper-btn{width: 40px; height: 40px; background: url("../../images/cmn/slide-btn.svg") no-repeat 50% / cover;}
.main-banner .swiper-btn.slide-btn__next{background-image: url("../../images/cmn/slide-btn2.svg");}
.main-banner .swiper-pagination{width: auto;position: static;height: 40px;display: flex;align-items: center; gap: 26px;}
.main-banner .swiper-pagination-bullet { border-radius: 10px; border: 1px solid #FFF; background: rgba(255, 255, 255, 0.30); opacity: 1; width: 10px; height: 10px; margin: 0;} 
.main-banner .swiper-pagination-bullet-active { background: #fff; } 
.main-banner__txt .txt01 { opacity: 0;transform: translateY(100%);}
.main-banner__txt .txt02 {opacity: 0;transform: translateY(100%);}
.main-banner__txt.active  .txt01{opacity: 1; transform: translateY(0); transition: all 1s 0.4s;}
.main-banner__txt.active  .txt02{opacity: 1; transform: translateY(0); transition: all 1s 0.7s;}
.main-banner .swiper-control.active{opacity: 1; transform: translateY(0); transition: all 1s 1s;}



/* main-sect01 */
/* .main-bg{position: absolute;right: 0;top: 135px;background: url("../../images/user/main/main-sect02_bg.gif") no-repeat 50% / cover;width: 100%;height: 100vh;z-index: 1;} */
.main-sect01{position: relative;padding: 100px 0;}
.main-sect01::before {content: '';position: absolute;right: -99px;bottom: 92px;width: 324px;height: 338px;background: url("../../images/user/main/main01-bg_.svg") no-repeat 50% / cover;z-index: -1;animation: leafMotion 6s ease-in-out infinite;} 
.main-sect01 .inner{gap: 60px;}
.main-sect__l {position: relative;border-radius: 100px 10px;overflow: hidden;font-size: 0;flex: none;width: min(700px, 50%);} 
.main-sect01 .main-sect__l::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 100px 10px;opacity: 0.1;background: var(--color-green-100);}
.main-sect01__tit{font-size: var(--font-24);font-family: var(--font-gmarket);}
.main-sect01__tit b {font-size: var(--font-56);font-family: inherit;margin-top: 10px;display: block;} 
.main-sect01__tit span{font-weight: 800; position: relative;}
.main-sect01__tit span::after{content: '';position: absolute;bottom: 0;left: 0;z-index: -1;width: 100%;height: 23px;background: url(../../images/user/main/main01-tit.svg) no-repeat bottom right / cover;}
.main-sect01__cont{margin-top: 60px;font-size: var(--font-20);line-height: 1.7;}
.main-sect01__cont p{font-size: var(--font-24);font-weight: 600;color: var(--color-800);line-height: 1.6;}
.main-sect01__cont p + p{margin-top: 20px;}
.main-sect01 .main-sect__r img{border-radius: 300px 0 0 300px;width: 100%;}
.main-sect__r { flex: 1; } 



/* main-sect02 */
.main-sect02{padding: 60px 0 185px;background-color: var(--color-sub); position: relative;}
.main-sect02::before{content: '';position: absolute;top: -32px;left: 94px;width: 74px;height: 74px;background: url("../../images/user/main/main02-img01.svg") no-repeat 50% / cover; animation: floatDown 6s ease-in-out infinite;}
.sect02-list{display: flex;justify-content: center;gap: 20px;max-width: 1220px;width: 100%;margin: 0 auto;position: relative;}
.sect02-list a{transition: .4s; width: 100%;height: 240px;border-radius: 10px;border: 1px solid var(--color-300);background: var(--color-white);padding: 80px 34px 34px;}
.sect02-box__icon{font-size: 0;}
.sect02-box__bottom{margin-top: 28px; display: flex; justify-content: space-between; align-items: flex-end;}
.sect02-box__tit .tit{font-family: var(--font-gmarket); font-size: var(--font-22); font-weight: 500;}
.sect02-box__tit .en-txt{font-weight: 500;margin-top: 4px;color: var(--color-700);}
.sect02-box__btn{width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background-color: #fff; border: 1px solid var(--color-400); transition: .4s;}
.sect02-box__btn i{width: 14px; height: 14px; background: url("../../images/cmn/link-arrow.svg") no-repeat 50% / cover;}

.sect02-list > li{position: relative;flex: 1;}
.sect02-list::before{content: '';position: absolute;bottom: -10px;left: 49%;width: 150px;height: 150px;background: url("../../images/user/main/main02-img03.svg") no-repeat 50% / cover;z-index: 1;animation: floatFall 6s ease-in-out infinite;}
.sect02-list::after{content: '';position: absolute;top: -82%;right: -90px;width: 200px;height: 130px;background: url("../../images/user/main/main02-img02.svg") no-repeat 50% / cover;z-index: 1;animation: dropSlideZoom 6s ease-in-out infinite;}
.sect02-list .hover-img{display: none;}
.sect02-list a:hover{background-color: var(--color-green-100);}
.sect02-list a:hover *{color: #fff;}
.sect02-list a:hover img:not(.hover-img){display: none;}
.sect02-list a:hover .hover-img{display: block;}
.sect02-list a:hover .sect02-box__btn{background-color: var(--color-green-100); border-color: #fff;}
.sect02-list a:hover .sect02-box__btn i{background-image: url("../../images/cmn/link-arrow_w.svg");}

@media screen and (min-width: 1181px) {
  @keyframes leafMotion { 
    0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 
    25% { transform: translate(-5px, -5px) rotate(-5deg); } 
    50% { transform: translate(5px, 5px) rotate(5deg); opacity: 0.8; } 
    75% { transform: translate(-5px, 0) rotate(-5deg); } 
    100% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 
  }
  
  @keyframes floatDown {
    0% {
      transform: translate(0, -200px) rotate(0deg);
      opacity: 0;
    }
   
    100% {
      transform: translate(0, 0) rotate(0deg);
      opacity: 1;
    }
  }
  
  @keyframes dropSlideZoom {
    0% {
      transform: translate(100%, 10px) translateY(0) scale(0.5);
      opacity: 0;
    }
    100% {
      transform: translate(-30px, 0) translateY(130px) scale(1.2);
      opacity: 1;
    }
  }
  
  @keyframes floatFall {
    0% {
      transform: translate(-100px, -300px) rotate(0deg);
      opacity: 1;
    }
    25% {
      transform: translate(-8px, -200px) rotate(-5deg);
    }
    50% {
      transform: translate(8px, -100px) rotate(5deg);
      opacity: 0.9;
    }
    75% {
      transform: translate(-5px, 0) rotate(-3deg);
    }
    100% {
      transform: translate(0, 60px) rotate(0deg);
      opacity: 0.8;
    }
  }
  
}

@media screen and (max-width: 1180px) {
  /* main-banner */
  .main-banner__txt {}
  .main-sect01 .main-sect__l img {width: 100%;}
  .main-sect01 .inner {flex-direction: column;}
  .main-sect01 .main-sect__l {width: 100%;}
  .main-sect01 .main-sect__r {width: 100%; text-align: center;}
  .main-sect01__cont {margin-top: 60px;}
  .main-sect01::before{width: 300px; height: 314px;}
  .main-sect02 .main-sect__l {width: 100%;}
  .main-sect02 .main-sect__r {width: 100%; margin: 0;}
  .main-sect03::after {width: 40%;height: 0;padding-bottom: 18%;}
  .sect03-list {width: 450px;}
  .sect02-list {flex-direction: column;}
  .sect02-box__bottom{margin-top: 20px;}
  .sect02-list::after {top: -58px;}
  .sect02-list::before {bottom: -75px;}
  
}


@media screen and (max-width: 768px) {
  /* main-banner */
  .main-banner{height: 600px;}
  .main-banner__txt {} 
  .main-txt__wrap{top: 250px;}
  .main-banner__txt .txt01 { font-size: 18px; } 
  .main-banner__txt .txt02 { font-size: 32px; margin-top: 6px; } 
  .main-sect01 { padding: 50px 0 70px; } 
  .main-sect01::before {width: 100px;height: 100px;} 
  .main-sect01 .main-sect__l {border-radius: 45px 10px;} 
  .main-sect01__tit span::after { height: 17px; } 
  .main-sect01__cont {margin-top: 26px;font-size: 14px;word-break: keep-all;} 
  .main-sect01__cont p + p { margin-top: 16px; } 
  .main-sect02 { padding-bottom: 150px; } 
  .main-sect01 .inner { gap: 40px; } 
  .main-sect01__tit b {font-size: 36px;} 
  .sect02-list {flex-direction: column;max-width: 100%;} 
  .sect02-list > li:nth-child(1)::before {width: 80px;height: 80px;right: auto;top: -37px;bottom: auto;} 
  .sect02-list > li:nth-child(2)::before {width: 100px;height: 63px;top: -30px;right: 25px;} 
  .sect02-list a { height: 210px; padding: 64px 20px 20px; } 
  .main-sect02::before {} 
  .main-sect01__tit { font-size: 16px; } 
  .main-banner .swiper-control{bottom: 35%; gap: 30px;}
  .main-banner .swiper-btn{width: 30px; height: 30px;}
  .main-banner .swiper-pagination{gap: 10px;}
}

@media screen and (max-width: 360px) {
  .main-banner__txt .txt01{font-size: 16px; white-space: nowrap;}
  .main-banner__txt .txt02{font-size: 30px; white-space: nowrap;}
}