@charset "utf-8";

/* header */
header nav, 
header .sns,
header .menuButton{ display: none; }
header .popupButton{ margin: 0; }

/* floating */
.floating{ display: none; }

.headerBox .btn-popup { display: flex; justify-content:center; align-items:center; width: 90px; height: 35px; border-radius:10px; background-color: #FAA74A; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: #fff; }
.headerBox .btn-popup { margin-left:auto; }

.intro__wrap { display: flex; height: 100dvh; }
.intro__wrap .intro__box { position: relative; flex:1; height: 100%;  transition:0.5s ease-out; }
.intro__wrap .intro__box:nth-child(1) { background: url('/img/main/intro_01.jpg') no-repeat 92.88% center/cover; }
.intro__wrap .intro__box:nth-child(2) { background: url('/img/main/intro_02.jpg') no-repeat 42.10% center/cover; }
.intro__wrap .intro__box:nth-child(3) { background: url('/img/main/intro_03.jpg') no-repeat 58.9% center/cover; }
.intro__wrap:not(:hover) .intro__box::after { display: none; }
.intro__wrap .intro__box::after{ content:""; display:none; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.60) 100%); }
.intro__box .title__area { position: absolute; left: 70px; bottom: 254px;  }
.intro__box .title__area h2 { font-size: 50px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: #fff; transition:0.5s ease-out;}
.intro__box .title__area .btn-link { overflow:hidden; display: flex; justify-content:center; align-items:center; width: 217px; height: 56px; margin-top: 30px; border-radius: 56px; border: 2px solid rgba(255,255,255,0.5); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: #fff; transition: 0.5s ease-out;}
.intro__box .title__area .btn-link::after{ content:""; display: none; width: 10px; height: 10px; margin-left: 10px; background: url('/img/main/link_arrow.svg') no-repeat center center/contain; }
.intro__info { position:fixed; left: 50%; bottom: 60px; display:flex; justify-content:center; align-items:center; gap:20px; width: calc(100% - 40px); max-width:754px; height: 109px; border-radius:20px; transform:translateX(-50%); background-color: rgba(0,0,0,0.3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); text-align: center; z-index: 10;}
.intro__info .info-box { padding: 0 20px; }
.intro__info .info-box > p { margin-bottom: 10px; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: #fff; }
.intro__info .info-box > p > br { display:none; }
.intro__info .info-box > em { font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: #00DCD2; }
/* hover */
.intro__wrap .intro__box:hover { flex:2.55; }
.intro__wrap .intro__box:hover .title__area .btn-link { width: 237px; background-color: #fff; color: #353535; }
.intro__wrap .intro__box:hover .title__area .btn-link::after { display: block; }
.intro__wrap:hover .intro__box:not(:hover)::after { display: block; }
.intro__wrap:hover .intro__box:not(:hover) .title__area h2 { font-size: 40px; }



@media screen and (max-width:1700px){
	.intro__wrap:hover .intro__box:not(:hover) .title__area { left: 50px; }
}
@media screen and (max-width:1500px){
    .intro__box .title__area h2 { font-size: clamp(24px,3.57vw,50px); }
	.intro__wrap:hover .intro__box:not(:hover) .title__area { left: 24px; }
	.intro__wrap:hover .intro__box:not(:hover) .title__area h2 { font-size: clamp(20px,2.85vw,40px); }
}
@media screen and (max-width:1300px) {
	.intro__box .title__area .btn-link { width: 180px; height: 46.5px; font-size: 16px; }
	.intro__wrap .intro__box:hover .title__area .btn-link { width: 200px; }
	.intro__wrap:hover .intro__box:not(:hover) .title__area { left: 20px; }
}

@media screen and (max-width:1024px) {
	.intro__wrap { flex-direction:column;  padding-bottom: 80px; background-color: #333; }
	.intro__box .title__area { display: flex; justify-content:space-between; align-items:flex-end; width:calc(100% - 60px); left: 30px; bottom:50%; transform:translateY(50%); }
	.intro__box .title__area .btn-link { margin-top: 20px; }
	.intro__wrap .intro__box .title__area { transition:0.5s ease-out; }
	.intro__box .title__area h2 {font-size: 24px; }
	.intro__wrap:hover .intro__box:not(:hover) .title__area h2 { font-size: 20px; }
	.intro__info { height: 80px; bottom:0; background-color: transparent; gap:10px; border-radius: 0; }
	.intro__info .info-box { padding: 0 10px; }
	.intro__info .info-box > p { font-size: 14px; margin-bottom: 4px; }
	.intro__info .info-box > em { font-size: 16px; }
	.intro__wrap:hover .intro__box:not(:hover) .title__area .btn-link { height: 0; margin-top: 0; opacity:0; }
	.intro__wrap .intro__box:nth-child(2) { background-position: 42.10% 40%; }
	.intro__wrap .intro__box:nth-child(3) { background-position: 58.9% 20%; }
}
@media screen and (max-width:768px) {
	.intro__box .title__area .btn-link { margin-top: 0px; width: 140px; height: 36px; font-size: 14px; }
	.intro__wrap .intro__box:hover .title__area .btn-link { width: 160px; }
	.intro__box .title__area .btn-link::after { width: 6px; height: 6px; margin-left: 6px; }
}
@media screen and (max-width:500px){
	.intro__info .info-box > p > br { display:inline; }
}