/* reset, common */
body{overflow-x: hidden;}
#container:after{display: none;}
#container{padding: 0; min-width: 1200px; max-width:1920px; margin: 0 auto; text-align: unset;}
#container .innerBox{width: 1200px; margin: 0 auto; position: relative;}
#container *{font-family: 'Pretendard', sans-serif;}
#container img{vertical-align:top;}
button{padding: 0; margin: 0;}

article{line-height: 1.2; letter-spacing: -0.025em;}
.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%);}

:root {
  --color-basic: #181818;
  --color-1: #393b44;
  --color-2: #002aff;
  --color-3: #85a2ff;
  --color-4: #00f2ff;
  --txc-gray: #999;
}
.txc-basic{color: var(--color-basic) !important;}
.txc-1{color: var(--color-1) !important;}
.txc-2{color: var(--color-2) !important;}
.txc-3{color: var(--color-3) !important;}
.txc-4{color: var(--color-4) !important;}
.txc-gray{color: var(--txc-gray) !important;}

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

.cont-tit{color: #181818; font-size: 70px; font-weight: 700; line-height: 1.2em;}
.cont-tit .sub{position: absolute; color: #3b6bff; font-size: 18px; letter-spacing: 0.1em;}


/* button */
.btn-apply{padding: 24px 48px; font-size: 24px; font-weight: 700; line-height: 1;}
.btn-apply.btn-type01{color: #fff; background: linear-gradient(to bottom, #002aff 0%, #002aff 70%, #080808 100%); background-size: 100% 330%; background-position: 0 100%; transition: background-position 0.4s, box-shadow 0.4s;}
.btn-apply.btn-type01:hover{background-position: 0 0; box-shadow: 0 3px 20px rgba(0, 42, 255, .5);}
.btn-apply.btn-type02{color: #fff; background: linear-gradient(to bottom, #002aff 0%, #002aff 85%, #fff 100%); background-size: 100% 330%; background-position: 0 100%; transition: background-position 0.4s, box-shadow 0.4s;}
.btn-apply.btn-type02:hover{background-position: 0 0; box-shadow: 0 3px 20px rgba(0, 42, 255, .5);}
.btn-apply.btn-link{display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0; width: 330px; height: 70px;}

/* visual */
.visual_wrap{background: url('img/bg_visual.jpg') center top no-repeat; position: relative;}
.visual_wrap .cont-tit{position: absolute; left: 0; top: 200px; width: 100%; text-align: center;}
.visual_wrap .sub-wrap{
  display: flex; justify-content: space-between; position: absolute; left: 80px; top: 442px;
  width: 1050px;
}
.visual_wrap .question-box, .visual_wrap .answer-box {
  width: 420px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;		
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  padding: 0 20px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.visual_wrap .question-box {
  color: #1c1f2a;
  background: #666f8a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.visual_wrap .answer-box {
  color: white;
  background: radial-gradient(ellipse at top, #2948e4 50%, #fff 100%);            
  box-shadow: 0 4px 12px rgba(91, 127, 255, 0.3);
}


/* cont01 */
.cont01{background-color: #f7f9fe; color: #393b44;}

/* cont02 */
.cont02{background: url('img/bg_02.jpg') center top no-repeat; padding: 120px 0;}
.cont02 .cont-tit .txt-rgt{transition: padding-left 0.5s;}
.cont02 .cont-tit .txt-lft{position: relative;}
.cont02 .cont-tit .txt-lft::before{display: block; position: absolute; bottom: 17px; left: 1px; width: 58px; height: 8px; transition: width 0.5s; background-color: #fff; content: '';}
.cont02 .m-act .cont-tit .txt-lft::before{width: 137px; transition-delay: 0.3s;}
.cont02 .m-act .cont-tit .txt-rgt{padding-left: 75px; transition-delay: 0.3s;}

/* cont03 */
.cont03{background-color: #181818; padding: 60px 0;}
.cont03 .info-item{display: flex; align-items: flex-end; color: #fff; font-size: 22px; font-weight: 500;}
.cont03 .info-item:not(:first-child){margin-top: 20px;}
.cont03 .info-item dt{width: 150px;}
.price-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.price-original {
  color: #8e8e8e;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.price-original::after {
  content: " →";
}

/* cont04 */
.cont04{background: url('img/bg_04.jpg') center top no-repeat; padding: 120px 0;}
.intro-slide .swiper{padding-left: 40px;}
.intro-slide .swiper-slide{width: 720px;}

/* cont05 */
.cont05{padding: 120px 0;}
.highlight {
  background: linear-gradient(to top, #ccd4ff 100%);
  padding: 0 4px;
}

/* cont06 */
.cont06{background: #070707 url('img/bg_06.jpg') center top no-repeat; padding: 120px 0;}
.cont06 .item-wrap{
  display: flex; align-items: flex-end; justify-content: space-between;
  position: absolute; top: 0; left: 0; width: 100%;
}
.cont06 .item-wrap .item-box{
  width: 360px; height: 140px; padding: 25px 30px; margin-bottom: 26px;
  box-sizing: border-box;
}
.cont06 .item-wrap .item-box .tit{color: var(--color-2); font-size: 26px; font-weight: 700; margin-bottom: 10px;}
.cont06 .item-wrap .item-box .txt{color: #333; font-size: 20px;}

/* cont07 */
.cont07{background: url('img/bg_07.jpg') center top no-repeat; height: 1070px; padding: 120px 0; box-sizing: border-box;}
.cont07 .roll-swiper{position: relative; width: 728px; height: 800px;}
.cont07 .roll-swiper::before,
.cont07 .roll-swiper::after{content:''; position: absolute; left: 0; width: 100%; height: 120px; z-index: 2; pointer-events: none;}
.cont07 .roll-swiper::before{top: 0; background: linear-gradient(to bottom, #000, transparent);}
.cont07 .roll-swiper::after{bottom: 0; background: linear-gradient(to top, #000, transparent);}
.cont07 .roll-swiper .swiper{width: 100%; height: 100%;}
.cont07 .roll-swiper .swiper-slide{height: auto;}
.cont07 .roll-swiper .swiper-wrapper{transition-timing-function: linear !important;}

/* cont08 */
.cont08{padding: 120px 0;}
.pofol-slide{position: relative; width: 940px; margin: 0 auto;}
.pofol-slide .swiper-button-prev{left: -60px; color: #181818;}
.pofol-slide .swiper-button-next{right: -60px; color: #181818;}
.pofol-slide .swiper-button-prev svg,
.pofol-slide .swiper-button-next svg{display: block;}

/* with-itbank */
.cont09{background-color: #f1f2f8; padding: 120px 0;}
.with-itbank .box-wrap{display: flex; align-items: center; gap: 22px; position: relative;}
.with-itbank .box-wrap p{color: #333; font-size: 30px; font-weight: 500; white-space: nowrap;}
.with-itbank .box-wrap .box{overflow: hidden; width: 320px; padding: 140px 0 30px; color: #333; text-align: center; background: no-repeat;}
.with-itbank .box-wrap .box01{background-image: url('./img/sub/withitbank_card_01.png');}
.with-itbank .box-wrap .box02{background-image: url('./img/sub/withitbank_card_02.png');}
.with-itbank .box-wrap .box03{background-image: url('./img/sub/withitbank_card_03.png');}
.with-itbank .box-wrap .box04{background-image: url('./img/sub/withitbank_card_04.png');}
.with-itbank .box-wrap .box05{background-image: url('./img/sub/withitbank_card_05.png');}
.with-itbank .box-wrap .box06{background-image: url('./img/sub/withitbank_card_06.png');}
.with-itbank .box-wrap .box .tit{font-size: 24px; font-weight: 600; margin-bottom: 5px;}
.with-itbank .box-wrap .box .txt{font-size: 16px; font-weight: 300;}
.with-itbank .box-wrap::before{display: block; position: absolute; width: 0; height: 3px; background-color: #fff; transition: width 0.4s; content: '';}
.with-itbank .box-wrap.wrap01::before{top: 123px; left: 2px; transform: translateX(-100%); transition-delay: 0.5s;}
.with-itbank .box-wrap.wrap02{margin-top: 18px;}
.with-itbank .box-wrap.wrap02::before{top: 118.5px; right: 4.5px; transform: translateX(100%); transition-delay: 0.5s;}
.with-itbank .m-act .box-wrap::before{width: 50%;}


/* faq */
.faq-wrap{margin-top: 80px;}
.faq-wrap .faq-box{margin-bottom: 5px; background-color: #f1f2f8; border-radius: 20px;}
.faq-wrap .inner{display: flex; padding: 20px; text-align: left;}
.faq-wrap .q-box .inner::before{display: block; width: 46px; height: 46px; background: url('./img/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: 26px; 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: 30px; right: 40px; width: 25px; height: 25px; background: url('./img/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: 15px;}
.faq-wrap .a-box .inner{padding: 20px 0; margin: 0 20px; border-top: 2px solid #e2e4f3;}
.faq-wrap .a-box .inner::before{display: block; width: 46px; height: 46px; background: url('./img/ico_faq_a.png') center no-repeat; margin-right: 22px; content: ''; flex-shrink:0;}
.faq-wrap .a-box .txt-area{color: #181818; font-weight: 400; font-size: 22px; line-height: 1.5em; word-break:keep-all;}


/* floating */
.flt-banr{position: fixed; width: 100%; bottom: 0; left: 0; background: url('./img/bg_floating.jpg') center top no-repeat; z-index: 10; transform: translateY(100%); box-shadow: 0 -5px 30px rgba(0,0,0,.2); transition: transform 1s;}
.flt-banr .btn-flt{overflow: hidden; position: absolute; bottom: 0; right: 0; width: 430px; height: 100%; text-indent: -999em; border-radius: 8px;}
.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/ico_close.png') center no-repeat;}
.modal-pop-wrap .modal-box .tit{color: var(--color-2); font-size: 24px; text-align: center; font-weight: 700; white-space: nowrap;}
.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: var(--color-2); 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;}