/*--------------copyright by alva start-------------------------------*/
* {
    padding: 0px;
    margin: 0px;
}

ul {
    margin-bottom: 0px;
	list-style:none;
}

body {
    font-family:'cwTeXYen', sans-serif, Arial,"微軟正黑體", "Microsoft JhengHei";
    position: relative;
    font-size: 18px;
	letter-spacing:1px;
	background:#fff;
	color:#fff;
}

a {
    display: block;
}
a:hover {
	text-decoration:none;
}
.clear {
	clear:both;
}
/*---------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------*/
header {
	background:url(../../images/bg1.jpg) top center no-repeat fixed;
	background-size:cover;
	position:relative;
	text-align:center;
	padding:0 0 12% 0;
}
	/*mask*/
	.mask {
		background:url(../../images/mask.png) top center no-repeat;
		background-size:cover;
		min-height:819px;
	}
	/*title_area*/
	.title_area {
		position:absolute;
		top:14%;
		left:calc(50% - 289px);
		text-align:center;
	}
		/*title*/
		.title {
		}
		/*ibutton*/
		.ibutton {
			margin:13% 0 0 0;
		}
			.ibutton ul {
			}
				.ibutton li {
					display:inline-block;
					width:15%;
					vertical-align:middle;
				}
					.ibutton li:nth-of-type(2n) {
						font-size:20px;
						letter-spacing:5px;
						font-weight:bold;
					}
					.ibutton a {
						font-size:20px;
						color:#fff;
						letter-spacing:3px;
						padding:25px 10px;
						border:solid 1px #fff;
						border-radius:5px;
						transition:.3s ease all;
					}
						.ibutton a:hover {
							background:rgba(255,255,255,.6);
							color:#182438;
							border:none;
						}
	/*scroll*/
	.scroll {
		position:relative;
		margin:-7% 0 0 0;
	}
		.scroll a {
			display: inline-block;
			animation:scrolling .8s infinite alternate ease-out;
		}
		@keyframes scrolling {
			0% {
				transform:scale(0.9);
			}
			100% {
				transform:scale(1);
			}
		}
	/*about*/
	.about {
		font-size:20px;
		line-height:36px;
		background:rgba(0,0,0,.3);
		padding:2%;
		border-radius:5px;
		width:50%;
		text-align:left;
		margin:5% auto 0;
		letter-spacing:1px;
	}
	@media screen and (max-width:1500px) {
		.scroll {
			margin: -10% 0 0 0;
		}
		.about {
			width:70%;
		}
	}
	@media screen and (max-width:1200px) {
		.scroll {
			margin: -12% 0 0 0;
		}
	}
	@media screen and (max-width:1000px) {
		.mask {
			min-height:800px;
		}
		.scroll {
			margin: -15% 0 0 0;
		}
		.about {
			width:80%;
		}
		header {
			padding:0 0 20% 0;
		}
	}
	@media screen and (max-width:768px) {
		.scroll {
			margin: -15% 0 0 0;
		}
	}
	@media screen and (max-width:700px) {
		.title_area {
			left:3%;
		}
		.mask {
			min-height:750px;
		}
		.scroll {
			margin: -18% 0 0 0;
		}
		.about {
			width:90%;
		}
		.title {
			padding:0 3%;
			width:100%;
		}
		.title img {
			width:100%;
		}
	}
	@media screen and (max-width:590px) {
		.title_area {
			left:2%;
		}
		.mask {
			min-height:700px;
		}
		.scroll {
			margin: -22% 0 0 0;
		}
		.about {
			width:95%;
			margin: 8% auto 0;
		}
		header {
			padding:0 0 35% 0;
		}
	}
	@media screen and (max-width:500px) {
		.title_area {
			left:0%;
			top:10%;
			padding:0 10%;
		}
		.mask {
			min-height:500px;
		}
		.scroll {
			margin: -25% auto 0;
			width:30%;
		}
		.scroll img {
			width:100%;
		}
		.about {
			margin: 15% auto 0;
			font-size:18px;
			width:90%;
		}
		header {
			background-attachment:inherit;
		}
	}
	@media screen and (max-width:400px) {
		header {
			padding: 0 0 40% 0;
		}
		.mask {
			min-height:500px;
		}
		.about {
			margin: 15% auto 0;
		}
		.title_area {
			top:10%;
			left:0;
		}
		.ibutton {
			margin: 15% 0 0 0;
		}
	}
/*---sce_title-------------------------------------------------------------------------------------------------------------------------------*/
.sce_title {
	text-align:center;
	background:url(../../images/section_title_bg.png) top center no-repeat;
	min-height:375px;
}
	.sce_title img {
		position: relative;
		margin-top: -104px;
	}
	@media screen and (max-width:600px) {
		.sce_title {
			min-height:350px;
		}
	}
	@media screen and (max-width:500px) {
		.sce_title {
			min-height:320px;
		}
	}
/*---sce--------------------------------------------------------------------------------------------------------------------------------------*/
.sce {
	position:relative;
	overflow:hidden;
	transition:.5s ease-in;
	box-shadow: inset 0px 2px 15px rgba(0,0,0,.7);
}
	/*sce_text*/
	.sce_text {
		z-index:9;
		width: 40%;
		display: inline-block;
		height: 100%;
		padding: 2% 7% 2% 3%;
		box-shadow: inset 0px 2px 10px rgba(0,0,0,.3);
		position:relative;
	}
		/*sce_t*/
		.sce_t {
			text-align:right;
			color:#000;
			float:right;
			width:45%;
		}
			.sce_t h1 {
				font-size:24px;
			}
			.sce_t span {
				font-size:16px;
				display:block;
				font-weight:bold;
			}
			.sce_t p {
				font-size:18px;
				line-height:30px;
				padding:20% 0 16% 0;
			}
	/*bnb*/
	.bnb {
		text-align:right;
	}
		.bnb img {
			padding-bottom:3%;
		}
		.bnb ul {
			border-top:solid 1px #000;
			margin: 0 0 0 55%;
			padding-top:3%;
		}
			.bnb li {
				display:inline-block;
				vertical-align:top;
				width:45%;
				text-align:center;
			}
				.bnb li a {
					font-size:14px;
					color:#000;
					position:relative;
					transition:.3s ease-out;
				}
					.bnb span {
						display:block;
						font-size:15px;
						color:#000;
						margin:5% 0 0 0;
					}
					.bnb li a div {
						position:relative;
					}
					.bnb li a div:before {
						content:'';
						background:rgba(0,0,0,.5);
						position:absolute;
						top:0;
						left:50%;
						width: 88px;
						height: 88px;
						border-radius:100%;
						transition:.3s ease-out;
						transform:translateX(-50%);
					}
					.bnb li a:hover div:before {
						opacity:0;
					}
		/*triangle*/
		.triangle {
			position: absolute;
			right: -5%;
			top: calc(50% - 56px);
			z-index: 0;
		}
	/*sce_img*/
	.sce_img {
		overflow:hidden;
	}
		.sce_img div {
			background-size:cover;
			transition:.6s ease-in;
			position: absolute;
			width: 100vw;
			height: 100%;
			top: 0;
			background-size: cover;
			background-position: center;
			background-repeat:no-repeat;
			z-index:-1;
		}
		.sce_img div:before {
			content:'';
			background:rgba(0,0,0,.5);
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			height:100%;
			transition:.5s ease-in;
		}
		.sce:hover .sce_img div:before {
			opacity:0;
		}
		.sce:hover .sce_img div {
			transform:scale(1.1);
		}
/*---sce for 2n---*/	
.sce:nth-of-type(2n+1) .sce_text {
	float:right;
}
.sce:nth-of-type(2n+1) .sce_t {
	float:left;
	color:#fff;
	text-align:left;
}
.sce:nth-of-type(2n+1) .bnb {
	text-align:left;
}
.sce:nth-of-type(2n+1) .bnb ul {
    margin: 0 55% 0 0;
	border-top: solid 1px #fff;
}
.sce:nth-of-type(2n+1) .bnb span {
	color:#fff;
}
.sce:nth-of-type(2n+1) li {
}
.sce:nth-of-type(2n+1) li a div:before {
}
.sce:nth-of-type(2n+1) .triangle {
	left:-5%;
}
			@media screen and (max-width:1500px) {
				.sce_t {
					width:70%;
				}
				.bnb ul {
					margin: 0px 0 0 30%;
				}
				.sce:nth-of-type(2n+1) .bnb ul {
					margin: 0 30% 0 0;
				}
			}
			@media screen and (max-width:1050px) {
				.sce_text {
					width:45%;
					padding: 2% 4% 2% 3%;
				}
				.sce_t {
					width:100%;
				}
				.triangle {
					right:-9%;
				}
				.sce:nth-of-type(2n+1) .triangle {
					left:-9%;
				}
			}
			@media screen and (max-width:750px) {
				.sce_text {
					width: 100%;
					padding: 2% 3% 2% 3%;
					display: block;
				}
				.sce_t p {
					padding: 3% 0 3% 0;
				}
				.bnb ul {
					margin: 0px 0 0 50%;
				}
				.sce:nth-of-type(2n+1) .bnb ul {
					margin: 0 50% 0 0;
				}
				.sce_img div {
					position:relative;
					height:350px;
				}
				.triangle {
					left: calc(50% - 22px);
					bottom: -14%;
					transform: rotate(90deg);
					top: inherit;
					right: inherit;
					z-index:-3;
				}
				.sce:nth-of-type(2n+1) .triangle {
					left: calc(50% - 22px);
					transform: rotate(-90deg);
					z-index:-3;
				}
				.sce:nth-of-type(2n+1) .sce_text {
					float: none;
				}
				.sce .triangle:nth-of-type(11) {
					bottom:-15%;
				}
			}
			@media screen and (max-width:450px) {
				.bnb ul,.sce:nth-of-type(2n+1) .bnb ul {
					margin: 0 0 2% 0;
				}
				.bnb ul li {
					width:30%;
				}
				.sce_bg {
					background-attachment:inherit;
				}
				.sce_text {
					box-shadow:none;
				}
				.sce_img div:before,.bnb li a div:before {
					background:rgba(0,0,0,.0);
				}
			}
			@media screen and (max-width:350px) {
				.bnb ul,.sce:nth-of-type(2n+1) .bnb ul {
					margin: 0 0 2% 0;
					padding-top: 4%;
				}
				.bnb ul li {
					width:40%;
				}
				.bnb img {
					padding-bottom: 4%;
				}
				.triangle {
					bottom:-13%;
				}
			}
/*---sce_bg----------------------------------------------------------------------------------------------------------------------------------*/
.sce_bg {
	min-height:1290px;
	text-align:center;
	padding: 30% 0 0 0;
}
.sce_bg2 {
	background:url(../../images/bg_mask_01.png) top right no-repeat, url(../../images/bg_mask_02.png) bottom center no-repeat, url(../../images/bg2.jpg) top center no-repeat fixed;
	background-size:contain, contain, cover;
}
.sce_bg3 {
	background:url(../../images/bg_mask_01.png) top right no-repeat, url(../../images/bg_mask_02.png) bottom center no-repeat, url(../../images/bg3.jpg) top center no-repeat fixed;
	background-size:contain, contain, cover;
}
	.sce_info {
		background:rgba(0,0,0,.3);
		padding:2%;
		width:55%;
		margin:0 auto;
	}
	.sce_info span {
		font-size:21px;
		line-height:28px;
		color:#fff;
		text-align:left;
		display:block;
	}
	@media screen and (max-width:1200px) {
		.sce_bg {
			min-height:900px;
			padding: 28% 0 0 0;
		}
		.sce_info {
			width:65%;
		}
	}
	@media screen and (max-width:900px) {
		.sce_bg {
			min-height:700px;
			padding: 28% 0 0 0;
		}
		.sce_info {
			width:80%;
		}
	}
	@media screen and (max-width:750px) {
		.sce_bg {
			min-height:600px;
			padding: 26% 0 0 0;
		}
		.sce_info {
			width:85%;
		}
	}
	@media screen and (max-width:600px) {
		.sce_bg {
			min-height:550px;
			padding: 26% 0 0 0;
		}
	}
	@media screen and (max-width:450px) {
		.sce_bg {
			min-height:550px;
			padding: 30% 0 0 0;
			background-attachment:inherit;
		}
		.sce_info {
			width:90%;
		}
		.sce_info span {
			font-size:18px;
			padding:2%;
		}
	}
/*---sce_bottom--------------------------------------------------------------------------------------------------------------------------------*/
.sce_bottom {
	background:url(../../images/bg4_mask.png) top center no-repeat, url(../../images/bg4.jpg) top center no-repeat;
	background-size:cover;
	min-height:465px;
	position:relative;
}
	.sce_bottom img {
		position:absolute;
		top:41%;
		left:calc(50% - 491px);
	}
	@media screen and (max-width:1025px) {
		.sce_bottom img {
			width:90%;
			left:4%;
		}
	}
	@media screen and (max-width:700px) {
		.sce_bottom {
			min-height:370px;
		}
		.sce_bottom img {
			width:90%;
			top: 47%;
		}
	}
	@media screen and (max-width:400px) {
		.sce_bottom {
			min-height:300px;
		}
		.sce_bottom img {
			width:95%;
			top: 50%;
			left:2%;
		}
	}
/*---footer-------------------------------------------------------------------------------------------------------------------------------*/
.footer {
    vertical-align: top;
    font-size: 14px;
    color: #fff;
    background: #4a5960;
	padding-bottom: 30px;
}
/*************************
**********footer**********
**************************/
.footer a {
	color: #ffffff;
	display:inline-block;
}
.footer a:visited {
	color: #ffffff;
}
.footer a:hover,
.footer a:focus {
	color: #6fe5d1;
}
.footertop {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	min-height: 23px;
	margin-bottom: 40px;
}
.footerp {
	font-size: 14px;
}
.footer hr {
	margin-top: 10px;
	margin-bottom: 10px;
	border: 0;
	border-top: 1px solid #3e4549;
}
.footerp i {
	font-size: 30px;
	color: #6fe5d1;
}
.font18 {
	font-size: 18px;
}
.font22 {
	font-size: 22px;
}
.footersocial img:hover {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	
	100% {
		opacity: 1;
	}
}
.footertext {
	padding-top: 10px;
}
.footertext i {
	font-size: 20px;
	color: #6fe5d1;
}
.footertext hr {
	border-top: 1px dashed #3e4549;
	margin-top: 0px;
	margin-bottom: 5px;
}
.footerht hr {
	border-top: 1px solid #fff;
}
.webveiw img {
	float: right;
}
.Copyright {
	font-size: 13px;
	padding-top: 20px;
}
.Copyright a {
	color: #fff;
}
.Copyright a:visited,
.Copyright a:focus {
	color: #fff;
}
.Copyright a:hover {
	color: #6fe5d1;
}
.brs {
	display: none;
}
@media(max-width:991px) {
	.brs {
		display: block;
		height: 1px;
	}
	
	.Copyright {
		padding-top: 0px;
	}
}
@media(max-width:767px) {
	.footerp img {
		margin: 0 auto;
	}
	
	.footerp {
		text-align: center;
	}
	
	.footerp hr {
		display: none;
	}
	
	.footersocial {
		text-align: center;
	}
	
	.footertext {
		text-align: center;
	}
	
	.footertext hr {
		display: none;
	}
	
	.webveiw img {
		float: none;
		margin: 0 auto;
	}
	
	.Copyright {
		text-align: center;
	}
}
/*******************************
*****container0***首頁選單  **
*******************************/

.container0 {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.container0:before,
.container0:after {
	display: table;
	content: " "
}

.container:after {
	clear: both;
}

.container0:before,
.container0:after {
	display: table;
	content: " "
}

.container0:after {
	clear: both;
}

@media(min-width:768px) {
	.container0 {
		width: 750px;
	}
}

@media(min-width:992px) {
	.container0 {
		width: 970px;
		/*970*/
	}
}

@media(min-width:1100px) {
	.container0 {
		width: 1050px;
		/*1170*/
	}
}

@media(min-width:1200px) {
	.container0 {
		width: 1170px;
		/*1170*/
	}
}

@media(min-width:1300px) {
	.container0 {
		width: 1250px;
		/*1170*/
	}
}

@media(min-width:1500px) {
	.container0 {
		width: 1450px;
		/*1170*/
	}
}

@media(min-width:1750px) {
	.container0 {
		width: 1700px;
		/*1170*/
	}
}
.center0 .img-responsive {
    margin: 0 auto;
}
/*************************
*******container1***內文*
**************************/

.container1 {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.container1:before,
.container1:after {
	display: table;
	content: " "
}

.container1:after {
	clear: both;
}

.container1:before,
.container1:after {
	display: table;
	content: " "
}

.container1:after {
	clear: both;
}

@media(min-width:768px) {
	.container1 {
		width: 750px;
	}
}

@media(min-width:992px) {
	.container1 {
		width: 950px;
		/*970*/
	}
}

@media(min-width:1200px) {
	.container1 {
		width: 1170px;
		/*1170*/
	}
}

@media(min-width:1450px) {
	.container1 {
		width: 1400px;
		/*1170*/
	}
}
	
#gotop {
	position: fixed;
	right:0px;
	bottom:1%;
	display:none;
	cursor:pointer;
	transition:.3s ease-in;
	z-index:99;
}
	#gotop:hover {
		right:0px;
	}
	@media screen and (max-width:500px) {
		#gotop {
			bottom:4%;
			width:18%;
		}
			#gotop img {
				width:100%;
			}
	}
	@media screen and (max-width:400px) {
		header {
			background: url(../../images/bg1.jpg) top center no-repeat;
			background-size: cover;
		}
		.sce_bg2 {
			background: url(../../images/bg_mask_01.png) top right no-repeat, url(../../images/bg_mask_02.png) bottom center no-repeat, url(../../images/bg2.jpg) top center no-repeat;
			background-size: contain, contain, cover;
		}
		.sce_bg3 {
			background: url(../../images/bg_mask_01.png) top right no-repeat, url(../../images/bg_mask_02.png) bottom center no-repeat, url(../../images/bg3.jpg) top center no-repeat;
			background-size: contain, contain, cover;
		}
	}
/*---sidebtn---*/
.sidebtn {
	position:fixed;
	bottom:17vh;
	right:10px;
	line-height:10px;
	text-align:center;
	z-index:10;
	display:none;
}
	.sidebtn ul {
	}
		.sidebtn li {
			margin:3px 0;
		}
		.sidebtn span {
			display: inline-block;
			vertical-align: top;
			transform: rotate(90deg) translateY(-2px);
			margin: 10px 0;
		}
			.sidebtn li a {
				color: #fff;
				border: solid 1px #fff;
				border-radius: 5px;
				padding: 1em 1em;
				transition:.2s linear;
			}
				.sidebtn li a:hover {
					background:#fff;
					color:#333;
				}
				@media screen and (max-width:425px) {
					.sidebtn li a {
						font-size:14px;
					}
				}