@charset "utf-8";
/* CSS Document */

*{ margin:0;padding:0;list-style:none; }
body{  font: 14px/24px "Arial", "Microsoft YaHei", "微软雅黑", "SimSun", "宋体";}
.clear{ clear:both;}
.clear:after{content: " "; display: table;  clear: both}
a{ text-decoration:none; color:#333; }
img{ border:none;vertical-align: middle; }
.fl{ float:left;}
.fr{ float:right;}
.h12{ width:100%; clear:both; height:12px;}
.h20{ width:100%; clear:both; height:20px;} 
.h30{ width:100%; clear:both; height:30px;} 
.h40{ width:100%; clear:both; height:40px;}  
.pr{ position: relative;}
.w100{ width: 100%; position: relative;}
.w1200{ width:1200px; margin:0px auto; } 
.w1000{ width:1000px; margin:0px auto; } 
.w900{ width: 900px;}
.w880{ width: 880px;}
.w700{ width: 700px;}
.w820{ width: 820px;}
.w830{ width: 830px;}
.w290{ width: 290px;}
.w360{ width: 360px;}
.box_img{ width: 100%; text-align: center;}
.box_img img{ max-width: 100%;}
.head_img{ width: 60px; height: 60px; overflow: hidden; border-radius: 50%; }
.head_img img{ width: 100%; min-height: 100%;}
.diss{ display: flex; align-items: center; justify-content: flex-start;}
.disc{ display: flex; align-items: center; justify-content: center;}
.disb{ display: flex; align-items: center; justify-content: space-between;}
.bg_fff{ background-color: #fff;} 
.bg_f1{ background-color: #f1f1f1;}
.bg_2b{ background-color: #2b2b2b;}
.bg_f8{ background-color: #f8f8f8;}
.bg_f5{ background-color: #f5f5f5;}
.bg_f9{ background-color: #f9f9f9;}
.bg_222{ background-color: #222;}
.hide{ display: none !important;}
.p16{ padding: 16px 16px;}
.list_img{ width: 100%;; text-align: center; overflow: hidden;}
.list_img img{ width: 100%; min-height: 100%;}
.clearfix:after,.clearfix ul li:after{ content: ""; display: block; clear: both;}
 
.foot_icon{ padding: 14px 0 0 0;}
.foot_icon ul li{cursor: pointer;width: 240px;float: left;}
.foot_icon ul li img{ float: left; transition: all .5s ease;}
.foot_icon p{padding: 8px 0 0 9px;float: left;display: block;color: #666;line-height: 29px;font-size: 16px;}
.foot_icon p span{ font-weight: bold; display: block; font-size: 18px; color: #000;}
.foot_icon ul li:hover img{ margin: 0px 5px 0 10px;}
.f_line{ width: 100%; height: 1px; background: #999;}
 
.place_fff ::-webkit-input-placeholder { color:#fff;}
.place_fff :-moz-placeholder {  color:#fff;}
.place_fff ::-moz-placeholder { color:#fff;}
.place_fff :-ms-input-placeholder { color:#fff;}

.place_bbb ::-webkit-input-placeholder { color:#bbb;}
.place_bbb :-moz-placeholder {  color:#bbb;}
.place_bbb ::-moz-placeholder { color:#bbb;}
.place_bbb :-ms-input-placeholder { color:#bbb;}

.baoming{ width: auto; padding: 6px 0 0;}
.baoming ul li{ margin-bottom: 10px; position: relative;}
.baoming ul li span{ position: absolute; right: 8px; top: 4px;}
.baoming input{ width: 95%; border: 1px solid #eee; padding: 0 0 0 4%; height: 36px; line-height: 36px; outline: none;}
.baoming ul li p{ color: #999; font-size: 12px;}
.baoming .sub input{ width: 100%; padding: 0; border: none; font-size: 20px; color: #fff; border-radius: 20px; cursor: pointer; background: #f44;}
.baoming .sub input:hover{ background: #de1111;}


.foot{ width: 100%; background: #1b1b1b; padding: 10px 0;}
.f_logo{ float: left; width:150px; ;}
.f_logo img{ max-width: 100%;}
.f_words{ width: 800px; float: left; height: 40px;}
.f_words p{  line-height: 40px;   float: left; width: 50%;  display: flex; align-items: center; justify-content: center; color: #999; font-size: 16px;;}
.f_words p span{ font-size: 18px} 
.f_wx{ float: right;}
.f_wx ul li{ position: relative; padding:  0 10px; position: relative; display: block; float: left;} 
.f_wx ul li div img{ width: 120px; height: 120px;}
.f_wx_big{ width: 150px;  height: 150px; text-align: center; background: #fff; border: 1px solid #ddd; visibility: hidden; position: absolute; left: -50px; top: -162px;transform:scale(0);-webkit-transform:scale(0);transition:all ease .3s;-webkit-transition:all ease .3s;transform-origin:right bottom;-webkit-transform-origin:right bottom;} 
.f_wx_big p{ width: 100%; display: block; float: left;padding: 6px 0 0;}
.f_wx_big p span{ color: #333; display: block;}
.f_wx_app{width: 300px;  }
.f_wx_app p{ width: 50%; }
.f_wx ul li:hover .f_wx_big{ visibility: visible;transform:scale(1);-webkit-transform:scale(1);}
.foot_p{ width: 100%; border-top: 1px solid #2b2b2b; text-align: center;}
.foot_p p{ color: #555; line-height: 30px; }
.foot_black{ width: 100%; background: #000; height: 90px;}


.fix_right{ width: 80px; height:auto; background: #fff; border: 1px solid #eee; position: fixed; right: 15px; top: 18%; z-index: 999; }
.fix_right ul { width: 100%; height: 100%; display: block;}
.fix_right ul li{width:auto; height:80px;   text-align: center; position: relative; }
.fix_right ul li a{ display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; border-bottom: 1px solid #e6e6e6; }
.fix_right ul li b{display: block;background: url(icon_fix_r.png) no-repeat;height: 32px;width: 32px;margin: 0 auto;}
.fix_right ul li span{color: #ccc;font-size: 14px;line-height: 16px; display: block;}
.fix_right ul li p{position: absolute;left:20px;top:12px;width: 20px;height: 20px;line-height: 20px;border-radius: 50%;background: #f11;color: #fff;text-align: center;display: block;} 
.fix_right .li01 b{background-position: 3px 2px;}
.fix_right .li02 b{background-position: -47px -2px;}
.fix_right .li03 b{background-position: -95px 1px;}
.fix_right .li04 b{background-position: -143px -1px;}
.fix_right .li05 b{background-position: -194px -2px;}
.fix_right .li06 b{background-position: -246px -2px;}
.fix_right .li07 b{background-position: -300px -2px;}
.fix_right ul li:hover{ background: #f44;}
.fix_right ul li:hover span{ color: #fff;}
.fix_right .li01:hover b{ background-position: 3px -44px;}
.fix_right .li02:hover b{background-position: -47px -48px;}
.fix_right .li03:hover b{background-position: -95px -46px;}
.fix_right .li04:hover b{background-position: -143px -46px;}
.fix_right .li05:hover b{background-position: -194px -48px;}
.fix_right .li06:hover b{background-position: -246px -46px;}
.fix_right .li07:hover b{background-position: -300px -47px;}
.fix_right_site{background: url(icon_fix_site.png) 10px 8px no-repeat #fff;height: auto;position: absolute;right: 80px;top: 2px;width: 280px;border-radius: 4px;box-shadow: 0 0 5px #aaa;opacity:0;transform:translateX(-130px);transition:.3s;visibility:hidden;z-index: 10;}
.fix_right_site span{line-height: 38px !important;border-bottom: 1px solid #eee;color: #666 !important;text-align: left;padding: 0 0 0 39px;}
.fix_right_site .s2{ font-size: 12px;} 
.fix_right .li06:hover  .fix_right_site{opacity:1;transform:translateX(0);visibility:visible;}
 
.show{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 9999; background: rgba(0,0,0,.4);}
.show_box{width: 700px;height: 450px;position: absolute;left: 50%;margin-left: -350px;top: 20%;background: #fff;border-radius: 10px;box-shadow: 0 5px 6px #666;padding-top: 20px; overflow: hidden;}
.show_box .a_close{ position: absolute;  right: 20px; top: 5px;-moz-transform: rotate(-360deg);  -webkit-transform:rotate(-360deg);  -webkit-transform-origin: 50% 50%;  -moz-transform-origin: 50% 50%;  -moz-transition: 1s ease-in-out 0s;  -webkit-transition: 1s ease-in-out 0s;}
.show_message{ width: 100%;   overflow-y: auto; height: 440px; }
.show_message ul li{ padding: 13px 10px; overflow: hidden; border-bottom: 1px solid #eee;}
.show_message ul li:hover{ background: #fff5f5; border-color: #fee6e6;}
.show_message .head_img{ float: left;margin-right: 8px; } 
.show_msg_info{float: left;width: 50%;}
.show_msg_info h2{font-size: 18px;color: #333;font-weight: normal;padding: 6px 0 0;}
.show_msg_info h2 span{ font-size: 14px; color: #999; padding-left: 10px;}
.show_msg_info p{color: #999;font-size: 12px;}
.show_msg_info p span{ color: #666;}
.show_msg_info p.p0{height: 24px;overflow: hidden;padding: 2px 0 0;}
.show_msg_r{width: 36%;float: right;padding: 20px 0 0;text-align: right;}
.show_msg_r p{color: #666;font-size: 14px;display: inline-block;}
.show_msg_r p span{ color: #f11;}
.show_msg_r a{font-size: 12px;color: #fff;padding: 0 3px; margin: 0 3px; display: inline-block;background: #ff8400;border-radius: 4px;} 
.show_msg_r a.a2{ background: #cacaca;}
.show_msg_r a:hover{ background: #d26e03;}
.a_close:hover {  -moz-transform: rotate(360deg);  -webkit-transform:rotate(360deg);  -webkit-transform-origin: 50% 50%;  -moz-transform-origin: 50% 50%;  -moz-transition: 1s ease-in-out 0s;  -webkit-transition: 1s ease-in-out 0s;}
.show_chat{ z-index: 10000; width: 700px;height: 470px;position: fixed;left: 50%;margin-left: -350px;top: 20%;background: #fff;border-radius: 10px;box-shadow: 0 5px 6px #666; overflow: hidden; }
.s_chat_title{ width: 100%; position: relative; }
.s_chat_title h2{ text-align: center; font-weight: normal; line-height: 50px; font-size: 16px;  background: #f55; display: flex; align-items: center; justify-content: center;}
.s_chat_title h2 a{ color: #fff; }
.s_chat_title h2 a:hover{ text-decoration: underline;}
.s_chat_title h2 img{ width: auto; margin-left: 4px;}
.s_chat_title a.a_close{position: absolute; right: 12px; top:10px;}
.chat_list{ width: auto; height: 300px; overflow-y: auto; padding: 10px 12px;;}
.chat_time{ width: 100%; text-align: center;margin-bottom: 20px; }
.chat_time span{ background: #ddd; color: #fff; border-radius: 10px; padding: 0 20px; display: inline-block;}
.chat_obj{ margin-bottom: 20px; width:76%; display: flex; align-items: flex-start;   justify-content: flex-start;}
.chat_obj .head_img{ width: 50px; height: 50px; } 
.chat_words{ min-height: 50px; flex: 1; padding: 0 0 0 10px; align-items: center; display: flex; justify-content: flex-start;}
.chat_words p{ background: #f1f1f1; padding: 8px 10px; font-size: 15px; border-radius: 10px; color: #666; line-height: 22px;}
.chat_my{ float: right;}
.chat_my .chat_words{ padding: 0 10px 0 0; justify-content: flex-end;}
.chat_btn{ width: 100%; border-top: 1px solid #eee;  position: relative;}
.chat_btn_input{ width:98%; padding: 5px 1%; height: 50px;}
.chat_btn_input textarea{ color: #666; border: none; outline: none; width: 100%;  height: 100%; line-height: 24px;  padding: 0;}
.chat_btn_sub {position: absolute;text-align: center;right: 30px;top: 62px;}
.chat_btn_sub a{background: #f1f1f1;line-height: 30px;width: 80px;display: block;font-size: 16px;color: #999;margin-right: 15px;float: left;}
.chat_btn_sub a:hover{ background: #ddd;}
.chat_btn_sub input{background: #4079bf; font-size: 16px; line-height: 30px;height: 30px;width: 80px;color: #fff;border: none;outline: none;cursor: pointer;}
.chat_btn_sub input:hover{ background: #ff5555;}

.msg_xt_box{ width: auto;padding: 12px 12px;height: 380px;  overflow: hidden;}
.msg_xt { width: 100%; max-height: 380px; overflow-y: auto; }
.msg_xt ul li{ width: 100%; margin-bottom: 12px; background: #f5f5f5;}
.msg_xt ul li h2{ font-size: 16px; padding: 0 3%; line-height: 46px; border-bottom: 1px solid #e6e6e6;}
.msg_xt ul li h2 span{ color: #999; font-size:12px; float: right; font-weight: normal;}
.msg_xt_p{ width: auto; padding: 10px 3%; display: flex; align-items: center; justify-content: space-between;}
.msg_xt_p p{ font-size: 16px; color: #333;  line-height: 28px; flex: 1;}
.msg_xt_p span{ background: #f44; color: #fff; border-radius: 4px; cursor: pointer;   padding: 0px 10px;}


.fix_foot{ width: 100%; position: fixed; left: 0; bottom: 0;z-index: 999; padding-top: 30px; height: 160px; background: rgba(0,0,0,0.6);}
.fix_f_img{ width: 240px; height: 150px; float: left; position: relative;}
.fix_f_img img{ max-width: 100%; position: absolute; left: 0; top: -71px;}
.fix_f_words{ width: 640px; text-align: center; float: left;}
.fix_f_words h2{font-size: 40px;line-height: 60px;color:#fff;padding: 10px 0 10px 0;}
.fix_f_words p{font-size: 27px;line-height: 30px;color:#fff;}
.fix_f_words p span{color: #ff8400;font-size: 32px;font-weight: bold;padding: 0 6px;display: inline-block;}
.fix_f_ewm{ width: 320px; float: right;}
.fix_f_ewm p{ display: block; float: left; width: 50%; text-align: center;}
.fix_f_ewm span{ display: block; width: 100%; line-height: 30px; font-size: 18px; color: #fff;} 
.fix_f_close{ position: absolute; top: 10px; right: -100px; z-index: 10;}
.fix_f_close a{ background: #444; color: #fff; font-size: 18px; padding: 0 30px; border-radius: 10px; display: inline-block; line-height: 40px;}
.open_big{  width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: url(open_bg.jpg) center top no-repeat ; background-size: 100% 100%;}
.open_cont{ width: 760px; position: absolute; left: 50%; top: 20%; margin-left: -380px; }
.open_phone{ position: absolute; background: center center no-repeat; z-index: 2;}
.open_phone_01{ background-image: url(open_phone_01.png); width: 260px; height: 37px; left: 0; top: 0;}
.open_phone_02{ background-image: url(open_phone_02.png); width: 22px; height: 458px; left: 0; top: 37px;}
.open_phone_03{ background-image: url(open_phone_04.png); width: 21px; height: 458px; right: 0; top:37px;}
.open_phone_04{ background-image: url(open_phone_05.png); width: 260px; height: 26px; left: 0; bottom: 0;}
.open_img{ width: 260px; float: left; position: relative;  height: 510px; padding:10px 0 0; z-index: 1;}
.open_img_s{ width: 230px; height: 500px; margin: 0 auto; border-radius: 20px; }
.open_right{ width: 430px; float: right; padding: 50px 0 0;} 
.open_cont .fix_f_ewm{ float: left; width:320px; padding: 30px 0 0;}
.open_cont .fix_f_close a{ background: rgba(255,255,255,0.1);

.img_up img,.img_up{  -webkit-animation: img_up 3s linear infinite;-moz-animation: img_up 3s linear infinite;-ms-animation: img_up 3s linear infinite; animation: img_up 3s linear infinite;}
@-webkit-keyframes img_up { 25% { -webkit-transform: translateY(8px);}  50%, 100% {  -webkit-transform: translateY(0); }  75% {  -webkit-transform: translateY(-8px); } }
@-ms-keyframes img_up { 25% { -ms-transform: translateY(8px);}  50%, 100% {  -ms-transform: translateY(0); }  75% {  -ms-transform: translateY(-8px); } }
@-moz-keyframes img_up { 25% { -moz-transform: translateY(8px);}  50%, 100% {  -moz-transform: translateY(0); }  75% {  -moz-transform: translateY(-8px); } }
@keyframes img_up {   25% {   transform: translateY(8px); }   50%, 100% {  transform: translateY(0); } 75% {   transform: translateY(-8px);  }    } 

.img_rotate img:hover{ -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; -moz-transform: rotateY(360deg);-webkit-transform: rotateY(360deg);-o-transform:rotateY(360deg);-ms-transform: rotateY(360deg);transform: rotateY(360deg);} 

.img_3dplay img{ -webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0); -webkit-animation:play3d 6s linear infinite;-moz-animation:play3d 6s linear infinite;animation:play3d 6s linear infinite;}
@-webkit-keyframes play3d{0%  { -webkit-transform:rotateY(0deg);}100% { -webkit-transform:rotateY(360deg);}}
@-moz-keyframes play3d{0%  {-moz-transform:rotateY(0deg);}100% {-moz-transform:rotateY(360deg);}}
@keyframes play3d{0%  {transform:rotateY(0deg);}100% {transform:rotateY(360deg);}}

.img_3dplay_Z img{ -webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0); -webkit-animation:play3dZ 6s linear infinite;-moz-animation:play3dZ 6s linear infinite;animation:play3dZ 6s linear infinite;}
@-webkit-keyframes play3dZ{0%  { -webkit-transform:rotateZ(360deg);}100% { -webkit-transform:rotateZ(0deg);}}
@-moz-keyframes play3dZ{0%  {-moz-transform:rotateZ(360deg);}100% {-moz-transform:rotateZ(0deg);}}
@keyframes play3dZ{0%  {transform:rotateZ(360deg);}100% {transform:rotateZ(0deg);}}
  
.img_big img{  transform:scale(1); -ms-transform:scale(1);-moz-transform:scale(1);	-webkit-transform:scale(1); -o-transform:scale(1);       transition: transform 0.6s; -webkit-transition: -webkit-transform 0.6s;   }
.img_big img:hover{ transform:scale(1.1); -ms-transform:scale(1.1);-moz-transform:scale(1.1);	-webkit-transform:scale(1.1); -o-transform:scale(1.1); 
transition:all .5s ease; -ms-transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; -o-transition:all .5s ease;}
 
.img_trans img{-webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -ms-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; -webkit-transition-delay:.1s; -moz-transition-delay:.1s; -ms-transition-delay:.1s; -o-transition-delay:.1s; }
.img_trans img:hover{-webkit-transform:rotate(720deg); -moz-transform:rotate(720deg);  -ms-transform:rotate(720deg); -o-transform:rotate(720deg);  }
@-webkit-keyframes bounce-up {  25% {  -webkit-transform: translateY(7px); }  50%, 100% {  -webkit-transform: 
translateY(0); }  75% {  -webkit-transform: translateY(-7px); } }
@-ms-keyframes bounce-up {  25% {  -ms-transform: translateY(7px); }  50%, 100% {  -ms-transform: 
translateY(0); }  75% {  -ms-transform: translateY(-7px); } }
@-moz-keyframes bounce-up {  25% {  -moz-transform: translateY(7px); }  50%, 100% {  -moz-transform: 
translateY(0); }  75% {  -moz-transform: translateY(-7px); } }
@keyframes bounce-up {  25% {  transform: 
translateY(7px); }  50%, 100% {  transform: translateY(0); }  75% {  transform: translateY(-7px); } } 

.img_bandown{-webkit-animation: bounceInDown 1.4s ease;    -moz-animation: bounceInDown 1.4s ease;    -ms-animation: bounceInDown 1.4s ease;    animation: bounceInDown 1.4s ease; }}
@-webkit-keyframes bounceInDown {
    0% {  opacity: 0;  -webkit-transform: translateY(-2000px);  transform: translateY(-2000px)}
    60% {  opacity: 1;  -webkit-transform: translateY(30px);  transform: translateY(30px)}
    80% {  -webkit-transform: translateY(-10px);  transform: translateY(-10px)}
    100% {  -webkit-transform: translateY(0);  transform: translateY(0)}
}
@keyframes bounceInDown {
    0% {  opacity: 0;  -webkit-transform: translateY(-2000px);  -ms-transform: translateY(-2000px);  transform: translateY(-2000px)}
    60% {  opacity: 1;  -webkit-transform: translateY(30px);  -ms-transform: translateY(30px);  transform: translateY(30px)}
    80% {  -webkit-transform: translateY(-10px);  -ms-transform: translateY(-10px);  transform: translateY(-10px)}
    100% {  -webkit-transform: translateY(0);  -ms-transform: translateY(0);  transform: translateY(0)}
 }  
 

.icon_shake{    -webkit-animation: Tada 3s both infinite;    -moz-animation: Tada 3s both infinite;    -ms-animation: Tada 3s both infinite;    animation: Tada 3s both infinite;}
@-webkit-keyframes Tada { 0% {     -webkit-transform: scale(1);   transform: scale(1)   }  

    70%,73% {     -webkit-transform: scale(0.9) rotate(-5deg);   transform: scale(0.9) rotate(-5deg)   }  

    77%,83%,90%,97% {     -webkit-transform: scale(1.1) rotate(5deg);   transform: scale(1.1) rotate(5deg)   }  

    80%,87%,93% {     -webkit-transform: scale(1.1) rotate(-5deg);   transform: scale(1.1) rotate(-5deg)   }  

    100% {     -webkit-transform: scale(1) rotate(0);   transform: scale(1) rotate(0)   }  } 

@-moz-keyframes Tada { 0% {     -moz-transform: scale(1);   transform: scale(1)   }  

    70%,73% {     -moz-transform: scale(0.9) rotate(-5deg);   transform: scale(0.9) rotate(-5deg)   }  

    77%,83%,90%,97% {     -moz-transform: scale(1.1) rotate(5deg);   transform: scale(1.1) rotate(5deg)   }  

    80%,87%,93%{     -moz-transform: scale(1.1) rotate(-5deg);   transform: scale(1.1) rotate(-5deg)   }  

    100% {     -moz-transform: scale(1) rotate(0);   transform: scale(1) rotate(0)   }  } 

@-ms-keyframes Tada { 0% {     -ms-transform: scale(1);   transform: scale(1)   }  

    70%,73% {     -ms-transform: scale(0.9) rotate(-5deg);   transform: scale(0.9) rotate(-5deg)   }  

    77%,83%,90%,97% {     -ms-transform: scale(1.1) rotate(5deg);   transform: scale(1.1) rotate(5deg)   }  

    80%,87%,93% {     -ms-transform: scale(1.1) rotate(-5deg);   transform: scale(1.1) rotate(-5deg)   }  

    100% {     -ms-transform: scale(1) rotate(0);   transform: scale(1) rotate(0)   }  } 

@keyframes Tada { 0% {   transform: scale(1);   transform: scale(1)   }  

    70%,73%{   transform: scale(0.9) rotate(-5deg);   transform: scale(0.9) rotate(-5deg)   }  

    77%,83%,90%,97%  {   transform: scale(1.1) rotate(5deg);   transform: scale(1.1) rotate(5deg)   }  

    80%,87%,93%{   transform: scale(1.1) rotate(-5deg);   transform: scale(1.1) rotate(-5deg)   }  

    100% {   transform: scale(1) rotate(0);   transform: scale(1) rotate(0)   }  }