* {
    font-family: "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

a{ list-style: none; text-decoration: none;}

img{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

input, button, select, textarea {
    outline: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    border-radius: 0;
}

li{ list-style: none;}

.none{ display: none;}
.main_div{ min-width: 1200px;}
.maindiv{ margin: 0 auto; width: 1200px;}
.sub_div{ width: 1200px;}
.top{margin: 0 auto;position: relative;padding: 15px 0;}
.logo{text-align: center;/* padding: 15px 0; */}
.logo img{ height: 40px;}
.menu{height: 70px;width: 80px;background: url(../image/menu.png) left center no-repeat;position: absolute;left: 0;top: 0;}
.menu.on{ background-position: right center;}
.top_frame{ position: relative;}
.pc_menu{ position: absolute; left: 0; top: 100%; background: #000; width: 100%; height: 60px; display: none; z-index: 2;}
.pc_menu ul{ overflow: hidden; width: 1200px; margin: 0 auto;}
.pc_menu ul li{ color: #fff; width: 155px; float: left;}
.pc_menu ul li a{padding-top: 32px;line-height: 28px;display: block;font-size: 12px;position: relative;text-align: center;color: #fff;}
.pc_menu ul li a:after { position: absolute;  left: 50%;  top: 15px;  margin-left: -10px; content: ""; width: 21px; height: 20px; }
.pc_menu ul li a.on,.pc_menu ul li a:hover{ background: #c8103d;}
.icon-home::after{ background: url(../image/home.png) no-repeat;}
.icon-case::after{ background: url(../image/case.png) no-repeat;}
.icon-about::after{ background: url(../image/about.png) no-repeat;}
.icon-lianxi::after{ background: url(../image/lianxi.png) no-repeat;}
.icon-home:hover::after,.icon-home.on::after{ background: url(../image/home1.png) no-repeat;}
.icon-case:hover::after,.icon-case.on::after{ background: url(../image/case1.png) no-repeat;}
.icon-about:hover::after,.icon-about.on::after{ background: url(../image/about1.png) no-repeat;}
.icon-lianxi:hover::after,.icon-lianxi.on::after{ background: url(../image/lianxi1.png) no-repeat;}

.nav ul li a{ display: block; font-size: 16px; position: relative; padding-left: 60px; }
.nav ul li a:after { position: absolute;  left: 20px;  top: 50%;  margin-top: -10px; content: ""; width: 21px; height: 20px; }
.wap-home a::after{ background: url(../image/home.png) no-repeat;}
.wap-case a::after{ background: url(../image/case.png) no-repeat;}
.wap-about a::after{ background: url(../image/about.png) no-repeat;}
.wap-lianxi a::after{ background: url(../image/lianxi.png) no-repeat;}
.nav ul li.on a,.nav ul li a:hover{ background: #c8103d;}
.wap-home.on a::after,.wap-home a:hover::after{ background: url(../image/home1.png) no-repeat;}
.wap-case.on a::after,.wap-case a:hover::after{ background: url(../image/case1.png) no-repeat;}
.wap-about.on a::after,.wap-about a:hover::after{ background: url(../image/about1.png) no-repeat;}
.wap-lianxi.on a::after,.wap-lianxi a:hover::after{ background: url(../image/lianxi1.png) no-repeat;}

.banner{ max-height: 480px; overflow: hidden;}
.banner .swiper{ max-height: 480px;}
.banner img{ width: 100%;}

.service{ margin: 0 auto;}
.service_t{padding: 80px 0 20px;text-align: center;}
.service_t h1{ text-align: center; padding: 2px 0; font-size: 24px; font-weight: normal;}
.service_t h2{ text-align: center; padding: 2px 0; font-size: 18px; font-weight: bold;}
.service_t h3{ text-align: center; padding: 2px 0; font-size: 16px; font-weight: normal;}
.service_frame{margin: 0 auto;overflow: hidden;padding: 50px 100px 80px;}
.service_frame .service_list{ width:25%; float: left; text-align: center;}
.service_list div{ padding: 20px;}
.service_list h1{ font-size: 18px; padding: 5px 0; text-align: center;}
.service_list p{ font-size: 12px; padding: 5px 0; text-align: center;}

.bottom_frame{ background: #eee;}
.bottom{margin: 0 auto;text-align: center;padding: 0px 0;overflow: hidden;position: relative;}
.bottom img{ max-width: 100%;}

.customer{ margin: 0 auto; padding-top: 50px;}
.customer_t{ padding: 30px 0; text-align: center;}
.customer_t h1{ text-align: center; padding: 2px 0; font-size: 24px; font-weight: normal;}
.customer_t h2{ text-align: center; padding: 2px 0; font-size: 18px; font-weight: bold;}
.customer_t h3{ text-align: center; padding: 2px 0; font-size: 16px; font-weight: normal;}
.customer_frame{ margin: 0 auto; overflow: hidden; padding: 50px 0 100px;}

.case{ margin: 0 auto;overflow: hidden;column-count: 2;column-width: 584px;column-gap: 10px;position: relative;}
.case_t{  overflow: hidden; width: 584px; margin-right: 10px;}
.case_t h1{ font-size: 38px; background: url(../image/case_t.png) left bottom no-repeat; display: inline-block; background-size: 240px auto;}
.case_t h1 span{ font-size: 20px; padding-left: 20px;}
.case_t p{ font-size: 18px; padding: 10px 0 20px;}
.case_list{ overflow: hidden; width: 584px; margin-right: 10px; margin-top: 20px; position: relative;}
.case_bmore{position: absolute;bottom: 0;right: 45px; z-index: 1;}

.case_img img{ max-width: 100%;width: 100%!important; height: auto!important;}

.box-case .post,
.case_list a {
display: block;
}
.case_list a {
text-decoration: none;
}
.case_list .txt,
.case_list .pic {
display: block;
}
.case_list .txt {
color: #fff;
font-size: 24px;
height: 70px;
position: absolute;
left: 40px;
bottom: 40px;
z-index: 6;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
.case_list a:hover .txt {
bottom: 100px;
}
.case_list a .more {
background: #141619 url(//ranux.cn/wordpress/wp-content/themes/rex/images/slice/box-cases-more-arrows-rt.png) 163px 21px no-repeat;
color: #fff;
font-size: 18px;
height: 50px;
line-height: 50px;
padding-left: 28px;
width: 172px;
display: block;
position: absolute;
left: 40px;
bottom: 20px;
opacity: 0;
z-index: 2;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
.case_list a:hover .more {
bottom: 50px;
opacity: 1;
}
.case_list .pic,
.case_list .pic img {
position: relative;
}
.case_list .pic {
overflow: hidden;
}
.case_list .pic:after {
content: " ";
display: block;
height: 100%;
width: 100%;
background: rgba(41, 44, 51, .0);
z-index: 1;
position: absolute;
left: 0;
top: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
.case_list a:hover .pic:after {
background-color: rgba(41, 44, 51, .6);
}
.case_list .pic img {
top: 0;
left: 0;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
max-width: 100%;
}
.case_list a:hover .pic img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
} 


.m_headerWrap{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 22;
}
.m_headerWrap .nav{
position: absolute;
top: 50px;
left: 0px;
right: 0px;
display: none;
}
.m_headerWrap .nav a{
display: block;
height: 60px;
line-height: 60px;
color: #fff;
border-bottom: 1px solid rgba(170,173,179,0.4);
text-decoration: none;
}
.m_headerWrap .nav .current_page_item a{
color: #fff;
border-bottom: 3px solid #fff;
}
.m_headerWrap .nav .current_menu_item a{
color: #fff;
border-bottom: 3px solid #fff;
}
.mc{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0);display: none;z-index: 21;}
.m_headerWrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 43px;
}
.m_headerWrap.on{
background: #000;
}
.m_headerWrap h1 {padding-top: 15px;padding-left: 20px;}
.m_headerWrap h1 a {background: url(//ranux.cn/wordpress/wp-content/themes/rex/images/logo.png?t=201903162342) no-repeat 0 0;background-size: 100%;overflow: hidden;line-height: 999px;display: block;width: 74px;height: 21px;}
.trans, .cube {
-webkit-transition: all .3s cubic-bezier(0.245, 0.145, 1.355, 1);
-moz-transition: all .3s cubic-bezier(0.445, 0.145, 0.355, 1);
-o-transition: all .3s cubic-bezier(0.445, 0.145, 0.355, 1);
-ms-transition: all .3s cubic-bezier(0.445, 1.045, 0.355, 1);
transition: all .3s cubic-bezier(0.445, 0.145, 0.355, 1);
}
.m_headerWrap .m_menu_btn{position: absolute;top: 17px;right: 20px;width: 30px;height:30px;z-index: 2;}
.menu-handler { width: 16px; height: 16px; cursor: pointer; 
position: relative; 
transition: all 0.3s cubic-bezier(0.445, 0.145, 0.355, 1); 
-webkit-transition: all 0.3s cubic-bezier(0.445, 0.145, 0.355, 1); 
-moz-transition: all 0.3s cubic-bezier(0.445, 0.145, 0.355, 1); 
}
.menu-handler .burger {width: 22px;height: 2px;background: #000;display: block;position: absolute;z-index: 5;top: 0;left: 50%;margin: 0px 0px 0px 0;transform-origin: center;-webkit-transform-origin: center;-moz-transform-origin: center;-o-transform-origin: center;-ms-transform-origin: center;}
.menu-handler .burger-2 { top: 6px; }
.menu-handler .burger-3 { top: 12px; }
.menu-handler.active .burger-1 { top:3px; -moz-transform: rotate(225deg); -webkit-transform: rotate(225deg); -o-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); }
.menu-handler.active .burger-2 { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0); opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; }
.menu-handler.active .burger-3 { top:  3px; -moz-transform: rotate(-225deg); -webkit-transform: rotate(-225deg); -o-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg); } .flexslider .slides > li a img{
float: left;
}
.m_img{
display: none;
}

.map{width: 700px;float: left;}
.bottom_txt{width: 500px;float: right;text-align: center;}
.bottom_text p{ line-height: 30px; font-size: 16px;}
.address{padding-top: 20px;position: relative;margin-top: 0px;}
.address p{line-height: 30px;font-size: 16px;padding-left: 50px;text-align: left;color: #6c6c6c;}
.address::after{/* position: absolute; *//* content: ""; */display: block;width: 200px;height: 3px;background: #b1b0af;left: 0;top: 0px;}

.ewm{width: 160px;text-align: center;/* position: absolute; */right: 0;bottom: 50px;margin: 0 auto;padding-top: 70px;}
.ewm p{line-height: 30px;font-size: 16px;color: #5b5b5b;}

.index_caseTabs{width: 100%; overflow: hidden;}
.index_case{ width: 100%; overflow: hidden; padding: 20px 0 40px; display: none;column-count: 2;column-width: 584px;column-gap: 10px;}
.index_caseTabs .index_case:first-child{ display: block;}
.case_list1{ width: 584px; margin: 0px 15px 20px 0; position: relative;}
.box-case .post,
.case_list1 a {
display: block;
}
.case_list1 a {
text-decoration: none;
}
.case_list1 .txt,
.case_list1 .pic {
display: block;
}
.case_list1 .txt {
color: #fff;
font-size: 24px;
height: 70px;
position: absolute;
left: 40px;
bottom: 40px;
z-index: 6;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
.case_list1 a:hover .txt {
bottom: 100px;
}
.case_list1 a .more {
background: #141619 url(//ranux.cn/wordpress/wp-content/themes/rex/images/slice/box-cases-more-arrows-rt.png) 163px 21px no-repeat;
color: #fff;
font-size: 18px;
height: 50px;
line-height: 50px;
padding-left: 28px;
width: 172px;
display: block;
position: absolute;
left: 40px;
bottom: 20px;
opacity: 0;
z-index: 2;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
.case_list1 a:hover .more {
bottom: 50px;
opacity: 1;
}
.case_list1 .pic,
.case_list1 .pic img {
position: relative;
}
.case_list1 .pic {
overflow: hidden;
}
.case_list1 .pic:after {
content: " ";
display: block;
height: 100%;
width: 100%;
background: rgba(41, 44, 51, .0);
z-index: 1;
position: absolute;
left: 0;
top: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
.case_list1 a:hover .pic:after {
background-color: rgba(41, 44, 51, .6);
}
.case_list1 .pic img {
top: 0;
left: 0;
max-width: 100%;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
.case_list1 a:hover .pic img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
} 

.index_case_t{  overflow: hidden; width: 584px; margin-right: 10px; padding-top: 40px;}
.index_case_t h1{font-size: 38px;background: url(../image/case_t.png) left bottom no-repeat;display: inline-block; background-size: 210px auto;}
.index_case_t h1 span{ font-size: 20px; padding-left: 20px;}
.index_case_t p{font-size: 18px;padding: 10px 0 20px;}

.case_tabs{ margin: 20px auto 0;}
.case_tabs ul{ overflow: hidden; background: #efefef;}
.case_tabs li{ float: left; padding: 5px 0px; line-height: 44px; cursor: pointer; width: 146px; text-align: center; color: #595757; font-size: 20px; letter-spacing: 2px;}
.case_tabs li.on{ background: #c8103d; color: #fff;}

#videoBox{width: 100%;position: fixed;left: 0%;top: 0;z-index: 99;background: rgba(0,0,0,0.6);height: 100%; display: none;}
#videoBox .vjs-big-play-button{ top: 50%; left: 50%; transform: translate(-50%,-50%);}
.video_frame{display: flex;width: 80%;height: 80%;align-items: center;position: fixed;left: 10%;top: 10%;}
#videoBox .video_close{ position: fixed; right: 20px; top: 20px;-webkit-touch-callout: auto; width: auto!important; height: auto!important;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: auto;
   -ms-user-select: auto;
   user-select: auto;}

.about_txt{ padding: 20px 0 40px;}
.about_txt h1{ font-size: 34px; padding: 20px 0 20px 25px; color: #353535; background: url(../image/about_title.png) left center no-repeat;}
.about_txt h2{ font-size: 20px; padding: 20px 0; color: #353535; }
.about_txt p{ font-size: 20px; line-height: 50px; color: #353535; padding: 20px 0;}

.contact_txt{ padding: 20px 0 40px;}
.contact_txt p{ font-size: 20px; line-height: 50px; color: #353535; padding: 20px 0;}

.contact_txt1{ padding: 20px 0 80px;}
.contact_txt1 p{ font-size: 20px; line-height: 50px; color: #353535; padding: 10px 0 10px 60px;}
.contact_email{ background: url(../image/email.png) left center no-repeat;}
.contact_address{ background: url(../image/address.png) left center no-repeat;}

@media screen and (orientation: portrait) {
    .top{ padding: 5px 0;}
    .sub_div,.main_div{ width: 100%; min-width: 100%; background: #fff; z-index: 22;}
    .m_headerWrap { display: block; z-index: 22;}
    .menu{ display: none;}
    .service_frame .service_list{ width: 100%; float: none; margin-top: 20px;}
    .service_frame{ padding: 10px 0;}
    .service_t{ padding: 20px 0 10px;}
    .case{column-count: 1;}
    .case_t{ text-align: center; width: 100%; margin-top: 40px;}
    .case_t img{ width: 60%;}
    .case_list{ width: 90%; margin: 20px auto 0;}
    .customer_frame{ text-align: center; padding: 20px 0 40px;}
    .customer_t{ padding: 20px 0;}
    .customer_frame img{ width: 90%;}
    .case_bmore{ position: static; margin: 20px auto 0; text-align: center;}
    .case_bmore img{ width: 50%;}
    .bottom{ padding: 20px;}
    .customer{ padding-top: 20px;}
    .case_t p{ text-align: center;}

    .map{ width: 100%; text-align: center; float: none;}
    .bottom_txt{ width: 100%; text-align: left; float: none;}
    .address{ margin-top: 10px;}
    .ewm{ width: 100%; position: static; padding: 20px;}

    .case_list1{ width: 100%; float: none;}
    .maindiv{ width: 100%;}
    .index_case_t{  text-align: center; width: 100%; margin-top: 10px;}
    .case_tabs{ width: 90%;}
    .case_tabs li{ width: 25%; font-size: 18px;}
    .case_list1{ width: 90%; margin: 20px auto 0;}

    .contact_txt p{ font-size: 18px;}
    .contact_txt1 p{ line-height: 40px;font-size: 18px;}

    .about_txt{ padding: 20px 0 20px;}
    .about_txt h1{ font-size: 24px; padding: 20px 0; color: #353535; text-align: center; background: url(../image/about_title.png) center center no-repeat;}
    .about_txt h2{ font-size: 18px; padding: 20px; color: #353535;}
    .about_txt p{ font-size: 18px;  color: #353535; padding:10px 20px; line-height: 40px;}
    .about_img{ text-align: center;}
    .about_img img{ max-width: 90%;}
    .contact_txt{ font-size: 18px;  color: #353535; padding: 10px 20px; line-height: 40px;}
    .contact_txt1{ font-size: 18px;  color: #353535; padding: 10px 20px; line-height: 40px;}
    #videoBox{width: 100%;position: fixed;left: 0%;top: 0;z-index: 99;background: rgba(0,0,0,0.6);height: 100%;}
#videoBox .vjs-big-play-button{ top: 50%; left: 50%; transform: translate(-50%,-50%);}
.video_frame{display: flex;width: 100%;height: 100%;align-items: center;position: fixed;left: 0%;top: 50%; transform: translateY(-50%); }
.video_close{ position: fixed; right: 20px; top: 20px;}

}