﻿/*************************************************************************************************************
*******************HEIKAIMU************************????????????***********************HEIKAIMU*********************
*************************************************************************************************************/
 /*??????*/
.nav{background: #fff; height: 3.1rem;  width: 100%; z-index: 99; border-bottom: 1px solid #e7e7e7;} 
.nav span.ico1{display: block; position: fixed; right: 0; top: 0; background: url(img/menu.png); background-size: 100%;  color: #fff;  text-align: center; z-index: 999999; width: 3rem; height: 3rem;  -webkit-transition: all 0.60s ease-in-out;
    -moz-transition: all 0.60s ease-in-out;
    -ms-transition: all 0.60s ease-in-out;
    -o-transition: all 0.60s ease-in-out;
}
.nav span.ico1.op{opacity: 0.5;}
.nav .logo{text-align: center;   position: absolute; left: 20%; top:0; width: 8rem;  height: 3rem; line-height: 3rem;  margin:0 0 0 -4rem; } 
.nav .logo span{display: block; width: 100%; height: 3rem;  float: left; background: url(img/logo.png) no-repeat center center; background-size: 90%;}
.nav .phone{text-align: center;   position: absolute; right: 20%; top:0; width: 8rem;  height: 3rem; line-height: 3rem;  margin:0 0 0 -4rem; } 
.nav .phone span{display: block; width: 100%; height: 3rem;  float: left; background: url(img/phone.png) no-repeat center center; background-size: 90%;}
.nav_menu{background: #fff;  position: fixed; right: 0; display: none;  border-radius: 0 0 6px 6px; width: 6rem;  top: 3rem; z-index: 9999999;}
.nav_menu a{display: block; border-bottom: 1px solid #e7e7e7; color: #666; text-align: center; color: #111; font-size: 0.8rem;  padding: 0.6rem 0;} 
/*????????????*/
.web_phone_menu{width: 100%;}
.web_phone_menu img{display: block; float: left;}
.web_phone_menu img.img1{width: 33.3%;}
.web_phone_menu img.img2{width: 50%;}
/*????????????*/
.slideBox{ position:relative; overflow:hidden; margin:0 auto;  max-width:800px;/* ??????????????????????????? */ }
.slideBox .hd{ position:absolute; height:28px; line-height:28px; bottom:0px; right:40%; z-index:1; }
.slideBox .hd li{ display:inline-block; width:8px; height:8px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#333; text-indent:-9999px; overflow:hidden; margin:0 6px;   }
.slideBox .hd li.on{ background:#fff;  }
.slideBox .bd{ position:relative; z-index:0; }
.slideBox .bd li .txt{position:absolute; left:0; top:0; z-index:999; font-size:30px;}
.slideBox .bd li{ position:relative; text-align:center;  }
.slideBox .bd li img{ background:url(img/loading.gif) center center no-repeat;  vertical-align:top; width:100%;/* ????????????100%???????????????????????? */}
.slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0);  }  /* ???????????????????????? */
.slideBox .bd li .tit{ display:block; width:100%;  position:absolute; bottom:50%;  height:28px; line-height:24px; color:#fff;  text-align:left; font-size:14px; }
.slideBox .bd li .tit i{color:#fff; font-weight:bold;font-size:16px; margin-bottom:5px; line-height:30px;} 
/*????????????*/
.index_web_type_btn{background: #fff; margin-bottom: 10px;} 
.index_web_type_btn a img{display: block; width: 28%; margin: 2%; float: left; padding: 0.5rem 0;}
/*????????????*/
/*????????????*/
#picScroll .hd ul{padding-top:0;}
#picScroll .hd{ height:40px;}
.picScroll{ margin:0 auto 0px; text-align:center; }
.picScroll .bd ul{ width:100%;  float:left; padding-top:10px;  border-top: 1px solid #e7e7e7;}
.picScroll .bd li{ width:46%; float:left; font-size:14px; text-align:center; border:1px solid #e7e7e7; margin:2%;  background:#fff;}
.picScroll .bd .right{ float:right;}
.picScroll .bd li a{-webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* ?????????????????? */ display: block; width: 100%;   overflow: hidden;}
.picScroll .bd li  h3{line-height:20px; font-size:14px; padding: 10px 0; color:#535353; text-align:left; text-indent:1em;width:98%; white-space: nowrap; text-overflow: ellipsis;  overflow:hidden;} 
.picScroll .bd li  h3 i{display: block;margin-right:5px; font-style: normal; font-size: 10px; color: #00aced;}
.picScroll .bd li img{ width:100%; /* height:142px; */  background:url(img/loading.gif) #fff center center no-repeat;  }
.picScroll .hd{ height:40px; line-height:40px;    overflow:hidden; text-align:left;  padding:0 10px;  }
.picScroll .hd ul{ float:right; padding-top:16px; }   
.picScroll .hd li{ float:left; width:8px; height:8px; background:#D0D0D0; margin:5px 5px; overflow:hidden;  -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; }
.picScroll .hd .on{ background:#ffa800;}
.picScroll .prev,.picScroll .next{ display:block; float:right;  width:18px; height:18px; line-height: 18px;  color: #666; overflow:hidden; text-align: center; font-family: "\5b8b\4f53"; font-weight: bold;}
.picScroll .prevStop{color: #ffa800;}
.picScroll .nextStop{color: #ffa800;}
/*??????????????????*/
.index_about_layout{background: #fff;}
.index_about_layout .title{text-align: center; padding: 1rem 0; border-bottom: 1px solid #e7e7e7;}
.index_about_layout p{font-size: 0.8rem; line-height: 1.5rem; padding:1rem 2rem 1rem 1rem;}
.index_about_layout img{display: block; width: 100%; float: right;}
/*??????????????????*/
.index_contact_layout{background: #212121; padding: 1rem;}
.index_contact_layout img{display: block; max-width: 100%; margin: 1rem auto;}
.index_contact_layout h2{text-align: center; color: #fff; padding-bottom: 0.5rem; width: 10rem; margin: 0 auto; border-bottom: 1px solid #e7e7e7;}
.index_contact_layout p{text-align: center; color: #a0a0a0; font-size: 0.8rem; line-height: 1.8rem;} 
/*????????????*/
.index_menu{width: 49%; float: left; margin: 0.5% 0.5%; height: 100px; background: #ccc;   position: relative; padding-bottom:0.4rem;}
.index_menu img{display: block; width: 100%; height: 100%;}
.index_menu span{display: block; width: 100%;  position:absolute;bottom:0;left:0;background:#000000;filter:alpha(opacity=50);opacity:0.5;  -moz-opacity:0.5;  z-index:10;}
.index_menu p{position: absolute;   left: 0; bottom: 0; width: 100%;   text-align: left; text-indent: 1rem;  color: #fff;  z-index:11;}
/*footer*/
.footer_layout{width: 100%;  position: fixed; left: 0; bottom: 0; background: #212121; z-index: 20; }
.footer_layout img{width: 100%;}
.footer_blank{height: 1rem;}
.footer_layout a{ display: block; position: absolute; bottom: 0;   height: 2.5rem; }
.footer_layout a.a1{left: 0; width: 20%;}
.footer_layout a.a2{left: 20%; width: 29%;}
.footer_layout a.a3{left: 49%; width: 27%;}
.footer_layout a.a4{left: 76%; width: 24%;}
/*????????????*/
.page_menu .title{text-align: center; padding: 1rem 0;}
.page_menu .title i{font-style: normal; font-size: 0.6rem;}
/*
***********************************************************??????************************************************************
 */
.page_banner{position: relative;}
.page_banner .banner_pic{width: 100%;}
.page_banner .banner_txt{ position: absolute;  top: 50%; margin-top: -20px; -webkit-transition: all 0.60s ease-in-out;
    -moz-transition: all 0.60s ease-in-out;
    -ms-transition: all 0.60s ease-in-out;
    -o-transition: all 0.60s ease-in-out;}
.page_banner .banner_txt.right{width: 50%; right: -50%; opacity: 0;}
.page_banner .banner_txt.right.load{right: 2%; opacity: 1;}
.page_banner .banner_txt.left{width: 50%; left: -50%; opacity: 0;}
.page_banner .banner_txt.left.load{left: 2%; opacity: 1;}
.page_banner .banner_txt.center{width: 70%; left: 50%; margin-left: -35%; -webkit-transform:scale(0);-moz-transform:scale(0); opacity: 0;}
.page_banner .banner_txt.center.load{-webkit-transform:scale(1);-moz-transform:scale(1); opacity: 1;}
/*????????????*/
.page_title{background: #4d6ba9; color: #fff; padding: 3% 5%; text-align: center;}
.page_title h2{font-size: 1rem;}
.page_title h3{font-size: 0.6rem; line-height: 1rem; font-weight: normal;} 
/*????????????*/
.phone_content{background: url(img/phone_bg1.jpg); background-size:cover; }
.phone_content .pic1 img{width: 100%;}
.phone_list{width: 100%; padding: 6%; height: 200px;}
.phone_list span{display: block; width: 30px; height: 30px; border-radius: 5px; text-align: center; line-height: 30px; color: #fff; font-weight: bold;}
.phone_list span.color1{background:#2bbfb1;}
.phone_list span.color2{background:#6b879a;}
.phone_list span.color3{background:#e7a629;}
.phone_list span.color4{background:#11a1cf;}
.phone_list span.color5{background:#ea6060;}
.phone_list span.color6{background:#a8795d;}
.phone_list h2{font-size: 0.9rem; font-weight: bold; line-height: 2rem;}
.phone_list p{font-size: 0.7rem; line-height: 1.2rem;}
.phone_content ul li{float: left; width: 50%;}
/*????????????*/
.company_content .pic1 img{width: 100%;}
.company_list{padding: 2% 5%; background: #fff;}
.company_list.color1{background: #d9f3fc;} 
.company_list .left_box{width:25%; padding-right: 5%; border-right: 1px solid #e7e7e7;}
.company_list .left_box img{width: 100%;}
.company_list .right_box{width:70%;}
.company_list .right_box h2{font-size: 0.9rem; color: #111;}
.company_list .right_box p{font-size: 0.7rem; color: #666;}
/*????????????*/
.title_shop{width: 100%;}
.title_shop img{width: 95%; display: block; margin: 0 auto; padding: 5% 0 0 2%;}
.web_shop_menu{width: 100%;}
.web_shop_menu img{display: block; float: left; width: 40%; margin: 5%;} 
/*????????????*/
.weixin_list{width: 100%; padding: 2% 0 0 0;}
.weixin_list .top_box{height: 50%; padding: 5% 0;  text-align: center;}
.weixin_list .top_box img{height: 100%; display: block; margin: 0 auto; -webkit-transition: all 0.60s ease-in-out;
    -moz-transition: all 0.60s ease-in-out;
    -ms-transition: all 0.60s ease-in-out;
    -o-transition: all 0.60s ease-in-out;}
.weixin_list .top_box img.load{height: 100%;}
.weixin_list .bottom_box{height: 50%; text-align: center; color: #fff; opacity: 1; -webkit-transition: all 0.60s ease-in-out;
    -moz-transition: all 0.60s ease-in-out;
    -ms-transition: all 0.60s ease-in-out;
    -o-transition: all 0.60s ease-in-out;}
.weixin_list .bottom_box.load{opacity: 1;}
.weixin_list .bottom_box h2{font-size: 1rem; padding: 2% 0;}
.weixin_list .bottom_box p{font-size: 0.6rem; padding: 2% 5%; line-height: 1.0rem;}
.weixin_list.color1{background: #596273;}
.weixin_list .bottom_box.color1{color: #fff;}
.weixin_list.color2{background: #f6f2f1;}
.weixin_list .bottom_box.color2{color: #5f9ca4;}
.weixin_list.color3{background: #72bcc5;}
.weixin_list .bottom_box.color3{color: #fff;}
.weixin_list.color4{background: #eff4f6;}
.weixin_list .bottom_box.color4{color: #72bcc5;}
/*??????*/
.case_basic{width: 100%; position: relative; padding-top: 4%;}
.case_basic img{display: block; width: 60%; margin: 0 auto;}
.case_basic .prev, .case_basic .next{width: 15%; height: 40px;  position: absolute; top: 50%; margin-top: -20px; text-align: center; line-height: 40px; color:#111; font-family: "\5b8b\4f53"; font-weight: bold; font-size: 30px;}
.case_basic .next{right: 0;}
.pic_layout{position: fixed; left: 0; top: 0; display: none; overflow: auto;}
.pic_layout p{position: fixed; width: 60px; height: 60px; text-align: center; line-height: 60px; right: 0px; bottom: 60px; color: #fff; font-size: 3rem; font-weight: normal; font-family: "\5b8b\4f53"; background: #000;}
.pic_box{display: table-cell; vertical-align:middle; text-align:center; background: #000; overflow: auto;}
.pic_box img{max-width: 100%; border:none; max-height: 100%;  vertical-align:middle; }
.go_btn{display: block; width: 200px; margin: 20px auto;}
.go_btn img{width: 100%;}
/*????????????*/
.write_ifo{padding-bottom: 2%; border-bottom: 1px solid #e7e7e7;}
.write_ifo label{display: block; width: 90%; margin: 3% auto; position: relative;}
.write_ifo img{width: 100%;}
.write_ifo input{position: absolute; right: 1%; width: 70%; height: 90%; top: 5%; background: transparent; border: none;}
.check_ifo{padding-bottom: 2%; border-bottom: 1px solid #e7e7e7;}
.check_ifo h2{text-align: left;  padding:5% 7%; }
.check_ifo label{display: block; width: 40%; height: 2rem; border-bottom: 2px solid #3175c3; background: #3e87da; float: left; margin: 2% 5%; -webkit-border-radius: 5px; -moz-border-radius: 5px; position: relative;}
.check_ifo input{position: absolute; right: 2%; top: 0.6rem;}
.check_ifo p{width: 100%; height: 2rem; text-align: center; line-height: 2rem; color: #fff; font-size: 1rem;}
.submit_btn{display: block; width: 90%; margin: 10px auto; height: 3rem; background: #0fb1ee; color: #fff; text-align: center; line-height: 3rem; border-bottom:3px solid #0190c6;  -webkit-border-radius:0 0 5px 5px ; -moz-border-radius:0 0 5px 5px ;} 
.add_ifo{width: 90%; margin: 2% 5%; }
.add_ifo h2{text-align: left;  padding:5% 2%; }
.add_ifo textarea{width: 100%; border: 1px solid #e7e7e7; border-top: none; padding: 2%; background: #e7e7e7;}
.web_type li{width: 50%; float: left; padding: 2% 5%;}
.web_type li img{width: 100%;}
.web_type li img.hide{display: none;}
.web_type p{display: none;}
.web_type i{display: none;}
.re_chose{width: 50%; padding: 5% 2%; text-align: center;  float: left; color: red; display: none;}
/*????????????*/
.about_banner img{display: block;  width: 100%;}
.about_content{padding: 2% 5%; background: #fff;}
.about_content img{display: block; width: 50%; margin: 0 auto;}
.about_content p{line-height: 2rem; font-size: 0.8rem;}
/*??????*/ 
.sold_list_layout{background: #fff;}
.sold_list{border-bottom: 1px solid #e7e7e7;}
.sold_list .left_box{width: 30%;}
.sold_list .left_box img{display: block; width: 60%; margin: 0 auto;}
.sold_list .right_box{width: 70%; padding-right: 2%;}
.sold_list .right_box h2{line-height: 2rem;}
.sold_list .right_box h2.color1{color:#3ec8a7;}
.sold_list .right_box h2.color2{color:#ffb20e;}
.sold_list .right_box h2.color3{color:#00aced;}
.sold_list .right_box h2.color4{color:#80c269;}
.sold_list .right_box h2.color5{color:#fb6362;}
.sold_list .right_box p{font-size: 0.8rem; padding-bottom: 2%;}
.sold_txt{background: #fff; border-top:1px solid #e7e7e7;}
.sold_txt p{padding: 5%; text-align: center; font-size: 1.0rem; line-height: 2rem;}
/*??????*/
.cost_content{width: 100%;}
.cost_content h2{text-align: center; padding: 3% 0; font-size: 1.2rem; color: #111;}
.cost_content img{display: block; width: 90%; margin: 4% auto; -webkit-transition: all 0.60s ease-in-out;
    -moz-transition: all 0.60s ease-in-out;
    -ms-transition: all 0.60s ease-in-out;
    -o-transition: all 0.60s ease-in-out;}
.cost_content img.chose{width: 90%;}
.tab_title{width: 100%; }
.tab_title p{width: 32%; text-align: center; font-size: 0.8rem; float: left; line-height: 2rem; border-right: 1px solid #e7e7e7; border-bottom: 2px solid #e7e7e7;}
.tab_title p.chose{color: #4ec6f8; border-bottom: 2px solid #4ec6f8;}
.thir_mode h2{text-align: center; padding: 3% 0; font-size: 1.2rem; color: #111;}
.cost_tab_ul{width: 100%; position: relative;}
.cost_tab_ul li{width: 100%; position: absolute; left: 0; top: 0; -webkit-transform:scale(0);-moz-transform:scale(0); -webkit-transition: all 0.60s ease-in-out;
    -moz-transition: all 0.60s ease-in-out;
    -ms-transition: all 0.60s ease-in-out;
    -o-transition: all 0.60s ease-in-out;}
.cost_tab_ul li.show{-webkit-transform:scale(1);-moz-transform:scale(1);}
.cost_tab_ul img{width: 100%;}

/*content*/    
.lrbox h2{text-align: center; font-weight: normal; padding: 1rem 0 0.5rem 0;}
.lrbox{width: 260px; margin: 0 auto;}
.lrbox label{display: block; width: 260px; height: 45px; margin-top: 5px; position: relative;}
.lrbox label span{font-size: 14px; color: #666; position: absolute;  top: 10px; left: 14px;} 
.form_text{display: block; width: 260px; height: 16px; padding: 20px 0 20px 5px;  ; color: #666; font-size: 14px; font-family: ????????????; border: 1px solid #c1cedd;  -webkit-border-radius: 5px; -moz-border-radius: 5px;}
.form_text2{}
.reg_text{display: block; width: 169px; height: 16px; padding: 14px;   background:  #99a5c2; color: #fff; font-size: 14px; font-family: ????????????;}
.verify_text{width: 70px;}
.send_verify{display: block; width: 110px; height: 45px; text-align: center; line-height: 45px; color: #000; font-size: 14px; background: #d9cbc5; float: right; margin-top: -45px;}
.form_submit{width: 219px; height: 40px; color: #fff; font-size: 18px;  background: red; border: none;   }
.go_rigester{display: block; padding-top: 15px; font-size: 14px; text-decoration: underline; color: #000; width: 100%; text-align: center;}
/*????????????*/
.map_board{ position: fixed; left: 0; top: 0; background: #000; display: none;}
.map_box{width: 320px; margin: 0 auto;}
.close_map{position: absolute; right: 0; bottom: 50px; display: block; width: 50px; height: 50px; background: #111; color: #fff; text-align: center; line-height: 45px; font-size: 30px;}
/*????????????*/
.process_box{background:#fff; position: fixed; z-index: 1000000000; top: 0;}
.process img{display: block; position: absolute; left: 50%; top: 50%; margin-left: -70px; margin-top: -75px;}
.process_point1{width: 320px; height: 30px; position: absolute; left: 50%; top:50%;   margin-left: -150px; margin-top: -15px;}
.process_point1 li{width: 15px; height: 30px; float: left;  margin-left: 30px; position: relative;}
.process_point1 li span{width: 15px; height: 15px; position: absolute; background: #fff;  } 
.web_name,.loading{text-align: center; font-size: 38px; color: #fff;}
.web_name{width: 100%; position: absolute; left: 0; top: 50%; margin-top: -70px; letter-spacing: 2px; font-size: 28px;}
.loading{width: 100%; position: absolute; left: 0; top: 50%; margin-top: 40px; font-size: 20px; font-family: Arial;}