body{max-width: 750px;margin: auto;font-size: 14px;width: 100%; overflow-x: hidden;}
/*手机导航按钮开始*/
.nav_phone_btn{display: block;position: relative;cursor: pointer; height: 35px; top:-6px;}
.nav_phone_btn span {
position: relative;font-size: 0;width: 30px;height: 3px;
background-color: #454545;display: inline-block;
transition:all 250ms ease-out;
-webkit-transition:all 250ms ease-out;
}
.nav_phone_btn span:before,.nav_phone_btn span:after {
content: "";position: absolute;width: 100%;height: 3px;
background-color: #454545;
left:0px;
transition:all 250ms ease-out;
-webkit-transition:all 250ms ease-out;
}
.nav_phone_btn span:before{top:-10px;}
.nav_phone_btn span:after{top:10px;}
.visible_nav.nav_phone_btn span{background-color: transparent;}
.visible_nav.nav_phone_btn span:before{left:5px;top:0px;
transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
}
.visible_nav.nav_phone_btn span:after{top:0px;left: 5px;
transform: rotateZ(-45deg);
-webkit-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
}
/*手机按钮结束*/
/*手机导航内容*/
body>*{
position: relative;
right:0;
transition:right 250ms ease-out;
-webkit-transition:right 250ms ease-out;
}
body.body_nav_phone>*{right:auto;}
.nav_phone{display:block;position: fixed;top:60px;bottom: 0px;left:auto;height: 100%;width:50%;right:0;
transition:right 0ms ease-out;
-webkit-transition:right 0ms ease-out;
transition:left 250ms ease-out;
-webkit-transition:left 250ms ease-out;
overflow: hidden;
z-index: 1000;
}
.nav_phone{transition:all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
body.body_nav_phone .nav_phone{transform:translateX(0%); -webkit-transform:translateX(0%);left:0;top:60px;z-index: 1000; }
.nav_phone_tit{box-sizing:border-box;height: 44px;width: 140px;background: #474747;line-height: 44px;color: #fff;text-indent: 20px; text-align: center; position:relative;left:-180px;}
.nav_phone_tit img{ display:inline-block; position:absolute; top:-4px; width:120px; left:50%; margin-left: -60px;}
.nav_phone_tit span{float: left;display: inline-block;}
.nav_phone_tit .button{float: right;display: inline-block;margin-right: 13px;cursor:pointer;}
.nav_phone_tit .button:before{
content: "";display: inline-block;width: 20px;height: 1px;background: #fff;
transform: rotate(45deg);
border-radius: 8px;
}
.nav_phone_tit .button:after{content: "";display: inline-block;width: 1px;height: 19px;
background: #fff;margin-left: -14px;margin-bottom: -9px;transform: rotate(45deg);
border-radius: 8px;
}
.body_nav_phone .nav_phone_tit .button{ position:relative; top:-4px;}
.main{ width:100%; overflow: hidden;}
.nav_phone_con{position: absolute;top:0px;bottom: 0px;width: 140px;background: #232323;overflow: hidden;}
.nav_phone_con>ul{overflow-y: auto;overflow-x: hidden;
position: absolute;bottom: 0px;top: 0px;width:auto;right:10px;left:10px;
}
.nav_phone_con>ul>li a{opacity: 1;padding:0 10px;box-sizing: border-box;width: 100%; height:44px; line-height: 44px;
display: inline-block;position: relative;
-ms-transition: all 250ms ease-out;
transition: all 250ms ease-out;color:#fff;
}
.nav_phone_con>ul>li>a{border-bottom: 1px solid #333333;}
.nav_phone_con>ul>li>a em{display: inline-block;width:18px;height:8px;
position: absolute;top:50%;right:30px;margin-top: -4px;
background: url(/Public/Phone/images/arr_down.svg) no-repeat right center; background-size:100% 100%;
}
.nav_phone_con>ul>li.on>a em{
transform: rotate(-180deg);
}
.nav_phone_con>ul>li ul{display: none;}
.nav_phone_con>ul>li ul li a{border-bottom: 1px solid #333333;padding-left: 45px;}
}
body.body_nav_phone>*{transform:translateX(-100%); -webkit-transform:translateX(-100%);}
.nav_phone{width: 100%;transform:translateX(-100%); -webkit-transform:translateX(-100%);}
body.body_nav_phone .header_fixed{left:100%;}
.rc_en{float: right;margin-right:20px ;color:#636363;}
.white .rc_en{color:#fff;}
.phone_search{ display:block; width:25px; height:25px; background:url(/Public/Phone/images/search.svg) no-repeat center; float: right; position:relative; top:-2px;}
.search_inp{transition: all 0.4s cubic-bezier(0.42,0,1,1) 0s; top: 60px;position: absolute;background: #fff;border-top:1px solid #ccc;border-bottom:1px solid #ccc;height: 0;opacity: 0;width: 100%;float: left;text-align: center;overflow: hidden;left: 0;}
.search_inp.on{height: 60px;opacity: 1;z-index: 500;}
.search_phone_box{ width: 85%;
margin: auto;
padding-top: 15px;}
.search_inp input.search_inp_txt{
display: inline-block;
width: 80%;
margin-right: 10px;
height: 30px;
border: 1px solid #cacaca;
float: left;
padding: 0 3%;
box-sizing: border-box;
font-size: 14px;
}
.search_inp input.search_inp_button{ display: inline-block;
float: none;
border: 0;
width: 30px;
height: 30px;
background: #e6e6e6 url(../images/phone_s_m.png) center no-repeat;
background-size:50% 50%;
position: relative;
bottom: auto;}
.header{padding: 20px;background: #fbfbfc;position: fixed;z-index: 500;left: 0;top: 0;width: 100%;box-sizing: border-box;}
body.body_nav_phone .header{right:auto;left: 0%;}
.nav_phone_btn{float: left;}
.logo{position: absolute;top: 0px;left: 50%;margin-left: -62px;height: 100%;overflow: hidden;}
.logo img{position: relative;top: 0px;}
.main{padding-top: 60px;}
.main_co{position: fixed;left: 0;top: 60px;width: 100%;z-index: 10;}
.main_co img{ width:100%; height:auto;}
.main_in{position: relative;z-index: 20; bottom:-5px;}
.home1{box-sizing: border-box;padding-top: 40%;}
.banner{display: block;width: 100%;}
.banner img{width: 100%;}
.home1_co{width: 100%;text-align: center;padding: 30px 0;position: relative;}
.home1_co h1{width: 100%;margin-bottom: 15px;position: relative;z-index: 20;}
.home1_co h1 img{width: 75%;}
.home1_co p{color:#e7dcd0;font-size: 12px;position: relative;z-index: 21; top:-5px;}
.home1_co span{position: absolute;width: 100%;left: 0;top: 0px;opacity: 0;}
.home1_co span img{width: 100%;}
.home1_co span{transition: all 0.5s;}
.home1_co .line1.on{opacity: 1;transition: all 0.5s;}
.home1_co .line2.on{opacity: 1;transition: all 0.5s 0.3s;}
.home1_co .line3.on{opacity: 1;transition: all 0.5s 0.6s;}
.home1_co .line4.on{opacity: 1;transition: all 0.5s 0.9s;}
.home1_co .line5.on{opacity: 1;transition: all 0.5s 1.2s;}
.home1_co .line6.on{opacity: 1;transition: all 0.5s 1.5s;}
.home1_co .line7.on{opacity: 1;transition: all 0.5s 1.8s;}
.home2{position: relative;width: 100%; margin-bottom: 40px;}
.home2_co{overflow: hidden;width: 100%;}
.home2_co_t{float: right;width: 50%;background: rgba(59,56,56,0.5);box-sizing: border-box;padding: 30px 25px 18px;color: #fff;}
.home2_co_t b{font-size: 12px;margin-bottom: 5px;}
.home2_co_t h2{font-size: 16px;margin-bottom: 25px;height:1.5em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight: normal;}
.home2_co_t h2 a{ color:#fff;}
.home2_co_t p{line-height: 24px;font-size: 14px;height: 72px;overflow: hidden;margin-bottom: 30px;}
.home2_co_t p a{ color:#fff;}
.home2_co_t h1{font-size: 18px; font-weight: normal;}
.home2_co_t h1 a{color:#fff;}
.home2_co_b{width: 100%;float: left;margin-top: 30px;}
.home2_co_b h1{color:#fff;font-weight: 100;font-size: 46px;line-height:68px;letter-spacing: 8px;padding-left: 20px;font-family: '_CenturyGothic';}
.bofang{display: inline-block;width: 70px;}
.bofang img{width: 100%;}
.home3{position: relative;z-index: 55; background: #fff;}
.home3 ul{padding: 0 3%;}
.home3 ul li{overflow: hidden;margin-bottom: 5px;background: #454545;}
.home3 ul li dl dt{width: 43.5%;float: left;box-sizing: border-box;padding: 20px;padding-bottom: 0;}
.home3 ul li dl dt h1{font-size: 16px;line-height: 28px;height: 84px;overflow: hidden;font-weight: normal;color:#fff;margin-bottom: 10px;}
.home3 ul li dl dt > a{display: inline-block;width: 13px;height: 22px;background: url(/Public/Phone/images/arr_right_white.svg) center no-repeat;background-size: 100% 100%;}
.home3 ul li dl dt a{ color:#fff;}
.home3 ul li dl dd{width: 56.5%;float: left;}
.home3 ul li dl dd img{width: 100%;}
.home3 ul li:nth-child(2){background: #e7dcd0;}
.home3 ul li:nth-child(2) dl dt h1 > a{color:#454545;}
.home3 ul li:nth-child(2) dl dt > a{background: url(/Public/Phone/images/arr_right_black.svg) center no-repeat;background-size: 100% 100%;}
.footer{text-align: center;padding: 50px 0;color:#b2b2b2;position: relative;z-index: 49; font-size:12px;}
.law_link{ padding-top:20px;}
.law_link a{}
.body_law .footer{ background: none!important;}
.footer p{line-height: 1.71;}
.footer p a{color:#b2b2b2;}
.footer p a.gslogo{ display: block; }
.backtop{width: 40px;height: 40px;border-radius: 100%;background: #fff;position: fixed;right: 15px;bottom: 80px;text-align: center;display: none;z-index: 999;}
.backtop i{display: inline-block;width: 50%;height: 50%;background: url(/Public/Phone/images/shangla.png) center no-repeat;background-size: 100% 100%;margin-top: 10px;}
.backHome{width: 40px;height: 40px;border-radius: 100%;background: none;position: fixed;right: 15px;bottom: 20px;text-align: center;display: block;z-index: 999;}
.backHome a{display: inline-block;width: 40px;height: 40px;background: url(/Public/Phone/images/home.svg) center no-repeat;background-size: 100% 100%;margin-top: 0px;}
.banner_video{position:fixed;left: 0;top: 200px;width: 100%;z-index: 200;display: none;}
.banner_video video{width: 100%;background: #232323;}
.banner_video span{position: absolute;right: 0;top: -30px;width: 30px;height: 30px;z-index: 2000;}
.banner_video span img{width: 100%;}
.zhezhao{width: 100%;height: 100%;opacity: 0;background: #454545;position: fixed;left: 0;top: 0;display: none;z-index: 199;}
.grand_top{ top:-49px; position:absolute; width:100%; height:49px; background:url(/Public/Phone/images/grand.png) left bottom repeat-x;}
.join_tt .global_point{ padding:0; padding-top: 20px;}
.join_tt .global_point img{ width:30px; height:30px;}
.nav_phone .nav_phone_btn{
float: none;
height: 48px;
top: 15px;
}
.nav_phone .nav_phone_btn>.back{
width: 48px;
height: 48px;
position: relative;
float: left;
display: flex;
align-items: center;
justify-content: center;
left: 15px;
transform: translateX(-100%);
}
.nav_phone .nav_phone_btn>.back>.icon{
width: 16px;
height: 16px;
}
.nav_phone .nav_phone_btn>.cloes{
width: 48px;
height: 48px;
position: relative;
float: right;
right: 15px;
}
.nav_phone .nav_phone_btn>.cloes:before,.nav_phone .nav_phone_btn>.cloes:after{
content:" ";
width: 18px;
height: 1px;
display: inline-block;
background-color: #454545;
position: absolute;
top: calc((48px - 1px) / 2);
left: calc((48px - 18px) / 2);
}
.nav_phone .nav_phone_btn>.cloes:before{
transform: rotateZ(45deg);
}
.nav_phone .nav_phone_btn>.cloes:after{
transform: rotateZ(135deg);
}
.nav_phone .nav_phone_con.cf ul{
position: absolute;
top: 75px;
width: calc(100% - 40px);
padding-left: 45px;
}
.nav_phone .nav_phone_con.cf ul a{
font-size: 16px;
font-weight: 600;
}
.nav_phone .products{
height: 100%;
position: relative;
z-index: 9;
transform: translateX(-100%);
padding-top: 20px;
background-color: #FFF;
padding-left: 12.3%;
padding-right: 0%;
}
.nav_phone .products .list{
align-items: center;
justify-content: center;
flex-wrap: wrap;
display: flex !important;
}
.nav_phone .products .item{
font-size: 20px;
font-weight: 600;
color: #000;
width: calc(80% / 2);
padding: 9px 0;
padding-left: 9%;
text-align: left;
}
.nav_phone{
transition-duration: .5s;
}
.fadein {
/* 定义动画 */
animation-duration: .5s; /* 动画时间 */
animation-name: fadein; /* 关键帧名字 */
animation-fill-mode: forwards;
}
.fadeout{
/* 定义动画 */
animation-duration: .5s; /* 动画时间 */
animation-name: fadeout; /* 关键帧名字 */
animation-fill-mode: forwards;
}
@keyframes fadeout {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(-100%);
}
}
@keyframes fadein {
0% {
opacity: 1;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@media only screen and (max-width:320px ) {
.home1_co h1{margin-bottom: 5px;}
.home2_co_t{padding: 30px 20px 18px;}
.home2_co_t p{margin-bottom: 35px;}
.home2_co_b h1{font-size: 36px;line-height: 60px;}
.bofang{width: 54px;}
.home3 ul li dl dt h1{font-size: 14px;line-height: 20px;height: 60px;}
}