@media (max-width:1400px){
    html{
        font-size: var(--font-size-tab);
    }
    .gnb{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 1rem;
        height: 100%;
    }
    .gnb>:nth-of-type(5){
        grid-column: 1/3;
    }
    .menu_txt p{
        display: none;
    }
    .menu_txt{
        position: absolute;
        width: 94%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
    }
    .menu_txt h2{
        margin-bottom: 0;
    }
    div.station1{
        height: 680px;
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .station1_txt{
        left: var(--space-middle);
        top: 70%;
        width: 50%;
    }
    main{
        padding-top: var(--space-middle);
    }
    .common_frame{
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .common_frame.tp1{
        display: flex;
        gap: var(--space-xx-small);
        flex-direction: column;
    }
    .tp1_txt{
        flex: 700;
        margin-left: 0rem;
    }
    .tp1_txt>*{
        margin-bottom: var(--space-small);
    }
    .tp1_txt h4{
        margin-bottom: var(--space-large);
    }
    .tp1_img{
        margin-top: 0px;
        margin-right: 0rem;
        flex: 952;
        display: flex;
        align-items: flex-end;
        gap: var(--space-small);
        flex-direction: row-reverse;
    }
    .tp1_1{flex:1;}
    .tp1_2{flex:1;
    margin-top: 15rem;}
    .tp1_img img{
        border-radius: var(--border-radius);
    }

    .tp3{
        gap: var(--space-middle);
    }
    .station2{
        height: 500px;
    }

    .tp4{
        display: block;
    }
    .tp4_img{
        margin-left: 4rem;
        height: 600px;
        & img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--border-radius);
        }
    }
    .tp4_txt{
        padding-top: 3rem;
        margin-right: 0rem;
    }
    
    footer{
        padding: var(--space-middle) 2rem var(--space-x-large);
    }
    .ftop{
        margin-bottom: var(--space-middle);
        display: block;
        text-align: center;
    }
    .finfo{
        width: auto;
    }
    .fnb{
        justify-content: center;
        flex-wrap: wrap;
    }
    .coinfo{
        justify-content: center;
    }
    .sns{
        justify-content: center;
    }
    .fsns{
        margin-top: var(--space-middle);
    }
}
@media (max-width:768px){
    html{
        font-size: var(--font-size-mobile);
        word-break: break-all;
    }
    br{
        display: none;
    }
    .gnb{
        grid-template-columns: repeat(1,1fr);
    }
    .gnb>li>a>video{
        display: none;
    }
    .menu_txt{
        color: #000;
    }
    .logo{
        grid-column: 1/4;
    }
    .tnb{
        grid-column: 8/12;
        display: flex;
        gap: var(--space-x-small);
    }
    .gnb>:nth-of-type(5){
        grid-column: initial;
    }
    div.station1{
        height: 600px;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .station1_txt{
        left: var(--space-small);
        top: 70%;
        width: 70%;
    }
    main{
        padding-top: var(--space-small);
    }
    .common_frame{
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .tp1_1{
        display: none;
    }
    .tp1_2{
        flex:initial;
    }
    .tp1_2{
        margin-top: var(--space-middle);
    }
    .tp3{
        display: block;
    }
    .station2{
        height: 400px;
        margin-bottom: var(--space-middle);
    }

    .tp4_img{
        margin-left: 0rem;
        height: 400px;
        & img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--border-radius);
        }
    }
    .tp4_txt{
        padding-top: 2rem;
        margin-right: 0rem;
    }
    #search{
        padding-left: 1rem;
    }
}
@media (max-width:280px){
    .station1_txt{
        left: var(--space);
        width: 90%;
        top: 70%;
    }
    .tp1_2{
        margin-top: var(--space-middle);
    }
}