@charset "utf-8";

[data-aos] {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}


/********* 메인 *********/
.main-section:not(.outro-section) {min-height: 950px;}
.main-section .inner {position: relative; width: calc(100% - 60px); max-width: 1572px; margin: 0 auto; border-left: 1px solid #DFDFDF; border-right: 1px solid #DFDFDF;}
.main-section .inner::after {content: ''; display: block; width: 55%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: -1; border-left: 1px dashed #DFDFDF; border-right: 1px dashed #DFDFDF;}
.main-section .inner::before {content: ''; display: block; width: 1px; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: -1; border-left: 1px dashed #DFDFDF;}
.main-section .inner2 {width: calc(100% - 60px); max-width: 1396px; margin: 0 auto;}
.main-section .inner3 {width: calc(100% - 60px); max-width: 1736px; margin: 0 auto;}
.main-section > h2 {font-size: 0;}
.main-section .tit {margin-bottom: 60px;}
.main-section .tit h2 {flex-shrink: 0; text-transform: uppercase; font-family: 'Roboto Mono', monospace; font-size: 48px; font-weight: 600;}
.main-section .tit p {font-size: 20px;}
.main-section .tit.center {text-align: center;}
.main-section .tit.center h2 {margin-bottom: 10px;}
.main-section .tit.center p {margin-bottom: 30px;}
.main-section .tit.center .round-btn {margin: 0 auto;}

/* 메인배너 */
.hero-section {width: 100%; height: 100dvh; transition: height 0.5s;}
.hero-section .hero-slider {position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; background-color: #eee;}
.hero-section .hero-slider .hero-swiper-controls{position: absolute; left: 50px; bottom: 50px; z-index: 20;}
.hero-section .hero-slider .hero-swiper-toggle{border: 0; padding: 0; background: transparent; cursor: pointer; line-height: 0;}
.hero-section .hero-slider .hero-swiper-toggle svg{display: block;}
.hero-section .hero-slider img {width: 100%; height: 100%; object-fit: cover;}
.hero-section .main-txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 60px) !important; height: 100%; z-index: 999; display: flex; justify-content: center; flex-direction: column; row-gap: 20px; border-left: 0; border-right: 0;}
.hero-section .main-txt h2,
.hero-section .main-txt h3 {color: #fff; text-transform: uppercase; font-family: 'Roboto Mono', monospace;}
.hero-section .main-txt h2 {font-size: 48px; font-weight: 700;}
.hero-section .main-txt h3 {font-size: 32px;}
.hero-section .main-txt .btn-area {display: flex; align-items: center; column-gap: 16px; margin-top: 60px;}
.hero-section .main-txt .btn-area > a {height: 55px; display: flex; align-items: center; justify-content: center; padding: 0 20px; font-size: 20px; font-weight: 500; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3);; border-radius: 8px; background-color: rgba(255, 255, 255, 0.1); transition: all 0.3s ease;}
.hero-section .main-txt .btn-area > a.green {background-color: #65F665; border: 1px solid #65F665; color: #0B1F3A; font-weight: 600;}
.hero-section .main-txt::before,
.hero-section .main-txt::after {display: none;}
.hero-section .main-txt .btn-area > a:hover {background-color: rgba(255, 255, 255, 0.2);border-color: #fff;transform: translateY(-3px);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}
.hero-section .main-txt .btn-area > a.green:hover {background-color: #4ee04e; border-color: #4ee04e;transform: translateY(-3px) scale(1.02);box-shadow: 0 10px 25px rgba(101, 246, 101, 0.4); color: #000;}
/* 포트폴리오 */
.portfolio-section .inner {padding-top: 80px; padding-bottom: 80px;}
.portfolio-section .tit {width: fit-content; margin: 0 auto 60px; display: flex; flex-direction: column; align-items: flex-start; row-gap: 20px;}
.portfolio-section .tit div {display: flex; align-items: center; column-gap: 20px;}
.portfolio-section .card-wrapper {flex-wrap: nowrap;}
.portfolio-section .card {background-color: #fff; width: 492px; display: flex; flex-direction: column; border: 1px solid #BDBDBD; border-radius: 10px; overflow: hidden;}
.portfolio-section .card img {width: 100%; height: 290px; border-radius: 10px 10px 0 0; object-fit: cover; object-position: top;}
.portfolio-section .card .cont-wrap {border-top: 0; border-radius: 0 0 10px 10px; padding: 26px 29px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; row-gap: 80px;}
.portfolio-section .card .cont-wrap .top {width: 100%;}
.portfolio-section .card .cont-wrap .top strong {font-size: 20px; font-weight: 500; display: inline-block; margin-bottom: 20px;}
.portfolio-section .card .cont-wrap .top .info-wrap {display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 10px;}
.portfolio-section .card .cont-wrap .bot {width: 100%; display: flex; align-items: center; justify-content: flex-end;}
.portfolio-section .card .round-btn {padding: 10px 20px;}
/* 서비스 */
.service-section .inner {padding-top: 127px; padding-bottom: 127px;}
.service-section .tit {display: flex; align-items: flex-start; column-gap: 30px;}
.service-section .card-wrapper {column-gap: 24px; row-gap: 30px;}
.service-section .card-wrapper .card {width: calc(50% - 12px); padding: 20px; display: flex; align-items: center; column-gap: 30px; background-color: #EDEDED; border-radius: 10px;}
.service-section .card-wrapper .card .img-wrap {flex-shrink: 0; width: 110px; height: 110px; border-radius: 50%; background-color: #fff; padding: 18px;}
.service-section .card-wrapper .card .img-wrap img {width: 70px; height: 70px; object-fit: contain;}
.service-section .card-wrapper .card .txt-wrap {display: flex; flex-direction: column; row-gap: 10px; align-items: flex-start; justify-content: center;}
.service-section .card-wrapper .card .txt-wrap strong {font-size: 20px; font-weight: 500; font-family: 'Roboto Mono', monospace;} 
.service-section .card-wrapper .card .txt-wrap p {font-size: 15px; font-weight: 500; color: #717171;}
.service-section .card-wrapper .card .circle-btn {flex-shrink: 0; margin-left: auto;}
/* 어바웃 */
.about-section .inner2 {padding-top: 100px; padding-bottom: 100px; display: flex; align-items: flex-start; column-gap: 100px;}
.about-section .tit h2 {margin-bottom: 60px; color: #A7F22E; font-size: 68px; font-weight: 600; line-height: 1.16;}
.about-section .tit p {color: #A7F22E; font-size: 20px; font-weight: 600; margin-bottom: 20px;}
.about-section .about-slider {position: relative; max-width: 619px; width: calc(50% - 50px); height: auto; aspect-ratio: 619/762; border-radius: 10px;}
.about-section .about-swiper-controls{
  position:absolute;
  left:30px;
  bottom:30px;
  z-index:10;
}
.about-section .about-swiper-toggle{
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  line-height:0;
}
/* 뉴스 */
.news-section .inner {padding-top: 200px; padding-bottom: 200px;}
.news-section .card-wrapper .card {width: 362px;}
.news-section .card-wrapper .card > a {width: 100%;}
.news-section .card-wrapper .card .img-wrap {margin-bottom: 20px; width: 100%; height: auto; aspect-ratio: 1/1; border-radius: 30px; overflow: hidden; background-color: #eee; position: relative;}
.news-section .card-wrapper .card .img-wrap .round-label {position: absolute; left: 18px; bottom: 18px;}
.news-section .card-wrapper .card .txt-wrap {display: flex; flex-direction: column; row-gap: 10px;}
.news-section .card-wrapper .card .txt-wrap .news-tit {font-size: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.news-section .card-wrapper .card .txt-wrap .news-cont {font-size: 16px; font-weight: 500; color: #999; line-height: 1.2; height: calc(1.2em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
/* 플랜 */
.plan-section .inner3 {padding-top: 45px; padding-bottom: 56px;}
.plan-section .card-wrapper {align-items: center;}
.plan-section .card {width: 410px; height: fit-content; border-radius: 10px; background-color: #fff; border: 1px solid #e0e0e0; padding: 60px 20px;}
.plan-section .card.popular {border: 1px solid transparent; background:linear-gradient(#fff, #fff) padding-box, linear-gradient(to bottom, #2461E9, #143783) border-box;}
.plan-section .card.popular .btn-area {width: 100%; display: flex; justify-content: flex-end; margin-bottom: 20px;}
.plan-section .card .popular-btn {font-size: 14px; color: #fff; padding: 4px 10px; border-radius: 100px; background: linear-gradient(to right, #598DFF, #3134FF);}
.plan-section .card .top-info {padding-bottom: 30px; border-bottom: 1px solid #E0E0E0;}
.plan-section .card .top-info .plan-name {display: inline-block; font-size: 20px; font-weight: 600; margin-bottom: 8px;}
.plan-section .card .top-info p {font-size: 16px; font-weight: 400; color: #777; margin-bottom: 20px;}
.plan-section .card .top-info .price {display: inline-block; font-size: 24px; font-weight: 600; margin-bottom: 8px;}
.plan-section .card .top-info .gray {margin-bottom: 0;}
.plan-section .card .bot-info  {padding-top: 30px; display: flex; flex-direction: column; row-gap: 14px; margin-bottom: 50px;}
.plan-section .card .bot-info li {display: flex; align-items: center; column-gap: 10px; color: #575757;}
.plan-section .card .bot-info li .check-icon {width: 24px; height: 24px; border-radius: 50%; background-color: #E8F1FF; display: flex; align-items: center; justify-content: center;}
.plan-section .card .start-btn {width: 100%; background: #0B1C2D; display: flex; align-items: center; justify-content: center; column-gap: 10px; font-size: 16px; font-weight: 500; border-radius: 100px; padding: 10px;}
.plan-section .card .start-btn.navy-line {border: 1px solid #0B1C2D; color: #0B1C2D; background-color: #fff;}
.plan-section .swiper-btn-area {display: none;}
.plan-section .swiper-btn-area .swiper-button-next,
.plan-section .swiper-btn-area .swiper-button-prev {width: 30px !important; height: 48px !important;}
.plan-section .swiper-btn-area .swiper-button-prev {left: 4px; background: url(../img/main/arrow-left.svg) no-repeat center center / cover;}
.plan-section .swiper-btn-area .swiper-button-next {right: 4px; background: url(../img/main/arrow-right.svg) no-repeat center center / cover;}
.plan-section .swiper-btn-area .swiper-button-next:after,
.plan-section .swiper-btn-area .swiper-rtl .swiper-button-prev:after,
.plan-section .swiper-btn-area .swiper-button-prev:after,
.plan-section .swiper-btn-area .swiper-rtl .swiper-button-next:after {content: '' !important;}
.plan-section .plan-add {width: calc(100% - 60px) !important; margin-top: 30px; border-left: 0; border-right: 0;}
.plan-section .plan-add::before,
.plan-section .plan-add::after {display: none;}
.plan-section .plan-add > span {font-size: 20px; font-weight: 600;}
.plan-section .plan-add > p {font-size: 15px; color: #333; padding-top: 10px; padding-bottom: 30px;}
.plan-section .plan-add ul {display: flex; gap: 24px; flex-wrap: wrap;}
.plan-section .plan-add ul li {width: calc(100% / 2 - 12px); background-color: #fff; border: 1px solid #E0E0E0; border-radius: 10px; padding: 30px 43px; display: flex; align-items: center; justify-content: space-between;}
.plan-section .plan-add ul li .icon {display: flex; align-items: center; column-gap: 10px; font-size: 16px;}
.plan-section .plan-add ul li .icon svg {fill: transparent !important;}
.plan-section .plan-add ul li > p {font-size: 18px; font-weight: 600;}
/* 구독플랜 */
.subscription-section .inner {padding-top: 160px; padding-bottom: 160px; display: flex; align-items: center; column-gap: 153px;}
.subscription-section .inner .left {background-color: #fff;}
.subscription-section .inner .tit {margin-bottom: 30px;}
.subscription-section .inner .tit h2 {color: #A7F22E; font-size: 40px; font-weight: 500; margin-bottom: 6px;}
.subscription-section .inner .tit p {font-size: 18px; font-weight: 500; color: #626262; margin-bottom: 30px;}
.subscription-section .inner .left hr {border: none; height: 1px; background-color: #E9E9E9;}
.subscription-section .inner .cont-wrap {margin-top: 30px;}
.subscription-section .inner .card-wrapper {row-gap: 40px; margin-bottom: 30px;}
.subscription-section .inner .card {display: flex; align-items: flex-start; column-gap: 30px;}
.subscription-section .inner .card span {display: inline-block; width: 255px; flex-shrink: 0; font-size: 15px; font-weight: 500;}
.subscription-section .inner .card p {font-size: 15px; font-weight: 400; color: #626262;}
.subscription-section .inner .right {max-width: 700px; width: calc(50% - 50px); height: auto; aspect-ratio: 700/522; border-radius: 10px; background-color: #eee;}

/* 반응형 */
@media screen and (max-width: 1440px) {
  .main-section:not(.outro-section) {min-height: revert;}
  .hero-section {height: auto;}

  .hero-section .hero-slider {height: 76vw;}
  .hero-section .hero-slider .hero-swiper-controls {bottom: 5vw;}

  .service-section .tit {flex-direction: column; align-items: flex-start; row-gap: 20px;}

  .subscription-section .inner {column-gap: 60px;}
  
}
@media screen and (max-width: 1280px) {

  .about-section .inner2 {flex-direction: column; padding-left: 48px; padding-right: 48px;}
  .about-section .tit {margin-bottom: 100px;}
  .about-section .about-slider {width: 100%;}

  .subscription-section .inner {flex-direction: column; row-gap: 80px;}
  .subscription-section .inner .left,
  .subscription-section .inner .right {width: 100%;}
}
@media screen and (max-width: 1024px) {

  .main-section .inner3,
  .about-section .inner2,
  .main-section:not(.service-section, .subscription-section) .inner {width: 100%;}
  .main-section:not(.service-section, .about-section, .subscription-section) .tit {padding: 0 30px;}
  .main-section .inner > .swiper,
  .main-section .inner3 > .swiper {margin-left: 30px;}

  .hero-section .main-txt {row-gap: 2vw;}
  .hero-section .main-txt h2 {font-size: 5vw;}
  .hero-section .main-txt h3 {font-size: 3vw;}
  .hero-section .main-txt .btn-area {margin-top: 6vw; column-gap: 1.8vw;}
  .hero-section .main-txt .btn-area > a {height: 6vw; font-size: 1.8vw; border-radius: 0.8vw;}

  .about-section .inner2 {padding-left: 78px; padding-right: 78px;}
  
  .service-section .card-wrapper .card {width: 100%;}
  
}
@media screen and (max-width: 768px) {
  
  .main-section .tit h2 {font-size: 36px;}
  .main-section .tit p {font-size: 18px;}
  .main-section .inner {border-left: 0; border-right: 0;}
  .main-section .inner::before,
  .main-section .inner::after {display: none;}
  
  .hero-section {padding-top: 58px;}
  .hero-section .hero-slider {height: 82vw;}
  .hero-section .hero-slider .hero-swiper-controls {bottom: 6vw;}
  .hero-section .main-txt h2 {font-size: 6vw;}
  .hero-section .main-txt h3 {font-size: 3.4vw;}
  .hero-section .main-txt .btn-area > a {height: 7vw; font-size: 2.4vw; border-radius: 0.8vw;}

  .portfolio-section .inner {padding-top: 60px; padding-bottom: 60px;}
  .portfolio-section .tit {margin: 0 auto 40px;}
  .portfolio-section .tit div {align-items: flex-start; flex-direction: column; row-gap: 10px;}
  
  .service-section .inner {padding-top: 40px; padding-bottom: 100px;}

  .about-section .inner2 {padding: 60px 78px;}
  .about-section .tit h2 {font-size: 54px;}

  .news-section .inner {padding-top: 100px; padding-bottom: 100px;}

  .plan-section {background-color: transparent;} 
  .plan-section .inner3 {padding-top: 0; padding-bottom: 100px;}
  .plan-section .plan-add ul li {width: 100%;}

  .subscription-section .inner {padding-top: 0; padding-bottom: 100px;}
  .subscription-section .inner .card {flex-direction: column; row-gap: 10px;}
  .subscription-section .inner .card span {width: 100%;}

}

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

  .main-section .inner {width: calc(100% - 32px);}
  .main-section .inner > .swiper,
  .main-section .inner3 > .swiper {margin-left: 16px;}
  .main-section .tit {margin-bottom: 40px;}
  .main-section:not(.service-section, .about-section, .subscription-section) .tit {padding: 0 16px;}
  .main-section .tit.center {text-align: left;}
  .main-section .tit.center .round-btn {margin: 0;}

  .hero-section .hero-slider {height: 88vw;}
  .hero-section .main-txt {width: calc(100% - 32px) !important;}
  .hero-section .main-txt h2 {font-size: 7vw;}
  .hero-section .main-txt h3 {font-size: 3.4vw;}
  .hero-section .main-txt .btn-area > a {height: 8.4vw; font-size: 3vw;}

  .portfolio-section .card {width: 320px;}
  .portfolio-section .card img {height: 200px;}
  .portfolio-section .card .cont-wrap {height: 260px; row-gap: 0; padding: 20px;}
  .portfolio-section .card .round-label.mid {padding: 8px 10px; font-size: 14px;}
  .portfolio-section .card .cont-wrap .bot {justify-content: flex-start;}

  .service-section .card-wrapper .card {padding: 20px 45px; flex-direction: column; align-items: flex-start; }
  .service-section .card-wrapper .card .txt-wrap {margin-top: 30px; margin-bottom: 20px;}
  .service-section .card-wrapper .card .circle-btn {margin-left: revert;}
  
  .about-section .inner2 {padding: 60px 16px;}

  .news-section .card-wrapper .card {width: 300px;}

  .plan-section .inner3 {position: relative; width: calc(100% - 32px);}
  .plan-section .inner3 > .swiper {margin-left: 0;}
  .plan-section .tit.center {padding: 0;}
  .plan-section .bubble::after {left: auto; transform: none; right: 12px;}
  .plan-section .swiper-btn-area {display: flex; position: absolute; width: 100%; z-index: 20; top: 25%;}
  .plan-section .plan-add {width: 100% !important;}
  
}
@media screen and (max-width: 480px) {
  .main-section .tit.center h2 {font-size: 24px !important;}
  .main-section .tit p {font-size: 16px;}
  .about-section .tit h2 {font-size: 32px !important;}
  
}

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