.gate_wrap {
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:space-around;
	font-family:'Pretendard';
	font-weight:300;
	color:#333;
    padding: 16px;
    gap: 16px;
}


.click_point {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1100;
	cursor:pointer;
}

.gate_info {
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
    color: #7a6a34;
    font-weight: 600;
    letter-spacing: -1px;
}

.gate_masil,
.gate_sunset{
	width:50%;
	height:100%;
	position:relative;
	border-radius:20px;
	overflow:hidden;
	box-sizing:border-box;
	padding:1%;
}

.gate_masil {
	/* background:#F2D56F; */
    background: url('../images/gate/masil/gate-img-masil.jpg') no-repeat center;
    background-size: auto 100%; 
    overflow: hidden;
    transition: background-size 0.3s ease;
}

.gate_masil:hover {
    background-size: auto 105%; 
}

	.gate_title_wrap {
		width:60%;
		text-align:center;
		position:absolute;
		left:50%;
		top:50%;
		transform:translate3d(-50%, -50%, 0) scale(1);
		text-align:center;
		z-index:1000;
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.gate_title_wrap img {
		max-width:100%;
	}
		.gate_title_t{
			width:80%;
			margin: 0 auto;
		}
		.gate_title_m{
			margin: 0 auto;
		}
		.gate_title_b{
			margin: 0 auto;
		}


.redmon {
	width:28%;
	padding-bottom:48%;
	background-image:url('/images/gate/masil/buanmon1.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:left center;
	position:absolute;
	left:0;
	top:9%;
	z-index:900;
	transform: rotate(45deg) translateX(-28%);
	animation: redmon .6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}


.bluemon {
	width:30%;
	padding-bottom:50%;
	background-image:url('/images/gate/masil/buanmon2.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:left center;
	position:absolute;
	left:0;
	top:28%;
	z-index:901;
	transform: rotate(50deg) translateX(-40%);
	animation: bluemon .6s cubic-bezier(0.4, 0, 0.2, 1) .6s backwards;
}


.greenmon {
	width:53%;
	padding-bottom:70%;
	background-image:url('/images/gate/masil/buanmon3.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:right bottom;
	position:absolute;
	right:2px;
	bottom:-1%;
	z-index:901;
	transform: rotate(-13deg) translate3d(3%, 18%, 0);
	animation: greenmon .6s cubic-bezier(0.4, 0, 0.2, 1) .3s backwards;
}


.redmon_name {
	width:50%;
	height:50%;
	background:url('/images/gate/masil/name_tag1.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center bottom;
	position:absolute;
	left:-7%;
	top:-26%;
	transform:rotate(-45deg);
	animation: nametag .2s backwards 1.2s;
}
.bluemon_name {
	width:50%;
	height:50%;
	background:url('/images/gate/masil/name_tag2.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center bottom;
	position:absolute;
	left:26%;
	top:-30%;
	transform:rotate(-50deg);
	animation: nametag .2s backwards 1.2s;
}
.greenmon_name {
	width:28%;
	height:28%;
	background:url('/images/gate/masil/name_tag3.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center bottom;
	position:absolute;
	left:16%;
	bottom:28%;
	transform:rotate(13deg);
	animation: nametag .2s backwards 1.2s;
}

.talk1{
	width:20%;
	padding-bottom:15%;
	background-image:url('/images/gate/masil/talk1.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	position:absolute;
	left:25%;
	top:12%;
	animation: talk .2s backwards 1.5s;
}
.talk2{
	width:20%;
	padding-bottom:15%;
	background-image:url('/images/gate/masil/talk2.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	position:absolute;
	right:26%;
	bottom:18%;
	z-index:905;
	animation: talk .2s backwards 1.9s;
}

@keyframes nametag {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes talk {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}



	@keyframes redmon {
	  0% {
		transform:rotate(0deg) translateX(-100%); /* 시작 위치 */
	  }
	  100% {
		transform:rotate(45deg) translateX(-28%);
		rotate(50deg);
	  }
	}

	@keyframes bluemon {
	  0% {
		transform:rotate(0deg) translateX(-100%); /* 시작 위치 */
	  }
	  100% {
		transform:rotate(50deg) translateX(-40%);
		rotate(50deg);
	  }
	}

	@keyframes greenmon {
	  0% {
		transform:rotate(0deg) translate3d(100%, 18%, 0); /* 시작 위치 */
	  }
	  100% {
		transform:rotate(-13deg) translate3d(3%, 18%, 0);
		rotate(50deg);
	  }
	}




@media (max-width: 950px){
	.gate_wrap {
		flex-direction:column;
        padding: 8px;
        gap: 8px;
	}
	.gate_masil,
	.gate_sunset{
		width:100%;
		height:50%;
		position:relative;
		border-radius:16px;
		overflow:hidden;
		box-sizing:border-box;
		padding:3%;
	}


	.redmon {
		width:20%;
		padding-bottom:40%;
	}


	.bluemon {
		width:20%;
		padding-bottom:40%;
	}


	.greenmon {
		width:43%;
		padding-bottom:60%;
		bottom:-14%;
	}


	.greenmon_name {
		left:16%;
		bottom:46%;
	}


	.talk1{
		left:20%;
		top:14%;
	}
	.talk2{
		right:24%;
		bottom:11%;
	}




}




@media (max-width: 764px){
	.gate_info {
		font-size:12px;
	}
}


@media (orientation: landscape) {
  /* 가로모드일 때 적용할 스타일 */
	.gate_masil,
	.gate_sunset{
		min-height:500px;
	}
    
}


.gate_sunset {
	padding:0;
  background: linear-gradient(
	180deg,
	#87CEEB 0%,   /* 하늘색 */
	#ADD8E6 33%,  /* 밝은 하늘색 */
	#FFFFCC 66%,  /* 옅은 노란색 */
	#FFFF99 100%  /* 노란색 */
  );
}
.gate_sunset:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:1;
  opacity:1;
background: linear-gradient(
  180deg,
  #903470 0%,
  #D12E4F 5%,   /* 더 진한 주홍색 (노을 시작) */
  #E55341 38%,  /* 진한 토마토 색상 (부드러운 전환) */
  #FFC300 70%,  /* 더 강렬한 금색 (노을 중간) */
  #FFD700 100%  /* 밝은 노란색 (노을 끝) */
);

  animation: day-to-sunset 5s ease-in backwards;
}

.gate_sunset_image{
	width:100%;
	height:100%;
	background-image:url('/images/gate/sunset/sunset_bg.png');
	background-size:contain;
	background-position:center bottom;
	background-repeat:no-repeat;
	position:relative;
	z-index:1000;
}


.gate_sunset_title {
	width:60%;
	padding-bottom:60%;
	text-align:center;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate3d(-50%, -50%, 0) scale(1);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	text-align:center;
	background-image:url('/images/gate/sunset/sunset_title_white_2026.svg?v=2');
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	z-index:1000;
}

.stars {
	width:100%;
	padding-bottom:40%;
	background-image:url('/images/gate/sunset/stars.svg');
    animation: blinks 4s ease-in 4s infinite; /* 반복 횟수 수정 */
	opacity:0;
}

@keyframes day-to-sunset {
0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes blinks {
0% {
    opacity:0;
  }
  50% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}


@media (max-width: 950px) {
    .gate_sunset_image {
        background-size: cover;
    }
    .greenmon_name {
        left: 22%;
        bottom: 34%;
    }
    .bluemon {
        width: 20%;
        padding-bottom: 49%;
    }
    .bluemon_name {
        left: 34%;
        top: -8%;
    }
    .redmon_name {
        left: -9%;
        top: -16%;
    }
}
@media (max-width: 490px) {
    .gate_sunset_image {
        background-size: contain;
    }
}


@media (max-width: 800px) {
    .bluemon {
        width: 20%;
        padding-bottom: 49%;
    }
    .bluemon_name {
        left: 34%;
        top: -8%;
    }
    .redmon_name {
        left: -9%;
        top: -16%;
    }
}

@media (min-width: 600px) and (max-width:950px) {
    .talk1, .talk2 {
        display: none;
    }
}

@media (max-width: 500px) {
    .greenmon {
        width: 46%;
        padding-bottom: 60%;
        bottom: -5%;
    }
    .talk2 {
        right: 28%;
        bottom: 12%;
    }
    .greenmon_name {
        left: 21%;
        bottom: 32%;
    }
    .redmon {
        width: 22%;
        padding-bottom: 42%;
    }
    .redmon_name {
        left: -5%;
        top: -24%;
    }
    .bluemon {
        width: 22%;
        padding-bottom: 45%;
    }
    .bluemon_name {
        left: 10%;
        top: -20%;
    }
    .talk1 {
        display: block;
        left: 20%;
        top: 10%;
    }
}

.gate_masil:hover .gate_title_wrap,
.gate_sunset:hover .gate_sunset_title {
    transform: translate3d(-50%, -50%, 0) scale(1.06);
}