/*-------------------------*/
/* $font import
---------------------------*/
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');

/*-------------------------*/
/* $Global
---------------------------*/
body{
	font-family: 'Playfair Display', arial, sans-serif;	
}
.wrapper{
	background-color: #1c1c1c;
}
/*-------------------------*/
/* $Text
---------------------------*/
h1,h2,h3,h4,h5,h6{
	margin: 0;
}
.heading{
	font-size: 72px;
	color: #fff;
	margin-bottom: 48px;
}
@media (max-width: 768px){
	.heding{
		font-size: 48px;
	}
}
@media (max-width: 960px){
	.navbar--collapse{
		margin-right: -16px;
		margin-left: -16px;
	}
}

/*-------------------------*/
/* $Icon
---------------------------*/
.icon{
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	/*border: 1px solid #fff;*/
	background-size: cover;
	background-position: center;
}
.icon-fb{
	background-image: url('../images/facebook1.svg');
}
.icon-ig{
	background-image: url('../images/ig2.svg');
}
/*-------------------------*/
/* $Button
---------------------------*/
.btn{
	display: inline-block;
	vertical-align: middle;
	position: relative;
	margin: 0;
	padding: 8px 56px;
	box-sizing: border-box;
	font-size: 20px;
	line-height: 32px;
	text-align: center;
	font-weight: 500;
	letter-spacing: 0;
	text-decoration: none;
	color: #dcb677;
	border: 2px solid #dcb677;
	outline: none;
	/* 滑鼠指上去為手指 */
	cursor: pointer;
	overflow: hidden;
	user-select: none;
	user-drag: none;
	transition: all 0.3s;
}
.btn:hover{
	background-color: #dcb677;
	color: #fff;
}
.icon-btn{
	display: inline-block;
	vertical-align: top;
	/*border: 1px solid #fff;*/
	transition: all 0.3s;
}
.icon-btn:hover{
	transform: translateY(-20%);
}
/*-------------------------*/
/* $Side-nav
---------------------------*/
.side-nav{
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
@media (max-width: 768px){
	.side-nav{
		display: none;
	}
}
.side-nav__item{
	display: inline-block;
	color: #fff;
	font-size: 18px;
	width: 160px;
	/*border: 1px solid #fff;*/
	margin-top: 8px;
	margin-bottom: 8px;
	height: 20px;
	line-height: 20px;
}
.side-nav__item span{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	transition: all 0.3s;
}
.side-nav__item:before{
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 0;
	background-color: #dcb677;
	transition: all 0.3s;
}
.side-nav .active .side-nav__item span{
	left: 32px;
}

.side-nav .active .side-nav__item:before{
	width: 100%;
}
/*-------------------------*/
/* $Layout
---------------------------*/
.section__inner{
		padding-top: 80px;
		padding-bottom: 80px;
}		
@media (max-width: 768px){
	.section__inner{
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/*-------------------------*/
/* $Header
---------------------------*/
.header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}
.navbar__logo{
	display: inline-block;
	height: 144px;
	width: 144px;
	background: url('../images/logo.png') #dcb677;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80px;
	float: left;
	transition: all 0.3s;
}
.header--scrolling .navbar__logo{
	height: 80px;
	background-color: inherit;
	background-size: 60px;
}
@media (max-width: 960px){
	.navbar__logo{
		height: 80px;
		background-color: inherit;
		background-size: 80px;
		float: none;
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
}
.navbar__nav{
	float: right;
}
.nav__menu{
	float: left;
}
.nav__menu li{
	float: left;
}
.nav__menu .menu__item{
	display: block;
	padding: 24px;
	color: #fff;
	line-height: 32px;
	font-size: 18px;
	/*border: 1px solid #fff;*/
	transition: all 0.3s;
}
.nav__menu .menu__item:hover{
	color: #dcb667;
}
.nav__icon-group{
	padding: 24px;
	line-height: 32px;
	float: left;
	/*border: 1px solid #fff;*/
}
.nav__icon-group .icon-btn{
	margin-right: 16px;
}
.nav__icon-group .icon-btn:last-child{
	margin: 0;
}
/* menu-toggle */
.menu-toggle{
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	height: 56px;
	display: inline-block;
	padding: 12px;
	padding-top: 16px;
	/*border: 1px solid #fff;*/
}
.menu-toggle span{
	display: block;
	width: 100%;
	height: 2px;
	background-color: #dcb667;
	margin-bottom: 8px;	
}
@media (min-width: 961px){
	.menu-toggle{
		display: none;
	}
}
/* popup-nav */
@media (max-width: 960px){
	.popup-nav{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #1c1c1c;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s;
	}
	#overlay:target{
		opacity: 1;
		visibility: visible;
	}
	.popup-nav .nav__menu{
		float: none;
		padding-top: 56px;
	}
	.popup-nav .nav__menu li{
		float: none;
	}
	.popup-nav .menu__item{
		text-align: center;
		padding: 16px;
	}
	.popup-nav .nav__icon-group{
		float: none;
		text-align: center;
	}
	/* popup-close */
	.popup-close{
		position: absolute;
		top: 0;
		right: 0;
		width: 56px;
		height: 56px;
		display: inline-block;
		padding: 12px;
		padding-top: 16px;
		/*border: 1px solid #fff;*/
	}
	.popup-close span{
		display: block;
		width: 32px;
		height: 3px;
		background-color: #dcb667;
		position: absolute;
		top: 50%
	}
	.popup-close span:nth-child(odd){
		transform: translateY(-50%) rotate(45deg);
	}
	}
	.popup-close span:nth-child(even){
		transform: translateY(-50%) rotate(-45deg);
	}
}

/*-------------------------*/
/* $Layout
---------------------------*/
.section__inner{
	padding-top: 80px;
	padding-bottom: 80px;
}
/*-------------------------*/
/* $Hero
---------------------------*/
.hero--bg-covered{
	background-image: url('../images/hero_bg.png');
	background-size: cover;
	background-position: center;
}
.hero--bg-covered:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #161616;
	opacity: 0.7;
}
.scrolldown-btn{
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid #fff;
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	background-image: url('../images/arrow.svg');
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
	animation: breath 2s infinite;
}
@keyframes breath{
	0%{opacity: 0.5;}
	50%{opacity: 1;}
	100%{opacity: 0.5;}
}
/*-------------------------*/
/* $Info 
---------------------------*/
.info{
	color: #fff;
}
.info__title{
	font-size: 48px;
	margin-bottom: 16px;
}
.info__subtitle{
	font-size: 40px;
	margin-bottom: 48px;
	padding-bottom: 24px;
}
.info__subtitle:before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 160px;
	height: 4px;
	background-color: #dcb667;
}
.info__text{
	font-size: 16px;
	line-height: 32px;
}
.info__btn{
	margin-top: 24px;
}
@media (max-width: 768px){
	.info{
		padding-top: 24px;
		padding-bottom: 24px;
	}
	.info__title{
		font-size: 40px
	}
	.info__subtitle{
		font-size: 32px;
		margin-bottom: 24px;
	}
	.info__text{
		margin-bottom: 24px;
	}
}
/*-------------------------*/
/* $Thumbnail
---------------------------*/
.thumbnail{
	color: #fff;
}
.thumbnail__title{
	font-size: 22px;
	color: #dcb667;
}
.thumbnail__text{
	font-size: 16px;
	line-height: 32px;
}
.thumbnail__imgbox{
	/*border: 1px solid #fff;*/
	width: 100%;
	padding-top: calc(100% * 9 / 16);
	margin-bottom: 8px;
}
.thumbnail__imgbox .image{
	/*border: 1px solid red;*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-width: 100%;
	max-height: 100%;
}
/* owl-carousel */
.owl-nav{
	margin-top: 24px;
	text-align: center;
}
.owl-prev,.owl-next{
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #fff;
	margin: 0 16px;
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
}
.owl-prev{
	background-image: url('../images/arrow.svg');
	transform: rotate(90deg);
}
.owl-next{
	background-image: url('../images/arrow.svg');
	transform: rotate(-90deg);
}	
/*-------------------------*/
/* $Contact
---------------------------*/
.contact{
	color: #fff;
	padding-top: 24px;
	padding-bottom: 24px;
}
.contact__item{
	margin-bottom: 24px;
}
.contact__label{
	color: #dcb667;
	font-size: 16px;
	margin-bottom: 8px;
}
.contact__link{
	color: #fff;
	display: inline-block;	
}



/*-------------------------*/
/* $Footer
---------------------------*/
.footer{
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #282828;
}
.footer__logo{
	display: block;
	height: 40px;
	width: 96px;
	/*border: 1px solid #fff;*/
	background-image: url('../images/footer_logo.svg');
	background-position: -9px center;
	background-size: cover;
	margin-bottom: 8px;
}
/* list */
.list{
	padding-top: 24px;
	padding-bottom: 24px;
}
.list__link{
	color: #fff;
	display: inline-block;
	margin-bottom: 16px;
}
.footer__icon-group{
	padding-top: 24px;
}
.footer__icon-group .icon-btn{
	margin-right: 16px;
}
.copyright{
	text-align: center;
	font-size: 14px;
	margin-top: 24px;
	color: #484848;
}



/*-------------------------*/
/* $Parallax image
---------------------------*/
/* common */
.parallax-container{
	/*border: 1px solid red;*/
}
.parallax-container .image{
	width: 100%;
	display: block;
	/*border: 1px solid #fff;*/
}
.parallax-container .frame{
	position: absolute;	
}
.parallax-container .frame__inner{
	width: 100%;
	padding-top: 100%;
	border: 6px solid #dcb667;
}
/* about */
.parallax-container-about{
	margin-top: 120px;
}
@media (max-width: 768px){
	.parallax-container-about{
		margin-top: 0;
	}
}
.parallax-container-about .frame{
	width: 200%;
	bottom: 0;
	right: -40%;
}
/* service */
.parallax-container-service{
	margin-left: -16px;
}
.parallax-container-service .frame{
	width: 50%;
	bottom: -30%;
	left: 30%;
}
/* contact */
.parallax-container-contact{
	margin-top: 240px
}
@media (max-width: 768px){
	.parallax-container-contact{
		margin-top: 48px;
	}
}
.parallax-container-contact .frame{
	width: 48%;
	top: -30%;
	left: 15%;
}