/* 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; background-color: #151622;}
#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-1: #adafcd;
  --txc-gray: #999;
}
.txc-1{color: var(--color-1) !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 .sub{position: absolute; color: #3b6bff; font-size: 18px; letter-spacing: 0.1em;}
.cont-tit .sub.left{top: 42px; left: -18px; transform: translateX(-100%);}
.cont-tit .sub.top{left: 0; top: -12px; transform: translateY(-100%);}
.cont-tit .txt{position: relative; color: #fff; font-size: 76px; font-weight: 700; line-height: 1.2em; padding-top: 8px; border-top: 1px solid #fff;}
.cont-tit .txt .line{position: absolute; top: 0; left: 0; height: 5px; background-color: #fff;}


/* button */
.btn-v{position: absolute; top: 1px; left: 16px; width: 322px; height: 59px;}
.btn-2{position: absolute; bottom: 120px; left: 343px; width: 515px; height: 90px;}
.btn-6{position: absolute; top: 1px; left: 23px; width: 515px; height: 90px;}
.btn-link{position: absolute; top: 1px; left: 23px; width: 515px; height: 90px;}


/* visual */
.visual_wrap{background: url('img/bg_visual.jpg') center top no-repeat; position: relative;}
.visual_wrap .v-layer{position: absolute; top: 0; left: 50%;
  animation: blink-1 1.5s infinite both;
}
.visual_wrap .txt-box{position: absolute; top: 100px; left: 0; z-index: 2;}
.visual_wrap .txt-box .tit{position: relative; margin-left: -65px;}
.visual_wrap .txt-box .tit h2{position: absolute; top: 116px; left: 465px; color: #999; font-size: 24px; font-weight: 400; line-height: 1.4em;}

@keyframes blink-1 {
  0%,  50%,
  70%, 100% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}


/* cont02 */
.cont02{background: url('./img/bg_02.jpg') center top no-repeat;}
.cont02 .cont-tit{position: absolute; top: 100px; left: 0; width: 100%;}
.cont02 ul{position: absolute; top: 259px; left: 0; width: 100%;}
.cont02 ul li{display: flex; align-items: center; justify-content: center; height: 107px; color: #adafcd; font-size: 28px; text-align: center;}
.cont02 ul li:first-child{height: 130px;}


/* cont03 */
.cont03{background: url('./img/bg_03.jpg') center top no-repeat;}
.what-slide{width: 600px;}
.what-slide .swiper-pagination{display: flex; gap: 5px; position: unset; margin-top: 12px;}
.what-slide .swiper-pagination .swiper-pagination-bullet{
  flex-grow: 1; flex-basis: 0; width: auto; height: auto; margin: 0; background-color: transparent; opacity: 0.4; border-radius: 0;
  color: #fff; font-size: 10px; line-height: 14px; letter-spacing: 0.2em; border-bottom: 1px solid #fff; box-sizing: border-box;
}
.what-slide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity: 1; color: #151622; font-weight: 700; background-color: #fff;}


/* cont04 */
.review-slide{width: 100%; margin-top: 55px;}
.review-slide .swiper-slide{width: 384px; min-height: 400px; padding-bottom: 20px; background: linear-gradient(180deg,#353649 60%, #56467e 100%); box-sizing: border-box;}
.review-slide .swiper-slide .logo-box{display: flex; align-items: center; justify-content: center; width: 260px; height: 60px; background-color: #fff; margin: 0 auto;}
.review-slide .swiper-slide .txt-box{margin-top: 40px; padding: 0 15px; color: var(--color-1); font-size: 16px; text-align: center;}
.review-slide .swiper-slide .txt-box h3{color: #fff; font-size: 22px; font-weight: 700; margin-bottom: 20px;}
.review-slide .swiper-slide .txt-box h4{word-break: keep-all; font-weight: 400; line-height: 1.4em;}
.review-slide .swiper-slide .txt-box h4 strong{font-weight: 700;}
.review-slide .swiper-slide .txt-box .writer{margin-top: 20px; font-weight: 700;}


/* cont05 */
.cont05{background: url('./img/bg_05.jpg') center top no-repeat; overflow: hidden; padding: 140px 0;}
.cont05 .innerBox{width: calc(100% - (100% - 1200px)/2) !important; margin: 0 !important; margin-left: calc((100% - 1200px)/2) !important;}
.pofol-slide{position: relative; flex-shrink: 0; margin-right: 75px;}
.pofol-slide .swiper-pagination{transform: translateX(100%); width: auto; left: unset; right: -75px; bottom: 0;}
.pofol-slide .swiper-pagination .swiper-pagination-bullet{
  display: block; position: relative; width: auto; height: auto; margin-top: 10px; padding-left: 38px; background: none; opacity: 0.4; border-radius: 0;
  color: #fff; font-size: 10px; text-align: left; letter-spacing: 0.2em; box-sizing: border-box;
}
.pofol-slide .swiper-pagination .swiper-pagination-bullet::after{display: block; position: absolute; top: 50%; left: 0; width: 10px; height: 2px; background-color: #fff; transform: translateY(-50%); content: '';}
.pofol-slide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{color: #3b6bff; opacity: 1;}
.pofol-slide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before{display: inline-block; margin-right: 5px; content: 'PORTFOLIO';}
.pofol-slide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after{width: 30px; height: 4px; background-color: #3b6bff;}
.cont05 .rgt{flex-grow: 1; padding-top: 30px;}


/* with-itbank */
.with-itbank .box-wrap{display: flex; align-items: center; gap: 22px; position: relative;}
.with-itbank .box-wrap p{color: #fff; font-size: 30px; font-weight: 600; white-space: nowrap;}
.with-itbank .box-wrap .box{overflow: hidden; width: 320px; padding: 140px 0 30px; color: #333; text-align: center; background: #e7e7e7 center top 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 .faq-box{border-bottom: 1px solid #353649;}
.faq-wrap .inner{display: flex; padding: 20px; text-align: left;}
.faq-wrap .q-box .inner::before{display: block; margin-right: 10px; color: #fff; font-size: 28px; line-height: 1.2em; content: 'Q.'; flex-shrink:0;}
.faq-wrap .q-box{display: block; position: relative; transition: box-shadow 0.4s;}
.faq-wrap .q-box .tit{color: #fff; font-size: 28px; font-weight: 500; line-height: 1.2em; word-break:keep-all;}
.faq-wrap .a-box{display: none; transition: box-shadow 0.4s;}
.faq-wrap .a-box .inner{border-top: 1px solid #353649;}
.faq-wrap .a-box .inner::before{display: block; margin-right: 10px; color:  var(--color-1); font-size: 24px; line-height: 1.5em; content: 'A.'; flex-shrink:0;}
.faq-wrap .a-box .txt-area{width: 100%; color: var(--color-1); font-weight: 400; font-size: 24px; line-height: 1.5em; word-break:keep-all;}
.faq-wrap .q-box.act{box-shadow: inset 0 10px 50px -10px rgba(62,63,88,.6);}
.faq-wrap .q-box.act + .a-box{box-shadow: inset 0 -10px 50px -10px rgba(62,63,88,.6);}


/* floating */
.flt-banr{position: fixed; width: 100%; bottom: 0; left: 0; background: url('./img/bg_floating.png') 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: #3b6bff; 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: #3b6bff; 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;}