@charset "utf-8";
/* CSS Document */
body{ background-color:#FFF}
a:hover{ background-color:rgba(0,0,0,0)}

@media screen and (max-width: 767px){ 
h1,h2{
	color: #0293de; 
	text-align:left}
	
p{ 	text-align:left}
/*主視覺*/
.area_index{
	width:100%;
	overflow: hidden ; 
	height:250px;
    background-image: url(image/bg.jpg);
	background-size:cover;
	background-position: center;
	background-repeat:no-repeat;
	}
.area_index .main{width:90%; margin:25px 0 0 3%; position:relative; z-index:3;overflow: hidden}
.area_index .mobile{width:40%; float:left	}
.area_index .applogo{width:55%;float:left; margin:50px 0 0 5%}
.area_index .stickerandroid{width:25%;float:left; margin:10px 0 0 0}
.area_index .qrcodeios{ display:none}
.area_index .stickerios{ width:25%;float:left; margin:10px 0 0 5%}
.area_index .qrcodeandroid{ display:none}

.part1{ width:100%;	float:left;	margin:30px 0 0 0 ;}
.part2{width:90%;margin:0 auto	}
.part2 img{ width:100%;margin:10px 0 30px 0 }

/*APP介紹1*/
.part3{	width:100%; float:left;	margin:30px auto ;}
.part4{width:90%; margin:0 auto}
.part4 img{ width:80%; margin:0 0 0 5%; }
.part4 article{	width:100%; padding:5% 0 0 0;}

/*APP介紹2*/
.part5{ width:100%; float:left; margin:30px auto }
.part6{width:90%; margin:0 auto	}
.part6 img{ width:80%; margin:0 0 0 13%; }
.part6 article{	width:100%;	padding:5% 0 0 0;}
	
.part9{ width:100%; float:left; margin:30px auto }
.part10{width:90%; margin:0 auto}
.part10 img{ width:90%; margin:0 0 0 6%; }
.part10 article{width:100%; padding:5% 0 0 0;	}

.part11{ width:100%; margin:30px auto}
.part12{width:90%; margin:0 auto}
.part12 img{ width:70%; margin:0 0 0 15%; }
.part12 article{width:100%; padding:5% 0 0 0;}

/*APP介紹3 情境*/
.part7{ width:100%;	margin:0 auto; float:left; height: auto; background-color: #5B5B5B;	}
.part8{width:90%;margin:50px auto; color:#FFF;}
.part8 img{	width:150px;margin:0 auto ;	}
.part8 p{ text-shadow:0 0 5px #000; margin:-5px 0 10px 0	}
.part8 h2{ color:#FFFFFF;text-shadow:0 0 5px #000}

#shadow{ 
	width:100%; 
	height:20px; 
	background:-webkit-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	background-image: -moz-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	background-image: -ms-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	background-image: -o-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	border-top: 1px solid  #CCC ; 
	z-index:1; 	
	position: absolute;
	top:250px;
	}
	
hr{ width:90%}
}

	
/*平板*/
@media screen and (min-width:768px) and (max-width: 1280px)  {
#all {padding-top:0;}
/*主視覺*/
.area_index{
	width:100%;
	overflow: hidden ; 
	height:400px;
	background-image: url(image/bg.jpg);
	background-size:cover;
	background-position:bottom;
	background-repeat:no-repeat;
	}
.area_index .main{width:80%; margin:50px auto; position:relative; z-index:3;overflow: hidden}
.area_index .mobile{width:35%; float:left	}
.area_index .applogo{width:50%;float:left; margin:40px 50px 0 30px	}

.area_index .qrcodeios{ width:7%;float:left; margin:10px 0 0 4%}
.area_index .stickerios{ width:22%;float:left; margin:10px 0 0 0}

.area_index .qrcodeandroid{ width:7%;float:left; margin:10px 0 0 1%}
.area_index .stickerandroid{width:22%;float:left; margin:10px 0 0 0}
.image{ display:none}
.image2{ display:none}

/*主要文案1*/
.part1{ width:100%; float:left;margin:50px auto ;}
.part2{width:90%;margin:0 auto;}
.part2 img{ width:85%; margin:0 0 0 8% }
.part2 article{width:100%; padding:30px 0 50px 0; text-align:center}
	
/*APP介紹1*/
.part3{	width:100%;	float:left; }
.part4{width:90%;margin:40px auto; }
.part4 img{ width:32%;float:left; margin:0 3% 5% 0; 	}
.part4 article{	width:100%; padding:8% 0 0 0}

/*APP介紹2*/
.part5{ width:100%; float:left; margin:50px auto}
.part6{width:90%;margin:0 auto; }
.part6 img{ width:40%;  }
.part6 article{	width:60%; padding:5% 0 0 0;float:left}	

.part9{ width:100%; float:left; margin:80px auto	}
.part10{width:90%; margin:0 auto;	}
.part10 img{ width:48%; margin:0 3% 0 0;float:left }
.part10 article{width:100%; padding:5% 0 0 0;}

.part11{ width:100%; float:left; margin:20px auto}
.part12{width:90%; margin:0 auto;}
.part12 img{ width:30%; margin:0 0 0 5%; }
.part12 article{width:65%; padding:5% 0 0 0;float:left}

/*APP介紹3 情境*/
.part7{ width:100%;	margin:0 auto;	height: auto;float:left ;background-color: #5B5B5B	}
.part8{width:90%;margin:50px auto; color:#FFF;}
.part8 img{	width:150px;margin:0 auto ;	}
.part8 p{ text-shadow:0 0 5px #000; margin:-5px 0 10px 0	}
.part8 h2{ color:#FFFFFF;text-shadow:0 0 5px #000}

hr{ width:90%}

.shadow{ 
	width:100%; 
	height:20px; 
	background:-webkit-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	background-image: -moz-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	background-image: -ms-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	background-image: -o-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	border-top: 1px solid  #CCC ; 
	z-index:1; 	
	position: absolute;
	top:400px;
	}
}

/*桌機*/

@media screen and (min-width: 1281px){
/*主視覺*/
.area_index{
	width: 100%;
	overflow: hidden;
	height: 500px;
	background-image: url(image/bg.jpg);
	background-size:cover;
	background-position:bottom;
	background-repeat:no-repeat;
	}
.area_index .main{width:70%; margin:50px auto 0 auto; position:relative; z-index:1;}
.area_index .mobile{width:35%; float:left	}
.area_index .applogo{width:50%;float:left; margin:100px 50px 0 30px	}

.area_index .qrcodeios{ width:7%;float:left; margin:10px 0 0 3%}
.area_index .stickerios{ width:22%;float:left; margin:10px 0 0 0}

.area_index .qrcodeandroid{ width:7%;float:left; margin:10px 0 0 1%}
.area_index .stickerandroid{width:22%;float:left; margin:10px 0 0 0}

/*主要文案1*/
.part1{ width:100%; float:left;	margin:50px auto ; }
.part2{width:90%;margin:0 auto	}
.part2 img{ width:65%; margin:0 0 0 18% }
.part2 article{width:100%; padding:30px 0 50px 0; text-align:center}
.part2 h2{ font-size:40px}
	

/*APP介紹1*/
.part3{	width:100%;	float:left;	}
.part4 {width:65%;margin:70px auto; }
.part4 img{ width:30%;float:left; margin:0 80px 50px 0; 	}
.part4 article{	width:80%; 	padding:10% 0 0 20%;}


/*APP介紹2*/
.part5{ width:100%; float:left; margin:70px 0 50px 0}
.part6{width:65%; margin:0 auto;}
.part6 img{ width:35%; margin:0 0 0 0; }
.part6 article{	width:65%; padding:10% 0 0 0;float:left	}
	
.part9{ width:100%; float:left; margin:80px 0 }
.part10{width:65%; margin:0 auto;}
.part10 img{ width:50%; margin:0 5% 0 0;float:left }
.part10 article{width:100%; padding:5% 0 0 0;}


.part11{ width:100%; float:left; margin:20px 0 50px 0; }
.part12{width:65%; margin:0 auto;}
.part12 img{ width:25%; margin:0 0 0 12%; }
.part12 article{width:60%; padding:10% 0 0 0;float:left}

/*APP介紹3 情境*/
.part7{ width:100%;	float:left; height: auto;background-color: #5B5B5B;	}
.part8{width:65%;margin:50px auto; color:#FFF;}
.part8 img{	width:150px;margin:0 auto ;	}
.part8 p{ text-shadow:0 0 5px #000; margin:-5px 0 10px 0	}
.part8 h2{ color:#FFFFFF;text-shadow:0 0 5px #000}

hr{ width:70%}
	
.shadow{ 
	width:100%; 
	height:20px; 
	background:-webkit-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	background-image: -moz-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	background-image: -ms-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	background-image: -o-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	border-top: 1px solid  #CCC ; 
	z-index:1; 	
	position: absolute;
	top:650px;
	}
}

body{	
	color:#555;	
	margin: 0;	
	padding: 0;	
	font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
	font-size:18px; 
	line-height:1.5;
	background-image:none
	}
h2{ 
	color: #5B5B5B;
	font-size:32px; 
	margin:0 0 10px 0; 
	padding:0;}

	
hr{  
 border: 0; height: 1px; background: #333;  
 background-image: -webkit-linear-gradient(left,  #eee, #999, #eee); 
 background-image: -moz-linear-gradient(left, #eee, #999, #eee); 
 background-image: -ms-linear-gradient(left, #eee, #999, #eee); 
 background-image: -o-linear-gradient(left, #eee, #999, #eee); overflow:hidden
}





/*20241122debug*/
div#all > div {
    float: none;
}
div#shadow, div.shadow {display: none !important;}
.part7 {padding: 40px 0;}