.gate-container{width : 100%;height : 100%; position: absolute; font-family : PT; z-index: 1000;background: rgba(0,0,0,0.9);}
.gate-bg{position : absolute; left : 0;top : 0; width : 100%;height : 100%; opacity : 0; transition : 1s 0.75s;}
.on .gate-bg{opacity : 0.5;}
.gate-bg > img{width : 100%;height : 100%; object-fit : cover; object-position : center top;}

.gate-inner{display : flex;gap : 80px; flex-direction : column; align-items : center; justify-content : center; position : relative; width : 100%; height : 100%;padding-top: 60px;}

.gate-logo{position : absolute; animation : gate-logo 1.5s both 2s;}
@keyframes gate-logo{
	0%{}
	100%{transform : translateY(320px)}
}

.gate-logo-01{margin-bottom: 15px; transform : translateY(-50px);opacity : 0; animation : gate-logo-02 1.2s both .75s;}
.gate-logo-02{margin-bottom: 30px; animation : gate-logo-01 1.5s both; clip-path : inset(32% 50% 37%)}
@keyframes gate-logo-01{
	0%{}
	50%{clip-path : inset(32% 0% 37%)}
	100%{clip-path : inset(0%)}
}
.gate-logo-03{transform : translateY(50px);opacity : 0; animation : gate-logo-02 1.2s both .75s;}
@keyframes gate-logo-02{
	100%{transform : translateY(0); opacity : 1;}
}

.gate-btn-box{display : flex; gap : 30px; }
.gate-btn{display : flex; align-items : center; justify-content : center; border : 1px solid rgba(255,255,255,0.4);position : relative; width : 588px; height : 460px; padding-bottom: 49px; opacity : 0; animation : gate-btn 1.2s both .5s;}
@keyframes gate-btn{
	100%{opacity : 1; transform : translateX(0)}
}
.gate-btn:nth-child(1){transform : translateX(-100px);background: rgba(185,103,58,0.4);}
.gate-btn:nth-child(2){transform : translateX(100px);background: rgba(51,61,70,0.4);}
.gate-btn-tit{color : #fff; text-align : center; font-size : 32px; font-weight : 500; line-height : 1.3em;}
.gate-btn-tit .line{overflow : hidden;}
.gate-btn-tit .line + .line{margin-top: 10px;}
.gate-btn-tit .char{transform : translateY(100%); animation : gate-btn-tit 1.4s both 2.5s}
@keyframes gate-btn-tit{
	100%{transform : translateY(0)}
}
.gate-btn-tit b{font-weight : 800; color : #D6B799;}
.gate-btn-area{display : flex; align-items : center; justify-content : center; position :absolute; bottom : 0; left : 0;background: #D6B799; font-size : 21px; width : 100%; height : 49px; color : #000; font-weight : 700;}
.gate-btn-area::after{content : ''; width : 10px; height : 10px; border-top : 1px solid #000; border-right : 1px solid #000; transform : rotate(45deg); margin-left: 12px;}


.more{
    font-family : PT;
	position:absolute;
    bottom:45px;
    width:150px;
    height:46px;
    border:1px solid rgba(255,255,255,.6);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:35px;
    font-size: 13px;
	color: #fff;
	font-weight: 600;
    letter-spacing:2px;
    transition:.4s;
	z-index: 10;
}
.gate-btn:nth-child(1) .more::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(185,103,58,1);
	color: #fff;

    transform:scaleX(0);
    transform-origin:center;
    transition:transform .45s cubic-bezier(.22,1,.36,1);

    z-index:-1;
}
.gate-btn:nth-child(2) .more::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(51,61,70,1);
	color: #fff;

    transform:scaleX(0);
    transform-origin:center;
    transition:transform .45s cubic-bezier(.22,1,.36,1);

    z-index:-1;
}

.plus{
    position:relative;
    width:10px;
    height:10px;
    transition:transform .4s ease;
}

.plus::before,
.plus::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    background:#fff;
    transform:translate(-50%,-50%);
}

.plus::before{
    width:10px;
    height:2px;
}

.plus::after{
    width:2px;
    height:10px;
}

.gate-btn:hover .more .plus{
    transform:rotate(180deg);
}
.gate-btn:hover .more::before{
    transform:scaleX(1);
}

@media screen and (max-width: 991px){
	.gate-inner { margin: 50px 0; }
	.gate-inner {
		display: flex;
		gap: 0px;
		padding-top: 20px;
	}
	.gate-btn-box {
		display: grid;
		gap: 30px;
		margin-top: 270px;
	}
	.gate-btn {
		width: 100%;
		height: 260px;
		padding-bottom: 49px;
	}
	.gate-btn-tit {
		font-size: 30px;
		font-weight: 600;
		line-height: 1em;
		padding: 0 40px;
	}
	.gate-btn-box { padding-bottom: 60px; }
	.gate-logo img { width: 70px; }
}