.fade-enter-active{margin-left:0;opacity:1;-webkit-transition:all 1s;transition:all 1s}
.fade-enter{margin-left:-100%;opacity:0}
.fade-leave-active{margin-left:-100%;opacity:0;-webkit-transition:all 1s;transition:all 1s}
.fade-leave{margin-left:0;opacity:1}
.fadeOut-enter-active{opacity:1;-webkit-transition:all 1s;transition:all 1s}
.fadeOut-enter{opacity:0}
.fadeOut-leave-active{opacity:0;-webkit-transition:all 0s;transition:all 0s}
.fadeOut-leave{opacity:.3}
h2,p{margin:0}
a{text-decoration:none!important;color:#303030}
a:active,a:focus,a:hover,a:visited{color:#303030}
.navBar{position:fixed;top:0;left:0;z-index:9998;width:100%;background-color:#fff}
nav{padding:1rem 8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:6rem;font-family:PingFangSC-Regular;-webkit-box-shadow:1px 1px 2px #e4e2e2;box-shadow:1px 1px 2px #e4e2e2}
.logo{text-align:center;height:4rem;line-height:4rem}
.logo img{width:11rem;-o-object-fit:cover;object-fit:cover}
li{list-style:none}
nav li{float:left;height:1.38rem}
nav ul{margin:0;list-style:none;line-height:4rem;padding:0;margin-left:-2rem}
nav ul a.active{border-bottom:1px solid block}
nav ul li a{display:inline-block;position:relative;height:3.2rem;color:#303030;font-size:1rem;text-transform:uppercase}
nav ul li a:before{content:"";width:0;position:absolute;display:inline-block;bottom:0;left:50%;border-bottom:0 solid #000;-webkit-transition:all .5s linear;transition:all .5s linear}
nav ul li a:hover:before{left:0;width:100%;border-bottom-width:2px}
nav ul li a.actived{border-bottom:1.5px solid #000}
nav ul li a.actived:hover:before{display:none}
.nav-search{margin-top:1.1rem}
.logo h2{display:none}
.list{width:2rem;height:1.3rem;display:none}
.list img{width:100%;height:100%}
.sec{position:absolute;height:100vh;z-index:10000;width:100%;overflow-y:auto}
.sec ul{background-color:#fff;height:100vh}
.screen{position:absolute;width:20%;height:100vh;background-color:#000;opacity:.3;z-index:10000;left:80%}
.searchIcon{display:none}
@media only screen and (min-width:1400px){nav{padding:1rem 6rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:6rem;font-family:PingFangSC-Regular;-webkit-box-shadow:1px 1px 2px #e4e2e2;box-shadow:1px 1px 2px #e4e2e2}
.logo p{font-size:.8rem;line-height:1.8rem}
li{margin-left:3rem;font-size:1rem}
li img{height:1.3rem;width:1.3rem}
}
@media screen and (min-width:1200px) and (max-width:1440px){li img{height:1.3rem;width:1.3rem}
ul li{margin-left:1rem}
nav{padding:1rem 4rem}
}
@media only screen and (min-width:992px) and (max-width:1200px){nav ul{margin-left:-1.5rem}
nav ul li a:hover:before{left:0;width:100%;border-bottom-width:1.5px}
nav ul li a.actived{border-bottom:1.5px solid #000}
nav ul li a.actived:hover:before{display:none}
h2{font-size:1.8rem;margin-top:.5rem}
nav{padding:1rem 3rem}
.logo img{width:13rem;height:unset}
.logo h2,.logo p{line-height:1.8rem}
.logo p{font-size:.6rem}
ul li{margin-left:1rem;font-size:.87rem}
li img{height:1rem;width:1rem}
}
@media only screen and (min-width:768px) and (max-width:992px){nav{padding:1rem 1.5rem}
nav ul{margin-left:unset}
.logo img{width:9rem;height:unset}
h2{font-size:1.8rem;margin-top:.3rem}
li{margin-left:.75rem;font-size:.7rem}
li img{height:.9rem;width:.9rem}
}
@media only screen and (max-width:768px){nav{padding:.7rem 1rem;height:4rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.logo{margin:0 auto}
.logo h2{font-size:1.8rem;height:4rem;line-height:4rem;display:block}
.logo img,.nav-search,nav ul{display:none}
.list{display:block;cursor:pointer}
.sec ul{list-style:none;padding:0;display:inline-block;width:80%}
.sec ul li{height:2rem;padding:.2rem 1rem;margin-top:1rem}
.sec ul li img{width:1.5rem;height:1.5rem}
.sec ul li img:hover{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
.sec ul li a:active{border-bottom:1px solid #000}
.sec .screen{display:inline-block;width:20%;float:right}
.searchIcon{display:block;width:1.5rem;height:1.5rem}
.searchIcon img{width:1.5rem;height:1.5rem}
}
.case{padding:2rem;text-align:center;background:#fff}
.footers{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;border-top:1px solid #eee;width:100%;padding:3rem 8rem 2rem 8rem;overflow-x:hidden;background-color:#fff;/* height:16rem */}
h2{font-size:2rem}
a{font-size:.88rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(48,48,48,.8)}
p,ul{margin:0;padding:0}
.info-box{width:45%;position:relative}
.info-box .box,.title-box{position:absolute;text-align:center;width:80%}
.info-box .box img{transform:scale(1);width:auto}
.title-box{bottom:0}
.info-box img{-o-object-fit:cover;object-fit:cover}
li{list-style:none}
.about-us ul li:first-of-type a,ul>li:first-of-type{font-size:1rem;font-family:PingFangSC-Medium;font-weight:700;color:#303030}
.info-box .designer{font-size:1rem;font-weight:unset;color:#303030}
.info-box .designer a{font-size:1rem}
.about-us{width:20%}
.contact-us{width:35%}
.about-us-title,.contact-us-detail{color:rgba(48,48,48,1) !important;font-family:PingFangSC-Regular}
.contact-us-title{font-weight:600;font-family:PingFangSC-Medium}
.contact-us-title span{ font-weight:normal;}
.about-us ul li:nth-of-type(n+2),.contact-us ul li:nth-of-type(n+2){margin-top:2rem}
.about-us ul li:nth-of-type(n+3),.contact-us ul li:nth-of-type(n+3){margin-top:1rem}
.info-box .info-detail{padding-left:1.5rem}
.offical-accounts,.small-routine{position:relative}
.offical-accounts .code-img-box,.small-routine .code-img-box{width:7rem;height:0;display:inline-block;position:absolute;z-index:9;margin-left:2rem;opacity:0;-webkit-transition:all 1s;transition:all 1s;background-color:#fff;text-align:center;-webkit-box-shadow:0 0 2px #e6e4e4;box-shadow:0 0 2px #e6e4e4}
.offical-accounts .code-img-box .code-img,.small-routine .code-img-box .code-img{width:6rem;height:6rem;margin:.5rem auto}
.offical-accounts:hover .code-img-box,.small-routine:hover .code-img-box{height:7rem;opacity:1}
@media screen and (min-width:1200px){.footers{/* height:16rem; */overflow-y:hidden;}
h2{font-size:2rem}
p{margin:0}
.info-box{width:50%}
.info-box .info-detail{font-size:1rem}
.contact-us-title{font-size:.88rem}
.about-us-title,.contact-us-detail{font-size:.88rem;font-weight:400}
.about-us ul li img{width:1.5rem;height:1.5rem}
.about-us-title{margin-left:1rem}
}
@media only screen and (min-width:992px) and (max-width:1200px){h2{font-size:1.8rem;font-weight:450}
.info-box .info-detail{font-size:.9rem}
.info-box img{width:20rem;height:3.5rem;-o-object-fit:cover;object-fit:cover}
.info-box .designer,.info-box .designer a{font-size:.78rem}
.about-us ul li img{width:1.5rem;height:1.5rem}
.about-us-title{margin-left:.7rem;font-weight:500}
.contact-us-title{font-weight:500}
.about-us-title,.contact-us-detail{font-size:.75rem}
}
@media screen and (min-width:768px) and (max-width:992px){.footers{padding:3rem 4.5rem 2rem 4.5rem;/* height:16rem */}
.info-box .designer,.info-box .designer a{font-size:.65rem}
.info-box img{width:15.5rem;height:2.8rem;-o-object-fit:cover;object-fit:cover}
.contact-us-title{font-size:.8rem}
.about-us-title,.contact-us-detail{font-size:.7rem}
.about-us ul li img{width:1rem;height:1rem}
.about-us-title{margin-left:.8rem}
}
@media screen and (max-width:768px){.footers{display:block;padding:2rem 1rem;height:13rem;overflow-y:hidden}
.info-box{position:relative;text-align:center;width:100%}
.info-box img{width:15.5rem;height:2.8rem;-o-object-fit:cover;object-fit:cover}
.contact-us{display:none}
.about-us{display:block;width:100%;text-align:center;height:100%;overflow:unset}
.info-box .designer{font-size:.7rem;position:relative;bottom:0;margin-top:1rem}
.info-box .designer a{font-size:.7rem}
.aboutUs{display:none}
.about-us-title{font-size:.88rem}
.about-us ul{margin-top:.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}
.about-us ul li img{width:1rem;height:1rem}
.about-us-title{margin-left:.3rem}
.about-us ul li:nth-of-type(n+1){margin-top:unset;margin-left:.5rem}
.offical-accounts,.small-routine{position:relative}
.offical-accounts .code-img-box,.small-routine .code-img-box{width:4rem;height:0;display:block;position:absolute;z-index:9;margin-left:1rem;margin-top:-4rem;opacity:0;-webkit-transition:all 1s;transition:all 1s;background-color:#fff;text-align:center;-webkit-box-shadow:0 0 2px #e6e4e4;box-shadow:0 0 2px #e6e4e4}
.offical-accounts .code-img-box .code-img,.small-routine .code-img-box .code-img{width:4rem;height:4rem;margin:0 auto}
.offical-accounts:hover .code-img-box,.small-routine:hover .code-img-box{height:4rem;opacity:1}
}
.hotRecommend{width:100%;background:#f6f7fa}
.hotRecommend-inner-card{cursor:pointer}
.hotRecommend-inner-card-img-box{width:100%;height:100%;position:relative;overflow:hidden}
.hotRecommend-inner-card-img-box:before{content:"";width:100%;height:100%;position:absolute;background-color:#000;opacity:.2}
.hotRecommend-inner-card-img-box img{width:100%;height:100%;z-index:-1;-o-object-fit:cover;object-fit:cover}
.hotRecommend-inner-card-img-box .hotRecommend-inner-card-part,.hotRecommend-inner-card-img-box .hotRecommend-inner-card-title{position:absolute;padding-left:1rem}
.hotRecommend-inner-card-img-box .hotRecommend-inner-card-part{margin-top:-4rem;height:1.06rem;font-size:.75rem;font-family:PingFangSC-Semibold;color:#fff;line-height:1.06rem}
.hotRecommend-inner-card-img-box .hotRecommend-inner-card-title{margin-top:-2.7rem;font-size:1rem;font-family:PingFangSC-Semibold;color:#fff;line-height:1.38rem;text-overflow:ellipsis;width:100%;padding-right:1rem;overflow:hidden;white-space:nowrap}
@media screen and (min-width:1200px){.hotRecommend-inner{width:100%;padding:3rem 8rem}
.hotRecommend-inner-title{font-size:1rem;font-family:PingFangSC-Medium;color:#303030;letter-spacing:2px}
.hotRecommend-inner-cardBox{width:100%;margin-top:3rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.hotRecommend-inner-card{width:25vw;background-color:#fff}
}
@media only screen and (min-width:992px) and (max-width:1200px){.hotRecommend{width:100%;background-color:#eee}
.hotRecommend-inner{width:100%;padding:3rem 8rem}
.hotRecommend-inner-title{font-size:1rem;font-family:PingFangSC-Medium;color:#303030;letter-spacing:2px}
.hotRecommend-inner-cardBox{width:100%;margin-top:3rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.hotRecommend-inner-card{width:24vw;background-color:#fff}
}
@media only screen and (min-width:768px) and (max-width:992px){.hotRecommend{width:100%;background-color:#eee}
.hotRecommend-inner{width:100%;padding:1rem 4.5rem}
.hotRecommend-inner-title{font-size:1rem;font-family:PingFangSC-Medium;color:#303030;letter-spacing:2px}
.hotRecommend-inner-cardBox{width:100%;/* height:14.625vw; */margin-top:3rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:1rem;-webkit-box-sizing:content-box;box-sizing:content-box}
.hotRecommend-inner-card{width:26vw;background-color:#fff;-ms-flex-negative:0;flex-shrink:0}
}
@media only screen and (max-width:768px){.hotRecommend{width:100%;background-color:#eee}
.hotRecommend-inner{width:100%;padding:1rem 1rem}
.hotRecommend-inner-title{font-size:1rem;font-family:PingFangSC-Medium;color:#303030;letter-spacing:2px}
.hotRecommend-inner-cardBox{width:100%;margin-top:2rem;display:block;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;overflow-x:scroll;padding-bottom:1rem;-webkit-box-sizing:content-box;box-sizing:content-box}
.hotRecommend-inner-card{width:100%;background-color:#fff;-ms-flex-negative:0;flex-shrink:0}
.hotRecommend-inner-card:nth-of-type(n+2){margin-top:1rem}
}
.social-share-icon{text-decoration:none}
.share-side{position:fixed;top:22rem;right:4.5rem;z-index:9998}
.share-side div{text-align:center;font-size:.8rem}
#weixin{width:100px; height:100px; margin: 10px auto;}
#weixin canvas{width：100px;height:100px;}
.share-side .social-share{width:32px;height:100px;}
@media screen and (max-width:1200px) and (min-width:992px){.share-side{right:2.2rem!important}
}
@media screen and (max-width:992px) and (min-width:768px){.share-side{right:.5rem}
}
@media screen and (max-width:768px){.share-side{display:none}
}
main{margin-top:6rem;padding:3rem 8rem;width:100%}
.latest{padding:1rem;width:100%;margin-top:6rem;overflow:hidden}
.exhibition{width:100%;margin-top:9rem}
@media screen and (min-width:1200px){.exhibition{padding-bottom:2rem}
}
@media screen and (max-width:1200px) and (min-width:992px){main{padding:3rem 5rem}
}
@media screen and (max-width:992px) and (min-width:768px){main{padding:3rem 3rem}
}
@media screen and (max-width:768px){main{padding:1rem;top:4rem}
.latest{margin-top:4rem}
}
#pages{width:100%;display:flex;justify-content:center;margin-bottom:2rem}
#pages a,#pages span{font-size:1.2rem;padding:2px .6rem;background-color:#e5e5e5;margin:0 5px;border-radius:4px;color:#000}
#pages a.a1,#pages a:hover,#pages span{background-color:#c7c7c7}


.style-nav-wrap{margin:0 auto; display: flex;}
.style-nav-wrap ul{display: flex;width: 100%;justify-content: center;}
.style-nav-wrap ul li{list-style-type: none; margin:0 20px; position: relative;    white-space: nowrap;
    position: relative;
    transition: -webkit-transform .3s;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    float: left;
    z-index: 2; }
.style-nav-wrap ul li.active-bar i{
    position: absolute;
    background-color: #000;
    bottom: -.5rem;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 111;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.645,.045,.355,1);
    transition: -webkit-transform .3s cubic-bezier(.645,.045,.355,1);
    transition: transform .3s cubic-bezier(.645,.045,.355,1);
    transition: transform .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1);
    list-style: none;
}
.style-nav-wrap ul li a{color: #999; text-decoration: none; height: 1.75rem; font-size: 16px; font-family: PingFangSC-Regular,PingFangSC; font-weight: 500; color: #303030; line-height: 1.75rem;} .style-nav-wrap ul li a:hover,.style-nav-wrap ul li a.active{color: #000;}