@charset "utf-8";
/* CSS Document */

body{	
	color:#313131;	
	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

	}

/*font*/
h2{ 
	color: #ff9100 ; 
	margin:0 0 10px 0; 
	padding:0;}
	
.shadow{ 
	width:100%; 
	height:20px; 
	background:-webkit-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	border-top: 1px solid  #CCC ; 
	z-index:1; 	
	position: absolute;
	top:500px;
	}
	
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;
}


 a:hover{
	background-color:rgba(255,255,255,0.00);}


.area_index a {text-decoration: none; color: #ffeb00;}
.area_index a:hover {text-decoration: underline;}

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

h1,h2{color:#ff9100; }

.feature {width:100%;text-align:center;	margin-top:0;	}

.feature h1{ 
	color:#ff9100;	
    font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
	font-size:26px; 
	line-height:150%;;
	text-align:center;
	}
.feature ul{
	width:;
	list-style:none;
	margin:0 1%;
	display: inline-block;
    padding-left:0;
	}
.feature img{
	float:left;
	margin:20px 30%;
	}

.point{
	background-color:#efefef;
	width:48%;
	float:left;
	margin:1%;
	padding:;
	}
	
section{
	font-size:18px;
	color:#313131;
	text-align:left;
	padding:0 10px;
	margin:22px;
	}

/*主視覺*/

.area_index{
	width:100%;
	overflow: hidden ; 
	height:320px;
	background-image:url(image/bg.jpg);
	background-position: center;
	background-size:cover;
	}
.area_index .main{width:90%; margin:50px auto 0 auto; position:relative; z-index:1}
.area_index .mobile{width:35%; float:left; margin: 0 3% 0 0;}
.area_index .applogo{width:60%;float:left; margin:25px 0 0 0;	}

.word{ width:100%; color:#FFFFFF; text-shadow: 0 0 2px #000000; text-align:justify	}

.area_index .stickerandroid{width:29%;float:left; margin:10px 0 0 0}
.area_index .qrcodeios{ display:none}
.area_index .stickerios{ width:29%;float:left; margin:10px 0 0 3%}
.area_index .qrcodeandroid{ display:none}

/*主要文案1*/
.part1{
	width:100%;
	overflow:hidden;

	}
	
.part2{	width:90%;	margin:50px 0 0 5%;}
	
.part2 img{  width:100%; float:left; }

.part2 article{margin:0 0 10px 0; padding:6% 0 0 0}

.part2 h1{ 
	color:ff9100;	
	margin: 0;	
	padding: 0;	
	font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
	font-size:32px; 
	line-height:1.5;
	}


/*APP介紹1*/
.part3{
	background-image:url(image/bg1.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	background-size:contain;
	width:100%;
	height:auto; 
	margin:0 0 -10px 0;
	text-align:center;
	background-color:#fff;
	}
	
.part4{	width:90%; margin:0 auto; padding:30px 0 0 0;}
.part4 article{ width:50%; float:left; text-align:left; }
.part4 img{	width:38%; margin:0 auto;padding:0 0 0 0 }
.part4 p{ text-shadow:0 0 5px #FFFFFF}

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

.part20 img{ width:80%; margin:0 auto 10px auto}
.part20 article{ padding:60px 0 30px 0}

.part20{
	margin:-20px 0 0 0;
	text-align:center; 
	/*
	background: -webkit-linear-gradient(0deg,rgba(235,235,235,0),rgba(235,235,235,1)); 
	background: -o-linear-gradient(0deg,rgba(235,235,235,0),rgba(235,235,235,1));
	background: -moz-linear-gradient(0deg,rgba(235,235,235,0),rgba(235,235,235,1)); 
	background: linear-gradient(0deg, rgba(235,235,235,0), rgba(235,235,235,1));*/ }



/*APP介紹2*/
.part5{ 
	/*background-image:url(image/bg2.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	background-size:cover;*/
	background-color: #FFFFFF;
	
	width:100%; 
	height:100%;
	float:left;
	margin:30px auto 0 auto ;
	}
	
.part6 p{color:#313131;}
	
.part6{ width:90%;margin: 0 auto;	}
.part6 img{	 width:40%; float:left; padding:0 0 5% 0    }
.part6 article{width:50%; padding:0 7% 0 0;float:left;}
.part6 article img{width:100%; padding:0 0 10% 0; margin:0 0 0 -10px;float:left;}

.part21{ 
	background-image:url(image/bg3.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	background-size:contain;
	width:100%; 
	height: auto;
	margin:0 auto ;
	}
.part22{width:90%;margin:0 auto;	}
.part22 img{	width:38%; margin:0 auto;padding:5% 0 20px 0}
.part22 article{width:50%; float:left; text-align:left; margin:10% 5% -10% 0}
.part22 p{ text-shadow:0 0 5px #FFFFFF}

/*APP介紹3 情境*/
.part15{ 
	width:100%;
	float:left; height: auto; 
	background-image:url(image/bg.jpg);
	background-repeat:no-repeat;
    background-size:cover;
	background-position: center;
	}
.part16{
	width:90%;
	margin:20px auto 20px auto; color:#FFF;
	}
.part16 img{
	width:200px;
	margin:0 auto  ;
	}
.part16 p{ 
    display:none;
	text-shadow:0 0 5px #000;

	}
	
	
.part16 h2{ 
    text-shadow:0 0 15px #000;
	color:#fff;
	margin:0 0 10px 0

	}	
hr{ width:85%}


}



	
/*平板*/
@media screen and (min-width:768px) and (max-width: 1280px)  {

.feature {
	width:100%;
	text-align:center;	
	}
.feature h1{ 
	color:#ff9100;	
	margin: 0;	
	padding: 0;	
	font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
	font-size:34px; 
	line-height:150%;;
	}
.feature ul{
	width:;
	list-style:none;
	margin:0 auto;
	display: inline-block;
	}
.feature img{
	float:left;
	margin:40px 30%;
	}

.point{
	background-color:#f4f4f4;
	width:22%;
	height:auto;
    border:0px solid;
	float:left;
	margin:10px;
	padding:;
	
	}
	
/*主視覺*/

.area_index{
	width: 100%;
	overflow: hidden;
	height: 500px;
	background-image:url(image/bg.jpg);
	background-size:cover;
	background-repeat:no-repeat;
    background-position: center;
	}
.area_index .main{width:85%; margin:50px auto 0 auto; position:relative; z-index:1}
.area_index .mobile{width:35%; float:left; margin: 0 3% 0 0;}
.area_index .applogo{width:55%;float:left; margin:90px 0 0 0	}

.word {
    width: 90%;
    color: #FFFFFF;
    text-shadow: 0 0 5px #000000;
    text-align: justify;
    margin: 10% 0 0 2%;
    font-size: 22px;
}
.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:6px auto 0px auto;
	position: relative; top:0px; z-index:2;
	
	background-image:url(image/bg0.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top;
 }
 
.part2{	width:100%; margin:0 auto;}

.part2 h1{ 
	color:#ff9100;	
	margin: 0;	
	padding: 0;	
	font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
	font-size:38px; 
	line-height:1.5;
	}
	
.part2 article{width:80%; margin:0 auto 100px auto;text-align:center; padding:15% 0 0 0}


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



/*APP介紹1*/
.part3{ 
	background-image:url(image/bg1.jpg);
	background-position: bottom;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%; 
	height:100%;
	float:left;
	margin:30px auto 0 auto ;
	}
.part4{width:90%;margin:0 auto;	}
.part4 img{ width:28%; margin:100px 0 0 30px ; padding:0 0 20px 0 }
.part4 article{width:35%; padding:10% 0 0 27%; float:left;}


.part20{
	margin:-20px 0 0 0;
	text-align:center;
	/*
	background: -webkit-linear-gradient(0deg,rgba(235,235,235,0),rgba(235,235,235,1)); 
	background: -o-linear-gradient(0deg,rgba(235,235,235,0),rgba(235,235,235,1));
	background: -moz-linear-gradient(0deg,rgba(235,235,235,0),rgba(235,235,235,1)); 
	background: linear-gradient(0deg, rgba(235,235,235,0), rgba(235,235,235,1));*/}

.part20 img{ width:45%; margin:0 auto 10px auto}
	
.part20 article{ padding:80px 0 30px 0}



/*APP介紹2*/
.part5{ 
	background-image:url(image/bg2.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:white;
	
	width:100%; 
	height:100%;
	float:left;
	margin:50px auto 0 auto ;
	}
	
.part6 p{color:#313131;}
	
.part6{ width:75%;margin: 0 auto;	}
.part6 img{	 width:30%; float:left; padding:0 0 20px 0    }
.part6 article{width:35%; padding:0 7% 0 0;float:left;}
.part6 article img{width:100%; padding:10% 0 0 0; margin:0 0 0 -20px;float:left;}

.part21{ 
	background-image:url(image/bg3.jpg);
	background-position: bottom;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%; 
	height:100%;
	float:left;
	margin:0 auto ;
	}
.part22{width:85%;margin:0 auto;	}
.part22 img{ width:28%; margin:50px 0 0 25px ; padding:0 0 20px 0; float:left }
.part22 article{width:35%; padding:15% 0 0 33%; float:left;}




/*APP介紹3 情境*/
.part15{ 
	width:100%;
	float:left; height: auto; 
	background-image:url(image/bg.jpg);
	background-repeat:no-repeat;
	 background-size:cover;
	 background-position: center;
	}
.part16{
	width:80%;
	margin:50px auto 50px auto; color:#FFF;
	}
.part16 img{
	width:200px;
	margin:0 auto  ;
	}
	
.part16 h2{
	text-shadow:0 0 15px #000;
	color:#fff;margin:0 0 20px 0
	}	
.part16 p{ 
	text-shadow:0 0 5px #000

	}
hr{ width:70%}

}

/*桌機*/

@media screen and (min-width: 1281px){
.feature {
	width:100%;
	text-align:center;	
	}
.feature h1{ 
	color:#ff9100;	
	margin: 0;	
	padding: 0;	
	font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
	font-size:34px; 
	line-height:150%;;
	}
.feature ul{
	width:;
	list-style:none;
	margin:0 auto;
	display: inline-block;
	}
.feature img{
	float:left;
	margin:40px 30%;
	}

.point{
	background-color:#f4f4f4;
	width:23%;
	height:auto;
    border:0px solid;
	float:left;
	margin:10px;
	padding:;
	
	}
	
/*主視覺*/

.area_index{
	width: 100%;
	overflow: hidden;
	height: 500px;
	background-image:url(image/bg.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position: center;

	}
.area_index .main{width:65%; margin:50px auto 0 auto; position:relative; z-index:1}
.area_index .mobile{width:35%; float:left; margin: 0 3% 0 0;}
.area_index .applogo{width:60%;float:left; margin:90px 0 0 0	}

.word{ width:100%; color:#FFFFFF;padding:20% 0 0 0 ;text-shadow: 0 0 5px #000000; text-align:justify; font-size:24px; position:relative;}
.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:6px auto 0px auto;
	position: relative; top:0px; z-index:2;
	
	background-image:url(image/bg0.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position: top;
	
 }
 
.part2{	width:70%; margin:0 auto;}

.part2 h1{ 
	color:#ff9100;	
	margin: 0;	
	padding: 0;	
	font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
	font-size:38px; 
	line-height:1.5;
	}
	
.part2 article{width:100%; margin:100px auto ;float:left; text-align:center}
	
.shadow{ 
	width:100%; 
	height:20px; 
	background:-webkit-radial-gradient(50% 0%, 50% 7px, #666 0%, white 100%);
	border-top: 1px solid  #CCC ; 
	z-index:1; 	
	position: absolute;
	top:500px;
	}



/*APP介紹1*/
.part3{ 
	background-image:url(image/bg1.jpg);
	background-position: bottom;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%; 
	height:100%;
	float:left;
	margin:50px auto 0 auto ;
	}
.part4{width:80%;margin:0 auto;	}
.part4 img{ width:23%; margin:100px 0 0 40px ; padding:0 0 20px 0 }
.part4 article{width:33%; padding:10% 0 0 36%; float:left;}


.part20{
	margin:-20px 0 0 0;
	text-align:center;
	/* 
	background: -webkit-linear-gradient(0deg,rgba(235,235,235,0),rgba(235,235,235,1)); 
	background: -o-linear-gradient(0deg,rgba(235,235,235,0),rgba(235,235,235,1));
	background: -moz-linear-gradient(0deg,rgba(235,235,235,0),rgba(235,235,235,1)); 
	background: linear-gradient(0deg, rgba(235,235,235,0), rgba(235,235,235,1)); */}
	
	
.part20 img{ width:30%; margin:0 auto 10px auto}
	
.part20 article{ padding:80px 0 30px 0}

.part20 li{ width:150px; height:auto; background-color:rgba(255,255,255,0.00); border:none}
.part20 ul{ height:auto; background-color:rgba(255,255,255,0.00) }

.tabPanel{ width:500px; height:700px; margin:0 auto; position:relative; }
.tab-content{ width:500px; height:500px; position:absolute; }


.switch{ width:650px; position:absolute; list-style:none; margin:520px 0 0 -50px; border:none}

.switch a{ display:block;  text-decoration:none; height:129px; margin:0 0 0 15px; float:left;border: #E8E8E8 3px solid; padding:0; background-color: #FFFFFF;  }

.switch a:hover{ background-color:#FFFFFF}

a.now-tab, a.now-tab:hover{ border: #FF9100 3px solid; background-color:#FFFFFF}



/*APP介紹2*/
.part5{ 
	background-image:url(image/bg2.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:white;
	
	width:100%; 
	height:100%;
	float:left;
	margin:50px auto 0 auto ;
	}
	
.part6 p{color:#313131;}
	
.part6{ width:75%;margin:30px auto 0 auto;	}
.part6 img{	 width:28%; float:left    }
.part6 article{width:35%; padding:3% 7% 0 0;float:left;}
.part6 article img{width:100%; padding:10% 0 0 0; margin:0 0 0 -20px;float:left;}

.part21{ 
	background-image:url(image/bg3.jpg);
	background-position: bottom;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%; 
	height:100%;
	float:left;
	margin:0 auto ;
	}
.part22{width:85%;margin:0 auto;	}
.part22 img{ width:23%; margin:50px 0 0 25px ; padding:0 0 20px 0; float:left }
.part22 article{width:35%; padding:15% 0 0 33%; float:left;}



/*APP介紹3 情境*/
.part15{ 
	width:100%;
	float:left; height: auto; 
	background-image:url(image/bg.jpg);
	background-repeat:no-repeat;
	 background-size:cover;
	 background-position: center;
	}
.part16{
	width:80%;
	margin:50px auto 50px auto; color:#FFF;
	}
.part16 img{
	width:200px;
	margin:0 auto  ;
	}
	
.part16 h2{
	text-shadow:0 0 15px #000;
	color:#fff;margin:0 0 30px 0
	}	
.part16 p{ 
	text-shadow:0 0 5px #000

	}
hr{ width:70%}
}



/*下載qr*/
#osstickers td.qr{
	width:13%;
	}