*{
    margin:0;padding: 0;font-family: "微软雅黑";
    font-style: normal;
}
body{
    overflow-x: hidden;
}
em{
    font-style: normal;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: #fff;
}
body{
    min-width: 1200px;  
}
.reach{
    background: url('../../img/office/banner.jpg') no-repeat;width: 100%;height: 910px;
    background-size: cover;
    transition:  3s all;
    background-size: 110% 110%;

}
.dk{
    width: 100%;background-color: #fff;height: 100%;min-width: 1200px;
    /* width: 1960px; */
}
.heartbeat{animation:heartbeat 1.5s infinite;-webkit-animation:heartbeat 1.5s infinite}
@-webkit-keyframes heartbeat{0%,30%,50%,60%,80%{-webkit-transform:scale(1)} 40%,70%{-webkit-transform:scale(1.1)}}
@keyframes heartbeat{0%,30%,50%,60%,80%{transform:scale(1);} 40%,70%{transform:scale(1.1)}}
.reach-xian{
    /* width: 1322px;height: 600px; */
    width: 0;height: 0;
    visibility: hidden;
    /* border:3px solid #fff; */
    position: absolute;top: 17%;left: 15%;
    transition: 3s all;
    transform: scale(0);opacity: 0;z-index: 20;
}
.top{
    border-top:3px solid #fff;width: 0;transition: 2s all;
    height: 0;
}
.left{
    border-left:3px solid #fff;height: 10px;
    width: 0;transition: 2s all;
    position: relative;top: 0;
}
.right{
    border-right: 3px solid #fff;height: 0;width: 0;
    transition: 2s all;position: absolute;
    right: 0;top: 0;
}
.bottom{
    border-bottom: 3px solid #fff;height: 0;width: 0;
    transition: 2s all;position: absolute;
    top:100%;left: 0;
}
.reach-text{
    width: 1278px;height: 556px;background: rgba(255, 255, 255, 0.7);
    position: absolute;margin:22px;text-align: center;position: absolute;
    top: 0;left: 0;
}
.reach-text h1{
    font-size: 112px;margin-top: 112px;
    transition: 3s all;transform: scale(0);
}
.reach-text>i{
    width: 715px;height: 2px;display: block;margin:0 auto;
    border-top:1px solid #000000;margin-top: 13px;margin-bottom: 22px;
}
.reach-text ul{
    transition: 3s all;transform: scale(0);
    width: 940px;margin: 0 auto;display: flex; justify-content: center;font-size: 27px;
}
.reach-text li{
    padding-right: 14px;margin-right: 14px;position: relative;
}
.reach-text>ul>li>i{
     height: 20px; margin:0;border-right: 1px solid #000000;position: absolute;top:30%;right: 0;
}
.reach-text a{
    display: block;line-height: 60px;
    width: 480px; height: 60px;background: #333333; font-size: 25px; color: #fff;
    margin:0 auto;margin-top:46px; border-radius: 10px;
}
.reach-text p{
    margin-top: 72px;letter-spacing:15px;font-size: 24px;color: #666666;transition: 3s all;transform: scale(0);
}
.banner-back{
    left: 0;
    top: 0;
    width: 100%;
    height: 910px;
    position: absolute;
    z-index: 990;
    background: rgba(0,0,0,.2);
    transition: 1.5s 1.5s;
    -webkit-transition: 1s 1s;
    z-index: -2;
}
.designs{
    padding-top: 120px;
}
.sort{
    background: url('../../img/office/Choice.png') no-repeat;
    width: 100%;height: 115px;position: relative;line-height: 73px;
}
.sort>p{
    font-size: 28px; color: #333333;text-align: center;
    position: absolute;left: 44.5%;
}
.sort>em{
    font-size: 24px; color: #333333;text-align: center;
    position: absolute;left: 46.5%;top:48%;
}
.fashion{
    position: relative;height: 165px;
    width: 1200px; margin:0 auto;display: flex;margin-top: 60px;
}
.space{
    width: 156px;height: 156px;border:1px solid #777777;border-radius: 100%;
    position: relative;margin-left: 3%;
}
.slide-1{
    position: absolute;top:0;left:0;opacity: 0;
}
.slide-2{
    position: absolute;top:0;left: 0;opacity: 0;
}
.slide-3{
    position: absolute;top:0;left: 0;opacity: 0;
}
.slide-4{
    position: absolute;top:0;left: 0;opacity: 0;
}
.slide-5{
    position: absolute;top:0;left: 0;opacity: 0;
}
.inside{
    width: 140px;height: 140px;border:2px solid #333333;border-radius: 100%;margin:7px;text-align: center;transition: .6s;
}
.inside img{
    display: block;position: absolute;top: 30px;left: 51px;
}
.inside em{
width: 100%;font-size: 20px; color: #333333;font-weight: bold;
margin-top: 85px;display: inline-block;
}
.inside:hover {
background: #333333;color: #fff;
transform: rotateY(180deg);
transition: .6s;
}
.inside:hover em{
transform: rotateY(180deg);
color: #fff;
transition: .6s;
margin-top: 50px;
}
.lce{
background: url('../../img/office/bx.png') no-repeat;display: block; position: absolute;
width: 55px;height: 55px;margin: 20px 0 0 40px;
}
.lve{
background: url('../../img/office/bd.png') no-repeat;display: block; position: absolute;
width: 80px;height: 80px;left: 30px;top: 30px;
}
.lce-1{
background: url('../../img/office/shbgs-x.png') no-repeat;display: block; position: absolute;
width: 55px;height: 55px;margin: 20px 0 0 45px;
}
.lve-1{
background: url('../../img/office/shbgs-d.png') no-repeat;display: block; position: absolute;
top: 30px;width: 80px;height: 80px;left: 30px;
}
.lce-2{
background: url('../../img/office/xdbg-x.png') no-repeat;display: block; position: absolute;
width: 55px;height: 55px;margin: 25px 0 0 45px;
}
.lve-2{
background: url('../../img/office/xdbg-d.png') no-repeat;display: block; position: absolute;
top: 30px;width: 80px;height: 80px;left: 30px;
}
.lce-3{
background: url('../../img/office/cybg-x.png') no-repeat;display: block; position: absolute;
width: 55px;height: 55px;margin: 25px 0 0 45px;
}
.lve-3{
background: url('../../img/office/cybg-d.png') no-repeat;display: block; position: absolute;
top: 30px;width: 80px;height: 80px;left: 30px;
}
.lce-4{
background: url('../../img/office/gjbg-x.png') no-repeat;display: block; position: absolute;
width: 55px;height: 55px;margin: 25px 0 0 45px;
}
.lve-4{
background: url('../../img/office/gjbg-d.png') no-repeat;display: block; position: absolute;
top: 30px;width: 80px;height: 80px;left: 30px;
}
/* 办公设计 */
.sentence{
    width: 100%;margin-top: 120px;
}
.through{
    background: url('../../img/office/task-ot.png') no-repeat;position: relative;
    width: 100%;height: 675px;margin-top: 60px;overflow: hidden;
}
.sort-1 {
    background: url(../../img/office/bgsj.png) no-repeat;width: 100%;height: 115px;
    position: relative;line-height: 73px;
}
.sort-1 p{
    font-size: 28px;color: #333333;text-align: center;position: absolute;left: 47.5%;
}
.sort-1 em{
    font-size: 24px;color: #333333;text-align: center; position: absolute;left: 46.5%;top: 48%;
}
.through-text{
    width: 1532px; height: 608px;margin: 0 auto; display: flex;flex-wrap: wrap;
    min-width: 1200px;
}
.through-text ul{
    display: flex;flex-wrap: wrap;margin-top: 65px;transform: scale(0);transition: 2s;opacity: 0;
}
.through-text ul li{
    margin-right: 10px;height: 266px;margin-bottom: 10px;position: relative;cursor: pointer;overflow: hidden;
}
.mask{
    background: rgba(0, 0, 0, .5);width: 373px;height: 266px;position: absolute;top:0;left: 0;font-size: 20px;
    opacity: 0;
}
.mask p{
    width: 300px;height: 55px; border:1px solid #fff;text-align: center;line-height: 55px;border-radius: 8px;
    position: absolute;top:-60px;left: 35px;opacity: 0;color:#fff;
}
.mask em{
    width: 300px;height: 55px; border:1px solid #fff;text-align: center;line-height: 55px;border-radius: 8px;
    display: block; position: absolute;top:270px;left: 35px;opacity: 0;color:#fff;
}
.through-text ul li:hover .mask{
    color:#fff;opacity: 1;
}
.through-text ul li:hover p{
    top:70px; opacity: 1;transition: 1s all;
}
.through-text ul li:hover em{
    top:140px;opacity: 1;transition: 1s all;
}
.through-text ul li img{
    transition: .5s all;
}
.through-text ul li:hover img{
    transform: scale(1.1);
}
/* 多样的办公空间 */
.sort-2 {
    background: url(../../img/office/dy.png) no-repeat;width: 100%;height: 115px;
    position: relative;line-height: 73px;margin-top: 120px;
}
.sort-2 p{
    font-size: 28px;color: #333333;text-align: center;position: absolute;left: 45%;
}
.sort-2 em{
    font-size: 24px;color: #333333;text-align: center; position: absolute;left: 45.5%;top: 48%;
}
.trousers{
    width: 1200px; margin:0 auto;height: 400px;
}
.trousers ul{
    display: flex;margin-top: 200px;height: 400px;transition: 1s;
}
.trousers ul li{
    margin-right: 40px; position: relative;overflow: hidden;width: 270px;
}
.trousers ul li:last-child{
    margin:0;
}
.trousers ul li div{
    position: absolute;top:98%;left: 0;width: 270px; height: 400px;
    background: rgba(53, 66, 82, 0.7)
}
.trousers ul li div em{
    font-size: 24px;color:#fff;
    margin-top:50px;display: block;
    text-align: center;
}
.trousers ul li div p{
    font-size: 18px; color:#fff;
    margin:30px;line-height: 30px;
}
.trousers ul li:hover .demo{
    top:0;transition: 1s all;
}
.demo-1{
    background: rgba(0, 181, 152, 0.46) !important;
}
.demo-2{
    background: rgba(68, 88, 185, 0.55) !important;
}
.demo-3{
    background: rgba(0, 155, 212, 0.19) !important;
}
.trousers ul li:hover .demo-1{
    top:0;transition: 1s all;
}
.trousers ul li:hover .demo-2{
    top:0;transition: 1s all;
}
.trousers ul li:hover .demo-3{
    top:0;transition: 1s all;
}
/* 一体化办公 */
.sort-3 {
    background: url(../../img/office/ythbg.png) no-repeat;width: 100%;height: 115px;
    position: relative;line-height: 73px;margin-top: 120px;
}
.sort-3 p{
    font-size: 28px;color: #333333;text-align: center;position: absolute;left: 46.5%;
}
.sort-3 em{
    font-size: 24px;color: #333333;text-align: center; position: absolute;left: 45%;top: 48%;
}
.rotate{
    width: 1200px;height: 430px;position: relative;top:15%;margin:0 auto;
}
.rotate-1{
    width: 164px;height: 219px;position: relative;
}
.rotate-2{
    width: 164px;height: 219px;position: relative; left: 27%; bottom:51%;
}
.rotate-3{
    width: 164px;height: 219px;position: relative; left: 56%; bottom:102%;
}
.rotate-4{
    width: 164px;height: 219px;position: relative; left: 86%; bottom:152%;
}
.rotate-5{
    width: 164px;height: 219px;position: absolute; left: 14%; top:43%;
}
.rotate-6{
    width: 164px;height: 219px;position: absolute; left: 42%; top:43%;
}
.rotate-7{
    width: 164px;height: 219px;position: absolute; left: 71%; top:43%;
}
.num{
    position: absolute;top:13px;left: 64px;
}
.num-1{
    position: absolute;top:240px;left: 60px;
}
.lamp{
    position: absolute; top:53px;left: 0;cursor: pointer;
}
.img-2{
    position: absolute;top:22px;left: 22px;
}
.lamp p{
    position: absolute;top:65px;left: 34px;font-size: 24px;color:#fff;
}
.lamp:hover img{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
} 
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}
.zjis{
    background: url('../../img/office/zxjk.png') no-repeat;width: 70px;height: 70px;position: absolute;top: 46%;left: 11%;
}
.zjis-1{
    background: url('../../img/office/zxjk.png') no-repeat;width: 70px;height: 70px;position: absolute;top: 46%;left: 39%;
}
.zjis-2{
    background: url('../../img/office/zxjk.png') no-repeat;width: 70px;height: 70px;position: absolute;top: 46%;left: 68%;
}
.zxcv{
    background: url('../../img/office/zxcv.png') no-repeat;width: 70px;height: 70px;position: absolute;top: 47%;left: 25%;
}
.zxcv-1{
    background: url('../../img/office/zxcv.png') no-repeat;width: 70px;height: 70px;position: absolute;top: 46%;left: 53%;
}
.zxcv-2{
    background: url('../../img/office/zxcv.png') no-repeat;width: 70px;height: 70px;position: absolute;top: 48%;left: 83%;
}
/* 办公空间设计精品案例 */
.sort-4 {
    background: url(../../img/office/bgk.png) no-repeat;width: 100%;height: 115px;
    position: relative;line-height: 73px;margin-top: 120px;
}
.sort-4 p{
    font-size: 28px;color: #333333;text-align: center;position: absolute;left: 43%;
}
.sort-4 em{
    font-size: 24px;color: #333333;text-align: center; position: absolute;left: 46%;top: 48%;
}
.Boutique-text{
    width: 1200px;height: 1375px; margin:0 auto;display: flex;flex-wrap: wrap;margin-top: 55px;
}
.detection{
    width: 600px;height: 340px;margin-top:100px;transition: .6s;
}
.Plug-1{
    margin-top:100px;transition: 1s;opacity: 0;
}
.Plug-2{
    margin-top:100px;transition: 1s;opacity: 0;
}
.Plug-3{
    margin-top:100px;transition: 1s;opacity: 0;
}
.Plug-4{
    margin-top:100px;transition: 1s;opacity: 0;
}
.demo>img{
    transition:  .5s all;
}
.demo{
    width: 572px;height: 230px;overflow: hidden;
}
.Larger{
    cursor: pointer;transform:scale(1.1);
}
.Research{
    width: 570px; height: 100px;display: flex;
}
.Research p{
    width: 460px;margin-top: 30px; line-height: 30px;
}
.Research p span{
    width: 100%; font-size: 22px; color: #666666;padding-left: 30px;
}
.Research em{
    font-size: 18px;font-family: 'pingfang'; color:#999999;padding-left: 30px;
}
.Research div{
    border:1px solid #ddd;width: 80px; height: 32px;float: right;    text-align: center;
    line-height: 32px;margin-top: 40px;cursor: pointer;background: #f7f7f9;
}
.discipline{
    position: relative;
    transition:width 1s linear;
    -moz-transition:width 1s linear; /* Firefox 4 */
    -webkit-transition:width 1s linear; /* Safari and Chrome */
    -o-transition:width 1s linear; /* Opera */
}
.replace{
    background: url('../../img/office/youj.png') no-repeat;width: 37px;height: 12px;display: block;
    margin:0 auto;margin-top: 10px;
}
.change{
    background: url('../../img/office/baibaiy.png') no-repeat;width: 37px;height: 12px;display: block;
    margin:0 auto;margin-top: 10px;z-index: 20;
}
.discipline:hover span{
    width: 80px !important;
}
.hide{
    position: absolute; display: block;left: 0;top: 0;
    /* background: #666666; */
    background: black;
    opacity: .2;width: 0px;height: 32px;transition: width 1s;
    -moz-transition: width 1s;-webkit-transition: width 1s;
    -o-transition: width 1s;
}
.More{
    width: 338px;height: 50px;line-height: 50px;
    border:1px solid #ddd;text-align: center;cursor: pointer;
    font-size: 20px;color:#666666;margin:0 auto;margin-top: 20px;
}
.More a{
    color:#666;
}
/* 办公空间设计珍品案例 */
.sort-5 {
    background: url(../../img/office/bgk.png) no-repeat;width: 100%;height: 115px;
    position: relative;line-height: 73px;margin-top: 120px;
}
.sort-5 p{
    font-size: 28px;color: #333333;text-align: center;position: absolute;left: 43%;
}
.sort-5 em{
    font-size: 24px;color: #333333;text-align: center; position: absolute;left: 47%;top: 48%;
}
.wrap{
    width: 100%;height: 500px;position: relative;
    overflow: hidden;margin-top: 65px;
}
.wrap ul{
    overflow: hidden;position:absolute;width: 1600px;left: 0;top: 0;
}
.wrap ul li{
    float: left;width: 384px;height: 500px;position: relative;margin-right: 4px;
}
.contradiction{
    position: absolute;top:118px;left: 20px;color: #fff;
    text-align: center;width: 360px;
}
.contradiction em{
    width: 100%;display: block;font-size: 32px;position: absolute;top:30px;left: 0;display: block;width: 100%;
}
.contradiction p{
    width: 100%; display: block;margin-top: 105px;font-size: 26px;position: absolute;top:0;left: 0;width: 350px;
}
.contradiction span{
    width: 60%; margin:0 auto; display: block;margin-top: 44px;font-size: 20px;position: absolute;top:135px;left: 84px;width: 187px;
    background: url('../../img/office/duobian.png') no-repeat;height: 40px;line-height: 40px;
}
.Struggle{
    width: 384px;height: 499px; position: absolute;top:0;left: 0;cursor: pointer;
    position: absolute;top:0;left: 0;
}
.wrap ul li:hover .Struggle{
    background: rgba(0, 0, 0, .5);transition: .5s all;
}
.wrap ul li:hover div em{
    top:0px;transition: .5s all;
}
.wrap ul li:hover div span{
    top:165px;transition: .5s all;
}
/* 在线预约设计 */
.appointment{
    width: 1200px;  margin:0 auto;margin-top: 120px;
}
.appointment em{
    font-size: 36px;text-align: center;display: block;color: #4b4b4b;
}
.form-main{
    display: flex; justify-content: center;width: 1200px;flex-wrap: wrap;align-items: center;height: 530px;margin-top: 44px;
}
.form-main input{
    width: 900px; height: 66px;border-radius: 8px; background: none;font-size: 22px;color: #808080;border: 1px solid #ddd;
    text-indent: 1em;outline: none;
}
.formst{
    width: 900px;position: relative;
}
.formst select{
    width: 447px;height: 66px;text-indent: 1em;font-size: 22px;color: #808080;
    border-radius: 10px;border:1px solid #ddd;outline: none;
    appearance: none;-moz-appearance: none;-webkit-appearance: none;
    position: relative;
}
.form-main textarea{
    width: 900px; height: 176px; border-radius: 8px;font-size: 22px; -webkit-appearance: none;    resize: none;
    text-indent: 1em;padding-top: 20px;border:1px solid #ddd; outline: none;
}
.Consultation{
    width: 504px; height: 66px; background: #313131;border-radius: 8px;cursor: pointer;
    color: #fff; line-height: 66px;text-align: center;font-size: 22px;
}
.icon{
    background: url('../../img/office/intes.png') no-repeat;width: 33px;height: 30px;
    position: absolute;top:38%;right: 54%;display: block;
}
.icon-1{
    background: url('../../img/office/intes.png') no-repeat;width: 33px;height: 30px;
    position: absolute;top:38%;left: 93%;display: block;
}