@charset "UTF-8";

.dummy { position: relative; width: 100%; height: 100%; background-color: rgba(100,0,0,.5); pointer-events: none; }
.dummy div { position: absolute; width: 30px; height: 30px; border-radius: 15px; background-color: red; }
.dummy .top-left { top: 0; left: 0; }
.dummy .top-right { top: 0; right: 0; }
.dummy .bottom-left { bottom: 0; left: 0; }
.dummy .bottom-right { bottom: 0; right: 0; }

:root {
    --banner-loop-length: -137.5vh;
}

/* reset */
html, body, div, p, span, a, h1, h2, h3, h4, h5, h6, input, label { position: relative; margin: 0; padding: 0; box-sizing: border-box; }
img { display: block; border: 0 none; outline: none; width: auto; height: 100%; }
a { display: block; color: inherit; text-decoration: none; cursor: pointer; }
input {-webkit-appearance: none;}
body { font-family: 'Noto Sans KR', sans-serif; }

/* nav */
.nav-wrap { position: fixed; top: 100%; width: 100%; height: 8.6275vh; background-color: #44464a; transform: translateY(-100%); overflow: hidden; z-index: 1000; transition: top .75s ease, transform .5s ease; }
.nav-wrap.on { top: 0; transform: translateY(0); }
.nav-wrap .nav { display: flex; justify-content: space-evenly; margin: 0 auto; width: 117.6471vh; height: 100%; }
.nav-wrap .nav a { display: flex; justify-content: center; align-items: center; transition: transform .5s ease, background-color .5s ease; }
.nav-wrap .nav a.on { transform: scale(1.25); background-color: #f37321; }

/* floating btn */
.floating-btn { position: fixed; bottom: 0; right: 4.1667vw; height: 20.7843vh; transform: translateY(100%); z-index: 100; transition: bottom .75s ease, transform .75s ease; }
.floating-btn.on { bottom: 7.7451vh; transform: translateY(0); }
.floating-btn a { height: 100%; }

/* section */
.section .content-wrap { position: relative; width: 100%; height: 100%; padding-top: 8.6275vh; }
.section .content-wrap .content { position: relative; width: 100%; max-width: 1920px; height: 100%; margin: 0 auto; }
.section .content-wrap .content .title { position: absolute; left: 50%; height: 5.0980%; transform: translateX(-50%); }
.section .content-wrap .content .txt { position: absolute; top: 50%; left: 50%; height: 65.2941%; transform: translate(-50%,-50%); }
.section .content-wrap .content .txt .gif { display: none; position: absolute; top: 0; left: 0; height: 100%; }
.section .content-wrap .content .btn { position: absolute; }

/* home */
.section.home .content-wrap { padding-top: 0; padding-bottom: 8.6275vh; }
.section.home .content-wrap .content { display: none; max-width: none; margin: 0; }
.section.home .content-wrap .content .banner-wrap { position: absolute; top: 23.7255%; left: 0; width: 200vw; height: 54.3137%; z-index: 0; }
.section.home .content-wrap .content .banner-wrap .banner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: 0 0; background-repeat: repeat-x; background-size: auto 100%; animation: home-banner 20s linear infinite; }
.section.home .content-wrap .content .bg { position: relative; width: 100%; height: 100%; z-index: 1; }
.section.home .content-wrap .content .bg img { position: absolute; top: 0; left: 0; width: auto; height: 100%; }
.section.home .content-wrap .content .ci { position: absolute; top: 5.3922%; left: 5.6863vh; height: 4.2157%; z-index: 2; }
.section.home .content-wrap .content .txt { position: absolute; top: 19.9020%; left: 16.3725vh; height: 49.8039%; transform: none; z-index: 2; }
.section.home .content-wrap .content .btn { top: 76.8627%; left: 16.2745vh; height: 10.0000%; z-index: 2; }

/* page 1-1 */
.section.page1-1 .content-wrap .content .title { top: 9.0129%; }
.section.page1-1 .content-wrap .content .txt { top: 56.8670%; }

/* page 1-2 */
.section.page1-2 .content-wrap .content .txt .gif { left: auto; right: 0; }

/* page 1-4 */
.section.page1-4 .content-wrap .content .txt .gif { left: auto; right: 0; }
.section.page1-4 .content-wrap .content .btn { top: 68.4685%; left: 10.2667%; height: 9.6096%; }

/* page 1-6 */
.section.page1-6 .content-wrap .content .txt .gif { left: auto; right: 0; }

/* page 2 */
.section.page2 .content-wrap .content .title { top: 10.0980%; }
.section.page2 .content-wrap .content .btn-list { display: flex; justify-content: space-between; flex-wrap: wrap; position: absolute; top: 59.3258%; left: 50%; width: 147.5490vh; height: 58.1373vh; transform: translate(-50%,-50%); }
.section.page2 .content-wrap .content .btn-list .btn-wrap { position: relative; width: 49.7674%; height: 49.0725%; }
.section.page2 .content-wrap .content .btn-list .btn-wrap .btn-off { position: absolute; height: 84.5361%; }
.section.page2 .content-wrap .content .btn-list .btn-wrap .btn-over { height: 100%; display: none; }
.section.page2 .content-wrap .content .btn-list .btn-wrap .btn-over a {
    position: absolute;
    top: 16.2%;
    left: 76.6%;
    width: 16.3%;
    height: 65%;
}
.section.page2 .content-wrap .content .btn-list .btn1-wrap .btn-off { bottom: 0; right: 0; }
.section.page2 .content-wrap .content .btn-list .btn2-wrap .btn-off { bottom: 0; }
.section.page2 .content-wrap .content .btn-list .btn3-wrap .btn-off { right: 0; }
.section.page2 .content-wrap .content .btn-list .btn-wrap:hover .btn-over { display: block; }

/* page 3 */
.section.page3 .content-wrap .content .txt { height: 27.7733%; }

/* footer */
.section.footer .content-wrap .content .term-wrap { width: 78.1250%; min-height: 100%; margin: 7.5055% auto; }
.section.footer .content-wrap .content .term-wrap .title { position: relative; top: auto; left: auto; height: 3.2119vh; padding: 0 2.9412vh; margin-bottom: 2.5490%; transform: none; }
.section.footer .content-wrap .content .term-wrap .term { margin-top: left: 0; width: 100%; border: 2.9412vh solid #fff; border-radius: 1vh; background-color: #fff; }
.section.footer .content-wrap .content .term-wrap .term div { margin-bottom: 2em; line-height: 2; font-size: 1.5vh; }
.section.footer .content-wrap .content .term-wrap .term div h3 { font-size: 1.8vh; }
.section.footer .content-wrap .content .term-wrap .term div:last-child { margin-bottom: 0; }
.section.footer .content-wrap .footer-wrap { width: 100%; height: 14.4118%; background-color: #272b2f; }
.section.footer .content-wrap .footer-wrap img { margin: 0 auto; }

@keyframes home-banner {
    0% { left: 0; }
    100% { left: var(--banner-loop-length); }
}

@media all and (min-aspect-ratio:1920/1117) {
    .section.home .content-wrap .content .bg img.color { width: 100%; }
}
@media all and (max-height: 720px) {
    :root {
        --banner-loop-length: -991px;
    }
    .nav-wrap { height: 62px; }
    .nav-wrap .nav { width: 847px; }
    .floating-btn { bottom: 0; right: 145px; height: 150px; }
    .floating-btn.on { bottom: 56px; }
    .section .content-wrap { height: 720px; padding-top: 62px; }
    .section.home .content-wrap { padding-bottom: 62px; }
    .section.home .content-wrap .content .ci { left: 41px; }
    .section.home .content-wrap .content .txt { left: 118px; }
    .section.home .content-wrap .content .btn { left: 117px; }
    .section.page2 .content-wrap .content .btn-list { width: 1062px; height: 419px; }
    .section.footer .content-wrap { height: auto; }
    .section.footer .content-wrap .content .term-wrap .title { height: 23px; padding: 0 21px; }
    .section.footer .content-wrap .content .term-wrap .term { border-width: 21px; border-radius: 7px; }
    .section.footer .content-wrap .content .term-wrap .term div { font-size: 11px; }
    .section.footer .content-wrap .content .term-wrap .term div h3 { font-size: 13px; }
}