/* reset, common */
body{overflow-x: hidden;}
#container{background-color: #eff7ff;}
#container:after{display: none;}
#container{padding: 0; max-width:1920px; margin: 0 auto; text-align: unset;}
#container .innerBox{width: 1200px; margin: 0 auto; position: relative; background-size:1px 100%; }
#container *{font-family: 'Pretendard', sans-serif; letter-spacing: -0.025em;}
#container img{vertical-align:top;}
button{background: none; border: none; cursor: pointer; padding: 0;}

article{line-height: 1.2; letter-spacing: -0.025em;}
article:after{display: none;}
.txt-hide {overflow: hidden; border: 0; position: absolute; z-index:-1; width:1px; height:1px; clip: rect(1px, 1px, 1px, 1px); clip-path:inset(50%);}
.pos-rel {position: relative;}
.pos-abs {position: absolute;}
.pos-cen {position: absolute; left: 50%; transform:translateX(-50%);}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb15{margin-bottom: 15px !important;}
.mb20{margin-bottom: 20px !important;}
.mb25{margin-bottom: 25px !important;}
.mb30{margin-bottom: 30px !important;}
.mb50{margin-bottom: 50px !important;}
.mb70{margin-bottom: 70px !important;}
.mb80{margin-bottom: 80px !important;}
.mb100{margin-bottom: 100px !important;}
.p0{padding: 0 !important;}
.pb220{padding-bottom: 220px !important;}
.pb240{padding-bottom: 240px !important;}

.flex{display: flex;}
.flex-col{flex-direction: column !important;}
.justify-center{justify-content: center;}
.justify-between{justify-content: space-between;}
.justify-around{justify-content: space-around;}
.justify-start{justify-content: flex-start;}
.justify-end{justify-content: flex-end;}
.items-center{align-items: center;}
.items-start{align-items: flex-start;}
.items-end{align-items: flex-end;}
.flex-wrap{flex-wrap: wrap;}
.shrink-0{flex-shrink: 0 !important;}
.gap-20{gap: 20px;}
.gap-40{gap: 40px;}

.a-shadow{transition: box-shadow 0.4s;}
.a-shadow:hover{box-shadow:0 5px 15px rgba(0,0,0,.6);}

.ta-c{text-align: center !important;}
.ta-l{text-align: left !important;}
.ta-r{text-align: right !important;}
.fw-l{font-weight: 300 !important;}
.fw-n{font-weight: 400 !important;}
.fw-m{font-weight: 500 !important;}
.fw-sb{font-weight: 600 !important;}
.fw-b{font-weight: 700 !important;}
.fw-exb{font-weight: 900 !important;}

.fz-20{font-size: 20px !important;}
.fz-22{font-size: 22px !important;}
.fz-36{font-size: 36px !important;}


/* bg */
.visual-wrap{background: url('./img/bg_visual.jpg') no-repeat top center; position: relative;}
.cont01{background: url('./img/bg_01.jpg') no-repeat top center;}
.cont02{background: url('./img/bg_02.jpg') no-repeat top center;}
.cont03{background: url('./img/bg_03.jpg') no-repeat top center;}
.cont04{background-color: #adcbea; padding-bottom: 120px;}
.cont05{background: url('./img/bg_05.jpg') no-repeat top center;}
.cont06{background-color: #fff;}
.cont07{background-color: #eff7ff; padding-bottom: 120px;}
.cont08{background-color: #eff7ff; padding-bottom: 120px;}


/* cont */
canvas {
  width: 100%;
  height: 75%;
  position: absolute; top: 0; left: 0; z-index: 1;
}

.visual-wrap .txt1{color: #202020; font-size: 40px; line-height: 1.35em; top: 100px; right: 160px;}
.visual-wrap .txt2{color: #e8381c; font-size: 30px; top: 420px; left: 340px;}
.visual-wrap .txt3{color: #27629f; font-size: 30px; font-style:italic; top: 460px; left: 530px;}
.visual-wrap .txt6{color: #242424; font-size: 36px; bottom: 250px;}
.visual-wrap .box-wrap{position: absolute; bottom: 454px; left: 342px; display: flex; gap: 5px;}
.visual-wrap .box-wrap .cnt-box{width: 280px; text-align: center;}
.visual-wrap .box-wrap .txt4{color: #242424; font-size: 24px;}
.visual-wrap .box-wrap .txt5{color: #fff; font-size: 30px; font-weight: 700; margin-top: 7px;}
.visual-wrap .em{color: #8995ef;}
.visual-wrap .em2{color: #e8381c;}
.visual-wrap .btn-pop{bottom: 113px; width: 600px; height: 116px;}

.cont01 .box-wrap{display: flex; align-items:flex-start; position: absolute; top: 255px; left: -4px;}
.cont01 .box-wrap .sub{margin: 0 -15px;}
.cont01 .box-wrap .sub:nth-child(2n){margin-top: 50px;}

.cont02 .lec-wrap{position: absolute; left: 0; bottom: 160px; width: 100%; height: 555px;}
.cont02 .lec-wrap .lec-box{display: flex; align-items:flex-end; position: absolute; width: 100%; height: 100%;}
.cont02 .lec-wrap .lec-box .tit{flex-shrink :0;}
.cont02 .lec-wrap .lec-box ul{padding-bottom: 101px; margin-left: -24px;}
.cont02 .lec-wrap .lec-box ul li{display: flex; align-items:center; justify-content: center; width: 600px; height: 92px; margin-top: 21px; color: #18565f; font-size: 26px; font-weight: 500;}

.cont03 .txt {position: absolute; color: #111; font-size: 22px; font-weight: 400; line-height: 1.3em; text-align: center;}
.cont03 .txt1{top: 284px; left: 450px;}
.cont03 .txt2{top: 434px; left: 33px;}
.cont03 .txt3{top: 630px; left: 80px;}
.cont03 .txt4{top: 532px; right: 89px;}
.cont03 .txt5{top: 384px; right: 30px;}
.cont03 .btn-pop{position: absolute; left: 344px; bottom: 118px; width: 510px; height: 120px; border-radius: 20px;}

.review-slide .swiper-slide{width: 394px; height: 303px;}
.review-slide .card-box{width: 100%; height: 100%; text-align: center; padding-top: 115px; box-sizing: border-box;}
.review-slide .card-box .txt1{color: #000; font-size: 32px; font-weight: 700; margin-bottom: 10px;}
.review-slide .card-box .txt2{color: #555; font-size: 22px; font-weight: 500;}
.review-slide .card-box.card-1{background: url('./img//sub/bg_card_01.png') center top no-repeat;}
.review-slide .card-box.card-2{background: url('./img//sub/bg_card_02.png') center top no-repeat;}
.review-slide .card-box.card-3{background: url('./img//sub/bg_card_03.png') center top no-repeat;}

.cont05 ul{position: absolute; top: 250px; left: -4px; display: flex; justify-content: center;}
.cont05 ul li{width: 332px; height: 312px; margin: 0 -15px; text-align: center; padding-top: 140px; box-sizing: border-box;}
.cont05 ul li:nth-child(1){background: url('./img/sub/bg_cnt_05_card_01.png');}
.cont05 ul li:nth-child(2){background: url('./img/sub/bg_cnt_05_card_02.png');}
.cont05 ul li:nth-child(3){background: url('./img/sub/bg_cnt_05_card_03.png');}
.cont05 ul li:nth-child(4){background: url('./img/sub/bg_cnt_05_card_04.png');}
.cont05 ul li .txt1{color: #3481cf; font-size: 22px; font-weight: 700; margin-bottom: 10px;}
.cont05 ul li .txt2{color: #333; font-size: 20px; font-weight: 400;}

.cont06 .benefit-wrap{position: relative; height: calc(100vh - 150px); min-height: 958px;}
.cont06 .benefit-wrap .cnt-box{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.cont06 .benefit-wrap .cnt-box img{display: block; width: 100%; height: 100%; object-fit: contain;}
.cont06 .benefit-wrap .navi-box{position: absolute; top: 50%; left: -100px; transform: translateY(-50%);}
.cont06 .benefit-wrap .navi-box .bar{position: absolute; top: 0; right: 0; width: 6px; height: 10%; background-color: #3f87d0; border-radius: 3px;}
.cont06 .btn-pop{position: absolute; top: 50%; right: 50px; width: 280px; height: 165px;}
.cont06 .btn-pop .sub1{top: 110px; right: 30px; pointer-events: none; width: unset !important; height: unset !important;}
.cont06 .btn-pop .sub2{top: 135px; right: 3px; width: unset !important; height: unset !important; animation: ani-bounce .7s infinite alternate; pointer-events: none;}
.cont06 .btn-pop:hover .sub1{animation: ani-spin 5s infinite linear;}
@keyframes ani-bounce {
  100%{
    transform: translate(10px, 10px);
  }
}
@keyframes ani-spin {
  100%{
    transform: rotate(360deg);
  }  
}

.cont07 .box-wrap{display: flex; align-items: center; gap: 13px; position: relative;}
.cont07 .box-wrap p{color: #32567b; font-size: 30px; font-weight: 600; white-space: nowrap;}
.cont07 .box-wrap .box{overflow: hidden; width: 320px; padding: 140px 0 30px; color: #333; text-align: center; background: #fff center top no-repeat; border-radius: 20px;}
.cont07 .box-wrap .box01{background-image: url('./img/sub/cnt07_box_01.png');}
.cont07 .box-wrap .box02{background-image: url('./img/sub/cnt07_box_02.png');}
.cont07 .box-wrap .box03{background-image: url('./img/sub/cnt07_box_03.png');}
.cont07 .box-wrap .box04{background-image: url('./img/sub/cnt07_box_04.png');}
.cont07 .box-wrap .box05{background-image: url('./img/sub/cnt07_box_05.png');}
.cont07 .box-wrap .box06{background-image: url('./img/sub/cnt07_box_06.png');}
.cont07 .box-wrap .box .tit{font-size: 24px; font-weight: 600; margin-bottom: 5px;}
.cont07 .box-wrap .box .txt{font-size: 16px; font-weight: 300;}

.cont08 .txt1{color: #555; font-size: 36px; font-weight: 600;}
.cont08 .btn-link{width: 260px; height: 60px; background: url('./img/sub/btn_link.png') center no-repeat; border-radius: 10px; margin-left: 35px;}

/* faq */
.faq-wrap .faq-box{margin-bottom: 10px; background-color: #fff; border-radius: 20px;}
.faq-wrap .inner{display: flex; padding: 20px; text-align: left;}
.faq-wrap .q-box .inner::before{display: block; width: 40px; height: 40px; background: url('./img/sub/ico_faq_q.png') center no-repeat; margin-right: 22px; content: ''; flex-shrink:0;}
.faq-wrap .q-box{display: block; position: relative;}
.faq-wrap .q-box .tit{color: #333; font-size: 22px; font-weight: 500; line-height: 1.2em; word-break:keep-all; padding: 7px 55px 7px 0;}
.faq-wrap .q-box::after{display: block; position: absolute; top: 26px; right: 40px; width: 27px; height: 27px; background: url('./img/sub/ico_arrow.png') center no-repeat; transition: transform 0.4s; content: '';}
.faq-wrap .q-box.act::after{transform: rotate(180deg);}
.faq-wrap .a-box{display: none; padding-bottom: 40px;}
.faq-wrap .a-box .inner{padding: 0 80px;}
.faq-wrap .a-box .txt-area{padding-top: 30px; color: #666; font-weight: 400; font-size: 18px; line-height: 1.5em; word-break:keep-all; border-top: 2px solid #adcbea; flex-grow: 1;}

/* floating */
.flt-banr{position: fixed; width: 100%; bottom: 0; left: 0; background-color: #468cd3; z-index: 10; transform: translateY(100%); transition: transform 1s;}
.flt-banr .btn-flt{overflow: hidden; position: absolute; bottom: 0; right: 0; width: 530px; height: 120px; text-indent: -999em; border-radius: 40px 40px 0 0;}
.flt-banr.act{transform: translateY(0);}

/* modal-pop */
.modal-pop-wrap{display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.7); z-index: 999;}
.modal-pop-wrap .modal-container{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.modal-pop-wrap .modal-box{display: none; position: relative; width: 380px; padding: 40px; color: #000; background-color: #fff; border-radius: 20px; box-sizing: border-box;}
.modal-pop-wrap .modal-box .btn-x{display: block; position: absolute; top: 20px; right: 20px; width: 25px; height: 25px; background: url('./img/sub/ico_close.png') center no-repeat;}
.modal-pop-wrap .modal-box .tit{color: #107ce9; font-size: 24px; text-align: center; font-weight: 700;}
.modal-pop-wrap .modal-box p.sub{font-size: 14px; text-align: center; margin-top: 10px;}
.modal-pop-wrap .modal-box .agree-area .mid{padding: 8px 10px; color: #353535; font-size: 12px; margin-bottom: 8px; background-color: #c2c2c2;}
.modal-pop-wrap .modal-box .btn-submit{width: 100%; height: 54px; color: #fff; font-size: 24px; font-weight: 700; background-color: #fb2200; text-align: center; border-radius: 10px;}

/* input */
.input-area{margin: 20px 0;}
.input-area > label{display: block; font-size: 14px; margin-bottom: 8px;}
.input-area > label .red{color: #ff6a6a;}
.input-area input[type="text"]{width: 100%; height: 44px; padding-left: 15px; font-size: 14px; border: 1px solid #e4e4e4; border-radius: 8px; box-sizing: border-box;}
.check-list-wrap{display: flex; flex-wrap:wrap; gap: 10px;}
.check-list-wrap .check-area{padding-right: 15px;}
.check-area{display: flex; gap: 7px;}
.check-area input[type="checkbox"]{width: 16px; height: 16px; margin: 0;}
.check-area > label{font-size: 14px;}
.check-area > label small{color: #c2c2c2; font-size: 12px;}
.radio-area {display: flex; gap: 7px; margin: 10px 0;}
.radio-area input[type="radio"]{width: 16px; height: 16px; margin: 0;}
.radio-area > label{font-size: 14px;}