/*인트로*/


.intro {width:100%; height:var(--nvh); position:relative; overflow:hidden;}
.intro.is-loading {pointer-events:none;}
.intro.is-ready {pointer-events:auto;}
.intro .intro-wrap {width:100%; height:100%; position:relative; display:flex; align-items:stretch;}
.intro .intro-wrap .intro-box {width:50%; height:100%; background:var(--white);}
.intro .intro-wrap .intro-box .intro-conts-wrap {width:100%; height:100%; position:relative;}
.intro .intro-wrap .intro-box .intro-conts-wrap .img-box {width:100%; height:100%; position:relative; z-index:1;}
.intro .intro-wrap .intro-box .intro-conts-wrap .img-box img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover; transition:filter 0.45s ease;}
.intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts {width:100%; height:100%; position:absolute; z-index:10; left:0; top:0; container-type:inline-size;}
.intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .inner {width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center;}
.intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .title {width:90%; height:100%; display:flex; align-items:center; justify-content:center; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:1; visibility:visible; opacity:1; transition:opacity 0.35s ease, visibility 0.35s ease;}
.intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .title span {font-size:clamp(18px, 5cqi, 30px); font-weight:700; color:var(--white); text-shadow:3px 3px 5.3px rgba(0,0,0,0.3);}
.intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts {width:90%; display:flex; flex-direction:column; text-align:center; align-items:center; justify-content:center; visibility:hidden; opacity:0; transition:opacity 0.35s ease, visibility 0.35s ease;}
.intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .tlt {font-size:clamp(15px, 2.4cqi, 20px); font-weight:600; color:var(--key-color);}
.intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .tlt span {text-shadow:3px 3px 5.3px rgba(0,0,0,0.3);}
.intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .conts-box {width:100%; display:flex; flex-direction:column; gap:var(--gap-8); margin:30px 0 80px 0;}
.intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .conts-box > * {width:100%; text-align:center; color:var(--white);}
.intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .conts-box .head {font-size:clamp(22px, 6cqi, 40px); font-weight:600;}
.intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .conts-box .conts {font-size:clamp(13px, 2.4cqi, 20px);}
.intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .button {width:180px; aspect-ratio:180/60; background:#262626; display:flex; align-items:center; justify-content:center; font-size:clamp(15px, 2.4cqi, 20px); font-weight:500; color:var(--key-color); border-radius:100px; transition:background 0.3s ease, color 0.3s ease;}
.intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .button:hover {background:var(--key-color); color:#262626;}

.intro .intro-wrap .intro-box.is-active .intro-conts-wrap .title {opacity:0; visibility:hidden;}
.intro .intro-wrap .intro-box.is-active .intro-conts-wrap .intro-conts .hide-conts {opacity:1; visibility:visible;}

.intro .intro-wrap .intro-box.is-dim .intro-conts-wrap .img-box img {filter:grayscale(100%);}


@media screen and (max-width: 1280px) {
    .intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .button {width:150px;}
}

@media screen and (max-width: 1024px) {
    .intro .intro-wrap {flex-direction:column;}
    .intro .intro-wrap .intro-box {width:100%; height:50%;}
    .intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .button {width:180px;}
}

@media screen and (max-width: 768px) {
    .intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .conts-box {margin:20px 0 50px 0;}
}

@media screen and (max-width: 648px) {
    .intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .button {width:150px;}
}

@media screen and (max-width: 480px) {
    .intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .conts-box {margin:15px 0 30px 0;}
    .intro .intro-wrap .intro-box .intro-conts-wrap .intro-conts .hide-conts .button {width:140px;}
}




@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 648px) {}
@media screen and (max-width: 480px) {}