html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}


.full-page {
    height: 100%;
}

.main {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.main-greet {
    background-image: url(/assets/image/index/main_greet.png);
    background-position: center;
    background-size: cover;
}

.main-greet-mes-container {
    width: 1340px;
    margin: auto 0;
    padding-top: 70px;
    text-align: left;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, .35);
}

.main-sub-title {
    font-size: 18px;
    margin-bottom: 10px;
}

.main-title {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 20px;
}

.main-detail {
    font-size: 18px;
    width: 600px;
    line-height: 1.5;
}

#fast-nav {
    position: fixed;
    z-index: 100;
    margin-top: -96px;
    top: 50%;
    right: 10px;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

#fast-nav .nav-list {
    display: flex;
    flex-direction: column;
    list-style: none;
}

#fast-nav .nav-list .nav-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    margin: 8px 0;
    color: rgba(0, 0, 0, 0);
    transition: all .4s;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all .4s;
}

#fast-nav .nav-list .nav-list-item:hover {
    filter: brightness(1.2);
    color: rgba(125, 125, 125, 0.5);
}

#fast-nav .nav-list .nav-list-item.sel {
    color: #3ebae9;
    font-size: 18px;
    font-weight: bold;
}

#fast-nav .nav-list .nav-list-item::after {
    content: "●";
    display: flex;
    margin-left: 5px;
    color: rgba(125, 125, 125, 0.5);
    font-size: 12px;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
}

#fast-nav .nav-list .nav-list-item.sel::after {
    content: "💧";
    margin-bottom: 12px;
    font-size: 36px;
}

.main-title-container {
    margin-top: 125px;
    font-size: 34px;
    line-height: 46px;
    margin-bottom: 64px;
    font-weight: 800;
    color: #010050;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-paper-extra-bold);
}

.text-white {
    color: #fff;
}

.title-icon {
    width: 40px;
    height: 50px;
    background-size: cover;
    margin-bottom: 10px;
}

.title-icon.company-logo {
    background-image: url(/assets/image/public/company_logo.png);
}

.title-icon.company_logo_white {
    background-image: url(/assets/image/public/company_logo_white.png);
}

.main-intro-container {
    display: flex;
    width: 1350px;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 25px;
}

.main-intro-container ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32.5%;
    float: left;
    margin-left: 0;
    height: 410px;
}

.main-intro-box {
    display: flex;
    flex-direction: column;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .36);
    height: 100%;
    border-radius: 24px 0 24px 0;
    padding: 24px 0 0 33px;
    text-align: left;
    transition: all .4s;
    color: #000;
}

.main-intro-box.sl {
    padding: 0;
}

.main-intro-box.sm {
    height: calc(50% - 10px);
}

.main-intro-box.sm:first-child {
    background-image: url(/assets/image/index/main_intro_box_s1.png);
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.main-intro-box.sm:last-child {
    background-image: url(/assets/image/index/main_intro_box_s2.png);
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.main-intro-box.lg:first-child {
    background-image: url(/assets/image/index/main_intro_box_b1.png);
    background-position: center;
    background-size: cover;
    overflow: hidden;
}


.main-intro-box:first-child {
    background-color: #a3d1ff;
}

.main-intro-box:first-child .box-deco {
    background-color: #316be9;
}

.main-intro-box:last-child {
    background-color: #265b91;
    color: #fff;
}

.main-intro-box:last-child .box-deco {
    background-color: #a3d1ff;
}

.main-intro-box:hover {
    cursor: pointer;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, .36);
}

.main-intro-box:hover .box-deco {
    width: 200px;
}

.main-intro-box:hover {
    filter: contrast(1.1);
}

.box-title {
    position: relative;
    margin: 0 0 15px;
    box-sizing: border-box;
    font-size: 26px;
    line-height: 38px;
    letter-spacing: -0.5px;
    font-family: var(--font-paper-extra-bold);
    font-weight: 800;
}

.box-deco {
    width: 20px;
    height: 5px;
    transition: all .4s;
}

.box-detail {
    margin-top: 15px;
    position: relative;
    z-index: 1;
    font-size: 16px;
}

.lg .box-detail {
    font-size: 16px;
}

.lg .box-detail .detail-list {
    font-size: 20px;
    line-height: 1.8;
}

.sl-img {
    flex: 1;
    width: 100%;
    height: calc(100% - 40px);
    position: relative;
}

.sl-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
    opacity: 1;
    border-radius: 12px 0 0 0;
}

.slide-image,
#slide-title {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.slide-image.fade-out {
    opacity: 0;
}


.sl-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    background-color: #000;
    color: #fff;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 0 0 24px 0;
}

.sl-title {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 12px;
}

.sl-controls {
    display: flex;
    gap: 8px;
}

.slide-indicator {
    display: flex;
    align-items: center;
}

.sl-controls button {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    transition: all .4s;
}

.sl-controls button:hover {
    color: rgb(143, 143, 143);
}

.main-license {
    background: linear-gradient(180deg, rgba(32, 146, 255, 1) 0%, rgb(37 100 199) 100%)
}

.main-inqury {
    background: linear-gradient(180deg, rgb(37 100 199) 0%, rgb(55 87 145) 100%);
}

.waves {
    position: absolute;
    z-index: -10;
    bottom: 10px;
    left: 0;
    height: 50vh;
    width: 100%;
}

.waves:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -100px;
    height: 100px;
    background: dodgerblue;
}

.waves svg {
    position: absolute;
    bottom: 0;
    left: 0;
}

.waves use {
    animation: wavewave 5s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    fill: dodgerblue;
    opacity: 0.7;
}

.waves.back {
    z-index: -5;
}

.waves.back use:nth-child(2) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.waves.back use:nth-child(3) {
    animation-delay: -5s;
    animation-duration: 20s;
}

.waves.front {
    z-index: -10;
}

.waves.front use:nth-child(2) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.waves.front use:nth-child(3) {
    animation-delay: -3s;
    animation-duration: 10s;
}

@keyframes wavewave {
    0% {
        transform: translate(-90px);
    }

    100% {
        transform: translate(85px);
    }
}

@keyframes bob {
    0% {
        transform: rotate(-10deg) translateY(0vh);
    }

    100% {
        transform: rotate(8deg) translateY(-20vh);
    }
}

@media (prefers-color-scheme: dark) {
    .waves:after {
        background: royalblue;
    }

    .waves use {
        fill: royalblue;
    }

}

.license-wrapper {
    width: 1440px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
    margin: 10px auto;
}

.license-track {
    position: relative;
    width: 100%;
    height: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: grab;
    user-select: none;
}

.license-slide {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3;
    transition: all 0.5s ease;
    text-align: center;
    z-index: 1;
}

.license-slide img {
    width: 320px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

.license-caption {
    margin-top: 8px;
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    font-family: var(--font-paper-regular);
    text-wrap: wrap;
    width: 320px;
}

.license-prev,
.license-next {
    background: none;
    border: none;
    font-size: 32px;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    padding: 6px;
    z-index: 10;
    transition: all .4s;
}

.license-prev:hover,
.license-next:hover {
    color: rgba(255, 255, 255, .4);
}

.inqury-wrapper {
    width: 1440px;
    height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
}

.inqury-content-container {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin: 0 15px;
    border: 4px solid #fff;
    color: #fff;
    padding: 30px 2.8% 13px;
}

.inqury-content-container.sm {
    width: calc(25% - 30px);
}

.inqury-content-container.lg {
    width: calc(50% - 30px);
}

.inqury-content-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: -0.52px;
    width: 100%;
    text-align: left;
}

.inqury-content-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    border-bottom: 2px solid #fff;
    margin: 20px 0 40px 0;
}

.notice-container {
    list-style: none;
    width: 100%;
}

.notice-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #fff;
}

.notice-date {
    width: 110px;
    padding-left: 10px;
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

.notice-detail {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.inqury-content-detail {
    list-style: none;
    width: 100%;
}

.inqury-content-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    font-size: 20px;
    border-bottom: 1px solid #fff;
}

.inqury-content-list a {
    width: 100%;
    color: #fff;
    text-decoration: none;
    transition: all .4s;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.inqury-content-list a:hover {
    color: rgba(255, 255, 255, .6);
}

.contece-number {
    cursor: pointer;
    transition: all .4s;
}

.contece-number:hover {
    color: rgba(255, 255, 255, .6);
}

.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(51, 51, 51, 0.9);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
}

.toast.show {
    opacity: 1;
    visibility: visible;
}

.bubble {
    display: block;
    border-radius: 100%;
    opacity: 0.4;
    position: absolute;
}

.bubble:nth-child(1) {
    background: #fff;
    width: 79px;
    height: 79px;
    left: 91vw;
    bottom: 50vh;
    -webkit-animation: move1 infinite 9s;
    animation: move1 infinite 9s;
}

@-webkit-keyframes move1 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 9vh;
        transform: translate(162px, 0);
        opacity: 0;
    }
}

@keyframes move1 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 9vh;
        transform: translate(162px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(2) {
    background: #fff;
    width: 6px;
    height: 6px;
    left: 77vw;
    bottom: 53vh;
    -webkit-animation: move2 infinite 9s;
    animation: move2 infinite 9s;
}

@-webkit-keyframes move2 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 56vh;
        transform: translate(94px, 0);
        opacity: 0;
    }
}

@keyframes move2 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 56vh;
        transform: translate(94px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(3) {
    background: #fff;
    width: 41px;
    height: 41px;
    left: 10vw;
    bottom: 95vh;
    -webkit-animation: move3 infinite 14s;
    animation: move3 infinite 14s;
}

@-webkit-keyframes move3 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 87vh;
        transform: translate(-23px, 0);
        opacity: 0;
    }
}

@keyframes move3 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 87vh;
        transform: translate(-23px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(4) {
    background: #fff;
    width: 44px;
    height: 44px;
    left: 98vw;
    bottom: 54vh;
    -webkit-animation: move4 infinite 9s;
    animation: move4 infinite 9s;
}

@-webkit-keyframes move4 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 80vh;
        transform: translate(142px, 0);
        opacity: 0;
    }
}

@keyframes move4 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 80vh;
        transform: translate(142px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(5) {
    background: #fff;
    width: 67px;
    height: 67px;
    left: 97vw;
    bottom: 4vh;
    -webkit-animation: move5 infinite 15s;
    animation: move5 infinite 15s;
}

@-webkit-keyframes move5 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 65vh;
        transform: translate(-29px, 0);
        opacity: 0;
    }
}

@keyframes move5 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 65vh;
        transform: translate(-29px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(6) {
    background: #fff;
    width: 69px;
    height: 69px;
    left: 11vw;
    bottom: 25vh;
    -webkit-animation: move6 infinite 8s;
    animation: move6 infinite 8s;
}

@-webkit-keyframes move6 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 11vh;
        transform: translate(125px, 0);
        opacity: 0;
    }
}

@keyframes move6 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 11vh;
        transform: translate(125px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(7) {
    background: #fff;
    width: 73px;
    height: 73px;
    left: 16vw;
    bottom: 56vh;
    -webkit-animation: move7 infinite 9s;
    animation: move7 infinite 9s;
}

@-webkit-keyframes move7 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 80vh;
        transform: translate(-92px, 0);
        opacity: 0;
    }
}

@keyframes move7 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 80vh;
        transform: translate(-92px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(8) {
    background: #fff;
    width: 8px;
    height: 8px;
    left: 70vw;
    bottom: 22vh;
    -webkit-animation: move8 infinite 3s;
    animation: move8 infinite 3s;
}

@-webkit-keyframes move8 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 9vh;
        transform: translate(149px, 0);
        opacity: 0;
    }
}

@keyframes move8 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 9vh;
        transform: translate(149px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(9) {
    background: #fff;
    width: 46px;
    height: 46px;
    left: 26vw;
    bottom: 90vh;
    -webkit-animation: move9 infinite 10s;
    animation: move9 infinite 10s;
}

@-webkit-keyframes move9 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 65vh;
        transform: translate(53px, 0);
        opacity: 0;
    }
}

@keyframes move9 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 65vh;
        transform: translate(53px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(10) {
    background: #fff;
    width: 24px;
    height: 24px;
    left: 68vw;
    bottom: 41vh;
    -webkit-animation: move10 infinite 14s;
    animation: move10 infinite 14s;
}

@-webkit-keyframes move10 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 71vh;
        transform: translate(61px, 0);
        opacity: 0;
    }
}

@keyframes move10 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 71vh;
        transform: translate(61px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(11) {
    background: #fff;
    width: 40px;
    height: 40px;
    left: 96vw;
    bottom: 38vh;
    -webkit-animation: move11 infinite 7s;
    animation: move11 infinite 7s;
}

@-webkit-keyframes move11 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 97vh;
        transform: translate(-94px, 0);
        opacity: 0;
    }
}

@keyframes move11 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 97vh;
        transform: translate(-94px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(12) {
    background: #fff;
    width: 17px;
    height: 17px;
    left: 29vw;
    bottom: 99vh;
    -webkit-animation: move12 infinite 11s;
    animation: move12 infinite 11s;
}

@-webkit-keyframes move12 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 55vh;
        transform: translate(187px, 0);
        opacity: 0;
    }
}

@keyframes move12 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 55vh;
        transform: translate(187px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(13) {
    background: #fff;
    width: 46px;
    height: 46px;
    left: 95vw;
    bottom: 53vh;
    -webkit-animation: move13 infinite 12s;
    animation: move13 infinite 12s;
}

@-webkit-keyframes move13 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 53vh;
        transform: translate(153px, 0);
        opacity: 0;
    }
}

@keyframes move13 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 53vh;
        transform: translate(153px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(14) {
    background: #fff;
    width: 73px;
    height: 73px;
    left: 44vw;
    bottom: 47vh;
    -webkit-animation: move14 infinite 4s;
    animation: move14 infinite 4s;
}

@-webkit-keyframes move14 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 10vh;
        transform: translate(172px, 0);
        opacity: 0;
    }
}

@keyframes move14 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 10vh;
        transform: translate(172px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(15) {
    background: #fff;
    width: 96px;
    height: 96px;
    left: 3vw;
    bottom: 11vh;
    -webkit-animation: move15 infinite 11s;
    animation: move15 infinite 11s;
}

@-webkit-keyframes move15 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 77vh;
        transform: translate(140px, 0);
        opacity: 0;
    }
}

@keyframes move15 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 77vh;
        transform: translate(140px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(16) {
    background: #fff;
    width: 36px;
    height: 36px;
    left: 42vw;
    bottom: 24vh;
    -webkit-animation: move16 infinite 14s;
    animation: move16 infinite 14s;
}

@-webkit-keyframes move16 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 30vh;
        transform: translate(60px, 0);
        opacity: 0;
    }
}

@keyframes move16 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 30vh;
        transform: translate(60px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(17) {
    background: #fff;
    width: 60px;
    height: 60px;
    left: 45vw;
    bottom: 2vh;
    -webkit-animation: move17 infinite 7s;
    animation: move17 infinite 7s;
}

@-webkit-keyframes move17 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 86vh;
        transform: translate(189px, 0);
        opacity: 0;
    }
}

@keyframes move17 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 86vh;
        transform: translate(189px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(18) {
    background: #fff;
    width: 86px;
    height: 86px;
    left: 99vw;
    bottom: 93vh;
    -webkit-animation: move18 infinite 14s;
    animation: move18 infinite 14s;
}

@-webkit-keyframes move18 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 32vh;
        transform: translate(3px, 0);
        opacity: 0;
    }
}

@keyframes move18 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 32vh;
        transform: translate(3px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(19) {
    background: #fff;
    width: 6px;
    height: 6px;
    left: 36vw;
    bottom: 21vh;
    -webkit-animation: move19 infinite 9s;
    animation: move19 infinite 9s;
}

@-webkit-keyframes move19 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 23vh;
        transform: translate(43px, 0);
        opacity: 0;
    }
}

@keyframes move19 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 23vh;
        transform: translate(43px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(20) {
    background: #fff;
    width: 69px;
    height: 69px;
    left: 88vw;
    bottom: 79vh;
    -webkit-animation: move20 infinite 14s;
    animation: move20 infinite 14s;
}

@-webkit-keyframes move20 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 41vh;
        transform: translate(111px, 0);
        opacity: 0;
    }
}

@keyframes move20 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 41vh;
        transform: translate(111px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(21) {
    background: #fff;
    width: 46px;
    height: 46px;
    left: 84vw;
    bottom: 52vh;
    -webkit-animation: move21 infinite 14s;
    animation: move21 infinite 14s;
}

@-webkit-keyframes move21 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 65vh;
        transform: translate(47px, 0);
        opacity: 0;
    }
}

@keyframes move21 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 65vh;
        transform: translate(47px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(22) {
    background: #fff;
    width: 20px;
    height: 20px;
    left: 23vw;
    bottom: 88vh;
    -webkit-animation: move22 infinite 9s;
    animation: move22 infinite 9s;
}

@-webkit-keyframes move22 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 69vh;
        transform: translate(-84px, 0);
        opacity: 0;
    }
}

@keyframes move22 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 69vh;
        transform: translate(-84px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(23) {
    background: #fff;
    width: 37px;
    height: 37px;
    left: 63vw;
    bottom: 53vh;
    -webkit-animation: move23 infinite 9s;
    animation: move23 infinite 9s;
}

@-webkit-keyframes move23 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 73vh;
        transform: translate(-33px, 0);
        opacity: 0;
    }
}

@keyframes move23 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 73vh;
        transform: translate(-33px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(24) {
    background: #fff;
    width: 79px;
    height: 79px;
    left: 82vw;
    bottom: 12vh;
    -webkit-animation: move24 infinite 6s;
    animation: move24 infinite 6s;
}

@-webkit-keyframes move24 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 49vh;
        transform: translate(149px, 0);
        opacity: 0;
    }
}

@keyframes move24 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 49vh;
        transform: translate(149px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(25) {
    background: #fff;
    width: 67px;
    height: 67px;
    left: 51vw;
    bottom: 89vh;
    -webkit-animation: move25 infinite 15s;
    animation: move25 infinite 15s;
}

@-webkit-keyframes move25 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 45vh;
        transform: translate(43px, 0);
        opacity: 0;
    }
}

@keyframes move25 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 45vh;
        transform: translate(43px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(26) {
    background: #fff;
    width: 90px;
    height: 90px;
    left: 75vw;
    bottom: 95vh;
    -webkit-animation: move26 infinite 5s;
    animation: move26 infinite 5s;
}

@-webkit-keyframes move26 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 85vh;
        transform: translate(116px, 0);
        opacity: 0;
    }
}

@keyframes move26 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 85vh;
        transform: translate(116px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(27) {
    background: #fff;
    width: 31px;
    height: 31px;
    left: 18vw;
    bottom: 14vh;
    -webkit-animation: move27 infinite 7s;
    animation: move27 infinite 7s;
}

@-webkit-keyframes move27 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 11vh;
        transform: translate(6px, 0);
        opacity: 0;
    }
}

@keyframes move27 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 11vh;
        transform: translate(6px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(28) {
    background: #fff;
    width: 63px;
    height: 63px;
    left: 19vw;
    bottom: 89vh;
    -webkit-animation: move28 infinite 10s;
    animation: move28 infinite 10s;
}

@-webkit-keyframes move28 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 70vh;
        transform: translate(95px, 0);
        opacity: 0;
    }
}

@keyframes move28 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 70vh;
        transform: translate(95px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(29) {
    background: #fff;
    width: 78px;
    height: 78px;
    left: 90vw;
    bottom: 71vh;
    -webkit-animation: move29 infinite 14s;
    animation: move29 infinite 14s;
}

@-webkit-keyframes move29 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 56vh;
        transform: translate(62px, 0);
        opacity: 0;
    }
}

@keyframes move29 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 56vh;
        transform: translate(62px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(30) {
    background: #fff;
    width: 93px;
    height: 93px;
    left: 75vw;
    bottom: 52vh;
    -webkit-animation: move30 infinite 15s;
    animation: move30 infinite 15s;
}

@-webkit-keyframes move30 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 44vh;
        transform: translate(190px, 0);
        opacity: 0;
    }
}

@keyframes move30 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 44vh;
        transform: translate(190px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(31) {
    background: #fff;
    width: 40px;
    height: 40px;
    left: 97vw;
    bottom: 16vh;
    -webkit-animation: move31 infinite 4s;
    animation: move31 infinite 4s;
}

@-webkit-keyframes move31 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 53vh;
        transform: translate(-81px, 0);
        opacity: 0;
    }
}

@keyframes move31 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 53vh;
        transform: translate(-81px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(32) {
    background: #fff;
    width: 14px;
    height: 14px;
    left: 13vw;
    bottom: 27vh;
    -webkit-animation: move32 infinite 12s;
    animation: move32 infinite 12s;
}

@-webkit-keyframes move32 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 50vh;
        transform: translate(147px, 0);
        opacity: 0;
    }
}

@keyframes move32 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 50vh;
        transform: translate(147px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(33) {
    background: #fff;
    width: 45px;
    height: 45px;
    left: 7vw;
    bottom: 89vh;
    -webkit-animation: move33 infinite 11s;
    animation: move33 infinite 11s;
}

@-webkit-keyframes move33 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 18vh;
        transform: translate(75px, 0);
        opacity: 0;
    }
}

@keyframes move33 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 18vh;
        transform: translate(75px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(34) {
    background: #fff;
    width: 98px;
    height: 98px;
    left: 73vw;
    bottom: 58vh;
    -webkit-animation: move34 infinite 12s;
    animation: move34 infinite 12s;
}

@-webkit-keyframes move34 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 42vh;
        transform: translate(198px, 0);
        opacity: 0;
    }
}

@keyframes move34 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 42vh;
        transform: translate(198px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(35) {
    background: #fff;
    width: 70px;
    height: 70px;
    left: 62vw;
    bottom: 54vh;
    -webkit-animation: move35 infinite 3s;
    animation: move35 infinite 3s;
}

@-webkit-keyframes move35 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 0vh;
        transform: translate(-65px, 0);
        opacity: 0;
    }
}

@keyframes move35 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 0vh;
        transform: translate(-65px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(36) {
    background: #fff;
    width: 63px;
    height: 63px;
    left: 72vw;
    bottom: 57vh;
    -webkit-animation: move36 infinite 7s;
    animation: move36 infinite 7s;
}

@-webkit-keyframes move36 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 56vh;
        transform: translate(190px, 0);
        opacity: 0;
    }
}

@keyframes move36 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 56vh;
        transform: translate(190px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(37) {
    background: #fff;
    width: 65px;
    height: 65px;
    left: 87vw;
    bottom: 41vh;
    -webkit-animation: move37 infinite 6s;
    animation: move37 infinite 6s;
}

@-webkit-keyframes move37 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 69vh;
        transform: translate(-92px, 0);
        opacity: 0;
    }
}

@keyframes move37 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 69vh;
        transform: translate(-92px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(38) {
    background: #fff;
    width: 54px;
    height: 54px;
    left: 87vw;
    bottom: 80vh;
    -webkit-animation: move38 infinite 6s;
    animation: move38 infinite 6s;
}

@-webkit-keyframes move38 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 73vh;
        transform: translate(128px, 0);
        opacity: 0;
    }
}

@keyframes move38 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 73vh;
        transform: translate(128px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(39) {
    background: #fff;
    width: 12px;
    height: 12px;
    left: 51vw;
    bottom: 56vh;
    -webkit-animation: move39 infinite 11s;
    animation: move39 infinite 11s;
}

@-webkit-keyframes move39 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 34vh;
        transform: translate(30px, 0);
        opacity: 0;
    }
}

@keyframes move39 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 34vh;
        transform: translate(30px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(40) {
    background: #fff;
    width: 70px;
    height: 70px;
    left: 21vw;
    bottom: 16vh;
    -webkit-animation: move40 infinite 7s;
    animation: move40 infinite 7s;
}

@-webkit-keyframes move40 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 16vh;
        transform: translate(193px, 0);
        opacity: 0;
    }
}

@keyframes move40 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 16vh;
        transform: translate(193px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(41) {
    background: #fff;
    width: 49px;
    height: 49px;
    left: 91vw;
    bottom: 93vh;
    -webkit-animation: move41 infinite 9s;
    animation: move41 infinite 9s;
}

@-webkit-keyframes move41 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 14vh;
        transform: translate(193px, 0);
        opacity: 0;
    }
}

@keyframes move41 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 14vh;
        transform: translate(193px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(42) {
    background: #fff;
    width: 83px;
    height: 83px;
    left: 77vw;
    bottom: 21vh;
    -webkit-animation: move42 infinite 12s;
    animation: move42 infinite 12s;
}

@-webkit-keyframes move42 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 68vh;
        transform: translate(-26px, 0);
        opacity: 0;
    }
}

@keyframes move42 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 68vh;
        transform: translate(-26px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(43) {
    background: #fff;
    width: 64px;
    height: 64px;
    left: 99vw;
    bottom: 13vh;
    -webkit-animation: move43 infinite 5s;
    animation: move43 infinite 5s;
}

@-webkit-keyframes move43 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 50vh;
        transform: translate(108px, 0);
        opacity: 0;
    }
}

@keyframes move43 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 50vh;
        transform: translate(108px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(44) {
    background: #fff;
    width: 88px;
    height: 88px;
    left: 16vw;
    bottom: 57vh;
    -webkit-animation: move44 infinite 13s;
    animation: move44 infinite 13s;
}

@-webkit-keyframes move44 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 77vh;
        transform: translate(136px, 0);
        opacity: 0;
    }
}

@keyframes move44 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 77vh;
        transform: translate(136px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(45) {
    background: #fff;
    width: 19px;
    height: 19px;
    left: 57vw;
    bottom: 62vh;
    -webkit-animation: move45 infinite 7s;
    animation: move45 infinite 7s;
}

@-webkit-keyframes move45 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 31vh;
        transform: translate(194px, 0);
        opacity: 0;
    }
}

@keyframes move45 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 31vh;
        transform: translate(194px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(46) {
    background: #fff;
    width: 29px;
    height: 29px;
    left: 88vw;
    bottom: 37vh;
    -webkit-animation: move46 infinite 4s;
    animation: move46 infinite 4s;
}

@-webkit-keyframes move46 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 15vh;
        transform: translate(160px, 0);
        opacity: 0;
    }
}

@keyframes move46 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 15vh;
        transform: translate(160px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(47) {
    background: #fff;
    width: 13px;
    height: 13px;
    left: 74vw;
    bottom: 18vh;
    -webkit-animation: move47 infinite 6s;
    animation: move47 infinite 6s;
}

@-webkit-keyframes move47 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 3vh;
        transform: translate(-27px, 0);
        opacity: 0;
    }
}

@keyframes move47 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 3vh;
        transform: translate(-27px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(48) {
    background: #fff;
    width: 65px;
    height: 65px;
    left: 19vw;
    bottom: 45vh;
    -webkit-animation: move48 infinite 9s;
    animation: move48 infinite 9s;
}

@-webkit-keyframes move48 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 82vh;
        transform: translate(-78px, 0);
        opacity: 0;
    }
}

@keyframes move48 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 82vh;
        transform: translate(-78px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(49) {
    background: #fff;
    width: 51px;
    height: 51px;
    left: 38vw;
    bottom: 11vh;
    -webkit-animation: move49 infinite 3s;
    animation: move49 infinite 3s;
}

@-webkit-keyframes move49 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 56vh;
        transform: translate(-11px, 0);
        opacity: 0;
    }
}

@keyframes move49 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 56vh;
        transform: translate(-11px, 0);
        opacity: 0;
    }
}

.bubble:nth-child(50) {
    background: #fff;
    width: 25px;
    height: 25px;
    left: 87vw;
    bottom: 39vh;
    -webkit-animation: move50 infinite 11s;
    animation: move50 infinite 11s;
}

@-webkit-keyframes move50 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 77vh;
        transform: translate(-74px, 0);
        opacity: 0;
    }
}

@keyframes move50 {
    0% {
        bottom: -100px;
    }

    100% {
        bottom: 77vh;
        transform: translate(-74px, 0);
        opacity: 0;
    }
}

.main-intro-box a {
    text-decoration: none;
    color: #000;
}

.main-intro-box.re a {
    text-decoration: none;
    color: #fff;
}

@media (max-width: 1439px) {
    .main-intro-container, .inqury-wrapper, .license-wrapper {
        width: 1200px;
    }

    .license-slide img {
        width: 300px;
    }

    .main-greet-mes-container {
        width: 1200px;
    }
}

@media (max-width: 1300px) {
    #fast-nav {
        display: none;
    }

    .main-intro-container, .inqury-wrapper, .license-wrapper {
        width: 1000px;
    }

    .main-greet-mes-container {
        width: 1000px;
    }

    .license-slide img {
        width: 260px;
    }

    .inqury-content-title {
        font-size: 20px;
    }

    .inqury-content-list {
        font-size: 16px;
    }
}

/* 태블릿 대응 (768 ~ 1023px) */
@media (max-width: 1023px) {
    .page-content {
        width: 100%;
        padding: 0 20px;
    }
    .page-thumbnail {
        padding: 0 20px;
    }
    .page-side-nav {
        display: none;
    }

    .main-greet-mes-container {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .page-side-nav {
        display: none;
    }
    .main-intro-container {
        flex-direction: column;
        width: 100%;
    }
    .main-intro-container ul {
        display: none;
        width: 100%;
        margin-bottom: 20px;
        height: 420px;
    }
    .main-intro-container ul:first-child {
        display: flex;
    }

    .main-intro-box {
        padding: 20px;
    }

    .license-wrapper, .license-track {
        overflow: visible;
    }

    .license-wrapper, .inqury-wrapper {
        width: 740px;
    }

    .inqury-wrapper {
        height: 300px;
    }

    .inqury-content-container.lg {
        width: 100%;
        margin: 0;
    }

    .inqury-content-container.sm {
        display: none;
    }

    .license-slide img {
        width: 180px;
    }

    .license-caption {
        width: 180px;

    }

    .main-title-container {
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .license-track {
        height: 400px;
    }

    .inqury-content-title {
        text-align: center;
    }
}

/* 모바일 대응 (<= 767px) */
@media (max-width: 767px) {
    .page-content {
        width: 100%;
        padding: 0 20px;
    }
    .page-thumbnail {
        padding: 0 20px;
    }

    .license-wrapper, .inqury-wrapper, .main-greet-mes-container, .main-intro-container {
        width: 90vw;
    }

    .main-intro-container {
        font-size: 16px;
    }

    .main-title {
        font-size: 36px;
    }

    .main-detail {
        width: 90vw;
    }

}