@charset "utf-8";
 	article { 
	padding: 10px 0;
	 }
	#fullpage{
		margin-top:0px;
	}
	.section{float:left;
	}
	/* Centered texts in each section
	* --------------------------------------- */
	#fullpage h2{
		margin-top:0;
		margin-bottom:10px;
		font-size: 260%;
		letter-spacing:1px;
		color: #000;
	}
	#fullpage p{
		font-size:110%;
		letter-spacing:1px;
		}
		
	#section0{
		position:relative;
		width:100%;
		min-height:700px;
		background:url(../images/sonetapp/kv_bg.jpg) top center no-repeat;
		background-size:100%;
		}
	#section0 .intro_l h2, #section0 .intro_r h2{
		text-align:center;
		}
	#section0 .intro_l p, #section0 .intro_r p{
		padding:0;
		text-align:center;
		}
	#section0 .intro_l, #section0 .intro_r{
		display: block;
		position: absolute;
		width: 220px;
		top: 69px;
		padding-bottom: 60px;
		}
	#section0 .intro_l{		
		left: 56px;
		background: url(../images/sonetapp/icon_bill.png) center bottom no-repeat;
		}
	#section0 .intro_r{
		right: 56px;
		background: url(../images/sonetapp/icon_apply.png) center bottom no-repeat;
		}
	#section0 section.download{
		position:absolute;
		float:right;
		top:230px;
		right:74px;
		padding:0;
		margin:0;
		}
	#section0 section.download h3{
		background:none;
		margin:0;
		padding:0;
		}
			
	#section0 .qr{
		position:relative;
		min-height:300px;				
		padding:20px;
		border-radius:15px;
		-moz-border-radius:15px;
		-ms-border-radius:15px;
		-o-border-radius:15px;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-ms-box-sizing:border-box;
		-o-box-sizing:border-box;
		background: #fff; /* Old browsers */
		}
	#section0 .qr h3{
		margin:auto;
		padding:0 auto;
		text-align:center;
		font-size:1.25em;
		font-weight:normal;
		}
	#section0 .qr h3 span{
		display:block;
		clear:both;
		font-weight:bold;
		}

	#section0 .qr li.qrcode{
		display:block;
		width:115px;
		height:115px;
		margin:10px auto 10px;
		background:url(../images/sonetapp/qrcode.png) no-repeat;
		background-size:contain;
		}
	#section0 .qr li.ios, .qr li.android{
		width:135px;
		height:40px;
		margin:10px auto 0;
		}
	#section0 .qr li.ios img, .qr li.android img{
		width:100%;
		height:auto;
		}
	#section0 .ad{
		width:180px;
		height:auto;
		margin:20px auto;
		}
	#section1{
		position:relative;
		width:100%;
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(top,  #fff, #e8e8e7); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #fff,#e8e8e7); /* Chrome10-25,Safari5.1-6 */
		background: -o-linear-gradient(top, #fff, #e8e8e7);
		background: linear-gradient(to bottom,  #fff,#e8e8e7); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e8e7',GradientType=0 ); /* IE6-9 */
		}
	#section1 h2,#section2 h2,#section3 h2{
		display:block;
		width:100%;
		margin:20px auto 30px;
		font-size:250%;	
		text-align:center;
		color:#000;
		}
	#section1 h2:before,#section2 h2:before,#section3 h2:before{
		content:"[";
		margin-right:10px;
		font-size:1.1em;
		font-weight:bold;
		}
	#section1 h2:after,#section2 h2:after,#section3 h2:after{
		content:"]";
		margin-left:10px;
		font-size:1.1em;
		font-weight:bold;
		}
	#section1 ul,#section3 ul{
		width:85%;
		margin:20px auto;
		overflow:hidden;
		padding-bottom:30px;
		border-bottom:1px solid #fff;
		}
	#section1 li,#section3 li{
		width:33.33%;
		float:left;
		font-size:1.6em;
		text-align:center;
		}
	#section1 li span,#section3 li span{
		display:block;
		width:105px;
		height:105px;
		margin:10px auto;
		}
	#section1 li span img,#section3 li span img{
		height:100%;
		width:auto;
		}
	#section1 .intro,#section2 .intro{
		width:90%;
		margin:0 auto;
		}
	#section1 dl,#section2 .intro p{
		display:block;
		width:50%;
		box-sizing:inhert;
		padding:0px 20px;
		margin:0 0 20px;
		border-bottom:0;
		float:left;
		}
	#section1 dt,#section1 dd,#section2 .intro span{
		width:95%;
		float:none;
		margin:auto
		}	
	#section1 dt h3,#section2 h3,#section3 h3{
		margin-top:10px;
		margin-bottom:10px;
		background:none;
		font-size:180%;
		font-weight:bold;
		text-align:center;
		}
	#section1 dd{
		font-size:115%;
		text-align:center;
		}
	#section1 dd p{
		min-height:90px;
		padding-bottom:0px;
		margin-bottom:0;
		letter-spacing:0;
		text-align:center;
		}
	#section1 dd span, #section2 .intro span{
		display:block;
		width:300px;
		margin:10px auto;
		}
	#section1 dd span img, #section2 .intro span img{
		width:100%;
		height:auto;
		border:10px solid #fff;
		 }
	
	#section2{
		position:relative;
		width:100%;
		padding-top:15px;
		padding-bottom:7px;
		background:#ffe73c;
		}

	#section2 p{
		width:90%;
		margin:10px auto;
		font-size:130%;
		text-align:center;
		letter-spacing:0;
		}
	#section2 .intro{
		width:90%;
		margin:0 auto;
		}
	#section3{
		width:100%;
		padding-top:25px;
		background:#fff;
		border-left:1px solid #e5e5e5;
		border-right:1px solid #e5e5e5;
		box-sizing:inhert;
		}
	#section3 li {
		font-weight:bold;
		}
	#section3 li p{
		display:block;
		width:85%;
		margin:10px auto;
		font-size:65%;
		text-align:center;
		letter-spacing:0;
		line-height:1.5;
		font-weight:normal;
		}
	#section3 li span{
		display:block;
		width:150px;
		height:150px;
		margin:10px auto;
		}
		
		
	#section4{
		width:100%;
		background:#e5e5e5;
		box-sizing:border-box;
		margin-bottom:30px;
		}
	#section4 dl{
		display:block;
		width:78%;
		height:auto;
		margin:3% auto;
		overflow:hidden;

		}
	#section4 dt{
		float:left;
		display:block;
		width:215px;
		height:auto;
		margin-top:10px;
		margin-right:10%;
		background-size:contain;
		}
	#section4 dt img{
		width:100%;
		height:auto;
		}
	#section4 dl dd{
		display:table;
		width:60%;
		text-align:center;
		}
	#section4 dd h2,#section4 dd p{
		text-align:center;
		}
	#section4 dl dd h2{
		width:100%;
		margin-top:15px;
		margin-bottom:15px;
		font-size:250%;
		letter-spacing:2px;
		}
	#section4 dd p{
		margin-top:28%;
		font-size:1.5em;
		}
	#section4 dd span{
		display:inline-block;
		margin-left:10px;
		}
	#section4 dd img{
		width:200px;
		height:auto;
		display:inline-table;
		margin-right:10px;
		margin-top:15px;
		}
		
	#nav_page{
		position:fixed;
		top:40%;
		float:right;
		margin-left:920px;
		z-index:200;
		}
	#nav_page li{
		width:32px;
		height:32px;	
		}
	#nav_page li a{
		display:block;
		width:12px;
		height:12px;
		border:1px solid #c2c2c1;
		border-radius:50%;
		-moz-border-radius:50%;
		-o-border-radius:50%;
		-webkit-border-radius:50%;
		opacity:0.95;
		}
	#nav_page li a:hover,#nav_page li a:active{
		background:#fceb76;
		}
	#nav_page li a span{
		display:none;
		}
	#nav_page li a:hover span,#nav_page li a:active span{
		display:block;
		float:right;
		width:220px;
		padding:7px 10px 5px 10px;
		margin-right:15px;
		border-radius:30%;
		-webkit-border-radius:6px;
		border:1px solid #e1e0de;
		background:#fff;
		font-size:0.85em;
		text-align:center;
		}
		
	@media screen and (max-width: 736px){
	
	#nav_page{
		position:fixed;
		margin:auto;
		right:-12px;
		}
	#nav_page li{
		width:32px;
		height:30px;	
		}
	#section0 .qr h3 span.hide{
		display:none;
		}
	#section0{
		min-height:500px;
		padding-bottom:20px;
		background:url(../images/sonetapp/kv_bg_p.jpg) top center no-repeat;
		background-size:100%;
		background-position:0 -10px;
		}
	#section0 .intro_l, #section0 .intro_r{
		display: block;
		position: absolute;
		width: 220px;
		top: 35px;
		padding-bottom:auto;
		}
	#section0 .intro_l{		
		left: 30px;
		background: none;
		}
	#section0 .intro_r{
		right: 30px;
		background: none;
		}
	#section0 h2{
		font-size:200%;
		}	
	#section0 section.download{
		position:relative;
		float:none;
		width:90%;
		margin:0 auto 20px;
		top:370px;
		right:auto;
		}
	#section0 .qr{
		float:left;
		position:relative;
		width:62%;
		min-height:auto;
		padding:15px 15px 10px;
		}
	#section0 .qr ul{
		width:auto;
		margin:10px auto 0;
		float:none;
		}
	#section0 .qr li.qrcode{
		display:none;
		}
	#section0 .qr li.ios,#section0 .qr li.android{
		display:inline-block;
		width:48%;
		height:auto;
		float:none;
		margin:0;
		text-align:center;
		}
	#section0 .qr li.ios{margin-right:2%;}
	#section0 .ad{
		float:right;
		margin-left:10px;
		}
		
	#section1{
		}
	#section1 h2,#section2 h2,#section3 h2{
		width:90%;
		margin:50px auto 30px;
		font-size:220%;	
		}
	#section1 h2:before,#section2 h2:before,#section3 h2:before{
		margin-right:5px;
		font-size:1em;
		}
	#section1 h2:after,#section2 h2:after,#section3 h2:after{
		margin-left:5px;
		font-size:1em;
		}
	#section1 ul,#section3 ul{
		width:97%;
		margin:15px auto;
		padding-bottom:30px;
		}
	#section1 li,#section3 li{
		font-size:1.3em;
		}
	#section1 li span,#section3 li span{
		width:95px;
		height:95px;
		}
	#section1 .intro,#section2 .intro{
		width:97%;
		}
	#section1 dl,#section2 .intro p{
		padding:0px 10px;
		}
	#section1 dt,#section1 dd,#section2 .intro span{
		width:100%;
		}	
	#section1 dt h3,#section2 h3,#section3 h3{
		margin-top:10px;
		margin-bottom:0px;
		font-size:180%;
		}
	#section1 dd{
		font-size:100%;
		}
	#section1 dd span, #section2 .intro span{
		width:95%;
		}
	
	#section2{
		padding-top:0px;
		padding-bottom:10px;
		}

	#section3{
		padding-top:0px;
		}
	#section3 li p{
		font-size:85%;
		}
	#section3 li span{
		width:130px;
		height:130px;
		}		
		
	#section4 dl{
		width:90%;
		margin:3% auto;
		}
	#section4 dt{
		width:35%;
		margin-right:3%;
		}
	#section4 dl dd{
		width:62%;
		}
	#section4 dl dd h2{
		font-size:230%;
		}
	#section4 dd p{
		margin-top:23%;
		font-size:1.125em;
		}		

	}
	
	@media screen and (max-width: 540px){
	/* Centered texts in each section
	* --------------------------------------- */
	#nav_page{
		display:none;
		}
	#section0{
		min-height:auto;
		padding-bottom:10px;
		background:url(../images/sonetapp/kv_bg_m.jpg) top center;
		}
	#section0 .intro_l, #section0 .intro_r{
		position: relative;
		width:90%;
		float:none;
		margin: auto;
		padding:0;
		}
	#section0 .intro_l{		
		left:auto;
		margin-top: 0px;
		}
	#section0 .intro_r{
		right: auto;
		margin-top:20px;
		}
	#section0 section.download{
		position:relative;
		width:85%;
		height:auto;
		margin:40px auto 0;
		top:auto;
		}
	#section0 .qr{
		width:100%;
		float:none;
		padding-top:20px;
		padding-bottom:10px;		
		}
	#section0 .qr h3{
		font-size:1.325em;
		}
	#section0 .qr h3 span{
		font-weight:bold;
		}

	#section0 .qr li.qrcode{
		display:none;
		}
	#section0 .qr li.ios,#section0 .qr li.android{
		display:block;
		width:75%;
		max-width:215px;
		margin:0 auto 10px;
		}
	#section0 .ad{
		float:none;
		margin:20px auto;
		}
		
	#section1{
		padding-top:0px;
		padding-bottom:10px;
		}
	#section1 h2,#section2 h2,#section3 h2{
		margin:35px auto 20px;
		font-size:185%;	
	    line-height: 25px /*修正文字重疊 0413*/
		}
	#section1 h2:before,#section2 h2:before,#section3 h2:before{
		margin-right:5px;
		font-size:1em;
		}
	#section1 h2:after,#section2 h2:after,#section3 h2:after{
		margin-left:5px;
		font-size:1em;
		}
	#section1 ul,#section3 ul{
		width:95%;
		}
	#section1 li,#section3 li{
		width:100%;
		padding:0 3px;
		font-size:1.2em;
		}
	#section1 li span,#section3 li span{
		width:110px;
		height:110px;
		}
	#section1 .intro,#section2 .intro{
		width:95%;
		}
	#section1 dl,#section2 .intro p{
		width:100%;
		padding:0px 10px;
		margin:0 0 10px;
		font-size:90%;
		}
	#section1 dd span, #section2 .intro span{
		width:260px;
		margin-bottom:0;
		}
	#section1 dt,#section1 dd{
		width:95%;
		float:none;
		}	
	#section1 dt h3,#section3 h3{
		font-size:190%;
		}
	#section1 dd{
		font-size:115%;
		padding-bottom:0;
		}
	#section1 dd p{
		min-height:60px;
		}
	
	#section2{
		padding-top:0px;
		padding-bottom:10px;
		}
	#section2 h3{
		font-size:160%;
		line-height: 25px;/*修正文字重疊 0413 */
		}
	#section2 p{
		font-size:110%;
		line-height:150%;
		}

	#section3{
		padding-top:0px;
		padding-bottom:0px;
		}

	#section3 li p{
		width:95%;
		margin:10px auto;
		font-size:85%;
		}
	#section3 li span{
		width:120px;
		height:120px;
		}
		
		
	#section4{
		padding-top:20px;
		padding-bottom:20px;
		}
	#section4 dl{
		width:95%;
		}
	#section4 dt{
		float:none;
		width:55%;
		margin:0 auto;
		}
	#section4 dl dd{
		float:none;
		width:95%;
		margin:0 auto;
		}
	#section4 dd h2,#section4 dd p{
		text-align:center;
		padding:0;
		margin:0;
		}
	#section4 dl dd h2{
		width:100%;
		margin-top:15px;
		margin-bottom:15px;
		font-size:250%;
		letter-spacing:2px;
		}
	#section4 dd p{
		margin-top:15px;
		font-size:1.325em;
		}
	#section4 dd span{
		display:block;
		clear:both;
		margin:auto;
		line-height:1.5;
		}
	#section4 dd img{
		width:200px;
		height:auto;
		display:inline-table;
		margin:10px auto 0;
		}
		
	}