@charset "utf-8";

html, body{background:#fff;}
*:not(html):not(body){scrollbar-width:none;-ms-overflow-style:none;}
*:not(html):not(body)::-webkit-scrollbar{display:none;}

.m-only{display:none;}

body{overflow-x:hidden;overflow-y:auto;}

#wrapper{overflow:hidden;}
#wrapper:before, #wrapper:after{position:absolute; left:50%; content:''; transform:translateX(-50%);}
#wrapper:before{width:100vw; height:774px; background:linear-gradient(90deg, #00D6BA 0%, #56FFA1 100%);}
#wrapper:after{top:159px; width:1585px; height:1308px; background:url(../images/sec1_bg.png) no-repeat center / cover;}

header{overflow:hidden; position:absolute; top:30px; left:78px; right:78px; z-index:2;}
header .btn-form{display:none;}

.sec{overflow:hidden; position:relative; z-index:1; padding:0 32px; text-align:center;}
.sec .common-title{font-size:28px; font-weight:600; line-height:1.5;}
.sec .common-text{margin-top:16px; color:#6A7282; font-size:14px;}
.sec .green{color:#00C73C;}
.sec .sky{color:#0EC1B2;}
.sec .yellow{color:#FF9800;}

.sec1{padding-top:235px;}
.sec1 .sub-title{color:#000; font-size:38px; font-weight:600;}
.sec1 .title{display:flex; font-size:63px; font-weight:600; line-height:1.3; flex-direction:column; gap:10px;}
.sec1 .text{margin-top:12px; font-size:24px; font-weight:500;}
.sec1 .text span{font-weight:600;}
.sec1 .text2{margin-top:35px; color:rgba(17, 222, 181, 0.20); font-size:137px; font-weight:900; letter-spacing:0.04em;}

.sec2{padding-top:80px; padding-bottom:67px;}
.sec2 .text{margin-top:16px; color:#6A7282; font-size:20px; font-weight:500;}
.sec2 ul{display:flex; margin-top:60px; align-items:center; justify-content:center; gap:24px;}
.sec2 ul li{display:flex; width:300px; height:72px; padding:0 24px; border-radius:14px; background-color:#F9FAFB; align-items:center; gap:12px;}
.sec2 ul li span{display:flex; width:40px; height:40px; border-radius:50%; background-color:#00C73C; color:#fff; font-size:14px; font-weight:600; align-items:center; justify-content:center;}
.sec2 ul li > div{display:flex; text-align:left; flex-direction:column;}
.sec2 ul li > div div{font-size:18px; font-weight:600;}
.sec2 ul li > div p{color:#99A1AF; font-size:18px;}
.sec2 .arrow{margin-top:67px;}
.sec2 .box{display:flex; position:relative; max-width:972px; height:215px; margin:30px auto 0; border:1px solid #7EE0D0; border-radius:16px; align-items:center; justify-content:center; flex-direction:column; gap:14px;}
.sec2 .box > span{position:absolute; top:-16px; left:0; right:0; width:116px; margin:0 auto; border-radius:8px; background-color:#2ECBA7; color:#fff; font-size:13px; font-weight:600; line-height:32px; letter-spacing:0.08em;}
.sec2 .box div{color:#1A1A1A; font-size:30px; font-weight:700;}
.sec2 .box p{color:#666; font-size:20px; font-weight:500;}
.sec2 .box p > span{display:block; margin-top:4px; color:#666; font-weight:600;}

.sec3{padding-top:57px; padding-bottom:19px; background-color:#F8FAFB;}
.sec3 .title{font-size:40px; font-weight:600;}
.sec3 .text{max-width:524px; height:90px; margin:20px auto 0; padding:25px 24px; border-radius:14px; background-color:#FFF8E1; color:#364153; font-size:14px; font-weight:500; align-items:center;}
.sec3 .text span{font-weight:600;}
.sec3 .wrap{display:flex; margin-top:32px; gap:72px; justify-content:center;}
.sec3 .wrap .box{display:flex; width:389px; flex-direction:column; gap:32px;}
.sec3 .wrap .box .title-box{display:flex; height:60px; border-radius:12px; background:linear-gradient(90deg, #53FBA3 0%, #14C5B1 100%); color:#fff; font-size:24px; font-weight:600; align-items:center; justify-content:center;}

.sec4{padding-top:80px; padding-bottom:80px;}
.sec4 ul{display:flex; margin:64px auto 0; justify-content:center; gap:24px;}
.sec4 ul li{display:flex; width:280px; height:198px; border-radius:16px; background-color:#F9FAFB; align-items:center; justify-content:center; flex-direction:column;}
.sec4 ul li span{display:flex; width:64px; height:64px; border-radius:50%; background-color:#E3F2FD; align-items:center; justify-content:center;}
.sec4 ul li:nth-child(2) span{background-color:#E8F5E9;}
.sec4 ul li:nth-child(3) span{background-color:#FFF3E0;}
.sec4 ul li div{margin-top:16px; font-size:15px; font-weight:600;}
.sec4 ul li p{margin-top:4px; color:#6A7282; font-size:13px;}

.sec5{padding-top:80px; padding-bottom:43px; background-color:#F2F6F9;}
.sec5 .title{font-size:35px; font-weight:600; line-height:1.2;}
.sec5 ul{display:flex; margin:64px auto 0; align-items:center; justify-content:center; gap:24px;}
.sec5 ul li{display:flex; width:280px; height:198px; padding:7px 24px 0; border-radius:16px; background-color:#F9FAFB; gap:7px; flex-direction:column; align-items:center;}
.sec5 ul li img{width:124px;}
.sec5 ul li p{font-size:20px; font-weight:600;}
.sec5 ul li:last-child{padding-top:0; gap:0;}
.sec5 ul li:last-child p{margin-top:-7px; color:#09C0AA; line-height:1.3;}
.sec5 .scroll + .title{margin-top:32px;}

.sec6{padding-top:80px; padding-bottom:80px; background:linear-gradient(135deg, #E0F2F1 0%, #E0F7FA 50%, #E8EAF6 100%);}
.sec6 ul{display:flex; margin-top:64px; align-items:center; justify-content:center; gap:58px;}
.sec6 ul li{width:416px; height:165px; padding:22px 32px 0; border:2px solid #1565C0; border-radius:16px; background-color:#E3F2FD; box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);}
.sec6 ul li div{color:#1565C0; font-size:48px; font-weight:900; line-height:1.5;}
.sec6 ul li p{margin-top:10px; color:#4A5565; font-size:20px;}
.sec6 ul li:last-child{border-color:#E65100; background-color:#FFF3E0;}
.sec6 ul li:last-child div{color:#E65100;}

.sec7{padding-top:80px; padding-bottom:80px;}
.sec7 ul{display:flex; margin-top:64px; justify-content:center; gap:24px;}
.sec7 ul li{display:flex; width:220px; flex-direction:column; align-items:center;}
.sec7 ul li span{display:flex; width:80px; height:80px; border-radius:16px; background:#F3E5F5; align-items:center; justify-content:center;}
.sec7 ul li:nth-child(2) span{background-color:#E3F2FD;}
.sec7 ul li:nth-child(3) span{background-color:#E8F5E9;}
.sec7 ul li:nth-child(4) span{background-color:#FFF3E0;}
.sec7 ul li div{margin-top:16px; font-size:14px; font-weight:600;}
.sec7 ul li p{margin-top:4px; color:#6A7282; font-size:12px;}

.sec8{padding-top:80px; padding-bottom:80px; background-color:#F0FDF4;}
.sec8 ul{display:flex; margin:61px auto 0; padding:3px 0; gap:16px; justify-content:center;}
.sec8 ul li{display:flex; width:213px; padding:25px; border:1px solid #F3F4F6; border-radius:16px; background-color:#FFF; box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10); text-align:left; flex-direction:column; align-items:start;}
.sec8 ul li span{display:flex; width:48px; height:48px; border-radius:14px; background-color:#E8F5E9; color:#00C73C; font-size:18px; font-weight:600; align-items:center; justify-content:center;}
.sec8 ul li:nth-child(2) span{background-color:#E3F2FD; color:#1976D2;}
.sec8 ul li:nth-child(3) span{background-color:#FFF3E0; color:#EF6C00;}
.sec8 ul li:nth-child(4) span{background-color:#F3E5F5; color:#7B1FA2;}
.sec8 ul li div{margin-top:16px; font-size:14px; font-weight:600;}
.sec8 ul li p{margin-top:4px; color:#6A7282; font-size:12px;}

.sec9{padding-top:104px; padding-bottom:126px;}
.sec9 ul{display:flex; max-width:700px; margin:36px auto 0; padding:32px; border-radius:16px; background-color:#F9FAFB; gap:16px; flex-direction:column;}
.sec9 ul li{display:flex; gap:12px;}
.sec9 ul li span{display:flex; width:24px; height:24px; border-radius:50%; background-color:#00C73C; align-items:center;justify-content:center;}
.sec9 ul li p{color:#364153; font-size:14px; line-height:24px;}

.sec10{overflow:hidden; padding-top:80px; padding-bottom:101px; background-color:#FAFBFC;}
.sec10:before, .sec10:after{position:absolute; top:0; bottom:0; z-index:9; width:181px; background:linear-gradient(90deg, #FAFBFC 59.21%, rgba(250, 251, 252, 0.00) 100%); content:'';}
.sec10:before{left:0;}
.sec10:after{right:0; transform:rotate(180deg);}
.sec10 .swiper{overflow:visible; margin-top:42px;}
.sec10 .swiper-wrapper{transition-timing-function:linear !important;}
.sec10 .swiper-slide{width:auto;}
.sec10 .review-box{width:284px; padding:25px; border:0.667px solid #F3F4F6; border-radius:16px; background-color:#fff; box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px 0 rgba(0, 0, 0, 0.10); text-align:left;}
.sec10 .review-head{display:flex; align-items:center; gap:12px;}
.sec10 .review-head span{display:flex; width:40px; height:40px; border-radius:50%; background-color:#E8F5E9; color:#00C73C; font-size:14px; font-weight:600; align-items:center; justify-content:center;}
.sec10 .swiper-slide.n2 .review-head span{background-color:#E3F2FD; color:#1976D2;}
.sec10 .swiper-slide.n3 .review-head span{background-color:#FFF3E0; color:#EF6C00;}
.sec10 .swiper-slide.n4 .review-head span{background-color:#FCE4EC; color:#E91E63;}
.sec10 .swiper-slide.n5 .review-head span{background-color:#EDE7F6; color:#7B1FA2;}
.sec10 .review-head > div{display:flex; flex-direction:column; gap:2px;}
.sec10 .review-head > div div{font-size:13px; font-weight:600;}
.sec10 .review-head > div p{color:#99A1AF; font-size:11px;}
.sec10 .review-body{margin-top:14px;}
.sec10 .review-body .review-text{display:-webkit-box; overflow:hidden; height:36px; color:#4A5565; font-size:12px; line-height:1.5; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.sec10 .review-body .review-star{display:flex; margin-top:14px; gap:4px;}
.sec10 .review-body .review-star img{width:16px;}

.sec11{padding-top:80px; padding-bottom:80px; background:linear-gradient(135deg, #1A237E 0%, #283593 50%, #303F9F 100%);}
.sec11 .common-text{margin-top:0; color:#BEDBFF;}
.sec11 .common-title{margin-top:13px; color:#fff;}
.sec11 .btn-form{height:56px; margin-top:32px; padding:0 48px; border-radius:14px; background-color:#00C73C; color:#fff; font-size:16px; font-weight:600;}

.floating{display:flex; position:fixed; right:27px; bottom:27px; z-index:2; flex-direction:column; gap:28px;}

.dim{opacity:0; visibility:hidden; position:fixed; top:0; left:0; z-index:9998; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.6); transition:0.25s ease-in-out;}
.dim.active{opacity:1; visibility:inherit;}
.form{opacity:0; visibility:hidden; position:fixed; top:50%; left:50%; z-index:9999; width:672px; padding:40px 32px 32px; border-radius:16px; background:linear-gradient(135deg, #F0F2F8 0%, #E8EAF4 100%), rgba(255, 255, 255, 0.90); box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25); transform:translate(-50%, -50%) scale(1.025); transition:0.25s ease-in-out;}
.form.active{opacity:1; visibility:inherit; transform:translate(-50%, -50%);}
.form .title{color:#2D3B9B; font-size:32px; font-weight:600; text-align:center;}
.form .text{margin-top:12px; color:#2D3B9B; font-size:16px; font-weight:600; text-align:center;}
.form ul{display:flex; margin-top:34px; flex-wrap:wrap; gap:19px 20px;}
.form ul li{display:flex; width:calc(50% - 10px); flex-direction:column; gap:6px;}
.form ul li.full{width:100%;}
.form ul li label{color:#2D3B9B; font-size:14px; font-weight:500;}
.form ul li input{width:100%; height:46px; padding:0 10px; border:1px solid #D1D5DC; border-radius:10px;}
.form ul li input::placeholder{color:rgba(10, 10, 10, 0.50);}
.form ul li textarea{width:100%; height:156px; padding:12px 10px; border:1px solid #D1D5DC; border-radius:10px; resize:none;}
.form .check{display:flex; margin-top:20px; align-items:center; gap:8px;}
.form .check label{color:#4A5565; font-size:15px; font-weight:500;}
.form .check label a{color:#2D3B9B; text-decoration:underline;}
.form .btn-submit{width:100%; height:60px; margin-top:20px; border-radius:10px; background-color:#2D3B9B; color:#fff; font-size:16px; font-weight:600;}
.form .btn-close{display:flex; position:absolute; top:16px; right:16px; width:30px; height:30px; align-items:center; justify-content:center;}

footer{overflow:hidden; position:relative; background-color:#191919;}
footer .wrap{display:flex; max-width:1136px; min-height:495px; margin:0 auto; padding:69px 32px 50px 32px; gap:116px;}
footer .footer-info ul{display:flex; margin-top:46px; flex-direction:column; gap:15px;}
footer .footer-info ul li{display:flex; gap:11px; word-break:keep-all;}
footer .footer-info ul li span{color:#fff; font-size:14px; font-weight:500; line-height:0.95; white-space:nowrap;}
footer .footer-cs{margin-top:54px;}
footer .footer-cs div{color:#fff; font-size:24px; font-weight:500; line-height:0.95;}
footer .footer-cs p{margin-top:15px; color:#fff; font-size:20px; font-weight:500; line-height:0.95;}
footer .footer-cs ul{display:flex; margin-top:11px; flex-direction:column; gap:11px;}
footer .footer-cs ul li{color:#9F9F9F; font-size:16px; font-weight:500; line-height:0.95;}
footer .footer-sns{display:flex; margin:54px 0 0 auto; gap:14px;}
footer .footer-sns a{width:50px;}

@media (max-width:1200px){
    .sec1 .text2{font-size:129px;}
    footer .wrap{gap:60px;}
}

@media (max-width:1024px){
    .m-only{display:block;}

    .scroll{margin-right:-20px; margin-left:-20px; padding:0 20px; overflow-x:auto; overflow-y:hidden;}
    .scroll ul{width:864px; gap:12px;}

    #wrapper:before{height:500px;}
    #wrapper:after{top:69px; width:760px; height:629px;}

    header{display:flex; top:0; left:0; right:0; height:56px; padding:0 20px; align-items:center; justify-content:space-between;}
    header .logo{height:32px;}
    header .logo img{height:100%;}
    header .btn-form{display:flex; width:90px; height:32px; border-radius:16px; background-color:#fff; font-size:12px; font-weight:600; align-items:center;justify-content:center;}

    .sec{padding-right:20px; padding-left:20px;}
    .sec .common-title{font-size:20px;}

    .sec1{padding-top:129px; padding-bottom:34px;}
    .sec1 .sub-title{font-size:16px;}
    .sec1 .title{margin-top:11px; font-size:26px;}
    .sec1 .text{margin-top:32px; font-size:14px;}
    .sec1 .text2{max-width:260px; margin:57px auto 0; font-size:59px; line-height:1.03;}

    .sec2{padding-top:32px; padding-bottom:47px;}
    .sec2 .text{margin-top:12px; font-size:16px;}
    .sec2 ul{margin-top:32px; flex-direction:column;}
    .sec2 .arrow{margin-top:12px;}
    .sec2 .box{max-width:320px; height:auto; margin-top:12px; padding:24px 40px;}
    .sec2 .box > span{display:none;}
    .sec2 .box div{font-size:16px; line-height:36px;}
    .sec2 .box p{font-size:14px; line-height:27px;}
    .sec2 .box p > span{margin-top:11px;}

    .sec3{padding-top:46px; padding-bottom:59px;}
    .sec3 .title{font-size:24px; line-height:42px;}
    .sec3 .text{max-width:320px; height:auto; margin-top:10px; padding:13px 20px;}
    .sec3 .wrap{max-width:320px; margin:20px auto 0; flex-direction:column; gap:20px;}
    .sec3 .wrap .box{width:100%; gap:27px;}
    .sec3 .wrap .box .title-box{height:50px; border-radius:10px; font-size:18px;}

    .sec5 .title{font-size:20px; line-height:1.5;}
    .sec5 ul{margin-top:50px;}

    .sec6 ul{max-width:320px; margin:32px auto 0; gap:21px; flex-direction:column;}
    .sec6 ul li{width:100%;}

    .sec7{padding-top:41px; padding-bottom:41px;}
    .sec7 ul{max-width:264px; margin:32px auto 0; gap:26px 32px; flex-wrap:wrap; align-items:center;}
    .sec7 ul li{width:116px;}

    .sec8{padding-top:106px; padding-bottom:106px;}

    .sec9{padding-top:146px; padding-bottom:146px;}
    .sec9 ul{max-width:320px; margin-top:64px;}

    .sec10{padding-top:146px; padding-bottom:146px;}
    .sec10:before, .sec10:after{display:none;}
    .sec10 .swiper{margin-top:64px;}

    .sec11{padding-top:183px; padding-bottom:183px;}

    .floating{right:12px; bottom:12px; gap:21px;}
    .floating .btn{width:44px;}

    .form{top:auto; left:0; right:0; bottom:0; width:100%; margin:0 auto; padding:28px 12px 12px; border-radius:16px 16px 0 0; transform:translateY(100%); transition:0.25s ease-in-out;}
    .form.active{transform:translateY(0);}
    .form .title{font-size:14px; line-height:1.5;}
    .form .text{margin-top:0; font-size:10px; font-weight:400;}
    .form ul{margin-top:12px; flex-direction:column; gap:6px; flex-wrap:nowrap;}
    .form ul li{width:100%; gap:2px;}
    .form ul li label{font-size:11px;}
    .form ul li input{height:34px; border-color:#E5E7EB; font-size:12px;}
    .form ul li textarea{height:68px; padding:8px 10px; border-color:#E5E7EB; font-size:12px;}
    .form .check{margin-top:8px; gap:6px;}
    .form .check label{font-size:12px;}
    .form .btn-submit{height:38px; margin-top:8px; font-size:12px;}
    .form .btn-close{top:0; left:0; right:0; width:100%; height:28px;}
    .form .btn-close:before{position:absolute; top:8px; left:0; right:0; width:24px; height:2px; margin:0 auto; border-radius:2px; background-color:#D1D5DC; content:'';}
    .form .btn-close img{display:none;}

    footer .wrap{padding:32px 20px; flex-direction:column; gap:42px;}
    footer .footer-info{order:2;}
    footer .footer-info img{height:43px;}
    footer .footer-info ul{margin-top:12px;}
    footer .footer-info ul li{flex-wrap:wrap;}
    footer .footer-info ul li span{white-space:normal;}
    footer .footer-cs{margin-top:0; order:2;}
    footer .footer-sns{margin:0; order:1;justify-content:center;}
}