@charset "utf-8";
/*============================ 初始化样式 ============================*/
*{margin:0; padding:0;}
body {color: #333;font-size: 14px;font-family: Microsoft Yahei,Arial;overflow-x: hidden;min-width: 1300px;}
a{text-decoration: none;outline: none;color: #333}
a:hover,a:focus {text-decoration: none;outline: none}
a:hover{color: #d8251e}
li{list-style: none}
h1,h2,h3,h4,h5,h6,img,ul,li,a,span,p,i,strong,b,em,form,input,label,div,body,html,blockquote,dd,dl,figure,pre{margin: 0;padding: 0}
.clear{clear:both;}
.fl{float: left}
.fr{float: right}
.container{width: 1300px;margin: 0 auto}
.text-cut{overflow: hidden;white-space: nowrap;text-overflow: ellipsis}


/*============================ 首页 ============================*/
header{}
.logo{margin-top: 33px}
nav{margin-left: 310px;line-height: 135px;}
nav ul li{float: left;margin-right: 60px;}
nav ul li a{color: #fff;font-size: 18px}
header .tel{font-size: 20px;color: #fff;background: url("../images/tel.png") no-repeat left;padding-left: 35px;line-height: 135px;}

.banner{height: 796px;}
.banner_nav{overflow: hidden}
.banner_nav ul li{float: left;line-height: 2.2;color: #fff;box-sizing: border-box}
.banner_nav ul li a{color: #fff}
.banner_nav ul li:nth-child(1){width: 30%;height: 547px;background: rgba(234,42,89,0.8);padding: 80px 45px;}
.banner_nav ul li h3{font-size: 30px;;font-weight: normal;}
.banner_nav ul li:nth-child(2){width: 49%;height: 271px;background: rgba(62,77,165,0.8);padding: 45px;margin: 0 5px}
.banner_nav ul li:nth-child(3){width: 20%;height: 271px;background: rgba(237,144,29,0.8);padding: 45px;}
.banner_nav ul li:nth-child(4){width: 20%;height: 271px;background: rgba(13,143,81,0.8);padding: 45px;margin: 5px 5px 0 5px;}
.banner_nav ul li:nth-child(5){width: 49%;height: 271px;background: rgba(29,115,222,0.8);padding: 45px;margin-top: 5px}
.banner_nav ul li:nth-child(1):hover{background: rgba(234,42,89,1);}
.banner_nav ul li:nth-child(2):hover{background: rgba(62,77,165,1);}
.banner_nav ul li:nth-child(3):hover{background: rgba(237,144,29,1);}
.banner_nav ul li:nth-child(4):hover{background: rgba(13,143,81,1);}
.banner_nav ul li:nth-child(5):hover{background: rgba(29,115,222,1);}

.banner_new{line-height: 53px;background: rgba(0,0,0,0.5);height: 53px;overflow: hidden;margin-top: 60px}
.banner_new ul li{float: left;margin: 0 20px}
.banner_new ul li a{color: #fff;opacity: 0.8}
.banner_new .more{float: right;color: #fff;opacity: 0.8;margin-right: 20px}

.title{text-align: center;margin-top: 50px}
.title h2{font-size: 32px;color: #000;font-weight: normal}
.title p{color: #757575;font-size: 16px;margin-top: 10px}

.oneA{background-color: #f3efec;overflow: hidden;padding-bottom: 60px}
.oneA ul{display: flex;justify-content: space-between;margin-top: 40px}
.oneA ul li{width: 240px;text-align: center;background-color: #fff;height: 290px;border-radius: 5px;padding: 0 20px;
    box-sizing: border-box; transition: all 0.5s ease-out;}
.oneA ul li img{margin: 60px 0 15px}
.oneA ul li p{font-size: 22px;margin-bottom: 10px;}
.oneA ul li span{color: #666;line-height: 1.6}
.oneA ul li:hover img{  transform: rotateY(360deg);  transition: all 0.8s ease-out;  }
.oneA ul li:hover{  cursor: pointer;  -webkit-box-shadow: 0 0 26px #cacaca;  -moz-box-shadow: 0 0 26px #cacaca;  box-shadow: 0 0 26px #cacaca;  }



.oneB{margin-top: 40px;overflow: hidden}
.oneB ul li{width: 49.75%;float: left;display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;  -ms-flex-direction: row;  flex-direction: row;  -ms-flex-wrap: wrap;flex-wrap: wrap;  -webkit-box-pack: start;  -ms-flex-pack: start;  justify-content: flex-start;
    -webkit-box-align: stretch;  -ms-flex-align: stretch;  align-items: stretch;  -ms-flex-line-pack: start; align-content: flex-start;}
.oneB ul li .item,.oneB ul li .itemlast{width: 49.5%;float: left;position: relative;margin-top: 0.8%;max-height: 240px}
.oneB ul li .item img{max-width: 100%}
.oneB ul li .item:nth-child(2n+2){margin-left: 1%}
.oneB ul li .item:nth-child(1n+3){margin-top: 0.8%;}
.oneB ul li:nth-child(2n+2){margin-left: .5%;}
.oneB ul li:nth-child(1n+3){margin-top: .5%;}
/*.oneB ul li:nth-child(1) .item{width: 100%}*/
.oneB ul li .item::after{content: " ";  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  z-index: 8;  background-color: #53b753;
    opacity: 0; transition: all 600ms ease 0s; clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);}
.oneB ul li .item:hover::after{opacity: 1;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);}
.oneB ul li .item dt{  position: absolute;  z-index: 9;  left: 1em;  top: 1em;  right: 1em;  bottom: 1em;  }
.oneB ul li .item .border{  position: absolute;  z-index: 1;  background-color: #fff;  }
.oneB ul li .item .b_t{  left: 0;  right: 100%;  top: 0;  height: 1px;  transition: all 340ms linear 150ms;  }
.oneB ul li .item:hover .b_t{  left: 0;  right: 0;  transition: all 340ms linear 150ms;  }
.oneB ul li .item .b_r{  top: 0;  bottom: 100%;  right: 0;  width: 1px;  transition: all 340ms linear 150ms;  }
.oneB ul li .item:hover .b_r{  top: 1em;  bottom: 1em;  transition: all 340ms linear 150ms;  }
.oneB ul li .item .b_b{  left: 0;  right: 100%;  bottom: 0;  height: 1px;  transition: all 340ms linear 150ms;  }
.oneB ul li .item:hover .b_b{  left: 0;  right: 0;  transition: all 340ms linear 150ms;  }
.oneB ul li .item .b_l{  top: 0;  bottom: 100%;  left: 0;  width: 1px;  transition: all 340ms linear 150ms;  }
.oneB ul li .item:hover .b_l{ top: 1em;  bottom: 1em; transition: all 340ms linear 150ms;  }
.oneB ul li .item dd{  position: absolute;  z-index: 10;  width: 100%;  text-align: center;  color: #fff;
    transition: all 250ms ease 0ms;  opacity: 0;  filter: alpha(opacity=0);  *zoom: 1;  visibility: hidden;  top: 50%;  transform: translateY(-20%);  }
.oneB ul li .item:hover dd{transition: all 300ms ease 200ms, transform 500ms ease 200ms, -webkit-transform 500ms ease 200ms;
    opacity: 1;  filter: alpha(opacity=100);  visibility: visible;  transform: translateY(-50%);}
.oneB ul li .item:hover dd img{height: 5rem}
.oneB ul li .item:hover dd h3{font-size: 18px;padding: 10px 0}
.oneB ul li .itemlast{margin-left: 1%}
.oneB ul li .itemlast .more{display: block;height: 100%;  position: relative; background-color: #53b753;  color: #fff; text-align: center;
    background-image: url(../images/casemore.png);  background-size: 100% 100%;  background-position: 50% 50%;  background-repeat: no-repeat;  transition: all 1000ms ease 0s;}
.oneB ul li .itemlast .more span{  position: absolute;  left: 0;  top: 50%;  margin-top: -60px;  width: 100%;  padding-top: 102px;font-size: 18px;  }
.oneB ul li .itemlast .more span:before {
    content: " ";  position: absolute;  left: 50%;  top: 0;  margin-left: -40px;  width: 81px;  height: 81px;
    background-image: url(../images/btn-casemore.png);  background-size: 100% 100%;  background-position: 50% 0;  background-repeat: no-repeat;  transition: all 1200ms ease 50ms;
}
.oneB ul li .itemlast .more:hover {  background-size: 125% 125%;  }
.oneB ul li .itemlast .more:hover span:before {  transform: rotate(540deg);  }
@-webkit-keyframes clipSectorIn{
    0%{
        -webkit-clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 0% 0%);
        clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 0% 0%);}
    55%{
        -webkit-clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);
        clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);}
    100%{
        -webkit-clip-path: polygon(0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
        clip-path: polygon(0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);}
}
@keyframes clipSectorIn{
    0%{
        -webkit-clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 0% 0%);
        clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 0% 0%);}
    55%{
        -webkit-clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);
        clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);}
    100%{-webkit-clip-path: polygon(0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
        clip-path: polygon(0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
    }
}

.oneC{background-color: #f3efec;overflow: hidden;margin-top: 45px;padding-bottom: 55px}
.oneC ul{display: flex;justify-content: space-between;margin-top: 40px}
.oneC ul li{width: 410px;height: 425px;border-radius: 35px;box-shadow: 0 0 20px #ccc;background-color: #fff;padding: 10px;
box-sizing: border-box;position: relative}
.oneC ul li dd{width: 100%;height: 275px;}
.oneC ul li dd img{border-radius: 30px;width: 100%}
.oneC ul li dt{text-align: center;width: 366px;margin: 0 auto;margin-top: -38px;background-color: #fff;position: relative}
.oneC ul li dt h3{color: #ff0000;font-size: 18px;font-weight: normal;margin: 10px 0}
.oneC ul li dt p{line-height: 1.6}
.oneC ul li dt span{display: inline-block;width: 55px;line-height: 24px;background-color: #e8fcfa;text-align: center;color: #00d8c8;
margin-top: 25px}
.oneC ul li:nth-child(2) dt span{background-color: #ffefe8;color: #fa6423}
.oneC ul li:nth-child(3) dt span{background-color: #d7eff3;color: #17a2b8}

.oneD1{text-align: center;margin-top: 30px;}
.oneD1 a{  font-size: 16px;  border-radius: 15px;  color: #666;  border: 1px solid #999;  padding: 5px 20px;  margin: 0 15px;  transition: .3s;  }
.oneD1 a:hover,.oneD1 a.active{  color: #d51419;  border: 1px solid #d51419;  }

.oneD ul{overflow: hidden;margin-top: 50px;display: none}
.oneD ul:nth-child(1){display: block;}
.oneD ul li{width: 50%;float: left;margin-bottom: 30px}
.oneD ul li dd{width: 258px;height: 150px;overflow: hidden;border-radius: 5px}
.oneD ul li dd img{max-width: 100%;transition: .6s;}
.oneD ul li dt{width: 270px;margin-left: 20px}
.oneD ul li dt h3{color: #504d4a;font-weight:normal;font-size: 18px}
.oneD ul li dt p{font-size: 12px;color: #999;margin: 15px 0 25px;line-height: 20px;min-height: 60px;
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:3;}
.oneD ul li dt span{color: #999;font-size: 12px}
.oneD ul li dd:hover img{transform: scale(1.2);transition: .6s;}


footer{background-color: #2a2a2a;padding-top: 60px;box-sizing: border-box}
.foot{overflow: hidden;color: #797979;font-size: 13px;line-height: 22px}
.foot h3{font-size: 16px;color: #fff;font-weight: normal;margin-bottom: 18px}
.footl{width: 45%}
.footl ul li{line-height: 40px}
.footl ul li:nth-child(1){background: url(../images/index_phone.png) left center no-repeat;padding-left: 43px;}
.footl ul li:nth-child(2){background: url(../images/index_email.png) left center no-repeat;padding-left: 43px;}
.footl ul li:nth-child(3){background: url(../images/index_qq.png) left center no-repeat;padding-left: 43px;}
.footl ul li:nth-child(4){background: url(../images/index_address.png) left center no-repeat;padding-left: 43px;}
.footl ul li span{color: #d8251e; font-size: 16px;}
.footr{width: 47%}
.footr dl{margin-bottom: 18px}
.link{border-top: 1px solid #353535;padding: 20px 0;margin-top: 30px;font-size: 13px}
.link a{color: #666}
.link span{color: #ccc}
.copy{background-color: #111111;padding: 25px 0;text-align: center;color: #565656;font-size: 13px;border-top: 1px solid #303030;}
.copy a{color: #565656}

/*============================ 关于我们 ============================*/
.slider{height: 200px;}

.about_main_main {  height: 100%;  margin: 5% auto;  position: relative;  }
.about_main_one {  display: flex;  min-height: 2.78em;  justify-content: space-between;  align-items: center;  }
.about_main_one_l {  margin-right: 0.5em;  height: 100%;  flex: 1;  display: flex;  flex-direction: column;  justify-content: space-between;  }
.about_main_one_l_title {  font-size: 32px;  margin-bottom: 14px;  color: #f2142f;  }
.about_main_one_l_text {color: #606060;  line-height: 2;  }
.about_main_one_r {  height: 278px;  margin-left: 50px;  flex: 1;  display: flex;  }
.about_main_one_r img {  width: 100%;  object-fit: contain;  }
.about3img{  width: 100%;  object-fit: contain;  padding-bottom: 150px;  }
.about_main_two_l {  width: 45%;  height: 160px;  display: flex;  flex-direction: column;  justify-content: space-between;  position: absolute;  bottom: 0;  left: 0;  }
.about_main_two_r {
    width: 45%;  height: 620px;  background-color: white;  position: absolute;  right: 0;  bottom: 0;display: flex;  flex-direction: column;
    justify-content: space-around;  padding: 50px 95px;  box-shadow: 0 1px 5px 1px #cccccc;box-sizing: border-box;
}
.about_main_two_r_li {  line-height: 1.6;  position: relative;  }
.about_main_two_r_li:hover .about_main_two_title::before {  transform: rotate(180deg) scale(1.2);  }
.about_main_two_title::before {
    content: "";  width: 20px;  height: 20px;  display: block;  position: absolute;  left: -40px;  top: 10px;
    background-image: url('../images/about4.png');  background-repeat: no-repeat;  background-size: 100% 100%;  transition: 0.35s;
}
.about_main_two_r::before {  content: "";  width: 4px;  height: 50%;  background-color: #f2142f;  position: absolute;  left: -4px;  bottom: 0;  }
.about_main_two_title {  font-size: 24px;  color: #2b2b2b;  }
.about_main_two_text {  font-size: 16px;  letter-spacing: 1px;  }
.about_main_three, .about_main_four {  width: 1300px;  margin: 100px auto;  display: flex;  justify-content: space-between;  text-align: center;  }
.about_main_three_li {  margin: 20px 0;  position: relative;  top: 0;  transition: 0.6s;  }
.about_main_three_li:hover {  top: -10px;  }
.about_main_three_li img {  transition: 1s;  transform: rotate(0deg) scale(0.8);  }
.about_main_three_li:hover img {  transform: rotate(360deg) scale(1);  }
.about_main_three_li_title {  color: #2b2b2b;  font-size: 18px;  line-height: 1.6;  margin-bottom: 0.3em;  }
.about_main_three_li_cont {  font-size: 10px;  color: #999999;  letter-spacing: 3px;  }
.about_main_three_li img {  width: 80px;  height: 65px;  object-fit: contain;  }
.about_main_four_l {  width: 45%;  position: relative;  }
.about_main_four_l::before {  content: '';  width: 4px;  height: 50%;  background-color: #f2142f;
    position: absolute;  right: -4px;  bottom: 0;  transition: 0.35s;  }
.about_main_four_img img {  width: 100%;  height: 100%;  object-fit: cover;  transition: 0.35s;  display: block;  }
.about_main_four_img {  overflow: hidden;  }
.about_main_four_img:hover img {  transform: scale(1.1);  }
.about_main_four_l .about_main_four_logo {  position: absolute;  top: 40px;  left: 46px;  color: white;
    line-height: 1.8;  text-align: left;  }
.about_main_four_logo p:first-of-type {  font-size: 24px;  letter-spacing: 10px;  }
.about_main_four_logo p:last-of-type {  font-size: 28px;  letter-spacing: 3px;  }
.about_main_four_r {  width: 45%;  text-align: left;  height: 486px;  display: flex;  flex-direction: column;  justify-content: space-around;  line-height: 1.6;  }
.about_main_four_li_title {  font-size: 24px;  color: #2b2b2b;  line-height: 2;  }
.about_main_four_li_cont {  letter-spacing: 2px;  }
.cont_mid {  padding-top: 6%;  padding-bottom: 6%;  width: 1200px;overflow: hidden;margin: 0 auto;  }
.cont_left {  float: left;  max-width: 48%;  font-size: 20px; line-height:200%}
.cont_left .t1 {  font-size: 1.8em;  color: #333333;  margin-bottom: 1em; line-height:200% }
.cont_left .t2 {  font-size: 1.2em;  color: #2b2b2b;  margin-bottom: 0.7em;  line-height:200%}
.cont_left .t3 {  font-size: 0.7em;  color: #606060;  line-height: 200%;  }
.cont_left .t4 {  font-size: 0.9em;  color: #2b2b2b;  margin: 2em 0 0.7em 0; line-height:200% }
.cont_right {  float: right;  max-width: 48%;  padding-top: 7%;  }
.cont_right .t1 {  font-size: 18px;  color: #999999;  text-align: right;  line-height: 2em;  }
.cont_right ul {  width: 500px;  max-width: 100%;  padding-top: 3%;  padding-bottom: 5%;  }
.cont_right li {  margin-bottom: 0.5em;  font-size: 14px;  }
.cont_right input {display: block;  width: 100%;  font-size: inherit;  padding: 1em 0 0.6em 0;  color: #333;  border: 0;
    border-bottom: 1px solid #e2e2e2;  outline: none;  transition: 0.5s;  background-color: transparent;
}
.cont_right li:nth-of-type(1) ::-webkit-input-placeholder, .cont_right li:nth-of-type(2) ::-webkit-input-placeholder {
    letter-spacing: 2px;
}
.cont_right li:nth-of-type(1) ::-moz-placeholder, .cont_right li:nth-of-type(2) ::-moz-placeholder {
    letter-spacing: 2px;
}
.cont_right li:nth-of-type(1) :-ms-input-placeholder, .cont_right li:nth-of-type(2) :-ms-input-placeholder {
    letter-spacing: 2px;
}
.cont_right input:focus {  border-bottom: 1px solid #000;  }
.join_btn {float: right;  width: 190px;  height: 50px;  color: #f2142f;  border: 1px solid #f2142f;  border-radius: 4px;  cursor: pointer;  transition: 1s;  position: relative;
    background: none;  display: block;  -webkit-perspective: 1000;  -webkit-backface-visibility: hidden;  outline: none;  font-size: 1em;  letter-spacing: 4px;
}
.join_btn:after {content: "";  display: block;  position: absolute;  width: 0;  top: 0;  left: 50%;
    transform: translateX(-50%);  height: 100%;  background-color: #f2142f;  transition: 1s;  opacity: 0;  z-index: -1;}
.join_btn:hover {  color: #fff;  }
.join_btn:hover:after {  width: 100%;  opacity: 1;  }
.sharebox {  font-size: 0;  overflow: hidden;  float: left;  }
.sharebox p {  display: inline-block;  height: 30px;  line-height: 30px;  font-size: 18px;  }
.sharebox .bdsharebuttonbox {  display: inline-block;  height: 30px;  position: relative;  top: 8px;  }
.sharebox .bdsharebuttonbox:after {  display: none;  }
.sharebox .bdsharebuttonbox>a {
    display: block;  float: left;  width: 30px;  height: 30px;  margin: 0 0 0 20px;  padding: 0;  line-height: 30px;  background-color: #666666;
    border-radius: 50%;  -o-border-radius: 50%;  -ms-border-radius: 50%;  -moz-border-radius: 50%;  -webkit-border-radius: 50%;  background-image: url(../images/share.png);  background-repeat: no-repeat;
}
.sharebox .bdsharebuttonbox>a.bds_more {  display: none;  }
.sharebox .bdsharebuttonbox>a.bds_sqq {  background-position: 0 0  }
.sharebox .bdsharebuttonbox>a.bds_tsina {  background-position: 0 -30px  }
.sharebox .bdsharebuttonbox>a.bds_weixin {  background-position: 0 -60px  }
.sharebox .bdsharebuttonbox>a.bds_tqq {  background-position: 0 -90px  }
.sharebox .bdsharebuttonbox>a:hover {  background-color: #d5000e;  -webkit-animation: tada 1s ease both;  -moz-animation: tada 1s ease both;  animation: tada 1s ease both;  }
.map {  width: 100%;  height: 600px;  background-color: #ededed;  }

/*新闻*/
.classBox{line-height: 60px}
.classBox ul{text-align: center}
.classBox ul li{display: inline-block;padding: 0 25px}
.classBox ul li a{padding-bottom: 2px}
.classBox ul li:hover a,.classBox ul li.on a{border-bottom: 2px solid #f45e5e;}
.news{background-color: #f8f8f8;overflow: hidden;}
.news ul{margin-top: 40px}
.news ul li{width: 32%;float: left;margin-bottom: 30px;margin-right: 2%}
.news ul li:nth-child(3n){margin-right: 0}
.news ul li h3{color: #504d4a;font-weight:normal;font-size: 18px}
.news ul li p{font-size: 12px;color: #999;margin: 15px 0 25px;line-height: 20px;min-height: 60px;
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:3;}

.page{text-align: center;padding-bottom: 60px}
.page a,.page span{border: 1px solid #999;padding: 5px 13px;margin: 0 3px}
.page a:hover{color: #d51419;border: 1px solid #d51419}
.page span.current {color: #d51419;border: 1px solid #d51419;}

.content{overflow: hidden;padding: 50px 0}
.cont{}
.cont h1{font-size: 26px;font-weight: normal;border-bottom: 1px solid #f0f3f5;padding-bottom: 30px;text-align: center}
.cont .con{line-height: 250%;margin-top: 30px;}
.cont .con a{color: #d51419}
.cont .con img{max-width: 100%;display: block;margin: 0 auto;}

.other{margin-top: 20px}
.other h3{font-size: 18px;border-bottom: 1px solid #f0f3f3;line-height: 53px;font-weight: normal}
.other ul li{padding: 14px 0;border-bottom: 1px solid #f0f3f5;line-height: 1.6}


.shop-introduce {  padding: 30px 0 40px;  background: url("../images/shop-bg.png") no-repeat top center;  min-height: 482px;  text-align: center;  position: relative;margin-top: 40px;  }
.common-title {  padding-top: 20px;  text-align: center;  }
.shop-introduce .si-icon {  display: inline-block;  width: 38px;  height: 38px;  background: url(../images/icon.png) no-repeat -254px -363px;  position: absolute;  left: 50%;  bottom: -18px;  margin-left: -22px;  }
.common-title h3 {  display: inline-block;  padding: 0 60px;  background: #fff;  font-size: 30px;  color: #393939;  font-weight: 500;  }
.common-title .line {  margin-bottom: -20px;  width: 100%;  height: 8px;  }
.common-title p {  padding-top: 10px;  line-height: 30px;  font-size: 16px;  color: #2d2d2d;  }
.shop-advantage {  padding: 44px 0;  overflow: hidden;  }
.sa-list li {  float: left;  width: 25%;  text-align: center;  }
.sa-list li .sa-img {  height: 213px;  }
.sa-list li .sa-title {  padding-top: 30px;  font-size: 20px;  color: #2a2a2a;  }
.sa-list li .sa-line {  margin-top: 14px;  width: 100%;  height: 2px;  background: #e5e5e5;  position: relative;  }
.sa-list li .sa-line i {  display: inline-block;  width: 24px;  height: 24px;  background: url("../images/icon.png") no-repeat -220px -363px;  position: absolute;  top: -11px;  right: 0;  }
.sa-list li .sa-txt {  padding-top: 14px;  line-height: 24px;  font-size: 14px;  color: #424242;  }
.shop-tpl {  padding: 30px 0;  overflow: hidden;  }
.shop-tpl .st-title h3 {  font-size: 24px;  color: #282828;  }
.shop-tpl .st-title h3 span {  padding-left: 10px;  font-size: 16px;  color: #6f6f6f;  }
.shop-tpl .st-title .st-title-btn {  float: right;  display: inline-block;  width: 80px;  height: 22px;
    line-height: 22px;  background: #2086ee;  font-size: 12px;  color: #fff;  text-align: center;  vertical-align: middle;  }
.shop-tpl .st-box .tpl-list-container li{  margin-right: 36px;  }
.shop-tpl .st-box .tpl-list-container li.row-last{  margin-right: 0;  }
.shop-tpl .st-btn {  margin-top: 30px;  display: inline-block;  width: 278px;  height: 48px;  line-height: 48px;  background: #fff;
    border: 1px solid #ddd;  border-radius: 26px;  font-size: 16px;  color: #3b3b3b;  text-align: center;  }
.shop-tpl .st-btn:hover {  border-color: #2086ee;  color: #2086ee;  }
.shop-taocan {  padding: 40px 0 50px;  overflow: hidden;  }
.st-list {  padding-top: 86px;  }
.tpl-list-container li {  width: 298px;  margin-right: 23px;  margin-top: 33px;  float: left;  list-style-type: none;  cursor: pointer;  }
.tpl-list-container li.row-last {  margin-right: 0;  }
.tpl-list-container .no-tpl {  height: 238px;  line-height: 238px;  text-align: center;  }
.tpl-list-container .no-tpl span {  vertical-align: middle;  }
.tpl-list-container .no-tpl i {  display: inline-block;  width: 32px;  height: 32px;  background: url(../images/icon.png) no-repeat -99px -269px;  vertical-align: middle;  margin-right: 10px;  position: relative;  top: -1px;  }
.tpl-container .tpl-header {  height: 20px;  line-height: 20px;  background: #e2e2e2;  padding-left: 10px;  font-size: 0;  }
.tpl-container .tpl-header .point {  width: 6px;  height: 6px;  border-radius: 100%;  vertical-align: middle;  display: inline-block;  margin-right: 5px;  }
.tpl-container .tpl-header {  height: 20px;  line-height: 20px;  background: #e2e2e2;  padding-left: 10px;  font-size: 0;  }
.tpl-container .tpl-header .point {  width: 6px;  height: 6px;  border-radius: 100%;  vertical-align: middle;  display: inline-block;  margin-right: 5px;  }
.tpl-container .tpl-mask {  opacity: 0;  position: absolute;  width: 100%;  height: 100%;  left: 0;  top: 0;  transition: all 0.4s ease-in-out;  }
.tpl-container:hover {  box-shadow: 0px 7px 15px 5px rgba(0, 0, 0, 0.1)  }
.tpl-container:hover .tpl-mask {  opacity: 1;  z-index: 1;  background-color: rgba(0, 0, 0, 0.6);  }
.tpl-container .tpl-mask .preview-pc {  width: 100%;  height: 100%;  position: absolute;  }
.tpl-container .tpl-mask .preview-pc::after {  width: 52px;  height: 80px;  background: url(../images/icon.png) no-repeat 0 -29px;  position: absolute;  left: 50%;  top: 50%;  margin-left: -26px;  margin-top: -40px;  content: '';  }
.tpl-container .tpl-mask .preview-mobile-thumb {  width: 66px;  height: 118px;  position: absolute;  right: 12px;  top: 55px;  background-position: center;  background-repeat: no-repeat;  background-size: 66px auto;  }
.tpl-container .tpl-mask .preview-mobile-thumb::after {  content: '';  position: absolute;  width: 66px;  height: 118px;  background: rgba(0, 0, 0, 0.6);  }
.tpl-container .tpl-mask .preview-mobile {  width: 86px;  height: 169px;  background: url(../images/icon.png) no-repeat -202px 0;
    position: absolute;bottom: 3px;z-index: 1;right: 0;}
.tpl-container .tpl-footer {  font-size: 14px;  color: #565656;  position: relative;  padding: 6px 8px;  }
.tpl-container .tpl-footer div {  height: 24px;  line-height: 24px;  }
.tpl-container .tpl-footer .buy {  position: absolute;  right: 14px;  top: 13px;  }
.tpl-container .tpl-body .mobile-thumb {  width: 96px;  height: 150px;  background: url(../images/icon.png) no-repeat -196px 0;
    position: absolute;  z-index: 1;  right: -4px;  bottom: 0;  overflow: hidden;  padding-bottom: 22px;  }
.tpl-container .tpl-body {  height: 201px;  border-bottom: 1px solid #dcdcdc;  position: relative;  overflow: hidden;  }
.st-list {  padding-top: 86px;  }
.st-list .item {  margin-left: 90px;  float: left;  }
.st-list .item:first-child {  margin-left: 75px;  }
.st-list .column {  padding-bottom: 20px;  width: 320px;  background: #fbfbfc;  border: 1px solid #e9e9e9;
    border-radius: 6px;  text-align: center;  }
.st-list .item .st-icon {  margin: -36px auto 0;  width: 83px;  height: 83px;  background: url(../images/icon.png) no-repeat;  }
.st-list .item .st-icon1 {  background-position: 0 -140px;  }
.st-list .item .title {  display: inline-block;  margin: 0 auto;  padding: 10px 0 10px;  font-size: 20px;  color: #333333;  border-bottom: 1px solid #7dd1e3;  }
.site-select {  font-size: 18px;  color: #FF7200;  margin-top: 15px;  }
.common-select {margin-right: 4px;  width: 237px;  height: 34px;  line-height: 34px;  border: 1px solid #e6e6e6;  }
.st-list .item-list {padding: 20px 40px 0;}
.st-list .item-list li {height: 34px;  line-height: 34px;  font-size: 12px;  color: #484848;  text-align: left;  }
.icon-question{display: inline-block;  background: url(../images/icon2.png) no-repeat 0 -785px;  padding-left: 20px;  height: 20px;  vertical-align: middle;  }
.st-list .item-list li .item-icon {display: inline-block;  width: 16px;  height: 12px;  background: url(../images/icon.png) -25px -120px;  vertical-align: middle;  }
.f-r {float: right;}
.manager-tip {display: none;  position: absolute;  left: -20px;  width: 200px;  background-color: #f1fbff;  border: 1px solid #c2e2ff;  font-size: 12px;
    color: #5b88ba;padding: 5px 10px;  text-align: left;  line-height: 20px;  margin-top: 10px;  z-index: 100;}
.st-list .item .column-detail {text-align: left;margin-top: 20px;  line-height: 30px;  padding-left: 40px;}
.blue-link {color: #0b6eca;}
.st-list .item .st-btn {margin-top: 20px;  display: inline-block;  width: 180px;  height: 40px;  line-height: 40px;
    background: #00adf2;  border-radius: 4px;  font-size: 14px;  color: #fff;  text-align: center;}
.pos-r{position: relative;}
.pos-r:hover .manager-tip{display: block}
.st-list .item .st-icon2 {background-position: 0 -233px; }
.st-list .item .st-icon3 {background-position: 0 -326px;}
.st-list .item .column:hover {margin: -2px;background: #fff;border: 3px solid #00adf2;box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.36);  }
.st-list .item .column-first:hover {border-color: #2086ee;}
.st-list .item .column-last:hover {border-color: #02cddf;}
.st-list .item:first-child .st-btn {background: #2086ee;}
.st-list .item:last-child .st-btn {background: #02cddf;}