NN2020042801/public/themes/mjmls/static1/css/index.css

/* 头部 */
header{
    width: 100%;
    height: 75px;
    line-height: 75px;
}
header h1{
    width: 145px;
    height: 39px;
    float: left;
    margin-top: 18px;
}
header nav{float: right;font-size: 18px;}
header nav a{
    display: block;
    float: left;
    height: 75px;
}
header nav a:hover{border-bottom: 2px solid #d63317;color: #d63317 !important;}
.nav_active{border-bottom: 2px solid #d63317;color: #d63317 !important;}
header nav em{
    /* display: block; */
    float: left;
    margin: 0 30px;
}
/* banner */
.banner{
    width: 100%;
    /* height: 680px; */
}
.banner img{margin: 0px auto !important;width: 100% !important; display: block;}
/* 关于我们 */
.about{
    height: 650px;
    padding: 30px 0;
}
.h2{
    height: 70px;
    line-height: 70px;
    position: relative;
    color: #3b3b3b;
    font-size: 37px;
    text-align: center;
}
.h2:after{
    position: absolute;
    content: "";
    width: 50px;
    height: 2px;
    background: #d63317;
    left: 50%;
    bottom: 0;
    margin-left: -25px;
}
.about_cont{height: 410px;margin-top: 70px;}
.about_cont_l{
    width: 550px;
    margin-left: 20px;
}
.about_cont_l h3{
    height: 35px;
    margin-top: 50px;;
}
.about_cont_l p{
    line-height: 36px;
    font-size: 18px;
    color: #707070;
    text-indent: 2em;
    margin-top: 20px;
}
.about_cont_r{
    width: 585px;
    height: 410px;
    margin-right: 10px;
    position: relative;
}
.about_cont_r img{width: 100%;}
.about_cont_r:before{
    position: absolute;
    content: "";
    width: 136px;
    height: 6px;
    background: url(../images/xian1.png);
    top: 45px;
    left: -60px;
}
.about_cont_r:after{
    position: absolute;
    content: "";
    width: 225px;
    height: 25px;
    background: url(../images/xian2.png);
    bottom: 20px;
    right: 10px;
}
/* 服务范围 */
.serve{
    width: 100%;
    height: 640px;
    background: url(../images/about_bg.png);
    padding: 30px 0;
}
.serve ul{height: 380px;margin-top: 70px;display: flex;justify-content: space-between;padding: 0 25px;}
.serve ul li{
    float: left;
    width: 260px;
    height: 380px;
    margin-left: 36px;
    background: #fff;
    box-shadow: 0 0 10px #eee;
    cursor: pointer;
    transition: transform 0.5s;
}
.serve ul li:first-child{margin-left: 0;}
.serve ul li img{
    display: block;
    margin: 70px auto 0;
    width: 61px;
    height: 67px;
}
.serve ul li span{
    display: block;
    width: 170px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 28px;
    border-bottom: 1px dashed #b5b5b5;
    margin: 0 auto;
    color: #555;
}
.serve ul li p{
    width: 200px;
    line-height: 30px;
    font-size: 18px;
    color: #404040;
    text-align: center;
    margin: 20px auto 0;
}
.serve ul li:hover{
    transform: translate(0,-30px);
    border-bottom: 4px solid #d63317;
}
/* 我们的核心核心理念 */
.core{
    width: 100%;
    height: 720px;
    background: url(../images/core_bg.png) no-repeat;
}
.core ul{
    height: 350px;
    padding: 255px 20px 0;
    display: flex;
    justify-content: space-between;
}
.core ul li{
    width: 350px;
    height: 350px;
    float: left;
    margin-left: 55px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=4C000000);
    /* opacity: .8; */
    cursor: pointer;
    transition: background 0.5s;
}
.core ul li:first-child{margin-left: 0;}
.core ul li:hover{background: rgba(121, 3, 4, .5);}
.core ul li img{
    display: block;
    width: 72px;
    height: 58px;
    margin: 30px auto 20px;
}
.core ul li p{
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 24px;
}
.core ul li em{
    display: block;
    width: 102px;
    height: 28px;
    margin: 0 auto 15px;
    background: url(../images/our.png) no-repeat;
}
.core ul li span{
    display: block;
    line-height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
}
/* 合作品牌 */
.cooperation{
    padding: 30px 0;
    height: 700px;
}
.cooperation ul{
    margin-top: 40px;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.cooperation ul li{
    width: 170px;
    height: 100px;
    float: left;
    margin-right: 30px;
    border: 1px solid #eee;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
}
.cooperation-six{margin-right: 0 !important;}
/* 底部内容 */
footer{
    height: 150px;
    background: #222222;
    padding-top: 40px;
}
footer p{
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #cccccc;
    font-size: 18px;
}
footer p a{color: #ccc;}
footer p em{margin: 0 20px;}
footer span{
    display: block;
    text-align: center;
    color: #ccc;
    font-size: 18px;
    margin-top: 20px;
}


/* 中间内容 */
.wrapper{padding: 40px 0;}
.txt_img img{display: block;margin: 0 auto;}
.h3{
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    color: #666;
    position: relative;
    /* font-weight: bold; */
}
.h3:after{
    position: absolute;
    content: "";
    width: 70px;
    height: 2px;
    background: #d63317;
    left: 50%;
    bottom: -5px;
    margin-left: -35px;
}
/* 我们的服务 */
.service ul{height: 820px; margin-top: 40px;padding: 0 10px;display: flex;flex-wrap: wrap;justify-content: space-between;}
.service ul li{
    float: left;
    width: 370px;
    height: 380px;
    margin-left: 35px;
    border: 1px solid #e5e5e5;
    margin-bottom: 30px;
    cursor: pointer;
    transition: box-shadow 0.5s;
}
.service ul li:first-child{margin-left: 0;}
.service ul li:first-child + li + li + li{margin-left: 0;}
.service ul li:hover{
    box-shadow: 0 0 10px #ddd;
}
.service ul li img{
    display: block;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin: 57px auto 30px;
}
.service ul li h5{
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    color: #333;
}
.service ul li p{
    line-height: 30px;
    color: #999;
    font-size: 20px;
    text-align: center;
    margin-top: 25px;
}
/* 我们的优势 */
.advantage{margin-top: 40px;}
/* 本例子css */
.slideBox{ width:1200px; height:480px;margin-top: 25px; position:relative;}
.slideBox .hd{ width: 1200px; height:40px;line-height: 40px;  z-index:1; }
.slideBox .hd ul{ zoom:1;display: flex;justify-content: center; text-align: center; }
.slideBox .hd ul li{cursor:pointer;color: #666;font-size: 26px;display: inline-block;}
.slideBox .hd ul li em{margin: 0 15px;}
.slideBox .hd ul li span{position: relative;}
.slideBox .hd ul li.on span{color:#d80001;}
.slideBox .hd ul li.on span:after{
    position: absolute;
    content: "";
    width: 11px;
    height: 10px;
    background: url(../images/trigon.png);
    left: 50%;
    margin-left: -5px;
    bottom: -15px;
}
.slideBox .bd{ position:relative; height: 360px;margin-top: 70px; z-index:0;   }
.slideBox .bd li{
    width: 1200px;
    height: 360px;
    padding: 0 230px;
    cursor: pointer;
}
.slideBox .bd li>img{
    width: 365px;
    height: 360px;
    float: left;
    margin-right: 45px;
}
.slideBox .bd li h3{
    float: left;
    width: 320px;
    height: 22px;
    line-height: 22px;
    color: #d80001;
    text-indent: 20px;
    font-size: 23px;
    margin: 55px 0 20px 0;
}
.slideBox .bd li h3 img{
    float: left;
    /* width: 30px; */
    height: 22px;
}
.slideBox .bd li p{
    float: left;
    width: 320px;
    line-height: 40px;
    font-size: 21px;
    color: #666;
}

/* 下面是前/后按钮代码，如果不需要删除即可 */
.slideBox .prev{position: absolute;width: 29px;height: 53px;background: url(../images/prev.png);top: 50%;margin-top: -27px;left: 40px;}
.slideBox .next{ position: absolute;width: 29px;height: 53px;background: url(../images/next.png);top: 50%;margin-top: -27px;right: 40px;}
.slideBox .prev:hover,
.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
.slideBox .prevStop{ display:none;  }
.slideBox .nextStop{ display:none;  }

/* 加入我们 */
.join{margin-top: 30px;}
.join h3{
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    color: #e13d44;
    margin-bottom: 15px;
    font-weight: bold;
}
.join h3 img{
    display: block;
    float: left;
    margin: 0 13px 0 10px;
}
.join dl{margin-bottom: 20px;}
.join dl dt{
    height: 35px;
    line-height: 35px;
    border-left: 3px solid #cecece;
    background: #f5f5f5;
    font-size: 16px;
    color: #333;
    text-indent: 15px;
    font-weight: bold;
    margin-bottom: 5px;
}
.join dl dd{
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: #666;
}



/* 负责声明 */
.sm h4{
    font-size: 18px;
    line-height: 30px;
    margin: 30px 0 50px 0;
    text-align: center;
    color: #666666;
}
.sm_one{margin-bottom: 30px;height: 550px;overflow: hidden;}
.sm_one dt{width: 320px;height: 550px;position: relative;float: left;margin-right: 45px;}
.sm_one dt img{width: 100%;}
.sm_one dt span{
    display: block;
    width: 52px;
    height: 47px;
    line-height: 47px;
    text-indent: 12px;
    font-size: 20px;
    color: #fff;
    position: absolute;
    background: url(../images/sm_bg.png);
    right: -30px;
}
.sm_one dt span:nth-of-type(1){top: 35px;}
.sm_one dt span:nth-of-type(2){top: 165px;}
.sm_one dt span:nth-of-type(3){top: 295px;}
.sm_one dt span:nth-of-type(4){top: 450px;}
.sm_one dt span:first-child{top: 35px;}
.sm_one dt span:first-child + span{top: 165px;}
.sm_one dt span:first-child + span + span{top: 295px;}
.sm_one dt span:first-child + span + span + span{top: 450px;}
.sm_one dd{
    float: left;
    width: 835px;
    padding: 18px 0;
    line-height: 30px;
    font-size: 16px;
    color: #666;
    border-bottom: 1px dashed #d0d0d0;
}
.sm_one dd:last-of-type{border: 0;}

.sm_two{margin-bottom: 30px;height: 340px;overflow: hidden;}
.sm_two dt{width: 320px;height: 340px;position: relative;float: right;}
.sm_two dt img{width: 100%;}
.sm_two dt span{
    display: block;
    width: 52px;
    height: 47px;
    line-height: 47px;
    text-indent: 18px;
    font-size: 20px;
    color: #fff;
    position: absolute;
    background: url(../images/sm_bg1.png);
    left: -30px;
}
.sm_two dt span:nth-of-type(1){top: 25px;}
.sm_two dt span:nth-of-type(2){top: 135px;}
.sm_two dt span:nth-of-type(3){top: 265px;}
.sm_two dt span:first-child{top: 25px;}
.sm_two dt span:first-child + span{top: 135px;}
.sm_two dt span:first-child + span + span{top: 265px;}
.sm_two dd{
    float: left;
    width: 835px;
    padding: 18px 0;
    line-height: 30px;
    font-size: 16px;
    color: #666;
    border-bottom: 1px dashed #d0d0d0;
}
.sm_two dd:last-of-type{border: 0;}

.sm_three{margin-bottom: 30px;height: 550px;overflow: hidden;}
.sm_three dt{width: 320px;height: 550px;position: relative;float: left;margin-right: 45px;}
.sm_three dt img{width: 100%;}
.sm_three dt span{
    display: block;
    width: 52px;
    height: 47px;
    line-height: 47px;
    text-indent: 12px;
    font-size: 20px;
    color: #fff;
    position: absolute;
    background: url(../images/sm_bg.png);
    right: -30px;
}
.sm_three dt span:nth-of-type(1){top: 35px;}
.sm_three dt span:nth-of-type(2){top: 180px;}
.sm_three dt span:nth-of-type(3){top: 295px;}
.sm_three dt span:nth-of-type(4){top: 450px;}
.sm_three dt span:first-child{top: 35px;}
.sm_three dt span:first-child + span{top: 180px;}
.sm_three dt span:first-child + span + span{top: 295px;}
.sm_three dt span:first-child + span + span + span{top: 450px;}
.sm_three dd{
    float: left;
    width: 835px;
    padding: 18px 0;
    line-height: 30px;
    font-size: 16px;
    color: #666;
    border-bottom: 1px dashed #d0d0d0;
}
.sm_three dd:last-of-type{border: 0;}



/* 删除投诉 */
.ts1{
    margin-top: 30px;
}
.ts1 p{
    line-height: 35px;
    color: #666;
    font-size: 18px;
}
.ts1 p a{color: #0024ff;}
.ts2{
    width: 1200px;
    height: 267px;
    background: url(../images/ts_bg.png);
    padding: 40px;
}
.ts2 h3{
    width: 100%;
    height: 33px;
    line-height: 33px;
    background: url(../images/ts.png) no-repeat;
    margin-bottom: 30px;
}
.ts2 h3 strong{
    float: left;
    font-size: 25px;
    color: #404040;
    margin-left: 40px;
}
.ts2 h3 span{
    font-size: 12px;
    float: left;
    color: #404040;
    margin: 6px 0 0 10px;
}
.ts2 p{
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #666;
    font-size: 18px;
    margin-top: 15px;
}
.ts2 p span{
    display: block;
    float: left;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #b2b2b2;
    border-radius: 50%;
    color: #f5f5f5;
}
.ts3{margin-top: 30px;}
.ts3 h3{line-height: 40px;color: #ff0000;font-size: 18px;}
.ts3 p{line-height: 40px;color: #666;font-size: 18px;}

/* 联系我们 */
.lx ul{
    height: 340px;
    padding: 0 130px;
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}
.lx ul li{
    float: left;
    width: 195px;
    height: 340px;
    margin-left: 177.5px;
}
.lx ul li:first-child{margin-left: 0;}
.lx ul li em{
    display: block;
    width: 180px;
    height: 180px;
    line-height: 180px;
    border: 1px dashed #d80001;
    border-radius: 50%;
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.lx ul li em img{
    vertical-align: middle;
}
.lx ul li em:hover img{
    animation: tiao 1s linear;
}
@keyframes tiao{
    0% {transform: translate(0,0);}
    25% {transform: translate(0,-20px);}
    50% {transform: translate(0,0);}
    75% {transform: translate(0,-10px);}
    100% {transform: translate(0,0);}
}
.lx ul li h3{
    line-height: 40px;
    color: #666;
    font-size: 24px;
    text-align: center;
}
.lx ul li p{
    line-height: 40px;
    color: #d80001;
    font-size: 24px;
    text-align: center;
}
.lx ul li span{
    display: block;
    width: 107px;
    height: 30px;
    background: url(../images/lx4.png) no-repeat;
    margin: 10px auto;
}
/* 地图 */
.ditu{
    width: 1170px;
    height: 506px;
    margin: 70px auto;
}