@charset "utf-8";
*{margin:0;padding:0;}
body{font-family:"Microsoft YaHei","微软雅黑","宋体";font-size: 14px;}
ul,li{list-style: none;}
a{text-decoration:none;}
img{border:0;vertical-align: middle;}
a{text-decoration: none;cursor: pointer;}
strong{font-weight: normal;}
em,i{font-style: normal;}
.fl{float: left;}
.fr{float: right;}
.clearfix {*zoom: 1;}
.width{width: 1200px;margin: 0 auto;}
.w1180{width: 1180px;margin: 0 auto;}
.clearfix:after {display: block;content: " ";height: 0;visibility: hidden;clear: both;}

.banner{background: url(../../images/hishop/contactus/banner.png) center top no-repeat;height: 430px;}
.banner span{display: block;height: 19px;font-size: 18px;font-family: PingFang SC;font-weight: 400;color: #FFFFFF;line-height: 38px;text-align: center;padding-top: 116px;}

.banner p{display: block;height: 43px;font-size: 46px;font-family: PingFang SC;font-weight: 500;color: #FFFFFF;line-height: 38px;text-align: center;margin-top: 30px;}

.banner a{display: block;width: 192px;height: 52px;background: #FFFFFF;border-radius: 26px;text-align: center;font-size: 20px;font-family: PingFang SC;font-weight: 500;color: #0D59F3;line-height: 52px;margin: 56px auto 0;}



.title{text-align: center;padding: 50px 0 30px;}
.title h1{display: block;height: 36px;color: #000000;font-size: 36px;font-family: PingFang SC;font-weight: 500;line-height: 36px;}


.floor_1{height: auto;overflow: hidden;padding-bottom: 100px;background: #F8F8F8;}
.floor_1 ul{display: flex;justify-content: space-between;flex-wrap: wrap;margin: 0 auto;}

.floor_1 ul li{width: 373px;height: 253px;box-shadow: 0 0 16px rgba(0,0,0,.08);margin-bottom: 30px;background: url(../../images/hishop/contactus/fl1_bg1.png) center top no-repeat;background-size: 100%;position: relative;transition: all 0.5s ease-in-out;overflow: hidden;}
.floor_1 ul li:nth-child(2){background: url(../../images/hishop/contactus/fl1_bg2.png) center top no-repeat;background-size: 100%;}

.floor_1 ul li:nth-child(3){background: url(../../images/hishop/contactus/fl1_bg3.png) center top no-repeat;background-size: 100%;}

.floor_1 ul li:nth-child(4){background: url(../../images/hishop/contactus/fl1_bg4.png) center top no-repeat;background-size: 100%;width: 575px;height: 273px;}

.floor_1 ul li:nth-child(5){background: url(../../images/hishop/contactus/fl1_bg5.png) center top no-repeat;background-size: 100%;width: 575px;height: 273px;}

.floor_1 ul li:nth-child(6){background: url(../../images/hishop/contactus/fl1_bg6.png) center top no-repeat;background-size: 100%;width: 1180px;height: 126px;}

.floor_1 ul li .b_mask span{display: block;height: 21px;font-size: 20px;font-family: PingFang SC;font-weight: 500;color: #FFFFFF;margin-top: 168px;margin-left: 30px;}

.floor_1 ul li:nth-child(6) .b_mask span{margin-top: 40px;margin-left: 30px;}

.floor_1 ul li .b_mask i{display: block;width: 56px;height: 4px;background: #097DFF;margin-top: 20px;margin-left: 30px;}

.floor_1 ul li h2{height: 21px;font-size: 20px;font-family: PingFang SC;font-weight: 400;color: #FFFFFF;line-height: 30px;text-align: center;margin-top: -40px;}

.floor_1 ul li .maskbg{display: none;position: absolute;left: 0;top: 0;width: 373px;height: 253px;opacity: 0.6;background: #191C3A;}

.floor_1 ul li .mask{display: block; position: absolute;bottom: 0; width: 100%; height: 100%;opacity: 0;transform: translateY(100%);transition: all 0.5s ease-in-out;}

.floor_1 ul li:nth-child(4) .maskbg,.floor_1 ul li:nth-child(4) .mask{width: 575px;height: 273px;}

.floor_1 ul li:nth-child(5) .maskbg,.floor_1 ul li:nth-child(5) .mask{width: 575px;height: 273px;}

.floor_1 ul li:nth-child(6) .maskbg,.floor_1 ul li:nth-child(6) .mask{width: 1180px;height: 126px;}

.floor_1 ul li .mask span{display: block;height: 21px;font-size: 20px;font-family: PingFang SC;font-weight: 500;color: #FFFFFF;margin-top: 49px;margin-left: 30px;}

.floor_1 ul li:nth-child(-n+5) .b_mask span::after{display: inline-block;content: "";width: 20px;height: 20px;background: url(../../images/hishop/contactus/fl1_ico.png);background-size: 100%;margin-left: 10px;vertical-align: -3px;}

.floor_1 ul li:nth-child(6) .mask span{margin-top: 40px;margin-left: 30px;}

.floor_1 ul li .mask i{display: block;width: 56px;height: 4px;background: #097DFF;margin-top: 20px;margin-left: 30px;}

.floor_1 ul li .mask p{display: block;height: 22px;font-size: 14px;font-family: PingFang SC;font-weight: 400;color: #FFFFFF;line-height: 22px;margin-left: 30px;margin-top: 20px;}

.floor_1 ul li:hover .b_mask{display: none;} 

.floor_1 ul li:hover .mask{display: block;z-index:99;transform: translateY(0);opacity: 1;} 

.floor_1 ul li:hover .maskbg{display: block;z-index:98;} 

.floor_1 ul li:hover{ background-size: 140%; }