@charset "utf-8";

/* layout */
.price-container{ color:#2C2C2C; letter-spacing:-0.02em; }

.fs10{ font-size:10px; }

.price-container .color-landing{ color:#AD00FF; }
.price-container .color-lightblue{ color:#4ED1DD; }
.price-container .color-orange{ color:#F26165; }
.price-container .color-blue{ color:#6D7CC9; }
.price-container .color-pink{ color:#F26165; }
.price-container .color-green{ color:#6EDF9B; }

.tit-landing{ margin-bottom:60px; font-size:36px; font-weight:800; text-align:center; letter-spacing:-.02em; }
.txt-landing{ margin-bottom:48px; font-size:24px; color:#767676; text-align:center; letter-spacing:-.02em; }
.txt-info{ font-size:12px; font-weight:500; color:#767676; }

.btn-landing{ width:100%; max-width:330px; height:42px; line-height:40px; background-color:#FFFFFF; border-color:#B2B2B2; border-radius:21px; font-size:16px; font-weight:700; letter-spacing:-.04em; }
.btn-landing.btn-black{ background-color:#2C2C2C; border-color:#2C2C2C; color:#fff; }
.btn-landing:hover, .btn-landing:focus{ background-color:#AD00FF; border-color:#AD00FF; color:#fff; }

.sticker-landing{ padding:4px 8px 2px 6px; display:inline-flex; background-color:#AD00FF; border-radius:5px; font-size:11px; font-weight:600; color:#fff; letter-spacing:-.04em; align-items:center; vertical-align:middle; transform:translateY(-2px); }
.sticker-landing.sticker-black{ background-color:#2C2C2C; }

.list-info{ padding-left:20px; }
.list-info > li{ line-height:1.6; position:relative; font-size:12px; font-weight:500; }
.list-info > li:before{ content:'ㆍ'; position:absolute; left:-14px; }


/* nav */
.landing-nav{ width:100%; background-color:#fff; border-bottom:1px solid rgba(0, 0, 0, 0.15); }
.landing-nav .nav-link{ width:100%; height:54px; display:flex; align-items:center; }
.landing-nav .nav-link > li{ flex:1; }
.landing-nav .nav-link > li > *{ width:100%; display:flex; font-size:16px; font-weight:500; color:rgba(44, 44, 44, 0.5); justify-content:center; align-items:center; }
.landing-nav .nav-link > li.selected > *, .landing-nav .nav-link > li:hover > *{ color:#000; }


/* header */
.landing-header{ padding:100px 0 80px; }
.landing-header .tit-landing{ margin-bottom:8px; font-size:52px; }
.landing-header .tit-landing small{ margin-bottom:4px; display:block; font-size:18px; font-weight:700; }
.landing-header .txt-landing{ margin-bottom:48px; }

.landing-header .tab-type1{ margin:0 auto 48px; display:inline-flex; position:relative; border-bottom:none; transition-delay:.6s; }
.landing-header .tab-type1 > ul{ width:auto; height:48px; padding:8px; display:inline-flex; background-color:#D9D9D9; border-radius:24px; justify-content:center; align-items:center; gap:4px; }
.landing-header .tab-type1 > ul > li{ margin-left:0; }
.landing-header .tab-type1 > ul > li > *{ height:32px; padding:0 14px; display:flex; background-color:transparent; border-radius:16px; font-size:14px; color:rgba(44, 44, 44, .5); justify-content:center; align-items:center; gap:4px; }
.landing-header .tab-type1 > ul > li > *:after{ display:none; }
.landing-header .tab-type1 > ul > li.selected > *, .landing-header .tab-type1 > ul > li:hover > *{ color:#2C2C2C; }
.landing-header .tab-type1 .overlay{ height:32px; position:absolute; top:8px; background-color:#fff; border-radius:16px; transition:0.5s all ease-in-out; }

.landing-header .list-price{ display:flex; text-align:left; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.landing-header .list-price > li{ width:calc((100% - 32px) / 3); padding:24px; display:flex; background-color:#fff; border:1px solid #B2B2B2; border-radius:20px; flex-direction:column; transition:opacity 1s ease, transform 1s ease-in-out; }
.landing-header .list-price > li:hover{ border-color:#2C2C2C !important; outline:1px solid #2C2C2C }
.landing-header .list-price > li .tit{ margin-bottom:2px; font-size:24px; font-weight:800; }
.landing-header .list-price > li .txt{ margin-bottom:24px; font-size:12px; font-weight:500; color:#767676; }
.landing-header .list-price > li .info-area{ min-height:60px; margin-bottom:24px; font-size:12px; }
.landing-header .list-price > li .info-area .price{ font-size:32px; font-weight:700; letter-spacing:-.05em; }
.landing-header .list-price > li .list-service > dt{ margin:24px auto 12px; font-size:14px; font-weight:700; }
.landing-header .list-price > li .list-service > dt:before{ content:'✓ '; display:inline; }
.landing-header .list-price .txt-info{ margin-top:16px; }
.landing-header .list-price > li.best{ background-color:#E9E9E9; border-color:#E9E9E9; }
.landing-header .list-price > li.last{ width:100%; gap:16px; flex-direction:row; }
.landing-header .list-price > li.last .left{ min-width:284px; }
.landing-header .list-price > li.last .right{ flex:1; }
.landing-header .list-price > li.last .info-area{ min-height:auto; }
.landing-header .list-price > li.last .info-area .price{ font-size:16px; }
.landing-header .list-price > li.last .list-service > dt{ margin-top:0; }
.landing-header .list-price > li:last-child .list-service{ margin-top:12px; padding:12px; background-color:rgba(173, 0, 255, 0.1); border-radius:10px; }
.landing-header .list-price > li:nth-child(1){ transition-delay:.3s; }
.landing-header .list-price > li:nth-child(2){ transition-delay:.4s; }
.landing-header .list-price > li:nth-child(3){ transition-delay:.5s; }
.landing-header .list-price > li:nth-child(4){ transition-delay:.6s; }


/* cont01 */
.landing-cont01{ padding-top:120px; }
.landing-cont01 .list-options{ display:flex; gap:16px; }
.landing-cont01 .list-options > li{ position:relative; border-radius:24px; overflow:hidden; flex:1; }
.landing-cont01 .list-options > li:nth-child(1){ transition-delay:.1s; }
.landing-cont01 .list-options > li:nth-child(2){ transition-delay:.2s; }
.landing-cont01 .list-options > li:nth-child(3){ transition-delay:.3s; }
.landing-cont01 .list-options > li:hover > .img-area{ transform:scale(1.05); transition:transform .5s ease-in; }
.landing-cont01 .list-options > li > .cont-area{ padding:24px; display:flex; position:absolute; top:0; left:0; right:0; bottom:0; flex-direction:column; justify-content:space-between; }
.landing-cont01 .list-options > li .tit{ font-size:20px; font-weight:800; color:#fff; text-align:center; }


/* cont02 */
.landing-cont02{ padding-top:120px; }
.landing-cont02 .swiper-site .swiper-wrapper{ transition-timing-function:linear; }
.landing-cont02 .swiper-site .swiper-slide{ width:auto; line-height:40px; font-size:18px; font-weight:800; }


/* cont03 */
.landing-cont03{ padding-top:120px; }
.landing-cont03 .tit-landing{ margin-bottom:30px; }
.landing-cont03 .card-layout{ margin-top:30px; padding:28px; border:1px solid #B2B2B2; border-radius:20px; }
.landing-cont03 .card-layout .user-layout{ justify-content:flex-start; }
.landing-cont03 .card-layout .user-layout > .img-area{ width:36px; height:36px; }
.landing-cont03 .card-layout .user-layout > .cont-area{ margin-left:8px; font-size:16px; font-weight:600; }
.landing-cont03 .card-layout .tit{ margin:12px auto; font-size:20px; font-weight:800; }
.landing-cont03 .card-layout .cont{ line-height:1.5; font-size:16px; }


/* cont04 */
.landing-cont04{ padding-top:120px; }
.landing-cont04 .swiper-logo .swiper-wrapper{ transition-timing-function:linear; }
.landing-cont04 .swiper-logo .swiper-slide{ width:auto; }
.landing-cont04 .swiper-logo .swiper-slide .img-area{ width:auto; height:74px; }
.landing-cont04 .swiper-logo .swiper-slide .img-area img{ width:auto; height:100%; }


/* cont05 */
.landing-cont05{ padding-top:120px; }
.landing-cont05 .table-options{ width:100%; overflow-x:auto; overflow-y:hidden; }
.landing-cont05 .table-options table{ width:100%; min-width:700px; table-layout:fixed; }
.landing-cont05 .table-options table tr th, .table-options table tr td{ min-width:170px; padding:20px 0; border-bottom:1px solid #B2B2B2; font-size:14px; font-weight:500; text-align:left; }
.landing-cont05 .table-options table thead tr th{ padding:24px 0; }
.landing-cont05 .table-options .tit{ font-size:24px; font-weight:700; }
.landing-cont05 .table-options .price{ margin:6px auto; font-size:10px; }
.landing-cont05 .table-options .price .strong{ font-size:14px; }
.landing-cont05 .table-options .color-landing{ font-size:12px; }
.landing-cont05 .table-options .btn-landing{ width:60px; height:26px; line-height:24px; margin-top:14px; padding:0; font-size:12px; font-weight:500; }
.landing-cont05 .table-options .ico-check{ width:15px; height:11px; background-image:url(//img.inclass.co.kr/about/gate/202504/price/ico_check.svg); }
.landing-cont05 .table-options .toggle-price[data-price="0"]{ display:none; }


/* faq */
.landing-faq{ padding:120px 0 200px; }
.landing-faq .toggle-type1{ color:#000; }
.landing-faq .toggle-type1 > dt{ border:none; }
.landing-faq .toggle-type1 > dt:not(:first-child){ margin-top:12px; }
.landing-faq .toggle-type1 > dt > a{ padding:24px 48px 24px 24px; background-color:#F5F5F5; border-radius:20px; font-size:18px; font-weight:600; }
.landing-faq .toggle-type1 > dt > a::before, .landing-faq .toggle-type1 > dt > a:after{ content:''; width:16px; height:2px; margin-top:-1px; position:absolute; top:50%; right:28px; background:none; background-color:#000; }
.landing-faq .toggle-type1 > dt > a:after{ transform:rotate(90deg); transition:.5s all ease-in-out; }
.landing-faq .toggle-type1 > dt.selected > a:after{ opacity:0; transform:rotate(0); transition:.5s all ease-in-out; }
.landing-faq .toggle-type1 > dd{ margin-top:4px; padding:24px; background-color:#D9D9D9; border:none; border-radius:20px; font-size:16px; }
.landing-faq .toggle-type1 > dt:hover > a, .landing-faq .toggle-type1 > dt.selected > a{ background-color:#D9D9D9; color:#000; }
.landing-faq .toggle-type1 .list-info > li{ font-size:14px; }
.landing-faq .txt-landing{ margin:60px auto 0; }
.landing-faq .txt-landing .txt-link{ color:#2C2C2C; }


/* fixed */
.landing-fixed .fixed-banner{ height:56px; display:flex; background-color:#e7b3ff; border-radius:30px; font-size:16px; z-index:99; justify-content:center; align-items:center; gap:12px; }
.landing-fixed .fixed-banner .sticker-landing{ padding:2px 12px; border-radius:10px; font-size:12px; font-weight:800; }


/** Tablets **/
@media screen and (max-width:1024px){
    .tablet-block{ display:block; }
}

/** mobiles **/
@media screen and (max-width:767px){
    .tit-landing{ margin-bottom:30px; font-size:24px; }
    .txt-landing{ margin-bottom:40px; font-size:14px; }
    .txt-info{ font-size:12px; font-weight:500; color:#767676; }

    .btn-landing{ max-width:none; }
    

    /* nav */
    .landing-nav .content-layout{ padding:0; }
    .landing-nav .nav-link{ height:42px; }
    .landing-nav .nav-link > li > *{ font-size:12px; }

    /* header */
    .landing-header{ padding:40px 0 0; }
    .landing-header .tit-landing{ margin-bottom:4px; font-size:26px; }
    .landing-header .tit-landing small{ margin-bottom:0; font-size:12px; }
    .landing-header .txt-landing{ margin-bottom:40px; }

    .landing-header .tab-type1{ margin-bottom:40px; }
    .landing-header .tab-type1 > ul{ height:36px; padding:4px; gap:2px; }
    .landing-header .tab-type1 > ul > li > *{ height:28px; padding:0 10px; font-size:12px; }:hover > *{ color:#2C2C2C; }
    .landing-header .tab-type1 .overlay{ height:28px; top:4px; }

    .landing-header .list-price{ flex-direction:column; }
    .landing-header .list-price > li{ width:100%; transition-delay:0; }
    .landing-header .list-price > li .info-area{ min-height:auto; }
    .landing-header .list-price .txt-info{ margin-top:8px; }
    .landing-header .list-price > li.last{ flex-direction:column; }
    .landing-header .list-price > li .list-service > dt{ margin:12px auto 8px; }

    /* cont01 */
    .landing-cont01{ padding-top:60px; }
    .landing-cont01 .list-options{ flex-direction:column; align-items:center; }
    .landing-cont01 .list-options > li{ width:360px; max-width:100%; }

    /* cont02 */
    .landing-cont02{ padding:60px 16px 0; }

    /* cont03 */
    .landing-cont03{ padding-top:60px; }

    /* cont04 */
    .landing-cont04{ padding:60px 16px 0; }
    .landing-cont04 .swiper-logo .swiper-slide .img-area{ height:38px; }

    /* cont05 */
    .landing-cont05{ padding-top:60px; }

    /* faq */
    .landing-faq{ padding:60px 0; }
    .landing-faq .toggle-type1 > dt{ border:none; }
    .landing-faq .toggle-type1 > dt:not(:first-child){ margin-top:12px; }
    .landing-faq .toggle-type1 > dt > a{ padding:18px 40px 18px 16px; font-size:14px; }
    .landing-faq .toggle-type1 > dt > a::before, .landing-faq .toggle-type1 > dt > a:after{ width:14px; right:16px; }
    .landing-faq .toggle-type1 > dd{ margin-top:4px; padding:18px 16px; font-size:14px; }
    .landing-faq .toggle-type1 .list-info > li{ font-size:12px; }
    .landing-faq .txt-landing{ margin:60px auto 0; }

    /* fixed */
    .landing-fixed .fixed-banner{ font-size:14px; gap:6px; }
}