.gnb_modal{
    width: 7rem;
    height: 7rem;
    position: fixed;
    left: calc(50% - 3.5rem);
    top: -7rem;
    background-color: var(--inact-color);
    transition: all 1s ease 0s;
    border-radius: 50%;

    z-index: 50001;
}
.gnb_modal.on{
    transform: scale(25);
}
.btn_gnb{
    width: 7rem;
    height: 7rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: fixed;
    left: 50%;
    top: -7rem;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px #00000062;
    border-radius: 50%;
    background-color: #fff;
    z-index: 50000;
    cursor: pointer;
    transition: all 0.4s ease 0s;
}
.btn_gnb.on{
    top: 0;
}
.btn_gnb>div{
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;
}
.btn_gnb img{
    height: 0.8rem;
}
.gnb_wrap{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box; 
    z-index: 50002;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: 5rem calc(100% - 12rem) 5rem;
    gap: 1rem;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.8s ease 0.3s;
}
.gnb_wrap.on{
    opacity: 1;
    pointer-events: auto;
}
.gnb_top{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 1rem;
    align-items: center;
}
.logo{
    grid-column: 6/8;
}
/* .logo img{
    max-width: 200px;
} */
.tnb{
    grid-column: 10/12;
    display: flex;
    gap: var(--space-x-small);
}
.btn_close{
    grid-column: 12/13;
    cursor: pointer;
}
.gnb{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 1rem;
    height: 100%;
}
.gnb>li{
    border-radius: var(--border-radius);
    overflow: hidden;
}
.gnb>li>a{
    display: block;
    height: 100%;
    position: relative;
}
.gnb>li:nth-of-type(2) a video{
    object-position: 40% center;
}
.gnb>li:nth-of-type(5) a video{
    object-position: 41% center;
}
.gnb>li>a>video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5);
}
.gnb>li:hover a video{
    filter: brightness(1);
}
.menu_txt{
    position: absolute;
    width: 94%;
    left: calc(50% - 47%);
    top: 35%;
    color: #fff;
}
.menu_txt h2{
    text-align: center;
    margin-bottom: var(--space-small);
}
.gnb_bottom{
    display: flex;
    justify-content: center;
    align-items: center;
}
.gnb_bottom a{
    color: var(--main-color);
    margin-left: 1rem;
}
main{
    min-height: 200vh;
    padding-top: var(--space-middle);
}
div.station1{
    height: 874px;
    margin-left: 4rem;
    margin-right: 4rem;
    border-radius: var(--border-radius);
    position: relative;
}
.station1 img,
.station1 video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.station1::after{
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(40deg, rgb(0 0 0 / 42%), transparent);
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 0 40px rgb(0 0 0 / 57%) inset;
    border-radius: var(--border-radius);
}
.station1_txt{
    position: absolute;
    left: var(--space-large);
    top: 43%;
    transform: translateY(-50%);
    width: 34%;
    z-index: 2;
    color: #fff;
}
.station1_txt h3{
    margin-bottom: var(--space-small);
}
.station1 .swiper-pagination-bullet {
    width: 0.8rem;
    height: 0.8rem;
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, var(--border-radius));
    background: var(--inact-color, #000);
    opacity: 0.4;
    transition: all 0.5s ease 0s;
}
.station1 .swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--main-color);
    width: 0.8rem;
    height: 0.8rem;
}
.station1 .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.station1 .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 15px 0;
    display: block;
}
.common_frame.tp1{
    display: flex;
    gap: var(--space-middle);
}
.tp1{
    position: relative;
}
.tp1_txt{
    flex: 1.5;
    margin-left: 5rem;
}
.tp1_txt>*{
    margin-bottom: var(--space-small);
}
.tp1_txt h4{
    margin-bottom: var(--space-large);
}
.tp1_img{
    margin-right: 5rem;
    margin-top: 50px;
    flex: 2;
    display: flex;
    align-items: flex-end;
    gap: var(--space-small);
    flex-direction: row-reverse;
}
.tp1_1{flex:1;}
.tp1_2{flex:1;}
.tp1_img img{
    border-radius: var(--border-radius);
}

.tp2{
    text-align: center;
}
.tp2>h2{
    margin-bottom: var(--space-small);
}
.tp2>h4{
    margin-bottom: var(--space-large);
}

.tp3{
    display: flex;
    justify-content: space-between;
    gap: var(--space-large);
}
.station2{
    height: 650px;
    flex: 650;
    & img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    border-radius: var(--border-radius);
}
.station3{
    flex: 650;
    & li > *{
        margin-bottom: var(--space-small);
    }
    & li >*:last-child{
        margin-bottom: 0;
    }
}
.st3_train_info{
    display: flex;
    gap: var(--space-middle);
}

.st3_train_desc{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 10;
}
.station3 h3{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
}
.tp4{
    display: flex;
    gap: var(--space-large);
    justify-content: space-between;
    /* background-image: url(../img/img4.jpg) no-repeat 50% 50% cover; */
}
.tp4_img{
    margin-left: 9rem;
    flex: 722;
    height: 700px;
    & img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--border-radius);
    }
}
.tp4_txt{
    flex: 688;
    padding-top: 5rem;
    margin-right: 9rem;
}
.tp4_txt>*{
    margin-bottom: var(--space-middle);
}
.tp4_txt>*:last-child{
    margin-bottom: 0;
}

.tp5{
    text-align: center;
    /* position: relative; */
    /* overflow: hidden; */
}
.tp5>*{
    margin-bottom: var(--space-small);
}
.tp5>*:last-child{
    margin-bottom: 0;
}
.faq_form{
    margin:var(--space-large);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-small);
}
.faq_form label{
    display: none;
}
#search{
    background-color: #F0F0F0;
    border: 3px solid var(--main-color);
    width: 600px;
    height: 3rem;
    border-radius: 50px;
    padding-left: 50px;
    box-sizing: border-box;
    font-size: inherit;
    text-overflow: ellipsis;
    overflow: hidden;
}
#search::placeholder{
    color: #959695;
}
.btn_search{
    height: 4rem;
    background-color: initial;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
#bouncingBalls{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

footer{
    background-color: var(--dark-color);
    color: #fff;
    padding: var(--space-middle) 4rem var(--space-x-large);
}
.ftop{
    margin-bottom: var(--space-middle);
    display: flex;
    justify-content: space-between;
}
.finfo{
    width: 60%;
}
.fnb{
    display: flex;
    gap: var(--space-small);
}
.coinfo{
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--space-small);
}
.coinfo dd{
    margin-right: var(--space-small);
}
.sns{
    display: flex;
    gap: var(--space-x-small);
    margin-top: var(--space-small);
}
.fbottom{
    text-align: center;
}
.copy{
    margin-top: var(--space-small);
}
.btn_top{
    position: fixed;
    z-index: 40000;
    left: calc(50% - 1.2rem);
    width: 2.4rem;
    height: 2.4rem;
    bottom: 30px;
    /* bottom: -120px; */
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 0 20px #3e3e3e7e;
    cursor: pointer;
    transform: scale(0);
    transition: bottom 0.7s ease 0s;
}
.btn_top.on{
    transform: scale(1);
    /* bottom: 30px; */
}