@import url(http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
/*-------------------------------------------
     基本版面設定區
-------------------------------------------*/	
	
body {
	background-color: #e5e1e0;
	line-height: 1.75em;
	margin: 0px;
	padding: 0px;
	font-family: 'cwtexhei', 'Varela Round','Jost', '微軟正黑體', sans-serif;
	scroll-behavior: smooth;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
img, object, embed, video {max-width: 100%;vertical-align: bottom;border: 0px;}
/* IE 6 不支援最大寬度，因此寬度預設為 100% */
.ie6 img {width:100%;border: 0px;}
a,a:link,a:hover,a:active,a:visited{transition: 1s;text-decoration: none;
font-family: 'Noto Serif TC','cwtexhei', 'Varela Round', '微軟正黑體', sans-serif;}

.pc{
	display: block;
}
.mobile{
	display: none;
}
p{
	line-height: 1.75em;
}

.header{
	width: 100%;
	position: relative;
}
.header-title{
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: 25%;
}

.f-line{
	background-color: #6f9591;
	height: 85px;
	width: 2px;
	position: absolute;
	left: 22px;
	top: 0px;
}

.btn-col a{
	float: left;
	width: 20%;
	color: #333;
}
.btn-col a:link{
	color: #333;
}

.btn-col a:hover{
	color: #b0916e;
}
.em100%{
	float: left;
	width: 100%;
	display: block;
}
.em3{
	float: left;
	width: 30%;
	display: block;
}
.em7{
	float: left;
	width: 70%;
	display: block;
}

.flot-r{
	position: absolute;
	top: 0px;
	right: 0px;
}

.flot-l{
	position: absolute;
	top: 0px;
	left: 0px;
}

.m{
	padding: 50px;
}

/*-------------------------------------------
     文字設定區
-------------------------------------------*/

.font-noto{
	font-family: 'Noto Serif TC', serif;
	font-weight: normal;
}
.cormorant-garamond{
	font-family: "Cormorant Garamond", serif;
	font-optical-sizing: auto;
  font-weight: <weight>;
	font-style: normal;
	text-transform: uppercase;
}
.cormorant-infant {
	font-family: "Cormorant Infant", serif;
	font-optical-sizing: auto;

  font-weight: <weight>;
	font-style: normal;
	text-transform: uppercase;
	font-weight: normal;
}
.item-color{
	font-size: 14px;
	color: #74918c;
}
.font-grey{color: #bdc2c6;}
.font-black{color: #333;}
.store-gcolor{color: #305752;}
.store-rcolor{color: #8c3426;}
.gold-color{color: #a07a5f;}
.text-show{text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);}
.text-j{text-align: justify;}

.box-gcolor{
	background-color: #305752;
}
.box-rcolor{
	background-color: #8c3426;
}


.line-share-btn img {
  width: 41px;
  height: 41px;
  transition: transform .3s ease, opacity .3s ease;
}

.line-share-btn:hover img {
  transform: scale(1);
  opacity: .95;
}

/*-------------------------------------------
     版面設定區
-------------------------------------------*/	
#wap-body{
	position: relative;
	width: 100%;
	height: 100vh;
}

.main-content {
	width: 100%;
	float: left;
	padding-top: 10%;
}
.story-section{
	width: 100%;
	padding-top: 250px;
	padding-bottom: 450px;
}
.scrollbar{
	position: absolute;
	left: 45%;
	bottom: 0px;
	z-index: 1;
	width: 150px;
}



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



@media(max-width:768px){
.mt-10{margin-top:0.1rem!important}	
.flot-r{
	position: static;
	top: 0px;
	right: 0px;
}

.flot-l{
	position: static;
	top: 0px;
	left: 0px;
}	
	
.m-5s{margin:1.5rem!important}
.text-ends{text-align:left!important}
.text-centers{text-align:left!important}
.w-10{width:100%!important}
.w-25{width:49%!important}
	
.ms-3{margin-left:0rem!important}	
.mb-4s{margin-bottom:0rem!important}
.mt-3s{margin-top:0rem!important}
.mt-5s{margin-top:0rem!important}
.mb-5s{margin-bottom:1rem!important}
.pc{
	display: none;
}
.mobile{
	display: block;
}

.story-section{
	width: 100%;
	padding-top: 150px;
	padding-bottom: 250px;
}

.fs-4s{font-size:calc(1.125rem + .3vw)!important}
.fs-5s{font-size:1.020rem!important}
.fs-8{font-size:4.2rem!important}
.fs-10{font-size:0.9rem!important}
.header-title{
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: 40%;
}
}