@charset "utf-8";
html,body{min-height: 100%; height: 100%; font-size: 200px;}
body{ font-family: -apple-system,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif; margin:0 auto; padding:0; font-size: 0.053rem; background:#000; position: relative; color: #fff; overflow-x:hidden;}
img{max-width:100%; border:0; vertical-align:top; max-height: 100%;}
ul,li{margin:0; padding:0; list-style:none;}
p,h1,h2,h3,h4,h5,dl,dd,dt{margin:0; padding:0;}
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }
.clear{clear: both;}
.blank{clear: both; height: 20px;}
*{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-focus-ring-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0,0,0,0); -moz-focus-ring-color: rgba(0, 0, 0, 0); }
*:focus {outline: none;}
a{text-decoration:none; color:inherit}
a:hover{color: inherit;}
a:active{color: inherit;}
.blank{width: 100%; height: 10px; clear: both;}
.container{ width:4.8rem; margin: 0 auto;  position: relative;}
.container:after {content:"\200B"; display:block; height:0; clear:both; }
.container { *zoom:1; }
.logo img{width:80px}

@media only screen and (min-width: 1024px){
    body::-webkit-scrollbar,
    html::-webkit-scrollbar {
    width: 5px;
    border-radius: 1.5px;
    }
    body::-webkit-scrollbar-button,
    html::-webkit-scrollbar-button {
    display: none;
    }
    body::-webkit-scrollbar-track,
    html::-webkit-scrollbar-track {
    background-color: #000;
    }
    body::-webkit-scrollbar-thumb,
    html::-webkit-scrollbar-thumb {
    background-color: #eee;border-radius: 5px;
    }
}

@font-face {
  font-family: 'iconfont';  
  src: url('../font/font_1890187_se9ur92wyrq.eot');
  src: url('../font/font_1890187_se9ur92wyrq.eot#iefix') format('embedded-opentype'),
  url('../font/font_1890187_se9ur92wyrq.woff2') format('woff2'),
  url('../font/font_1890187_se9ur92wyrq.woff') format('woff'),
  url('../font/font_1890187_se9ur92wyrq.ttf') format('truetype'),
  url('../font/font_1890187_se9ur92wyrq.svg#iconfont') format('svg');
}
.iconfont{font-family: iconfont; vertical-align: middle; font-style: normal;}
@font-face {
  font-family: 'messapia-bold';
  src: url('../font/messapia-bold-webfont.eot');
  src: url('../font/messapia-bold-webfont.eot') format('embedded-opentype'),
  url('../font/messapia-bold-webfont.woff2') format('woff2'),
  url('../font/messapia-bold-webfont.woff') format('woff'),
  url('../font/messapia-bold-webfont.ttf') format('truetype'),
  url('../font/messapia-bold-webfont.svg') format('svg');
}
@font-face {
  font-family: 'Sofia';
  src: url('../font/Sofia-Pro-UltraLight.eot');
  src: url('../font/Sofia-Pro-UltraLight.eot') format('embedded-opentype'),
  url('../font/Sofia-Pro-UltraLight.woff2') format('woff2'),
  url('../font/Sofia-Pro-UltraLight.woff') format('woff'),
  url('../font/Sofia-Pro-UltraLight.ttf') format('truetype'),
  url('../font/Sofia-Pro-UltraLight.svg') format('svg');
}


.text-ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.text-ellipsis-3 {display: -webkit-box; overflow: hidden; white-space: normal!important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.text-ellipsis-2 {display: -webkit-box; overflow: hidden; white-space: normal!important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.text-ellipsis-1 {display: -webkit-box; overflow: hidden; white-space: normal!important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

.fl{float: left;}
.fr{float: right;}
.hide{display: none;}
.text-center{text-align: center;}

.loading{position: fixed; top:0; right:0; bottom:0; left:0; background:#000; z-index: 999; color:#fff;--marquee-width:100vw;--offset:20vw;--move-initial:calc(-25% + var(--offset));--move-final:calc(-50% + var(--offset));pointer-events:none; overflow: hidden;}
.loadimg{position: absolute; top: 48%; left:0; right:0; }
.loadimg .inner{width:max-content;display:flex;position:relative; height: 100%; transform:translate3d(var(--move-initial),0,0);animation:marquee 5s linear infinite;animation-play-state:paused;opacity:0;transition:opacity .1s; animation-play-state:running;opacity:1;transition-duration:.4s; white-space: nowrap;}
.loadimg span{padding: 0 1vw;}
.loadimg img{height:.14rem; vertical-align: middle;}
.loadtxt{position: absolute; bottom: 9%; left:0; right:0; text-align:center; font-size: 0.06rem;}
.loadtip{display: none; position: fixed; top:0; right:0; bottom:0; left:0; background:#000; z-index: 999; color:#fff;}

.pager{height:100vh; position: relative; background:#000; color:#fff;}
.pager1{height:100vh; position: relative; background: #fff; color:#000;}
.pager2{position: relative; background: #000; color:#fff;}

#index{width: 100vw; overflow: hidden;}

.logo{padding:0.12rem 0 0 .2rem;}
.logo .iconfont{font-size:.33rem;}
.slogan{position: absolute; left:12.5%; top:36%; z-index: 2;}
.slogan h2{font-size: .2rem; font-weight: lighter;}
.slogan h1{font-size: .2rem; margin-bottom: 9%; margin-top: 2%;}
.slogan p{color: rgba(255,255,255,.3); font-size: .053333rem;}

.rightmenu{position: absolute; top:.2rem; right:3%; font-size: .05rem; text-transform: uppercase; text-align: right; line-height: 1.5; z-index: 2;}
.rightmenu a{color:#696969;}
.rightmenu a.active{color:#ccc;}

.menuicon{position: fixed; right:3%; top:.2rem; width: 0.133rem; height:0.136rem; z-index: 999;}
.menuicon:before{content:""; position:absolute; top: 0.047rem; background:#000; height:1px; left:25%; right:0; transition: all .2s ease-In-Out;}
.menuicon:after{content:""; position:absolute; bottom: 0.047rem; background:#000; height:1px; left:0; right:0; transition: all .2s ease-In-Out;}
.menuicon.active::before{transform: rotate(45deg); left: 0; top: 0.067rem; transition: all .2s ease-In-Out;}
.menuicon.active::after{transform: rotate(-45deg); bottom:0.06rem; transition: all .2s ease-In-Out;}
.menuicon:hover::before{left:0; transition: all .2s ease-In-Out;}
.menuicon.white::before,.menuicon.white::after{background:#fff;}

.scrolltip{position:fixed; width:.4rem; height:.4rem; left:10%; bottom:10%;z-index:99; display:flex;align-items: center; justify-content: center;}
.scrolltip::before{content:""; position:absolute; top:0; right:0; bottom:0; left:0; animation: scrolldown 5s linear infinite; font-size: .4rem; color:#f84210; background:url(../image/scrolldown.png) center no-repeat; background-size: contain;}
.scrolltip:after{content:"\e698"; font-family: iconfont; color:#f84210; font-size:.06rem;}
@keyframes scrolldown{
    0%{transform: rotate(0); opacity: .5;}
    50%{transform: rotate(180deg); opacity: 1;}
    100%{transform: rotate(360deg); opacity: 0;}
}
@keyframes fadeinout{
    0%{transform: translateY(-25%); opacity:0.5;}
    50%{transform: translateY(25%); opacity:1;}
    90%{transform: translateY(25%); opacity:0;}
    100%{transform: translateY(-25%); opacity:0;}
}

.cartonbox{position: absolute; right:2.3%; top:0; bottom:0; width: 64.58%; height:100vh; z-index: 1; --marquee-width:100vw;--offset:20vw;--move-initial:calc(-25% + var(--offset));--move-final:calc(-50% + var(--offset));pointer-events:none;}
.cartonbox .border{position: absolute; top:0; right:0; bottom:0; left:0; background:url(../image/border.png) center no-repeat; background-size: cover; z-index: 1; animation: borderani 5s ease-in-out;}
.cartonbox .circle{position: absolute; top:0; right:0; bottom:0; left:0; background:url(../image/circle.png) center no-repeat; background-size: cover; z-index: 1;}
.cartonbox .carton{text-align:center; line-height: 100vh; position: relative; z-index: 3;}
.cartonbox .carton img{vertical-align: middle; width: 1.77rem;}
.cartonbox .carton canvas{display: block;}
.cartonbox .bgtxt{ position: absolute; left:-30%; right:-30%; top:48.5%; overflow: hidden; z-index: 2; transform: rotate(45deg);}
.cartonbox .bgtxt .inner{width:max-content;display:flex;position:relative; height: 100%; transform:translate3d(var(--move-initial),0,0);animation:marquee 5s linear infinite;animation-play-state:paused; animation-play-state:running;transition-duration:.4s; white-space: nowrap;}
.cartonbox .bgtxt span{padding: 0 1vw; font-size: 0;}
.cartonbox .bgtxt img{height:.14rem; vertical-align: middle;}
@keyframes borderani{
    0%{opacity: 0; transform:rotate(0)}
    100%{opacity: 1; transform:rotate(360deg)}
}


@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	html{ font-size: 120px;}
    .loadimg img{height:.25rem;}
    .loadtxt{font-size:.12rem;}
    .slogan h2,.slogan h1{font-size:.35rem; max-width: 65%;}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	html{ font-size: 120px;}
    .slogan h2,.slogan h1{font-size:.2rem;}
}

@media only screen and (min-width: 320px) and (max-width: 812px) and (orientation: landscape){
	html{font-size: 200px;}
    .loadtip{display: flex; justify-content: center; align-items: center; z-index: 99999; font-size:.2rem;}
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
    html{font-size: 60px;}
    body{font-size:.2rem;}
    .container{width:auto; padding:0 5%;}
    .loadimg img{height:.4rem;}
    .loadtxt{font-size:.2rem;}
    .logo{padding-top:0; padding-left:5%;}
    .logo .iconfont{font-size: 1.5rem;}
    .cartonbox{left:2%; right:2%; width:96%;padding:10%; box-sizing: border-box;}
    .cartonbox .border{display:none;}
    .cartonbox .bgtxt img {height: .35rem;}
    .cartonbox .bgtxt {left: -30%; right: -30%;}
    .slogan{top:auto; bottom:25%; left:5%;}
    .slogan h2,.slogan h1{font-size:.5rem; max-width: 65%;}
    .slogan p{font-size:.2rem;}
    .menuicon { right: 5%; top: .4rem; width: 0.4rem; height: 0.2rem;}
    .menuicon.active::before{top:.09rem;}
    .menuicon.active::after{bottom:.09rem;}
    .rightmenu{font-size:.2rem;}
    .scrolltip{ width:1.2rem; height:1.2rem; bottom: 6%;}
    .scrolltip:before{font-size: 1rem;}
    .scrolltip:after{ font-size: .2rem;}
}

.service{color:#000; padding-left: 5%; align-items: center;  position: relative; z-index: 1; display:none;}
.service ul{width:100%;}
.service li{margin-bottom: 1rem;}
.service li:last-child{margin-bottom: 0;}
.service h1{font-size: .7rem; white-space: nowrap; color:#fff; line-height: .75; text-shadow: #828282 0 0 1px, #828282 0 0 1px, #828282 0 0 1px, #828282 0 0 1px, #828282 0 0 1px, #828282 0 0 1px; margin-bottom: 0.15rem; width:100%; position: relative; overflow: hidden; font-family: 'messapia-bold';}
.service h1:after{content:""; position: absolute; left:0; right:0; height:1px; background: #000; bottom:0; transition: all .2s ease-In-Out;}
.service h1 b{text-shadow: none; color:#000;}
.service p{font-size: .2rem; line-height: 1; font-weight: lighter; margin-bottom: 0.2rem;}
.service p span{font-size: 0.067rem; margin-right: 4%; vertical-align: middle;}
.service .link{font-size: .053rem; color:#000; position: absolute; bottom:.5rem; right:.3rem;}
.service .link .iconfont{margin-right: .04rem;}

.flexpage{display: flex; align-items: center; justify-content: center;}
.menu{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;--marquee-width:100vw;--offset:20vw;--move-initial:calc(-25% + var(--offset));--move-final:calc(-50% + var(--offset));--item-font-size:.4rem;counter-reset:menu;color:var(--color-text); flex: 1 1 auto;}
.menu__item{cursor:default;position:relative;padding:0 12.5vw;margin-bottom:.3rem}
.menu__item:last-child{margin-bottom:0}
.menu__item-link{display:block;cursor:pointer;position:relative;-webkit-text-stroke:1.5px #000;;-webkit-text-fill-color:transparent;color:transparent;transition:opacity .4s;width:100%; opacity: .5;}
.menu__item p{font-size:.1rem;line-height:1;font-weight:lighter; margin-top: .1rem;}
.menu__item b{font-weight:300;}
.menu__item p span{font-size:.067rem;margin-left:2%;vertical-align:middle; font-weight: 300;}
.menu__item-link:hover{transition-duration:.1s;opacity:0}
.menu__item-img{pointer-events:none;position:absolute;height:50vh;max-height:400px;opacity:0;left:100%;top:-20%;transform:translate3d(calc(-100% - 6vw),-30%,0) translate3d(0,20px,0)}
.menu__item-link:hover~.menu__item-img{opacity:1;transform:translate3d(calc(-100% - 6vw),-30%,0) rotate3d(0,0,1,4deg);transition:all .4s}
.marquee{position:absolute;top:0;left:0;right:0;overflow:hidden;pointer-events:none;}
.marquee:hover{mix-blend-mode:color-burn}
.marquee:after{content:"";position:absolute;left:12.5vw;right:12.5vw;height:1px;background:#b2b2b2;bottom:0;transition:all .2s ease-In-Out}
.marquee__inner{width:fit-content;display:flex;position:relative;transform:translate3d(var(--move-initial),0,0);animation:marquee 5s linear infinite;animation-play-state:paused;opacity:0;transition:opacity .1s}
.menu__item-link:hover~.marquee .marquee__inner{animation-play-state:running;opacity:1;transition-duration:.4s}
.menu__item-link:hover~.marquee:after{right:0; background: #000; transition: all .2s ease-In-Out;}
.marquee span{text-align:center;padding: 0 1vw;}
.marquee span,.menu__item-link{white-space:nowrap;font-size:var(--item-font-size);font-weight:900;line-height:.83;font-family: 'messapia-bold';}
@keyframes marquee{0%{transform:translate3d(var(--move-initial),0,0)}
100%{transform:translate3d(var(--move-final),0,0)}
}
.distort { position: absolute; pointer-events: none; will-change: transform; z-index: 999;}
.distort__img {opacity: 0;}
.flexpage .link{font-size: .053rem; color:#000; position: absolute; bottom:.5rem; right:.3rem;}
.flexpage .link .iconfont{margin-right: .04rem;}


@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .menu__item{margin-bottom: .8rem;}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}

@media only screen and (min-width: 320px) and (max-width: 767px) {
    .menupage{display: none;}
    .service{display: flex;}
    .service li{margin-bottom: 1.5rem;}
    .service h1{font-size: .8rem;}
    .service p b{font-size:.3rem;}
    .service p span{font-size:.2rem;}
    .service .link{font-size: .2rem;}
    .service .link .iconfont{margin-right: .2rem;}
}
@media only screen and (max-width: 1024px){
    .distort{display: none;}
}

.designbox{padding-top: 0.8rem; width:4.8rem; margin:0 auto;}
.design{position: relative; margin:0 0 .4rem; overflow: hidden; display: block;}
.design:last-child{margin-bottom: 0;}
.design .left{position: absolute; left:-50%; top: 0; bottom:0; width: 50%;transition: all 1s ease-In-Out; z-index: 2;}
.design .right{position: absolute; right:0; top: 0; bottom: 0; width: 50%;transition: all 1s ease-In-Out; z-index: 2;}
.design p{position: absolute; left:0; top:0.33rem; font-size: 0.053rem; z-index: 2; color:#808080;    width: 18%;}
.design h1{position: absolute; left:0; top:0.72rem; font-size: 0.23rem; z-index: 2;font-family: 'messapia-bold';}
.design .img{position: relative; text-align:left; z-index: 1; transition: all 1s ease-In-Out;}
.design .hoverimg{position: relative; display: inline-block; width: 80%; transition: all .5s ease-In-Out;}
.design .img img{width:100%; transition: all 1s ease-In-Out;}
.design .img img:nth-child(2){position: absolute; top: 0; right: 0; bottom: 0; transition: opacity 0.3s;}
.design .img canvas{position: absolute; top: 0; right: 0; bottom: 0; height:100%; z-index: 2;}
.design .more{position: absolute;  bottom:0.33rem; left:0; font-size: 0.053rem; z-index: 2;}
.design .icon_more{ display: inline-block; width:0.23rem; height:0.23rem; line-height: .23rem; border: 1px solid #fff; border-radius: 100%;  vertical-align: middle; margin-left: 0.03rem; text-align: center;}
.design .icon_more .iconfont{ font-size: .0467rem;}
.design .right p{left:auto; right:0; width:18%; top:1.76rem; }
.design .right h2{position: absolute; right:0; top:0.72rem; font-size: 0.63rem; z-index: 2; color:transparent; -webkit-text-stroke: 1.2px #e8e8e8; opacity: .2; font-family: messapia-bold;}
.design:hover .hoverimg{margin-left: 20%; transition: all .5s ease-In-Out;}
.design:hover .left{left:3%;}
.design:hover .right{right:-50%;}


@media only screen and (min-width: 320px) and (max-width: 767px) {
    .designbox{padding:0; width:100%;}
    .design .left{position: relative; width:auto; left:0; height:3rem;}
    .design h1{top:1.3rem; left:5%; font-size:.5rem;}
    .design .hoverimg{width:100%;}
    .design .more .txt{display:none;}
    .design .more{left:auto; right:5%; bottom:1rem; font-size:.2rem;}
    .design .icon_more{width:.6rem; height:.6rem; line-height:.6rem; border-color:rgba(255,255,255,.4);}
    .design .icon_more .iconfont{font-size:.2rem;}
    .design .left p{left:5%; top:.5rem; font-size:.2rem; width: 28%;}
    .design .right{display:none;}
	.design:hover .hoverimg{margin-left: 0;}
	.design:hover .left{left:0;}
	.design:hover .right{right:0;}
}

.casebox{padding-top: 2rem; padding-bottom: 1.5rem; width:100%; overflow: hidden; position: relative;}
.casebox .htitleft{font-size: 1rem; color:#fff; position: absolute; left:-.4rem; top: .6rem;font-family: messapia-bold;}
.casebox .htitright{font-size: 1rem; color:transparent; -webkit-text-stroke: 1.2px rgba(232,232,232,.3); position: absolute; right:-.3rem; top:1.5rem;font-family: messapia-bold;}
.caselist{width:4.8rem; margin: 0 auto;}
.caselist .tit{font-size: .1rem; margin-bottom: .333rem;}
.caselist .tit h3 {font-weight: normal; font-size: .1rem; font-family: messapia-bold;}
.caselist .tit p{opacity: .3; font-size: .043rem; margin-top: .04rem;}
.caselist .tit1{font-size: .1rem; margin-bottom: .333rem;}
.caselist .tit1 span{font-weight: lighter;}
.caselist .txt{font-size: .043rem; margin-bottom: .333rem; color:#808080;}
.caselist ul{position: relative; z-index: 2;}
.caselist li{ position: relative;}
.caselist a{color:#fff;display: flex; align-items: center; opacity: .5; height:.3667rem;cursor:url(../image/cursor.png),auto; position: relative; overflow: hidden;}
.caselist .clogo{flex: 0 0 20%; display: flex; align-items: center;}
.caselist .clogo img{max-height:25px;}
.caselist .ctxt{flex: 0 0 10%; font-size: 0.047rem; text-align: center;}
.caselist .ctit{ font-size: 0.047rem; flex: 1 1 auto;}
.caselist a:hover{opacity: 1;}
.caselist .arrow{flex:0 0 5%; font-size: .07rem; text-align: right;}
.casebox .link{font-size: .053rem; color:#fff; position: absolute; bottom:.5rem; right:.3rem;}
.casebox .link .iconfont{margin-right: .04rem;}
.caselist a:before{content:""; position: absolute; bottom:0; transform: translateX(-100%); left:0; right:0; height:1px; background:#fff; opacity: 1; transition: all .5s ease-in-out; -webkit-transform-origin: left; transform-origin: left;}
.caselist a:after{content:""; position: absolute; bottom:0; left:0; right:0; height:1px; background:#fff; opacity: .5; transition: all .5s ease-in-out; -webkit-transform-origin: left; transform-origin: left;}
.caselist a:hover::before{transform: translateX(0);}
.caselist a:hover::after{transform: translateX(100%);}


@media only screen and (min-width: 320px) and (max-width: 767px) {
	.casebox{padding-top: 2.3rem;}
    .caselist{width:auto; padding:0 5%;}
    .caselist a{height:1.2rem;}
    .caselist .tit{margin-bottom: .6rem;}
    .caselist .tit h3{font-size:.25rem;}
    .caselist .tit p{font-size:.2rem;}
    .caselist .tit1{font-size:.35rem; margin-bottom: .6rem;}
    .caselist .clogo{padding-right:5%;}
    .caselist .ctit{font-size:.2rem;}
    .caselist .ctxt {flex: 0 0 17%; font-size:.2rem; display: none}
    .caselist .arrow{font-size:.2rem;}
    .casebox .link{font-size:.2rem;}
    .casebox .link .iconfont{margin-right: .2rem;}
}

.floatmouse{position:absolute;display:none;width:100px; height:100px; padding:20px; transition: all .05s linear;cursor:url(../image/cursor.png),auto; z-index: 110; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-sizing: border-box;}
.floatmouse video{width: 60px; height:60px; border-radius: 100%; position: relative; z-index: 2; vertical-align: top;}
.floatmouse .mousebg{position: absolute; left:0; right: 0; top:0; bottom:0; border-radius: 100%; background:url('../image/cursorimg.png') center no-repeat #f84210; background-size:contain; animation: roll 5s linear infinite; }
@keyframes roll {
    0%{transform: rotate(0);}
    100%{transform: rotate(360deg);}
}

.newstit{background: url(../image/newsbg.jpg) center no-repeat; background-size: cover; padding:1.3rem 0 1.1rem; text-align:center; overflow: hidden; position: relative}
.newstit h1{font-size: 0.2667rem; position: relative; z-index: 3;}
.newstit p{ font-size: 0.053rem; opacity: .5; margin-top: .15rem; position: relative; z-index: 2;}
.newstit .bgtxt{font-size: 1rem; color:transparent; -webkit-text-stroke: 1.2px #e8e8e8; opacity: .1; position: absolute; left:-20%; top:50%; font-family: messapia-bold; z-index: 1; transform: translateY(-50%); white-space: nowrap;}
.newstit .icon_more{ display: inline-block; width:0.23rem; height:0.23rem; line-height: .23rem; border: 1px solid #fff; border-radius: 100%;  vertical-align: middle; margin-left: 0.03rem; text-align: center; opacity: .3;margin-top: .3rem; transition: all .5s ease-in-out; position: relative; z-index: 2;}
.newstit .icon_more .iconfont{ font-size: .0467rem; vertical-align: bottom;}
.newstit .icon_more:hover{opacity: 1;}
.newstit video{width:100%;position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; filter: grayscale(20%);}
.newrecomd:after{content:""; position: absolute; left:0; right:0; bottom: 0; top:0; background: rgba(0,0,0,.6); z-index: 0;}

.newsbox{padding: .54rem 0 1.1rem; position: relative;}
.newsbox .link{font-size: .053rem; color:#fff; position: absolute; bottom:.5rem; right:.3rem;}
.newsbox .link .iconfont{margin-right: .04rem;}
.newslist{width:4.8rem; margin: 0 auto;}
.newslist a{padding:0.23rem 0; display: flex; align-items: center; position: relative; overflow: hidden;}
.newslist a:before{content:""; position: absolute; bottom:0; transform: translateX(-100%); left:0; right:0; height:1px; background:#fff; opacity: 1; transition: all .5s ease-in-out; -webkit-transform-origin: left; transform-origin: left;}
.newslist a:after{content:""; position: absolute; bottom:0; left:0; right:0; height:1px; background:#fff; opacity: .2; transition: all .5s ease-in-out; -webkit-transform-origin: left; transform-origin: left;}
.newslist a:hover::before{transform: translateX(0);}
.newslist a:hover::after{transform: translateX(100%);}
.newslist .nimg{flex: 0 0 1.67rem; position: relative; overflow: hidden;}
.newslist .ntxt{flex: 0 0 .7rem; text-align: right; font-size: 0.047rem; opacity: .5;}
.newslist .ntxt .iconfont{margin-left: .12rem;}
.newslist .ninfo{color:#fff; flex: 1 1 auto; padding-left: .24rem; padding-right: .3rem; box-sizing: border-box;}
.newslist .ninfo p{font-size: 0.043rem; color:#a3a3a3;}
.newslist .ninfo h2{font-size: 0.093rem; color:#fff; margin:.07rem 0 .17rem;}
.newslist .ninfo h4{font-size: .043rem; color:#808080;}
.newslist a:hover{border-color: #fff;}
.newslist a:hover .ntxt{opacity: 1;}
.newslist .nimg:after{content:"\e695"; font-family: iconfont; position: absolute; top: .033rem; right:.033rem; bottom:.033rem; left: .033rem; background: rgba(0,0,0,.9); transition: all .5s ease-In-Out; display: flex; align-items: center; justify-content: center; font-size: .07rem; opacity: 0;}
.newslist a:hover .nimg:after{ transition: all .5s ease-In-Out; opacity: 1;}



@media only screen and (min-width: 320px) and (max-width: 767px) {
    .newstit{padding:2rem 0;}
    .newstit h1{font-size:.7rem;}
    .newstit p{font-size:.2rem;}
    .newstit .bgtxt{font-size:2rem;}
    .newstit video{display: none;}
    .newsbox{padding:0 0 2.5rem;}
    .newslist{width:auto; padding:0 5%;}
    .newslist a{display: block; padding:1rem 0;}
    .newslist .ninfo{margin-top:.3rem; padding:0;}
    .newslist .ninfo p{font-size:.2rem;}
    .newslist .ninfo h2 {font-size: 0.3rem;}
    .newslist .ninfo h4{font-size:.2rem;}
    .newslist .ntxt{display:none;}
    .newsbox .link{bottom:1rem;font-size:.2rem;}
    .newsbox .link .iconfont{margin-right: .2rem;}
    .newstit .icon_more{width:.8rem; height:.8rem; line-height:.8rem;}
    .newstit .icon_more .iconfont{font-size:.2rem;}
	.newslist a:hover .nimg:after{ opacity: 0;}
}

.footer{display: flex; align-items: center; justify-content:center; overflow: hidden;}

.footbox{width:4.8rem; display: flex; align-items: flex-end; color:#000;}
.footbox .fleft{flex: 0 0 50%;}
.footbox .fright{flex: 0 0 50%; text-align: right;}
.footbox h3{font-size: .133rem; font-weight: lighter;}
.footbox h1{font-size: .267rem; margin: .23rem 0;}
.footbox .contact{font-size: .053rem; line-height: .167rem;}
.footbox .contact span{display: inline-block; line-height: .167rem; margin-right: .3rem;}
.footbox .contact .iconfont{margin-right: .067rem;}
.footbox .copy{font-size: .04rem; margin-top: .5rem;}
.footbox .btn{width:.73rem; text-align:center; color:#fff; font-size: .053rem; line-height: .167rem; background: #000; margin-top: .2rem; display: block;}
.footbox .btn .iconfont{margin-right: .0467rem;}
.footbox .follow{font-size: .0467rem;}
.footbox .follow li{margin-top: .2rem; color:#808080;}
.footbox .follow .iconfont{font-size: .08rem; margin-left: .09rem; color:#000;}
.footbox .qr{padding: .0467rem; border: 1px solid #e8e8e8; width: .233rem; height: .233rem; display: inline-block;}



@media only screen and (min-width: 320px) and (max-width: 767px) {
    .footbox{width:100%; padding:0 5% 3.5rem; display:block;}
    .footbox h3{font-size:.4rem;}
    .footbox h1{font-size:.7rem; margin-bottom: .5rem;}
    .footbox .contact{margin-top:1rem; line-height:2; font-size:.2rem; position: absolute; bottom: 3rem;}
    .footbox .btn{width: 1.5rem; line-height: .5rem; font-size: .2rem;}
    .footbox .fright{text-align:left;}
    .footbox .follow{display:none;}
    .footbox .qr{width: 1rem; height: 1rem; padding: .1rem; margin-top: .5rem;}
    .footbox .copy{position: absolute; bottom:0; left:5%; right:5%; border-top:1px solid rgba(0,0,0,.5); padding:.5rem 0;font-size:.2rem;}
}


.c-nav {z-index: 888; height: 90vh; visibility: hidden; transition:visibility 1.4s cubic-bezier(.165, .84, .44, 1); position: fixed; top: 0; left: 0; right:0; font-size:.06rem; color:#000;}

.c-nav:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition:opacity 1.2s cubic-bezier(.77, 0, .175, 1)
}
.c-nav.is-nav-active {
    visibility:visible
}
.c-nav.is-nav-active:before {
    opacity:.8
}

.c-nav-inner {
    padding-top: 7.14vw;
    padding-bottom:7.14vw;
width: 100%;height: 100%;position: absolute;display: flex;top: 0;left: 0;align-items: flex-end;box-sizing: border-box;}

@media screen and (max-width: 767px) {
    .c-nav-inner {
        padding-bottom:176px
    }
}

.c-nav-inner:after, .c-nav-inner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: #fff;
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transform: scaleY(0) translateZ(0);
    transform: scaleY(0) translateZ(0);
    transition: -webkit-transform 1.2s cubic-bezier(.77, 0, .175, 1) .2s;
    transition: transform 1.2s cubic-bezier(.77, 0, .175, 1) .2s;
    transition:transform 1.2s cubic-bezier(.77, 0, .175, 1) .2s, -webkit-transform 1.2s cubic-bezier(.77, 0, .175, 1) .2s
}

.c-nav-inner:after {
    left: 50%;
    transition-delay:0s
}

.is-nav-active .c-nav-inner:after, .is-nav-active .c-nav-inner:before {
    -webkit-transform: scaleY(1) translateZ(0);
    transform:scaleY(1) translateZ(0)
}

.c-nav-start {
    z-index: 1;
    margin:.1rem 0 0 .2rem;
    top: 0;
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition:opacity .4s cubic-bezier(.165, .84, .44, 1); white-space: nowrap;
    top: 0;
    left: 0;position: absolute; color: #000;
}
.c-nav-start .iconfont{font-size: .5rem;}
.t-link--primary {
        display: inline;
        position:relative
    }
.t-link--primary:after, .t-link--primary:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: .02em;
    min-height: 1px;
    background: #000;
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: scaleX(1) translateZ(0);
    transform: scaleX(1) translateZ(0);
    transition: -webkit-transform .6s cubic-bezier(.165, .84, .44, 1) .3s;
    transition: transform .6s cubic-bezier(.165, .84, .44, 1) .3s;
    transition:transform .6s cubic-bezier(.165, .84, .44, 1) .3s, -webkit-transform .6s cubic-bezier(.165, .84, .44, 1) .3s
}

.t-link--primary:after {
    -webkit-transform-origin: left;
    transform-origin:left
}

.t-link--primary:after, .t-link--primary:hover:before {
    -webkit-transform: scaleX(0) translateZ(0);
    transform: scaleX(0) translateZ(0);
    transition: -webkit-transform .6s cubic-bezier(.165, .84, .44, 1);
    transition: transform .6s cubic-bezier(.165, .84, .44, 1);
    transition:transform .6s cubic-bezier(.165, .84, .44, 1), -webkit-transform .6s cubic-bezier(.165, .84, .44, 1)
}

.t-link--primary:hover:after {
    -webkit-transform: scaleX(1) translateZ(0);
    transform: scaleX(1) translateZ(0);
    transition: -webkit-transform .6s cubic-bezier(.165, .84, .44, 1) .3s;
    transition: transform .6s cubic-bezier(.165, .84, .44, 1) .3s;
    transition:transform .6s cubic-bezier(.165, .84, .44, 1) .3s, -webkit-transform .6s cubic-bezier(.165, .84, .44, 1) .3s
}

.is-nav-active .c-nav-start {
    opacity: 1;
    transition:opacity 1.2s cubic-bezier(.165, .84, .44, 1) .8s
}
.is-nav-active .c-nav-start .iconfont{font-size: .33rem;}

.c-nav .menuicon,.c-nav .c-nav-start{opacity: 0; font-style: normal;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition:opacity .4s cubic-bezier(.165, .84, .44, 1);}

.c-nav-right {
    z-index:1; box-sizing: border-box;
    width: 50%;padding-right: .7rem; text-align:right;
    opacity: 0; font-style: normal;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition:opacity .4s cubic-bezier(.165, .84, .44, 1);}

.c-nav-left {
    opacity: 0; font-style: normal;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition:opacity .4s cubic-bezier(.165, .84, .44, 1);
    width: 50%; padding-left:.7rem; box-sizing: border-box; position: relative;font-weight: 400;}

.is-nav-active .c-nav-left,.is-nav-active .c-nav-right,.is-nav-active .menuicon,.is-nav-active .c-nav-start {
    opacity: 1;
    transition:opacity 1.2s cubic-bezier(.165, .84, .44, 1) 1s
}

.c-nav .contact{font-size: .053rem; margin-top: .2rem;}
.c-nav .contact span{display: inline-block;  margin-right: .2rem;}
.c-nav .contact .iconfont{margin-right: .067rem;}

.c-nav .qrbox{display: inline-flex; justify-content: center; align-items: center;}
.c-nav .qrbox .tit{ padding-right:.1rem; text-align: right; color:#aaaaaa; line-height: 1.5;}
.c-nav .qrbox .tit b{color:#000;}
.c-nav .qr{padding: .0467rem; border: 1px solid #e8e8e8; width: .233rem; height: .233rem; display: inline-block;}

.c-nav-link {
    font-size:3vw;font-weight: lighter; font-family: 'messapia-bold';
    -webkit-text-stroke:1.5px #000;-webkit-text-fill-color:transparent;color:transparent; text-transform: uppercase;
}
.u-normal{font-style:normal;}

.c-nav-line {
    overflow:hidden; padding:3px 0;
}

.c-nav-line:last-child {
    padding-bottom:.2em
}


.is-nav-active .c-nav-line:nth-child(0) .c-nav-line-inner {
    transition: -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) .5s;
    transition: transform .8s cubic-bezier(.165, .84, .44, 1) .5s;
    transition:transform .8s cubic-bezier(.165, .84, .44, 1) .5s, -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) .5s
}

.is-nav-active .c-nav-line:first-child .c-nav-line-inner {
    transition: -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) .6s;
    transition: transform .8s cubic-bezier(.165, .84, .44, 1) .6s;
    transition:transform .8s cubic-bezier(.165, .84, .44, 1) .6s, -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) .6s
}

.is-nav-active .c-nav-line:nth-child(2) .c-nav-line-inner {
    transition: -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) .7s;
    transition: transform .8s cubic-bezier(.165, .84, .44, 1) .7s;
    transition:transform .8s cubic-bezier(.165, .84, .44, 1) .7s, -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) .7s
}

.is-nav-active .c-nav-line:nth-child(3) .c-nav-line-inner {
    transition: -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) .8s;
    transition: transform .8s cubic-bezier(.165, .84, .44, 1) .8s;
    transition:transform .8s cubic-bezier(.165, .84, .44, 1) .8s, -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) .8s
}

.is-nav-active .c-nav-line:nth-child(4) .c-nav-line-inner {
    transition: -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) .9s;
    transition: transform .8s cubic-bezier(.165, .84, .44, 1) .9s;
    transition:transform .8s cubic-bezier(.165, .84, .44, 1) .9s, -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) .9s
}

.is-nav-active .c-nav-line:nth-child(5) .c-nav-line-inner {
    transition: -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) 1s;
    transition: transform .8s cubic-bezier(.165, .84, .44, 1) 1s;
    transition:transform .8s cubic-bezier(.165, .84, .44, 1) 1s, -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) 1s
}

.is-nav-active .c-nav-line:nth-child(6) .c-nav-line-inner {
    transition: -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) 1.1s;
    transition: transform .8s cubic-bezier(.165, .84, .44, 1) 1.1s;
    transition:transform .8s cubic-bezier(.165, .84, .44, 1) 1.1s, -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) 1.1s
}

.is-nav-active .c-nav-line:nth-child(7) .c-nav-line-inner {
    transition: -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) 1.2s;
    transition: transform .8s cubic-bezier(.165, .84, .44, 1) 1.2s;
    transition:transform .8s cubic-bezier(.165, .84, .44, 1) 1.2s, -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) 1.2s
}

.is-nav-active .c-nav-line:nth-child(8) .c-nav-line-inner {
    transition: -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) 1.3s;
    transition: transform .8s cubic-bezier(.165, .84, .44, 1) 1.3s;
    transition:transform .8s cubic-bezier(.165, .84, .44, 1) 1.3s, -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) 1.3s
}

.is-nav-active .c-nav-line:nth-child(9) .c-nav-line-inner {
    transition: -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) 1.4s;
    transition: transform .8s cubic-bezier(.165, .84, .44, 1) 1.4s;
    transition:transform .8s cubic-bezier(.165, .84, .44, 1) 1.4s, -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) 1.4s
}

.is-nav-active .c-nav-line:nth-child(10) .c-nav-line-inner {
    transition: -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) 1.5s;
    transition: transform .8s cubic-bezier(.165, .84, .44, 1) 1.5s;
    transition:transform .8s cubic-bezier(.165, .84, .44, 1) 1.5s, -webkit-transform .8s cubic-bezier(.165, .84, .44, 1) 1.5s
}

.c-nav-line-inner {
    position: relative;
    display: inline-block;
    opacity: 0;
    -webkit-transform: translateY(105%) translateZ(0);
    transform: translateY(105%) translateZ(0);
    transition: opacity .4s cubic-bezier(.165, .84, .44, 1), -webkit-transform 0s cubic-bezier(.165, .84, .44, 1) .4s;
    transition: opacity .4s cubic-bezier(.165, .84, .44, 1), transform 0s cubic-bezier(.165, .84, .44, 1) .4s;
    transition: opacity .4s cubic-bezier(.165, .84, .44, 1), transform 0s cubic-bezier(.165, .84, .44, 1) .4s, -webkit-transform 0s cubic-bezier(.165, .84, .44, 1) .4s;
    line-height: 1;
    margin: .05rem 0;
}

.c-nav-line-inner:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: #f84210;
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(0) translateZ(0);
    transform: scaleX(0) translateZ(0);
    transition: -webkit-transform .6s cubic-bezier(.165, .84, .44, 1);
    transition: transform .6s cubic-bezier(.165, .84, .44, 1);
    transition:transform .6s cubic-bezier(.165, .84, .44, 1), -webkit-transform .6s cubic-bezier(.165, .84, .44, 1)
}

.c-nav-line-inner.nuxt-link-exact-active,.c-nav-line-inner:hover{color:#000; -webkit-text-stroke: black;
-webkit-text-fill-color: black;}
.c-nav-line-inner.nuxt-link-exact-active:before, .c-nav-line-inner:hover:before {
    -webkit-transform: scaleX(1) translateZ(0);
    transform:scaleX(1) translateZ(0)
}

.is-nav-active .c-nav-line-inner {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform:translateZ(0)
}


@media only screen and (min-width: 320px) and (max-width: 767px) {
    .is-nav-active .c-nav-start .iconfont,.c-nav-start .iconfont{font-size:1.5rem;}
    .c-nav-start{margin:0 0 0 .7rem;}
    .c-nav-inner{display:block; padding-top:3rem;}
    .c-nav-left{width:auto; z-index: 2;}
    .c-nav .qrbox .tit{display:none;}
    .c-nav-link{font-size:.5rem;}
    .c-nav-right{text-align:left; padding-left: .7rem;}
    .c-nav .qr{width: 1rem; height: 1rem; padding: 0; margin-top: .5rem;}
    .c-nav .contact{margin-top:.5rem;font-size:.2rem;}
    .c-nav-line-inner:before{height:5px;}
}

.workpage{height:auto;}
.workpage .bgtxt{font-size: 1rem; color:transparent; -webkit-text-stroke: 1.2px #e8e8e8; opacity: .1; position: absolute; right:-1.3rem; top:50%; font-family: messapia-bold; z-index: 1; transform: translateY(-50%);}

.newspage{height:auto; overflow: hidden;}
.newspage .bgtxt{font-size: 1rem; color:transparent; -webkit-text-stroke: 1.2px #e8e8e8; opacity: .1; position: absolute; right:-1.3rem; top:50%; font-family: messapia-bold; z-index: 1; transform: translateY(-50%);}
.newspage .toptit_right{padding-top: .6rem;}

.toptit_right{ padding:.7rem 12.5% 0; z-index: 2; text-align: right; position: relative; z-index: 2;}
.toptit_right h1{font-size: .167rem; margin-bottom: .15rem;}
.toptit_right h2{font-size: .2rem; font-weight: lighter;}
.toptit_right p{color: rgba(255,255,255,.3); font-size: .053333rem;}

.submenu{width:4.8rem; margin:.3rem auto 0; font-size: .067rem; display: flex; position: relative; z-index: 2;}
.submenu li{flex: 0 0 30.33%; overflow: hidden;  box-sizing: border-box; position: relative; margin:0 1.5%}
.submenu a{display: block; position: relative; padding: .1rem 0; line-height: .1rem; height:.1rem;}
.submenu a:before{content:""; position: absolute; bottom:0; transform: translateX(-100%); left:0; right:0; height:1px; background:#fff; opacity: 1; transition: all .5s ease-in-out; -webkit-transform-origin: left; transform-origin: left;}
.submenu a:after{content:""; position: absolute; bottom:0; left:0; right:0; height:1px; background:#fff; opacity: .2; transition: all .5s ease-in-out; -webkit-transform-origin: left; transform-origin: left;}
.submenu .t1{position: absolute; left:-100%; right:100%; color:#fff; transition: all .5s ease-in-out;}
.submenu .t2{position: absolute; left:0; right:0; color:#808080; transition: all .5s ease-in-out; font-size: .0867rem;}
.submenu a:hover .t1{left:0; right:20%;}
.submenu a:hover .t2{left:80%; right:-80%; font-size: .05rem;}
.submenu a:hover::before{transform: translateX(0);}
.submenu a:hover::after{transform: translateX(100%);}
.submenu .active .t1{left:0; right:20%;}
.submenu .active .t2{left:80%; right:-80%; font-size: .05rem;}
.submenu .active a::before{transform: translateX(0);}
.submenu .active a::after{transform: translateX(100%);}



@media only screen and (min-width: 320px) and (max-width: 767px) {
	.toptit_right{padding: .7rem 5% 0;}
    .toptit_right h1{font-size:.4rem;}
    .toptit_right h2{font-size:.4rem;}
    .toptit_right p{font-size:.2rem;}
    .submenu{width:auto; padding:0 3.5%; margin: 1rem auto .5rem;}
    .submenu .t2{font-size:.25rem;}
    .submenu .active .t1{font-size: .25rem;}
    .submenu .active .t2{font-size: .2rem; left:100%; right:-100%;}
}

.timeline{position: relative; margin-top: .2rem; margin-bottom: .08rem;}
.timeline .time{width: 4.8rem; margin:0 auto;}
.timeline .time a{margin-right:.6rem; font-size:0.067rem; color:#808080; display: inline-block; padding-bottom:.133rem;}
.timeline .time a.active{color:#fff; position: relative;}
.timeline .time a.active:after{content:""; bottom:1px; left:0; right:0; background:#fff; height:1px; position: absolute;}
.timeline .line{position: absolute; bottom:0; left:0; right:12.5%; background:#fff; opacity: .2; height:1px; margin-right:.24rem;}
.timeline .point{position: absolute; right:12.5%; width: .16rem; height: .16rem; background:url("../image/time.png") center no-repeat; background-size: contain; bottom: -.08rem; animation: roll 5s linear infinite;}

.aboutpage{height: auto; overflow-x: hidden; background:#fff; color:#000; position: relative;}
.aboutpage .logo{width:1rem;}
.aboutpage .logo img{margin-bottom: .1rem;}
.aboutpage .logo p{color: rgba(0,0,0,.3); font-size: .053333rem;}
.aboutpage .rightmenu a{color:#ccc;}
.aboutpage .rightmenu a.active{color:#696969;}
.about_tit{ margin:.4rem 12.5% 0 57%; z-index: 2; text-align: left; position: relative; z-index: 2;}
.about_tit h1{font-size: .133rem; line-height: 1.5;}
.about_tit p{color: rgba(0,0,0,.3); font-size: .053333rem; font-family: 'messapia-bold';}
.about_tit .txt{margin:-.13rem 0 0;}
.about_tit .txt img{height: .7rem;}
.about_tit .txt .iconfont{font-size: 1.5rem;}
.about_tit .sun{position: absolute; width:1.2rem; height:1.2rem; left:-1.1rem; top:50%;}
.about_tit .sun img{width: 100%; height: 100%; animation: rollscr 5s linear infinite;}
@keyframes rollscr{
    0%{transform: rotate(0) scale(1);}
    50%{transform: rotate(180deg) scale(1.2);}
    80%{transform: rotate(288deg) scale(.8);}
    100%{transform: rotate(360deg) scale(1);}
}

.scrolltxt{position: relative; --marquee-width:100vw;--offset:20vw;--move-initial:calc(-25% + var(--offset));--move-final:calc(-50% + var(--offset));pointer-events:none; margin:1.8rem 0 .6rem; font-family: messapia-bold;}
.scrolltxt .inner{width:max-content;display:flex;position:relative; height: 100%; transform:translate3d(var(--move-initial),0,0);animation:marquee 5s linear infinite;animation-play-state:paused;opacity:0;transition:opacity .1s; animation-play-state:running;opacity:1;transition-duration:.4s; white-space: nowrap;}
.scrolltxt span{padding: 0 1vw; font-size: .333rem; color:transparent; -webkit-text-stroke: 1.2px #000; opacity: .9;}
.scrolltxt .float{position: absolute; left:52%; width: 1rem; top:-40%;}

.about_txt{display: flex; align-items: center;}
.about_txt .aimg{width:54%; flex: 0 0 54%; text-align: right; padding-right:4%; box-sizing: border-box; display: flex; justify-content: flex-end;}
.about_txt .atxt{flex: 0 0 46%; padding-left: 4%; box-sizing: border-box; font-size: .043rem; color:#808080;}
.about_txt .aimg p{transform: rotate(90deg) translate(50%,-5%); transform-origin: top; text-align: left; font-size: .04rem; opacity: .3;}
.about_txt .aimg img{width:2rem;}
.about_txt .atxt .t1{padding-right:50%; line-height: 2; white-space:pre-wrap;}
.about_txt .atxt .line{background:#000; height:1px; margin:.5rem 0 .2rem;}
.about_txt .atxt .t2{color:rgba(0,0,0,.4); font-family: messapia-bold; text-transform: uppercase;}
.team{padding:1rem 0; text-align: center;}
.team img{height:.5rem;}
.team h3{margin:.25rem 0 .1rem; font-size: .1667rem;}
.team h3 span{opacity: .5;}
.team p{font-size: .0533rem; opacity: .6;}
.about_video{position: relative; height:2.666rem; overflow: hidden;}
.about_video video{width:100%;position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; filter: grayscale(20%);}
.about_video:after{content:""; position: absolute; left: 0; right:0; top: 0; bottom: 0; background: rgba(0,0,0,.5);}

.about_case{overflow: hidden; padding-top: .8rem;}
.about_case .casetit{transform: rotate(90deg) translate(50%,-5%); transform-origin: top; text-align: left;}
.about_case .caselist{width:auto; padding-left: 34%;}
.about_case .caselist a{padding-right: 19%;}
.about_case .htitleft{left: 1rem; top: 2.2rem; right:auto; color:#1a1a1a;}
.about_case .htitright{left: -1.5rem; top: 1.6rem; right:auto; -webkit-text-stroke: 1.2px rgba(232,232,232,.1);}
.about_case .caselist .tit{position: relative;}
.about_case .caselist .tit .num{position: absolute; right: 19%; top:0;}
.about_case .caselist .tit .num h3{font-weight: normal; font-size: .1rem; font-family: messapia-bold;}
.about_case .caselist .tit .num p{opacity: .3; font-size: .043rem; margin-top: .07rem;}



@media only screen and (min-width: 320px) and (max-width: 767px) {
    .about_tit {margin: .8rem 12.5% 0;}
    .about_tit h1{font-size: .4rem;}
    .about_tit p{font-size:.2rem;}
    .about_tit .txt .iconfont {font-size: 3rem;}
    .about_tit .sun {width: 3rem; height: 3rem; left: 1.5rem; top: 1.9rem;}
    .scrolltxt{margin: 1.8rem 0 1.6rem; display: none;}
    .scrolltxt span {font-size: .8rem;}
    .scrolltxt .float {width: 2rem; top: -70%;}
    .about_txt {display: block; margin-top: 2rem;}
    .about_txt .aimg {width: 100%; padding-right: 5%;}
    .about_txt .aimg img {width: 5rem;}
    .about_txt .aimg p{font-size:.2rem; white-space: nowrap; width: 20%;}
    .about_txt .atxt{padding:.5rem 4%;font-size:.2rem;}
    .about_txt .atxt .t1 { padding-right: 0;}
    .team img {height: 1rem;}
    .team h3 {font-size: .35rem;}
    .team p{font-size:.2rem;}
    .about_video{height:4rem;}
    .about_video video{height:100%;}
    .about_case .caselist {padding-left: 26%;}
    .about_case .caselist a {padding-right: 0%;}
    .about_case .caselist .tit{font-size:.3rem;}
    .about_case .caselist .tit .num{right:0; display: none;}
    .about_case .caselist .tit .num p{font-size:.2rem;}
    .about_case .caselist .txt{font-size:.2rem;}
    .timeline{margin-bottom:.25rem;}
    .timeline .time a{font-size:.2rem;}
    .timeline .point{width:.5rem; height:.5rem; bottom:-.25rem;}
    .timeline .time{width: 100%; padding: 0 5%;}
    .timeline .line,.timeline .point{right:5%;}
    
}

.contactpage{height: auto; min-height: 100vh; overflow-x: hidden; background:#fff; color:#000; position: relative;}
.contactpage .logo{width:1rem;}
.contactpage .logo img{margin-bottom: .1rem;}
.contactpage .logo p{color: rgba(0,0,0,.3); font-size: .053333rem;}
.contactpage .rightmenu a{color:#ccc;}
.contactpage .rightmenu a.active{color:#696969;}
.contactpage .toptit{font-size: .167rem; padding-bottom: .3rem; border-bottom: 1px solid #000; line-height: 1.5; position: relative; margin-top: .5rem;}
.contactpage .toptit span{font-weight: lighter; opacity: .5;}
.contactpage .toptit .smile{position: absolute; right: 0; bottom: .283rem; width: .2rem;}
.contactpage .subtit{padding-top: .3rem;}
.contactpage .subtit h3{font-size: .133rem;}
.contactpage .subtit p{font-size: .043rem; margin-top: .167rem;}

.select{padding-bottom: .1rem; padding-top: .5rem; display:flex; margin:0 -.08rem; justify-content: flex-start; align-items: center;}
.select li{padding: 0 .08rem; flex: 1 1 auto;}
.selectbox{border: 1px solid #e6e6e6; padding:.3rem .167rem .7rem; overflow: hidden; position: relative; transition: all .5s ease-in-out;}
.selectbox .tit{font-size: .12rem; position: relative; z-index: 2;}
.selectbox .txt{font-size: .04rem; margin-top: .11rem; color:#929292; position: relative; z-index: 2; height: .1rem;}
.selectbox .num{font-size: .67rem; color:transparent; -webkit-text-stroke: 1.2px #eaeaea; opacity: .8; position: absolute; left:-25%; bottom:0;font-family: messapia-bold; line-height: 1; transition: all .5s ease-in-out; z-index: 1;}
.selectbox:hover .num{color:#eaeaea; bottom:50%;}
.selectbox:hover{border: 1px solid #000; box-shadow: .08rem .08rem .167rem rgba(0,0,0,.16); transform: translateY(-2%);}
.selectbox .img{position: absolute; height:.5rem; bottom:-.5rem; padding:.1rem; transition: all .5s ease-in-out;left: 0; right: 0; box-sizing: border-box;}
.selectbox:hover .img{bottom:0;}
.selectbox .radio{position: absolute; height:.53rem; bottom:-.53rem; padding: .1rem ; transition: all .5s ease-in-out;left: 0; right: 0; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; z-index: 2;}
.selectbox .radio label{flex: 0 0 50%; padding:0.02rem; box-sizing: border-box; position: relative;}
.selectbox .radio div{background: #f4f4f4; line-height: .13rem; text-align:center;}
.selectbox .radio input{position: absolute; left:0; right:0; opacity: 0;}
.selectbox .radio input:checked~div{background:#000; color:#fff;}
.selectbox .radio input:checked~div:before{content:"\e649"; font-size: .05rem; font-family:"iconfont"; margin-right: .02rem;}
.selectbox:hover .radio{bottom:0;}
.selectbox .tit1{font-size: .1rem; position: relative; z-index: 2;}
.selectbox.s2{padding-bottom: .24rem;}
.selectbox .tit1 b{font-size: .167rem;}
.selectbox .tit2{font-size: .067rem; position: relative; z-index: 2; margin-top: .08rem; margin-bottom: .4rem;}

.pagination{text-align: center; padding:.2rem 0 .3rem;}
.pagination span{width:.0233rem; display: inline-block; height:.0233rem; margin:0 .167rem; border-radius: 100%; background: #000; opacity: .2;}
.pagination span.active{opacity: 1;}

.guestbox{border: 1px solid #e6e6e6; padding:.4rem .8rem; margin: .3rem 0;}
.guestbox .gitem{display: flex; font-size: .0533rem; position: relative;}
.guestbox .gitem .tit{position: absolute; left:0; top:.167rem;}
.guestbox .gitem .tit .iconfont{margin-right: .05rem;}
.guestbox .gitem input{border: 0; margin: 0; border-bottom: 1px solid #e8e8e8; width:100%; padding:.167rem 0 .08rem  .4rem; transition: all .5s ease-in-out;}
.guestbox .gitem input:focus{border-bottom: 1px solid #000;}

.slidecheck{padding:.2rem 0;}
#slide_box {width: 70%; height: .167rem; text-align: center; line-height: .167rem; font-size: 14px; color: #717171; border: none; margin: 0 auto; position: relative;}
#slide_box:after{content:""; position: absolute; background: #e5e5e5; top: 50%; left:.183rem; right:.183rem; height:1px; z-index: 1;}
#slide_box .txt{padding-top: 25px; text-align: center; color:#aeaeae; font-size: .04rem; line-height: 25px;}
#slide_box .left{ background:#fff url(../image/dragbg.png) 0 0 no-repeat; background-size: 100% 100%; border-radius: 100%; position: absolute; left:0; top: 0; width: .167rem; height:.167rem; z-index: 1;}
#slide_box .right{ background:#fff url(../image/dragbg.png) 0 0 no-repeat; background-size: 100% 100%; border-radius: 100%; position: absolute; right:0; top: 0; width: .167rem; height:.167rem; z-index: 1;}
#slide_xbox {
	width: .167rem; height: .167rem; text-align: center; line-height: .167rem; font-size: 16px; color: #000; position: absolute; z-index: 3;}
#btn {
	cursor: pointer; width: .167rem; height: .167rem; float: right; color: #000; background:#fff url(../image/drag.png) 0 0 no-repeat; background-size: 100% 100%; border-radius: 100%;
}
#btn.active{animation: roll 5s linear infinite;}
.submit_btn{line-height: .233rem; text-align: center; background:#000; color:#fff; font-size: .067rem;}

.success{text-align: center; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; line-height: 2;}
.success .smile{ margin-bottom: .1rem;}
.success img{width: .4rem;}
.success h1{font-size: .167rem;}
.success h3{font-size: .08rem;}
.success .backbtn{line-height: .233rem; text-align: center; background:#000; color:#fff; font-size: .067rem; display: inline-block; padding: 0 .3rem; margin: .25rem 0 .05rem;}
.success .txt{color:#b3b3b3;}


@media only screen and (min-width: 320px) and (max-width: 767px) {
    .contactpage .toptit {font-size: .3rem;}
    .contactpage .toptit .smile {bottom: .4rem; width: .5rem;}
    .contactpage .subtit h3{font-size: .3rem;}
    .contactpage .subtit p{font-size:.2rem;}
    .selectbox {padding: 1.2rem .167rem 2rem;}
    .selectbox .num{color:#eaeaea; bottom:70%; left: 0; font-size: 1rem;}
    .selectbox .img{bottom:0;}
    .select{flex-wrap: wrap;}
    .select li{flex:0 0 50%; padding:.1rem; box-sizing: border-box;}
    .selectbox .tit{font-size:.25rem;}
    .selectbox .txt{font-size:.2rem;}
    .selectbox .radio{ bottom:0; height: 1.2rem;}
    .selectbox .radio div {line-height: 2;}
    .selectbox.s2{padding: 1.5rem .167rem .5rem;}
    .selectbox.s2 .num{bottom:60%;}
    .selectbox .radio input:checked~div:before{font-size:.2rem;}
    .selectbox .tit1{font-size:.3rem;}
    .selectbox .tit1 b{font-size:.35rem;}
    .selectbox .tit2{font-size:.2rem;}
    .guestbox{padding: .5rem;}
    .guestbox .gitem input{padding: .3rem 0 .2rem 1.2rem;}
    .guestbox .gitem .tit{top:.28rem; font-size:.2rem;}
    .slidecheck{padding:.5rem 0;}
    #slide_box{height:.8rem;width:100%;}
    #slide_box .left,#slide_box .right,#slide_xbox,#btn{width:.8rem; height:.8rem;}
    #slide_box:after{left:.8rem;right:.8rem;}
    #slide_box .txt{font-size:.2rem;}
    .submit_btn {line-height: .6rem; font-size:.2rem;}
    .pagination span{width:.1rem; height:.1rem;}
	.success{padding: 0;}
	.success img{width: .8rem;}
	.success h1{font-size: .35rem;}
	.success .backbtn{font-size: .2rem; line-height: .6rem; padding: 0 .8rem;}
	.success h3,.success .txt{font-size: .2rem;}
}

.workviewtit{padding:.8rem 1rem 1rem;}
.workviewtit p{width: 18%;}
.workviewtit h1{margin-top: .23rem; font-size: .233rem; font-weight:bold;}
.workimg{position: relative; overflow: hidden;}
.workimg img{width:100%;}
.workimg:after{content:""; position: absolute; left: 0; right:0; top: 0; bottom: 0; background: rgba(0,0,0,.4);}


.videotit{ padding:1rem 0 .8rem; text-align:center; overflow: hidden; position: relative;}
.videotit h1{font-size: 0.2667rem; position: relative; z-index: 3;}
.videotit p{ font-size: 0.053rem; opacity: .5; margin-top: .15rem; position: relative; z-index: 2;}
.videotit .bgtxt{font-size: 1rem; color:transparent; -webkit-text-stroke: 1.2px #e8e8e8; opacity: .1; position: absolute; left:-20%; top:50%; font-family: 'messapia-bold'; z-index: 1; transform: translateY(-50%); white-space: nowrap;}
.workvideo{position: relative; max-height:3rem; overflow: hidden;}
.workvideo video{width:100%;}
.worklinks{padding: .5rem 0;box-sizing: border-box;}
.worklinks .tit{font-size: .1rem; margin-bottom: .25rem;}
.worklinks .txt{color: rgba(255,255,255,.2);}
.worklinks .txt a{margin-right: .2rem;}
.worklinks .txt a .iconfont{margin-left: .09rem;}
.worklinks .back{width: .33rem; height:.33rem; line-height: .33rem; text-align: center; font-size: .0467rem; border-radius: 100%; background: #131313; position: absolute; right:0; bottom: .5rem;}

.whitebg{background:#fff; color:#000;}
.whitebg .logo{color:#000;}
.workinfo{width:4.33rem; margin: 0 auto; padding: .8rem 0 .3rem; display: flex; align-items: flex-start;}
.workinfo .tit{flex: 0 0 50%; line-height: 1.5;}
.workinfo .txt{flex: 0 0 50%; line-height: 2; color:#5d5d5d; padding-top: .42rem;}
.workinfo h1{font-size: .267rem; padding:.3rem 0 .5rem;}
.workinfo .link{width:.3rem; height: .3rem; line-height: .3rem; text-align: center; border-radius: 100%; border: 1px solid rgba(0,0,0,.1); font-size: .067rem; display:inline-block;}
.imglist{width:4.8rem; margin: 0 auto;}
.imglist li{padding:.267rem 0;}
.imglist .img{position: relative;}
.imglist .img:after{content:""; position: absolute; left: 0; right:0; top: 0; bottom: 0; background: rgba(0,0,0,.5);}

.imgscroll{padding:.7rem 0;}
.imgscroll img{height:2.1rem;padding-left: .5rem;}
.imgscroll .swiper-slide{width:auto;}


.newsview{height: auto;}
.nview_tit{padding: .54rem 0 0 25%; position: relative;}
.nview_tit .smile{position: absolute; right: 12%; bottom: .283rem; width: .2rem;}
.nview_txt{padding:0 25% .54rem 25%}
.ndate{font-size: .0467rem; color:#9d9d9d;}
.ntitle{font-size: .167rem; padding:.13rem 0 .24rem; border-bottom: 1px solid #000;}
.ntext{padding:.4rem 0; border-bottom: 1px solid #000;}
.ntext p{line-height: 2;}
.nctrl{display: flex; justify-content: space-between; padding:.2rem 0; font-size: .06rem; font-family: 'Sofia';}
.nprev .iconfont{transform: rotate(180deg); display: inline-block; vertical-align: initial; margin-right: .1rem;}
.nnext .iconfont{ display: inline-block; vertical-align: initial; margin-left: .1rem;}
.back{text-align: center; font-family: 'Sofia';}
.back a{display: inline-block; width:.33rem; height:.33rem; line-height: .33rem; background: #000; color:#fff; border-radius: 100%;}
.newrecomd{background-size: cover; padding:.7rem 0 .6rem; background-position: center;}
.newrecomd p{margin-bottom: .2rem; margin-top:0}


@media only screen and (min-width: 320px) and (max-width: 767px) {
    .videotit h1{font-size:.7rem;}
    .videotit p{font-size:.2rem;}
    .videotit .bgtxt{font-size:2rem;}
	.workviewtit p{width: 50%;}
    .worklinks .tit{font-size:.3rem;}
    .workinfo{display: block; width: 90%;}
    .workinfo h1{font-size:.35rem;}
    .workinfo .tit p{width: 28%;}
    .workinfo .link{width:.8rem; height:.8rem; line-height:.8rem; font-size:.3rem;}
    .workinfo .txt{margin-top: .5rem;}
    .imglist{width: 90%;}
    .workviewtit h1{font-size:.5rem;}
    .ndate{font-size:.2rem;}
    .ntitle{font-size:.25rem;}
    .nview_tit{padding-left:15%;}
    .nview_tit .smile{width:.3rem;}
    .nview_txt{padding: 0 15% .54rem 15%}
    .nctrl{font-size:.2rem;}
    .back a{width:.6rem; height:.6rem; line-height:.6rem;}
    .worklinks{padding: .5rem;}
    .worklinks .back{right:.5rem; width:.6rem; height:.6rem; line-height:.6rem; font-size:.2rem;}
}