@charset "UTF-8";
/* 以上是 聲明 css編碼 */

/* 以下是 圖示文字 的 CSS */
@import url('/webeip/HT00100/becky/fonticons/css/style.css');
/*以下是google fonts的CSS*/
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
/* 以下是 圖示文字 new ver. 的 CSS */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

*{ font-family: Microsoft JhengHei;/*微軟正黑體*/ }

html,body,p,ol,ul,h1,h2,h3,h4,h5,form {
	margin: 0px;
	padding: 0px;
}

ul{
	list-style: decimal-leading-zero;
}

a,a:link,a:visited,a:hover,a:active{
	text-decoration: none;
}


/* 大圖輪播器 */
	.slider {
		margin: 0 auto;
		width: 100%;
		text-align: left;
		position: relative;
		visibility: hidden;
	}
	.slider ul,
	.slider ul li {
		float: left;
		display: inline;
		overflow: hidden;
	}
	.slider ul li{
		width: 100%;
		position: relative;
	}
	.slider ul li img {
		width: 100%;
		min-width: 100%;
		vertical-align: top;
	}
	/*
		.slider ul li .slider_txt{
			position: absolute;
			bottom: 2em;
			left: 2.5%;
			width: 45%;
			background-color: rgba(0,0,0,0.5);
			color: #FFF;
			border-radius: 10px;
		}
		.slider ul li .slider_txt .slider_txt_title{
			padding: 1rem;
			box-sizing: border-box;
		}
		.slider ul li .slider_txt .slider_txt_content{
			padding: 0.5rem 1rem;
			box-sizing: border-box;
		}
	*/
	.sliderCover {
		width: 100%;
		overflow: hidden;
	}
	.sliderWrap {
		top: 0;
		left: 0;
		position: absolute;
		overflow: hidden;
	}
	.pagiNation {
		bottom: 15px;
		left: 0;
		width: 100%;
		height: 10px;
		text-align: center;
		position: absolute;
		z-index: 110;
	 	visibility: visible;
	}
	.pagiNation a {
		margin: 0 5px;
		width: 40px;
		height: 10px;
		display: inline-block;
		overflow: hidden;
		background: #aaa;
		transition: all 0.2s ease-in-out;
	}
	.pagiNation a:hover {
		opacity: 0.6;
	}
	.pagiNation a.pnActive:hover {
		opacity: 1;
	}
	.pagiNation a.pnActive {
		background: #000;
	}
	.slider ul:before,
	.slider ul:after,
	.sliderWrap:before,
	.sliderWrap:after {
		content: " ";
		display: table;
	}
	.slider ul:after,
	.sliderWrap:after {clear: both;}
	.slider ul,
	.sliderWrap {*zoom: 1;}

	.page_ban_txt{
		z-index: 100;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		display: block;
		font-size: 4rem;
		font-weight: bold;
		white-space: nowrap;
		padding: 1.5rem 2.5rem 1.5rem 2.75rem;
		box-sizing: border-box;
		letter-spacing: 0.25rem;
		background-color: rgba(0,0,0,0.5);
		color: #FFF;
		border-radius: 5px;
	}
	.page_ban_en_txt a{
		color: #FFF;
		font-family: 'Comfortaa', cursive;
	}

/* 下拉按鈕 */
	.sliderdownbtn{
		cursor: pointer;
		position: absolute;
		z-index: 110;
		bottom: 10%;
		left: 50%;
		transform: translateX(-50%);

		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		border: 2px solid rgba(0,0,0,0);
		background-color: rgba(255,255,255,0.3);
		color: rgba(0,0,0,0.8);
		font-size: 2em;
		padding: 0.5em;
		box-sizing: border-box;
		border-radius: 50%;
		
		transition: all 1s;
	}
	.sliderdownbtn:hover{
		background-color: rgba(255,255,255,1);
		color: rgba(0,0,0,1);
	}

/*內容上方說明*/
	.contentbox{
		width: 90%;
	    max-width: 1200px;
	    margin: 1rem auto 0;
	    padding: 20px;
	    border-radius: 10px;
	    box-sizing: border-box;
	    box-sizing: border-box;
	    border: 2px solid rgba(0,0,0,.2);
	    -webkit-box-shadow: 5px 5px rgba(0,0,0,.2);
	    -moz-box-shadow: 5px 5px rgba(0,0,0,.2);
	    box-shadow: 5px 5px rgba(0,0,0,.2);
	}
	.contentbox > p{
		line-height: 30px;
	}
	.contentbox > h2{
		font-size: 1.25rem;
	    padding: 5px;
	    box-sizing: border-box;
	    background-color: #FD4E4C;
	    width: 150px;
	    text-align: center;
	    color: #FFF;
	    position: relative;
	}
	.contentbox > h2:before{
		content: "";
	    width: 0;
	    height: 0;
	    position: absolute;
	    top: 50%;
	    left: 0;
	    transform: translateY(-50%);
		border-style: solid;
		border-width: 20px 0 20px 20px;
		border-color: transparent transparent transparent #fff;
	}
	.contentbox > h2:after{
		content: "";
	    width: 0;
	    height: 0;
	    position: absolute;
	    top: 50%;
	    right: 0;
	    transform: translateY(-50%);
		border-style: solid;
		border-width: 20px 20px 20px 0;
		border-color: transparent #fff transparent transparent;

	}

/*內容*/
	.content{
		display: flex;
		width: 90%;
		max-width: 1200px;
    	justify-content: center;
    	margin: 50px auto;
	}

	.content div a{
		display: block;
		margin: 0 auto;
	}
	.material-icons{
		background-color: #FFFF00;
    	border-radius: 50px 50px 0 0;
		font-size: 250px;
		color: #454E9E;
	}

	.material-icons:hover{
		background-color: #454E9E;
		color: #FFFF00;
	}

	.content_a {
		background-color: #454E9E;
		padding: 10px 0;
		color: #FFF;
		text-align: center;
    	font-size: 30px;
    	letter-spacing: 15px;
	}

	.content_a:hover{
		background-color: #FFFF00;
		color: #454E9E;
	}

	.bodywrap{
		padding: 0 50px;
		width: 100%;
    	max-width: 500px;
	}
	.bodywrap h2{
		font-size: 2.5rem;
    	letter-spacing: 10px;
    	border-left: 3px solid #000;
    	padding-left: 20px;
	}

	.bodywrap h3{
		padding: 0 30px;

	}

	.content_p{
		padding: 20px;
	}

	.content_p p{
		font-size: 1.2rem;
	}

	.content_p ul li{
		padding: 5px 0; 
	}
	.content div a{
		width: 100%;
    	max-width: 250px;
	}
@media all and (max-width: 768px){
	.sliderdownbtn{ display: none; }
	.pagiNation a{ width: 10px; }
}
@media (max-width: 750px)
{	
	.page_ban_txt{
		font-size: 2.5rem;
	}
	.content{
		display: block;
	}
	.bodywrap{
		padding: 50px 0;
		margin: 0 auto;
	}
	.bodywrap h2{
		border-right: 3px solid #000;
		text-align: center;
		padding-left: 0;
	}
	.bodywrap h3{
		text-align: center;
	}
}

@media (max-width: 450px)
{	
	.page_ban_txt{
		font-size: 1.2rem;
	}
}

@media (max-width: 320px)
{	
	.page_ban_txt{
		font-size: 1rem;
	}
	.bodywrap{
		padding: 50px 0;
		margin: 0 auto;
	}
	.bodywrap h2{
		width: 80%;
		margin: 10px auto;
		font-size: 2rem;
		border-bottom: 2px solid #000;
		padding-bottom: 10px;
		border-right: none;
		border-left: none;  
	}
	.material-icons{
		font-size: 200px;
	}
	.content div a{
		width: 200px;
	}
	.content_p ul li {
		padding: 2px 0;
	}
}