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

.label_menu_title, .image_menu{
	display: none;
}

.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;*/
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 4;
}
.sec_1 .content_box{
	/*display: none;*/
	overflow: hidden;
	position: relative;
	width: 520px;
	margin: 0vh auto;
	padding: 0 20px;
	text-align: center;
}
.sec_1 h1 {
	/* margin: 45vh 0 0 0; */
	text-align: center;
	font-size: 6rem;
	text-shadow: 0.1em 0.1em 0.1em black;
	line-height: 1.2;
	color: #FFF;
	/*@*/
	opacity: 0;
	margin: 0 0 0 0;
}
/*.sec_1 h1{
	margin: 80px 0 0 0;
	padding: 0px 0;
	transform:translateY(80%);
	opacity: 0;
}*/
.sec_1 h2{
	margin: 80px 0 0 0;
	padding: 0px 0;
	/*transform:translateY(80%);*/
	/*@*/
	opacity: 0;
}
.sec_1 h3 {
	text-align: center;
	color: #FFF;
	text-shadow: 0.1em 0.1em 0.1em black;
	opacity: 0;
}
/*.sec_1 h3{
	margin: 80px 0 0 0;
	opacity: 0;
}*/
.sec_1 .video_box{
	position: absolute;
	/*position: fixed;*/
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.stick_box{
	position: relative;
	width: 100%;
	/*height: 600vh;*/
	height: 800vh;
	margin: 100vh 0 0 0;
	background: #FFF;
	z-index: 4;
}

#section2{
	height: 100vh;
}
.sec_2{
	overflow: hidden;
	position: relative;
	margin: 0px 0;
	background: #FFF url(../../../../../cufiles/images/home/pics/solution_5-1.png) center center no-repeat;
	background-size: cover;
	height: 100vh;
	z-index: 12;
	/*@*/
	/*opacity: 0;*/
}
.sec_2 .content_box{
	overflow: hidden;
	max-width: 1280px;
	margin: 0px auto;
	padding: 0 20px;
	text-align: center;
}
.sec_2 h1{
	margin: 80px 0 0 0;
	padding: 0px 0;
	/*transform:translateY(80%);*/
	/*color: #FFF;*/
	/*@*/
	opacity: 0;
}
.sec_2 h2{
	margin: 15vh 0 0 0;
	padding: 0px 0;
	/*transform:translateY(80%);*/
	/*color: #FFF;*/
	/*@*/
	opacity: 0;
}


.sec_2 ul{
	display: table;
	width: 480px;
	margin: 160px auto;
	margin-bottom: 140px;
	padding: 0px 0px;
	list-style: none;
}
.sec_2 li {
	overflow: hidden;
	float: left;
	width: 240px;
	height: 240px;
	margin: 0 0px;
	cursor: pointer;
	/*border: 1px solid #f00;*/
}
.sec_2 li:hover {
	/*-webkit-filter: brightness(60%);*/
	/*filter: brightness(60%);*/
}
/*.sec_2 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_2 li img{
	width: 100%;
	height: 100%;
	/*border: 1px solid #f90;*/
}
.sec_2 .bg_image_box {
	display: none;
}



#section3{
	height: 100vh;
}
.sec_3{
	overflow: hidden;
	position: relative;
	height: 100vh;
	z-index: 13;
	background: #FFF;
	background-image: url(/mw/cufiles/images/home/pics/triangle_bg-01.jpg);
	background-size: cover;
}
.sec_3 .content_box{
	overflow: hidden;
	/*max-width: 1124px;*/
	margin: 12vh auto;
	padding: 0 20px;
	text-align: center;
}
.sec_3 h1{
	margin: 0 0 0 0;
	padding: 0px 0;
	/*transform:translateY(80%);*/
	/*color: #FFF;*/
	/*@*/
	/*opacity: 0;*/
}
.sec_3 .network_box{
	display: table;
	margin: 12vh 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_3 .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_3 .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;*/
}


/*.content_list h1, .content_list p{
	color: #FFF;
}*/
.stick_box .content_image{
	overflow: hidden;
	width: 100%;
	height: 100vh;
	background-size: cover;
}
.content_text h1{
	color: #FFF;
}
.content_text p{
	text-align: left;
	/*margin: 120px 0 0 0;*/
	/*@*/
	opacity: 0;
}

.content_text ul{
	display: table;
	margin: 20px auto;
	margin-bottom: 40px;
	padding: 0px 0px;
	list-style: none;
	/*@*/
	opacity: 0;
}
.content_text li {
	overflow: hidden;
	float: left;
	width: 166px;
	height: 29px;
	line-height: 29px;
	margin: 4px 6px;
	box-shadow: 4px 4px #888;
}
.content_text li a{
	color: #FFF;
	font-size: 1.4rem;
	text-shadow: 2px 2px 3px #555;
}
.content_l{
	float: left;
}
.content_r{
	float: right;
}
.pic_l .content_l, .pic_r .content_r{
	width: 55%;
	/*height: calc( 100vh - 42px );*/
	height: 100vh;
}
.pic_l .content_r, .pic_r .content_l{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 45%;
	/*height: calc( 100vh - 42px );*/
	height: 100vh;
	margin: auto;
}
.pic_l .content_r .content_text, .pic_r .content_l .content_text{
	width: 70%;
	text-align: center;
	color: #FFF;
}
.pic_l .content_image{
	margin: 0 0 0 -150px;
	/*height: calc( 100vh - 42px );*/
	height: 100vh;
}
.pic_r .content_image{
	margin: 0 0 0 150px;
	/*height: calc( 100vh - 42px );*/
	height: 100vh;
}
.pic_l .content_text{
	margin: 0 0 0 150px;
}
.pic_r .content_text{
	margin: 0 0 0 -150px;
}
/*.pic_l p{
	margin: -120px 0 0 0;
}*/



#section4{
	height: 100vh;
}
.sec_4{
	overflow: hidden;
	position: relative;
	top: 42px;
	width: 100vw;
	/*height: calc( 100vh - 42px );*/
	height: 100vh;
	z-index: 13;
	background-color: #B0C0CD;
	/*@*/
	opacity: 0;
}
.sec_4 .content_image{
	background: url(../../../../../cufiles/images/solution/solusion_main_pro_4.jpg) center center no-repeat;
	background-size: cover;
}
.sec_4 .content_text li {
	background: #0070C0 url(../../../../../cufiles/images/web/layout/btn_bg1.png) right bottom no-repeat;
}


#section5{
	height: 100vh;
}
.sec_5{
	overflow: hidden;
	position: relative;
	top: 42px;
	width: 100vw;
	/*height: calc( 100vh - 42px );*/
	height: 100vh;
	z-index: 13;
	background-color: #A5AFAD;
	/*background-color: #C4CECB;*/
	/*@*/
	opacity: 0;
}
.sec_5 .content_image{
	background: url(../../../../../cufiles/images/solution/solusion_main_pro_5.jpg) center center no-repeat;
	background-size: cover;
}
.sec_5 .content_text li {
	background: #7AB941 url(../../../../../cufiles/images/web/layout/btn_bg2.png) right bottom no-repeat;
}


#section6{
	height: 100vh;
}
.sec_6{
	overflow: hidden;
	position: relative;
	top: 42px;
	width: 100vw;
	/*height: calc( 100vh - 42px );*/
	height: 100vh;
	z-index: 13;
	background-color: #B3B3A6;
	/*@*/
	opacity: 0;
}
.sec_6 .content_image{
	background: url(../../../../../cufiles/images/solution/solusion_main_pro_6.jpg) center center no-repeat;
	background-size: cover;
}
.sec_6 .content_text li {
	background: #E7A400 url(../../../../../cufiles/images/web/layout/btn_bg3.png) right bottom no-repeat;
}


#section7{
	height: 100vh;
}
.sec_7{
	overflow: hidden;
	position: relative;
	top: 42px;
	width: 100vw;
	/*height: calc( 100vh - 42px );*/
	height: 100vh;
	z-index: 13;
	background-color: #C7C5CD;
	/*@*/
	opacity: 0;
}
.sec_7 .content_image{
	background: url(../../../../../cufiles/images/solution/solusion_main_pro_7.jpg) center center no-repeat;
	background-size: cover;
}
.sec_7 .content_text li {
	background: #604A7B url(../../../../../cufiles/images/web/layout/btn_bg4.png) right bottom no-repeat;
}


#section8{
	height: 100vh;
}
.sec_8{
	overflow: hidden;
	position: relative;
	top: 42px;
	width: 100vw;
	/*height: calc( 100vh - 42px );*/
	height: 100vh;
	z-index: 13;
	background-color: #8F9185;
	/*@*/
	opacity: 0;
}
.sec_8 .content_image{
	background: url(../../../../../cufiles/images/solution/solusion_main_pro_8.jpg) center center no-repeat;
	background-size: cover;
}
.sec_8 .content_text li {
	background: #C00000 url(../../../../../cufiles/images/web/layout/btn_bg5.png) right bottom no-repeat;
}

#section9{
	height: 100vh;
}
.sec_9{
	overflow: hidden;
	position: relative;
	top: 42px;
	width: 100vw;
	/*height: calc( 100vh - 42px );*/
	height: 100vh;
	z-index: 13;
	background-color: #C4C2A0;
	/*@*/
	opacity: 0;
}
.sec_9 .content_image{
	background: url(../../../../../cufiles/images/solution/solusion_main_pro_9.jpg) center center no-repeat;
	background-size: cover;
}
.sec_9 .content_text li {
	background: #92D050 url(../../../../../cufiles/images/web/layout/btn_bg6.png) right bottom no-repeat;
}


.sec_sticky_first{
	position: fixed;
	top: 0px;
	width: 100vw;
	z-index: 20;
}
.sec_sticky{
	position: fixed;
	width: 100vw;
	z-index: 20;
}


.product_detail_box{
	position: fixed;
	/*position: absolute;*/
	width: 0;
	/*width: calc(100% - 40px);*/
	/*height: calc(100% - 71px);*/
	height: 100vh;
	top: 0px;
	/*left: 0;*/
	right: 0px;
	background-color: #404040;
	overflow-x: hidden;
	transition: 0.5s;
	padding: 0px 0px;
	z-index: 110;
}
.product_detail_box.is_detail_open{
	right: 0px;
	width: 100%;
	/*width: 100vw;*/
	/*width: calc(100% - 40px);*/
	/*width: 300px;*/
}
.product_detail_box .content_l{
	/*display: flex;*/
	/*justify-content: center;*/
	/*align-items: center;*/
	width: 45%;
	height: 100vh;
	margin: auto;
	text-align: center;
	color: #FFF;
}
.product_detail_box .content_l h1{
	display: block;
	width: 100%;
	margin: 80px 0 0 0;
	font-size: 3rem;
	color: #FFF;
}
.product_detail_box .content_l .pd_list_box{
	display: block;
	width: 66%;
	min-width: 480px;
	height: calc( 100vh - 200px);
	margin: 0 auto;
	overflow-x: hidden;
	overflow-y:hidden;
	scrollbar-color: #222 #444; /*for firefox*/
	scrollbar-width: auto; /*for firefox*/
	/*border: 1px solid #F00;*/
}
.product_detail_box .content_l .pd_list_box figcaption{
	/*width: 320px;*/
	width: 480px;
	min-height: calc( 100vh - 200px);
	margin: 0 0 10px 0;
	/*border-bottom: 5px solid #5B89C1;*/
}
.product_detail_box .content_l .pd_list_box figcaption .content_intro{
	width: 70%;
	margin: 0 auto;
}
.product_detail_box .content_l .pd_list_box figcaption h3{
	padding: 0px 0;
	font-size: 2.8rem;
	font-weight: 500;
	text-align: left;
	color: #FFF;
}
.product_detail_box .content_l .pd_list_box figcaption h5{
	/*margin: 0px 0 0 0%;*/
	/*padding: 0px 0;*/
	font-weight: bold;
	/*text-align: left;*/
	color: #FFF;
}
.product_detail_box .content_l .pd_list_box figcaption .content_pic{
	display: block;
	overflow: hidden;
	margin: 0px auto;
	width: 300px;
}
.product_detail_box .content_l .pd_list_box figcaption .content_pic img{
	width: 100%;
}
.product_detail_box .content_l .pd_list_box figcaption ul{
	display: block;
	text-align: left;
	padding: 0 0 0 20px;
}
.product_detail_box .content_l .pd_list_box figcaption ul li{
	/*float: none;*/
	font-size: 1.2rem;
}
.product_detail_box .content_l .pd_list_box figcaption table{
	/*width: 70%;*/
	margin: 0 0 20px 0%;
}
.product_detail_box .content_l .pd_list_box figcaption table tr{
	border-bottom: 1px solid #666;
}
.product_detail_box .content_l .pd_list_box figcaption table tr:nth-child(1){
	/*border-top: 1px solid #666;*/
}
.product_detail_box .content_l .pd_list_box figcaption table td{
	width: 50%;
	text-align: left;
	font-size: 1.2rem;
	line-height: 26px;
}
.product_detail_box .content_l .pd_list_box figcaption table td:nth-child(2){
	text-align: center;
}
.product_detail_box .content_r{
	width: 55%;
}
.product_detail_box .content_r .content_image{
	background: url(../../../../../cufiles/images/web/spacer.gif) center center no-repeat;
}
.product_detail_box .content_r .content_image #detail_close_btn{
	float: right;
	margin: 70px 20px 0 0;
	color: #FFF;
	font-size: 3rem;
	text-shadow: black 0.1em 0.1em 0.2em
}




/*-------------------------------------------- 
	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) {
}*/


/*topview*/
@media screen and (max-width: 1470px) {

	/*.sec_2 ul{
		display: table;
		width: 400px;
		margin: 60px auto;
		margin-bottom: 140px;
		padding: 0px 0px;
		list-style: none;
	}
	.sec_2 li {
		overflow: hidden;
		float: left;
		width: 200px;
		height: 200px;
		margin: 0 0px;
		cursor: pointer;
		border: 1px solid #f00;
	}*/

	.sec_2 ul{
		width: 400px;
		margin: 60px auto;
		/*margin-bottom: 140px;*/
	}
	.sec_2 li {
		width: 200px;
		height: 200px;
		margin: 0 0px;
	}

}


/*iPad Pro*/
@media screen and (max-width: 1279px) {
	
	.sec_1 .video_box{
		position: absolute;
		top: 0;
		bottom: 0;
		left: -50%;
		right: 0;
	}
	.sec_1 .video_box video{
		width: auto;
		height: 100vh;
	}

	
	.sec_2 ul{
		width: 540px;
		margin: 260px auto;
		/*margin-bottom: 140px;*/
	}
	.sec_2 li {
		width: 270px;
		height: 320px;
		margin: 0 0px;
	}
}

/*iPad*/
@media screen and (max-width: 1023px) {

	.sec_2 ul{
		width: 440px;
		margin: 200px auto;
		/*margin-bottom: 140px;*/
	}
	.sec_2 li {
		width: 220px;
		height: 220px;
		margin: 0 0px;
	}

	.sec_3 .network_image{
		float: none;
		max-width: 100%;
		margin: 0 auto;
	}
	.sec_3 .network_image img{
		width: 100%;
	}
	.sec_3 .network_title{
		float: left;
		margin: 0px 0vw 0 0;
	}
	.sec_3 .network_title img{
		width: 100%;
	}


	.product_detail_box .content_l{
		/*width: 45%;*/
		width: 100%;
		/*height: 100vh;*/
		height: auto;
		/*margin: auto;*/
		/*text-align: center;*/
		/*color: #FFF;*/
	}
	.product_detail_box .content_l .pd_list_box{
		display: block;
		/*width: 66%;*/
		/*min-width: 480px;*/
		width: 100%;
		min-width: 1%;
		/*height: calc( 100vh - 200px);*/
		height: auto;
		margin: 0 auto;
	}
	.product_detail_box .content_l .pd_list_box figcaption{
		/*width: 480px;*/
		width: 100%;
		min-height: calc( 100vh - 200px);
		margin: 0 0 10px 0;
		/*border-bottom: 5px solid #5B89C1;*/
	}

	.product_detail_box .content_r{
		/*width: 55%;*/
		width: 100%;
	}
	.product_detail_box .content_r .content_image{
		height: 600px;
		background-size: cover;
	}
}


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

	.sec_1 .content_box{
		/*display: none;*/
		overflow: hidden;
		position: relative;
		/*width: 520px;*/
		width: 100%;
		margin: 0vh auto;
		padding: 0 20px;
		text-align: center;
	}
	.sec_1 .video_box{
		position: absolute;
		top: 0;
		bottom: 0;
		left: -90%;
		/*left: -100%;*/
		right: 0;
	}
	.sec_1 .video_box video{
		width: auto;
		height: auto;
	}

	.sec_2 ul{
		width: 280px;
		margin: 30px auto;
		/*margin-bottom: 140px;*/
	}
	.sec_2 li {
		width: 140px;
		height: 140px;
		margin: 0 0px;
	}

	.sec_3 .network_box{
		/*display: table;*/
		margin: 0vh auto;
		/*padding: 0px 0px;*/
	}


	.sec_sticky{
		position: relative;
		/*position: fixed;*/
		/*width: 100vw;*/
		/*z-index: 20;*/
	}

	.stick_box{
		/*width: 100%;*/
		/*height: 600vh;*/
		height: auto;
		/*margin: 100vh 0 0 0;*/
	}

	.content_l{
		/*float: left;*/
		position: relative;
		float: none;
	}
	.content_r{
		/*float: right;*/
		position: relative;
		float: none;
	}

	.pic_l .content_l, .pic_r .content_r{
		width: 100%;
		/*height: calc( 100vh - 42px );*/
		/*height: 100vh;*/
		height: auto;
		z-index: 19;
	}
	.pic_l .content_r, .pic_r .content_l{
		/*display: flex;*/
		display: block;
		justify-content: center;
		align-items: center;
		width: 100%;
		/*height: calc( 100vh - 42px );*/
		/*height: 100vh;*/
		height: auto;
		margin: auto;
		z-index: 21;
	}


	.pic_l .content_r .content_text, .pic_r .content_l .content_text{
		width: 100%;
		/*text-align: center;*/
		/*color: #FFF;*/
		padding: 0 20px;
	}


	#section4{
		height: auto;
		/*height: 100vh;*/
	}
	.sec_4{
		overflow: hidden;
		position: relative;
		top: 0px;
		/*top: 42px;*/
		width: 100vw;
		/*height: 100vh;*/
		height: auto;
	}
	.sec_4 .content_image{
		height: 40vh;
	}



	#section5{
		height: auto;
		/*height: 100vh;*/
	}
	.sec_5{
		overflow: hidden;
		position: relative;
		top: 0px;
		/*top: 42px;*/
		width: 100vw;
		/*height: 100vh;*/
		height: auto;
	}
	.sec_5 .content_l {
		position: relative;
		z-index: 21;
	}
	.sec_5 .content_r {
		float: left;
		/*position: absolute;*/
		position: relative;
		z-index: 19;
	}
	.sec_5 .content_image{
		height: 40vh;
	}


	#section6{
		height: auto;
		/*height: 100vh;*/
	}
	.sec_6{
		overflow: hidden;
		position: relative;
		top: 0px;
		/*top: 42px;*/
		width: 100vw;
		/*height: 100vh;*/
		height: auto;
	}
	.sec_6 .content_image{
		height: 40vh;
	}


	#section7{
		height: auto;
		/*height: 100vh;*/
	}
	.sec_7{
		overflow: hidden;
		position: relative;
		top: 0px;
		/*top: 42px;*/
		width: 100vw;
		/*height: 100vh;*/
		height: auto;
	}
	.sec_7 .content_l {
		position: relative;
		z-index: 21;
	}
	.sec_7 .content_r {
		float: left;
		/*position: absolute;*/
		position: relative;
		z-index: 19;
	}
	.sec_7 .content_image{
		height: 40vh;
	}


	#section8{
		height: auto;
		/*height: 100vh;*/
	}
	.sec_8{
		overflow: hidden;
		position: relative;
		top: 0px;
		/*top: 42px;*/
		width: 100vw;
		/*height: 100vh;*/
		height: auto;
	}
	.sec_8 .content_image{
		height: 40vh;
	}


	#section9{
		height: auto;
		/*height: 100vh;*/
	}
	.sec_9{
		overflow: hidden;
		position: relative;
		top: 0px;
		/*top: 42px;*/
		width: 100vw;
		/*height: 100vh;*/
		height: auto;
	}
	.sec_9 .content_l {
		position: relative;
		z-index: 21;
	}
	.sec_9 .content_r {
		float: left;
		/*position: absolute;*/
		position: relative;
		z-index: 19;
	}
	.sec_9 .content_image{
		height: 40vh;
	}

	.product_detail_box .content_r .content_image{
		height: 500px;
		background-size: cover;
	}
	.product_detail_box .content_r .content_image #detail_close_btn{
		display: none;
		position: fixed;
		/*position: absolute;*/
		/*float: right;*/
		right: 0;
		top: 0px;
		margin: 80px 20px 0 0;
		color: #FFF;
		font-size: 3rem;
		text-shadow: black 0.1em 0.1em 0.2em;
		z-index: 120;
	}
	.product_detail_box .content_l h1{
		font-size: 2rem;
		margin: 80px 0 140px 0;
	}


}


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

	.sec_1 .video_box video{
		width: auto;
		height: 100vh;
		/*height: auto;*/
	}
}