@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
html
{
	font-size:4vw;
	font-family: 'Poiret One', cursive;/*英文字型*/
	font-family: 'cwTeXFangSong', serif;/*中文和英文字型*/
}

.logo
{
	width:50vw;
	margin:22vh auto 5vh;
	display:block;/*為了用塊狀元素的方法左右置中*/
	
}

header
{
	/*text-align:center;讓裡面所有的行內元素可以左右置中*/
}

nav
{
	background-color:#000000;
	height:5vh;
	width:100%;
	position:fixed;
	left:0;
	top:0;
	display:flex;
	align-items:center;
	z-index:2;
}

nav ul
{
	background-color:rgba(0,0,0,0.8);
	height:40vh;
	text-align:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
	position: absolute;
	top:5vh;
	left:0;
	width:100%;
	display:none;
}

nav ul li a
{
	color:#FFFFFF;
	text-decoration:none;/*底線選項*/
	font-size:0.8rem;
	line-height:2.5rem;/*行高*/
}

.btnmenu
{
	height:5vh;
	width:5vh;
	margin-left:4%;
	background-size:70%;
	background-repeat:no-repeat;
	background-position:center center;
}

.open
{
	background-image:url(../images/navicon/list-menu.svg);
}

.close
{
	background-image: url(../images/navicon/close.svg);
}

section h1
{
	text-align:center;
	font-size:2rem;
}


.newscontent li img
{
	width:40vw;
	display:block;/*為了消除行內元素預設的間距*/
	margin:auto;/*為了讓已經偽裝成塊狀元素的img執行左右置中*/
}

.newscontent li
{
	text-align:center;
	margin:3vw 0;
}

.newscontent li p span
{
	display:block;
}
.newscontent li p
{
	line-height:1.5rem;
}

.txtred
{
	color:#FF0000;
}

.newscontent h2
{
	font-size:1.5rem;
	line-height:2.5rem;
}

.newscontent li:nth-child(2)
{
	border-top:dotted 1px #9D9D9D;
	border-bottom:dotted 1px #9D9D9D;
	padding:3vw;
	box-sizing:border-box;
	width:85%;
	margin:auto;
}

.info
{
	text-align:center;
}

.info iframe
{
	border:solid 1vw #CBCBCB;
	width:50vw;
	height:50vw;
	margin:3vw 0;
}

.info p
{
	margin:3vw 0;
}

.info span
{
	display:block;
	font-size:1.2rem;
	line-height:2rem;
}

.info a
{
	color:#000000;
	position:relative;
}

.tel:after
{
	content:"";
	width:8vw;
	height:8vw;
	display: inline-block;
	background-image:url(../images/speech-bubble.svg);
	background-size:80%;
	background-repeat:no-repeat;
	background-position:center center;
	position:absolute;
	right:-10vw;
	top:-3vw;
}

footer
{
	height:15vw;
	background-color:rgba(0,0,0,1);
	position:relative;
	color:#C7AD3F;
	font-size:0.5rem;
	text-align:center;
	line-height:15vw;
}

footer:after
{
	content:"";
	background-image:url(../images/logow.png);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0.1;
	background-repeat:no-repeat;
	background-size:auto 100%;
	background-position:right center;
}

section i.fa-times
{
	display: none;
}

body
{
	background:url(../images/whirlpool.png);
}

.special
{
	position: absolute;
	top:5vh;
	left:0;
	width:100%;
	height:20vw;
	display:flex;
	justify-content:space-between;
	overflow:hidden;
	background-color:#9A8310;

}
.special li
{
	width:49.9%;
	height:99.5%;
	text-align:center;
	line-height:30vw;
	background:no-repeat center 3vw #FFFFFF;
	background-size:15%;
}

.special br
{
	display:none;
}

.special li:first-child
{
	background-image:url(../images/icon/star.svg);
}

.special li:last-child
{
	background-image: url(../images/icon/like.svg);
}

.special a
{
	text-decoration:none;
	color:#000000;
	display:block;
}

.specialimg img
{
	width:70vw;
	display:none;
	
}

.specialimg
{
	background-color:rgba(0,0,0,0.8);
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	
}

.outer
{
	display:none;
}

.specialimg:after
{
	content:"";
	position: absolute;
	right:3vw;
	top:8vw;
	background:url(../images/icon/error.svg) center center no-repeat;
	background-size:100%;
	width:8vw;
	height:8vw;
}

.totop
{
	background:#C7AD3F url(../images/icon/up-arrow.svg) no-repeat center center;
	background-size:70%;
	display:block;
	width:10vw;
	height:10vw;
	border-radius:10vw;
	position:fixed;
	right:2vw;
	bottom:-10vw;/*搭配js,就是利用animate移動到指定位置*
	/*display:none;搭配js,就是利用fadeIn.show.slideDown*/
}

#news,#info
{
	padding-top:7vh;
	box-sizing:border-box;
}

.line
{
	position:fixed;
	right:4%;
	top:0.5vh;
	height:4vh;
	z-index:3;
}

.fbouter
{
	position: absolute;
	right:5vh;
	top:22vh;
}