#intro{width : 100%;height : 100%;position : fixed; z-index: 1000; background: #0A2C59;}
/* #intro.end{pointer-events: none;} */

.intro-bg{display: grid; grid-template-columns: repeat(5, 1fr); width : 100%;height : 100%;position : absolute;left : 0; top : 0;}
.intro-bg > span{background: #fff; transition : clip-path 0.7s; clip-path: inset(0% 0 0);}

.intro-bg > span:nth-child(5n + 1){transition-delay : 0.6s;}
.intro-bg > span:nth-child(5n + 2){transition-delay : 0.45s;}
.intro-bg > span:nth-child(5n + 3){transition-delay : 0.3s;}
.intro-bg > span:nth-child(5n + 4){transition-delay : 0.15s;}
.intro-bg > span:nth-child(5n + 5){transition-delay : 0s;}

.end .intro-bg > span{clip-path: inset(100% 0 0);}

#intro > section{position : absolute; width : 100%;height : 100%; pointer-events: none;}

.intro-grid{pointer-events: none;z-index: 100; transition : opacity .5s;}
.end .intro-grid{opacity: 0;}
.intro-grid > b::after{position :absolute;content: ''; width : 100%; height : 1px; background: rgba(0,0,0,0.3);left : 0; transition : clip-path 2s, background 1s;z-index: 10;}
.intro-grid > b:nth-child(1)::after{top : calc(33.3333% - 1px); clip-path: inset(0 100% 0 0);}
.intro-grid > b:nth-child(2)::after{top : calc(66.6666% - 1px); clip-path: inset(0 100% 0 0);}
.intro-grid > b:nth-child(3)::after{width : 1px; height : 100%; top : 0; left : calc(20% - 1px); clip-path: inset(0 100% 0 0);}

.intro-grid > b::before{position :absolute;content: ''; width : 1px; height : 100%; background: rgba(0,0,0,0.3); transition : clip-path 1.4s, background 1s;z-index: 10;}
.intro-grid > b:nth-child(1)::before{left : calc(40% - 1px); clip-path: inset(0 0 100% 0);}
.intro-grid > b:nth-child(2)::before{left : calc(60% - 1px); clip-path: inset(0 0 100% 0);}
.intro-grid > b:nth-child(3)::before{left : calc(80% - 1px); clip-path: inset(0 0 100% 0);}

.on .intro-grid > b::before,
.on .intro-grid > b::after{clip-path: inset(0);}


.intro-img-box{position : absolute; transition : transform 1s;}
.intro-img-box > img{position : absolute;left : 0; top : 0;width : 100%;height : 100%; object-fit: cover; object-position: center; transition : clip-path .8s;}
.intro-img-box > img:nth-child(1){position : static; transition-delay: 0s;}
.intro-img-box > img:nth-child(2){transition-delay: 0.1s;}
.intro-img-box > img:nth-child(3){transition-delay: 0.2s;}
.intro-img-box > img:nth-child(4){transition-delay: 0.2s;}
.intro-img-box > img:nth-child(5){transition-delay: 0.1s;}
.intro-img-box > img:nth-child(6){transition-delay: 0s;}

.intro-tit-box{display: flex;flex-direction: column; justify-content: end; width : 20%;height : 33.3333%;position : absolute; padding-left: 36px;gap : 20px;}
.intro-tit-box > p{font-family: futura-pt; font-size: 41px; font-weight: 600; line-height: 0.7em; letter-spacing: 0.1em;}
.intro-tit-box.color > p{color : #024098}

.intro-tit-box > p .line{overflow: hidden;}
.intro-tit-box > p .char{transition : transform .7s;transform: translateY(100%);}

.intro-sub-tit-box{padding : 47px; width : 20%;height : 33.3333%;position : absolute; font-size: 25px; font-family: PT; color : #004098; letter-spacing: -0.04em; font-weight: 500; opacity: 0; transition : opacity 1s, transform 1s;}

.intro-desc-box{display: flex;align-items: end; padding : 47px; width : 20%;height : 33.3333%;position : absolute; font-size: 16px; font-family: PT; color : #8E8E8E; letter-spacing: -0.04em; font-weight: 500; opacity: 0; transition : opacity 1s, transform 1s;}

/***intro1****/

.intro-01 .intro-img-box{width : 20%; height : 100%; left : 20%;}
.intro-01 .intro-img-box > img:nth-child(1){clip-path: inset(33.3333% 0 66.6666%);}
.intro-01 .intro-img-box > img:nth-child(2){clip-path: inset(66.6666% 0 33.3333%);}
.intro-01 .intro-img-box > img:nth-child(3){clip-path: inset(100% 0 0);}

.type2 .intro-01 .intro-img-box > img:nth-child(1){clip-path: inset(0 0 66.6666%);}
.type2 .intro-01 .intro-img-box > img:nth-child(2){clip-path: inset(33.3333% 0 33.3333%);}
.type2 .intro-01 .intro-img-box > img:nth-child(3){clip-path: inset(66.6666% 0 0);}

.intro-01 .intro-tit-box{left : 80%; top : 33.3333%;}
.intro-01 .intro-tit-box.color{left : 60%; top : 0;}

.type2 .intro-01 .intro-tit-box-01 > p .char{transform: translateY(0);}
.type2 .intro-01 .intro-tit-box-02 > p .char{transform: translateY(0);}

.intro-01 .intro-sub-tit-box{left : 40%;top : 33.3333%; transform: translateX(-100px);}
.type2 .intro-01 .intro-sub-tit-box{opacity: 1; transform: translateY(0);}

.intro-01 .intro-desc-box{left : 60%;top : 33.3333%; transform: translateX(100px);}
.type2 .intro-01 .intro-desc-box{opacity: 1; transform: translateY(0);}

/***intro2****/

.intro-02 .intro-img-box{width : 60%; height : 33.3333%; left : 20%;}

.intro-02 .intro-img-box > img:nth-child(1){clip-path: inset(0 100% 0 0%);}
.intro-02 .intro-img-box > img:nth-child(2){clip-path: inset(0 66.6666% 0 33.3333%);}
.intro-02 .intro-img-box > img:nth-child(3){clip-path: inset(0 33.3333% 0 66.6666%);}

.type3 .intro-02 .intro-img-box > img:nth-child(1){clip-path: inset(0 66.6666% 0 0);}
.type3 .intro-02 .intro-img-box > img:nth-child(2){clip-path: inset(0 33.3333% 0 33.3333%);}
.type3 .intro-02 .intro-img-box > img:nth-child(3){clip-path: inset(0 0 0 66.6666%);}

.intro-02 .intro-tit-box{left : 80%; top : 33.3333%;}
.intro-02 .intro-tit-box.color{left : 20%; top : auto;bottom : 0;}

.type3 .intro-02 .intro-tit-box-01 > p .char{transform: translateY(0);}
.type3 .intro-02 .intro-tit-box-02 > p .char{transform: translateY(0);}

.intro-02 .intro-sub-tit-box{left : 20%;top : 33.3333%; transform: translateX(-100px);}
.type3 .intro-02 .intro-sub-tit-box{opacity: 1; transform: translateY(0);}

.intro-02 .intro-desc-box{left : 40%;top : 33.3333%; transform: translateX(100px);}
.type3 .intro-02 .intro-desc-box{opacity: 1; transform: translateY(0);}

/***intro3****/

.type4 .intro-02 .intro-img-box{transform: translateY(100%);}

.intro-02 .intro-img-box > img:nth-child(4){clip-path: inset(0 66.6666% 0 33.3333%);}
.intro-02 .intro-img-box > img:nth-child(5){clip-path: inset(0 33.3333% 0 66.6666%);}
.intro-02 .intro-img-box > img:nth-child(6){clip-path: inset(0 0 0% 100%)}

.type4 .intro-02 .intro-img-box > img:nth-child(1){clip-path: inset(0 66.6666% 0 0);}
.type4 .intro-02 .intro-img-box > img:nth-child(2){clip-path: inset(0 33.3333% 0 33.3333%);}
.type4 .intro-02 .intro-img-box > img:nth-child(3){clip-path: inset(0 0 0 66.6666%);}

.type4 .intro-02 .intro-img-box > img:nth-child(4){clip-path: inset(0 66.6666% 0 0);}
.type4 .intro-02 .intro-img-box > img:nth-child(5){clip-path: inset(0 33.3333% 0 33.3333%);}
.type4 .intro-02 .intro-img-box > img:nth-child(6){clip-path: inset(0 0 0 66.6666%);}

.intro-03 .intro-tit-box{left : 80%; top : 33.3333%;}
.intro-03 .intro-tit-box.color{left : 0%; top : 33.3333%;}

.type4 .intro-03 .intro-tit-box-01 > p .char{transform: translateY(0);}
.type4 .intro-03 .intro-tit-box-02 > p .char{transform: translateY(0);}

.intro-03 .intro-sub-tit-box{display: flex; flex-direction: column;justify-content: end; left : 20%;top : 66.6666%; transform: translateX(-100px);}
.type4 .intro-03 .intro-sub-tit-box{opacity: 1; transform: translateY(0);}

.intro-03 .intro-desc-box{left : 60%;top : 66.6666%; transform: translateX(100px);}
.type4 .intro-03 .intro-desc-box{opacity: 1; transform: translateY(0);}

/*** TYPE5 ***/
.intro-04{display: flex;align-items: center;justify-content: center;}

.intro-desc{font-size: 50px; font-family: futura-pt; letter-spacing: 0.1em; font-weight: 500; color : #fff;}
.intro-desc b{font-weight: 700; font-family: futura-pt-bold;}
.intro-desc .char{opacity: 0; transform: translateY(-30px);}

/*** END ***/

.skip-btn{display: flex;align-items: center;justify-content: center; position : absolute; background: #fff;width : 78px; height : 78px; color : #06033C; font-family: futura-pt; font-weight: 600; right : 100px; bottom : 80px; z-index: 1;border-radius: 50%; transform: translateX(-50%) translateY(-50%) scale(0); transition : transform 1s;}
.skip-btn.on{transform: translateX(-50%) translateY(-50%) scale(1);}