@font-face { font-family: 'poppinsbold'; src: url('../fonts/poppins-bold1.woff2') format('woff2'), url('../fonts/poppins-bold1.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'poppinssemibold';  src: url('../fonts/poppins-semibold1.woff2') format('woff2'), url('../fonts/poppins-semibold1.woff') format('woff');  font-weight: normal;  font-style: normal;}
@font-face { font-family: 'poppinsregular';   src: url('../fonts/poppins-regular1.woff2') format('woff2'), url('../fonts/poppins-regular1.woff') format('woff'); font-weight: normal;  font-style: normal;}

@font-face {font-family: 'poppinsmedium';  src: url('../fonts/poppins-medium1-webfont.woff2') format('woff2'), url('../fonts/poppins-medium1-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}

@font-face {font-family: 'poppinslight';  src: url('../fonts/poppins-light1-webfont.woff2') format('woff2'), url('../fonts/poppins-light1-webfont.woff') format('woff');  font-weight: normal;  font-style: normal; }
 
*,
*::before,
*::after {
  box-sizing: border-box;
}

.text-center{ text-align: center; }


body{ font-size: 16px; line-height:28px; font-family: 'poppinsregular'; padding-bottom: 10px; color: #616368 }
* {list-style:none; margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
li{display:list-item; border:0; margin:0; padding:0;}
::selection{background:#a4a4a4; color:#fff}
img{ padding: 0; margin:0; line-height: 0 }
a{ color: #1436b7; text-decoration: none;  transition:all 0.2s ease-in 0s; cursor: pointer; }
a:hover, a:focus{ color: #00aeef; text-decoration: none; outline: none}
h1,h2,h3,h4,h5,h6{margin:0;padding:0 0 10px;letter-spacing:0;font-weight:normal;line-height:normal;text-transform:none; font-family: 'poppinsbold'; color: #242f51}
li{list-style: none; padding: 0; margin: 0;}
.container{ max-width:1200px; padding: 0 15px; margin:0 auto; width: 100%; clear: both; }

.wrapper{ width: 100%; clear: both; float: left; background:url(../images/main_bg.png) top left no-repeat; background-size:cover; }
.header{ width: 100%; background: #fff; padding:40px 0 10px; clear: both; float: left; }
.header .header-logo{ width: 100%; clear: both; float: left; }
.section-banner{ width: 100%; clear: both; padding:90px 0 250px; float: left; }
.section-banner .banner-middle{ width: 100%; float: left; clear: both; position:relative;}
.section-banner .left-content{ padding:85px 15px 15px 0px; width: 60%; float: left; position: relative; z-index: 1; }
.section-banner .left-content h2{ font-size: 42px; line-height: 60px; }
.section-banner .left-content .banner-desc, .section-enter .right-content .content-desc{ font-size: 22px; line-height: 36px; color: #242f51; font-family: 'poppinssemibold'; }
.section-banner .left-content .bannet-text, .section-enter .right-content .content-text{ width: 100%; float: left; padding-left:50px; padding-bottom: 25px; }
.section-banner .left-content .banner-desc span, .section-enter .right-content .content-desc span{ color: #1436b7 }
.section-banner .left-content .banner-desc span.strike, .section-enter .right-content .content-desc span.strike{ position: relative; color: #242f51; display: inline-block;}
.section-banner .left-content .banner-desc span.strike:before, .section-enter .right-content .content-desc span.strike:before{ position: absolute; content: '';border: 1px solid #ef1a2e; left: 0; right: 0; top:50%;  width: 100%; }
.section-banner .left-content .banner-btn, .section-enter .right-content .content-btn{ font-size: 16px; font-family: 'poppinsbold'; color: #fff; background: #1436b7; border-radius:40px; min-width: 190px; line-height: 57px; text-align: center; display: inline-block; }
.section-banner .left-content .banner-btn:hover, .section-enter .right-content .content-btn:hover{  background: #00aeef}
.section-banner .right-img{ padding: 15px 0px 15px 15px; width: 70%; float:right; position: absolute; right:-14.8%; top: 0 }
.section-banner .right-img img{ width: 100% }

.section-content{ width: 100%; float: left; padding:75px 0; background: #eef7fb; text-align: center; }
.section-content .center-text{ font-size: 17px; line-height:36px; color: #38393c; padding-bottom: 0px;  }
.section-content .center-text span{font-family: 'poppinsmedium';}

.section-upgrade{ width: 100%; clear: both; float: left; padding:70px 0 60px }
.section-upgrade .main-title{ width: 100%; clear: both; text-align: center; float: left; padding-bottom: 40px; }
.section-upgrade .main-title h2.center-title{ font-size: 36px; line-height: 46px; font-family: 'poppinsregular'; }
.section-upgrade .main-title h2.center-title span{ color: #1436b7; font-family: 'poppinssemibold'; display: block; }
.section-upgrade .row{ margin: 0 -15px; }
.section-upgrade .left-contant{ width: 43%; padding: 15px; float:left; }
.section-upgrade .left-contant ul{ padding: 0; margin: 0 }
.section-upgrade .left-contant ul li{ position: relative; font-size: 16px; color: #242f51; font-family: 'poppinsmedium'; padding:5px 0 19px 55px; }
.section-upgrade .left-contant ul li .icon{ width: 40px; height: 40px; text-align: center; position: absolute; left: 0; top: 0; border-radius: 100%; background: #e7ebf8; line-height: 46px; }
.section-upgrade .left-contant ul li.upgrade_info .icon{ line-height: 53px; }
.section-upgrade .left-contant ul li.upgrade_info.ac .icon{ line-height: 55px; }
.section-upgrade .left-contant ul li span{font-family: 'poppinsregular'; font-size: 13px;}
.section-upgrade .right-img{ width:57%; padding: 15px; float: right; }
.section-upgrade .right-img img{ width: 100% }

.section-plan{ width: 100%; clear: both; float:left; background: url(../images/plan_bg.png) left top no-repeat;}
.section-plan .plan-info{ width: 100%; clear: both; max-width:1661px; margin: 0 auto; padding: 100px 0; border-top:2px solid #f4f4f4; display: -webkit-box; }
.section-plan .container{ max-width: 1070px; }
.section-plan .plan-box{ width: 50%; float: left; padding: 0 15px; }
.section-plan .plan-box .box-info{padding: 0 80px; width: 100%; position: relative;}
.section-plan .plan-box.upgrade-box .box-info{ padding-right: 40px; }
.section-plan .plan-box .box-info:before{ position: absolute; content: ''; border-width: 1px; border-style: dashed; border-color: #d2d4db; top:40%; width: 100%; left: 60% } 
.section-plan .plan-box .box-info:after{ position: absolute; content: ''; background:#00adee url(../images/chevron_right.png) center center no-repeat; border-radius: 100%; width: 51px; height: 51px; line-height: 55px; text-align: center; display: block; right: 0; top:34.5%; left: 96%; }
.section-plan .plan-box .box-top{ width: 100%; background: #242f51; border-radius: 9px 9px 12px 12px; padding:23px 0 0 0; text-align: center; margin-bottom: 35px; max-width: 317px; position: relative; z-index: 1; display: table;  }

.section-plan .plan-box:last-child .box-info:before, .section-plan .plan-box:last-child .box-info:after{display: none;}
.section-plan .plan-box.upgrade-box .box-top{background: #1436b7;}
.section-plan .plan-box .box-top .plan-title{ font-size:19px; color: #fff; padding: 0 10px 20px }
.section-plan .plan-box .box-top .box-center{width: 100%; border-radius: 9px; padding:88px 20px 86px; background: #fff; box-shadow: 0 20px 20px 0 rgba(144,163,177,0.18); min-height: 211px; display: table;}
.section-plan .plan-box .box-top .box-center .price{ font-size: 50px; font-family: 'poppinssemibold'; display: inline-block; padding-bottom:5px }
.section-plan .plan-box .box-top .box-center span{ font-size: 18px; color: #a4a6b1; display: inline-block; padding-left:10px; position: relative; top:-5px }
.section-plan .plan-box.upgrade-box .box-top .box-center .price{ color: #1436b7}
.section-plan .plan-box .box-top .box-center .plan-text{ font-size:40px; color: #242f51; font-family: 'poppinssemibold'; padding-bottom: 0px; display: table-cell;vertical-align: middle;}
.section-plan .plan-box.upgrade-box .box-top .box-center .plan-text{ color: #1436b7 }
.section-plan .plan-box .box-info ul.box-point{ padding:0 0 0 15px; margin: 0 }
.section-plan .plan-box .box-info ul.box-point li, .section-faq .sec-contant .faq-info ul li{ position: relative; font-size:16px;  color: #666c7f; padding-bottom: 15px;padding-left:13px; }
.section-plan .plan-box .box-info ul.box-point li span, .section-faq .sec-contant .faq-info ul li span{ font-size: 12px; }
.section-plan .plan-box .box-info ul.box-point li:before, .section-faq .sec-contant .faq-info ul li:before{ position: absolute; content: ''; background: #1436b7; width:4px; height: 4px; border-radius: 100%; left: 0; top:11px; }

.section-pay{ width: 100%; clear: both; float: left; padding: 90px 0 80px; background: #f6fbfd url(../images/upgrage_bg.png) left top no-repeat; }
.section-pay .container{ max-width: 1020px }
.section-pay .pay-title{ width: 100%; text-align: center; clear: both; padding-bottom:30px; }
.section-pay .pay-title h2.center-title{ font-size: 24px; font-family: 'poppinssemibold'; }
.section-pay .pay-box{ width:25%; float: left; padding: 15px; text-align: center; color: #636a7e; line-height: 22px; position: relative; }
.section-pay .pay-box:before{ position:absolute; content: ''; border-width: 1px; border-style: solid; border-color:#00adee;width: 100%; left:50%; top:55px}
.section-pay .pay-box:last-child:before{ display:none; }
.section-pay .pay-box .price-box{ width: 78px; height: 78px; border-radius: 100%; background: #00adee; text-align: center; display: inline-block; margin-bottom: 15px; position: relative; }
.section-pay .pay-box .price-box h3{ font-size: 24px; color: #fff; padding-bottom: 0px; line-height:78px; }

.section-faq{ width: 100%; clear: both; padding:80px 0; float: left; }
.section-faq .sec-faq-title{ width: 100%; clear: both; padding-bottom:30px; text-align: center; }
.section-faq .sec-faq-title h2.center-title{ font-size: 36px; font-family: 'poppinssemibold'; line-height: 58px; }
.section-faq .row{ margin: 0 -15px }
.section-faq .sec-contant{ width: 50%; padding: 0 15px; float: left; }
.section-faq .sec-contant.left .contant-info{ width: 100%; padding-right:52px; position: relative; }

.section-faq .sec-contant.right .contant-info{ width: 100%; padding-left:32px }
.section-faq .sec-contant .faq-info{ width: 100%; padding: 30px 0; position: relative; }
.section-faq .sec-contant .faq-info:before, .section-faq .sec-contant.left .contant-info:before{ position: absolute; content: ''; border:1px solid #f7f7f7; left: 0; bottom: 0; width:85%; }
.section-faq .sec-contant.left .contant-info:before{ width:auto; height:87%; right: 0; left: auto; top:7%; bottom: auto; }
.section-faq .sec-contant.left .faq-info:last-child:before, .section-faq .sec-contant.right .faq-info:last-child:before{ display: none; }
.section-faq .sec-contant .faq-info .faq-title{ font-size: 20px; line-height: 28px; font-family: 'poppinsmedium'; padding-bottom:8px }
.section-faq .sec-contant .faq-info ul{ padding: 0; margin: 0 }
 .section-faq .sec-contant .faq-info ul li{ padding-bottom: 4px; font-size: 15px; line-height: 22px; }
 .section-faq .sec-contant .faq-info ul li span{ font-size: 13px; }
 .section-faq .sec-contant .faq-info .link{ color: #00adee; font-family: 'poppinsmedium'; }
 .section-faq .sec-contant .faq-info .link_price{ text-decoration: underline; }
 .section-faq .sec-contant .faq-info .link:hover{ color: #1436b7 }
 .section-faq .sec-contant .faq-info ul li:before{top: 8px}

.section-enter{ width: 100%; float: left; padding:80px 0 30px; background: #f6fbfd }
.section-enter .row{ margin: 0 -15px; }
.section-enter .left-img{ width: 53%; float: left; padding:15px; }
.section-enter .left-img img{ width: 100% }
.section-enter .right-content{ width:40%; float: right; padding: 75px 15px }

.sec-footer{ width: 100%; float: left; background: #09142e; padding:50px 0 40px }
.sec-footer .footer-logo{ float: left; }
.sec-footer .right-text{ float:right; }
.sec-footer .right-text .copyright{ font-size: 14px; color: #616571 }


@media only screen and (max-width:1700px){
.section-plan .plan-info{ max-width: 1400px }
}

@media only screen and (max-width:1560px){
.section-banner .right-img{width: 65%; right: -5.8%;}
.section-plan .plan-info{ max-width: 1200px }
}

@media only screen and (max-width:1350px){
.section-banner{padding: 50px 0 120px;}
.section-banner .right-img {width: 58%; right: 0px }
.section-plan .plan-info{ max-width:1000px }
}

@media only screen and (max-width:1199px){
.section-banner .left-content h2 { font-size: 38px;}
.section-enter .right-content {width: 46%;}
.section-faq .sec-contant.right .contant-info{ padding-left: 22px }
}

@media only screen and (max-width:991px){
.container, .section-plan .container, .section-pay .container{ max-width:768px;}
.section-banner .left-content{ width: 100%; padding-top: 25px }
.section-banner .right-img{ width: 100%; position: relative; padding-left: 0px; text-align: center; }
.section-banner { padding: 50px 0 40px;}
.section-upgrade .left-contant{ width: 100% }
.section-upgrade .right-img{ width: 100%; text-align: center; }
.section-upgrade{ padding-bottom: 20px }
.section-plan .plan-box .box-info {padding: 0 35px;}
.section-plan .plan-box.upgrade-box .box-info{ padding-right: 20px }
.section-enter .left-img, .section-enter .right-content{ width: 100% }
.section-enter .right-content{ padding-top: 15px }
.section-faq .sec-contant.left .contant-info{ padding-right: 20px }
.section-faq .sec-contant.right .contant-info{ padding-left:0px }
.section-plan .plan-info{ max-width:768px }
.section-plan .plan-box .box-info::after{left: 97%}
}

@media only screen and (max-width:767px){
.section-banner .left-content h2 { font-size: 34px;}
.section-banner {padding: 20px 0 40px;}
.section-plan .plan-box .box-info{ padding: 0 20px }
.section-plan .plan-box .box-info:after{ width: 34px; height: 34px; top: 38%; left: 99% }
.section-plan .plan-info { padding:80px 0 }
.section-plan .plan-box .box-top .box-center{ padding-left:11px; padding-right: 11px}
.section-pay .pay-title h2.center-title { font-size: 21px;}
.section-faq .sec-contant{ width: 100% }
.section-faq .sec-contant.left .contant-info:before{ display: none; }
.section-faq .sec-contant.left .faq-info:last-child:before{ display: block !important }
.section-faq .sec-faq-title { padding-bottom: 10px }
.section-plan .plan-box .box-info::after{top: 36.3%;}

}


@media only screen and (max-width:599px){
.container{ padding:0 25px }
.section-banner {padding: 20px 0 20px;}
.section-content { padding: 50px 0;}
.section-upgrade .main-title h2.center-title {font-size: 28px; line-height: 42px;}
.section-upgrade .main-title { padding-bottom: 10px; }
.section-plan .plan-box{ width: 100% }
.section-plan .plan-box:last-child{ padding-top: 30px; }
.section-plan .plan-box .box-info:before, .section-plan .plan-box .box-info:after, .section-pay .pay-box:before{ display: none; }
.section-pay .pay-title h2.center-title br{ display: none; }
.section-pay .pay-box{ width: 50% }
.section-faq .sec-faq-title h2.center-title { font-size: 28px;}
.section-faq{ padding: 40px 0 30px }
.section-enter{ padding-bottom: 0px; padding-top: 50px; }
.section-enter .right-content{ padding-bottom: 60px }
.sec-footer .footer-logo, .sec-footer .right-text{ float: none; text-align: center; }
.section-pay{padding: 60px 0 40px;}
.section-faq .sec-faq-title h2.center-title, .section-faq .sec-faq-title{ padding-bottom: 0px; }
.section-plan .plan-info { padding: 60px 0 40px;}
.section-upgrade{padding: 50px 0 10px}
.section-banner .left-content h2 {font-size: 28px; line-height: 40px;}
.section-faq .sec-contant.right .contant-info{ padding-left: 0px; }
.section-plan .plan-box .box-info{max-width: 356px; margin: 0 auto}
.section-plan .plan-box .box-info ul.box-point{ padding-left: 0 }
}

@media only screen and (max-width:479px){
.section-banner .left-content h2 { font-size: 25px; line-height: 34px;}
.section-banner .left-content .banner-desc, .section-enter .right-content .content-desc {font-size: 20px;  line-height: 30px; }
.section-banner .left-content .bannet-text, .section-enter .right-content .content-text{ padding-left: 20px; }
.section-upgrade .main-title h2.center-title { font-size:19px; line-height: 32px; }
.section-pay { padding: 40px 0 40px;}
.section-faq .sec-faq-title h2.center-title{ line-height: 40px;}
.section-faq .sec-contant .faq-info .faq-title { font-size: 18px; line-height: 25px;}
.sec-footer{padding: 34px 0 30px;}
.section-pay .pay-box{ width: 100% }

.section-plan .plan-box .box-top .box-center .plan-text{ font-size: 36px; }

}

@media only screen and (max-width:350px){
.section-plan .plan-box.upgrade-box .box-info{ padding-right: 0px; }
.section-plan .plan-box, .section-plan .plan-box .box-info{ padding:0; }


}