/*
  Version:1.0
  Author: Amy
  Create Date:2017-07-27
  Update Date:2017-11-11 Amy
  Desc : Support Common CSS */  
	
/* Support Banner Begin */
.sptBanBox a,.sptBanBox a:link,.sptBanBox a:hover,.sptBanBox a:visited{color: #fff;}
.sptBanner{max-width: 1920px; text-align: center;padding-top: 4.5%;color: #fff; background: url(../images/support/sptBannerBg.jpg) no-repeat; background-size: 100%;}
.sptBanArrow{margin-top: 1.6%; background: url(../images/support/sptBannerArrow.png) no-repeat scroll center center; background-size: 1.8%;}
.sptBanCon{padding-bottom: 2.4%;}
.sptBanBox{margin: 0 auto; width: 80%; margin-left: 35%;}
.sptBanBox1{margin-left: 35%;}
.sptBanBox .sptBanA{float: left; width: 12.5%; cursor: pointer; padding-top: 1.8%;}
.sptBanBox .sptBanA:hover,.sptAJbanner .AJ,.sptbbAPPbanner .bbAPP,.sptBBbanner .BB,.sptTVbanner .TV,.sptVDbanner .Video,.sptMNbanner .Menual,.sptMBbanner .MB,.sptATbanner .AT,.sptSCbanner .SC{background: url(../images/support/sptBannerIconLight.png) no-repeat; background-size:70%; background-position-x: 50%;background-position-y: 18%;}
.Btn{width: 20%; background-color: #327fe8; border-radius: 10px; cursor: pointer; text-align: center;color: #fff!important;}
.Btn a{color: white;}
.headerTotal{position: relative !important;}

.sptBanBox p{padding-top: 9%;}
.sptBanBox img{margin: 0 auto; width: 56%;}
/* Support Banner End*/

/* Sharp Text Box Begin */
.foldBoxSpc1,.foldBoxSpc2{margin-top: 0;}
.foldBoxSpc1 .bubbleAngle{margin-left: 34.6%;}
.foldBoxSpc2 .bubbleAngle{margin-left: 60.7%;}
/* Sharp Text Box End */

/* Support Search Begin */
.sptSearch .left,.sptSearch .right{margin: 0 auto; text-align: center; width: 50%}
.sptSearch .left{float: left;padding-top: 6.5%;}
.sptSearch .right{float: right;padding-top: 3%; border-left: 1px solid #dedede;}
.searchTitle{margin-bottom: 4%; margin-left: 2.5%;}
.searchImg,.searchBar,.searchButton{float: left; line-height: 1.5; padding-top: 1.8%; padding-bottom: 1.8%; border: 1px solid #b1b1b1;}
.searchImg{width: 6.5%; margin-left: 14%;   
	border-right: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
	background: #fff url(../images/icons/magnifierGray.png) no-repeat scroll center center;
	background-size: 55%;
    background-position-x: 60%;
}
.searchBar{width: 52%; padding-left: 1%; color: #999;
	border-radius:0;
	border-left: none;
	border-right: none;    
}
.searchButton {width: 13%; text-align: center; color: #ff7f00; cursor: pointer;font-weight: bold;
	border-left-color: #ccc;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: inset 0 0 0 0 #ff7f00;
    -webkit-transition: all ease .8s;
    -moz-transition: all ease .8s;
    transition: all ease .8s;
}
.searchButton:hover{color: #fff; box-shadow: inset 200px 0 0 0 #ff7f00;}
.serviceBox a,.serviceBox a:link,.serviceBox a:visited{color: #222;}
.serviceBox a:hover{color: #327fe8}
.serviceBox{margin-top: 4%; margin-bottom: 6%; margin-left: 10%; padding: 0 5%; padding-left:16%}
.serviceBox p{float: left; width: 35%; padding-top: 15%; border-right: 1px solid #b1b1b1; }
.serviceBox p.noBoder{border: none;}
.service1{background: url(../images/icons/callCenterIcon.png) no-repeat scroll center center;} 
.service2{background: url(../images/icons/weChatIcon.png) no-repeat scroll center center;} 
.service3{background: url(../images/icons/storeIcon.png) no-repeat scroll center center;} 
.service1:hover{background: url(../images/icons/callCenterIconH.png) no-repeat scroll center center;} 
.service2:hover{background: url(../images/icons/weChatIconH.png) no-repeat scroll center center;} 
.service3:hover{background: url(../images/icons/storeIconH.png) no-repeat scroll center center;} 
.service1:hover,.service2:hover,.service3:hover,.service1,.service2,.service3{background-size: 40%; background-position-y: 10%;}
/* Support Search End */

/* Basic Structural Begin*/
.bgMgn{padding:3% 0;}
.noBgMgnbtm{padding-bottom: 0;}
.gradient{background: -moz-linear-gradient(top, #ffffff 0;);
          background: -webkit-gradient(linear, top, bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f5f5));
          background: -webkit-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
          background: -o-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
          background: -ms-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
          background: linear-gradient(to bottom, #ffffff 0%,#f5f5f5 100%);}
.partAll{width: 100%;}
.partAll li{line-height: 2;}
.titleMgnBtm span{display: inline-block;}
.titMgnTop,.imgTitle{margin-top: 3%;}
.imgCnt{margin: 0 auto; width: 40%; margin-left: 6%; float: left;}
.imgCnt img{width: 100%; margin-top: 3% 0;}
.imgCnt2{width: 63%;}
.imgCnt2 img{width: 100%;}
.imgAppExplain img{margin: 5% 0; width: 69%;} 
.imgCnt .imgTitle{text-align: center;margin-bottom: 3%;}	
.imgCntApp{ overflow: hidden }
.imgCntAppLeft,.imgCntAppRight{float: left; margin: 0; width: auto;}

.imgCntApp .imgTitle{text-align: left;}

ul.listNom,ul.listDot{margin-left: 1.75%; padding: 0; }
ul.listNom li{list-style-type:decimal; margin-bottom: 1%}
ul.listNom li div.pMgn{margin-bottom: 1.2%;}
ul.listDot{margin-left: 1.65%;}
ul.listDot li{  list-style-type: disc;}
.Sharp,.textCon{float: left; display: block;}
.Sharp{vertical-align: top;width: 1%;}
.textCon{ width: 95%;}
.textNote{padding-left: 2%; background: url(../images/icons/hotSpotOrange.png) no-repeat; background-size: 1.3%; background-position-x: 0%;background-position-y: 2%;}
.appQRcode{margin: 1.5% 0;}

.appAPK{float: left;  margin-left:80%; cursor: pointer; margin-top:1%;margin-bottom: 1.8%;}
.appAPK img{width: 80%;}
.appNote{margin-bottom: 2%; width: 90%; padding-left: 6%}
.appQRcode{margin-top: 2.5%;}
.QRcode p{float: left; width: 20%;margin-left: 10%;}
.QRcode p:first-child{margin-top: 0;}
.QRcode p img{width: 100%; display: block;}
.QRcode p img:first-child{margin-bottom: 8%;}


@media  (min-width:1651px) and (max-width:1800px){ul.listNom,ul.listDot{margin-left: 1.85%;}}
@media  (min-width:1501px) and (max-width:1650px){ul.listNom,ul.listDot{margin-left: 1.86%;}}
@media  (min-width:1351px) and (max-width:1500px){ul.listNom,ul.listDot{margin-left: 1.88%;}}
@media  (min-width:1201px) and (max-width:1350px){ul.listNom,ul.listDot{margin-left: 1.90%;}}
@media  (min-width:1001px) and (max-width:1200px){ul.listNom,ul.listDot{margin-left: 1.88%;}}
@media  (min-width:1501px) and (max-width:1700px){.Sharp{width: 1.9%;}}	
@media  (min-width:1301px) and (max-width:1500px){.Sharp{width: 1.8%;}}	
@media  (min-width:1001px) and (max-width:1300px){.Sharp{width: 1.6%;}.textNote{padding-left: 1.5%; background-size: 1%;background-position-y: 3.5%;}}
/* Basic structural End*/
@media (max-width:1650px){
.imgCntAppLeft{ width: 32%;}
.imgCntAppRight{ width: 32%;}
.imgCntAppLeft img,.imgCntAppRight img{width: 100%}
}
@media (max-width:1030px){
.imgCntAppLeft,.imgCntAppRight{ float: none;}
.imgCntAppLeft img,.imgCntAppRight img{width:  auto;}
.Btn{width: 35%; }
}
@media (max-width:1030px){
.imgCntAppLeft,.imgCntAppRight{ float: none;}
.imgCntAppLeft img,.imgCntAppRight img{width:  auto;}
}
@media (max-width:710px){
.imgCntAppRight img{width:  100%;}
}
@media (max-width:680px){
.imgCntAppLeft img{width:  100%;}
}
@media  (min-width:768px) and (max-width:1000px){
    /* Support Banner Begin*/
	.sptBanTitle{line-height: 1.4; padding: 0 5%;}
    .sptBanner{background: url(../images/support/ipadSptBannerBg.jpg) no-repeat; background-size: 100%;}	
	.sptBanCon{padding-bottom: 3.2%; padding-top: -7%;}
	.sptBanBox{width: 94%; }
	.sptHot{border-top: 1px solid #dedede; padding: 4.6% 0 3.8% 4%; width: 100%;}
	/* Support Banner End*/
	
    /* Support Search Begin */
	.sptSearch .left{ padding: 8.6% 0 5.2% 0;}
	.sptSearch .right{padding-top: 3.9%; padding-bottom: .4%;}
	.searchImg,.searchBar,.searchButton{line-height: 1.5; padding-top: 2%; padding-bottom: 2%;}
	.searchImg{width: 10%; margin-left: 10%;}
	.searchBar{width: 54%;}
	.searchButton{width: 16%;}
	.serviceBox{padding: 0 2%; margin-left: 1%; margin-bottom: 7%; margin-top: 5%;}
	.serviceBox p{float: left; width: 33%; text-align: center; padding-top: 14.5%;border-right: 1px solid #b1b1b1;}
	.service1:hover,.service2:hover,.service3:hover,.service1,.service2,.service3{background-size: 38%;background-position-y: 0;}	
	/* Support Search End */  
	
	/* Sharp Text Box Begin */		
    .foldBoxSpc1 .bubbleAngle{margin-left: 36%;}
	.foldBoxSpc2 .bubbleAngle{margin-left: 61.5%;}	
	/* Sharp Text Box End */
	
	/* Basic Structural Begin*/
	.bgMgn{padding-top: 5%; padding-bottom: 4.5%;}
	.noBgMgnbtm{padding-bottom: 0;}
	.partMgnTop{margin-top: 0;}
	.partAll,.imgCnt{padding:0 5%; padding-right: 4.8%;} 
	.Sharp{width: 2.5%;}
	.appAPK img{width: 60%;}
	.imgAppExplain img{width: 65%;} 
	.textNote{padding-left: 2.5%; background-size: 1.5%;background-position-y: 2.8%;}
	ul.listNom,ul.listDot{margin-left: 2.15%;}
	ul.listDot{margin-left: 2%;}
	.Btn{width: 40%; }
	/* Basic Structural End*/
}

@media (max-width:767px){
    /* Support Banner Begin*/
    .sptBanner{max-width: 767px; height: 115vw; padding-top: 30%; background: url(../images/support/mSptBannerBg.jpg) no-repeat; background-size: 100%; }
	.sptBanTitle{line-height: 1.2; padding: 0 5%;}
	.sptBanArrow{background-size: 4%;margin-top: 3.2%; margin-bottom: 6%;}
	.sptBanCon{margin-top: -2%;padding-bottom: 5%;}
	.sptBanBox{width: 84%; padding-left: 0%; margin: 0 auto;}
	.sptBanBox1{margin-left: 0%;}
	.sptBanBox .sptBanA{width: 33%;padding-top:3%; margin-right: 0%;}
	.sptBanBox .sptBanA:hover,.sptBBbanner .BB,.sptTVbanner .TV,.sptMBbanner .MB,.sptATbanner .AT,.sptSCbanner .SC{background-size: 76%; background-position-x: 50%;background-position-y: 2.3%;}
	.sptTVbanner .TV{margin-bottom: -10%;}
	.sptBanBox .mSptIconRight{margin:0 8%;}
	.sptBanA img{width: 60%;}	
	/* Support Banner End*/
	
	/* Support Search Begin */
	.sptSearch .left,.sptSearch .right{width: 100%; float: none;}
	.sptSearch .left{padding: 12% 0 12% 0;}
	.sptSearch .right{padding-top: 12%; padding-bottom: 0;}
	.searchImg,.searchBar,.searchButton{line-height: 1.5; padding-top: 2%; padding-bottom: 2%;}
	.searchImg{width: 9%; margin-left: 5%; background-size: 60%; background-position-x: 50%;}	
	.searchBar{width: 65%;}
	.searchButton{width: 16%;}
	.serviceBox{margin-top: 1.5%; margin-left: 0;  margin-bottom: -2%; padding-left: 0%;}
	.serviceBox p{float: none; width: 100%; padding:32% 0 10% 0; border: none; border-bottom: 1px solid #b1b1b1;}
	.service1:hover,.service2:hover,.service3:hover,.service1,.service2,.service3{background-size: 20%;background-position-y: 33%;}
	/* Support Search End */
	
	/* Sharp Text Box Begin */	
	.foldBoxSpc1,.foldBoxSpc2{margin-top: -1%;}
    .foldBoxSpc1{margin-top:-2.5%; margin-bottom: 4%;}  	
    .foldBoxSpc1 .bubbleAngle{margin-top:0%;margin-left: 66%;}
	.foldBoxSpc2{margin-bottom: 4%;} 
	.foldBoxSpc2 .bubbleAngle{margin-left: 16.6%;}
	/* Sharp Text Box End */
	
	/* Basic Structural Begin*/
	.lineGray{border-bottom: 1px solid #e6e6e6;}	
	.bgMgn{padding-top: 9%; padding-bottom: 8%;}
	.noBgMgnbtm{padding-bottom: 0;}
	.searchMgnBtm{margin-bottom:4%;}
    .partAll{padding: 0 5.2%;} 
	ul.listNom,ul.listDot{margin-left: 6.5%;margin-top: 3%;}
	ul.listNom li{line-height: 1.61;}
	ul.listDot{margin-left: 6%;}
	ul.listDot li{width: 80%;}
	.titMgnTop{margin-top: 6%;}
	.Sharp{width: 5%;}
	.imgTitle{margin-top: 3%;}		
    .imgCnt{width: 100%; margin-top: 5%;}
	.imgCnt2{width: 100%; margin-top: 5%;}
	.imgCnt .imgTitle{margin-bottom: 5%;}
	.imgCnt img{width: 80%; margin:2% 4%;}
	.imgCnt2 img{ width: 90%; margin: 2% auto;}
	.imgAppExplain img{width: 93%;} 	
	.textNote{padding-left: 4.5%; background-size: 2.6%;background-position-y: 1.6%;}
	.QRcode p{width: 100%; padding:0 22.5% 0 16%; margin: 6% 0;}
	.QRcode p:first-child{margin-top: 8%;}
	.QRcode p:last-child{margin-bottom: 8%;}
	.QRcode p img:first-child{margin-bottom: 12%;}
	.QRcode p span{text-align: center; margin-top: 2%;}
	.appAPK{margin-left: 48.5%;margin-bottom: 5%;float: none; width: 100%;}
	.appAPK img{width: 3.2%;}
	.appNote{margin-bottom: 6%; width: 90%;}
	.sptSearch .left{background: none;
	background: -moz-linear-gradient(top, #ffffff 0%, #f5f5f5 100%);
    background: -webkit-gradient(linear, top, bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f5f5));
    background: -webkit-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f5f5f5 100%);}
	.imgBox img{margin: 8.5% 0;}
	.Btn{width: 50%; }
	/* Basic Structural End*/
    }	
	
@media (max-width:511px){
    .sptBanCon{margin-top: -6%; padding-bottom: 3%;}
	
}