@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;500;700&display=swap');
*{
	margin:0;
	padding:0;
}

body{
	font-family:'Noto Serif TC', serif;
}

/*=========header=========*/
header{
	box-sizing:border-box;
	margin:auto;
	padding:1% 2% 60px;
	position: -webkit-sticky;/* Safari */
    position: sticky;
    top: 0;
	background:rgba(255,255,255,1);
	border-bottom:1px solid rgba(228, 233, 227, 1);
	z-index:8000;
}

.logo{
	position:absolute;
	top:20%;
}

.logo img{
	left:20px;
	height:40px;
}

.menu{
	position:absolute;
	right:20px;
	top:20%;
	width:30px;
	height:30px;
	font-size:30px;
	display:block;
}

/*==========nav===========*/
nav{
	width:100%;
	margin:auto;
	text-align:center;
	background:rgba(255, 255 ,255 , 1);
	position: -webkit-sticky;/* Safari */
    position: sticky;
  	top: 65px;
	z-index:8000;
}

nav li{
	display: block;
	border-bottom:solid rgba(228, 233, 227, 1) .5px;	
}

nav li a{
	display: inline-block;
	padding:20px 130px;
	color: rgba(152, 173, 149, 1);
	text-decoration: none;
	font-weight:700;
}

.ch_bg{
	background:rgba(228, 233, 227, 1);
}

.line_contain{
	position:relative;
}

.line1, .line2{
	width: 0%;
    height: 4px;
    background-color: rgba(255, 217, 102, 1);
    position:absolute;
    
	transition: all .3s linear;
	-webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear;
}

.line1{
    left: 50%;
}

.line2{
    right: 50%;
}

/*hover*/
nav li a:hover .line1, nav li a:hover .line2{
	width: 100%;
	color: rgba(112, 139, 107, 1);
}

/*active*/
nav li a:active .line1, nav li a:active .line2{
	width: 100%;
	background:rgba(74, 92, 70, 1);
	color: rgba(74, 92, 70, 1);
}

/*this page*/
.this_line{
	width:200%;
    height: 4px;
    background-color:rgba(74, 92, 70, 1);
    position:absolute;
	left:-50%;
	visibility:hidden;
}

.this_text{
	color:rgba(74, 92, 70, 1);
}

/*==========section===========*/
section{
	width:100%;
	margin: auto;
	text-align:center;
	color:rgba(96, 108, 56, 1);
	background:rgba(228, 233, 227, .6);s
	line-height:2.5em;
	font-size:1.1em;
	display:grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(12, 1fr);
}

/*==========footer===========*/
footer{
	clear:both;
	padding:15px 0px;
	text-align:center;
	color:rgba(112, 139, 107, 1);
	background:rgba(255, 255, 255, 1);
	
}

footer a {
	color:rgba(152, 173, 149, 1);
}

/*=========================RWD==========================*/
@media only screen and (min-width: 768px) { 
header{
	box-sizing:border-box;
	margin:auto;
	padding:1% 2% 60px;
	position: -webkit-sticky;/* Safari */
    position: sticky;
    top: 0;
	background:rgba(255,255,255,1);
	border-bottom:0px solid rgba(228, 233, 227, 1);
	z-index:5000;
}

.logo{
	position:absolute;
	top:20%;

}

nav{
	width:100%;
	margin-top:-63px;
	text-align:center;
	background:rgba(255, 255 ,255 , 0);
	position: -webkit-sticky;/* Safari */
    position: sticky;
  	top: 10px;
	z-index:5000;
}

nav li{
    display: inline-block;
    border-bottom:solid rgba(242, 242, 242, 1) 0px;/*上面長什麼樣，這邊就要長什麼樣，但要記得設成0去除底線*/
}

nav li a{
	display: inline-block;
	padding:20px 50px;
	color: rgba(152, 173, 149, 1);
	text-decoration: none;
	font-weight:700;
}

.menu{
    display:none;/*讓menu消失*/    
}
}