@import url('https://fonts.googleapis.com/css2?family=Asta+Sans:wght@300..800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; height: 100%; overflow: hidden; font-family: "Asta Sans", sans-serif; background: #000; }

.loading{
    width:100%; height:100%; position:fixed; left:0; top:0; background:#fff; z-index:1000;
}
.main_loader{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 350px; height: 350px; display: flex; align-items: center; justify-content: center;
}
.circular_loader {
    animation: rotate 2s linear infinite;
    height: calc(100% + 40px); transform-origin: center center; width: calc(100% + 40px);
    position: absolute; top: -20px; left: -20px;
}
.loader_path {
    stroke-dasharray: 150, 200; stroke-dashoffset: -10;
    animation: dash_circle 1.5s ease-in-out infinite; stroke-linecap: round;
}
@keyframes rotate { 100% { transform: rotate(360deg); } }
@keyframes dash_circle {
    0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124; }
}

.gateWrap {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
    display: flex;
}


.gateWrap::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid #fff;
    z-index: 50;
    pointer-events: none;
	display:none;
}

.gateWrap .left, 
.gateWrap .right {
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 2;
    transition: width 0.85s cubic-bezier(0.25, 1, 0.5, 1), height 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

.gateWrap .bg-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100vh;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    transition: transform 0.6s ease, background-image 0.5s ease-in-out;
}
.gateWrap .left .bg-img { background-image: url('/grand/images/gate_main_bg.jpg?v=33'); }

.gateWrap .right .bg-img { background-image: url('/grand/images/gate_danji_2_bg.jpg?v=55'); }

.gateWrap .right .bg-img.active-bg { background-image: url('/grand/images/gate_danji_22_bg_main.jpg?v=44'); background-position: right top;}


.gateWrap .left:not(.active):hover .bg-img,
.gateWrap .right:not(.active):hover .bg-img {
    transform: translateX(-50%) scale(1.03);
}

.gateWrap .left::before,
.gateWrap .right::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
    transition: background 0.5s ease;
    animation: bgLight 2s 0.75s forwards;
}

@keyframes bgLight{
    0% { background: rgba(0, 0, 0, 0); }
    100% { background: rgba(0, 0, 0, 0.25); }
}

.gateWrap .text, 
.gateWrap .logo,
.gateWrap .danji_btn {
    position: relative;
    z-index: 2;
    width: 50vw;
    flex-shrink: 0;
    opacity: 0;
}
.gateWrap .left .text
.gateWrap .left .text {animation: textUp 1.2s 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;}
.gateWrap .left .logo { animation: textUp 1.2s 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.gateWrap .left .danji_btn { animation: textUp 1.2s 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards; } 
@import url('https://fonts.googleapis.com/css2?family=Asta+Sans:wght@300..800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; height: 100%; overflow: hidden; font-family: "Asta Sans", sans-serif; background: #000; }

.loading{
    width:100%; height:100%; position:fixed; left:0; top:0; background:#fff; z-index:1000;
}
.main_loader{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 350px; height: 350px; display: flex; align-items: center; justify-content: center;
}
.circular_loader {
    animation: rotate 2s linear infinite;
    height: calc(100% + 40px); transform-origin: center center; width: calc(100% + 40px);
    position: absolute; top: -20px; left: -20px;
}
.loader_path {
    stroke-dasharray: 150, 200; stroke-dashoffset: -10;
    animation: dash_circle 1.5s ease-in-out infinite; stroke-linecap: round;
}
@keyframes rotate { 100% { transform: rotate(360deg); } }
@keyframes dash_circle {
    0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124; }
}

/* 메인 컨테이너 */
.gateWrap {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
    display: flex;
}

/* 고정 프레임 테두리 라인 */
.gateWrap::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid #fff;
    z-index: 50;
    pointer-events: none;
}

.gateWrap .left, 
.gateWrap .right {
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 2;
    transition: 0.85s cubic-bezier(0.25, 1, 0.5, 1);
    flex: 1;
}

/* 배경 이미지 정중앙 정렬 (PC 기준) */
.gateWrap .bg-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(1);
    width: 100%;
    height: 100vh;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    /* [수정] 인트로 스케일 애니메이션 추가 (1.8초 동안 묵직하게 축소) */
    animation: scaleDown 1.8s cubic-bezier(0.25, 1, 0.3, 1) forwards;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.6s ease-in-out;
}
.gateWrap .left .bg-img { background-image: url('/grand/images/gate_main_bg.jpg?v=3'); }

/* 2BL 이미지 이중화 독립 레이어 구조 */
.gateWrap .right .bg-img-exp { 
    background-image: url('/grand/images/gate_danji_2_bg.jpg?v=5'); 
    z-index: 1;
}
.gateWrap .right .bg-img-main { 
    background-image: url('/grand/images/gate_danji_2_bg_main.jpg?v=4'); 
    z-index: 2;
    opacity: 0;
}
.gateWrap .right .bg-img-main.active-view {
    opacity: 1;
}

/* [수정] 정중앙 정렬 축(translateX)을 해치지 않도록 호버 코드 보정 */
.gateWrap .left:not(.active):hover .bg-img,
.gateWrap .right:not(.active):hover .bg-img {
    transform: translateX(-50%) scale(1.03);
}

/* [추가] 인트로 전용 스케일 다운 키프레임 (정중앙 축 유지형) */
@keyframes scaleDown {
    0% { transform: translateX(-50%) scale(1.1); }
    100% { transform: translateX(-50%) scale(1); }
}

.gateWrap .left::before,
.gateWrap .right::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0);
    z-index: 3;
    transition: 0.5s all;
    animation: bgLight 2s 0.75s forwards;
}
.gateWrap .left::after,
.gateWrap .right::after{
	content:"";
	width:calc(100% - 20px);
	height:calc(100% - 20px);
	border:1px solid #fff;
	position:absolute;
	left:10px;
	top:10px;
	z-index: 3;
}
.gateWrap .gate:hover{
	width: 65%;
	flex: 0 0 65%;
}
/* .gateWrap:has(.gate:hover) .gate .logo,
.gateWrap:has(.gate:hover) .gate .text,
.gateWrap:has(.gate:hover) .gate .danji_btn{
	opacity:0 !important;
}
.gateWrap:has(.gate:hover) .gate:hover .logo,
.gateWrap:has(.gate:hover) .gate:hover .text,
.gateWrap:has(.gate:hover) .gate:hover .danji_btn{
	opacity:1 !important;
}
.gateWrap:has(.gate.active:hover) .gate:hover .logo,
.gateWrap:has(.gate.active:hover) .gate:hover .text,
.gateWrap:has(.gate.active:hover) .gate:hover .danji_btn{
	opacity:0 !important;
} */
.gateWrap .gate:hover:before{
	opacity: 0.4;
}
.gateWrap .active:before{
	opacity:0.4 !important;
}
.gateWrap .gate .preview{
	transition: 0.15s all;
    opacity: 1;
	margin-top:5%;
}
@keyframes bgLight{
    0% { background: rgba(0, 0, 0, 0); }
    100% {background: rgba(0, 0, 0, 0.75);}
}

.gateWrap .text{
}

.gateWrap .text, 
.gateWrap .logo,
.gateWrap .danji_btn {
    position: relative;
    z-index: 4;
    width: 50vw;
    flex-shrink: 0;
    opacity: 0;
}

.gateWrap .left .text { animation: textUp 1.2s 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.gateWrap .left .logo { animation: textUp 1.2s 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; margin-bottom: 1.5%;}
.gateWrap .left .danji_btn { animation: textUp 1.2s 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards; } 

.gateWrap .right .text { animation: textUp 1.2s 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;  }
.gateWrap .right .logo {animation: textUp 1.2s 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;margin-bottom: 1.5%;}
.gateWrap .right .danji_btn { animation: textUp 1.2s 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

.gateWrap .text .con {
    font-size: 24px;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.4;
    letter-spacing: -1.5px;
}
.gateWrap .logo .con {
    font-size: 46px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -2px;
}
.gateWrap .logo .point {
    font-weight: 800;
}

.gateWrap .danji_btn {
    margin-top: 35px;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
    width: 150px;
    letter-spacing: -1px;
    overflow:hidden;
    position: relative;
}
.gateWrap .left:hover .danji_btn,
.gateWrap .right:hover .danji_btn {
    background: #ffffff;
    color: #074f51;
    border-color: #ffffff;
}
.gateWrap .gate:hover .danji_btn .back{
	left: 50%;
}
.gateWrap .gate:hover .danji_btn .front{
	opacity:0;
}
.gateWrap .danji_btn .front{
	position:relative;
	transition:0.75s all;
	height: 100%;
}
.gateWrap .danji_btn .back{
	position:absolute;
	left: 150%;
	top: 50%;
	transform: translate(-50%, -50%);
	width:100%;
	height:100%;
	transition:0.75s all;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes textUp{
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.content-out {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    transition: transform 0.4s ease, opacity 0.4s ease !important;
    animation: none !important;
}

.content-hide {
    opacity: 0 !important;
    transform: translateY(50px) !important;
    transition: none !important;
    animation: none !important;
}

.gateWrap .fading-up {
    opacity: 0;
    animation: textUp 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

.gateWrap .active {width: 100% !important;z-index: 5 !important;cursor: default !important;flex: 0 0 100% !important;}
.gateWrap .inactive { width: 0% !important; z-index: 1 !important; opacity: 1 !important; pointer-events: none !important; }

.gateWrap .expanded-con {
    display: none;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    opacity: 0;
    text-align: right;
    width: auto;
    z-index: 10;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease;
}
.gateWrap .left .expanded-con{
	right:auto;
	left:5%;
	text-align:left;
}
.gateWrap .expanded-con.fade-up {opacity: 1;transform: translateY(-50%);}
.gateWrap .expanded-con .ex-logo {font-size: 60px;font-weight: 600;color: #fff;margin-bottom: 20px;letter-spacing: -2px;}
.gateWrap .expanded-con .ex-txt {font-size: 24px;font-weight: 300;color: #fff;margin-bottom: 50px;line-height: 1.4;}
.gateWrap .expanded-con .btn-lnk {
    display: inline-block;
    width: 220px;
    padding: 14px 0;
    border-radius: 40px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 1px;
    letter-spacing: -1.5px;
    text-align: center;
    border: 2px solid #ffffff;
    background: transparent;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    background: #074f51;
    border-color: rgba(255,255,255,0.5);
}
.gateWrap .left .btn-lnk:hover { background: #074f51; border-color: #074f51; }
.gateWrap .right .btn-lnk:hover {background: transparent;border-color: #fff;}

.gateWrap .nav-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: none; 
    background: none;
    border: none;
    cursor: pointer;
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    font-family: "Asta Sans", sans-serif;
    opacity: 0;
    text-decoration: none;
    transition: opacity 0.4s ease, transform 0.3s ease, color 0.3s;
}
.gateWrap .nav-control.nav-show { opacity: 0.6; display: block; }
.gateWrap .nav-control.nav-show:hover { opacity: 1; color: #074f51; }

.gateWrap .nav-control.btn-prev { left: 50px; right: auto; }
.gateWrap .nav-control.btn-next { right: 50px; left: auto; }
.gateWrap .nav-control.btn-reset { right: 50px; left: auto; }
.gateWrap .left .nav-control.btn-reset { left: 50px; right: auto; }

/* ===================================================
   [모바일 작업 영역] 기존 PC 소스코드는 철저히 보존 유지
=================================================== */
@media(max-width:1024px){
    .gateWrap { flex-direction: column; }
    
    .gateWrap::after { border-width: 10px; }
    
    .gateWrap .left, .gateWrap .right { 
        width: 100% !important; 
        height: 50vh !important; 
         transition: 0.75s all;
    }
    
    .gateWrap .bg-img {
        left: 0;
        top: 0;
        transform: none;
        width: 100% !important;
        height: 100% !important;
        /* 모바일에서는 인트로 스케일 애니메이션 제외 처리 (정합성 방지) */
        animation: none;
    }
    .gateWrap .left:not(.active):hover .bg-img,
    .gateWrap .right:not(.active):hover .bg-img {
        transform: scale(1.03);
    }
    
    .gateWrap .left::before, .gateWrap .right::before {
        left: 0; top: 0; transform: none;
        width: 100% !important; height: 100% !important;
    }
    
    .gateWrap .text, .gateWrap .logo { width: 100vw !important; }
    .gateWrap .text .con { font-size: 18px; }
    .gateWrap .logo .con { font-size: 28px; }
    .gateWrap .danji_btn { margin-top: 25px; font-size: 16px; width: 30%; }
    
    .gateWrap .active { height: 100vh !important; width: 100% !important; z-index: 5 !important; }
    body .gateWrap .gate.inactive { height: 0vh !important; width: 100% !important; z-index: 1 !important; opacity: 1 !important; flex:0;}
    
    .gateWrap .expanded-con .ex-logo { font-size: 30px; }
    .gateWrap .expanded-con .ex-txt { font-size: 18px; }
    
    .gateWrap .nav-control { font-size: 14px; top: 25%;}
    .gateWrap .nav-control.btn-prev { left: 20px; }
    .gateWrap .nav-control.btn-next { right: 20px; }
    .gateWrap .nav-control.btn-reset { right: 20px; width:40px;height:40px;text-align:right; }
	.gateWrap .left .nav-control.btn-reset { left: 20px; right: auto;text-align:left;}

	.gateWrap .gate:hover{
		width:50%;
		flex:0 0 50%;
	}
	.gateWrap .left::before, .gateWrap .right::before{
		opacity:1 !important;
	}
	.gateWrap .left.active::before,
	.gateWrap .right.active::before{
		opacity:0.4 !important;
	}

@media(max-width:640px){
	.gateWrap .logo .con{
		font-size:6vw;
	}
	.gateWrap .text .con{
		font-size:3.6vw;
	}
	.gateWrap .danji_btn{
		font-size: 3.4vw;
		padding: 2% 5%;
	}
	.gateWrap .expanded-con .ex-logo{
		font-size:6vw;
	}
	.gateWrap .expanded-con .ex-txt{
		font-size:3.6vw;
	}
	.gateWrap .expanded-con .btn-lnk{
		font-size: 3.4vw;
		padding: 2% 5%;
		width:50%
	}
}