html,body,div,a,ul,li,input,img,header,article,hr,nav,label,section,i,textarea,button,table,th,td,iframe,video,source {
	margin:0;
	padding:0;
			box-sizing:border-box;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
}

body{
	font-family:Arial,微軟正黑體, sans-serif;
	overflow-x: hidden;
}

.logomenuBar {
	width:100%;
	background: white;
	position: fixed;
	z-index: 99;
}
.logomenuBar-fixed {
	box-shadow: 0px 1px 1px rgba(0, 102, 204, 0.7);
}

.logo {
	width:150px;
	height:55px;
	float:left;
	background-image:url(../images/logo.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display:block;
	margin:5px 20px 5px 20px;
}
.toggle,[id^=drop] {
	display:none;
	color:#000;
	font-size:14px;
}
nav {
	float:right;
	margin:5px 0 0 10px;
}
nav ul {
	float:left;
	position:relative;
	list-style: none;
}
nav ul li {
	float:left;
	list-style: none;
}
nav a {
	color:#003D79;
	display:block;
	font-size:16px;
	font-weight: bold;
	padding:0 20px;
	text-align:center;
	text-decoration: none;
}
nav ul li a {
	width:130px;
	line-height:45px;
	border-bottom:5px solid transparent;
	padding-top:5px;
}
nav ul li ul li:hover,
nav a:hover {
	color:#84C1FF;
}
nav ul ul {
	border:1px solid #F0F0F0;
	background:#FFF;
	display:none;
	position:absolute; 
}
nav ul li:hover > ul {
	display:inherit;
}
nav ul li:nth-last-of-type(1) > ul {
	right:0px;
}
nav ul ul li {
	float:none;
	display:list-item;
	position:relative;	
}
nav ul ul li a {
	min-width:160px;
	width:auto;
	border-bottom:none;
	font-size:16px;
	line-height:40px;
	padding:0 15px;
	text-align:left;
}

nav .hover {
	color:#84C1FF;
}
.burger-input,.burger-input + label .burger-text {display:none;}

.logo-fixed {
	margin:5px 20px;
}
.navfixed1 {
	line-height:70px;
}
nav ul li:hover {
	position:relative;
	z-index:20
}
@media screen and (max-width:840px) {
	.burger-input {
		opacity:0;
	}
	.burger-input + label {
		width:50px;
		height:50px;
		border-radius:3px;
		cursor:pointer;
		padding-top:15px;
		position:absolute;
		top:10px;
		right:80px;
	}
	.burger-input + label .burger-text {
		width:50px;
		height:50px;
		display:block;
		font-size:18px;
		position:absolute;
		top:15.5px;
		right:-42px;
		-webkit-transition:all 200ms ease-in-out;
		   -moz-transition:all 200ms ease-in-out;
				transition:all 200ms ease-in-out;
	}
	.burger-input + label:after,.burger-input + label:before,.burger-input + label .burger {
		content:'';
		width:20px;
		height:3px;
		border-radius:3px;
		background:#000;
		display:block;
		margin:3px auto;
		-webkit-transition:all 200ms ease-in-out;
		   -moz-transition:all 200ms ease-in-out;
				transition:all 200ms ease-in-out;
	}
	.burger-input + label:hover .burger-text {
		color:#84C1FF;
	}
	.burger-input + label:hover:after,.burger-input + label:hover:before,.burger-input + label:hover .burger {
		background:#84C1FF;	
	}	
	.burger-input:checked + label:before {
		-webkit-transform:translateY(5px) rotate(135deg);
		   -moz-transform:translateY(5px) rotate(135deg);
			-ms-transform:translateY(5px) rotate(135deg);
			 -o-transform:translateY(5px) rotate(135deg);
				transform:translateY(5px) rotate(135deg);
	}
	.burger-input:checked + label:after {
		-webkit-transform:translateY(-7px) rotate(-135deg);
		   -moz-transform:translateY(-7px) rotate(-135deg);
			-ms-transform:translateY(-7px) rotate(-135deg);
			 -o-transform:translateY(-7px) rotate(-135deg);
				transform:translateY(-7px) rotate(-135deg);
	}
	.burger-input:checked + label .burger {
		-webkit-transform:scale(0);
		   -moz-transform:scale(0);
			-ms-transform:scale(0);
			 -o-transform:scale(0);
				transform:scale(0);
	}
	.burger-input:checked ~ nav {
		display:block;
	}
	nav {
		width:100%;
		height:calc(100vh - 70px);
		background:#FFF;
		display:none;
		margin:0;
		padding-bottom:50px;
		position:absolute;
		top:70px;
		bottom:0;
		overflow-x:auto;
		z-index:1000;
	}
	nav li {
		width:100%;
	}
	nav a {
		width:100%;
		line-height:50px;
	}
	nav ul {
		width:calc(100% - 60px);
		float:left;
		margin:0 30px;
	}
	nav ul li a {
		width:100%;
		line-height:50px;
		border-bottom:3px solid transparent;
		padding:8px 0 0 0;
		text-align:left;
		transition:all 0.30s ease-in-out;
	}
	nav > ul > li > a.hover {
		border-bottom:3px solid #84C1FF;
	}
	nav ul ul {
		width:100%;
		border:none;
		display:block;
		margin:0;
		position:static;
	}
	nav ul ul li a {
		width:100%;
		line-height:50px;
		padding:0 0 0 20px;
		position:relative;
		transition:all 0.30s ease-in-out;
	}
	nav ul li:hover > a,nav ul li:hover > label {
		color:#84C1FF;
	}
	nav ul li a:hover,nav ul li label:hover {
		color:#000;
	}
	nav > ul > li > a.hover:hover {
		color:#84C1FF;
	}
	nav ul ul li a:hover {
		color:#84C1FF;
		background:#F5F5F5;
	}
	nav ul ul li a:after {
		width:calc(100% - 20px);
		height:0;
		border-bottom:1px solid #EFEFEF;
		content:'';
		display:block;
		position:absolute;
		bottom:0;
		left:20px;
	}
}

/* product1_1 ~ product4_3 */
.theh1_1{
	font-size:30px;
	color:#5151A2;
	text-align:center;
	margin:auto;
	background:#ECECFF;
	clip-path: polygon(0 0, 100% 0%, 100% 65%, 50% 100%, 0 65%);
	padding:100px 0 50px 0;
}
.container6{
	margin:20px 30px 50px 30px;
}
.title1{
	font-size:23px;
	color:#FF6600;
}
.content{
	font-size:20px;
	line-height:35px;
}
.title2{
	font-size:21px;
	color:#0079A2;
}
.title3{
	font-size:20px;
	font-weight:bold;
}
.propic1_1{
	width:40%;
	position:absolute;
	right:50px;
	top:280px;
}
/* product1_2 */
.propic1_2{
	width:40%;
	position:absolute;
	right:50px;
	top:240px;
}
/* product1_3 */
.propic1_3{
	width:25%;
	position:absolute;
	right:50px;
	top:340px;
}
/* product1_4 */
.propic1_4{
	width:35%;
	position:absolute;
	right:50px;
	top:350px;
}
/* product1_5 */
.propic1_5{
	width:40%;
	position:absolute;
	right:50px;
	top:320px;
}
/* product1_6 */
.propic1_6{
	width:40%;
	position:absolute;
	right:50px;
	top:280px;
}
/* product1_7 */
.propic1_7{
	width:30%;
	position:absolute;
	right:50px;
	top:280px;
}
/* product2_1 */
.propic2_1{
	width:32%;
	position:absolute;
	right:50px;
	top:350px;
}
/* product2_2 */
.propic2_2{
	width:40%;
	position:absolute;
	right:50px;
	top:350px;
}
/* product2_3 */
.propic2_3{
	width:35%;
	position:absolute;
	right:50px;
	top:350px;
}
/* product2_4 */
.propic2_4{
	width:35%;
	position:absolute;
	right:80px;
	top:350px;
}
/* product2_5 */
.propic2_5{
	width:27%;
	position:absolute;
	right:80px;
	top:350px;
}
/* product3_1 */
.propic3_1{
	width:35%;
	position:absolute;
	right:50px;
	top:350px;
}
/* product3_2 */
.propic3_2{
	width:35%;
	position:absolute;
	right:100px;
	top:520px;
}
/* product3_3 */
.propic3_3{
	width:35%;
	position:absolute;
	right:50px;
	top:350px;
}
/* product3_4 */
.propic3_4{
	width:35%;
	position:absolute;
	right:100px;
	top:350px;
}
/* product3_5 */
.propic3_5{
	width:30%;
	position:absolute;
	right:50px;
	top:300px;
}
/* product4_1 */
.propic4_1{
	width:30%;
	position:absolute;
	right:100px;
	top:300px;
}
/* product4_2 */
.propic4_2{
	width:30%;
	position:absolute;
	right:80px;
	top:300px;
}
/* product4_3 */
.propic4_3{
	width:30%;
	position:absolute;
	right:70px;
	top:350px;
}

@media screen and (max-width:1470px){
    .propic1_7{
		position:static;
		width:40%;
	}
    .propic1_3{
		position:static;
		width:40%;
	}
}
@media screen and (max-width:1110px) { 
    .propic4_3{
		position:static;
		width:40%;
	}
}
@media screen and (max-width:950px){
	.propic1_1,.propic1_2,.propic1_3,.propic1_4,.propic1_5,.propic1_6,.propic1_7,
    .propic2_1,.propic2_2,.propic2_3,.propic2_4,.propic2_5,
    .propic3_1,.propic3_2,.propic3_3,.propic3_4,.propic3_5,
    .propic4_1,.propic4_2,.propic4_3{
		position:static;
		width:90%;
	}
}
@media screen and (max-width:840px){ 
    .theh1{
		font-size:28px;
	}
}

/* news1-1 ~  */
.info {
	width:100%;
/*	float:left;*/
    display: table;
			box-sizing:border-box;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	padding:0px 25px;
}
@media screen and (min-width:1281px) {
	.info {
		padding:60px calc((100% - 1280px) / 2 + 20px);
	}
}
.info section{
    padding-top: 0px;
}
.info .title {
	width:100%;
	float:left;
	color:#2D2D2D;
	font-size:20px;
	line-height:30px;
	margin:20px 0;
}
.info .content {
	width:100%;
	float:left;
	color:#666;
	font-size:16px;
	line-height:30px;
	margin:20px 0;
	text-indent:32px;
	text-align:justify;
	text-justify:distribute;
}
.info .content.no-indent {
	text-indent:0;
}
.info .name {
	color:#5151A2;
	font-size:22px;
	font-weight:bold;
}
.info .content .video {
	width:60%;
	height:auto;
	float:left;
	margin:0 20%;
}
.info .content .video video {
	width:100%;
	float:left;
	margin:0;
}
.info .content .video .vdo-iframe {
	width:100%;
	height:0;
	float:left;
	padding-bottom:56.25%;
	position:relative;
	overflow:hidden;
}
.info .content .video .vdo-iframe iframe {
	width:100%;
    height:100%;
	position:absolute;
    top:0;
    left:0;
}
.info .content .video.half {
	width:calc(50% - 10px);
	margin:25px 10px 0 0;
}
.info .content .video.half:nth-child(even) {
	margin:25px 0 0 10px;
}
.info .content .video.half:nth-child(1),
.info .content .video.half:nth-child(2) {
	margin-top:0;
}
.info .content .video .video-cont {
	width:100%;
	float:left;
	margin:10px 0;
	overflow:hidden;
	text-align:center;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.info .img {
	text-align:center;
	text-indent:0;
}
.info .half {width:50%;}
.info .list4 {
	width:calc(100% - 65px);
	text-indent:0;
	padding-left:65px;
}
.info .list4 li {
	margin-top: 5px;
	position: relative;
}
.info .list4 li:first {
	margin: 0;

}
.info .list4 > li:before {
	width: 9px;
	height: 9px;
	background-color: #666;
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	left: -20px;
}
.info .content.editor {
    margin-top: 0;
    text-indent: 0;
}
@media screen and (max-width:1024px) {
	.info .half {width:100%;}
}
@media screen and (max-width:768px) {
	.info .bigImg img {
		width:100%;
		height:auto;
	}
	.info .content .video,
	.info .content .video.half {
		width:100%;
		margin:0;
	}
	.info .content .video.half:nth-child(n) {
		margin:25px 0 0 0;
	}
	.info .content .video.half:nth-child(1) {
		margin-top:0;
	}
}
@media screen and (max-width:510px) {
	.info img {
		width:100%;
		height:auto;
	}
}


/*****start NEWS*****/
/* 活動消息news */
.news {
	margin:0 40px;
	background:rgba(255,255,255,0.6);
}

.news section {
	cursor:pointer;
	height:65px;
	border-bottom-style:solid;
	border-color:#E0E0E0;
	border-width:0.5;
	display:none;
	padding:10px 20px 10px 30px;
	position: relative;
}
.news section:hover {
	background:#F0F0F0;
}
.news section:before {
	position: absolute;
	left: 3px;
	top: 30px;
}
.news section:nth-child(odd):before {
	content: '🔷';
}
.news section:nth-child(even):before {
	content: '🔶';
}
.news section .content {
	width:auto;
	max-width:calc(100% - 180px);
	float:left;
	color:#333333;
	font-size:18px;
	font-weight: bold;
	line-height:65px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.news section .new {
	width:20px;
	height:20px;
	float:left;
	background-image:url(svg/new.svg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	margin:20px 5px 5px 5px;
}
.news section .date {
	width:120px;
	float:right;
	text-align:right;
	color:#9D9D9D;
	font-size:13px;
	line-height:65px;
}
.nextpage {
	width:calc(100% - 80px);
	float:left;
			box-sizing:border-box;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	border:2px solid #ddd;
	cursor:pointer;
	font-size:14px;
	line-height:35px;
	display:block;
	margin:0 40px;
	text-align:center;
	transition:color 0.3s ease-in-out,background 0.3s ease-in-out,border 0.3s ease-in-out;
}
.nextpage:hover {
	background:#707070;
	border:2px solid #707070;
	color:#fff;
}

/*****頁碼*****/
.nextpage {
	width:calc(100% - 80px);
			box-sizing:border-box;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	border:2px solid #ddd;
	cursor:pointer;
	font-size:14px;
	line-height:35px;
	display:block;
	margin:0 40px;
	text-align:center;
	transition:color 0.3s ease-in-out,background 0.3s ease-in-out,border 0.3s ease-in-out;
}
.nextpage:hover {
	background:#707070;
	border:2px solid #707070;
	color:#fff;
}
.page {
	width:calc(100% - 60px);
	list-style-type:none;
	margin:60px 30px 100px 30px;
}
.page li {
	width:28px;
	float:left;
	margin-left:10px;
}
.page li a {
	width:100%;
	float:left;
	border:2px solid #E0E0E0;
	cursor:pointer;
	color:#2D2D2D;
	font-size:17px;
	border-style:solid;
	line-height:28px;
	text-align:center;
	text-decoration: none;
	transition:color 0.3s ease-in-out,background 0.3s ease-in-out,border 0.3s ease-in-out;
}
.page li a:hover,.page li a.active {
	background:#0066CC;
	border:2px solid #0066CC;
	color:#fff;
}
.page li a i {
	width:100%;
	float:left;
	font-size:22px;
	font-style: normal;
	line-height:25px;
	padding-bottom: 3px;
}
.page li a.disabled {
	background:none;
	border:2px solid #ddd;
	color:#ddd;
	pointer-events:none;
}
/*****end NEWS*****/
