@charset "utf-8";

/* layout */
/* html, body, #wrap, #container.landing-container{ overflow:visible; } */

#header #gnb .ico-login-v2{ background-image:url(//img.inclass.co.kr/common/202208/ico_login_wt.svg); }
#header #gnb .ico-logout-v2{ background-image:url(//img.inclass.co.kr/common/202208/ico_logout_wt.svg); }
#header #gnb .ico-user-v2{ background-image:url(//img.inclass.co.kr/common/202208/ico_user_wt.svg); }

#header{ box-shadow:none; }
#header #gnb{ background-color:#071A00; }
#header.scroll-to-fixed-fixed #gnb{ background-color:rgba(7, 26, 0, .9); }
#header #gnb .logo, #header #gnb a{ color:#fff; }
#header #gnb .logo, #header #gnb a:hover, #header #gnb .wide-layout .gnb-menu > li:hover > a, #header #gnb .wide-layout .gnb-menu > li.selected > a{ color:#DC90FF; }
#header #gnb .gnb-util .btn, #header #gnb .gnb-util .btn:active{ background-color:#fff; border-color:#fff; color:#0E3600; }
#header #gnb .gnb-util .btn:hover{ background-color:#DC90FF; border-color:#DC90FF; }

#footer{ overflow:hidden; }

.landing-container .ico-clock{ width:32px; height:32px; background-image:url(//img.inclass.co.kr/about/gate/202208/klasseum/ico_clock.svg); }
.landing-container .ico-card{ width:32px; height:32px; background-image:url(//img.inclass.co.kr/about/gate/202208/klasseum/ico_card.svg); }
.landing-container .ico-studio{ width:32px; height:32px; background-image:url(//img.inclass.co.kr/about/gate/202208/klasseum/ico_studio.svg); }
.landing-container .ico-mappin{ width:32px; height:32px; background-image:url(//img.inclass.co.kr/about/gate/202208/klasseum/ico_mappin.svg); }

.color-landing{ color:#AD00FF; }

.tit-landing{ margin-bottom:40px; font-size:50px; font-weight:600; color:#fff; letter-spacing:-.05em; }
.txt-landing{ margin-bottom:40px; font-size:24px; font-weight:600; color:#CACACA; letter-spacing:-.02em; }

/* header */
.landing-header{ padding:180px 0 110px; background:url(//img.inclass.co.kr/about/gate/202208/klasseum/header_bg.png) 50% 50% no-repeat; background-size:cover; color:#fff; text-align:center; }
.landing-header .txt-landing{ line-height:164%; margin-bottom:16px; font-size:28px; }
.landing-header .tit-landing{ margin-bottom:24px; font-size:108px; transition-delay:.2s; }
.landing-header .txt{ line-height:189%; font-size:18px; color:#CFC8C8; transition-delay:.4s; }
.landing-header .list-summary{ margin-top:56px; padding:24px 16px; display:flex; background-color:rgba(217, 217, 217, .8); border-radius:999px; color:#184209; transition-delay:.6s; }
.landing-header .list-summary > li{ flex:auto 1; }
.landing-header .list-summary > li:not(:first-child){ border-left:2px solid #222512; }
.landing-header .list-summary > li .tit{ margin-top:8px; font-size:18px; font-weight:700; }

/* cont01 */
.landing-cont01{ padding:100px 0; background-color:#071A00; }
.landing-cont01 .tit-landing{ margin-bottom:16px; }
.landing-cont01 .map-layout{ background-color:#fff; position:relative; font-size:14px; overflow:hidden; }
.landing-cont01 .map-layout .map-area{ padding-bottom:40%; position:relative; }
.landing-cont01 .map-layout .map-area > *{ width:100%; height:100%; position:absolute; top:0; left:0; right:0; bottom:0; }
.landing-cont01 .map-layout .btn{ height:40px; line-height:38px; -webkit-box-shadow:none; box-shadow:none; }
.landing-cont01 .map-layout .btn-selected{ background-color:#FFDA50; }
.landing-cont01 .map-layout .custom-typecontrol{ position:absolute; top:10px; right:10px; z-index:10; }
.landing-cont01 .map-layout .custom-zoomcontrol{ position:absolute; right:10px; bottom:10px; z-index:10; }
.landing-cont01 .map-layout .custom-zoomcontrol > .btn{ width:40px; height:40px; padding:0; display:flex; justify-content:center; align-items:center; }
.landing-cont01 .map-layout .custom-zoomcontrol > .btn:last-child{ margin-top:2px; }
.landing-cont01 .map-layout .custom-zoomcontrol > .btn img{ max-width:20px; }

/* cont02 */
.landing-cont02{ background:#071A00 url(//img.inclass.co.kr/about/gate/202208/klasseum/cont02_bg.png) 50% 50% no-repeat; background-size:cover; }
.landing-cont02 .tit-flex{ margin-bottom:48px; display:flex; align-items:center; }
.landing-cont02 .tit-flex .swiper-btn{ margin-left:auto; }
.landing-cont02 .tit-flex .swiper-btn > *{ width:50px; height:50px; border:1px solid #E6E6E6; box-shadow:0 1px 5px rgba(0, 0, 0, .15); }
.landing-cont02 .tit-flex .swiper-btn > *.btn-next{ margin-left:20px; }
.landing-cont02 .tit-flex .swiper-btn > * .ico-prev, .landing-cont02 .tit-flex .swiper-btn > * .ico-next{ width:22px; height:22px; }
.landing-cont02 .slide-info{ margin-bottom:100px; }
.landing-cont02 .review-layout{ padding:26px; display:flex; background:linear-gradient(100.57deg, #E1FDF3 0%, #B3FFE3 100%), #EEE1FD; border-radius:4px; box-shadow:0 4px 16px rgba(0, 0, 0, .25); align-items:center; }
.landing-cont02 .review-layout > .cont-area{ margin-left:26px; }
.landing-cont02 .review-layout > .cont-area .txt-landing{ font-weight:700; color:#000; }
.landing-cont02 .review-layout > .cont-area .txt{ margin:8px 0 16px; font-size:32px; }
.landing-cont02 .review-layout > .cont-area .txt-link{ font-size:16px; font-weight:700; color:#1C77FF; }
.landing-cont02 .logo-layout{ margin-top:32px; }
.landing-cont02 .logo-layout .flex-area{ justify-content:center; align-items:center; }
.landing-cont02 .logo-layout .flex-area > li{ width:calc( 20% - 16px ); flex:none; filter:grayscale(100%) saturate(50%); }
.landing-cont02 .logo-layout .flex-area > li.on{ filter:none; transition:all .5s ease-in-out; }

/* cont03 */
.landing-cont03{ padding:100px 0; background:#071A00 url(//img.inclass.co.kr/about/gate/202208/klasseum/cont03_bg.png) 50% 100% no-repeat; }
.landing-cont03 .list-tit{ display:flex; flex-wrap:wrap; }
.landing-cont03 .list-tit > dt{ width:246px; margin:50px 0; border-right:2px solid #9AFFC2;  }
.landing-cont03 .list-tit > dd{ width:calc( 100% - 246px ); margin:50px 0; padding-left:56px; }
.landing-cont03 .list-tit > dd .list-info{ font-size:32px; color:#CACACA; letter-spacing:-.02em; }
.landing-cont03 .list-tit > dd .list-info > li:not(:first-child){ margin-top:40px; }

/* fixed */
.fixed-bottom{ position:absolute; left:0; right:0; background:transparent; box-shadow:none; }
.fixed-bottom > .wide-layout{ padding:12px 0; background-color:#124200; border-radius:16px; }
.fixed-bottom .list-reserve{ display:flex; justify-content:center; align-items:center; }
.fixed-bottom .list-reserve > li{ width:222px; height:72px; max-width:100%; margin:0 12px; display:flex; background-color:#000; border-radius:16px;  font-size:15px; color:#fff; text-align:center; box-shadow:0 4px 16px rgba(0, 0, 0, .25); justify-content:center; align-items:center; }
.fixed-bottom .list-reserve > li .strong{ font-size:18px; }



/** Tablets **/
@media screen and (max-width:1328px){
    .landing-cont02 .review-layout > .cont-area .txt{ font-size:24px; }

    .landing-cont03 .list-tit > dt{ width:100%; margin:0 0 24px 0; padding-bottom:24px; border-right:none; border-bottom:2px solid #9AFFC2;  }
    .landing-cont03 .list-tit > dd{ width:100%; margin:0; padding-left:0; }
    .landing-cont03 .list-tit > dd + dt{ margin-top:100px; }
}


/** mobiles **/
@media screen and (max-width:767px){
    .landing-container .ico-clock{ width:20px; height:20px; }
    .landing-container .ico-card{ width:20px; height:20px; }
    .landing-container .ico-studio{ width:20px; height:20px; }
    .landing-container .ico-mappin{ width:20px; height:20px; }

    .tit-landing{ margin-bottom:16px; font-size:28px; }
    .txt-landing{ margin-bottom:16px; font-size:16px; }

    /* header */
    .landing-header{ padding:170px 0 70px; text-align:left; }
    .landing-header .txt-landing{ line-height:141%; padding:0 24px; margin-bottom:8px; font-size:14px; }
    .landing-header .tit-landing{ margin-bottom:32px; padding:0 24px; font-size:32px; }
    .landing-header .txt{ line-height:200%; padding:0 24px; font-size:13px; }
    .landing-header .list-summary{ margin-top:40px; padding:12px 8px; border-radius:999px; text-align:center; }
    .landing-header .list-summary > li:not(:first-child){ border-left-width:1px; }
    .landing-header .list-summary > li .tit{ margin-top:6px; font-size:10px; }

    /* cont01 */
    .landing-cont01{ padding:0 0 70px; }

    /* cont02 */
    .landing-cont02 .tit-flex{ margin-bottom:16px; }
    .landing-cont02 .tit-flex .swiper-btn > *{ width:40px; height:40px; }
    .landing-cont02 .tit-flex .swiper-btn > *.btn-next{ margin-left:8px; }
    .landing-cont02 .tit-flex .swiper-btn > * .ico-prev, .landing-cont02 .tit-flex .swiper-btn > * .ico-next{ width:18px; height:18px; }
    .landing-cont02 .slide-info{ margin-bottom:70px; }
    .landing-cont02 .review-layout{ padding:16px; }
    .landing-cont02 .review-layout > .img-area{ max-width:100px; }
    .landing-cont02 .review-layout > .cont-area{ margin-left:10px; }
    .landing-cont02 .review-layout > .cont-area .txt{ margin:4px 0 8px; font-size:15px; }
    .landing-cont02 .review-layout > .cont-area .txt-link{ font-size:11px; }

    .landing-cont02 .logo-layout{ margin-top:16px; }
    .landing-cont02 .logo-layout .flex-area > li{ width:auto; height:36px; max-width:calc( 50% - 16px ); }
    .landing-cont02 .logo-layout .flex-area > li img{ height:100%; }

    /* cont03 */
    .landing-cont03{ padding:70px 0; }
    .landing-cont03 .list-tit > dt{ width:100%; margin-bottom:16px; padding-bottom:16px; border-bottom-width:1px;  }
    .landing-cont03 .list-tit > dd{ width:100%; padding-left:0; }
    .landing-cont03 .list-tit > dd + dt{ margin-top:70px; }
    .landing-cont03 .list-tit > dd .list-info{ font-size:15px; }
    .landing-cont03 .list-tit > dd .list-info > li:not(:first-child){ margin-top:16px; }

    /* fixed */
    .fixed-bottom > .wide-layout{ margin:0 16px 8px; }
    .fixed-bottom .list-reserve{ padding:0 8px; }
    .fixed-bottom .list-reserve > li{ height:60px; margin:0 4px; font-size:10px; }
    .fixed-bottom .list-reserve > li .strong{ font-size:16px; }

}


/** mobiles xs **/
@media (max-width:320px) and (orientation:portrait){
    .landing-header .txt-landing, .landing-header .tit-landing, .landing-header .txt{ padding:0 8px; }
    .landing-header .txt{ font-size:12px; }

    .landing-cont02 .review-layout > .img-area{ max-width:80px; }
    .landing-cont02 .review-layout > .cont-area .txt-landing{ font-size:14px; }
    .landing-cont02 .review-layout > .cont-area .txt{ font-size:12px; }

    .fixed-bottom .list-reserve > li .strong{ font-size:14px; }
}