@charset "UTF-8";

html { scroll-behavior: smooth; }

body { font-family: 'SUIT', AppleSDGothicNeo, "Apple SD Gothic Neo", "Apple SD 고딕 Neo", "Microsoft NeoGothic", Verdana, Arial, sans-serif; letter-spacing: -0.05rem; color: #222222; }

.only-aos, .only-iso { display: none; } 

.bg-01 { background-color: var(--bg-01) !important; }
.bg-02 { background-color: var(--main-02) !important; }
.bg-03 { background-color: var(--f-01) !important; }
.bg-04 { background-color: rgba(0, 0, 0, 0.57) !important;; }

.p-lr-0 { padding: 0 0 !important; }
.p-lr-2 { padding: 0 2rem !important; }
.p-t-2 { padding: 4rem 0 0 0 !important; }
.p-t-1 { padding: 2rem 0 0 0 !important; }
.p-l-1 { padding-left: 1rem !important; }
.p-l-2 { padding-left: 2rem !important; }
.p-l-3 { padding-left: 3rem !important; }
.f-w-900 { font-weight: 900 !important; }
.flex-ai-fs { align-items: flex-start !important; }
.grid-d { display: grid !important; grid-template-columns: 2fr 1fr !important;}
.lh-1 { line-height: 1.1 !important; display: inline-block; }
.lh-2 { line-height: 1.2 !important; display: inline-block; }
.lh-3 { line-height: 1.3 !important; display: inline-block; }
.w-10 { width: 10% !important; }
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-50 { width: 50% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }
.w-100 { width: 100% !important; }

.wrap, .section { position: relative; width: 100%; height: 100%; }
.container { position: relative; max-width: 72.5rem; scroll-behavior: smooth; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin: 0 auto; }

.section.start { margin-bottom: 9rem; }
.section.start .container { padding: 0 6rem; width: 100%; }
.section.start .container h2 { text-align: left; width: 100%;  font-weight: 800; font-size: 4.2rem; line-height: 1.3; margin-bottom: 2.4rem; }
.section.start .container .t-l { width: 100%; }
.section.start .container .t-l img { width: 39rem; }

.section.g-swiper { overflow: hidden; height: 80rem; }
.section.g-swiper .swiper-wrapper { width: 50rem; height: 74rem; }
.section.g-swiper .swiper-wrapper .swiper-slide { overflow: hidden; border-radius: 6.4rem; }
.section.g-swiper .swiper-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gateSwiper { overflow: visible; }

.gateSwiper .gate-swiper-pagination { position: absolute; bottom: -6rem; left: 44%; }
.gateSwiper .swiper-pagination-bullet { width: 2.3rem; height: 2.3rem; background: #D9D9D9; opacity: 1; }
.gateSwiper .swiper-pagination-bullet-active { width: 2.3rem; height: 2.3rem; border-radius: 2.3rem; background: #00DFD9;  }

@media (min-width: 1100px) {
    .gateSwiper .swiper-wrapper { display: flex; justify-content: center; gap: 5rem; }

    .gateSwiper .swiper-slide { width: auto !important; flex: 0 0 auto; }
}

.section.ad { padding: 6rem 2rem 10rem; }
.section.ad .g-ad { text-align: center; width: 100%; position: relative; border: 1px solid red; }

@media (min-width: 1100px) {
    .section.ad { padding: 2rem 2rem 10rem; }
}

.container .logo { margin-top: 6.4rem; margin-bottom: 6rem;  width: 100%; display: flex; justify-content: center; align-items: center; }
.container .logo img { width: 12.6rem; }

.footer { position: relative; background: var(--white); }
.footer .container { background-color: #ffffff; padding: 2rem 5rem 3rem; text-align: center; gap: 1rem; border-top: 1px solid #DDDDDD; }
.footer .container .privacy { font-size: 2.4rem; font-weight: 700; color: #666666; display: flex; width: 100%; }
.footer .container .privacy a { font-weight: bold; }
.footer .container .privacy > div { flex: 1; position: relative; }
.footer .container .privacy div:first-child::after { content: ''; position: absolute; right: 0; top: .8rem; width: 1px; height: 2rem; background-color: #dddddd; }
.footer .container div { font-size: 2rem; font-weight: 300; color: #666666; }
.footer .container div span { margin: 0 1rem; }

.footer .container .copy { font-size: 1.6rem; font-weight: 500; color: #000000; }

/* 이용약관 관련 */

.term-c-m { padding: 2rem 5rem 6rem; }
.term .dept-01 { padding-left: 2rem; }
.term .dept-02 { padding-left: 4rem; }
.term .container .header { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 4rem; gap: 2rem; }
.term .container .header h1 { font-size: 4.6rem; font-weight: 800; color: var(--black); text-align: center; }
.term .container .header div { font-size: 2rem; font-weight: 500; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 1rem; }
.term .container .header div span { letter-spacing: 0.02rem; }
.term .container, .term .container > div { display: flex; flex-direction: column; justify-content: flex-start; gap: 4rem; }
.term .container .block { display: flex; flex-direction: column; justify-content: flex-start; gap: 2rem; width: 100%; }
.term .container .block h2 { font-size: 2.6rem; font-weight: 700; color: var(--black); text-align: center; width: 100%; padding: 1.2rem; background: #F1F1F1; }
.term .container .block > div { font-size: 2rem; color: var(--black); font-weight: 300; display: flex; justify-content: flex-start; gap: 2rem; flex-direction: column; width: 100%; }
.term .container .block ul { display: flex; display: flex; justify-content: flex-start; flex-direction: column; gap: 2rem; }
.term .container .block ul .dep-01 { margin-left: 2.5rem; }
.term .container .block ul li ul { margin-top: 1rem; display: flex; flex-direction: column; justify-content: flex-start; gap: 1rem; }
.term .container .block a { font-weight: 600; text-decoration: underline; }

.term table { font-size: 1.6rem; font-weight: 300; color: var(--black); width: 100%; }
.term th { background-color: #EAECF7; padding: 1.5rem .5rem; text-align: center; font-weight: 300; }
.term td { background-color: #F4F4F4; padding: 1rem; text-align: center; border-bottom: 1px solid #dddd; vertical-align: middle; }

@media (max-width: 724.98px) {
    .term-c-m { padding: 2rem 3rem 6rem; }
    .term .container .header div { font-size: 2.5rem; }

    .term .container .block h2 { font-size: 3.2rem;  }
    .term .container .block > div { font-size: 2.5rem; }

    .term table { font-size: 2.3rem; }
}

.icon-back { position: absolute; left: 5rem; top: 6.5rem; width: 7rem; }

@media (max-width: 724.98px) {
    .icon-back { left: 3rem; top: 6.5rem; }
}