@charset "utf-8";
/***************************************
    copyright by MakeWeb.com.tw 
***************************************/

.label_menu_title h1 {
	/*display: none;*/
	color: #0070BC;
	/*text-shadow: none;*/
	text-shadow: 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF;
}

/*h1{
	font-size: 4.8rem;
	line-height: 66px;
}*/

.post_list {
	position: relative;
	width: 100%;
	/*margin: 100vh 0 0 0;*/
	margin: 0vh 0 0 0;
	z-index: 3;
}

.sec_1{
	overflow: hidden;
	/*position: relative;*/
	width: 100%;
	/*height: 100vh;*/
	/*height: calc( 100vh - 80px );*/
	/*z-index: 4;*/
}
.sec_1 .content_box{
	/*background: #604A7B;*/
	width: 800px;
	padding: 40px 20px;
	margin: 0 auto;
}
/*.sec_1 .slide_box{
	width: 1200px;
	margin: 0px auto;
}*/
/*.slick-slide{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: calc( 100vh - 80px );
	margin: auto;
}*/
.sec_1 figure{
	overflow: hidden;
	text-align: center;
	/*min-height: 488px;*/
	padding: 40px 0;
}
.sec_1 figure.f1{
	padding: 0px 0 40px 0;
}
.sec_1 h2{
	margin: 0 0 0px 0;
	padding: 0px 0;
	/*transform:translateY(80%);*/
	/*@*/
	/*opacity: 0;*/
}
.sec_1 h3{
	/*max-width: 1024px;*/
	width: 680px;
	margin: 0px auto;
	/*margin: 0 0 20px 0;*/
	padding: 24px 0px 10px 0px;
	/*padding: 24px 20px 10px 0px;*/
	text-align: center;
	/*transform:translateY(80%);*/
	/*font-size: 3.0rem;*/
	/*font-weight: bold;*/
	/*@*/
	/*opacity: 0;*/
}
.sec_1 p{
	max-width: 840px;
	margin: 0px auto;
	padding: 0 20px;
	text-align: justify;
	/*@*/
	/*opacity: 0;*/
}


.sec_1 figure.f1{
	/*@*/
	margin-top: 160px;
	opacity: 0;
}

.sec_1 figure.f2{
	padding: 0px 0 40px 0;
}
.sec_1 figure.f2 ul{
	display: table;
	margin: 0px auto;
	padding: 0px 0px;
	list-style: none;
	/*@*/
	margin-top: 160px;
	opacity: 0;
}
.sec_1 figure.f2 li {
	overflow: hidden;
	float: left;
	width: 190px;
	/*height: 375px;*/
	margin: 0 0px;
	/*border: 1px solid #f00;*/
}
.sec_1 figure.f2 p {
	/*text-align: left;*/
	padding: 0 14px;
}


.sec_1 figure.f3{
	padding: 40px 0 40px 0;
}
.sec_1 figure.f3 figcaption{
	width: 100%;
	max-width: 784px;
	margin: 0 auto;
	text-align: left;
}
.sec_1 figure.f3 .content_image{
	float: left;
	/*width: 96%;*/
	/*display: table;*/
	margin: 0 0px 0 0;
	padding: 0px 30px 30px 0;
}
.sec_1 figure.f3 p{
	/*margin: 40px 0 0 0;*/
	padding: 0px 0 0 0;
	text-align: justify;
	text-justify:inter-ideograph;
}


.sec_1 figure.f4{
	padding: 40px 0 200px 0;
}
.sec_1 figure.f4 figcaption{
	width: 100%;
	max-width: 784px;
	margin: 0 auto;
	text-align: left;
}
.sec_1 figure.f4 .content_image{
	float: right;
	/*width: 96%;*/
	/*display: table;*/
	margin: 0 0px 0 0;
	padding: 0px 0px 30px 30px;
}
.sec_1 figure.f4 p{
	/*margin: 40px 0 0 0;*/
	padding: 0px 0 0 0;
	text-align: justify;
	text-justify:inter-ideograph;
}

.sec_2{
	overflow: hidden;
	/*position: relative;*/
	width: 100%;
	/*height: 100vh;*/
	/*z-index: 4;*/
	-webkit-box-shadow: 0 0 15px #AAA;
	-moz-box-shadow: 0 0 15px #AAA;
	box-shadow: 0 0 15px #AAA;
}
.sec_2 .content_box{
	/*background: #604A7B;*/
}
.sec_2 .content_top{
	overflow: hidden;
	margin: 0px 0 300px 0;
	padding: 0px 0px;
	max-height: 425px;
	/*text-align: center;*/
}
.sec_2 .video_box video{
	width: 100%;
}
.sec_2 .content_bottom{
	overflow: hidden;
	position: absolute;
	width: 460px;
	min-height: 540px;
	right: 16%;
	/*margin: -74px 0px 0 0;*/
	padding: 40px 50px;
	color: #FFF;
	background: #7DC141;
	opacity: 0.9;
	box-shadow: 3px 3px 5px #999;
	/*@*/
	/*right: 0%;*/
	/*margin-left: 120px;*/
	margin-top: 160px;
	opacity: 0;
}
.sec_2 .content_bottom h3{
	color: #FFF;
}
.sec_2 .content_bottom h2{
	color: #FFF;
	font-size: 3.2rem;
}
.sec_2 .content_bottom h4{
	color: #FFF;
	margin: 40px 0 30px 0;
	padding: 0px 0 0 20px;
	border-left: 5px solid #FFF;
}
.sec_2 p{
	margin: 30px 0 0 0px;
	text-align: justify;
	text-justify:inter-ideograph;
	/*@*/
	/*opacity: 0;*/
}

.sec_3{
	overflow: hidden;
	position: relative;
	margin: 0vh 0 0 0;
	/*background-size: cover;*/
	/*height: calc(100vh - 80px);*/
	z-index: 12;
	-webkit-box-shadow: 0 0 15px #AAA;
	-moz-box-shadow: 0 0 15px #AAA;
	box-shadow: 0 0 15px #AAA;
	/*@*/
	/*opacity: 0;*/
}
.sec_3 .content_box{
	overflow: hidden;
	/*max-width: 1280px;*/
	margin: 0 auto;
	padding: 0 0px;
}
.sec_3 .content_top{
	overflow: hidden;
	padding: 60px 20px;
	background: #54C2F0;
	text-align: center;
	/*text-align: center;*/
}
.sec_3 .content_bottom{
	background: #FFF url(../../../../../cufiles/images/home/pics/solution_5-1.jpg) center center no-repeat;
	border-bottom: 37px solid #54C2F0;
	-webkit-box-shadow: 0 0 15px #AAA inset;
	-moz-box-shadow: 0 0 15px #AAA inset;
	box-shadow: 0 0 15px #AAA inset;
}
.sec_3 h2{
	margin: 0px 0 0px 0;
	padding: 0px 0;
	/*transform:translateY(80%);*/
	color: #FFF;
	/*@*/
	/*opacity: 0;*/
}
.sec_3 p{
	margin: 0px auto;
	width: 784px;
	color: #FFF;
}
.sec_3 ul{
	display: table;
	margin: 0px auto;
	padding: 0px 0px;
	list-style: none;
}
.sec_3 li {
	overflow: hidden;
	float: left;
	width: 150px;
	height: 375px;
	margin: 0 0px;
	cursor: pointer;
	/*border: 1px solid #f00;*/
}
.sec_3 li:hover {
	/*-webkit-filter: brightness(60%);*/
	/*filter: brightness(60%);*/
}
/*.sec_3 li .mask {
	position: relative;
	text-align: center;
	margin: -80px 0px 0 0;
	padding: 4px 0;
	font-size: 2.8rem;
	color: #FFF;
	background: rgba(0%,10%,20%,0.7);
}*/
.sec_3 .bg_image_box {
	display: none;
}


.sec_4{
	overflow: hidden;
	position: relative;
	background: #FFF;
	height: calc(100vh - 80px);
	z-index: 13;
}
.sec_4 .content_box{
	overflow: hidden;
	/*max-width: 1124px;*/
	margin: 6vh auto;
	padding: 0 20px;
	text-align: center;
}
.sec_4 h1{
	margin: 0 0 0 0;
	padding: 0px 0;
	/*transform:translateY(80%);*/
	/*color: #FFF;*/
	/*@*/
	/*opacity: 0;*/
}
.sec_4 .network_box{
	display: table;
	margin: 8vh auto;
	padding: 0px 0px;

	/*background: #FFF url(../../../../../cufiles/images/home/pics/triangle_4-1.png) center center no-repeat;*/
	/*background-size: cover;*/
	/*width: 1050px;*/
	/*height: 640px;*/
}
.sec_4 .network_image{
	float: left;
	/*background: #FFF url(../../../../../cufiles/images/home/pics/triangle_4-1.png) center center no-repeat;*/
	/*background-size: cover;*/
	/*width: 730px;*/
	/*height: 640px;*/
	margin: 0 0 0 -50vw;
}
.sec_4 .network_title{
	float: right;
	margin: 0px -50vw 0 0;
	/*background: #FFF url(../../../../../cufiles/images/home/pics/triangle_4-1.png) center center no-repeat;*/
	/*background-size: cover;*/
	/*width: 730px;*/
	/*height: 640px;*/
}




/*-------------------------------------------- 
	Media Queries 
---------------------------------------------*/
/* Portrait and Landscape */
/*@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
}*/


/*iPad Pro*/
@media screen and (max-width: 1279px) {
	
	.sec_2 .content_bottom{
		overflow: hidden;
		position: absolute;
		width: 44%;
		right: 4%;
		padding: 30px 20px;
		/*@*/
		margin-top: -70px;
		opacity: 0;
	}
}

/*iPad*/
@media screen and (max-width: 1023px) {
	
	.sec_1 .content_box{
		width: 100%;
		/*padding: 40px 20px;*/
	}
	.sec_1 figure.f2 li {
		width: 180px;
		/*margin: 0 0px;*/
	}
	.sec_2 .content_bottom{
		overflow: hidden;
		position: absolute;
		width: 48%;
		right: 2%;
		/*@*/
		margin-top: -70px;
		opacity: 0;
	}
}


/*iPhone*/
@media screen and (max-width: 767px) {

	.sec_1 h3{
		/*width: 640px;*/
		width: 100%;
		margin: 0px auto;
		/*margin: 0 0 20px 0;*/
		padding: 0px;
		/*padding: 24px 20px 10px 0px;*/
	}
	.sec_1 figure.f2 li {
		width: 100%;
		/*margin: 0 0px;*/
	}
	.sec_1 figure.f3 .content_image{
		padding: 0px;
	}
	.sec_1 figure.f3 p{
		text-align: left;
		/*text-justify:inter-ideograph;*/
	}
	.sec_1 figure.f4 .content_image{
		padding: 0px;
	}
	.sec_1 figure.f4 p{
		text-align: left;
		/*text-justify:inter-ideograph;*/
	}


	.sec_2{
		overflow: hidden;
		/*position: relative;*/
		width: 100%;
		/*height: 100vh;*/
		/*z-index: 4;*/
		-webkit-box-shadow: 0 0 15px #AAA;
		-moz-box-shadow: 0 0 15px #AAA;
		box-shadow: 0 0 15px #AAA;
	}
	.sec_2 .content_box{
		overflow: hidden;
	}
	.sec_2 .content_top{
		overflow: hidden;
		margin: 0px 0 0px 0;
		padding: 0px 0px;
		max-height: 425px;
		/*text-align: center;*/
	}
	.sec_2 .content_bottom{
		position: relative;
		width: 100%;
		right: inherit;
		margin: 0px auto;
		padding: 40px 20px;
	}
	.sec_2 .video_box video{
		/*width: 100%;*/
		width: auto;
		height: 220px;
		margin: 0 0 160px -120px;

	}
	.sec_2 .content_bottom h2{
		font-size: 2.8rem;
	}

}