@import url("reset.css");
html {
	
	font-family:Arial, Helvetica,"微軟正黑體", sans-serif;
	-webkit-text-size-adjust:none;
	background-color:#F4F4F4;

}


html, body{
	width:100%;
	height:100%;
	background-color:#F4F4F4 !important;
}
/*
#MENU{
	width:250px;
	height:240px;
	
	position:fixed;
	z-index:9999;
	left:50%;
	top:50%;
	margin-left:-125px;
	margin-top:-120px;
	
	padding-top:30px;
	background-color:#EEE;
	border-radius:5px;
	-webkit-border-radius:5px;
	box-shadow:1px 1px 25px #111;
	-webkit-box-shadow:1px 1px 25px #111;
	-webkit-transition:all .2s ease-out; 
}

.CLOSE{
	-webkit-transform: perspective(250px) rotateY(0deg);
	opacity:0;
}

.OPEN{
	-webkit-transform: perspective(250px) rotateY(360deg);
	opacity:1;
}


#MENU ul{
	margin:0;
	padding:0;
	list-style:none;
	padding-top:15px;
}

#MENU li{
	display:block;
	width:200px;
	height:35px;
	margin:0 auto;
	margin-bottom:10px;
	text-align:center;
	line-height:40px;
	font-family:Arial, Helvetica, sans-serif;
	border:1px solid #888;
	background:#DDD;
	border-radius:4px;
	-webkit-border-radius:4px;
}

#MENU h3{
	display:block;
	width:30px;
	height:30px;
	text-align:center;
	line-height:30px;
	border-radius:10px;
	-webkit-border-radius:10px;
	background-color:#900;
	color:#FFF;
	border:1px solid #666;
	position:absolute;
	right:-10px;
	top:-10px;
}*/
.fb-like{margin-left:250px; margin-top:20px; float:left; }
/* ==nav=========== */
.navbar-brand {
	background-image:url(images/WB_UCOMLOGO_S.png);
	background-repeat:no-repeat;
	padding-top:20px;
	width:270px;
	height:36px;
	text-indent:-9999px;
}

/* ==首頁=========== */

article {
	width:100%;
	height:802px;
	padding: 0px 0px 70px 0px;
	background-repeat:no-repeat;
	background-color:#00bba1;
	background-position:center center;
	background-image:url(images/iot.png);
	overflow:hidden;
}
.image{
	width:900px;
	height:802px;
	margin:0 auto;
	padding-left:150px;
	padding-top:300px;

}
.all{
	width:900px;
	height:802px;
	margin:0 auto;
}
.SS{
	width:600px;
	height:539px;
	background-image:url(images/pic01.png);
	background-position:center center;
	background-repeat:no-repeat;
	/*position:relative;
	left:370px;
	top:300px;*/
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-ms-animation-delay: 0.5s;
}
.cloud{
	width:500px;
	height:412px;
	background-image:url(images/cloud.png);
	position:relative;
	left:20px;
	top:-840px;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
	-ms-animation-delay: 1.5s;
	z-index:999;
}
.cloudbtn{
	width:180px;
	height:50px;
	display:block;
	margin:0 auto;
	border:2px solid #00BBA1;
	text-align:center;
	font-size:20px;
	line-height:44px;
	background-color:#00BBA1;
	border-radius:5px;
	color:#FFF;
	font-family:"微軟正黑體";
	text-decoration:none;
}
.cloudbtn:visited{color:#FFF;text-decoration:none;}
.cloudbtn:hover{
	background-color:#FFF;
	color:#00BBA1;
	text-decoration:none;
	-webkit-transition: background-color .30s linear;
}
article h1{
	padding-top:90px;
	text-align:center;
	font-family:"微軟正黑體";
	font-weight:bold;
	font-size:3.4em;
	line-height:1.2;
}
.h1big{
	font-size:1.6em;
}
.icon01{
	width:157px;
	height:154px;
	background-image:url(images/home.png);
	position:relative;
	left:0px;
	top:-250px;
	animation-name: flash;
	visibility: visible; 
	-webkit-animation-delay: 2.2s;
	-moz-animation-delay: 2.2s;
	-ms-animation-delay: 2.2s;
	animation-duration: 10s; 
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	}
.icon02{
	width:89px;
	height:96px;
	background-image:url(images/light.png);
	position:relative;
	left:100px;
	top:-680px;
	animation-name: flash;
	visibility: visible; 
	-webkit-animation-delay: 2.8s;
	-moz-animation-delay: 2.8s;
	-ms-animation-delay: 2.8s;
	animation-duration: 10s; 
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	}
.icon03{
	width:154px;
	height:154px;
	background-image:url(images/time.png);
	position:relative;
	left:720px;
	top:-990px;
	animation-name: flash;
	visibility: visible; 
	-webkit-animation-delay: 2.8s;
	-moz-animation-delay: 2.8s;
	-ms-animation-delay: 2.8s;
	animation-duration: 8s; 
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	}
.icon04{
	width:133px;
	height:121px;
	background-image:url(images/comp.png);
	position:relative;
	left:780px;
	top:-580px;
	animation-name: flash;
	visibility: visible; 
	-webkit-animation-delay: 3.5s;
	-moz-animation-delay: 3.5s;
	-ms-animation-delay: 3.5s;
	animation-duration: 10s; 
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	}
.icon05{
	width:98px;
	height:93px;
	background-image:url(images/key.png);
	position:relative;
	left:170px;
	top:-930px;
	animation-name: flash;
	visibility: visible; 
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-ms-animation-delay: 3s;
	animation-duration: 7s; 
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	}
.icon06{
	width:97px;
	height:86px;
	background-image:url(images/wifi.png);
	position:relative;
	left:250px;
	top:-830px;
	animation-name: flash;
	visibility: visible; 
	-webkit-animation-delay: 3.2s;
	animation-duration: 9s; 
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	}
/* ==第1頁=========== */
section{
	width:100%;
	height:auto;
	overflow:hidden;

}
.h3E{ color:#00a0ca;
font-family: Arial;
}
.section01 h3{
	font-size:2.5em;
	line-height:1.5;
	font-family:"微軟正黑體";
	margin-bottom:50px;
}

.section01{
	width:1000px;
	height:600px;
	margin:0 auto;
	text-align:center;
}
.section01p{
	width:60%;
	float:right;
	padding-right:5%;
	padding-top:8%;
}
.section01p p{
	text-align:left;
	text-align:justify;
	font-size:1.2em;
	line-height:1.5;
	font-family:"微軟正黑體";
}
.pic{
	width:40%;
	height:386px;
	background-image:url(images/pic.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	float:left;
}
/*----第二頁-----*/
.section02{
	width:100%;
	height:500px;
	margin:-180px auto 0 auto;
	text-align:center;
}
.section02 h3{
	font-size:2.5em;
	line-height:1.5;
	font-family:"微軟正黑體";
	margin-bottom:10px;
}
.section02span{color:#00a0ca;font-size:1.5em;}	
.section02pic01{
	width:100%;
	height:300px;
	background-color:#FF9;
	background-image:url(images/Fotolia_77959657_Subscription_Monthly_XL.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	margin-bottom:30px;
}	
.section02p{
	width:700px;
	margin:0 auto 20px auto;
	/*padding:20px;
	border-radius:10px;
	background-color:#066;*/
}
.section02p p{
	text-align:left;
	text-align:justify;
	font-size:1.2em;
	line-height:1.5;
	font-family:"微軟正黑體";
}
/* ==第三頁=========== */
.section03{
	width:1000px;
	height:800px;
	margin:0 auto;
	text-align:center;
}
.section03 h3{
	font-size:2em;
	line-height:1.5;
	font-family:"微軟正黑體";
	
}
.section03 h2{
	font-size:2.7em;
	font-family:"微軟正黑體";
	color:#00a0ca;
}
.class {
	width:460px;
	height:170px;
	display:block;
	margin:30px auto -20px 20px;
	background-color:#6CF;
	/*padding:20px;*/
	padding-left:10px;
	padding-bottom:10px;
	padding-top:10px;
	border-radius:20px;
	font-weight:bold;
	float:left;

	
}
.class a{
	width:760px;
	height:200px;
	display:block;
	color:#000;
	

	}
.class:hover{
	background-color:#00BBA1;
	-webkit-transition: all.30s linear;
	-moz-transition: all.30s linear;
	-ms-transition: all.30s linear;
}
.classPIC{
	width:150px;
	height:150px;
	display:block;
	overflow:hidden;
	border:3px solid  #FFF;
	border-radius:99em;
	background-color:#FFF;
	margin-left:20px;
}
.classP{
	width:250px;
	text-align:center;
	padding-top:10px;
	margin-left:180px;
	margin-top:-130px;
	float:left;
	font-size:1.1em;
	font-family:"微軟正黑體";
	
	

}
.classh1{
	font-size:1.5em;
}

.section03 p{
	display:block;
	clear:both;
	margin-top:30px;
}
.classbtn{
	margin-top:50px;
	margin-bottom:80px;
}
.classbtn a{
	width:300px;
	height:60px;
	padding:10px 20px;
	margin-left:20px;
	font-size:1.5em;
	border:2px solid #00BBA1;
	background-color:#00BBA1;
	border-radius:5px;
	color:#FFF;
	font-family:"微軟正黑體";	
}

.classbtna:hover{
	background-color:#FFF;
	border:2px solid #00BBA1;
	color:#00BBA1;
	text-decoration:none;
	-webkit-transition: background-color .30s linear;
	-moz-transition: background-color .30s linear;
	-ms-transition: background-color .30s linear;
	
}
.part4{
	padding:150px 0 0 0 !important;
}
#gotop{
    display: none;
    position: fixed;
	background-image:url(images/top.png);
	bottom:10px;
	right:10px;
	width:65px;
	height:65px; 
    cursor: pointer;
}



/* ==頁尾資訊=========== */

footer{
	background-color:#000; 
	margin-top:10px;
	width:100%;
	height:150px;
	display:block;

}
.store_info{
	width: 780px;
	margin: 0  auto;
	color:#FFF;

}
.store_info a{
	color:#FF0;
	text-decoration:none;
}
.info{ margin-left:50px;}
.store_info li{
	display:block;
	width:360px;
	float:left;
	font-size:12px;
	line-height:24px;
	text-align:left;

	
}
.tel{ float:right;  width:100px;}
.tel2{   width:100px; float:right; margin-right:35px;}
.copy{
	
	text-align:center;
	
	padding-top:60px;
	font-size:12px;
	
}

@media screen and (max-width: 736px) {
.navbar-fixed-top{
	padding:10px;	
}

article {
	width:100%;
	height:500px;
	padding: 0px 0px 0px 0px;
	background-repeat:no-repeat;
	background-color:#00bba1;
	background-position:20 center;
	background-image:none;
	overflow:hidden;
}
.image{
	width:100%;
	height:100%;
	margin:0 auto;
	padding-left:0px;
	padding-top:250px;

}
.SS{
	width:100%;
	height:300px;
	background-image:url(images/pic01.png);
	background-position: top center;
	background-size:cover;
	background-repeat:no-repeat;
	/*position:relative;
	left:370px;
	top:300px;*/
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-ms-animation-delay: 0.5s;
}
.cloud{
	width:250px;
	height:206px;
	background-image:url(images/cloud_S.png);
	background-repeat:no-repeat;
	background-position:center center;
	position:relative;
	left:15px;
	top:-500px;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
	-ms-animation-delay: 1.5s;
	z-index:999;
}
.cloudbtn{
	width:120px;
	height:40px;
	display:block;
	margin:0 auto;
	border:2px solid #00BBA1;
	text-align:center;
	font-size:20px;
	line-height:40px;
	background-color:#00BBA1;
	border-radius:5px;
	color:#FFF;
	font-family:"微軟正黑體";
	text-decoration:none;
}
.cloudbtn:visited{color:#FFF;text-decoration:none;}
.cloudbtn:hover{
	background-color:#FFF;
	color:#00BBA1;
	text-decoration:none;
	-webkit-transition: background-color .30s linear;
}
.icon01,.icon02,.icon03,.icon04,.icon05{ display:none;}
article h1{
	padding-top:40px;
	text-align:center;
	font-family:"微軟正黑體";
	font-weight:bold;
	font-size:2em;
	line-height:1.2;
	margin-bottom:0px;
}
.h1big{
	font-size:1em;
	
}
/* ==第1頁=========== */
section{
	width:100%;
	height:auto;
	overflow:hidden;
	background-color:#F4F4F4;
}
#about{
	padding-top:50px;
	}
.h3E{ color:#00a0ca;
font-family: Arial;
}
.section01 h3{
	font-size:2em;
	line-height:1.2;
	font-family:"微軟正黑體";
	margin-bottom:10px;
}

.section01{
	width:100%;
	height:600px;
	margin:0 auto;
	text-align:center;
	padding:0 10px;
}
.section01p{
	width:100%;
	float:right;
	padding-top:8%;
}
.section01p p{
	text-align:left;
	text-align:justify;
	font-size:1em;
	line-height:1.5;
	font-family:"微軟正黑體";
}
.pic{
	width:100%;
	height:386px;
	background-image:url(images/pic.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	float:none;
}
/*----第二頁-----*/
.section02{
	width:100%;
	height:auto;
	margin:0 auto;
	text-align:center;
	padding:0 10px;
}
.section02 h3{
	font-size:2em;
	line-height:1.5;
	font-family:"微軟正黑體";
	margin-bottom:10px;
}
.section02span{color:#00a0ca;font-size:1.1em;}	
.section02pic01{
	width:100%;
	height:300px;
	background-color:#FF9;
	background-image:url(images/Fotolia_77959657_Subscription_Monthly_XL.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	margin-bottom:30px;
	
}	
.section02p{
	width:100%;
	margin:0 auto 20px auto;
	
	/*padding:20px;
	border-radius:10px;
	background-color:#066;*/
}
.section02p p{
	text-align:left;
	text-align:justify;
	font-size:1em;
	line-height:1.5;
	font-family:"微軟正黑體";

}
/* ==第三頁=========== */
.section03{
	width:100%;
	height:auto;
	margin:0 auto;
	text-align:center;
	padding:0px 10px;
}
.section03 h3{
	font-size:2em;
	line-height:1;
	font-family:"微軟正黑體";
}
.section03 h2{
	font-size:2em;
	font-family:"微軟正黑體";
	color:#00a0ca;
}
.class {
	width:100%;
	height:330px;
	display:block;
	margin:20px auto 10px auto;
	background-color:#6CF;
	/*padding:20px;*/
	padding-left:0px;
	padding-bottom:10px;
	padding-top:10px;
	border-radius:20px;
	font-weight:bold;
	
	
}
.class a{
	width:100%;
	height:0px;
	display:block;
	color:#000;
	

	}
.class:hover{
	background-color:#00BBA1;
	-webkit-transition: all.30s linear;
	-moz-transition: all.30s linear;
	-ms-transition: all.30s linear;
}
.classPIC{
	width:200px;
	height:200px;
	display:block;
	overflow:hidden;
	float:none;
	border:3px solid  #FFF;
	border-radius:99em;
	background-color:#FFF;
	margin:0 auto;
}
.classP{
	width:100%;
	text-align:center;
	font-size:1.5em;
	font-family:"微軟正黑體";
	float:none;
	margin-left:0px;
	margin-top:15px;

}
.classh1{
	font-size:1em;
	padding:5px 0;
}

.section03 p{
	display:block;
	clear:both;
	margin-top:50px;
}
.classbtn{
	margin-top:50px;
	margin-bottom:80px;
}
.classbtn a{

	width:250px;
	height:auto;
	padding:10px 20px;
	margin-left:0px;
	font-size:1.5em;
	margin-right:auto;
	margin-left:auto;
	display:block;
	margin-bottom:10px;
	border:2px solid #00BBA1;
	background-color:#00BBA1;
	border-radius:5px;
	color:#FFF;
	font-family:"微軟正黑體";	

}

.classbtna:hover{
	background-color:#FFF;
	border:2px solid #00BBA1;
	color:#00BBA1;
	text-decoration:none;
	-webkit-transition: background-color .30s linear;
	-moz-transition: background-color .30s linear;
	-ms-transition: background-color .30s linear;
	
}

footer{
	display:block;
	height:280px;
	width:100%;
	background-color:#000;
	padding-top:10px;
	overflow:hidden;
	

	
	/*margin-top:150px;*/
}
.store_info{
	width:280px;
	margin: 0  auto;
	color:#FFF;

}
.store_info a{
	color:#FF0;
	text-decoration:none;
}
.info{ margin-left:0px;}
.store_info li{
	display:block;
	width:280px;
	mix-width:280px;
	float: none;
	font-size:0.7em;
	line-height:20px;
	loat:left;
}
.tel{ float: none; width:100px;margin-right:0px;}
.tptel{ float: none;  width:100px;margin-right:0px;}
.tel3{ float: none;  width:100px;margin-right:0px;}
.tel2{   width:100px; float: none; margin-right:0px;}
.copy{
	
	text-align:center;
	padding-top:10px;
	font-size:0.9em;
	
}

.logo{ display:none;}
.fb-like{margin-left:10px; margin-top:10px; float:left; }

}