@charset "utf-8";

.inner {height: fit-content; max-width: 100vw; overflow: hidden; max-width: 1297px; width: calc(100% - 100px); margin-inline: auto;}

/* header */
.banner-wrap {position: relative; overflow: hidden; width: 100%; height: clamp(320px, 31vw, 580px); background-image: url(../img/banner-img.webp); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.banner-wrap h1 {position: absolute; top: -10px; left: -10px; font-size: 0;}
.header {transition: background-color 0.3s, backdrop-filter 0.3s; z-index: 999; background-color: #fff; width: 100%; position: sticky; top: 0;}
.header.scroll {background-color: #ffffff4d; backdrop-filter: blur(10px);}
.header .site-nav {padding-block: clamp(12px, 0.93vw, 18px);}
.header .site-nav ul {display: flex; align-items: center; justify-content: flex-end; column-gap: clamp(3px, 0.26vw, 5px);}
.header .site-nav ul li {font-size: clamp(16px, 1.25vw, 24px); font-weight: 900; line-height: 1.2;}
.header .site-nav ul li a {position: relative; color: #3976bb; padding-block: 5px;}
.header .site-nav ul li a::after {content: ''; display: block; transition: opacity 0.3s, bottom 0.3s; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background-color: #3976bb; opacity: 0;}
.header .site-nav ul li + li::before {content: '/'; padding-right: clamp(3px, 0.26vw, 5px); color: #3976bb;}
.header .site-nav ul li:hover a::after,
.header .site-nav ul li.active a::after{bottom: 100%; opacity: 1;}

/* footer */
.footer {margin-top: clamp(100px, 10.41vw, 200px); background-color: #93c8ea; padding-block: clamp(32px, 2.86vw, 55px);}
.footer .footer-info {margin-top: clamp(16px, 1.3vw, 25px);}
.footer .footer-info p {word-break: keep-all; font-size: clamp(14px, 1.25vw, 24px); line-height: 1.7; color: #fff; word-break: keep-all;}

/* floating */
.floating {z-index: 9999; position: fixed; bottom: 50px; right: 5%; display: flex; flex-direction: column; align-items: center; row-gap: 24px; z-index: 999;}
.floating a {display: flex; flex-direction: column; align-items: center; row-gap: 10px;}
.floating a .icon {transition: box-shadow 0.3s; width: 60px; height: 60px; background-color: #1673E2; display: flex; align-items: center; justify-content: center; border-radius: 20px;}
.floating a:hover .icon {box-shadow: 0 0 0 clamp(4px, 0.52vw, 5px) rgba(222, 222, 222, 0.6);}
.floating a .icon svg {width: 33px; height: auto;}
.floating a .icon svg path {fill: #fff;}
.floating a:not(.call) .icon {background-color: #36B44A;}
.floating a span {font-size: clamp(16px, 1.04vw, 20px); font-weight: 600;}

/* common */
.jk-btn {display: flex; align-items: center; justify-content: center; min-height: 50px; transition: box-shadow 0.3s; border-radius: clamp(18px, 1.56vw, 30px); font-family: 'GMarketSans'; border: solid clamp(4px, 0.52vw, 10px) #ff9a86; background-color: #fff0be; font-size: clamp(16px, 1.87vw, 36px); font-weight: 700; color: #ff9a86;}
.jk-btn:hover {box-shadow: 0 0 0 clamp(4px, 0.52vw, 10px) #fff0be;}
.main section + section {margin-top: clamp(100px, 15.62vw, 300px);}
.num-tit {display: flex; align-items: center; column-gap: clamp(18px, 1.97vw, 38px);}
.num-tit .num {flex-shrink: 0; width: clamp(74px, 11.3vw, 217px); height: clamp(74px, 11.3vw, 217px); border-radius: 50%; background-color: #93d8ff; font-family: 'GMarketSans'; font-size: clamp(58px, 9.63vw, 185px); font-weight: 300; color: #fff; line-height: 1; padding-left: clamp(16px, 2.6vw, 50px); padding-top: clamp(24px, 3.64vw, 70px);}
.num-tit p {font-size: clamp(28px, 3.75vw, 72px); line-height: 1.35; color: #93d8ff; word-break: keep-all;}
.num-tit p b {font-weight: 700;}
.num-img-box {max-width: 100%; position: relative; padding-top: calc(clamp(74px, 11.3vw, 217px) / 2);}
.num-img-box .num {position: absolute; top: 0; right: 0;}
.txt-container {display: flex; align-items: center; justify-content: space-between; column-gap: clamp(30px, 3.75vw, 72px);}
.txt-container .txt-wrap > span {font-size: clamp(26px, 2.55vw, 49px); line-height: 1.35; word-break: keep-all;}
.txt-container .txt-wrap > p {margin-top: clamp(20px, 2.08vw, 40px); font-size: clamp(16px, 1.87vw, 36px); font-weight: 300; line-height: 1.6; word-break: keep-all; letter-spacing: -0.01em;}
.txt-container .txt-wrap > p b {font-weight: 700;}
.txt-tit {font-size: clamp(20px, 3.75vw, 72px); line-height: 1.35; color: #81a6c6; word-break: keep-all;}
.txt-tit.center {text-align: center;}
.txt-tit b {font-weight: 700;}
.btn-container {margin-top: clamp(60px, 7.29vw, 140px); display: flex; justify-content: center; align-items: center; column-gap: clamp(16px, 1.56vw, 30px);}
.btn-container p {word-break: keep-all; text-align: center; font-size: clamp(16px, 1.61vw, 31px); line-height: 1.5; font-weight: 300;}
.btn-container p b {font-weight: 700;}
.btn-container .jk-btn {flex-shrink: 0; padding: clamp(8px, 0.52vw, 10px) clamp(24px, 2.6vw, 50px);}

/* hero */
.section01 .hero-top {margin-bottom: clamp(35px, 4.01vw, 77px); display: flex; align-items: center; justify-content: center; column-gap: clamp(30px, 5.05vw, 97px);}
.section01 .hero-top img {width: clamp(170px, 20vw, 384px);}
.section01 .hero-top p {font-size: clamp(26px, 2.55vw, 49px); line-height: 1.35; word-break: keep-all;}
.section01 .hero-mid {margin-bottom: clamp(30px, 2.7vw, 52px); display: flex; align-items: flex-start; justify-content: center; gap: clamp(20px, 2.39vw, 46px);}
.section01 .hero-mid .hero-card {flex: 1; display: flex; flex-direction: column; align-items: center; row-gap: clamp(12px, 1.14vw, 22px);}
.section01 .hero-mid .hero-card p {text-align: center; font-size: clamp(15px, 1.56vw, 30px); font-weight: 300; line-height: 1.45; word-break: keep-all;}
.section01 .hero-mid .hero-card p strong {font-weight: 700; color: #ff6c00;}
.section01 .hero-mid .hero-card img {max-width: 100%;}
.section01 .hero-bot p {text-align: center; font-size: clamp(16px, 1.61vw, 31px); font-weight: 500; line-height: 1.6; word-break: keep-all;}
.section01 .hero-bot p b {font-weight: 700;}

/* section02 */
.section02 .section02-top img {max-width: clamp(180px, 29vw, 540px);}
.section02 .txt-container .txt-wrap > span {font-size: clamp(30px, 3.12vw, 60px);}
.section02 .section02-mid {margin-block: clamp(35px, 2.6vw, 50px) clamp(60px, 5.2vw, 100px); display: flex; align-items: stretch; gap: clamp(16px, 1.25vw, 24px);}
.section02 .section02-mid .card {padding: clamp(22px, 1.56vw, 30px); padding-left: clamp(34px, 3vw, 60px); flex: 1; border-radius: clamp(18px, 1.56vw, 30px); border: solid clamp(8px, 1.06vw, 20.5px) #aef0ee; background-color: #8bdfdd;}
.section02 .section02-mid .card span {font-size: clamp(30px, 3.75vw, 72px); color: #fff; line-height: 1.2;}
.section02 .section02-mid .card p {margin-top: clamp(14px, 1.04vw, 16px); font-size: clamp(15px, 1.56vw, 30px); color: #fff; line-height: 1.45; word-break: keep-all;}
.section02 .section02-bot img {max-width: clamp(200px, 34vw, 634px);}

/* section03 */
.section03 .section03-top {margin-top: clamp(30px, 3.8vw, 40px); column-gap: 0;}
.section03 .section03-top img {width: 50%; max-height: clamp(260px, 25.52vw, 490px); object-fit: contain; object-position: center right;}
.section03 .section03-bot {margin-top: clamp(50px, 4.16vw, 80px); display: flex; align-items: flex-start; justify-content: center; gap: clamp(16px, 2vw, 32px);}
.section03 .section03-swiper {overflow: hidden; width: min(100%, 1000px);}
.section03 .section03-swiper .swiper-wrapper {align-items: center;}
.section03 .section03-swiper .swiper-slide {display: flex; flex-direction: column; row-gap: 5px; align-items: center; justify-content: center; height: clamp(210px, calc(20.83vw + 30px), 430px);}
.section03 .section03-swiper .swiper-slide img {width: 100%; height: calc(100% - 30px); object-fit: cover;}
.section03 .section03-swiper .swiper-slide span {font-size: clamp(14px, 0.93vw, 18px); line-height: 1.4; text-align: center;}
.section03 .section03-slide-btn {transition: background-color 0.3s; background-color: #93d8ff; width: clamp(48px, 4.16vw, 80px); height: clamp(180px, 20.83vw, 400px); border-radius: clamp(14px, 1.3vw, 25px); display: flex; align-items: center; justify-content: center;}
.section03 .section03-slide-btn:hover {background-color: #6fc2f5;}
.section03 .section03-slide-btn span {display: block; width: clamp(14px, 0.93vw, 18px); height: clamp(14px, 0.93vw, 18px); border-top: 3px solid #fff; border-right: 3px solid #fff;}
.section03 .section03-slide-btn.prev span {transform: rotate(-135deg); margin-left: 6px;}
.section03 .section03-slide-btn.next span {transform: rotate(45deg); margin-right: 6px;}

/* section04 */
.section04 .txt-container {column-gap: clamp(24px, 1.56vw, 30px);}
.section04 .txt-container + .txt-container {margin-top: clamp(70px, 6.25vw, 120px);}
.section04 .num-img-box img {max-height: clamp(260px, 25.52vw, 490px);}
.section04 .num-img-box .num {padding-left: clamp(24px, 4.16vw, 80px); padding-top: clamp(18px, 2.08vw, 40px);}
.section04 .section04-top .num-img-box .num {background-color: #ffe394;}
.section04 .section04-bot .num-img-box .num {background-color: #f48f68;}

/* section05 */
.section05 .txt-container {column-gap: 0;}
.section05 .section05-top {margin-top: clamp(60px, 6.97vw, 134px);}
.section05 .section05-bot {margin-top: clamp(60px, 5.83vw, 112px);}
.section05 .txt-container img {max-height: clamp(260px, 25.52vw, 490px);}

/* section06 */
.section06 {overflow: visible;}
.section06 .section06-top {margin-top: clamp(70px, 8.85vw, 170px); display: flex; align-items: flex-start;}
.section06 .section06-top .card {flex: 1; display: flex; flex-direction: column; align-items: center;}
.section06 .section06-top .card span {padding: clamp(6px, 0.52vw, 10px) clamp(24px, 3.64vw, 70px); margin-bottom: clamp(16px, 1.56vw, 30px); font-family: 'GMarketSans'; border-radius: 30px; border: solid clamp(4px, 0.52vw, 10px) #ffc570; background-color: #fff0be; font-size: clamp(16px, 1.87vw, 36px); font-weight: 700; color: #1a3263; white-space: nowrap;}
.section06 .section06-top .card img {width: 100%;}
.section06 .section06-top .card p {font-size: clamp(15px, 1.61vw, 31px); line-height: 1.45; text-align: center; word-break: keep-all;}
.section06 .section06-top .card p b {font-weight: 700;}
.section06 .section06-bot {margin-top: clamp(70px, 7.29vw, 140px);}

/* section07 */
.section07 .section07-top {margin-top: 17px; display: flex; flex-direction: column; align-items: center; row-gap: clamp(30px, 3vw, 54px);}
.section07 .section07-top > img {height: clamp(260px, 25.52vw, 490px);}
.section07 .section07-bot {margin-top: clamp(60px, 4.68vw, 90px);}
.section07 .section07-bot > span {font-size: clamp(26px, 2.55vw, 49px); padding-left: clamp(0px, 2.23vw, 43px); line-height: 1.35;}
.section07 .section07-bot ul {margin-top: clamp(30px, 2.6vw, 50px); display: flex; align-items: flex-start; gap: clamp(16px, 3.12vw, 60px);}
.section07 .section07-bot ul li {flex: 1; display: flex; flex-direction: column; align-items: center; row-gap: clamp(12px, 1.04vw, 20px);}
.section07 .section07-bot ul img {object-fit: contain; width: 100%; height: auto; aspect-ratio: 297 / 230; border-radius: clamp(14px, 1.56vw, 30px); border: 1px solid #000; overflow: hidden;}
.section07 .section07-bot ul span {font-size: clamp(14px, 0.93vw, 18px); font-weight: 300; line-height: 1.4; text-align: center; word-break: keep-all;}
.section07 .section07-top .btn-container {margin-top: 0;}

/* section08 */
.section08 {overflow: visible;}
.section08 .section08-check-wrap {max-width: 1000px; margin: clamp(50px, 6.25vw, 120px) auto 0;}
.section08 .section08-check-head {display: grid; grid-template-columns: 1fr clamp(50px, 5.2vw, 100px); align-items: center; text-align: left; padding-bottom: clamp(12px, 1.25vw, 24px);}
.section08 .section08-check-head span {font-size: clamp(16px, 1.6vw, 30px); font-weight: 700; color: #333;}
.section08 .section08-check-head span:last-child {text-align: center;}
.section08 .section08-check-list {display: flex; flex-direction: column; row-gap: clamp(14px, 1.25vw, 24px);}
.section08 .section08-check-list li {display: grid; grid-template-columns: 1fr clamp(50px, 5.2vw, 100px); align-items: center; text-align: left;}
.section08 .section08-check-list li p {font-size: clamp(16px, 1.6vw, 30px); font-weight: 700; line-height: 1.5; color: #333; word-break: keep-all;}
.section08 .section08-check-list li span {justify-self: center; display: block; width: clamp(16px, 1.6vw, 30px); height: clamp(16px, 1.6vw, 30px); border: 2px solid #ff9a86; background-color: #fff;}
.section08 .section08-bot {margin-top: clamp(50px, 5.2vw, 100px); margin-inline: auto; max-width: 1000px; display: flex; align-items: center; justify-content: center; column-gap: clamp(16px, 2vw, 30px);}
.section08 .section08-bot > img {width: clamp(220px, 22.91vw, 440px);}
.section08 .section08-bot > span {font-size: clamp(36px, 3.75vw, 72px); color: #81a6c6;}
.section08 .section08-counsel {display: flex; flex-direction: column; align-items: center; row-gap: clamp(16px, 1.66vw, 32px);}
.section08 .section08-counsel img {width: clamp(180px, 19.27vw, 370px);}
.section08 .section08-counsel .jk-btn {padding: 0 clamp(16px, 1.04vw, 20px);}

/* section09 */
.section09 {overflow: visible;}
.section09 .form-card {margin-top: clamp(35px, 2.6vw, 50px);}
.section09 .form-card > form {display: flex; flex-direction: column; row-gap: clamp(50px, 3.75vw, 72px);}
.section09 .form-card .input-group {display: flex; flex-direction: column; row-gap: clamp(24px, 1.56vw, 30px);}
.section09 .form-card .input-group .tit-area {border-bottom: 1px solid #8c8c8c;}
.section09 .form-card .input-group .tit-area h4 {position: relative; display: inline-block; font-size: clamp(18px, 1.25vw, 24px); font-weight: 600; padding-bottom: 16px;}
.section09 .form-card .input-group .tit-area.must h4::after {position: absolute; top: -2px; right: -11px; font-size: 18px; content: '*'; color: #1673e2;}
.section09 .form-card .input-group .info {width: 100%; height: 210px; padding: 20px 24px; overflow-y: auto; border: 1px solid #eee; border-radius: 3px; font-weight: 500; color: #262626;}
.section09 .form-card .input-group.user .input-area .input_multi {column-gap: clamp(30px, 7.81vw, 150px);}
.section09 .input-area .input_multi,
.section09 .input-area .input_triple {width: 100%; display: flex; align-items: center; column-gap: 30px;}
.section09 .input-area .input_multi.flex-start,
.section09 .input-area .input_triple.flex-start {align-items: flex-start;}
.section09 .input-area .input_multi > div {width: calc(100% / 2);}
.section09 .input-area .input_triple > div {width: calc(100% / 3);}
.section09 .input-area .input-item {width: 100%;}
.section09 .input-area .input-item > span {position: relative; display: inline-block; font-size: clamp(16px, 1.04vw, 20px); font-weight: 500; padding-bottom: 16px;}
.section09 .input-area .input-item.must > span::after {position: absolute; top: -2px; right: -11px; font-size: 18px; content: '*'; color: #1673e2;}
.section09 .input-area .input-item .input-item-area {display: flex; column-gap: 10px;}
.section09 .input-area .input-item .input-item-area input,
.section09 .input-area .input-item .input-item-area select,
.section09 .input-area .input-item .input-item-area.textarea-area textarea {width: 100%; height: 44px; background-color: #eee; border: 1px solid #eee; padding: 12px 16px; color: #656565; font-size: 16px; font-weight: 500; outline: none; border-radius: 3px;}
.section09 .input-area .input-item .input-item-area input:focus,
.section09 .input-area .input-item .input-item-area select:focus,
.section09 .input-area .input-item .input-item-area.textarea-area textarea:focus {border: 1px solid #000; background-color: #fff; transition: all 0.3s;}
.section09 .input-area .input-item .input-item-area.textarea-area textarea {height: clamp(180px, 12.5vw, 240px); resize: none;}
.section09 .input-area .input-item .input-item-area.radio-area {display: flex; flex-direction: column; row-gap: 20px; align-items: flex-start;}
.section09 .input-area .input-item .input-item-area.radio-area .radio-item {display: flex; align-items: center;}
.section09 .input-area .input-item .input-item-area.input-item-multi {flex-direction: column; row-gap: 16px;}
.section09 .input-area .input-item .input-item-area.num {align-items: center;}
.section09 .radio-item input[type="radio"],
.section09 .checkbox-item input[type="checkbox"] {display: none;}
.section09 .radio-item input[type="radio"] + label,
.section09 .checkbox-item input[type="checkbox"] + label {position: relative; flex-shrink: 0; cursor: pointer; color: var(--text1) !important; font-size: clamp(16px, 0.93vw, 18px); font-weight: 500; padding-left: 30px !important;}
.section09 .checkbox-item input[type="checkbox"] + label {font-size: clamp(16px, 1.04vw, 20px);}
.section09 .radio-item input[type="radio"] + label::before,
.section09 .checkbox-item input[type="checkbox"] + label::before {position: absolute; content: ""; display: inline-block; box-sizing: border-box; background-color: #d9d9d9; width: 22px; height: 22px; left: 0; top: 53%; transform: translate(0, -50%); border-radius: 50%;}
.section09 .radio-item input[type="radio"]:checked + label::before,
.section09 .checkbox-item input[type="checkbox"]:checked + label::before {background-color: #fff; border: 6px solid #3c65ed;}
.section09 .radio-item.etc input[type="text"] {width: 282px; margin-left: 20px;}
.section09 .btn-area {width: 100%; display: flex; justify-content: center;}
.section09 .btn-area .jk-btn {padding-inline: clamp(30px, 2.6vw, 50px);}

/* tablet */
@media screen and (max-width: 1024px) {
    .inner {width: calc(100% - 80px);}

    .txt-container {align-items: flex-start;}

    .section02 .section02-mid {flex-wrap: wrap;}
    .section02 .section02-mid .card {min-width: calc(33.333% - 12px);}
    .section03 .section03-top img {width: 45%; height: auto;}
    .section05 .txt-container {flex-direction: column; row-gap: 20px;}
    .section05 .section05-bot .txt-wrap {margin-left: auto; text-align: right;}
    .section05 .section05-bot img {margin-left: auto;}
    .section06 .section06-top {gap: 30px;}
    .section06 .section06-top .card span {margin-bottom: 0;}
    .section09 .input-area .input_multi,
    .section09 .input-area .input_triple {flex-direction: column; row-gap: 30px;}
    .section09 .input-area .input_multi > div,
    .section09 .input-area .input_triple > div {width: 100%;}
    .section09 .input-area .input-item .input-item-area.num {width: 50%;}
}

/* mobile */
@media screen and (max-width: 768px) {
    .inner {width: calc(100% - 60px);}

    .banner-wrap {background-position: 52% center;}

    .txt-container {flex-direction: column; align-items: center; text-align: center; row-gap: 20px;}
    .txt-container .txt-wrap > p {text-align: center;}
    .txt-tit {text-align: center;}
    .num-tit {justify-content: center; text-align: center;}
    .num-tit p br {display: none;}
    .btn-container {flex-direction: column; row-gap: 20px;}

    .section01 .hero-top {flex-direction: column; text-align: center; row-gap: 30px;}
    .section01 .hero-mid {flex-direction: column; align-items: center;}
    .section01 .hero-mid .hero-card {width: 100%; max-width: 280px;}

    .section02 .section02-mid {flex-direction: column; max-width: 400px; margin-inline: auto;}
    .section02 .section02-mid .card {width: 100%; min-width: 0; text-align: center;}

    .section03 .section03-top img,
    .section04 .num-img-box img,
    .section05 .txt-container img,
    .section05 .section05-bot img {width: 100%; max-width: 360px;}
    .section03 .section03-bot {align-items: center; gap: 10px;}
    .section03 .section03-slide-btn {width: 36px; height: 160px; border-radius: 14px;}
    .section03 .section03-swiper .swiper-slide {height: clamp(200px,60vw,500px);}

    .section04 .section04-top {flex-direction: column-reverse;}
    .section04 .section04-bot {flex-direction: column;}
    .section04 .num-img-box .num {right: 10px;}

    .section05 .section05-bot .txt-wrap {margin-left: unset; text-align: center;}
    .section05 .section05-bot img {margin-left: unset;}

    .section06 .section06-top {flex-direction: column; align-items: center;}
    .section06 .section06-top .card {width: 100%; max-width: 360px;}

    .section07 .section07-bot > span {display: block; padding-left: 0; text-align: center;}
    .section07 .section07-bot ul {display: grid; grid-template-columns: repeat(2, 1fr);}

    .section08 .section08-bot {flex-direction: column; row-gap: 24px;}
    .section08 .section08-bot > span {transform: rotate(90deg);}

    .section09 .input-area .input-item .input-item-area.num,
    .section09 .input-area .input-item .input-item-area.radio-area .radio-item {width: 100%;}
    .section09 .radio-item.etc {flex-wrap: wrap; row-gap: 10px;}
    .section09 .radio-item.etc input[type="text"] {width: 100%; margin-left: 30px;}
}

/* small mobile */
@media screen and (max-width: 480px) {
    .inner {width: calc(100% - 32px);}

    .header .site-nav ul {justify-content: center;}
    .header .site-nav ul li {font-size: 14px;}

    .txt-tit {letter-spacing: -0.01em;}

    .section07 .section07-bot ul {grid-template-columns: 1fr;}
    .section08 .section08-check-head,
    .section08 .section08-check-list li {grid-template-columns: 1fr 42px;}
    .section09 .input-area .input-item .input-item-area.num {width: 100%;}
}

@media screen and (max-width: 370px) {
    .inner {width: calc(100% - 20px);}
    .header .site-nav ul li {font-size: 12px;}
    .header .site-nav ul li + li::before {display: none;}
}