@charset "UTF-8";

body {
    color: #292929;
    height:100%;
    background-color: #fff;
    margin: 0;
}

html {font-size: 16px;}
li {list-style-type: none;}
body,h1,h2,h4 {
    font-family: 'Microsoft JhengHei','Microsoft YaHei','Heiti TC','LiHei Pro',sans-serif;
    letter-spacing: 0px;
}
a {color: #000000;text-decoration: none;transition: all 0.4s;}
a:focus,
a:hover {color: #474f9b;text-decoration: none;transition: all 0.4s;}
button {display: inline-block;outline: none;border: 0;}
button:focus {outline: 0;}
:root {
  scroll-padding-top: 3rem;
}

h2 {
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 0.25vw;
	color: #392323;	
}

h4{
    font-size: 20px;
    color: #929191;
    font-family: "Noto Serif TC";
    font-weight: 300;
    letter-spacing: 0.1vw;
}

.area1 .desc{
	color: #888; 
	width: 630px;
	margin: auto;
	font-weight: 300;
    font-family: "Noto Serif TC";
	padding-bottom: 20px;
}

.hotel-logo-fr{
	width: 900px;
	margin: auto;
	padding-top: 30px;
	padding-left: 80px;
	padding-right: 80px;
}
.arrow-s{
    width: 40px;
}
.b-mask{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #00000047;
}
.b-mask.s2{
    background-color: #0000002e;
}
.b-mask.s3{
    /*background: linear-gradient(0deg, rgb(0 0 0 / 27%) 10%, rgba(0, 0, 0, 0) 100%);*/
	background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0.4668461134453782) 0%, rgba(0,0,0,0.22314863445378152) 26%, rgba(0,0,0,0.2539609593837535) 73%, rgba(0,0,0,0.4192270658263305) 100%);
}
.slider-banner .carousel-inner .carousel-item img {
    min-height: 450px;
    max-height: 800px;
    object-fit: cover;
}

.top-menu-mb{
    display: none;
    position: relative;
}

.top-menu-mb .logo img{
    width: 60px;
}

.top-menu-mb .logo{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.top-menu-mb .m-menu{
    position: absolute;
    top: 15px;
    right: 20px;  
}

/***  Hamburger start ****/

.m-menu{
	/*display:none;*/
}

.menu-icon-first, .menu-icon-second, .menu-icon-thrid {
	width: 30px;
	height: 2px;
	background-color: #7176ab;
	margin: 6px 0;
	transition: 0.4s;
}

.menu-icon-wrapper {
	position: absolute;
	font-weight: 300;
	top: 25px;
	right: 15px;
	cursor: pointer;
	margin-left: 10px;
	transition: all 0.4s;
	z-index: 2;
}

.open .menu-icon-first {
	-webkit-transform: rotate(-45deg) translate(-6px, 5px);
	transform: rotate(-45deg) translate(-6px, 5px);
	background-color: #7176ab;
}

.open .menu-icon-second {
	opacity: 0;
	background-color: #7176ab;
}

.open .menu-icon-thrid {
	-webkit-transform: rotate(45deg) translate(-6px, -5px);
	transform: rotate(45deg) translate(-6px, -5px);
	background-color: #7176ab;
}

.aside-close{
    background-color: #000000b3;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    /* opacity: 0; */
    display: none;
}

.menu-mb-fr{
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	border-bottom: 1px solid #7176ab;
	z-index: 12;
	background-color: #6268a3;
	max-height: 0;
	opacity: 0;
	transition: all 0.4s;
	overflow: hidden;
}

.menu-mb-fr ul{
	padding: 0;
	margin: 0;
}

.menu-mb-fr ul li{
	border-bottom: 1px solid #7176ab;
	padding: 20px 50px;
	font-size: 16px;
	text-align: center;
}

.menu-mb-fr ul li:active{
	background-color: #989dce;
}

.menu-mb-fr ul li a{
	color: #fff;
}

.menu-mb-fr ul li a:active{
	color: #fff;
	transition: all 0.4s;
}

/***  Hamburger end ****/


.top-menu{
    display: flex;
    position: absolute;
    top: 0;
    left: 200px;
    right: 200px;
    z-index: 2;
    padding: 0px 30px;
    color: #fff;
    border-bottom: 1px solid #ffffff4f;
    justify-content: space-between;
}

.top-menu .logo{
    padding-top: 10px;
}

.top-menu .logo img{
    width: 180px;
}

.top-menu .menu ul{
    padding-top: 5px;
    margin: 0;
    display: flex;
}

.top-menu .menu ul li{
    display: inline-block;
    font-size: 20px;
    font-weight: 300;
    border-right: 1px solid #ffffff4f;
    transition: all .3s ease;
    cursor: pointer;
    padding: 24px 0;
}

.top-menu .menu ul li.end{
    border-right: unset;
}

.top-menu .menu ul li a{
    color: #fff;
    padding: 24px 50px;
}

.top-menu .menu ul li:hover{
    background: #ffffff3d;
    transition: all .3s ease;
}

.ad-info-fr{
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
    font-size: 45px;
    font-weight: 300;
    color: #fff;
    line-height: 1.2;
}
.ad-info-fr.b{
	font-weight: 600;
}
.ad-info-fr.left{
	left: 35%;
    top: 55%;
	text-align: unset;
}
.ad-info-fr.bottom{
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
    text-shadow: 2px 2px 4px rgb(0 0 0 / 55%);
    line-height: 1.5;
    font-size: 48px;
}
.ad-info-fr .tp{
    font-size: 45px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.ad-info-fr.s2 .tp{
    font-size: 40px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
	text-shadow: #0000005e 0.01em 0.01em 0.2em
}
.ad-info-fr.s2 p{
    font-size: 22px;
    padding-top: 20px;
}
.ad-info-fr p{
    font-size: 28px;
    padding-top: 20px;
}
.ad-info-fr .tpsub{
	font-size: 35px;
	font-weight: 500;
}
.ad-info-fr .desc{
	font-size: 18px;
	padding: 10px 0;
	line-height: 1.6;

}
.btn-fr{
	display: flex;
	padding-top: 20px;
	justify-content: center;
}

.btn1{
    border: 1px solid #fff;
    background-color: #ffffff2e;
    font-size: 16px;
    padding: 10px 20px;
    color: #fff;
    transition: all .3s ease;
	margin: 0 5px;
	white-space:nowrap;
	margin-bottom: 10px;
}

.btn1:hover{
    background-color: #ffffff94;
    transition: all .3s ease;
}

.arrow-down-css{
    position: absolute;
    left: 50%;
    top: 90%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    animation: indexIcoAnimation 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	opacity: 0;
}

.arrow-down-css img{
	height: auto;
	width: 50px;
}

.about,
.area1,
.area2,
.area3
{
    text-align: center;
    padding-top: 50px;
    padding-bottom: 30px;
}

.area3{
	padding-top: 40px;
    background-color: #F2F2F2;
}

.area3 h2{
	font-size: 36px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.courtesy-fr{
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
}

.courtesy-fr.s2{
	padding: 20px;
}

.courtesy-fr.s2 .item{
	flex: 0 0 150px;
	padding-top: 30px;
}

.courtesy-fr .item{
	flex: 0 0 160px;
	padding-top: 30px;
}

.courtesy-fr .item .text{
	padding-top: 15px;
	font-size: 14px;
	color:#392323;
}

.courtesy-fr .item img{
	width: 60px;
}

.notes{
	color: #888;
	font-size: 14px;
	padding-top: 40px;
}

.area1.non-t{
	padding-top: 10px;
}

.about .text{
    width: 600px;
    margin: auto;
    padding: 10px 0;
    line-height: 1.8;
    color: #707070;
}

.history{
    background-image: url('../img/cloud.png');
    background-repeat: no-repeat;
    background-position: center -50px;
    background-size: 600px;
    padding-top: 20px;
    background-color: #F2F2F2;
    position: relative;
}

.his-fr{
    display: flex;
    padding-top: 80px;
	padding-left: 150px;
	padding-right: 150px;
	padding-bottom: 50px;
}

.his-fr .left,
.his-fr .right{
    flex: 1;
}

.his-fr .left{
    text-align: right;
    padding-top: 30px;
}

.his-fr .right{
    text-align: left;
    padding-top: 80px;
}

.his-fr .right .time-contents.md{
    display: none;
}

.his-fr .left .time-contents,
.his-fr .right .time-contents {
    position: relative;
}

.his-fr .left .time-contents .time-dot{
    background-color: #767CB8;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 2px;
    right: -11px;
    border-radius: 50%;
	z-index: 1;
}

.his-fr .left .time-contents .time-year-fr{
    background-color: #767CB8;
    position: absolute;
    top: 0;
    right: 20px;
    color: #fff;
    font-size: 14px;
    padding: 1px 15px;
    border-radius: 12px;
}

.his-fr .left .time-contents{
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 14px;
    font-weight: 300;
    font-family: "Noto Serif TC";
}

.his-fr .right .time-contents .time-dot{
    background-color: #767CB8;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 2px;
    left: -11px;
    border-radius: 50%;
}

.his-fr .right .time-contents .time-year-fr{
    background-color: #767CB8;
    position: absolute;
    top: 0;
    left: 20px;
    color: #fff;
    font-size: 14px;
    padding: 1px 15px;
    border-radius: 12px;
}

.his-fr .right .time-contents{
    padding-left: 20px;
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 12px;
    font-weight: 300;
    font-family: "Noto Serif TC";
}

.his-fr .right .time-contents.s1{ 
    margin-top: 35px;
}

.his-fr .right .time-contents.s2{ 
    margin-top: 60px;
}
.his-fr .right .time-contents.s3{ 
    margin-top: 20px;
}
.his-fr .line{
    flex: 0 0 2px;
    background-color: #D9DAE5;
    position: relative;
}
.balloon{
    position: absolute;
    top: -60px;
	left: -34px
}
.balloon img{
    width: 70px;
}
.tpimg {
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: top center;
    height: 90px;
}
.img-overlay {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.img-h-ver1{
	padding-top: 56.25%;
}
.img-h-ver2{
	height: 100%;
}
.img-h-ver3{
	padding-top: 55%;
}
.img-h-ver4{
	padding-top: 100%;
	border: 1px solid #e0e0e0;
}
.img-h-ver5{
	padding-top: 80%;
}
.img-h-ver6{
	padding-top: 60%;
}
.img-h-ver7{
	padding-top: 70%;
}
.p-st{
	padding: 1px;
}

.p-st2{
	padding: 1px;
}

.p-st3{
	padding: 5px;
}
.cover-model-v1{
	position: relative;
}

.area_contents:hover .cover-model-v1::before{
	opacity: 1;
}

.area_contents:hover .cover-model-v2::before{
	opacity: 0;
}

.area_contents:hover .text-contents-v1{
	opacity: 1;
	transition: all 0.5s;
}

.area_contents:hover .text-contents-v2{
	opacity: 0;
	transition: all 0.8s;
}

.cover-model-v1::before {
	background-color: rgb(8 8 27 / 17%);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	content: "";
	position: absolute;
	top: 0;
	left:0;
	right:0;
	bottom:0;
	opacity: 0;
}

.cover-model-v2::before {
	background-color: rgb(0 0 0 / 37%);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	content: "";
	position: absolute;
	top: 0;
	left:0;
	right:0;
	bottom:0;
	opacity: 1;
}

.text-contents-v1{
	position: absolute;
	z-index: 10;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 20px;
	font-weight: 300;
	opacity: 0;
	cursor: nw-resize;
}

.text-contents-v2{
	position: absolute;
	z-index: 10;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 24px;
	font-weight: 300;
	opacity: 1;
}

.text-contents-v1 .en{
	font-size: 16px;
	font-weight: 300;
    font-family: "Noto Serif TC";
}

.text-contents-v2 .en{
	font-size: 18px;
	font-weight: 300;
    font-family: "Noto Serif TC";
}

.text-contents-v2 .subtp{
	font-size: 18px;
	font-weight: 300;
    font-family: "Noto Serif TC";
}

.area1 .tp{
	padding-bottom: 30px;
}

.tp-fr{
	display: flex;
	justify-content: center;
	padding-bottom: 20px;
}

.tp-fr .logo{
	padding-right: 6px;
}


.tp-fr .logo img{
	height: 30px;
}

.tp-fr .prdname{
	font-size: 22px;
	color: #4d4b4b;
}

.tp-fr .prdname-sub{
	color: #A8A8A8;
	font-size: 16px;
	font-weight: 300;
    font-family: "Noto Serif TC";
	padding-left: 10px;
	padding-top: 5px;
}


footer{
	background-image: url('../img/footer_img.jpg');
	background-repeat: no-repeat;
	/* background-position: center -100px; */
	background-size: cover;
	background-color: #F2F2F2;
	height: 400px;
	position: relative;
}

footer .cover{
	background-color: rgb(9 16 27 / 60%);
	position: absolute;
	top: 0;
	left:0;
	right:0;
	bottom:0;
}

.footer-info-fr{
	display: flex;
	position: absolute;
	z-index: 1;
	top: 50px;
	left:0;
	right:0;
	justify-content: space-between;
}

.footer-info-fr .logo{
	padding-top: 15px;
}

.footer-info-fr .logo img{
	width: 200px;
}

.footer-info-fr .contactus{
	flex: 1;
	padding-left: 60px;
	padding-top: 20px;
	color: #fff;
	line-height: 1.8;
}

.footer-info-fr .contactus span{
	font-size: 20px;
	font-weight: 600;
}

.ssl-notes{
	position: absolute;
	bottom: 0;
	z-index: 1;
	font-size: 14px;
	color: #d6cece;
	left: 50%;
	top: 95%;
	transform: translate(-50%, -50%);
	width: 900px;
	text-align: center;
}

.footer-pt{
	position: relative;
	height: 400px;
}

.social{
	text-align: right;
	color: #fff;
}

.social-fr{
	display: flex;
	justify-content: end;
	padding-top: 20px;
	padding-bottom: 20px;
}

.social-fr .item{
	padding: 0 5px;
}

.social-fr .item img{
	width: 40px;
}

.float-link-fr{
	position: fixed;
	top: 350px;
	left: 0;
	width: 100%;
	z-index: 16;
	transition: all 0.4s;
}

.float-linkbox{
	/* width: 1920px; */
	margin: auto;
	position: relative;
}

.float-link {
    position: absolute;
    top: 20px;
    right: 5px;
    z-index: 1;
}

.link-btn{
	width: 47px;
	height: 159px;
	background: url(../img/link.png);
	background-size: contain;
	background-repeat: no-repeat;
	transition: all 0.4s;
	cursor: pointer;
}

.link-btn:hover{
	width: 47px;
	height: 159px;
	background: url(../img/link_hover.png);
	background-size: contain;
	background-repeat: no-repeat;
	transition: all 0.4s;
	cursor: pointer;
}

.ticket {
    position: fixed;
    z-index: 2;
    right: 0px;
    bottom: 105px;
    line-height: 30px;
    border-radius: 3px;
    transition: all 0.5s;
    text-align: center;
    padding: 0 10px;
	display: none;
}

.ticket img{
	width: 40px;
}

.gototop {
    position: fixed;
    z-index: 2;
    right: 12px;
    bottom: 30px;
    width: 35px;
    height: 35px;
    line-height: 30px;
    border-radius: 3px;
    transition: all 0.5s;
    text-align: center;
    background-color: #767cb8;
    display: none;
    padding: 0 10px;
}

.gototop img{
	width: 15px;
}

button.btn2{
	color: #fff;
	background-color: #000;
	border: 1px solid #000;
	padding: 8px 25px;
	border-radius: 0.25rem;
	font-size: 18px;
	width: 200px;
	transition: all 0.5s;
}

button.btn2:hover{
	color: #000;
	background-color: #fff0;
	border: 1px solid #000;
    transition: all 0.5s;
}

@keyframes indexIcoAnimation {
  0%{
     top: 93%;
     opacity: 0;
  }
  50%{
     top: 94%;
     opacity: 1;
  }
  100% {
     top: 95%;
     opacity: 0;
  }
}

.curise-list{
	width: 1200px;
	margin: auto;
}

.curise-list .tp{
	color: #392324;
	font-size: 22px;
	padding: 20px 0 10px 0;
	/* border-bottom: 1px solid #cdcdcd; */
}

.flex-area5{
	display: flex;
	padding: 40px;
	margin-bottom: 20px;
}

.flex-area5 .img{
	flex: 0 0 400px;
}

.flex-area5 .img img{
	border-radius: 10px;
}

.flex-area5 .desc-fr{
	padding-left: 40px;
	text-align: left;
}

.flex-area5 .desc-fr .topic a{
	font-size: 18px;
	font-weight: 600;
	color: #3c3c3c;
	line-height: 1.8;
}


.flex-area5 .desc-fr .contents{
	padding-top: 10px;
	line-height: 1.8;
	color: #4d4d4d
}

.flex-area5 .desc-fr .contents a{
	color: #4d4d4d
}

.flex-area5 .desc-fr .contents a:hover{
	color: #767CB8
}


.btn-group{
	display: flex;
	padding-top: 10px;
}

.btn-group .btn-cruise{
	background-color: #fff;
	border: 1px solid #767CB8;
    color: #767CB8;
    padding: 2px 15px;
    border-radius: 8px;
	margin-right: 10px;
	white-space:nowrap;
	transition: all 0.5s;
}

.btn-group .btn-cruise.active{
	background-color: #767CB8;
	border: 1px solid #767CB8;
	color: #fff;
	border-radius: 8px;
	margin-right: 10px;
	width: 140px;
	transition: all 0.5s;
}

.btn-group .btn-cruise:hover{
	background-color: #767CB8;
	border: 1px solid #767CB8;
	color: #fff;
	transition: all 0.5s;
}

.btn-group .btn-cruise.active:hover{
	background-color: #3c3c3c;
	border: 1px solid #3c3c3c;
	transition: all 0.5s;
}


@media (max-width: 1600px) {
	.top-menu .menu ul li{
	    display: inline-block;
	    font-size: 16px;
	    font-weight: 300;
	    border-right: 1px solid #ffffff4f;
	    transition: all .3s ease;
	    cursor: pointer;
	    padding: 24px 0;
	}	
	.top-menu .menu ul li a{
	    color: #fff;
	    padding: 24px 30px;
	}
	.ad-info-fr.bottom{
		font-size: 42px;
	}
}


@media (max-width: 1400px) {
	.top-menu{
	    left: 100px;
	    right: 100px;
	}
	
	.his-fr{
		padding-left: 60px;
		padding-right: 60px;
	}
	.curise-list{
		width: 100%;
		margin: auto;
	}
	.ad-info-fr.bottom{
		font-size: 40px;
	}
}

@media (max-width: 1200px) {
    .top-menu{
        left: 50px;
        right: 50px;
        padding: 0px 20px;
        transition: all .3s ease;
    }
  
    .top-menu .menu ul li{
        display: inline-block;
        /* padding: 20px 30px; */
        font-size: 16px;
        transition: all .3s ease;
    }
	
    .top-menu .logo{
        padding-top: 15px;
    }	
	
    .top-menu .logo img{
        width: 140px;
        transition: all .3s ease;
    }
	
	.ad-info-fr .btn1{
	    font-size: 12px;
	    padding: 10px 20px;
	    transition: all .3s ease;
	}

	.his-fr{
		padding-left: 50px;
		padding-right: 50px;
	}
	.flex-area5 .img{
		flex: 0 0 300px;
	}
	.ad-info-fr.bottom{
		font-size: 36px;
	}
}

@media (max-width: 992px) {
  
    .top-menu{
        display: none;
    }
  
    .top-menu-mb{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background-color: #fff;
        z-index: 12;
    }
    
  	.aside-close.open{
	    display: block;
	}

	.open .menu-mb-fr{
		max-height: 1000px;
		opacity: 1;
		transition: all 0.4s;
		left: 0;
	}

	/*
	body.open {
	    overflow-y: hidden;
	    position: fixed;
	    width: 100%;
	    height: 100%;
	}
	*/

	.ad-info-fr{
	    font-size: 35px;
		transition: all .3s ease;
	}
	
	.ad-info-fr p{
	    font-size: 20px;
	}

	.ad-info-fr .btn1{
	    font-size: 13px;
	    padding: 10px 20px;
	    transition: all .3s ease;
	}

	.about .text{
	    width: 100%;
	}
			
	.his-fr .left{
		display: none;
	}

	.his-fr .right .time-contents.md{
		display: block;
	}

	.his-fr .right .time-contents.s1{ 
	    margin-top: 0;
	}
	
	.his-fr .right .time-contents.s2{ 
	    margin-top: 0;
	}
	
	.his-fr .right{
	    text-align: left;
	    padding-top: 10px;
	}
		
	.balloon{
	    position: absolute;
	    top: -45px;
		left: -24px
	}
	
	.balloon img{
	    width: 50px;
	}
	
	.about{
	    padding-bottom: 0;
	}
	.his-fr{
	    padding-left: 10px;
	}
	.tpimg {
	    background-size: 1000px;
	    height: 100px;
	}
	.area1 .desc{
		width: 100%;
		line-height: 1.6;
	}
	
	.hotel-logo-fr{
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.his-fr{
		padding-right: 10px;
	}
	.footer-info-fr{
		flex-direction: column;
		top: 30px;
	}
	.footer-info-fr .logo{
		text-align: center;
	}
	.footer-info-fr .contactus{
		flex: 1;
		padding-left: 0;
		padding-top: 10px;
		text-align: center;
	}
	footer{
		height: 600px;
	}
	.social{
		text-align: center;
	}
	.social-fr{
		justify-content: center;
	}
	.footer-pt{
		height: 600px;
	}

	.ssl-notes{
		width: 100%;
	}

	.float-link-fr{
		display: none;
	}

	.text-contents-v2{
		font-size: 22px;
	}
	
	.text-contents-v2 .en{
		font-size: 16px;
	}

	.ticket {
		display: block;
	}
	
	.text-contents-v2 .subtp{
		font-size: 14px;
	}
	
	.footer-info-fr .logo{
		padding-bottom: 10px;
	}
	
	.footer-info-fr .logo img{
		width: 250px;
	}

	.flex-area5{
		padding: 30px;
		flex-direction: column;
	}

	.flex-area5 .desc-fr{
		padding-left: 0;
		padding-top: 20px;
	}
	
	.btn-group{
		padding-top: 20px;
		justify-content: center;
	}
	.ad-info-fr.bottom{
		font-size: 30px;
	}
	
}

@media (max-width: 768px) {
	.btn-fr{
		flex-direction: row;
		flex-wrap: wrap;
	}
	.arrow-down-css{
		top: 90%;
		transition: all .3s ease;
	}
	
	.img-h-ver2{
		padding-top: 56.25%;
	}

	.btn-group{
		display: flex;
		flex-direction: column;
	}
	
	.btn-group .btn-cruise{
		margin: 5px 0;
		height: 45px
	}
	
	.btn-group .btn-cruise.active{
		width: 100%;
	}

	.flex-area5 .img{
		flex: unset;
	}
	
}

@media (max-width: 576px) {
	.ad-info-fr{
		width: 350px;
		transition: all .3s ease;
	}
	.ad-info-fr.left{
		left: 50%;
	    top: 55%;
		text-align: unset;
		width: 100%;
		padding: 0 20px
	}
	.ad-info-fr.left .desc{
		font-size: 16px;
	}
	.arrow-s{
	    width: 20px;
		transition: all .3s ease;
	}
	h2 {
	    font-size: 26px;
	}

	.area3 h2{
		font-size: 26px;
	}
	
	.tpimg {
	    background-size: 800px;
	    height: 60px;
	}	
	
	.tp-fr .logo img{
		height: 26px;
	}
	
	.tp-fr .prdname{
		font-size: 18px;
	}
	
	.tp-fr .prdname-sub{
		font-size: 14px;
	}

	.tp-fr{
		flex-wrap: wrap;
	}
	
	.text-contents-v2{
		font-size: 20px;
		white-space:nowrap;
	}
	
	.text-contents-v2 .en{
		font-size: 13px;
	}
	.footer-info-fr .logo{
		padding-bottom: 10px;
	}
	
	.footer-info-fr .logo img{
		width: 220px;
	}
	.flex-area5{
		padding: 15px;
		flex-direction: column;
	}
	
	.curise-list .tp{
		font-size: 18px;
	}

	.flex-area5 .desc-fr .topic a{
		font-size: 16px;
	}
	.area_contents .cover-model-v1::before{
		opacity: 1;
		background-color: rgb(8 8 27 / 19%);
	}
	.area_contents .text-contents-v1{
		opacity: 1;
		text-shadow: 0.1em 0.1em 0.2em black;
	}
	.ad-info-fr.bottom{
		font-size: 26px;
	}
	
}

@media (max-width: 375px) {

	.ad-info-fr{
	    font-size: 30px;
		transition: all .3s ease;
	}
	
	.ad-info-fr p{
	    font-size: 18px;
	}
	
	.courtesy-fr .item img{
		width: 50px;
	}
		
	.courtesy-fr .item{
		flex: 0 0 120px;
		padding-top: 30px;
	}

	h2 {
	    font-size: 25px;
	}

	.about,
	.area1,
	.area2,
	.area3
	{
	    text-align: center;
	    padding-top: 30px;
	    padding-bottom: 30px;
	}
	.ad-info-fr.bottom{
		font-size: 20px;
		width: 80%;
	}
}