@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&display=swap');

:root {
	--color-gold:#d4cfaf;
	--color-gold2:#938e82;
	--color-gold3:#563f30;
	--color-blue:#285195;
	--main-side-with:360px;
	--footer-logo-with:150px;
}

html {scroll-behavior: smooth;}
body {margin:0; font-family:'Barlow', "Microsoft JhengHei","微軟正黑體","Apple LiGothic Medium","蘋果儷中黑",sans-serif; font-size:1rem;line-height:1.4; min-height:100vh; color:#FFF; background-color:#034E9D;
	background-image: url(img/bbg1.png), url(img/bbg2.png);
	background-position: left center, right center;
	background-repeat: no-repeat, no-repeat;
	background-attachment:fixed, fixed;}
body * {box-sizing:border-box;}
figure {margin:0; padding:0; display:block;}
img {max-width:100%; border:none;}
svg {fill:currentColor;}
a {text-decoration:none; cursor:pointer;}
.clearfix {overflow: auto;}
.clearfix::after {content: ""; clear: both; display: table;}
.abs {position:absolute;}
.access {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}


	#mobile-cover, #mobile-header, #keyvisual .slilder-wrapper nav.photoroll-nav {display:none;}

	.container, #main-wrapper {max-width:1600px; margin-right:auto; margin-left:auto; position:relative;}

	#main-wrapper #top-menu {padding-top:25px; padding-bottom:25px; display:flex; justify-content:flex-end; align-items:center; gap:25px; color:var(--color-gold);}
	#main-wrapper #top-menu .spacer {display:block; width:1px; height:15px; background-color:var(--color-gold);}
	#main-wrapper #top-menu a {color:var(--color-gold); display:block; transition:all ease-in-out .3s;}
	#main-wrapper #top-menu a:hover {color:#FFF;}
	#main-wrapper #top-menu svg {display:none;}

	.top-menu>* {position:relative;}
	.top-menu .has-submenu {cursor:pointer;}
	.top-menu .submenu {position:absolute; left:-10px; top:100%; z-index:10; background:rgba(3, 78, 157,.8); min-width:100%; height:0; overflow:hidden; margin-top:-10px; filter:opacity(0%); transition:all ease-in-out .3s;}
	.top-menu .submenu a {display:block; padding:5px 10px 0;}
	.top-menu .submenu a:last-of-type {padding-bottom:5px;}
	.top-menu .has-submenu:hover .submenu {height:auto; margin-top:0; filter:opacity(100%);}

	footer {display:flex; gap:20px; align-items:center; font-size:11px; margin-top:30px; margin-bottom:20px;}
	footer .left {width:var(--footer-logo-with); height:120px; }
	footer .right {width:calc( 100% - var(--footer-logo-with));}
	footer p {margin:0 0 5px;}
	footer p:last-of-type {margin-bottom:0;}


	main {display:flex;}
	main aside {width:var(--main-side-with);}
	main aside .logo {width:90%; margin-bottom:40px;}
	main aside nav a {display:block; padding:7px 0 7px 12px; margin-bottom:17px; position:relative; cursor:pointer;}
	main aside nav a:after {transition:all ease-in-out .3s; 
		content:''; position:absolute; bottom:0; left:0;
		width:0; height:1px; background-color:transparent;}
	main aside nav a:hover:after {width:30%; background-color:rgba(255,255,255,.15);}
	main aside nav a.on:after {width:100%; background-color:rgba(255,255,255,.45);}
	main aside nav a svg {fill:#023163; width:95%; height:30px; transition:all ease-in-out .3s;}
	main aside nav a:hover svg {fill:rgba(255,255,255,.7); }
	main aside nav a.on svg {fill:#FFF; }

	main aside .enquiry {padding:30px 0 0; color:var(--color-gold); font-size:22px;}
	main aside .enquiry .phoneno {display:block; font-size:45px; color:var(--color-gold); }
	.enquiry .phoneno {font-family: 'Inter', sans-serif; font-weight:200; letter-spacing:-1px;}

	#keyvisual {width:calc( 100% - var(--main-side-with)); position:relative;}
	#keyvisual .slilder-wrapper {position:relative; padding-bottom:60px; }

	#keyvisual .slilder-wrapper .slide {display:none; position:relative; }
	#keyvisual .slilder-wrapper .slide.on {display:block;}
	#keyvisual .slilder-wrapper .slide .bg {width:100%; height:700px; text-align:right; 
		background-position:right top; background-size:contain; background-repeat:no-repeat;}
	#keyvisual .slilder-wrapper .slide#slide0 .bg {background-image:url(img/s0-bg.png);}
	#keyvisual .slilder-wrapper .slide#slide1 .bg {background-image:url(img/s1-bg.png);}
	#keyvisual .slilder-wrapper .slide#slide2 .bg {background-image:url(img/s2-bg.png);}
	#keyvisual .slilder-wrapper .slide#slide3 .bg {background-image:url(img/s3-bg.png);}
	#keyvisual .slilder-wrapper .slide .context {
		position:absolute; bottom:50px; left:0px; width:600px; min-height:250px; padding:35px 35px 50px;
		background:#FFF; color:#222;}
	#keyvisual .slilder-wrapper .slide .context h3 {margin:0 0 18px; line-height:1.5; display:none;}
	#keyvisual .slilder-wrapper .slide .context p {margin:0 0 18px;}
	#keyvisual .slilder-wrapper .slide .context p.list {padding-left:20px;}
	#keyvisual .slilder-wrapper .slide .context p.list:before {content:''; position:absolute; left:0; top:9px; width:5px; height:5px; background-color:#222;}
	#keyvisual .slilder-wrapper .slide .context .photos {position:absolute; bottom:-80px; left:25px; width:800px; height:120px; display:flex;}
	#keyvisual .slilder-wrapper .slide .context .photos figure {}
	#keyvisual .slilder-wrapper .slide .context .photos img {max-height:100%; border:0; display:block;}

	#keyvisual .slilder-wrapper .slide .addon {position:absolute; text-align:left; z-index:8;}
	#keyvisual .slilder-wrapper .slide#slide2 .addon {left:90px; top:150px; width:350px;}
	#keyvisual .slilder-wrapper .slide#slide3 .addon {bottom:10px; right:20px; width:520px; font-size:10px; color:#FFF;}

	#keyvisual .slilder-wrapper .slide.on * {animation-fill-mode:both;}
	#keyvisual .slilder-wrapper .slide.on .bg {animation-name:slide-bg; animation-duration:1.5s; }
	@keyframes slide-bg {
		from {filter:blur(5px) opacity(0%); transform:scale(.95,.95)}
		to {filter:blur(0px) opacity(100%); transform:scale(1,1)}
	}
	#keyvisual .slilder-wrapper .slide.on .context {animation-name:slide-context; animation-delay:.2s; animation-duration:1.2s; }
	@keyframes slide-context {
		from {filter:opacity(0%); transform:translateY(-25px);}
		to {filter:opacity(100%); transform:translateY(0);}
	}
	#keyvisual .slilder-wrapper .slide.on .context :is(h3, p) {animation-name:slide-text; animation-duration:.7s;}
	#keyvisual .slilder-wrapper .slide.on .context *:nth-child(1) {animation-delay:1.0s;  }
	#keyvisual .slilder-wrapper .slide.on .context *:nth-child(2) {animation-delay:1.2s; }
	#keyvisual .slilder-wrapper .slide.on .context *:nth-child(3) {animation-delay:1.4s; }
	#keyvisual .slilder-wrapper .slide.on .context *:nth-child(4) {animation-delay:1.6s; }
	#keyvisual .slilder-wrapper .slide.on .context *:nth-child(5) {animation-delay:1.8s; }
	#keyvisual .slilder-wrapper .slide.on .context *:nth-child(6) {animation-delay:2.0s; }
	@keyframes slide-text {
		0% {filter:blur(6px) opacity(0%);}
		100% {filter:blur(0px) opacity(100%);}
	}
	#keyvisual .slilder-wrapper .slide.on .context .photos figure {animation-name:slide-photos; animation-duration:1.2s; }
	#keyvisual .slilder-wrapper .slide.on .context .photos figure:nth-of-type(1) {animation-delay:.2s;}
	#keyvisual .slilder-wrapper .slide.on .context .photos figure:nth-of-type(2) {animation-delay:.35s;}
	#keyvisual .slilder-wrapper .slide.on .context .photos figure:nth-of-type(3) {animation-delay:.5s;}
	#keyvisual .slilder-wrapper .slide.on .context .photos figure:nth-of-type(4) {animation-delay:.65s;}
	#keyvisual .slilder-wrapper .slide.on .context .photos figure:nth-of-type(5) {animation-delay:.8s;}
	@keyframes slide-photos {
		from {filter:opacity(0%); transform:translateX(-15px);}
		to {filter:opacity(100%); transform:translateX(0);}
	}

	#keyvisual .slilder-wrapper nav.slider-nav {position:absolute; bottom:0; right:0; font-size:35px; line-height:1.3; font-weight:100; display:flex; color:var(--color-gold); 
		animation-fill-mode:both; animation-name:slide-nav; animation-delay:1.5s; animation-duration:.5s; }
	#keyvisual .slilder-wrapper nav.slider-nav a {cursor:pointer; width:45px; height:45px;}
	#keyvisual .slilder-wrapper nav.slider-nav a svg {fill:currentColor; transition:all ease-in-out .3s;}
	#keyvisual .slilder-wrapper nav.slider-nav a:hover {animation-name:slide-nav-arrow; animation-iteration-count:infinite; animation-duration:.8s;}
	#keyvisual .slilder-wrapper nav.slider-nav a:nth-of-type(2):hover {animation-name:slide-nav-arrow-res;}

	@keyframes slide-nav-arrow {
		0% {transform:translateX(0);}
		50% {transform:translateX(-5px);}
		100% {transform:translateX(0);}
	}
	@keyframes slide-nav-arrow-res {
		0% {transform:translateX(0);}
		50% {transform:translateX(5px);}
		100% {transform:translateX(0);}
	}
	@keyframes slide-nav {
		from {filter:blur(8px) opacity(0%); }
		to {filter:blur(0px) opacity(100%); }
	}

	#floorplan {display:none; position:fixed; z-index:102; width:100vw; height:100vh; overflow-y:auto; color:#FFF; text-align:center;
		background-color:rgba(0,0,0,.95);
		background-image:url(img/floorplan-bg1.png), url(img/floorplan-bg2.png);
		background-position:left center, right center;
		background-repeat:no-repeat, no-repeat;
		background-size:auto 100%, auto 100%;}
	#floorplan a {color:#FFF;}
	#floorplan .close {position:absolute; z-index:103; right:15px; top:15px; width:35px; height:35px;}
	#floorplan h2 {padding-left:35px;}
	#floorplan ul {list-style:none; margin:0 auto; padding:0; max-width:500px;}
	#floorplan ul li {padding:4px 0;}
	#floorplan ul li:nth-child(even) {background: rgb(133,128,128);
background: linear-gradient(90deg, rgba(133,128,128,0) 0%, rgba(133,128,128,0.15) 33%, rgba(133,128,128,0.15) 67%, rgba(133,128,128,0) 100%);}
	#floorplan ul li a {display:flex; gap:20px; justify-content:center;}
	#floorplan ul li a>* {width:120px;}
	#floorplan ul li a>*:nth-child(1) {text-align:right;}
	#floorplan ul li a>*:nth-child(2) {text-align:left;}
	#floorplan.on {display:block; animation-fill-mode:both; animation-name:floorplan-in; animation-duration:1s;}
	@keyframes floorplan-in {
		from {filter:blur(8px) opacity(0%); }
		to {filter:blur(0px) opacity(100%); }
	}
	#floorplan.out {display:block; animation-fill-mode:both; animation-name:floorplan-out; animation-duration:.5s;}
	@keyframes floorplan-out {
		from {filter:blur(0px) opacity(100%); }
		to {filter:blur(8px) opacity(0%);}
	}

@media (max-width: 1601px)	{
	:root {
		--main-side-with:300px;
		--footer-logo-with:150px;
	}
	.container, #main-wrapper {max-width:1200px;}

	main aside nav a {margin-bottom:7px;}
	#keyvisual .slilder-wrapper {padding-bottom:100px;}
	#keyvisual .slilder-wrapper .slide .bg {height:600px;}
	#keyvisual .slilder-wrapper .slide .context {width:520px; padding:25px 25px 70px 25px; bottom:30px;}
	#keyvisual .slilder-wrapper .slide .context .photos {bottom:-60px;}

	#keyvisual .slilder-wrapper .slide#slide2 .addon {left:30px; top:110px; }
	#keyvisual .slilder-wrapper .slide#slide3 .addon {width:350px; bottom:90px;}

	main aside .logo {width:75%;}
}
/*@media (max-width: 1200px)	{
	#main-wrapper {max-width:980px;}
}*/
@media (max-width: 1201px)	{
	:root {
		--main-side-with:250px;
	}
	.container, #main-wrapper {max-width:800px;}

	main aside nav a {padding:5px 0 5px 5px; margin-bottom:6px;}

	#keyvisual .slilder-wrapper {padding-bottom:30px;}
	#keyvisual .slilder-wrapper .slide .bg {height:280px; background-size:auto 100%; background-position:center center;}
	#keyvisual .slilder-wrapper .slide#slide0 .bg {background-image:url(img/s0-bgm.jpg);}
	#keyvisual .slilder-wrapper .slide#slide1 .bg {background-image:url(img/s1-bgm.jpg);}
	#keyvisual .slilder-wrapper .slide#slide2 .bg {background-image:url(img/s2-bgm.jpg);}
	#keyvisual .slilder-wrapper .slide#slide3 .bg {background-image:url(img/s3-bgm.jpg);}
	#keyvisual .slilder-wrapper .slide#slide3 .context {margin-bottom:100px; }
	#keyvisual .slilder-wrapper .slide .context {width:100%; min-height:0; position:relative; padding:75px 20px 120px 20px; top:auto; left:auto; bottom:auto;}
	#keyvisual .slilder-wrapper .slide .context .photos {bottom:0; left:0; width:100%; height:120px; align-items:flex-end; }

	#keyvisual .slilder-wrapper .slide#slide2 .addon {left:50%; transform:translateX(-50%); top:220px; width:90%; font-size:14px; }
	#keyvisual .slilder-wrapper .slide#slide3 .addon {left:50%; transform:translateX(-50%); top:100%; bottom:auto; width:100%;}

	#keyvisual .slilder-wrapper nav.slider-nav {top:290px; bottom:auto; }
}

@media (max-width: 800px)	{
	:root {
		--cover-padding:18px;
		--menu-width:25px;
	}
	body {background-image:none, none;}
	.container, #main-wrapper {max-width:100%;}
	#main-wrapper :is(#top-menu,main aside,footer) {display:none;}

	#mobile-cover {display:block; position:fixed; z-index:100; width:100%; height:100vh;
		color:var(--color-gold3); background:#d4c9b5 url(img/bbgm.png) no-repeat right center fixed; background-size:auto 100%;
		padding:var(--cover-padding); transition:all ease-in-out .3s; overflow-x:hidden; transform:translateX(-100%);}
	#mobile-cover.on {transform:translateX(0);}
	#mobile-cover .logo {width:100px; height:100px; margin-bottom:40px;}
	#mobile-cover nav {padding-bottom:20px;}
	#mobile-cover nav a {display:block; }
	#mobile-cover nav.top-menu :is(.has-submenu span, a span, .spacer) {display:none;}
	#mobile-cover nav.top-menu :is(a,.has-submenu) {color:#144394; margin-bottom:12px; min-height:35px;}
	#mobile-cover nav.top-menu :is(a,.has-submenu) svg {max-height:35px; width:130px; max-width:100%; }	
	#mobile-cover nav.top-menu .submenu {position:relative; left:auto; top:auto; background:transparent;}
	#mobile-cover nav.top-menu .submenu a {margin-bottom:0; min-height:20px; border-bottom:1px solid rgba(173, 160, 136,.5); max-width:300px;}
	#mobile-cover nav.slider-menu a {color:#958275; margin-bottom:8px;}
	#mobile-cover nav.slider-menu a.on {color:#725044;}
	#mobile-cover nav.slider-menu a svg {max-height:30px; max-width:100%;}	
	#mobile-cover .enquiry {padding:10px 0 0; color:var(--color-gold3);}
	#mobile-cover .enquiry .phoneno {font-size:28px; color:var(--color-gold3);}

	#mobile-cover footer {flex-direction:column; gap:0px; justify-content:flex-start; margin:30px 0 15px;}
	#mobile-cover footer :is(.left, .right) {width:100%;}
	#mobile-cover footer .left {height:80px;}
	#mobile-cover footer .left img {max-height:100%;}
	#mobile-cover footer .right {font-size:9px;}
	
	#mobile-header {display:block; position:relative; text-align:center; padding:var(--cover-padding) 0;}
	#mobile-header .logo {height:120px; margin:0 auto;}
	#mobile-header .logo img {max-height:100%;}
	#mobile-header #mobile-menu-btn {position:absolute; z-index:101; right:var(--cover-padding); top:var(--cover-padding); width:var(--menu-width); height:var(--menu-width);}
	#mobile-header #mobile-menu-btn.on {position:fixed;}
	#mobile-header #mobile-menu-btn span {display:block; width:var(--menu-width); height:2px; background-color:var(--color-gold); margin:7px 0; transition:all ease-in-out .3s;}
	#mobile-header #mobile-menu-btn span:nth-of-type(2) {transform:translateX(-7px);}
	#mobile-header #mobile-menu-btn.on span {background-color:var(--color-blue);}
	#mobile-header #mobile-menu-btn.on span:nth-of-type(1) {transform-origin:0% 0%; transform:rotate(45deg) ;}
	#mobile-header #mobile-menu-btn.on span:nth-of-type(2) {transform:translateX(0px); filter:opacity(0%);}
	#mobile-header #mobile-menu-btn.on span:nth-of-type(3) {transform-origin:0% 0%; transform:rotate(-45deg) translate(-1px,-1px);}

	#keyvisual {width:100%;}
	#keyvisual .slilder-wrapper {padding-bottom:60px;}
	#keyvisual .slilder-wrapper .slide.on .bg {height:50vw; background-size:auto 100%; background-position:center center;}
	#keyvisual .slilder-wrapper .slide .context {width:94%; margin:-10px auto 0; padding:40px 15px 0px 15px;}
	#keyvisual .slilder-wrapper .slide#slide3 .context {margin-bottom:0;}
	#keyvisual .slilder-wrapper .slide .context h3 {margin:0 0 18px; line-height:1.5; display:block; max-width:80%;}
	#keyvisual .slilder-wrapper .slide .context .photos {position:relative; height:auto; max-height:240px; width:360px; max-width:86%;  left:auto; bottom:-15px; margin:0 auto;}
	#keyvisual .slilder-wrapper .slide .context .photos figure {display:none;}
	#keyvisual .slilder-wrapper .slide .context .photos figure.on {display:block; 
		animation-fill-mode:both; animation-name:photo-roll; animation-duration:.5s; }
	#keyvisual .slilder-wrapper .slide .context .photos img {}
	
	#keyvisual .slilder-wrapper .slide#slide2 .addon {top:29vw; width:90%; font-size:13px; }
	#keyvisual .slilder-wrapper .slide#slide3 .addon {top:105%; bottom:auto; width:90%;}

	#keyvisual .slilder-wrapper nav.slider-nav {top:calc(50vw - 5px); right:18px; font-size:20px; color:var(--color-gold2);}
	#keyvisual .slilder-wrapper nav.slider-nav a {width:30px; height:30px; }
	#keyvisual .slilder-wrapper nav.slider-nav a:hover {animation-name: none !important; }

	@keyframes slide-photos {
		from {filter:opacity(0%); transform:translate(0,20px);}
		to {filter:opacity(100%); transform:translate(0,0);}
	}
	@keyframes photo-roll {
		from {filter:opacity(0%); transform:translate(20px,0px);}
		to {filter:opacity(100%); transform:translate(0,0);}		
	}

	#keyvisual .slilder-wrapper nav.photoroll-nav {display:flex; justify-content:center; gap:8px; width:100%; margin-top:25px;}
	#keyvisual .slilder-wrapper nav.photoroll-nav a {content:''; width:12px; height:12px; border-radius:50%; background-color:var(--color-gold2);}
	#keyvisual .slilder-wrapper nav.photoroll-nav a.on {background-color:#FFF;}

	#floorplan h2 {margin-bottom:5px;}
	#floorplan {font-size:14px;}
}