*{margin:0;padding:0;list-style: none;text-decoration : none;font-family: "黑体", cursive, serif, sans-serif;}
.periphery{
	width: 100%;overflow: auto;
}

.header{
	width: 100%;overflow: auto
}
#pc-logo{
	width: 340px;height: 100px;
	float: left; 
}
#pc-logo img{width: 150px;margin:auto;display: block;margin-top: 6px}
.pc-nav{
	width: 60%;float: left;height: 100px;margin-left: 10%
}
.pc-nav li{width: 14%;float: left;font-size: 21px;text-align: center;height: 100%;line-height: 100px}
.pc-nav li a {color: #333}
.pc-nav-on{color: #c71d1d !important;font-weight: 900;}
.moblie-nav{width: 100%;padding:10px 0;overflow: auto;position: fixed;top:0;left:0;background: #fff;z-index: 99;display: none}
#moblie-logo{width: 90px;float: left;margin-left: 10px}
#moblie-nav{width: 40px;float: right;margin:10px 10px 0 0;cursor:pointer;}
.moblie-nav-con{width: 100%;background: #fff;position: fixed;top:7%;padding-bottom: 40px;display: none;z-index: 100}
.moblie-nav-con ul{width: 95%;margin:auto;overflow: auto}
.moblie-nav-con ul li{float: left;font-size: 16px;padding:0 5%;text-align: center;margin-top: 10px}
.moblie-nav-con ul li img{width: 45px;display: block;margin:auto;}
.moblie-nav-con ul li a{color: #333}
#moblie-nav-s{width: 40px;margin:auto;position: absolute;left:0;bottom:-10px;right: 0px;    cursor: pointer;}

.banner{width:100%;}
.banner img{width: 100%}

.contain{width: 70%;margin:auto;padding:40px 0;}
.contain ul{width: 100%;overflow: auto}
.contain ul li{width: 20%;float: left;color: #737373;text-align: center;padding:0 2.5%;cursor:pointer;}
.contain ul li img{width: 20%;display: block;margin:auto;}
.contain ul li h4{font-size: 22px;font-weight: 300;padding:10px 0 10px 0;}
.contain ul li p{font-size: 18px;}

.problem{width: 70%;margin:auto;padding:40px 0;}
#problem-title{font-size: 38px;text-align: center;color: #c71d1d;cursor:pointer;}
#problem-description{font-size: 22px;text-align: center;color: #737373;font-weight: 300;padding:15px 0;cursor:pointer;}
#problem-decorate{width: 100px;height: 6px;background: #f9a1a1;border-radius: 20px;margin:auto;cursor:pointer;}
.problem ul{width: 99%;padding-left: 1%;overflow: auto;margin:30px 0 0 0;}
.problem ul li{width: 33%;float: left;position: relative;cursor:pointer;}
.problem-st1 img,.problem-st2 img{width: 100%;display: block}
.problem-st1 p,.problem-st2 p{position: absolute;font-size: 24px;bottom:8%;left:0;text-align: center;color: #fff;right:0;}
.problem-st2 p{bottom:30%;color: #000}

.foryou{width: 100%;background: #F8F8F8;padding: 40px 0;}
.foryou ul{width: 70%;overflow: auto;margin:30px auto 0;}
.foryou ul li{width: 24%;float: left;margin-left: 1%;position: relative;margin-top: .5%;cursor:pointer;}
.foryou ul li img{width: 100%}
.foryou ul li p{font-size: 22px;position: absolute;left:0;right: 0;bottom:45%;text-align: center;color: #c71d1d}
.foryou ul li h6{
	font-size: 17px;font-weight: 300;position: absolute;left:0;right: 0;top:56%;text-align: center;color: #737373;width: 80%;margin:auto;
	line-height: 1.3
}

.renovate{width: 71%;margin:auto;padding:40px 0;}
.renovate ul{width: 100%;overflow: auto;margin:20px auto 0;}
.renovate ul li{width: 31%;margin-left: 2%;float: left;position: relative;margin-top:1.5%;}
.renovate ul li img{width: 100%}
.renovate ul li div{position: absolute;top:30%;left:34%;}
.renovate ul li div p{font-size: 22px;color: #1f2c5d;padding-right: 10px}
.renovate ul li div h6{font-size: 17px;font-weight: 300;color: #696969;line-height: 1.3;padding:6px 10px 0 0;}

.tutor{width: 70%;margin:auto;padding:40px 0;}
.tutor-con{width:85%;margin:auto;overflow: auto;position: relative;}
.tutor-con img{float: right;width: 30%;border-radius: 25px;}
.swiper-container-tutor{margin:5px 0 !important;}
.tutor-con div{	width:68%;float: left;padding-top:26px;cursor:pointer;}
.tutor-con div h2{font-size: 30px;font-weight: 300;padding:10px 0;}
.tutor-con div p{font-size: 21px;padding-bottom: 5px}
.tutor-con div h6{border-top:1px dashed#ccc;font-size: 15px;color: #737373;font-weight: 300;padding-top:10px;margin-top: 5px}
.tutor-con div a{font-size: 13px;color: red;border:1px solid#c71d1d;border-radius: 4px;position: absolute;bottom:7%;left:0;padding:3px 6px;color:#c71d1d;}
.container-title {    width: 85%;margin:auto;overflow: auto;margin-top: 40px;    overflow-y: hidden;overflow-x: auto;white-space: nowrap;height: 35px}
.container-title li{font-size: 17px; padding: 2px 15px;display: inline-block;float: left;padding-bottom: 10px;color:#333;cursor:pointer;font-weight: 900;border-bottom:2px solid#d2d2d2;}
.tutor-con-t-on{border-bottom:2px solid#c71d1d !important;color: #c71d1d !important; }
.tutor-l,.honor-l{background-image: url(../image/tutor-l.png) !important;width:40px !important;height: 40px !important;    background-size: 100%  !important; }
.tutor-r,.honor-r{background-image: url(../image/tutor-r.png) !important;width:40px !important;height: 40px !important;    background-size: 100%  !important; }
.tutor-con div h2 span {display: initial;padding: 4px 15px;font-size: 16px;color: #fff;background: #c71d1d;border-radius: 10px 2px 10px 2px;float: right;font-weight: 700;}

.honor{width: 100%;background: #F8F8F8;padding:40px 0;}
.swiper-container-honor{width: 65%;margin:30px auto 0 !important;}
.honor-con{position: relative;margin:0 10px;padding-bottom: 30px;cursor:pointer;}
.honor-con img{width: 100%}
.honor-con p{position: absolute;bottom:0;left:0;right:0;font-size: 21px;color: #fff;background: #c71d1d;text-align: center;padding:10px 0;}

.ar-choice{width: 100%;padding-bottom: 20px;background: #f0f0f0;background-image: url(../image/ar-choice.png);background-size: 100% 100%;margin-top: -2px;display:none}
.ar-choice-title h3{color: #fff;font-size: 24px;text-align: center;font-weight: 900;margin: 0;line-height: 1.2;padding: 41px 0 0 0}
.ar-choice-title span{font-size: 17px;color: #fff;font-weight: 900;}
.ar-choice ul{width: 92%;overflow: auto;margin: auto;padding: 30px 0 0 0;}
.ar-choice ul li{width: 48%;float: left;border-radius: 6px;border: 1px solid#f0f0f0;}
.ar-choice ul li h4{font-size: 26px;width: 100%;height: 55px;background: #5363a1;margin: 0;text-align: center;border-top-left-radius: 6px;border-top-right-radius: 6px;line-height: 55px;color: #fff;font-weight: 100}
.ar-choice ul li p{font-size: 17px;width: 90%;height: 60px;border-bottom: 1px dashed#8d8d8d;    padding: 10% 5%;}
.ar-choice ul li:nth-child(2){margin-left: 2%}
.ar-choice-bottom{border-bottom: 0 !important;}
.ar-choice-else h4{background: #cdcdcd !important;}
.ar-choice-else p{color: #a9a9a9;} 

.ar-process{width: 100%;padding-bottom: 20px;background: #f0f0f0;background-image: url(../image/ar-process-01.png);background-size: 100% 100%; background-repeat:no-repeat;display:none}
.ar-process-title h3{color: #fff;font-size: 26px;text-align: center;font-weight: 900;margin: 0;line-height: 1.3;padding: 30px 0 0 0;margin-top: 5px}
.ar-process-title h5{color: #fff;font-size: 17px;text-align: center;font-weight: 900;margin: 0;line-height: 1.3;padding: 0 0 12px 0}
.ar-process ul{width: 98%;overflow: auto;padding: 16px 0 8px 0;margin: auto;}
.ar-process ul li{width: 50%;float: left;position: relative}
.ar-process ul li img{width: 100%}
.ar-process ul li div{width: 100%;position: absolute;top: 36%;left: 0;right: 0;margin: auto;}
.ar-process ul li div h3{text-align: center;font-weight: 900;font-size: 20px;padding: 0 10%;color: #fe4a60;margin-bottom: 4px}
.ar-process ul li div p{text-align: center;font-size: 16px;padding: 0 6%;    line-height: 1.3;color: #a9a9a9;}

.serve{width: 70%;margin:auto;padding:40px 0;}
.serve img{width: 100%;margin-top: 20px}
.serve-flow{width: 100%;overflow: auto}
.serve-flow li{float: left;    width: 14.28%;font-size: 18px;color: #737373;text-align: center;cursor:pointer;}
.serve-con{width: 100%;overflow: auto;margin-top: 20px}
.serve-con li{cursor:pointer;width: 32%;float: left;height: 120px;background-image: url(../image/serve-02.png);background-size: 100%;text-align: center;color:#c71d1d;margin-right: 1%}
.serve-con li h4{font-size: 20px;padding:9% 0 6% 0;}
.serve-con li p{font-size: 16px;}

.promise{width: 70%;margin:auto;padding:40px 0;}
.promise ul{width: 100%;overflow: auto;margin-top: 20px}
.promise li{cursor:pointer;width: 48%;float: left;background-image: url(../image/promise-01.png);background-size: 100% 100%;height: 164px;color: #fff;margin-right: 2%;margin-top: 1.5%}
.promise li h3{font-size: 23px;padding:8% 0 1% 24%;}
.promise li p{font-size: 21px;padding-left: 24%;}
.promise li:nth-child(2){background-image: url(../image/promise-02.png);}
.promise li:nth-child(3){background-image: url(../image/promise-03.png);}
.promise li:nth-child(4){background-image: url(../image/promise-04.png);}

.information{width: 100%;background: #F8F8F8;padding:40px 0;}
.information-con{width: 70%;background: #fff;border-radius: 6px;margin:20px auto;overflow: auto;padding:0 0 10px 0;}
.swiper-container-information{width: 45%;float: left;    margin: 1% 0 0 1% !important; }
.information-img{width: 100%}
.information-img img{width: 100%}
.information-img p{text-align: center;font-size: 16px;}
.swiper-pagination-information{bottom:18px !important;}
.swiper-pagination-bullet-active {background: #c71d1d !important;}
.information-article{width: 51%;float: right;padding-right: 2%;}
.information-article li{width: 100%;overflow: auto;margin-top: 2.5%}
.information-article li img{width: 28%;float: left;border-radius: 4px;margin-right: 10px}
.information-article li h4{font-size: 21px;padding:10px 0 6px 0;color: #000;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.information-article li p{font-size: 17px;color: #737373;overflow:hidden;  text-overflow:ellipsis;  white-space: normal;  display:-webkit-box;  -webkit-box-orient:vertical;  -webkit-line-clamp:2;}

.xfcase{width: 100%;background: #F8F8F8;padding:20px 0 40px 0;}
.xfcase-con{width: 70%;margin:20px auto;overflow: auto;}
.swiper-container-xfcase div div img{width:100%}
.swiper-pagination-xfcase{bottom:18px !important;}




.speedy {width: 60px;position: fixed;top:30%;right: .5%;display: none;z-index: 99}
.speedy li{width: 40px;background: #fff;border-radius: 5px;padding:10px;margin-bottom: 5px;cursor:pointer;}
.speedy li img{width: 100%;display: block}

.footer{width: 100%;background: #2c445c;padding:40px 0 10px 0;overflow: auto}
.footer-con{width: 60%;margin:auto;overflow: auto;}
#footer-logo{width: 130px;float: left}
.footer-nav{width: 40%;margin:auto;padding-top: 10px;}
.footer-nav li{width: 33%;float: left;}
.footer-nav li h4{font-size: 18px;font-weight: 300;color: #fff}
.footer-nav li p{font-size: 15px;padding-top: 6px;color: #ccc}
.footer-code{float: right}
.footer-code li{float: left;margin-left: 12px;cursor:pointer;}
.footer-code li img{width: 77px}
.footer-code li p{font-size: 17px;color: #fff;text-align: center;padding-top: 2px}
.copyright{font-size: 13px;text-align: center;color: #fff;margin-top: 20px}
.copyright a{color: #fff}






@media(min-width: 2000px){
	#periphery{width: 1920px;margin:auto;}
}
@media(max-width: 1515px){
	.honor-con p {font-size: 19px;}
	.container-title {width: 100%;}
}
@media(max-width: 1384px){
	.pc-nav {width:65%;margin-left: 0%;}
	.pc-nav li {font-size: 19px;}
	.honor-con p {font-size: 16px;}
	.contain {width: 85%;}
	.problem {width: 85%}
	.foryou ul {width: 85%;}
	.renovate {width: 85%}
	.tutor {width: 85%;}
	.swiper-container-honor {width: 80%}
	.serve {width: 85%}
	.promise {width: 85%;}
	.information-con {width: 85%;}
	.footer-con {width: 74%;margin: auto;overflow: auto}
	.footer-code li p {font-size: 15px;}
}
@media(max-width: 1202px){
	.contain ul li h4 {font-size: 21px;}
	.contain ul li p {font-size: 17px;}
	#problem-title {font-size: 32px;}
	#problem-description {font-size: 21px;}
	.problem-st1 p, .problem-st2 p {font-size: 21px;}
	.foryou ul li p {font-size: 21px;}
	.foryou ul li h6 {font-size: 15px;}
	.renovate ul li div p {font-size: 21px;}
	.renovate ul li div h6 {font-size: 16px;}
	.promise li h3 {font-size: 21px;padding: 10% 0 1% 24%;}
	.promise li p {font-size: 18px;}
	.information-article li h4 {font-size: 19px;}
	.information-article li p {font-size: 15px;}
}
@media(max-width: 1080px){
	#pc-logo,.pc-nav{display: none}
	.moblie-nav{display: block}
	.banner{margin-top: 70px}
	.promise li {height: 134px;}
	.contain {width: 90%;}
	.problem {width: 90%}
	.foryou ul {width: 90%;}
	.renovate {width: 90%}
	.tutor {width: 90%;}
	.swiper-container-honor {width: 90%}
	.serve {width: 90%}
	.promise {width: 90%;}
	.information-con {width: 90%;}
	.footer-con {width: 90%;margin: auto;overflow: auto}
	.tutor-con div a {bottom: 2%;}
}
@media(max-width: 870px){
	.contain {width: 90%;}
	.contain ul li {width: 44%;margin-bottom: 15px}
	.problem-st1 p, .problem-st2 p {font-size: 16px;}
	.foryou ul {width: 90%;}
	.foryou ul li {width: 32%;}
	.renovate ul li {width: 47%;}
	.tutor-con {width: 100%;}
	.tutor-l,.tutor-r,.honor-l,.honor-r{display: none}
	.container-title {height: 26px;}
	.container-title li {font-size: 16px;padding: 2px 2%;}
	.honor-con p {font-size: 14px;}
	.serve-con li h4 {font-size: 20px;padding: 6% 0;}
	.promise li {height: 120px;}
	.promise li h3 {font-size: 19px;}
	.promise li p {font-size: 16px;}
	.information-con {width: 90%;padding:0 2%;}
	.swiper-container-information {width: 100%;margin:2% 0 0 0% !important}
	.information-article {width: 98%;margin-top: 15px}
	.footer-nav {width: 50%;}
	.xfcase-con{width: 94%;margin:20px auto;overflow: auto;}
	.serve{display:none}
	.ar-choice{display:block}
	.ar-process{display:block}
}
@media(max-width: 770px){
	.tutor-con div h2 {font-size: 23px;}
	.tutor-con div p {font-size: 17px;}
	.container-title li {padding: 2px 2.1%;}
	.tutor-con div {padding-top: 8px;}
	.honor-con p {font-size: 13px;}
	.serve-flow li {font-size: 15px;}
	.serve-con li h4 {font-size: 18px;padding: 13% 0;}
	.serve-con li p {font-size: 15px;}
	.serve-con li p {font-size: 15px;}
	.serve-con li {background-size: 100% 100%;}
	.promise li {height: 110px;}
	#problem-title {font-size: 28px;}
	#problem-description {font-size: 18px;}
	.renovate ul li div p {font-size: 19px;}
	.contain ul li h4 {font-size: 19px;    padding: 10px 0 2px 0;}
	.contain ul li p {font-size: 16px;}
	.honor-con {margin: 0 4px;}
	.footer-nav li h4 {font-size: 16px;}
	.footer-nav li p {font-size: 14px;}
	.information-article li h4 {font-size: 17px;}
	.footer-nav{overflow: auto;padding-top:0;float: left;margin-left: 3%}
	.foryou ul li p {font-size: 19px;}
}
@media(max-width: 650px){ 
	.contain {width: 98%;padding: 26px 0;}
	.problem {width: 98%;padding: 26px 0;}
	#problem-title {font-size: 24px;}
	#problem-description {font-size: 16px;padding: 10px 0;}
	#problem-decorate {height: 4px;}
	.foryou ul li p {font-size: 16px;}
	.foryou ul li h6 {font-size: 13px;}
	.foryou ul {margin: 15px auto 0;width: 98%;}
	.renovate {width: 98%;}
	.renovate ul li div p {font-size: 17px;}
	.renovate ul li div h6 {font-size: 15px;}
	.tutor {width: 95%;padding: 20px 0;}
	.container-title {display: none}
	.tutor-con div a {display: none}
	.swiper-container-honor {width: 100%;}
	.serve-flow li {font-size: 13px;}
	.promise {width: 95%;padding: 20px 0;}
	.promise li {height: 90px;}
	.promise li h3 {font-size: 18px;padding: 6% 0 1% 24%;}
	.promise li p {font-size: 14px;}
	.information {padding: 20px 0;}
	.footer-con {width: 97%;}
}
@media(max-width: 500px){
	.tutor-con div h2 span {display: initial;padding: 2px 15px;font-size: 14px;color: #fff;background: #c71d1d;border-radius: 10px 2px 10px 2px;float: right;font-weight: 300;}
	#moblie-nav {width: 33px;}
	.contain {padding: 18px 0;}
	.contain ul li h4 {font-size: 16px;}
	.contain ul li p {font-size: 14px;}
	.problem {padding: 0px 0;width: 100%;}
	.problem ul {margin: 15px 0 0 0;width: 100%;padding-left: 0}
	.problem ul li {width: 50%;    height: 145px;}
	.problem-st1 img, .problem-st2 img {height: 100%}
	.foryou {padding: 20px 0;}
	.foryou ul li {width: 48.5%;}
	.foryou ul li p {font-size: 18px;}
	.foryou ul li h6 {font-size: 14px;}
	.renovate {padding: 20px 0;}
	.renovate ul li div {top: 20%;}
	.tutor-con div h6{display: none}
	.honor {padding: 20px 0;}
	.promise li {height: 79px;}
	.footer-code {margin: 2% 0 0 24%;float: none}
	.footer-code li img {width: 100px;}
	.speedy li {width: 28px;}
	.information-article li h4 {padding: 5px 0 6px 0;}
	.footer-con {display: none}
	#footer-logo {display: none}
	.footer-nav {display: none}
	.swiper-container-honor {margin: 15px auto 0 !important;}
	.honor-con p {font-size: 17px;}
	.moblie-nav-con ul li {font-size: 14px;width: 23%;}
	#moblie-nav-s {width: 24px;bottom: 6px;}
	.footer{padding:10px 0;}
	.copyright{margin-top: 0}
	.serve img {display: none}
	.serve-flow {display: none}
	.serve-con li {width: 49%;margin-top: 5px}
	.serve {padding: 20px 0;}
	.copyright{display:block}
	.tutor-con div p {padding-bottom: 0px;}
	.tutor-con div h2 {padding: 0 0 5px 0;}
	.serve-con li h4 {padding: 16% 0 8% 0;}
}
@media(max-width: 480px){
	.renovate ul {margin: 10px auto 0;width: 70%;margin:10px auto 0;}
	.renovate ul li {width: 100%;margin-left: 0}
	.renovate ul li div {top: 25%;}
	.renovate ul li div p {font-size: 21px;}
	.renovate ul li div h6 {font-size: 17px;}
	.promise ul {width: 70%;margin: 10px auto 0;}
	.promise li {width: 100%;height: 86px;margin-right: 0}
	.promise li p {font-size: 16px;}
}
@media(max-width: 420px){
	.information-img p {font-size: 13px;}
	.information-article li p {font-size: 14px;}
	.information-article li h4 {padding: 2px 0 4px 0;font-size: 16px}
	.promise li h3 {font-size: 17px;padding: 8% 0 1% 24%;}
	.promise li p {font-size: 14px;}
	#problem-title {font-size: 21px;}
	#problem-description {font-size: 15px;}
	.promise ul {width: 80%;}
	.promise li {height: 90px;}
	.tutor-con div h2 {font-size: 21px;}
	.tutor-con div p {font-size: 16px;}
	.renovate ul {width: 80%;}
	.renovate ul li div {top: 28%;}
	.problem-st1 p, .problem-st2 p {font-size: 15px;}
}
@media(max-width: 390px){
	.foryou ul li p {font-size: 17px;bottom: 43%;}
	.foryou ul li h6 {font-size: 13px;top: 59%;}
	.tutor-con div h2 {font-size: 20px;}
	.tutor-con div p {font-size: 14px;}
	.honor-con p {font-size: 16px;}
	.promise ul {width: 90%;}
}