@charset "utf-8";

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

/* header */
.banner-wrap {position: relative; overflow: hidden; width: 100%; /*height: 100vh;*/ height: 65vh; 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 {background-color: #fff; width: 100%; position: sticky; top: 0  ;}
.header .site-nav {padding-block: 18px; position: sticky; top: 0;}
.header .site-nav ul {display: flex; align-items: center; justify-content: flex-end;}
.header .site-nav ul li {font-size: 24px; font-weight: 900; color: #3976bb;}
.header .site-nav ul li + li::before {content: ' / '; }


/* 섹션공통 */
.main section+section {margin-top: 200px;}
.num-tit {display: flex; align-items: center; column-gap: 38px;}
.num-tit .num {width: 217px; height: 217px; border-radius: 50%; background-color: #93d8ff; font-family: 'GMarketSans'; font-size: 185px; font-weight: 300; color: #fff; line-height: 1; padding-left: 50px; padding-top: 70px;}
.num-tit p {font-size: 72px; color: #93d8ff;}
.num-tit p b {font-weight: 700;}
.txt-container .txt-wrap span {font-size: 60px;}
.txt-container .txt-wrap p {margin-top: 40px; font-size: 36px; font-weight: 300; word-break: keep-all;}
.txt-container .txt-wrap p b {font-weight: 700;}
.txt-container {display: flex; align-items: center; column-gap: 72px; justify-content: space-between;}

/* hero */
.section01 .hero-top {margin-bottom: 77px; display: flex; align-items: center; column-gap: 97px;}
.section01 .hero-top p {font-size: 49px;}
.section01 .hero-mid {margin-bottom: 52px; display: flex; align-items: flex-start; column-gap: 46px; justify-content: center;}
.section01 .hero-mid .hero-card {display: flex; flex-direction: column; align-items: center; row-gap: 22px;}
.section01 .hero-mid .hero-card p {text-align: center; font-size: 30px; font-weight: 300;}
.section01 .hero-mid .hero-card p strong {font-weight: 700; color:  #ff6c00;}
.section01 .hero-bot p {text-align: center; font-size: 31px; font-weight: 500;}
.section01 .hero-bot p b {font-weight: 700;}

/* section02 */
.section02 .section02-mid {margin-block: 50px 100px; display: flex; align-items: stretch; column-gap: 24px;}
.section02 .section02-mid .card {padding: 30px 30px 50px 50px; flex: 1; border-radius: 30px; border: solid 20.5px #aef0ee; background-color: #8bdfdd;}
.section02 .section02-mid .card span {font-size: 72px; color: #fff;}
.section02 .section02-mid .card p {font-size: 30px; color: #fff;}

/* section03 */
.section03-bot {display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 32px);}
.section03-swiper {overflow: hidden; width: min(100%, 1000px);}
.section03-swiper .swiper-wrapper {align-items: center;}
.section03-swiper .swiper-slide {display: flex; align-items: center; justify-content: center; height: clamp(180px, 20.83vw, 400px);}
.section03-swiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.section03-slide-btn {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-slide-btn:hover {background-color: #6FC2F5;}
.section03-slide-btn span {display: block; width: 18px; height: 18px; border-top: 3px solid #fff; border-right: 3px solid #fff;}
.section03-slide-btn.prev span {transform: rotate(-135deg); margin-left: 6px;}
.section03-slide-btn.next span {transform: rotate(45deg); margin-right: 6px;}