@charset "utf-8";

* {margin:0px;padding:0px;}
html, body {height:100%;}
body {width:100%;height:100%;color:#434343;font-family:Nanum Gothic, 돋움, Dotum, "Apple Gothic", sans-serif;font-size:12px;}
li{list-style-type:none;}

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}

/* skipnavi */
#skipnavi a {position:absolute;text-align:center;width:200px;display:block;background:#c52227;color:#fff;left:-9999px;}
#skipnavi a:hover {z-index:999999;margin-left:-100px;left:50%;}
#skipnavi a:focus {z-index:999999;margin-left:-100px;left:50%;}
#skipnavi a:active {z-index:999999;margin-left:-100px;left:50%;}

.gatelogo { display: none; }

.gate_list { position: relative; overflow: hidden; display: flex; }
.gate_list img { width: 100%; }

.gate_clip { width: 100%; height: 100%; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.3s ease-in-out; }
.gate_clip.first { clip-path: none; }
.gate_clip.last { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.gate_clip:hover { clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); z-index: 1; }
.gate_clip.first:hover { clip-path: polygon(0 0, 140% 0, 140% 140%, 0 140%); }
.gate_clip.last:hover { clip-path: polygon(-40% 0, 100% 0, 100% 100%, -40% 100%); }

.gate_clip .gate_item { position: absolute; top: 0; width: 25%; height: 100%; transform: translateX(-16.7%); background-position: center; background-size: cover; }
.gate_clip.first .gate_item { left: 0; background-position: left center; }
.gate_clip.last .gate_item { right: 0; background-position: right center; transform: translateX(16.7%);}
.gate_clip.first:hover .gate_item { transform: translateX(-3.3%); transition: transform 0.3s ease-out; }
.gate_clip.last:hover .gate_item { transform: translateX(3.3%); transition: transform 0.3s ease-out; }

/* .gate_clip .gate_item.advt { background-image: url("/_img/gate/advt_bg_2406_2.jpg");background-position: center center;}
.gate_clip:hover .gate_item.advt { background-image: url("/_img/gate/advt_bg_2406_2.jpg");background-position: center center;background-repeat:no-repeat;} */

.gate_clip .gate_item.advt { background-image: url("/_img/gate/advt_bg_2501.jpg");background-repeat:no-repeat;}
.gate_clip .gate_item.advt_busan { background-image: url("/_img/gate/advt_busan_bg_2501.jpg");background-repeat:no-repeat; }
.gate_clip .gate_item.sky { background-image: url("/_img/gate/sky_bg.png");background-repeat:no-repeat; }
.gate_clip .gate_item.aqua { background-image: url("/_img/gate/aquai_bg.png");background-repeat:no-repeat; }
.gate_clip .gate_item.waterpark { background-image: url("/_img/gate/waterpark_bg.png"); background-repeat:no-repeat;}
.gate_clip .gate_item.aqua_hanoi { background-image: url("/_img/gate/aqua_hanoi_bg.png"); background-repeat:no-repeat;}

.gate_item .gate_item_content_warp { position: relative; width: 100%; height: 100%; display: block; }
.gate_item .gate_item_content_warp::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; opacity: 30%; }
.gate_item:hover .gate_item_content_warp::before { opacity: 0; transition: opacity 0.5s ease-out; }


.gate_item .gate_item_content_warp .gate_item_content { position: absolute; bottom: 11.816%; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }

.gate_item .txtbox { width: 259px;
}

/* s : 20240226 게이트 텍스트박스 크기 일괄 수정, 추후 디자인 사이즈 확인 필요  */ 
.gate_item .txtbox {
    height: 220px;
}
/* e : 20240226 게이트 텍스트박스 크기 일괄 수정, 추후 디자인 사이즈 확인 필요  */ 

.gate_item .title { width: 480px; opacity: 0; }
.gate_item:hover .title { opacity: 1; transition: opacity 0.5s ease-out; }

.gate_item .logo { width: 480px; position: relative; }
.gate_item.advt .logo2 { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0; width: 100%; }
.gate_item:hover.advt .logo2 { opacity: 1; transition: opacity 0.5s ease-out; }

.gate_item .btn { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 67.5%; opacity: 0; }
.gate_item:hover .btn { opacity: 1; transition: opacity 0.5s ease-out; }

@media all and ( max-width : 1919px ) {
    .gate_item .txtbox { width: calc((100% * 4)/6*0.8); }
    .gate_item .title { width: 100%; }
    .gate_item .logo { width: 100%; }
    .gate_item .btn { bottom: 5%; }
}