@charset "utf-8";


/*浏览器滚动条*/
::-webkit-scrollbar{width:0.05rem;height:0.05rem;}
::-webkit-scrollbar-button:vertical{display:none}
::-webkit-scrollbar-track:vertical{background-color:black;}
::-webkit-scrollbar-track-piece{background:#E3E3E3;}
::-webkit-scrollbar-thumb:vertical{background-color:var(--color-yellow); border-radius:1.5625vw;}
::-webkit-scrollbar-thumb:vertical:hover{background-color:#3B3B3B;}
::-webkit-scrollbar-corner:vertical{background-color:#535353;}


/**css初始化**/
html{  width: 100%;  scroll-behavior: auto;  }
body { background:var(--color-white); font-family:"Microsoft Yahei,sans-serif"; width: 100vw; font-size:0.16rem; color:#333; overflow-x:hidden;-webkit-tap-highlight-color:transparent; }
*,:after,:before { margin:0; padding:0; backface-visibility: hidden; box-sizing: border-box; transition: var(--transition);}
h1, h2, h3, h4, h5, h6{ font-weight:normal;}
ul,dl,li,dt,dd{list-style:none;}
i,em{font-style:normal;}
img { border:0; vertical-align:top; max-width:100%; transition: var(--transition);}
a { text-decoration:none;  color: inherit; cursor:pointer; outline:none; }
a:hover { color:var(--color-yellow); }
input,textarea,select{ outline: none; -webkit-appearance: none; border-radius: 0; font-size:0.16rem; border: 0; font-family:"Microsoft Yahei,sans-serif"; }
input[type="text"],input[type="password"],input[type="search"],textarea,select{ background:none; border:none; transition:var(--transition);}
input::-webkit-input-placeholder,input:-moz-placeholder,input::-moz-placeholder,input:-ms-input-placeholder { color:var(--color-light); }
textarea{resize:none; overflow:hidden;}
textarea::-webkit-input-placeholder,textarea:-ms-input-placeholder,textarea::-moz-placeholder,textarea:-moz-placeholder { color:var(--color-light);}
select::-ms-expand { display: none; }
.clearfix:after {  content: " "; display: block; height: 0; line-height: 0; font-size: 0; clear: both; visibility: hidden }
.fl { float:left; }
.fr { float:right; }
.w{ width:1280px; margin:0 auto; }


/*config*/
.flex{ align-items: center; justify-content: space-between; display:flex; display:-webkit-flex; flex-direction:row; -webkit-flex-direction:row; flex-wrap:wrap; -webkit-flex-wrap:wrap;}
.center{ text-align:center;}
.relative{position:relative;}
.ov-hidden{overflow: hidden;}
.imgs{ width: 100%; height: 100%; display: block; object-fit: cover; position: absolute; left: 0; top: 0;}
.lazy{ background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; display:block; }
.font-b{ font-weight: bold;}


.yellow{ color: var(--color-yellow);}
.red{ color: #ff0000;}
.gray6{ color:var(--color-gray);}
.gray9{ color:var(--color-light);}
.white{ color:var(--color-white);}

.bgGray{background:#f7f7f7;}
.bgWhite{background:var(--color-white);}

.font14{ font-size:0.14rem;}
.font16{ font-size:0.16rem;}
.font18{ font-size:0.18rem;}
.font20{ font-size:0.2rem;}
.font22{ font-size:0.22rem;}
.font24{ font-size:0.24rem;}
.font26{ font-size:0.26rem;}
.font28{ font-size:0.28rem;}
.font30{ font-size:0.3rem;}
.font32{ font-size:0.32rem;}
.font34{ font-size:0.34rem;}
.font36{ font-size:0.36rem;}
.font38{ font-size:0.38rem;}
.font40{ font-size:0.4rem;}
.font42{ font-size:0.42rem;}
.font44{ font-size:0.44rem;}
.font46{ font-size:0.46rem;}
.font48{ font-size:0.46rem;}

.mt05{ margin-top:0.05rem;}
.mt10{ margin-top:0.1rem;}
.mt15{ margin-top:0.15rem;}
.mt20{ margin-top:0.2rem;}
.mt25{ margin-top:0.25rem;}
.mt30{ margin-top:0.3rem;}
.mt35{ margin-top:0.35rem;}
.mt40{ margin-top:0.4rem;}
.mt45{ margin-top:0.45rem;}
.mt50{ margin-top:0.5rem;}
.mt60{ margin-top:0.6rem;}

.mr05{ margin-right:0.05rem;}
.mr10{ margin-right:0.1rem;}
.mr15{ margin-right:0.15rem;}
.mr20{ margin-right:0.2rem;}
.mr25{ margin-right:0.25rem;}
.mr30{ margin-right:0.3rem;}
.mr35{ margin-right:0.35rem;}
.mr40{ margin-right:0.4rem;}

.ml05{ margin-left:0.05rem;}
.ml10{ margin-left:0.1rem;}
.ml15{ margin-left:0.15rem;}
.ml20{ margin-left:0.2rem;}
.ml25{ margin-left:0.25rem;}
.ml30{ margin-left:0.3rem;}
.ml35{ margin-left:0.35rem;}
.ml40{ margin-left:0.4rem;}

.lh24{ line-height:0.24rem;}
.lh26{ line-height:0.26rem;}
.lh28{ line-height:0.28rem;}
.lh30{ line-height:0.3rem;}
.lh32{ line-height:0.32rem;}
.lh34{ line-height:0.34rem;}
.lh36{ line-height:0.36rem;}
.lh38{ line-height:0.38rem;}
.lh40{ line-height:0.4rem;}
.lh42{ line-height:0.42rem;}
.lh44{ line-height:0.44rem;}
.lh46{ line-height:0.46rem;}
.lh48{ line-height:0.48rem;}

.lines1{ word-break:break-all; text-overflow:ellipsis; display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;}
.lines2{ word-break:break-all; text-overflow:ellipsis; display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
.lines3{ word-break:break-all; text-overflow:ellipsis; display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;}
.lines4{ word-break:break-all; text-overflow:ellipsis; display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;}
.lines5{ word-break:break-all; text-overflow:ellipsis; display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden;}
.lines6{ word-break:break-all; text-overflow:ellipsis; display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden;}

:root{
    --transition:cubic-bezier(0.215,.61,.355,1) .45s;
    --color-yellow:#d2bb84;
    --color-gray:#666;
    --color-light:#999;
    --color-white:#fff;
}

@font-face { font-family:'SourceHanSerifCN-Regular'; src:url('../fonts/SourceHanSerifCN-Regular.otf'); }
@font-face {
  font-family: "iconfont";
  src: url('../fonts/iconfont.woff2') format('woff2'),
       url('../fonts/iconfont.woff') format('woff'),
       url('../fonts/iconfont.ttf') format('truetype');
}

.iconfont {
  font-family:"iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/**index**/
.fdAside{ background: rgba(0,0,0,.6); width: 2.25rem; height: 100vh; position:fixed; left: 0; top: 0; z-index: 999; padding:0.6rem 0.15rem 0.3rem 0.15rem; flex-direction: column; }
.fdAside-logo{ width: 100%; display:block;}
.fdAside-menu{ width: 100%; padding:0 0.8rem 0 0.5rem;}
.fdAside-menu a{    font-size: 0.2rem; display:block; margin-top: 3vh; position: relative; line-height: 0.5rem; color: var(--color-white);}
.fdAside-menu a:first-child{ margin-top: 0;}
.fdAside-menu a:after { content: ""; background: #feda00; width: 0; height:0.03rem; position: absolute; bottom: 0; left: 0; }
.fdAside-menu a:hover{ color: #feda00; }
.fdAside-menu a:hover:after { width: 100%; }
.fdAside-code{ width: 100%;}
.fdAside-code img{ width: 1.2rem;}


.fdMain{ width: 100%; height: 100vh; overflow: hidden; }
.fdMain::-webkit-scrollbar{ width:0;}
.fdBanner { width: 100%; height: 100%; }
.fdBanner li .bigimg { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: transform 2s ease-in-out; -moz-transition: transform 2s ease-in-out; -o-transition: transform 2s ease-in-out; -ms-transition: transform 2s ease-in-out; transition: transform 2s ease-in-out; }
.fdBanner li.swiper-slide-active .bigimg { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
.mobile-fdBanner{ display:none;}


.fdAbout-center{ margin: 22vh 0 0 3rem;}
.fdAbout-head { max-width: 46%;}
.fdAbout-head .line{ background: #fbda2c; width: 1px; height: 0.4rem; display: inline-block;}
.fdAbout-head .en{ font-family: Impact; text-transform: uppercase; line-height: 1; }
.fdAbout-head .mo {  width: 0.74rem; height:0.74rem; line-height: 0.74rem; font-size: 0.14rem; display: block; text-align: center; z-index: 1; color:var(--color-white); overflow: hidden; border: 1px solid var(--color-white); border-radius: 50%; }
.fdAbout-head .mo:before { content: ''; background: #d2bb84; width: 0; height: 100%; position: absolute; left: 0; }
.fdAbout-head .mo:hover { border: #d2bb84 1px solid; }
.fdAbout-head .mo:hover:before { width: 100%; }


.fdProduct-warp{ height: 100%;  margin-left:3rem;}
.fdProduct-warp .w{width: 85%; margin: 0;}
.fdProduct-warp .fdAbout-head{ width: 30.7%;}
.fdProduct-warp .fdAbout-head .mo{ margin-top: 1.6rem;}
.fdProduct-list{ width: 59.3%; justify-content:flex-end;}
.fdProduct-list li{ width: calc(50% - 0.24rem); margin: 0.24rem 0 0 0.24rem;}
.fdProduct-list li a{ display: block; padding-top: 54%; border:0.04rem var(--color-white) solid; border-radius: 0.18rem;}
.fdProduct-list li .tit{ background:rgba(0,0,0,.6); width: 100%; line-height:0.45rem; position: absolute; left: 0; bottom: 0;}
.fdProduct-list li .dark { background: rgba(0,0,0,.6);  width: 100%; height: 100%; position: absolute; left: 0; top: 0; transform: scale(0,1); }
.fdProduct-list li .cen { background-color: #000; width: 0.8rem; height:0.8rem; font-size:0.12rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center;  flex-direction: column; border-radius: 50%; }
.fdProduct-list li:first-child{ margin-left: calc(50% - 0.48rem);}
.fdProduct-list li:hover .dark { transform: scale(1); }


.fdScenes:before{ content: ''; background: rgba(0,0,0,.5); width: 64.5%; height: 100%; position: absolute; right: 0; top: 0;}
.fdScenes .w{ align-items: flex-start; z-index:2;}
.fdScenes .fdAbout-head .mo{ margin-top: 0.9rem;}
.fdScenes-list{ width: 67.1%;}
.fdScenes-list li{ width: calc(50% - 0.18rem); margin-top: 0.3rem;}
.fdScenes-list li .thumb{ padding-top: 57%; border-radius: 0.18rem;}
.fdScenes-list li .title{ background:rgba(0,0,0,.6); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; justify-content: center; opacity: 0;}
.fdScenes-list li .title .cn{ width: 100%;  padding: 0.15rem 0; display: block;}
.fdScenes-list li .title .cn:before { content: ''; background: #919191; width: 60%; height: 1px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.fdScenes-list li .title .cn:after { content: ''; background: #919191; width: 60%; height: 1px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.fdScenes-list li:hover .title{ opacity: 1;}
.fdScenes-list li:hover .imgs{ transform: scale(1.05);}
.fdScenes-list li:hover .title .cn:before{ width: 0;}


.fdNewss-padd{ height: 100%; margin-left:3rem; align-items: flex-start;}
.fdNewss-padd .fdAbout-head{ width: 15.87%; margin-top: 18vh;}
.fdNews-list{ width:84.13%; height: 100%;}
.fdNews-list li{ background: rgba(0,0,0,.5); width: 33.33%; height: 100%; border-left: 1px solid rgba(255,255,255,0.2);}
.fdNews-list li:before { content: ''; background: #000; width: 100%; height: 0; position: absolute; left: 0; bottom:0; }
.fdNews-list li a{ width: 100%; height: 100%; position: relative; z-index: 2; flex-direction: column; justify-content: center; padding: 0 0.45rem;}
.fdNews-list li .icon{ width: 0.92rem; display: inline-block; margin-bottom: 0.7rem;}
.fdNews-list li .desc{ color: #b9b9b9; text-align: left;}
.fdNews-list li:hover:before { height: 100%; }
.fdNews-list li:hover .icon { -webkit-animation: animat-shake .5s; animation: animat-shake .5s; }


.fdContact .fdAbout-head .mo{ margin-top: 0.35rem;}
.fdMessage{ background: #333; width: 46.72%; padding: 0.5rem 0.8rem;}
.fdMessage-filed li{ margin-top: 0.3rem;}
.fdMessage-filed li .area{ width: 100%; height:0.9rem; color: var(--color-white); border-bottom: 1px solid var(--color-white);}
.fdMessage-filed li .inpt{ width: 100%; padding-bottom:0.12rem; color: var(--color-white); border-bottom: 1px solid var(--color-white);}
.fdMessage-filed li .yzm-inpt{ width: 63%;}
.fdMessage-filed li .yzm-in img{ width: 0.85rem; height: 0.32rem;}
.fdMessage-filed li .inpt::-webkit-input-placeholder { color:var(--color-white); }
.fdMessage-filed li .area::-webkit-input-placeholder { color:var(--color-white); }
.fdMessage-filed li .sbtn{ background: var(--color-white); width: 1.46rem; height: 0.32rem; text-align: center; cursor: pointer;}
.fdMessage-filed li:nth-child(4){ margin-top: 0.55rem;}
.fdMessage-filed li:nth-child(5){ margin-top: 0.55rem; padding-bottom: 0.3rem;}


.fdHead{ background: var(--color-white); width: 100%; left:0; top: 0; z-index: 99;}
.fdHead.topFix{  position: fixed; box-shadow: 0 0 0.15rem rgba(0,0,0,.15);}
.fdHead.topFix .fdHead-nav li a.far{ line-height: 0.9rem;}
.fdHead.topFix .fdHead-tools{ line-height: 0.9rem;}
.fdHead-nav li a.far{ font-size: 0.2rem; line-height: 1.1rem; padding: 0 0.4rem; display: block;}
.fdHead-nav li.active a.far,.fdHead-nav li:hover a.far{ background: var(--color-yellow); color: var(--color-white);}
.fdHead-tools{ position: absolute; right: 0.3rem; top: 0; line-height: 1.1rem;}
.fdHead-tools .search-btn{ cursor: pointer;}
.fdHead-tools .search-btn i:last-child{ display: none;}

.fdHead-searchBox { background: rgba(255, 255, 255, 0.9); width: 100%; padding: 8vw 0; position: absolute; left: 0; top:100%; display: none; }
.fdHead-searchBox .inputBox { width: 47vw; height: 4vw; margin: 0 auto; border: 2px solid var(--color-yellow); }
.fdHead-searchBox .inputBox .inpt { background: transparent; width: 100%; height: 3.9vw; padding-left: 2vw; }
.fdHead-searchBox .inputBox .sbtn {  background: transparent; width: 0; height: 0; position: absolute; right: 0; top: 0; line-height: 3.87vw; border: 3.8vw dashed; border-top: none; border-color:var(--color-yellow); border-left-color: transparent; font-size:0.36rem; color:var(--color-white); cursor: pointer; }
.fdHead-searchBox.active { display: block; }



.fdFooter{ background: #333; color: #bebdbb;}
.fdFooter a{ color: #bebdbb;}
.fdFooter-top{ padding: 0.7rem 0 0.4rem 0; align-items: flex-start;}
.fdFooter-topContact .cf{ display: inline-block; line-height: 0.38rem; padding: 0 0.45rem; border: 1px #bebdbb solid;}
.fdFooter-topMenu{ width: 65%; align-items: flex-start; padding-left: 0.8rem; border-left: 1px var(--color-gray) solid;}
.fdFooter-topMenu dl{ width: 48%;}

.fdFooter-bom{ padding: 0.25rem 0 0.15rem 0; border-top: 1px var(--color-gray) solid;}
.fdFooter-bom .share a{ width: 0.36rem; display: inline-block; margin-left: 0.1rem;}


/**观点**/
.pbanner img{ width: 100%;}

.pmain{ padding: 0.7rem 0;}
.pmain-menu{ background: #e5e5e5;}
.pmain-menu a{ color: #919191; display: inline-block; line-height: 0.9rem; padding: 0 0.25rem;}
.pmain-menu a.active, .pmain-menu a:hover{ background: var(--color-yellow); color: var(--color-white);}

.pmain-page { padding-top:0.7rem; display: flex; align-items: center; justify-content: center;}
.pmain-page a { width: 0.46rem; height: 0.46rem; display: flex; align-items: center; justify-content: center; margin: 0 0.06rem; color:var(--color-gray); border: 1px #ddd solid; border-radius: 50%; }
.pmain-page .nowpage { background: var(--color-yellow); width: 0.46rem; height: 0.46rem; display: flex; align-items: center; justify-content: center; margin: 0 0.06rem; color:var(--color-white); border: 1px var(--color-yellow) solid; border-radius: 50%;}
.pmain-page a:hover { background: var(--color-yellow); color:var(--color-white); border-color:var(--color-yellow); }
.pmain-page a:first-child{ background: url(../images/page-prev.png) no-repeat center; font-size: 0; text-indent: -9999px;}
.pmain-page a:last-child{ background: url(../images/page-next.png) no-repeat center; font-size: 0; text-indent: -9999px;}


.pnews-head{ padding-bottom: 0.3rem; border-bottom: 1px #ebebeb solid;}
.pnews-list li{ margin-top: 1.4rem;}
.pnews-list li:first-child{ margin-top: 0.8rem;}
.pnews-list li .thumb{ width: 55%; }
.pnews-list li .word{ width: 36%; padding-right: 0.75rem; text-align: right;}
.pnews-list li .word .cn{ position: relative; color: #c7c7c7; text-transform: uppercase; font-family:'SourceHanSerifCN-Regular';}
.pnews-list li .word .cn:before{ content: ''; background: var(--color-yellow); width:0.73rem; height: 0.03rem; position: absolute; right: -0.75rem; top: 0.15rem;}
.pnews-list li .word .n{ font-family:'SourceHanSerifCN-Regular'; font-weight: bold; font-size: 0.26rem; position: absolute; right: 0; bottom: 0; color:#333;}
.pnews-list li:nth-child(2n+1) a { flex-direction: row-reverse; }
.pnews-list li:nth-child(2n+1) .word{ padding-right: 0; padding-left: 0.75rem; text-align:left;}
.pnews-list li:nth-child(2n+1) .word .cn:before{ right: auto; left: -0.75rem;}
.pnews-list li:nth-child(2n+1) .word .n{ right: auto; left: 0;}


.pnews-details-head .info { background: #f6f6f6; line-height: 0.42rem;}
.pnews-details-head .info span { margin:0 0.25rem; }
.pnews-details-page a { background: #f6f6f6; width: 50%; padding:0.25rem; color:var(--color-gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnews-details-page a:hover{ background: var(--color-yellow); color: var(--color-white);}



/**产品**/
.pproduct-list{ margin-top: -0.8rem;}
.pproduct-list li{ width: 47%; padding-top:28.5%; margin-top: 0.8rem;}
.pproduct-list li:before, .pproduct-list li:after { content: ''; position: absolute; z-index: 3; top: 30px; right: 30px; bottom: 30px; left: 30px; opacity: 0; }
.pproduct-list li:before { border-top: 1px solid var(--color-white); border-bottom: 1px solid var(--color-white); -webkit-transform: scale(0,1); transform: scale(0,1); }
.pproduct-list li:after { border-right: 1px solid var(--color-white); border-left: 1px solid var(--color-white); -webkit-transform: scale(1,0); transform: scale(1,0); }
.pproduct-list li .text{ background:rgba(0,0,0,.6); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; justify-content: center; opacity: 0;}
.pproduct-list li:hover:before { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
.pproduct-list li:hover:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
.pproduct-list li:hover .text{ opacity: 1;}
.pproduct-list li:hover .imgs{ transform: scale(1.05);}


/**联系**/
.pcontact-layout dl{ width: 30.7%; padding: 0.5rem 0; border: 1px #e5e5e5 solid; border-radius: 0.05rem;}
.pmessage-head{ margin-top: 0.8rem;}
.pmessage-head .en{ color: #d5d5d5;}

.pmessage-filed{ padding-top: 0.2rem;}
.pmessage-filed li .aside{ width: 45.5%;}
.pmessage-filed li .area{ width: 100%; height:1.6rem; padding:0.1rem; color: #7b7b7b; border: 1px solid #d2d2d2;}
.pmessage-filed li .inpt{ width: 100%; height:0.42rem; padding: 0.06rem 0.12rem; color: #7b7b7b; border: 1px solid #d2d2d2;}
.pmessage-filed li .yzm-inpt{ width: calc(100% - 0.9rem);}
.pmessage-filed li .yzm-img{ width: 0.9rem; height: 0.42rem;}

.pmessage-button{ margin-top: 0.8rem;}
.pmessage-button .sbtn{ background: #333; width: 3.84rem; height: 0.42rem; cursor: pointer; border: 0;}


/**关于**/
.pabout-main{ background: url(../images/pabout-bg.jpg) no-repeat bottom; background-size: 100% auto; min-height: 9.9rem; padding-top: 1rem;}
.pabout-main .w{ background: url(../images/pabout-logo.png) no-repeat top center; max-width: 1100px; padding-top: 0.1rem;}
.pabout-word{ padding: 0.65rem 0 0.8rem 0;}

.pabout-scope li{ width: 28%; height:7.9rem;}
.pabout-scope li .word{ background: rgba(0,0,0,.1); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; padding: 0 0.6rem; flex-direction: column; justify-content: center; text-align: center;}
.pabout-scope li .word .c{ display: none;}
.pabout-scope li.on{ width: 44%;}
.pabout-scope li.on .word{ background: rgba(110,15,15,.8); }
.pabout-scope li.on .word .c{ display: block;}


/**场景**/
.pscenes-list{ margin-left: -0.5rem; margin-top: -0.5rem;     justify-content: flex-start;}
.pscenes-list li{ width: calc(33.33% - 0.5rem); margin: 0.5rem 0 0 0.5rem;}
.pscenes-list li a{ padding-top: 75%; display: block;}
.pscenes-list li .title{ background:rgba(0,0,0,.6); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; justify-content: center; opacity: 0;}
.pscenes-list li .title .cn{ width: 100%;  padding: 0.15rem 0; display: block;}
.pscenes-list li .title .cn:before { content: ''; background: #919191; width: 60%; height: 1px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.pscenes-list li .title .cn:after { content: ''; background: #919191; width: 60%; height: 1px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.pscenes-list li:hover .title{ opacity: 1;}
.pscenes-list li:hover .imgs{ transform: scale(1.05);}
.pscenes-list li:hover .title .cn:before{ width: 0;}


/**手机菜单**/
.menuBtn{ background:var(--color-yellow); width:50px; height:100%; cursor:pointer; position:absolute; right:0; top:0; display:none; flex-direction: column; align-items: center; justify-content: center; }
.menuBtn > span{ background:var(--color-white); width:27px; height:2px; display:block;  }
.menuBtn > span:nth-child(2){ margin:8px 0;}



.SlideView { background:url(../images/Menu-bg.jpg) no-repeat right top var(--color-white); width:100%; height:100vh; position:fixed; left:100%; top:0; z-index:999; transform: translateX(0);}
.SlideView-shown { -webkit-transform:translateX(-100%)!important; transform:translateX(-100%)!important }
.SlideView .docker { background:#f7f7f5; position:absolute; left:0; width:50px; height:100%;}
.SlideView .docker-tab { position:relative; display:block; color:#333; height:100%;}
.SlideView .docker-tab .tabText { font-size:16px; z-index:2; width:16px; line-height:18px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}


.SlideView .close{ background:url(../images/menu-close.png) no-repeat center; background-size:15px auto; width:15px; height:15px; position:absolute; top:40px; left:50%; transform:translateX(-50%); z-index:10;}
.SlideView .asideMenu{ width:calc(100% - 50px); height:100%; margin-left:50px; padding:20px; overflow-y:auto;}
.SlideView .asideMenu a{ display:block; margin-top:35px; font-size:18px; font-weight:bold;}