@charset "utf-8";
/* 메인 비주얼 */
.main-visual{position:relative;width:100%;overflow:hidden}
.main-visual .swiper-wrapper .swiper-slide{overflow:hidden;position:relative;height:620px;max-height:955px}
.main-visual .swiper-slide .image{position:absolute;top:0;left:50%;width:100%;max-width:1920px;height:100%;background:transparent no-repeat center/cover;transform:translateX(-50%)}
.main-visual .swiper-slide a{display:block;width:100%;height:100%;line-height:0;position:absolute;top:0;left:0}
.main-visual .swiper-slide .pic{position:relative;width:100vw;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05);-webkit-transition:all 1.5s cubic-bezier(.58,.36,.84,.87);-moz-transition:all 1.5s cubic-bezier(.58,.36,.84,.87);-ms-transition:all 1.5s cubic-bezier(.58,.36,.84,.87);-o-transition:all 1.5s cubic-bezier(.58,.36,.84,.87);transition:all 1.5s cubic-bezier(.58,.36,.84,.87)}
.main-visual .swiper-slide img{position:relative;top:0;left:50%;display:block;width:100%;max-width:120%;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0)}
.main-visual .swiper-slide-active .pic{-webkit-transform:scale(1.0);-ms-transform:scale(1.0);-moz-transform:scale(1.0);-o-transform:scale(1.0);transform:scale(1.0)}
.main-visual :is(.swiper-button-next,.swiper-button-prev){margin-top:-49px;width:58px;height:98px;width:140px;height:140px;text-align:center}
.main-visual .swiper-button-prev{right:auto;left:50%;margin-left:-780px}
.main-visual .swiper-button-next{left:50%;margin-left:640px}
.main-visual :is(.swiper-button-next:after,.swiper-button-prev:after){content:'';border:3px solid #c8c8c8;width:55px;height:55px;transform:rotate(-45deg)}
.main-visual .swiper-button-prev:after{border-right:none;border-bottom:none;margin-left:39px}
.main-visual .swiper-button-next:after{border-left:none;border-top:none;margin-right:39px}
/* .main-visual :is(.swiper-button-next:hover,.swiper-button-prev:hover){background:rgba(255,255,255,.5)} */
.main-visual :is(.swiper-button-next:hover:after,.swiper-button-prev:hover:after){border-color:var(--color-black,#000)}
.visual-text-box .text-box{font-size:40px;font-weight:700;color:var(--color-dark-gray,#333);letter-spacing:-.05em;line-height:1.7em}
.visual-text-box .text-box span{color:#0072A3}
.visual-text-box .text-box .small{font-size:20px;}

.visual-text-box{position:absolute;top:0;left:50%;width:100%;max-width:1200px;padding-bottom:114px; padding-left:6px; transform:translateX(-50%);height:100%;display:flex;flex-direction:column;justify-content:flex-end; align-items:flex-start;}
.main-visual .swiper-slide {background-color:#f1f6fd;}
.visual-text-box .title {line-height:56px; font-size:46px; font-weight:400; color:#00a2d6;}
.visual-text-box .title.sm {line-height:45px; font-size:30px;}
.visual-text-box .txt-box {display:flex; align-items:center; width:50%; min-height:76px; margin-top:19px; padding:10px 40px; line-height:22px; font-size:17px; font-weight:500; color:#313131; background:#fff; border-radius:40px;}
.visual-text-box .txt-box + .txt-box {margin-top:8px;}
.main-visual .visual-text-box .txt-box img {display:inline-block; position:static; width:auto; margin-right:30px; transform:none;}
.visual-text-box .btn-main {margin-top:30px;}

.main-visual .swiper-pagination{bottom:40px;font-size:0}
.main-visual .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:40px}
.main-visual .swiper-pagination .swiper-pagination-bullet{width:40px;height:8px;background:#ccc;border-radius:4px}
.main-visual .swiper-pagination .swiper-pagination-bullet-active{background:#0148d4}
.main-visual .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 2px}
@media only screen and (max-width:1500px) {
    .main-visual .swiper-wrapper .swiper-slide{height:44vw}
    .main-visual .swiper-slide .pic{width:100%}
    .main-visual .swiper-slide img{width:165%;max-width:200%}
    .main-visual .swiper-button-prev{left:0;margin-left:0}
    .main-visual .swiper-button-next{left:auto;right:0;margin-left:0}
    .main-visual .swiper-button-next,.main-visual .swiper-button-prev{width:70px;height:70px}
    .main-visual .swiper-button-next:after,.main-visual .swiper-button-prev:after{width:35px}
    .main-visual .swiper-button-next:after{margin-right:0}
    .main-visual .swiper-button-prev:after{margin-left:0}
    .visual-text-box .text-box{margin-left:3.7vw}
}
@media only screen and (max-width:1200px) {
    .visual-text-box .text-box{font-size:3.3vw;margin-left:5vw;letter-spacing:-.07em}
    .main-visual :is(.swiper-button-prev,.swiper-button-next):after{font-size:35px}
    .main-visual .swiper-wrapper .swiper-slide {height:max(420px, 44vw);}
    /* .visual-text-box {padding-top:15px; padding-left:15px; padding-bottom:60px; justify-content:center;} */
    
    .visual-text-box{padding-left:15px; padding-bottom:0;justify-content:center;}
    .visual-text-box .title {line-height:max(42px,4.667vw); font-size:max(34px,3.833vw);}
    .visual-text-box .title.sm {line-height:max(34px,3.750vw); font-size:max(23px,2.500vw);}
    .visual-text-box .txt-box {min-height:max(57px,6.333vw); margin-top:max(14px,1.583vw); padding:max(7px,0.833vw) max(30px,3.333vw); line-height:max(18px,1.833vw); font-size:max(13px,1.417vw);}
    .visual-text-box .txt-box + .txt-box {margin-top:max(6px,0.667vw);}
    .main-visual .visual-text-box .txt-box img {margin-right:max(23px,2.500vw);}
    .visual-text-box .btn-main {margin-top:max(23px,2.500vw);}
}
@media only screen and (max-width:768px) {
    .main-visual .swiper-wrapper .swiper-slide{height:420px}
    .main-visual .swiper-slide.mo-image{height:115.625vw}
    .visual-text-box{justify-content:flex-start;align-items:center}
    .visual-text-box .text-box{font-size:6.25vw;margin-top:11vw;margin-left:0;line-height:1.5em;letter-spacing:-.05em;text-align:center}
    .main-visual :is(.swiper-button-prev,.swiper-button-next){width:24px;display:none}
    .main-visual .swiper-button-prev{left:20px}
    .main-visual .swiper-button-next{right:20px}
    .main-visual .swiper-button-prev:after,.main-visual .swiper-button-next:after{background-size:100% auto}
    .main-visual .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:20px}
    .main-visual .swiper-pagination .swiper-pagination-bullet{width:6.5vw;max-width:40px;height:1.25vw;max-height:8px;min-height:5px}

    .visual-text-box{top:0;left:50%;width:100%;max-width:899px;padding:15px; justify-content:center;}
    .visual-text-box .title {line-height:40px; font-size:32px;}
    .visual-text-box .title.sm {line-height:30px; font-size:22px;}
    .visual-text-box .txt-box {width:100%; max-width:500px; min-height:57px; margin-top:14px; padding:7px 30px; line-height:16px; font-size:13px; border-radius:30px;}
    .visual-text-box .txt-box + .txt-box {margin-top:6px;}
    .main-visual .visual-text-box .txt-box img {width:33px; margin-right:22px;}
    .visual-text-box .btn-main {margin-top:22px;}
    .main-visual .swiper-slide .image {background-image:none !important;}
}
/*Popup*/
.main-popup-wrap.dim{position:fixed;top:0;left:0;bottom:0;right:0;z-index:110;width:100%;height:100%;background:rgba(0,0,0,.8)}
.main-popup{position:absolute;z-index:120;background-color:var(--color-white,#fff);line-height:20px}
.main-popup .popup-bottom{padding:3px 6px;background-color:var(--color-black,#000)}
.main-popup .popup-bottom .popup-bottom-inner{display:flex;justify-content:space-between}
.main-popup .popup-bottom label{color:var(--color-white,#fff);font-weight:700}
.main-popup .popup-bottom input[type="checkbox"]{margin:0}
.main-popup .popup-bottom .btn-close{color:var(--color-gray,#aaa)}
.main-popup.center{position:fixed;top:50%!important;left:50%!important;transform:translate(-50%,-50%)}
.main-popup .ck-content .image{margin:0}
.top-popup{position:relative;overflow-y:hidden}
.top-popup .popup-control{position:absolute;top:20%;right:10px;display:flex;align-items:center}
.top-popup .popup-control label{color:var(--color-dark-gray,#333)}
.top-popup .popup-control .close{position:relative;display:block;width:20px;height:20px;margin-left:7px;font-size:0}
.top-popup .popup-control .close:before,.top-popup .popup-control .close:after{content:'';position:absolute;top:50%;left:0;z-index:1;width:100%;height:1px;border-radius:5px;background:var(--color-dark-gray,#333)}
.top-popup .popup-control .close:before{transform:rotate(45deg)}
.top-popup .popup-control .close:after{transform:rotate(-45deg)}
@media only screen and (max-width:767px) {
    .top-popup .popup-control label{display:none}
    .top-popup .popup-control .close{width:30px;height:30px}
    .top-popup .popup-control .close:before,.top-popup .popup-control .close:after{height:2px}
}
.main-popup-wrap.dim {z-index:10000;}



.main-inner img {vertical-align:top;}
.main-inner {max-width:1200px; width:100%; margin:0 auto;}
.main-title {position:relative; padding-bottom:20px; line-height:40px; font-size:32px; font-weight:bold; color:#000; word-break:keep-all;}
.main-title:after {content:''; position:absolute; bottom:0; left:0; width:37px; height:1px; background:#b5b5b5;}
.main-title.font-center:after {left:50%; transform:translateX(-50%);}
.main-txt {line-height:24px; font-size:15px; color:#626262; word-break:keep-all;}
.main-txt02 {line-height:32px; font-size:24px; font-weight:bold; color:var(--color-dark-gray,#313131); word-break:keep-all;}
.main-inner .btn-area {display:flex;}
.btn-main {display:inline-block; padding-left:30px; padding-right:24px; line-height:47px; font-size:17px; font-weight:bold; text-align:center; color:#00a2d6; border:1px solid #00a2d6; border-radius:25px; background:#fff;}
.btn-main:after {content:''; display:inline-block; width:27px; height:9px; margin-left:10px; background:url(/html/_skin/1/images/main_tpl01/btn_arrow_sky.png) no-repeat center/contain; vertical-align:3px;}
.btn-main.sky {color:#fff; background:#00a2d6;}
.btn-main.sky:after {background-image:url(/html/_skin/1/images/main_tpl01/btn_arrow_white.png)}
.font-center {text-align:center;}
.font-sky {color:#00a2d6;}
/*현장목소리*/
.main-voice {position:relative; padding:109px 0 107px; z-index:1; overflow:hidden;}
.main-voice:before {content:''; position:absolute; bottom:0; left:50%; width:100vw; height:394px; background:#f7f7f7; transform:translateX(-50%); z-index:-1;}
.main-voice .main-txt {margin-top:15px;}
.main-voice .main-txt02 {margin-top:74px;}
.main-voice .list {display:flex; gap:36px; margin-top:67px;}
.main-voice .list li {position:relative}
.main-voice .list .image-box {aspect-ratio:377/221;}
.main-voice .list .txt-box {display:flex; align-items:center; justify-content:center; position:absolute; bottom:0; left:0; width:100%; height:42px; font-size:13px; font-weight:500; color:#fff; text-align:center; background:rgba(0,0,0,.65);}
.main-voice .list .txt-box .btn-play {padding:4px 22px 4px 28px; line-height:21px; font-size:13px; color:#fff; text-align:center; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.3); border-radius:20px;}
.main-voice .list .txt-box .btn-play:after {content:''; display:inline-block; width:11px; height:9px; margin-left:10px; background:url(/html/_skin/1/images/main_tpl01/voice_icon.png) no-repeat center/contain;}
.main-voice .btn-area {justify-content:center; margin-top:21px;}
/*메인 컨텐츠*/
.main-contents {padding:124px 0 101px;}
/*무료체험*/
.main-trial .main-txt strong {display:block; margin-top:22px; line-height:28px; font-size:18px; color:#434343;}
.main-trial .btn-area {justify-content:center; margin-top:30px;}
.main-trial .list {display:flex; gap:62px; margin-top:54px;}
.main-trial .list li {width:50%; border:1px solid #e6e6e6; border-radius:15px; overflow:hidden; box-shadow:0px 0px 25px 0px rgba(0,0,0,0.1);}
.main-trial .list .title-box {padding:20px 0 16px; background:#f5f9fc; text-align:center;}
.main-trial .list .title-box .number {font-size:16px; font-weight:500; color:#535353;}
.main-trial .list .title-box .title {margin-top:2px; font-size:18px; font-weight:bold; color:#00a2d6;}
.main-trial .list .cont-box {padding:33px 3px 5px; text-align:center;}
.main-trial .list .cont-box .title {line-height:34px; font-size:24px; font-weight:bold; color:#141414; word-break:keep-all;}
.main-trial .list .cont-box .txt {margin-top:5px; line-height:24px; font-size:15px; color:#626262; word-break:keep-all;}
.main-trial .list .cont-box .image-box {display:inline-block; margin-top:43px; text-align:center;}
.main-trial .list li:nth-child(2) .cont-box .image-box {margin-top:36px;}
/*앱 다운로드*/
.main-app {padding:115px 0 118px 88px; margin-top:112px; background:#f5f9fc url(/html/_skin/1/images/main_tpl01/app.png) no-repeat right 66px; border-radius:15px;}
.main-app .main-title {padding-bottom:28px;}
.main-app .main-txt {margin-top:8px; line-height:20px; font-size:13px;}
.main-app strong.main-txt {display:block; margin-top:19px; line-height:24px; font-size:16px; font-weight:bold; color:#434343; }
.main-app .btn-area {position:relative; left:-10px; margin-top:44px; gap:12px;}
/*무료체험 신청*/
.main-apply {padding:93px 0 70px calc(100% - 680px); margin-top:114px; border:1px solid #e3e3e3; border-radius:15px; background:url(/html/_skin/1/images/main_tpl01/apply_bg.jpg) no-repeat left;}
.main-apply .main-txt {margin-top:17px;}
.main-apply .apply-form {display:flex; align-items:flex-end; margin-top:37px; gap:27px;}
.main-apply .form-box li {display:flex; align-items:center;}
.main-apply .form-box li + li {margin-top:14px;}
.main-apply .form-box label {width:90px; font-size:16px; color:#626262;}
.main-apply .form-box input[type=text] {width:311px; padding:0 5px; line-height:31px; font-size:14px; color:#313131; border:1px solid #d4eff8; background:#f7f7f7;}
.main-apply .check-box {margin-left:90px; margin-top:10px;}
.main-apply .check-box input {position:absolute; width:0; height:0; appearance:none;}
.main-apply .check-box label {font-size:16px; color:#626262;}
.main-apply .check-box label:before {content:''; display:inline-block; width:21px; height:22px; margin-right:6px; border:1px solid #d4eff8; background:#f7f7f7; vertical-align:-5px;}
.main-apply .check-box input:checked + label:before {background:#00a2d6 url(../images/common/checkmark.png) no-repeat center/10px auto;}
.main-apply .btn-main {margin-bottom:48px;}
/*영상팝업*/
.popup-wrap.main-video .popup-inner {max-height:390px; padding:20px;}
.popup-wrap.main-video .popup-contents-wrap {margin-top:0;}
.popup-wrap.main-video iframe {width:100%; height:auto; aspect-ratio:560/315;}
.popup-wrap.main-video .close-popup {display:block; width:150px; margin:15px auto 0; line-height:40px; font-size:17px; font-weight:bold; text-align:center; color:#fff; background:#00a2d6; border-radius:25px; }

@media only screen and (max-width:1200px) {
    .main-inner {padding:0 15px;}
    /*현장목소리*/
    .main-voice .list {gap:2.24vw;}
    /*무료체험*/
    .main-trial .list {gap:3.229vw;}
    .main-trial .list .cont-box {padding:2.750vw 5.250vw 4.917vw;}
    /*앱 다운로드*/
    .main-app {padding:5vw 0 5.417vw 2.5vw; background-size:45vw;}
    /*무료체험 신청*/
    .main-apply {padding:6.917vw 0 5.000vw calc(100% - 580px); margin-top:9.5vw; background-size:contain;}
}
@media only screen and (max-width:1024px) {
}
@media only screen and (max-width:767px) {
    .main-title {padding-bottom:17px; line-height:31px; font-size:25px;}
    .main-title:after {width:31px; height:1px;}
    .main-txt {line-height:20px; font-size:13px;}
    .main-txt02 {line-height:24px; font-size:18px;}
    .btn-main {padding-left:22px; padding-right:18px; line-height:35px; font-size:13px;}
    .btn-main:after {width:18px; height:7px; margin-left:7px;}
    /*현장목소리*/
    .main-voice { padding:82px 0 80px; }
    .main-voice:before {height:329px;}
    .main-voice .main-txt {margin-top:11px;}
    .main-voice .main-txt02 {margin-top:55px;}
    .main-voice .list {gap:27px; margin-top:50px; flex-direction:column; align-items:center;}
    .main-voice .list .txt-box { height:31px; font-size:12px;}
    .main-voice .list .txt-box .btn-play {padding:3px 16px 3px 21px; line-height:16px; font-size:12px;}
    .main-voice .list .txt-box .btn-play:after {width:8px; height:7px; margin-left:7px;}
    .main-voice .btn-area {margin-top:16px;}
    /*메인 컨텐츠*/
    .main-contents {padding:93px 0 76px;}
    /*무료체험*/
    .main-trial .main-txt strong { margin-top:16px; line-height:21px; font-size:13px; }
    .main-trial .btn-area {margin-top:22px;}
    .main-trial .list { gap:46px; margin-top:40px; flex-direction:column; align-items:center;}
    .main-trial .list li {width:84%; max-width:400px; border-radius:12px;  box-shadow:0px 0px 19px 0px rgba(0,0,0,0.1);}
    .main-trial .list .title-box {padding:15px 0 12px; }
    .main-trial .list .title-box .number {font-size:12px;  }
    .main-trial .list .title-box .title {margin-top:2px; font-size:14px;  }
    .main-trial .list .cont-box {padding:25px 37px 10px; }
    .main-trial .list .cont-box .title {line-height:25px; font-size:18px;  ;}
    .main-trial .list .cont-box .txt {margin-top:4px; line-height:18px; font-size:12px; }
    .main-trial .list .cont-box .image-box { margin-top:32px; }
    .main-trial .list li:nth-child(2) .cont-box .image-box {margin-top:27px;}
    /*앱 다운로드*/    
    .main-app {padding:20px 20px min(54vw, 300px); margin-top:84px; border-radius:12px; background-position-y:bottom; background-size:min(80vw, 450px);}
    .main-app .main-title {padding-bottom:21px;}
    .main-app .main-txt {margin-top:6px; line-height:19px; font-size:12px;}
    .main-app strong.main-txt { margin-top:14px; line-height:20px; font-size:13px;   }
    .main-app .btn-area { left:-7px; margin-top:33px; gap:9px;}
    .main-app .btn-area a img {width:130px;}
    /*무료체험 신청*/
    .main-apply {padding:20px; margin-top:85px; border-radius:12px; background:none;}
    .main-apply .main-txt {margin-top:13px;}
    .main-apply .apply-form {margin-top:28px; flex-wrap:wrap; justify-content:center; gap:20px;}
    .main-apply .form-box li + li {margin-top:10px;}
    .main-apply .form-box label {width:75px; font-size:13px; flex-shrink:0;}
    .main-apply .form-box input[type=text] {width:100%; padding:0 4px; line-height:23px; font-size:12px;}
    .main-apply .check-box {margin-left:75px; margin-top:4px;}
    .main-apply .check-box label {font-size:13px; }
    .main-apply .check-box label:before {  width:18px; height:18px; margin-right:5px;}
    .main-apply .check-box input:checked + label:before {background-size:8px auto;}
    .main-apply .btn-main {margin-bottom:40px;}
    /*영상팝업*/
    .popup-wrap.main-video .popup-inner {height:62vw; padding:15px;}
    .popup-wrap.main-video .close-popup {width:120px; line-height:34px; font-size:15px;}
}