@media only screen and (orientation: portrait) and (max-width: 600px) , only screen and (orientation: landscape) and (max-height: 600px) {
	.custom_footer_info a{width: 100%;}
}
.custom_footer_info .our_hotels{
	width: 60%;
	overflow:hidden;
	display:inline-block;
	position: relative;
}
.custom_footer_info{ margin-bottom: 2rem;}
@media only screen and (orientation: landscape) and (max-height: 500px) {
	.custom_footer_info{ width: 100%; padding: 0 5%; overflow: hidden;}

	.custom_footer_info a{ display: inline-block; float: left; width: 50%;}
}
.custom_footer_info a{
	position: relative;
}
.custom_footer_info a::before, .custom_footer_info a::after{
 content: ''; position: absolute;
 width: 100%; height: 4rem;
left:0;
z-index: 1;
}
.custom_footer_info a::before{ top:0;	background: linear-gradient(0deg, rgba(255, 55, 55,0) 0%, var(--bg_color) 100%);
}
.custom_footer_info a::after{bottom:0; background: linear-gradient(0deg, var(--bg_color) 0%, rgba(255, 255, 255,0) 100%);
}




.custom_footer_info2{ min-height: 12vw !important; margin: clamp(3rem, 10vh, 6rem) 0; }
.custom_footer_info2 .frame{ height: 1px; overflow: visible; }
.custom_footer_info2 .frame .h1_class::after{
	content: '';
	position: absolute;
    color: #fff;
    font-size: clamp(1rem, 2vw , 2rem);
	opacity: 0;
	width: 100%;
	left:0;
	height: 2.5rem;
	bottom:0;
	background-image:	url(/web/img/custom/ornament_white.svg);
	background-size: auto  clamp(.8rem, 2vw , 1.2rem);
	background-position: center;
	background-repeat: no-repeat;
}

::before, ::after{transition: all .3s;}
.custom_footer_info2 .frame:hover .h1_class::after{opacity: 1}
.custom_footer_info2 .frame:hover .h1_class{ background-color: var(--bg_color); bottom:-3rem; min-height: 6rem;}
.custom_footer_info2 .h1_class{ font-weight: normal; color: #fff;  transition: .3s all;  z-index: 2;
	position: absolute; bottom:-2rem; min-height: 4rem; height: auto; width:auto; float: none; text-align: center; margin-bottom: 0; border-bottom:none;
	background-color:var(--bg_color);
}
.custom_footer_info2 .our_hotels{ position: relative;}
.custom_footer_info2 .our_hotels, .custom_footer_info2 iframe{height: 12.5vw !important;}

.custom_footer_info2 .h1_class::before, .custom_footer_info2 .frame::before, .custom_footer_info2 .our_hotels::before{
	content:'';	left:0; top: 0; width:100%; position: absolute; height: 4vh; z-index: 1;
	background: linear-gradient(0deg, rgba(255, 255, 255,0) 0%, rgba(255, 255, 255,1) 100%);
}
.custom_footer_info2 .frame::after, .custom_footer_info2 .our_hotels::after{
	content:'';	left:0; bottom: -12.5vw; width:100%; position: absolute; height: 4vh;
	background: linear-gradient(0deg, rgba(255, 255, 255,1) 0%, rgba(255, 255, 255,0) 100%);
}

@media only screen and (max-width: 1000px)  {
	.custom_footer_info2 .frame:first-child{}
	.custom_footer_info2 .h1_class{top:-2rem; bottom: auto; margin-top: 0;}
	.custom_footer_info2 .frame:hover .h1_class{bottom: auto;}
	.custom_footer_info2 .frame{margin-top:4rem;}
	.custom_footer_info2 .our_hotels, .custom_footer_info2 iframe, .custom_footer_info2 .frame{height: 25vw !important;}
	.custom_footer_info2 .our_hotels::after, .custom_footer_info2 .frame::after{bottom: 0 !important;}

	.custom_footer_info2 .frame{width:100%;}
}
@media only screen and (max-width: 700px)  {
	.custom_footer_info2 .our_hotels{width:100%; height: 50vw !important;}
	.custom_footer_info2 .frame:nth-child(1){margin-top:0}
	.custom_footer_info2 .frame:nth-child(1), .custom_footer_info2 iframe{height: 50vw !important;}
	.custom_footer_info2 .frame:nth-child(2){height: 100vw !important;}
}