@import "/webeip/HT00100/becky/css/reset.css";
@charset "big5";
/* PC & phone 統一格式 */
header{
	position: fixed;
	z-index: 9999;
	width: 100%;
	background-color: rgba(255,255,255,1);
	box-shadow: 0 0 8px #999;
}
.logo{
	background-image: url(/webeip/HT01019/img/top_01.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
/*小連結*/
.toplink ul li{
	
}
.toplink ul li a{
	display: block;
	padding: 0.35rem;
	box-sizing: border-box;
	font-size: 1.5rem;
	margin: 0.25rem;
	transition: all .3s;
	color: #fff;
	border-radius: 10px;
}
.toplink ul li .toplink_fb{
	background: #3B559F;
}
.toplink ul li .toplink_line{
	background: #4ECD00;
}
.toplink ul li .toplink_ig{
	background: #E3297D;
    background: -webkit-linear-gradient(-120deg, #7D36AE 0%, #D82F81 30%, #F80A00 70%, #F7D903 100%);
    background: -o-linear-gradient(-120deg, #7D36AE 0%, #D82F81 30%, #F80A00 70%, #F7D903 100%);
    background: linear-gradient(-120deg, #7D36AE 0%, #D82F81 30%, #F80A00 70%, #F7D903 100%);
}
.toplink ul li .toplink_mail{
	background: #f44336;
}
.toplink ul li .toplink_phone{
	background: #ff9800;
}

/*top手機版css*/
@media screen and (max-width:980px)
{
	.headheight{ padding-bottom: 70px; }
	.logo{
		display: block;
		width: 230px;
		height: 60px;
	}
	/*導覽列*/
	.btn{
		width: 40px;
		height: 40px;
		position:absolute;
		top:10px;
		left:-50px;
		z-index: 10000;
		cursor:pointer;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.open{background-image: url(/webeip/HT00100/becky/icon/menubtn_open_blod_bl.svg);}
	.close{background-image: url(/webeip/HT00100/becky/icon/menubtn_close_blod_bl.svg);}
	.topnav{
		background-color: rgba(143,196,30,0.8);
		position: fixed;
		z-index: 9999;
		top: 0;
		right: -250px;
		width: 250px;
		padding-top: 60px;
		box-sizing: border-box;
		height: 100%;
	}
	.topnav > ul{
		height: 95%;
		overflow: auto;
	}
	.topnav ul li a{
		display: block;
		font-size: 1.2em;
		font-weight: bold;
		color: white;
		padding: 10px;
		border-bottom: 1px solid white;
	}
	.topnav ul li:last-child a{
		border-bottom: none;
	}
	/*次選單*/
	.topnav ul li > .subnav{
		text-align: right;
		background-color: rgba(228,0,127,0.9);
		padding: 0.5em 1em;
		display: none;
	}
	.topnav ul li > .subnav li a{
		border-bottom: 1px solid rgba(255,255,255,0.5);
	}
	.topnav ul li:last-child,
	.topnav ul li > .subnav li:last-child a{
		border-bottom: none;
	}
	/*第3層選單*/
	.thirdnav{background-color: rgba(199,32,27,0.9);}
	/*小連結*/
	.toplink{
		position: fixed;
		right: 1em;
		bottom: 1em;
	}
	.icon-facebook2{font-size: 3em;}
	.icon-line{font-size: 2.4em;}
	.icon-instagram{font-size: 3em;}
	.icon-skype{font-size: 2.4em;}
	.icon-mail3{font-size: 3em;}
}
/*top電腦版css*/
@media screen and (min-width:980px)
{
	.headheight{ padding-bottom: 150px; }
	.topwrap{
		width: 1100px;
		margin: 0 auto;

		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.logo{
		display: block;
		width: 300px;
		height: 80px;
	}
	/*小連結*/
	.toplink{
		margin: 0 0.5em;
	}
	.toplink ul{
		display: flex;
		align-items:center;
	}
	.icon-facebook2{font-size: 2em;}
	.icon-line{font-size: 1.4em;}
	.icon-instagram{font-size: 2em;}
	.icon-skype{font-size: 1.4em;}
	.icon-mail3{font-size: 2em;}
	/*導覽列*/
	.topnav{
		background-color: #8FC41E;
		width: 100%;
	}
	.topnav ul{
		display: flex;
		align-items:center;
		justify-content:center;
	}
	.topnav ul li { position: relative; }
	.topnav ul li > a{
		display: block;
		font-size: 1.3em;
		font-weight: bold;
		white-space: nowrap;
		color: white;
		padding: 1em;
		box-sizing: border-box;
		border-right: 1px solid rgba(255,255,255,0.5);	
	}
	.topnav ul > li:last-child a{ border-right:none; }
	.topnav ul li a:hover{
		background: #70BC01;/*for 無法顯示漸層的瀏覽器(non-css3 browser)*/
		background: -webkit-linear-gradient(top, #ABE235, #70BC01);/*前綴規格, 漸層起點*/
		background: linear-gradient(to bottom, #ABE235, #70BC01);/*W3C規格, to+方向*/
	}
	.topnav ul li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/
		background: #70BC01;/*for 無法顯示漸層的瀏覽器(non-css3 browser)*/
		background: -webkit-linear-gradient(top, #ABE235, #70BC01);/*前綴規格, 漸層起點*/
		background: linear-gradient(to bottom, #ABE235, #70BC01);/*W3C規格, to+方向*/
	}
	/*次選單*/
	.topnav ul li > .subnav{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		flex-direction:column;
		flex-wrap:nowrap;
		text-align: center;
		display: none;
	}
	.topnav ul li > .subnav li{ width: 100%; }
	.topnav ul li > .subnav li a{
		background: #E4007F;
		color: white;
		border: 1px solid #E4007F;
		border-bottom: 1px solid white;

		position: relative;/*for thirdnav*/
	}
	.topnav ul li >.subnav li:last-child a{
		border-bottom: none;
	}
	.topnav ul li >.subnav li a:hover{
		background-color: white;
		color: #E4007F;
		border: 1px solid #E4007F;
		border-bottom: 1px solid #E4007F;
	}
	/*第3層選單*/
	.thirdnav{
		display: none;
		position: absolute;
		z-index: 99;
		top:5px;
		width: 120px;
		right: -120px;
		flex-direction:column;
		flex-wrap:nowrap;
		text-align: center;
	}
}
.underwrap{
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.underwrap_box{ width: 70%; }
/*QR code*/
	.undercode_QR{
		width: 30%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.undercode_QR > a{
		width: 50%;
		display: block;
	}
	.undercode_title{
		padding-top: 1em;
		text-align: center;
		font-size: 1.25rem;
		font-weight: bold;
		color: white;
	}
	.undercode{
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		vertical-align: top;
	}
/*under手機版css*/
@media screen and (max-width:980px)
{
	footer{
		background-color: rgba(0,0,0,1);
		color: white;
		padding: 1em 0;
	}
	.undernav{
		width: 90%;
		margin: 0 auto;
	}
	.undernav ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	.undernav ul li{
		width: 45%;
		margin: 0.5em auto;
	}
	.undernav ul li:nth-child(2){ display: none; }
	.undernav ul li:last-child{
		width: 95%;
		margin: 0.5em auto;
	}
	.undernav ul li a{
		display: block;
		text-align: center;
		background-color: rgba(149,220,254,1);
		color: white;
		padding: 0.5em 0;
		border-radius: 15px;
	}
	.underwrap{
		text-align: center;
	}
	.underwrap p{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		padding: 0 0 0.5em;
		box-sizing: border-box;
	}
	.underspanwrap{
		display: inline-block;
		padding: 0.5em 1em 1em;
		box-sizing: border-box;
	}
	.underwrap_box{ width: 100%; }
	.undercode_QR{ width: 100%; max-width: 400px; margin: 0 auto;}
	
	/*綠視界*/
	.underp{
		font-size: 0.7em;
		padding-top: 1em;
		margin-bottom: 0;
		text-align: center;
		color: rgba(255,255,255,0.5);
	}	
}
/*under電腦版css*/
@media screen and (min-width:980px)
{
	footer{
		width: 100%;
		min-width: 1200px;
		background-color: #333333;
		color: white;
		padding: 0 0 2em;

		position: relative;/*for underp*/
	}
	.undernav{
		background-color: rgba(149,220,254,0.9);
	}
	.undernav ul{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.undernav ul li a{
		display: block;
		padding: 0.5em 1em;
		box-sizing: border-box;
		margin: 0 0.5em;
		color: white;
	}
	.undernav ul li a:hover{
		color: rgba(0,51,153,0.7);	
	}
	.underwrap{
		width: 950px;
		margin: 0 auto;
		position: relative;
		padding: 2em 0;
		box-sizing: border-box;
	}
	.underwrap p{
		margin: 0.5em 0;
		line-height: 1.5em;
	}
	.underspanwrap{
		display: inline-block;
		padding-right: 1em;
	}
	/*綠視界*/
	.underp{
		position: absolute;
		bottom: 0;
		right: 0;
		text-align: right;
		font-size:0.9em;
		padding: 0.5em 2em;
		box-sizing: border-box;
		color: white;
	}	
}