@charset "utf-8";

html, body, * {font-family: 'NanumSquareNeo'; line-height: 1.5;  letter-spacing: -0.045em; color: #101010;}
.wrapper {max-width: 1420px; width: 100%; margin: 0 auto; padding: 0 20px;}
section {padding: 80px 0; overflow: hidden;}
.mb_hide {display: block;}
.mb_show {display: none;}


main {display: flex; width: 100%; height: 95vh; background: url(../img/main_bg.jpg) center center no-repeat; background-size: cover; position: relative; overflow: hidden;}
main::before {content: ""; background: url(../img/ico_main.png) no-repeat; width: 800px; height: 765px; position: absolute; bottom: -65px; right: 20%; z-index: 0;}
main .wrapper {width: 100%; height: auto; display: flex; flex-wrap: wrap; align-items: center; align-content: center; position: relative; z-index: 2;}
main .wrapper .tit {margin-bottom: 50px;}
main .wrapper .tit span {font-size: 2.25rem; font-weight: 600; color: #fff;}
main .wrapper .tit span span {color: #fbedc0;}
main .wrapper .tit h2 {font-size: 6rem; color: #fff; font-weight: 700; margin-top: 15px;}
main .wrapper .txt {width: 100%; color: #fff; font-size: 1.75rem; font-weight: 500; font-family: 'Pretendard';}

.sc01 h3.tit {text-align: center; font-size: 3rem; font-weight: 700;}
.sc01 h3.tit i {font-style: italic;}
.sc01 h3.tit .light {font-weight: 400;}
.sc01 h3.tit .purple {color: #9b28d7}
.sc01 .flow_wrap {display: flex; flex-wrap: wrap; gap: 50px; margin: 50px 0;}
.sc01 .flow_wrap .flow {width: 100%; overflow: hidden; display: flex; gap: 60px;}
.sc01 .flow_wrap .flow:last-child .list {animation-direction: reverse!important;}
.sc01 .flow_wrap .flow .list {display: flex; gap: 60px;}
.sc01 .flow_wrap .flow .list > li {white-space: nowrap; font-family: 'Pretendard'; font-size: 1.5rem; font-weight: 600; color: #363636; padding: 20px 60px 20px 20px; border: 2px solid #363636; border-radius: 10px;}
.sc01 .flow_wrap .flow .list > li.item01 {border-color: #6CD187; background: #F4FAF3 url(../img/ico_item01.png) right 20px center no-repeat;}
.sc01 .flow_wrap .flow .list > li.item02 {border-color: #866CD1; background: #F5F3FB url(../img/ico_item02.png) right 20px center no-repeat;}
.sc01 .flow_wrap .flow .list > li.item03 {border-color: #6CC5D1; background: #F3FAFA url(../img/ico_item03.png) right 20px center no-repeat;}
.sc01 .flow_wrap .flow .list > li.item04 {border-color: #D18A6C; background: #FAF5F3 url(../img/ico_item04.png) right 20px center no-repeat;}
.sc01 .flow_wrap .flow .list > li.item05 {border-color: #6C8FD1; background: #EEF7FC url(../img/ico_item05.png) right 20px center no-repeat;}
.sc01 .flow_wrap .flow .list > li.item06 {border-color: #EBCE6A; background: #FFF9DA url(../img/ico_item06.png) right 20px center no-repeat;}
.sc01 .flow_wrap .flow .list > li.item07 {border-color: #D16C6C; background: #FCF4F3 url(../img/ico_item07.png) right 20px center no-repeat;}
.sc01 .flow_wrap .flow .list > li.item08 {border-color: #D16CB5; background: #FCF3F7 url(../img/ico_item08.png) right 20px center no-repeat;}
@keyframes flowRolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
.sc01 .news {padding: 80px; background: #e1e1e1; border-radius: 50px; display: flex; flex-wrap: wrap;}
.sc01 .news h3 {font-size: 3rem; font-weight: 700; width: 30%;}
.sc01 .news .news_img {width: 70%}
.sc01 .news .news_img img {max-width: 100%;}


.sc02 {background: #c6edf6;}
.sc02 .wrapper {display: flex; flex-wrap: wrap;}
.sc02 .wrapper > * {width: 50%;}
.sc02 .wrapper .desc h3 {font-size: 3.75rem; font-weight: 700;}
.sc02 .wrapper .desc h3 span.red {color: #ff395e;}
.sc02 .wrapper .desc .txt {font-size: 1.75rem; font-weight: 500; margin: 30px 0 40px;}
.sc02 .wrapper .desc strong {font-weight: 700;}
.sc02 .wrapper .desc .txt_box {width: 100%; background: #406a74; padding: 20px 7px; color: #fff; font-size: 1.8125rem; text-align: center; font-weight: 500; border-radius: 10px;}
.sc02 .wrapper .desc .txt_box strong {color: #fff;}
.sc02 .wrapper .desc .list_box {margin: 50px 0; padding-left: 30px; font-size: 1.5rem; font-weight: 500; line-height: 2;}
.sc02 .wrapper .desc .highlight {display: inline-block; font-size: 2.5rem; font-weight: 500; position: relative; z-index: 2;}
.sc02 .wrapper .desc .highlight::before {content: ""; width: 102%; height: 26px; background: #d2ff00; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; z-index: -1;}
.sc02 form.inquiry {max-width: 600px; margin: 0 auto;}
.sc02 form.inquiry .inquiry_wrap {display: flex; flex-wrap: wrap; gap: 10px; width: 100%; padding: 45px; border-radius: 10px; background: #fbfcff; box-sizing: border-box;}
.sc02 form.inquiry .inquiry_wrap > * {width: 100%; font-family: 'Pretendard';}
.sc02 form.inquiry .inquiry_wrap label {color: #535353; font-size: 1.25rem; font-weight: 600;}
.sc02 form.inquiry .inquiry_wrap label span {color: #ff7a00; font-weight: 600;}
.sc02 form.inquiry .inquiry_wrap label ~ label {margin-top: 15px;}
.sc02 form.inquiry .inquiry_wrap input {border: 1px solid #E9ECEF; padding: 18px 20px; border-radius: 10px; font-size: 16px;}
.sc02 form.inquiry .inquiry_wrap input::placeholder {color: #c0c0c0;}
.sc02 form.inquiry button {width: 100%; height: 80px; color: #fff; font-size: 1.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: none; background: #2571e3; border-radius: 10px; margin: 0 auto; margin-top: 29px; cursor: pointer;}


.sc03 h3 {font-size: 3rem; font-weight: 400; text-align: center; margin-bottom: 50px;}
.sc03 h3 .big {display: block; font-size: 6.25rem; font-weight: 700;}
.sc03 h3 strong {font-weight: 700;}
.sc03 .box_list {display: flex; flex-wrap: wrap; gap: 30px;}
.sc03 .box_list li {height: 420px; padding: 60px 40px; box-sizing: border-box; background: #eee; border-radius: 50px;}
.sc03 .box_list li.item01 {width: calc(60% - 15px); background: #FEF3FF url(../img/box_item01_250801.png) right 20px bottom 20px no-repeat;}
.sc03 .box_list li.item02 {width: calc(40% - 15px); background: #F1FDFF url(../img/box_item02.png) right 20px bottom 20px no-repeat;}
.sc03 .box_list li.item03 {width: calc(50% - 15px); background: #F2F1FF url(../img/box_item03.png) right 20px bottom 20px no-repeat;}
.sc03 .box_list li.item04 {width: calc(50% - 15px); background: #FFF8F1 url(../img/box_item04.png) right 20px bottom 20px no-repeat;}
.sc03 .box_list li h4 {font-weight: 700; font-size: 2.5rem; color: #333;}
.sc03 .box_list li span {display: inline-block; font-size: 1.375rem; font-weight: 500; margin-top: 15px; color: #333;}


/* 260401 tta 검증 추가 */
.sc03-1{background:#fffdf0;}
.sc03-1 h3.tit{font-weight: 700; font-size: 3rem; color: #333; margin-bottom:15px;}
.sc03-1 h4.sub{font-size:1.75rem; font-weight:500;}
.sc03-1 .highlight{display: inline-block; position: relative; z-index: 2; font-weight:800;}
.sc03-1 .highlight:before{content: ""; width: 100%; height: 18px; background: #d2ff00; position: absolute; left: 50%; transform: translateX(-50%); bottom:0; z-index: -1;}
.sc03-1 .tta_list{margin-top:20px; height:fit-content; border-radius:20px;}
.sc03-1 .tta_list .swiper-button-prev, .tta_list .swiper-button-next{width:50px; height:50px; border-radius:50%; background:rgba(0,0,0,0.25); cursor:pointer !important;}
.sc03-1 .tta_list .swiper-button-prev::after, .tta_list .swiper-button-next::after{font-size:22px; color:#fff; transition:0.2s; pointer-events:none;}
.sc03-1 .tta_list .swiper-button-next:hover::after{transform:translateX(5px);}
.sc03-1 .tta_list .swiper-button-prev:hover::after{transform:translateX(-5px);}
.sc03-1 .tta_list .swiper-pagination-bullet{background:#ddd; opacity:1;}
.sc03-1 .tta_list .swiper-pagination-bullet-active{background:#003469;}
.sc03-1 .tta_list ul{padding:0;}
.sc03-1 .tta_list img{width:100%; height:90%; max-width:100%; object-fit:contain;}
.sc03-1 .tta_list .swiper-slide{height:800px; display:flex; align-items:center; justify-content:center; background:#fff;}
.sc03-1 .desc{display:flex; flex-wrap:wrap; gap:1rem; margin:35px 0;}
.sc03-1 .desc .card{flex:1; padding:0; overflow:hidden; border-radius:20px;}
.sc03-1 .desc .head{background:#c5e0b4; color:#434f3b; padding:14px 18px; font-weight:600; font-size:1.5rem; text-align:center; border-radius:20px 20px 0 0;}
.sc03-1 .desc .body{padding:20px 35px; background:#fff; font-size:1.375rem; height:11rem;}
.sc03-1 .desc .body ul li{position:relative; padding-left:15px;}
.sc03-1 .desc .body ul li+li{margin-top:5px;}
.sc03-1 .desc .body ul li:before{content: ''; position: absolute; left: 0; top: 15px; width: 5px; height: 5px; background: #333; border-radius: 50px;}

.sc04 h3.tit {font-size: 3rem; font-weight: 700; text-align: center; margin-bottom: 60px;}
.sc04 .faq_list {display: flex; flex-wrap: wrap; gap: 30px;}
.sc04 .faq_list li {width: 100%; padding: 40px 60px; background: #FAFCFF; border-radius: 50px;cursor: pointer;}
.sc04 .faq_list li div {font-family: 'Pretendard'; position: relative; font-size: 1.375rem;}
.sc04 .faq_list li div .inner {display: flex;  gap: 10px;}
.sc04 .faq_list li div .inner span.ico {width: 24px;}
.sc04 .faq_list li div .inner span {width: calc(100% - 62px); color: #333;}
.sc04 .faq_list li div.q {font-weight: 600;}
.sc04 .faq_list li div.q::after {content: ""; background: url(../img/ico_faq_arrow.png) center center no-repeat; width: 19px; height: 19px; background-size: cover; position: absolute; right: 0; top: 3px; transform: rotate(0);}
.sc04 .faq_list li div.a {display: none; margin-top: 20px;}
.sc04 .faq_list li.open {background: #F4F7FF;}
.sc04 .faq_list li.open div.q span {color: #141414;}
.sc04 .faq_list li.open div.q span.ico {color: #4255FF;}
.sc04 .faq_list li.open div.q::after {transform: rotate(180deg);}
.sc04 .faq_list li.open div.a span {color: #444;}


.sc05 {background: #FAFCFF;}
.sc05 .wrapper {max-width: 1080px;}
.sc05 h3.tit {font-size: 3rem; font-weight: 400; text-align: center; margin-bottom: 20px; text-align: center;}
.sc05 h3.tit strong {font-weight: 700;}
.sc05 .txt {font-family: 'Pretendard'; font-size: 1.5rem; color: #333; text-align: center; margin-bottom: 60px;}
.sc05 form.inquiry .inquiry_list {display: flex; flex-wrap: wrap; gap: 30px;}
.sc05 form.inquiry .inquiry_list li {width: calc(50% - 15px);}
.sc05 form.inquiry .inquiry_list label {width: 100%; font-family: 'Pretendard'; color: #535353; font-size: 1.25rem; font-weight: 600;}
.sc05 form.inquiry .inquiry_list label span {color: #ff7a00; font-weight: 600;}
.sc05 form.inquiry .inquiry_list input {width: 100%; font-family: 'Pretendard'; border: 1px solid #E9ECEF; padding: 18px 20px; border-radius: 10px; font-size: 16px; margin-top: 10px;}
.sc05 form.inquiry .inquiry_list input::placeholder {color: #c0c0c0;}
.sc05 form.inquiry button {margin-top: 30px; padding: 20px 50px; background: #4255FF; color: #fff; font-size: 1.25rem; font-weight: 700; border-radius: 5px; border: none; cursor: pointer; position: relative; left: 50%; transform: translateX(-50%);}


footer {border-top: 1px solid rgba(0,0,0,.1); background: #F8FAFF; padding: 50px 0;}
footer .wrapper {display: flex; flex-wrap: wrap; align-items: flex-start;}
footer .logo {background: url(../img/ft_logo.svg) left center no-repeat; width: 250px; height: 54px;}
footer .info {width: calc(100% - 250px);}
footer .info > ul {display: flex; flex-wrap: wrap; gap: 10px;}
footer .info > ul > li {width: 100%;}
footer .info > ul > li > ul {display: flex; gap: 10px 20px;}
footer .info > ul > li,
footer .info span {font-family: 'Pretendard'; color: #636363; font-size: .9375rem}
footer .info span + span {padding-left: 5px;}
footer .info > ul > li > ul li span.name {font-weight: 700;}
footer .info .copy {font-family: 'Pretendard'; color: #9E9E9E; font-size: .8125rem; margin-top: 20px;}

@media (max-width: 1420px) {
	html, body {font-size: 80%;}
}

@media (max-width: 1200px) {
	html, body {font-size: 75%;}


	main {padding: 25vh 0 50vh;}
	main::before {background-size: 80%; right: -175px; bottom: -200px;}


	.sc01 .news {padding: 40px;}
	.sc01 .news h3,
	.sc01 .news .news_img {width: 100%; text-align: center;}


	.sc02 .wrapper > * {width: 100%;}
	.sc02 .wrapper .desc {text-align: center; margin-bottom: 40px;}
	.sc02 .wrapper .desc .list_box {padding-left: 0;}
	.sc02 .wrapper .desc .highlight {margin-left: 0;}


	.sc03 .box_list li.item01 {background-size: 70%;}
	.sc03 .box_list li.item02,
	.sc03 .box_list li.item03,
	.sc03 .box_list li.item04 {background-size: 50%;}


	.sc02 form.inquiry .inquiry_wrap label,
	.sc04 .faq_list li div,
	.sc05 .txt,
	.sc05 form.inquiry .inquiry_list label,
	.sc05 form.inquiry button {font-size: 18px;}
}

@media (max-width: 768px) {
	html, body {font-size: 60%;}
	section {padding: 40px 0;}


	main {padding: 20vh 0 45vh;}
	main::before {width: 524px; height: 400px; right: 0; bottom: 0;}
	main .wrapper .tit {margin-bottom: 30px;}
	main .wrapper .tit span {font-size: 20px;}
	main .wrapper .tit h2 {font-size: 45px;}
	main .wrapper .txt {font-size: 16px;}


	.sc01 .flow_wrap {gap: 20px;}
	.sc01 .flow_wrap .flow {gap: 20px;}
	.sc01 .flow_wrap .flow .list {gap: 20px;}
	.sc01 .flow_wrap .flow .list > li {padding: 15px 60px 15px 20px;}


	.sc03 .box_list li {height: 340px;}
	.sc03 .box_list li {width: 100%!important;}
	.sc03 .box_list li.item02, 
	.sc03 .box_list li.item03, 
	.sc03 .box_list li.item04 {background-size: 240px;}
	
	.sc03-1 .tta_list .swiper-slide{height:auto;}
	.sc03-1 .tta_list img{ width:auto; height:auto;}
	.sc03-1 .desc{gap:2.5rem;}
	.sc03-1 .desc .body{height:auto; padding:20px;}
	.sc03-1 .desc .body ul li {padding-left:12px;}
	.sc03-1 .desc .body ul li:before{width:3px; height:3px; top:7px;}
	.sc03-1 .desc .card{width:100%; flex:auto;}



	.sc04 .faq_list li {padding: 30px;}


	.sc05 form.inquiry .inquiry_list li {width: 100%;}


	footer .logo {width: 100%;}
	footer .info {width: 100%; margin-top: 20px;}
}


@media (max-width: 500px) {
	.wrapper {padding: 0 10px;}
	.mb_hide {display: none;}
	.mb_show {display: block;}


	main {padding: 15vh 0 37vh; height: auto;}
	main::before {width: 370px; height: 280px;}
	main .wrapper .tit h2 {font-size: 36px;}
	main .wrapper .tit span {font-size: 18px;}


	.sc01 .news {border-radius: 10px; padding: 20px;}


	.sc02 .wrapper .desc h3 {font-size: 3.375rem;}
	.sc02 .wrapper .desc .txt {margin: 30px 0 20px;}
	.sc02 .wrapper .desc .list_box {margin: 20px 0;}
	.sc02 form.inquiry .inquiry_wrap {padding: 20px;}
	.sc02 form.inquiry .inquiry_wrap input {padding: 14px; border-radius: 4px;}
	.sc02 form.inquiry button {height: 50px;}


	.sc03 .box_list {gap: 10px;}
	.sc03 .box_list li.item01 {background-size: 100%!important; background-position-x: center; height: 31rem;}
	.sc03 .box_list li {height: 250px; padding: 20px; background-size: 40%!important; border-radius: 10px;}


	.sc04 .faq_list li {border-radius: 10px; padding: 20px;}


	.sc05 form.inquiry .inquiry_list input {padding: 14px; border-radius: 4px;}
	.sc05 form.inquiry button {width: 100%; height: 50px; padding: 0;}


	footer .info > ul > li, footer .info span {font-size: 14px;}
	footer .info .copy {font-size: 12px;}
}