.skip-btn{display: block; width : 80px;height : 80px; display: flex;align-items: center;justify-content: center; white-space: nowrap; position : fixed; z-index: 1200;font-family: brown; letter-spacing: 0.15em; background: #013281;color : #fff; border-radius: 50%; font-size: 14px;transform: translateX(-50%) translateY(-50%);transition : transform .5s; cursor: pointer;z-index: 10;}
.end .skip-btn{transform: translateX(-50%) translateY(-50%) scale(0);}
.skip-btn.hide{transform: translateX(-50%) translateY(-50%) scale(0);}
.skip-btn::after{position :absolute; content : ''; width : 143px;;height : 143px; background: url(/assets/images/intro/intro-rotate-text.png)no-repeat center / contain; z-index: -1;animation : rotate-text 8s infinite linear; border-radius: 50%;}

#intro{position :fixed; width : 100%;height : 100%; left : 0;top : 0; background: #fff;z-index: 10000;}
#intro.end{pointer-events: none; opacity: 0;}

.intro-list{display: grid;grid-template-columns: repeat(13, 1fr);width : 100%;height : 100%;position : relative; z-index: 1;}
.intro-list > li{position :relative;}
.intro-list > li::after{position : absolute; content : ''; width : 1px;height : 100%; right : 0;top : 0; background: #C3C3C3; clip-path : inset(0 0 100% 0); animation : intro-line 1s both; animation-delay: calc(var(--i) * 0.05s + 0.5s);}

@keyframes intro-line {
    100%{clip-path: inset(0);}
}

.intro-color-bar{width : calc(100% / 13);height : 0%; background: #BE2009;position : absolute;left :0;top : 0; left : 30.7692%; opacity: 0;}

.intro-img{position : absolute;width : 100%;top : 0;left : 0;transform: translateY(-100%); filter: blur(10px); opacity: 0;}

.intro-tit-box{position : absolute; font-family: futura-pt; font-size: 96px; font-weight: 500; text-transform: uppercase; line-height: 1.2em;z-index: 2; left : calc(100% / 13 * 6);top : 75px}

.intro-tit-box .color{color : #C5AE84}
.intro-tit-02{padding-left: 115px;}
.intro-tit-03{transform: translateX(-200px);}

.intro-tit-box .line{clip-path: inset(0% -100% 0% -100%);}
.intro-tit-box .char{transform: translateY(100%);}

.intro-dim{display: grid;grid-template-columns: repeat(13, 1fr);position : absolute; left :0;top : 0;width : 100%;height : 100%;z-index: 10;}
.intro-dim > li{background: #013281; height : 0; transform: scale(1.05);}

@media(max-width : 1200px){

    .skip-btn{display: none}
    .m_skip-btn{display: flex;align-items: center;justify-content: center; background: #013281; font-family: brown; font-size: 16px;position :absolute; bottom : 20px; left : 20px; border-radius: 100px; color : #fff; line-height: 1em;padding : 8px 24px 12px;z-index: 10; border : 1px solid #fff; transition : .5s;}
    .m_skip-btn.hide{transform: scale(0); opacity: 0; pointer-events: none;}

    .intro-list{grid-template-columns: repeat(1, 1fr);width : 100%;height : 100%;position : relative; z-index: 1;}

    .intro-list > li:nth-child(6),
    .intro-list > li:nth-child(7),
    .intro-list > li:nth-child(8),
    .intro-list > li:nth-child(10),
    .intro-list > li:nth-child(11),
    .intro-list > li:nth-child(12){display: none;}

    .intro-list > li:nth-child(1){order: 4;}

    .intro-list > li:nth-child(2){order: 1}
    .intro-list > li:nth-child(3){order: 2}
    .intro-list > li:nth-child(4){order: 3}
    .intro-list > li:nth-child(5){order: 5}
    .intro-list > li:nth-child(9){order: 6}
    .intro-list > li:nth-child(13){order: 7}
    
    .intro-list > li{position :relative;}
    .intro-list > li::after{width : 100% !important;height : 1px !important; right : 0;top : 0;clip-path : inset(0 100% 0 0); animation-delay: 0s !important;}
    .intro-list > li:not(:last-child)::after {width : 100% !important;height : 1px !important; right : 0;top : 0;clip-path : inset(0 100% 0 0); animation-delay: 0s !important;}

    @keyframes intro-line {
        100%{clip-path: inset(0);}
    }

    .intro-color-bar{width : 100%;height : calc(100% / 7); background: #BE2009;position : absolute;left :0;top : 57.14%; left : 0; opacity: 0;}

    .intro-img{position : absolute;width : calc(100% / 6);height : 100%; top : 0;left : 0;transform: translateX(0%) !important; filter: blur(10px); opacity: 0; object-fit: cover; object-position: center;}
    .intro-img-01{left : 0;}
    .intro-img-02{left : calc(100% / 6 * 1);}
    .intro-img-03{left : calc(100% / 6 * 2);}
    .intro-img-04{left : calc(100% / 6 * 3);}
    .intro-img-05{left : calc(100% / 6 * 4);}
    .intro-img-06{left : calc(100% / 6 * 5);}

    .intro-tit-box{display: flex;flex-direction: column;align-items: center;justify-content: center; font-size: 24px; font-weight: 500; text-transform: uppercase; line-height: 1.2em;z-index: 2; left : 0;top : calc(100% / 7 * 3);width : 100%; height : calc(100% / 7)}
    .intro-tit-box .line{display: flex !important;justify-content: center;}

    .intro-tit-box .color{color : #C5AE84}
    .intro-tit-02{padding-left:0}
    .intro-tit-03{transform: translateX(0);}

    .intro-tit-box .line{clip-path: inset(0% -100% 0% -100%);}
    .intro-tit-box .char{transform: translateY(100%);}

    .intro-dim{display: grid;grid-template-columns: repeat(1, 1fr);position : absolute; left :0;top : 0;width : 100%;height : 100%;z-index: 10;}
    .intro-dim > li{background: #013281; height : 0; transform: scale(1.05);}

    .intro-dim > li:nth-child(6),
    .intro-dim > li:nth-child(7),
    .intro-dim > li:nth-child(8),
    .intro-dim > li:nth-child(10),
    .intro-dim > li:nth-child(11),
    .intro-dim > li:nth-child(12){display: none;}

}