﻿@charset "utf-8";
/* CSS Document */
html, body, .cmn-Wrap, .cmn-Main { width: 100%; height: 100%; }
body { width: 100%; margin: 0 auto; height: 100%; position: relative; overflow: hidden; font-family: 'Microsoft YaHei UI',Arial; }
.cmn-Wrap { position: relative; top: 0; left: 0; }
.cmn-Main { position: absolute; top: 0; left: 0; }
.Position { position: absolute; }
.cmn-PublicScenes { position: relative; top: 0; left: 0; display: block; width: 100%; height: 100%; }
/*各场景背景*/
.Bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0%; overflow: hidden; }
    .Bg img { position: relative; width: 100%; }
.cmn-PublicScenes .Bg img { }

/*::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(171,1,17,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}*/

/*撑内容*/
.SupportContent { width: 100%; opacity: 0; position: relative; filter: alpha(opacity=0); }


/***************头部菜单********************/
.cmn-Nav { position: fixed; top: 0; left: 0; width: 100%; border-radius: initial; background: #000; border: none; box-shadow: none; z-index: 2; margin: auto; padding: 5px 0px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.cmn-NavCon { text-align: right; float: right; margin-right: 0%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

.cmn-NavIn { margin: auto; }
    .cmn-NavIn a { font-size: 15px; padding: 7px 28px; text-decoration: none; outline: none; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; background: #000 -webkit-gradient(linear, left top, right top, from(#000), to(#000), color-stop(0.5, #fff)) 0 0 no-repeat; -webkit-background-size: 60%; -o-background-size: 60%; -moz-background-size: 60%; -ms-background-size: 60%; background-size: 60%; color: #fff; color: rgba(255,255,255,0.8); -webkit-background-clip: text; -o-background-clip: text; -moz-background-clip: text; -ms-background-clip: text; background-clip: text; -webkit-background-position: -150% 50%; -o-background-position: -150% 50%; -moz-background-position: -150% 50%; -ms-background-position: -150% 50%; background-position: -150% 50%; display: block; }

@-webkit-keyframes shine {
    0% { -webkit-background-position: -150% 50%; }
    100% { -webkit-background-position: 350% 50%; }
}

@-o-keyframes shine {
    0% { -o-background-position: -150% 50%; }
    100% { -o-background-position: 350% 50%; }
}

@-moz-keyframes shine {
    0% { -moz-background-position: -150% 50%; }
    100% { -moz-background-position: 350% 50%; }
}

@-ms-keyframes shine {
    0% { -ms-background-position: -150% 50%; }
    100% { -ms-background-position: 350% 50%; }
}

@keyframes shine {
    0% { background-position: -150% 50%; }
    100% { background-position: 350% 50%; }
}


.NoneBg { background: none; }
/*.NoneBg .cmn-NavIn a{color:#000;}*/


.cmn-NavList { display: inline-block; *display: inline; zoom: 1; }

.cmn-Nav .cmn-NavIn a:hover { /*color:#ce0346;*/ -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-animation: shine 900ms 200ms infinite linear; -o-animation: shine 900ms 200ms infinite linear; -moz-animation: shine 900ms 200ms infinite linear; -ms-animation: shine 900ms 200ms infinite linear; animation: shine 900ms 200ms infinite linear; }

.cmn-Nav .cmn-NavList.Select > a { -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-animation: shine 900ms 200ms infinite linear; -o-animation: shine 900ms 200ms infinite linear; -moz-animation: shine 900ms 200ms infinite linear; -ms-animation: shine 900ms 200ms infinite linear; animation: shine 900ms 200ms infinite linear; }

.MenuIconBtn { position: relative; top: 1px; width: 45px; display: none; cursor: pointer; float: right; z-index: 2; }
    .MenuIconBtn img { width: 100%; }

.HeadLogo { position: absolute; left: 2.5%; top: 10%; height: 74%; }
    .HeadLogo img { height: 100%; }

/*音频*/
.MusciWrap { width: 25px; height: 29px; position: absolute; cursor: pointer; right: 1%; top: 13%; display: none; background: url(../images/Public/MusicOpenb.png) no-repeat; background-size: 100% 100%; }
.CloseMusciWrap { width: 100%; height: 100%; display: none; background: url(../images/Public/MusicCloseb.png) no-repeat; background-size: 100% 100%; }



.NoneBg .MusciWrap { background: url(../images/Public/MusicOpen.png) no-repeat; background-size: 100% 100%; }
.NoneBg .CloseMusciWrap { background: url(../images/Public/MusicClose.png) no-repeat; background-size: 100% 100%; }

.NoneBg .MusciWrap.Select .CloseMusciWrap { display: block; background: url(../images/Public/MusicClose.png) no-repeat; background-size: 100% 100%; }


.MusciWrap.Select { background: none; }
    .MusciWrap.Select .CloseMusciWrap { display: block; }

/******************首页********************/
.cmn-Home { overflow: hidden; }

.cmn-HomeList { width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

.cmn-HomeBg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
    .cmn-HomeBg img { width: 100%; height: 100%; }

.cmn-HomeInner { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: table; pointer-events: none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

.cmn-HomeCon { width: 68%; left: 18%; top: 23%; position: absolute; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
    .cmn-HomeCon img { width: 100%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }


.cmn-HomeList1 { }
    .cmn-HomeList1 .cmn-HomeBg { /*background:url(../images/Home/Banner.jpg) no-repeat;background-size:cover;*/ }


/*首页logo*/
.HomeLogo { position: absolute; width: 56%; top: 15%; left: 0; overflow: hidden; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
    .HomeLogo img { width: 100%; -webkit-animation: HomeLogoImgAnimate 900ms 400ms ease 1 both; -o-animation: HomeLogoImgAnimate 900ms 400ms ease 1 both; -moz-animation: HomeLogoImgAnimate 900ms 400ms ease 1 both; -ms-animation: HomeLogoImgAnimate 900ms 400ms ease 1 both; animation: HomeLogoImgAnimate 900ms 400ms ease 1 both; }

@-webkit-keyframes HomeLogoImgAnimate {
    0% { -webkit-transform: translate(0,100%); opacity: 0; }
    100% { -webkit-transform: translate(0,0); opacity: 1; }
}

@-o-keyframes HomeLogoImgAnimate {
    0% { -o-transform: translate(0,100%); opacity: 0; }
    100% { -o-transform: translate(0,0); opacity: 1; }
}

@-moz-keyframes HomeLogoImgAnimate {
    0% { -moz-transform: translate(0,100%); opacity: 0; }
    100% { -moz-transform: translate(0,0); opacity: 1; }
}

@-ms-keyframes HomeLogoImgAnimate {
    0% { -ms-transform: translate(0,100%); opacity: 0; }
    100% { -ms-transform: translate(0,0); opacity: 1; }
}

@keyframes HomeLogoImgAnimate {
    0% { transform: translate(0,100%); opacity: 0; }
    100% { transform: translate(0,0); opacity: 1; }
}

/*人身*/
.PersonalWrap { position: absolute; width: 27%; top: 15%; left: 54%; }

@-webkit-keyframes PersonalWrapAnimate {
    0% { -webkit-transform: translate(0,70%); opacity: 0; }
    100% { -webkit-transform: translate(0,0); opacity: 1; }
}

@-o-keyframes PersonalWrapAnimate {
    0% { -o-transform: translate(0,70%); opacity: 0; }
    100% { -o-transform: translate(0,0); opacity: 1; }
}

@-moz-keyframes PersonalWrapAnimate {
    0% { -moz-transform: translate(0,70%); opacity: 0; }
    100% { -moz-transform: translate(0,0); opacity: 1; }
}

@-ms-keyframes PersonalWrapAnimate {
    0% { -ms-transform: translate(0,70%); opacity: 0; }
    100% { -ms-transform: translate(0,0); opacity: 1; }
}

@keyframes PersonalWrapAnimate {
    0% { transform: translate(0,70%); opacity: 0; }
    100% { transform: translate(0,0); opacity: 1; }
}

.PersonalAnimate { width: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.PersonalPic { position: absolute; width: 100%; top: 0; left: 0; -webkit-animation: PersonalWrapAnimate 900ms 1750ms ease 1 both; -o-animation: PersonalWrapAnimate 900ms 1750ms ease 1 both; -moz-animation: PersonalWrapAnimate 900ms 1750ms ease 1 both; -ms-animation: PersonalWrapAnimate 900ms 1750ms ease 1 both; animation: PersonalWrapAnimate 900ms 1750ms ease 1 both; }

.PersonalLine { width: 100%; position: absolute; left: 0; top: 2%; -webkit-animation: PersonalLineAnimate 700ms 1400ms ease 1 both; -o-animation: PersonalLineAnimate 700ms 1400ms ease 1 both; -moz-animation: PersonalLineAnimate 700ms 1400ms ease 1 both; -ms-animation: PersonalLineAnimate 700ms 1400ms ease 1 both; animation: PersonalLineAnimate 700ms 1400ms ease 1 both; }

@-webkit-keyframes PersonalLineAnimate {
    0% { -webkit-transform: translate(-74%,0); opacity: 0; }
    100% { -webkit-transform: translate(0%,0); opacity: 1; }
}

@-o-keyframes PersonalLineAnimate {
    0% { -o-transform: translate(-74%,0); opacity: 0; }
    100% { -o-transform: translate(0%,0); opacity: 1; }
}

@-moz-keyframes PersonalLineAnimate {
    0% { -moz-transform: translate(-74%,0); opacity: 0; }
    100% { -moz-transform: translate(0%,0); opacity: 1; }
}

@-ms-keyframes PersonalLineAnimate {
    0% { -ms-transform: translate(-74%,0); opacity: 0; }
    100% { -ms-transform: translate(0%,0); opacity: 1; }
}

@keyframes PersonalLineAnimate {
    0% { transform: translate(-74%,0); opacity: 0; }
    100% { transform: translate(0%,0); opacity: 1; }
}

/*齿轮*/
.Gear { position: absolute; }
.Gear0 { top: -50%; left: 44%; width: 3%; -webkit-animation: PersonalWrapAnimate 700ms 2550ms ease 1 both; -o-animation: PersonalWrapAnimate 700ms 2550ms ease 1 both; -moz-animation: PersonalWrapAnimate 700ms 2550ms ease 1 both; -ms-animation: PersonalWrapAnimate 700ms 2550ms ease 1 both; animation: PersonalWrapAnimate 700ms 2550ms ease 1 both; }
    .Gear0 img { -webkit-animation: Infinite-360Rotate 1500ms 2200ms infinite linear both; -o-animation: Infinite-360Rotate 1500ms 2200ms infinite linear both; -moz-animation: Infinite-360Rotate 1500ms 2200ms infinite linear both; -ms-animation: Infinite-360Rotate 1500ms 2200ms infinite linear both; animation: Infinite-360Rotate 1500ms 2200ms infinite linear both; }

.Gear1 { top: -45%; left: 37%; width: 11%; -webkit-animation: PersonalWrapAnimate 700ms 2550ms ease 1 both; -o-animation: PersonalWrapAnimate 700ms 2550ms ease 1 both; -moz-animation: PersonalWrapAnimate 700ms 2550ms ease 1 both; -ms-animation: PersonalWrapAnimate 700ms 2550ms ease 1 both; animation: PersonalWrapAnimate 700ms 2550ms ease 1 both; }
    .Gear1 img { -webkit-animation: Infinite360Rotate 3500ms 2200ms infinite linear both; -o-animation: Infinite360Rotate 3500ms 2200ms infinite linear both; -moz-animation: Infinite360Rotate 3500ms 2200ms infinite linear both; -ms-animation: Infinite360Rotate 3500ms 2200ms infinite linear both; animation: Infinite360Rotate 3500ms 2200ms infinite linear both; }

.Gear2 { top: -21%; left: 31%; width: 18%; -webkit-animation: PersonalWrapAnimate 700ms 2300ms ease 1 both; -o-animation: PersonalWrapAnimate 700ms 2300ms ease 1 both; -moz-animation: PersonalWrapAnimate 700ms 2300ms ease 1 both; -ms-animation: PersonalWrapAnimate 700ms 2300ms ease 1 both; animation: PersonalWrapAnimate 700ms 2300ms ease 1 both; }
    .Gear2 img { -webkit-animation: Infinite-360Rotate 5500ms 2200ms infinite linear both; -o-animation: Infinite-360Rotate 5500ms 2200ms infinite linear both; -moz-animation: Infinite-360Rotate 5500ms 2200ms infinite linear both; -ms-animation: Infinite-360Rotate 5500ms 2200ms infinite linear both; animation: Infinite-360Rotate 5500ms 2200ms infinite linear both; }

.Gear3 { top: -14%; left: 48%; width: 10%; -webkit-animation: PersonalWrapAnimate 700ms 2150ms ease 1 both; -o-animation: PersonalWrapAnimate 700ms 2150ms ease 1 both; -moz-animation: PersonalWrapAnimate 700ms 2150ms ease 1 both; -ms-animation: PersonalWrapAnimate 700ms 2150ms ease 1 both; animation: PersonalWrapAnimate 700ms 2150ms ease 1 both; }
    .Gear3 img { -webkit-animation: Infinite360Rotate 2500ms 2200ms infinite linear both; -o-animation: Infinite360Rotate 2500ms 2200ms infinite linear both; -moz-animation: Infinite360Rotate 2500ms 2200ms infinite linear both; -ms-animation: Infinite360Rotate 2500ms 2200ms infinite linear both; animation: Infinite360Rotate 2500ms 2200ms infinite linear both; }

.Gear4 { top: -26%; left: 46%; width: 7%; -webkit-animation: PersonalWrapAnimate 700ms 2400ms ease 1 both; -o-animation: PersonalWrapAnimate 700ms 2400ms ease 1 both; -moz-animation: PersonalWrapAnimate 700ms 2400ms ease 1 both; -ms-animation: PersonalWrapAnimate 700ms 2400ms ease 1 both; animation: PersonalWrapAnimate 700ms 2400ms ease 1 both; }
    .Gear4 img { -webkit-animation: Infinite-360Rotate 2500ms 2200ms infinite linear both; -o-animation: Infinite-360Rotate 2500ms 2200ms infinite linear both; -moz-animation: Infinite-360Rotate 2500ms 2200ms infinite linear both; -ms-animation: Infinite-360Rotate 2500ms 2200ms infinite linear both; animation: Infinite-360Rotate 2500ms 2200ms infinite linear both; }


/*360逆转*/
/*旋转*/
@-webkit-keyframes Infinite-360Rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-360deg); }
}

@-moz-keyframes Infinite-360Rotate {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(-360deg); }
}

@-o-keyframes Infinite-360Rotate {
    0% { -o-transform: rotate(0deg); }
    100% { -o-transform: rotate(-360deg); }
}

@-ms-keyframes Infinite-360Rotate {
    0% { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(-360deg); }
}

@keyframes Infinite-360Rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}


/*首页右侧文案*/
.HomeRightText { position: absolute; width: 60%; right: -17%; top: 52%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.HomeRightEdt { width: 100%; color: #fff; font-size: 22px; position: absolute; top: 0; left: 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

/*线*/
.HomeLine { position: absolute; width: 35%; left: 6%; top: 45%; pointer-events: none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

.HomeLine1 { width: 100%; position: absolute; left: 0; top: 0; }
.HomeLine2 { position: absolute; width: 186%; top: -113%; left: 3.2%; }
    .HomeLine2 img { width: 100%; position: absolute; top: 0; left: 0; }

.HomeLine3Crude { -webkit-transform: translate(20%,-100%); -o-transform: translate(20%,-100%); -moz-transform: translate(20%,-100%); -ms-transform: translate(20%,-100%); transform: translate(20%,-100%); -webkit-animation: HomeLine3CrudeAnimate 800ms 800ms ease 1 both; -o-animation: HomeLine3CrudeAnimate 800ms 800ms ease 1 both; -moz-animation: HomeLine3CrudeAnimate 800ms 800ms ease 1 both; -ms-animation: HomeLine3CrudeAnimate 800ms 800ms ease 1 both; animation: HomeLine3CrudeAnimate 800ms 800ms ease 1 both; }
.HomeLine3Fine { -webkit-transform: translate(-20%,100%); -o-transform: translate(-20%,100%); -moz-transform: translate(-20%,100%); -ms-transform: translate(-20%,100%); transform: translate(-20%,100%); -webkit-animation: HomeLine3FineAnimate 800ms 800ms ease 1 both; -o-animation: HomeLine3FineAnimate 800ms 800ms ease 1 both; -moz-animation: HomeLine3FineAnimate 800ms 800ms ease 1 both; -ms-animation: HomeLine3FineAnimate 800ms 800ms ease 1 both; animation: HomeLine3FineAnimate 800ms 800ms ease 1 both; }

@-webkit-keyframes HomeLine3CrudeAnimate {
    0% { -webkit-transform: translate(110%,-100%); }
    100% { -webkit-transform: translate(0%,0%); }
}

@-o-keyframes HomeLine3CrudeAnimate {
    0% { -o-transform: translate(110%,-100%); }
    100% { -o-transform: translate(0%,0%); }
}

@-moz-keyframes HomeLine3CrudeAnimate {
    0% { -moz-transform: translate(110%,-100%); }
    100% { -moz-transform: translate(0%,0%); }
}

@-ms-keyframes HomeLine3CrudeAnimate {
    0% { -ms-transform: translate(110%,-100%); }
    100% { -ms-transform: translate(0%,0%); }
}

@keyframes HomeLine3CrudeAnimate {
    0% { transform: translate(110%,-100%); }
    100% { transform: translate(0%,0%); }
}

@-webkit-keyframes HomeLine3FineAnimate {
    0% { -webkit-transform: translate(-100%,100%); }
    100% { -webkit-transform: translate(0%,0%); }
}

@-o-keyframes HomeLine3FineAnimate {
    0% { -o-transform: translate(-100%,100%); }
    100% { -o-transform: translate(0%,0%); }
}

@-moz-keyframes HomeLine3FineAnimate {
    0% { -moz-transform: translate(-100%,100%); }
    100% { -moz-transform: translate(0%,0%); }
}

@-ms-keyframes HomeLine3FineAnimate {
    0% { -ms-transform: translate(-100%,100%); }
    100% { -ms-transform: translate(0%,0%); }
}

@keyframes HomeLine3FineAnimate {
    0% { transform: translate(-100%,100%); }
    100% { transform: translate(0%,0%); }
}


/*鼠标*/
.HomeMouse { position: absolute; width: 2%; left: 49%; bottom: 5%; }
    .HomeMouse img { width: 100%; }
.MousePoint { position: absolute; top: 0; left: 0; -webkit-animation: FadeIn 800ms 200ms infinite linear both; -moz-animation: FadeIn 800ms 200ms infinite linear both; -ms-animation: FadeIn 800ms 200ms infinite linear both; -o-animation: FadeIn 800ms 200ms infinite linear both; animation: FadeIn 800ms 200ms infinite linear both; /*-webkit-animation:MousePointAnimate 800ms 200ms ease infinite both;
            -o-animation:MousePointAnimate 800ms 200ms ease infinite both;
            -moz-animation:MousePointAnimate 800ms 200ms ease infinite both;
            -ms-animation:MousePointAnimate 800ms 200ms ease infinite both;
            animation:MousePointAnimate 800ms 200ms ease infinite both;*/ }

@-webkit-keyframes MousePointAnimate {
    0% { -webkit-transform: scale(1); opacity: 1; filter: alpha(opacity=100); }
    50% { -webkit-transform: scale(0.9); opacity: 0.7; filter: alpha(opacity=70); }
    100% { -webkit-transform: scale(1); opacity: 1; filter: alpha(opacity=100); }
}

@-o-keyframes MousePointAnimate {
    0% { -o-transform: scale(1); opacity: 1; filter: alpha(opacity=100); }
    50% { -o-transform: scale(0.9); opacity: 0.7; filter: alpha(opacity=70); }
    100% { -o-transform: scale(1); opacity: 1; filter: alpha(opacity=100); }
}

@-moz-keyframes MousePointAnimate {
    0% { -moz-transform: scale(1); opacity: 1; filter: alpha(opacity=100); }
    50% { -moz-transform: scale(0.9); opacity: 0.7; filter: alpha(opacity=70); }
    100% { -moz-transform: scale(1); opacity: 1; filter: alpha(opacity=100); }
}

@-ms-keyframes MousePointAnimate {
    0% { -ms-transform: scale(1); opacity: 1; filter: alpha(opacity=100); }
    50% { -ms-transform: scale(0.9); opacity: 0.7; filter: alpha(opacity=70); }
    100% { -ms-transform: scale(1); opacity: 1; filter: alpha(opacity=100); }
}

@keyframes MousePointAnimate {
    0% { transform: scale(1); opacity: 1; filter: alpha(opacity=100); }
    50% { transform: scale(0.9); opacity: 0.7; filter: alpha(opacity=70); }
    100% { transform: scale(1); opacity: 1; filter: alpha(opacity=100); }
}

/*首页背景动画*/
.cmn-HomeCanvasAnimate { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }









/******************关于我们********************/
.cmn-About { }
.cmn-AboutCon { width: 100%; background: url(../images/About/AboutBg.jpg) repeat; background-size: 100% 100%; position: absolute; bottom: 0; text-align: center; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

.cmn-TechnologyModules { display: inline-block; *display: inline; zoom: 1; float: none; margin: auto -1%; width: 33%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.cmn-AboutCms, .cmn-AboutCms2, .cmn-AboutH5 { width: 90%; position: relative; cursor: pointer; margin: auto; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
    .cmn-AboutCms img, .cmn-AboutCms2 img, .cmn-AboutH5 img { width: 100%; }

.cmn-AboutCms { }
.CmsMain { width: 100%; position: absolute; top: 0; left: 0; }
/*石头*/
.pic1_St { width: 50%; position: absolute; top: 54%; left: 0; }

/*三角*/
.cmn-Triangle { width: 44%; position: absolute; top: 29%; left: 33%; }
    .cmn-Triangle > div { width: 100%; position: absolute; top: 0; left: 0; }
        .cmn-Triangle > div.cmn-Triangle1 { left: 2%; opacity: 0.8; filter: alpha(opacity=80); }
.cmn-Triangle1 img { position: absolute; top: 0; left: 0; -webkit-transform: translate(-30%,0); -o-transform: translate(-30%,0); -moz-transform: translate(-30%,0); -ms-transform: translate(-30%,0); transform: translate(-30%,0); }

.cmn-Triangle1 .cmn-Triangle1Pic1, .cmn-Triangle3Pic1 { opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }
.cmn-Triangle1 .cmn-Triangle1Pic2, .cmn-Triangle3Pic2 { opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: all 800ms ease; -moz-transition: all 800ms ease; -ms-transition: all 800ms ease; -o-transition: all 800ms ease; transition: all 800ms ease; }
.cmn-Triangle1 .cmn-Triangle1Pic3, .cmn-Triangle3Pic3 { opacity: 0.4; filter: alpha(opacity=40); -webkit-transition: all 1100ms ease; -moz-transition: all 1100ms ease; -ms-transition: all 1100ms ease; -o-transition: all 1100ms ease; transition: all 1100ms ease; }
.cmn-Triangle1 .cmn-Triangle1Pic4, .cmn-Triangle3Pic4 { opacity: 0.3; filter: alpha(opacity=30); -webkit-transition: all 1400ms ease; -moz-transition: all 1400ms ease; -ms-transition: all 1400ms ease; -o-transition: all 1400ms ease; transition: all 1400ms ease; }
.cmn-Triangle1 .cmn-Triangle1Pic5, .cmn-Triangle3Pic5 { opacity: 0.2; filter: alpha(opacity=20); -webkit-transition: all 1700ms ease; -moz-transition: all 1700ms ease; -ms-transition: all 1700ms ease; -o-transition: all 1700ms ease; transition: all 1700ms ease; }



.cmn-Triangle > div.cmn-Triangle2 { display: none; }


.cmn-Triangle > div.cmn-Triangle3 { left: 0%; opacity: 0.8; filter: alpha(opacity=80); }
.cmn-Triangle3 img { position: absolute; top: 0; left: 0; -webkit-transform: translate(20%,0); -o-transform: translate(20%,0); -moz-transform: translate(20%,0); -ms-transform: translate(20%,0); transform: translate(20%,0); }

.cmn-TechnologyModules1:hover .cmn-Triangle3 img, .cmn-TechnologyModules1:hover .cmn-Triangle1 img { -webkit-transform: translate(0%,0); -o-transform: translate(0%,0); -moz-transform: translate(0%,0); -ms-transform: translate(0%,0); transform: translate(0%,0); }

/*文案*/
.pic1_Text { position: absolute; top: 60%; left: 42%; width: 24%; }



.cmn-AboutCms2 { }
.cmn-AboutCms2Main { width: 100%; position: absolute; top: 0; left: 0; }
/*手*/
.cmn-Hand { position: absolute; top: 0; left: -5%; width: 100%; -webkit-transform: scale(0.9); -o-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }

.HandRound { position: absolute; width: 20%; }
    .HandRound img { position: absolute; top: 0; left: 0; opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(0); -o-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }
.HandRound1 { top: 2%; left: 27%; }
.HandRound2 { top: 2%; left: 45%; }
.HandRound3 { top: 9%; left: 63%; }
.HandRound4 { top: 17%; left: 75%; }


@-webkit-keyframes HandRoundImgAnimate {
    0% { -webkit-transform: scale(0); opacity: 1; filter: alpha(opacity=100); }
    100% { -webkit-transform: scale(1.5); opacity: 0; filter: alpha(opacity=0); }
}

@-o-keyframes HandRoundImgAnimate {
    0% { -o-transform: scale(0); opacity: 1; filter: alpha(opacity=100); }
    100% { -o-transform: scale(1.5); opacity: 0; filter: alpha(opacity=0); }
}

@-moz-keyframes HandRoundImgAnimate {
    0% { -moz-transform: scale(0); opacity: 1; filter: alpha(opacity=100); }
    100% { -moz-transform: scale(1.5); opacity: 0; filter: alpha(opacity=0); }
}

@-ms-keyframes HandRoundImgAnimate {
    0% { -ms-transform: scale(0); opacity: 1; filter: alpha(opacity=100); }
    100% { -ms-transform: scale(1.5); opacity: 0; filter: alpha(opacity=0); }
}

@keyframes HandRoundImgAnimate {
    0% { transform: scale(0); opacity: 1; filter: alpha(opacity=100); }
    100% { transform: scale(1.5); opacity: 0; filter: alpha(opacity=0); }
}

.pic2_Round { width: 30%; position: absolute; top: 30%; left: 33%; }
    .pic2_Round > div { position: absolute; width: 100%; top: 0; }
.pic2_LeftRound { left: -36%; }
.pic2_RightRound { right: -36%; }
/*文案*/
.pic2_Text { position: absolute; top: 61%; left: 37%; width: 23%; }


.cmn-AboutCms2:hover .cmn-Hand { -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

.cmn-AboutCms2:hover .HandRound1 .HandRoundImg1 { -webkit-animation: HandRoundImgAnimate 1800ms 200ms linear infinite both; -o-animation: HandRoundImgAnimate 1800ms 200ms linear infinite both; -moz-animation: HandRoundImgAnimate 1800ms 200ms linear infinite both; -ms-animation: HandRoundImgAnimate 1800ms 200ms linear infinite both; animation: HandRoundImgAnimate 1800ms 200ms linear infinite both; }

.cmn-AboutCms2:hover .HandRound2 .HandRoundImg1 { -webkit-animation: HandRoundImgAnimate 1800ms 500ms linear infinite both; -o-animation: HandRoundImgAnimate 1800ms 500ms linear infinite both; -moz-animation: HandRoundImgAnimate 1800ms 500ms linear infinite both; -ms-animation: HandRoundImgAnimate 1800ms 500ms linear infinite both; animation: HandRoundImgAnimate 1800ms 500ms linear infinite both; }

.cmn-AboutCms2:hover .HandRound3 .HandRoundImg1 { -webkit-animation: HandRoundImgAnimate 1800ms 800ms linear infinite both; -o-animation: HandRoundImgAnimate 1800ms 800ms linear infinite both; -moz-animation: HandRoundImgAnimate 1800ms 800ms linear infinite both; -ms-animation: HandRoundImgAnimate 1800ms 800ms linear infinite both; animation: HandRoundImgAnimate 1800ms 800ms linear infinite both; }

.cmn-AboutCms2:hover .HandRound4 .HandRoundImg1 { -webkit-animation: HandRoundImgAnimate 1800ms 1100ms linear infinite both; -o-animation: HandRoundImgAnimate 1800ms 1100ms linear infinite both; -moz-animation: HandRoundImgAnimate 1800ms 1100ms linear infinite both; -ms-animation: HandRoundImgAnimate 1800ms 1100ms linear infinite both; animation: HandRoundImgAnimate 1800ms 1100ms linear infinite both; }

.cmn-AboutH5 { }
.cmn-AboutH5Main { width: 100%; position: absolute; top: 0; left: 0; }
/*石头*/
.pic3_St { position: absolute; width: 22%; top: 68%; left: 13%; }

/*四角梯*/
.cmn-FourCornersTrapezoid { position: absolute; top: 30%; left: 20%; width: 42%; }
    .cmn-FourCornersTrapezoid > div { position: absolute; width: 100%; top: 0; }
.cmn-FourCornersTrapezoid1 { }

.cmn-FourCornersTrapezoid2 { -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translate(0,18%); -o-transform: translate(0,18%); -moz-transform: translate(0,18%); -ms-transform: translate(0,18%); transform: translate(0,18%); }

.cmn-FourCornersTrapezoid3 { -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translate(0,36%); -o-transform: translate(0,36%); -ms-transform: translate(0,36%); -webkit-transform: translate(0,36%); transform: translate(0,36%); }

.cmn-AboutH5:hover .cmn-FourCornersTrapezoid2, .cmn-AboutH5:hover .cmn-FourCornersTrapezoid3 { -webkit-transform: translate(0,0%); -o-transform: translate(0,0%); -moz-transform: translate(0,0%); -ms-transform: translate(0,0%); transform: translate(0,0%); }


/*文案*/
.pic3_Text { position: absolute; top: 61%; left: 31%; width: 23%; }





.cmn-AboutDesc { position: absolute; bottom: 100%; cursor: default; width: 100%; left: 4%; padding: 2%; }
    .cmn-AboutDesc h1 { text-align: left; line-height: 65%; font-size: 25px; font-weight: bold; }
        .cmn-AboutDesc h1 a { cursor: default; color: #000; border-bottom: 2px solid #ce0346; padding-bottom: 2px; text-decoration: none; }

    .cmn-AboutDesc h3 { text-align: left; font-weight: bold; line-height: 120%; font-size: 22px; font-weight: bold; }
    .cmn-AboutDesc p { text-align: left; font-size: 15px; }




/******************案例展示********************/
.cmn-CasesShow { height: auto; background-size: cover; }
/*background:url(../images/CasesShow/Bg.gif) no-repeat;*/

.cmn-CasesShowCon { width: 90%; margin: auto; margin-top: 3%; }
/*案例展示*/
.cmn-CasesShowBrief { position: relative; }

/*案例展示左侧*/
.cmn-CasesShowBriefLeft { /*color:#fff;*/ }
    .cmn-CasesShowBriefLeft h1 { text-align: left; line-height: 65%; font-size: 25px; font-weight: bold; }
        .cmn-CasesShowBriefLeft h1 a { cursor: default; color: #000; border-bottom: 2px solid #ce0346; padding-bottom: 2px; text-decoration: none; }

    .cmn-CasesShowBriefLeft h3 { text-align: left; font-weight: bold; line-height: 120%; font-size: 30px; font-weight: bold; }
    .cmn-CasesShowBriefLeft p { text-align: left; font-size: 15px; }


/*案例展示右侧*/
.cmn-CasesShowBriefRight { list-style: none; margin: 0 auto; padding: 5px; overflow: hidden; text-align: right; position: absolute; bottom: 0; right: 0; }
.cmn-CasesShowBriefRightList { width: 19%; font-size: 15px; line-height: 54px; height: 56px; display: inline-block; *display: inline; zoom: 1; margin-right: 1%; }
    /*如果是4个按钮宽度值：16*/
    .cmn-CasesShowBriefRightList a { width: 100%; height: 100%; text-decoration: none; display: block; position: relative; text-align: center; }
.cmn-CasesHover { -webkit-perspective: 200px; -moz-perspective: 200px; -ms-perspective: 200px; -o-perspective: 200px; perspective: 200px; -webkit-transition: all .07s linear; -moz-transition: all .07s linear; -ms-transition: all .07s linear; -o-transition: all .07s linear; transition: all .7s linear; position: relative; }
    .cmn-CasesHover:not(.active):hover { cursor: pointer; }

        .cmn-CasesHover:not(.active):hover .cmn-CasesBox { -wekbit-transform: translateZ(-25px) rotateX(90deg); -moz-transform: translateZ(-25px) rotateX(90deg); -o-transform: translateZ(-25px) rotateX(90deg); -ms-transform: translateZ(-25px) rotateX(90deg); transform: translateZ(-25px) rotateX(90deg); }

body .cmn-CasesShowBriefRightIE .cmn-CasesHover { -webkit-transition: initial; -moz-transition: initial; -ms-transition: initial; -o-transition: initial; transition: initial; }

    body .cmn-CasesShowBriefRightIE .cmn-CasesHover:not(.active):hover .cmn-CasesBox { -wekbit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; }


.cmn-CasesShowBriefRightList.Select .cmn-CasesBox { -wekbit-transform: translateZ(-25px) rotateX(90deg); -moz-transform: translateZ(-25px) rotateX(90deg); -o-transform: translateZ(-25px) rotateX(90deg); -ms-transform: translateZ(-25px) rotateX(90deg); transform: translateZ(-25px) rotateX(90deg); }

.cmn-CasesHover:hover .cmn-CasesBox { background: #ce0346; color: #fff; }

.cmn-CasesBox { -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transform: translateZ(-25px); -moz-transform: translateZ(-25px); -ms-transform: translateZ(-25px); -o-transform: translateZ(-25px); transform: translateZ(-25px); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; -o-pointer-events: none; pointer-events: none; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.front, .back { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; -o-pointer-events: none; pointer-events: none; border: 2px solid #8d8d8d; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
.front { -webkit-transform: rotateX(0deg) translateZ(28px); -moz-transform: rotateX(0deg) translateZ(28px); -ms-transform: rotateX(0deg) translateZ(28px); -o-transform: rotateX(0deg) translateZ(28px); transform: rotateX(0deg) translateZ(28px); color: #8d8d8d; background: #fff; }
.back { -webkit-transform: rotateX(-89deg) translateZ(28px); -moz-transform: rotateX(-89deg) translateZ(28px); -ms-transform: rotateX(-89deg) translateZ(28px); -o-transform: rotateX(-89deg) translateZ(28px); transform: rotateX(-89deg) translateZ(28px); color: #fff; background: #ce0346; border: 2px solid #ce0346; }

.cmn-InfoSubmitBtn .front, .cmn-InfoSubmitBtn .back { border: none; }




/********案例列表***********/
.cmn-CasesIn { margin-top: 1%; }
.cmn-CasesList { overflow: hidden; opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; /*-webkit-transform: scale(1) rotateY(0deg) rotateX(0deg) translateZ(0px) translateY(0px) translateX(0px);
    -ms-transform: scale(1) rotateY(0deg) rotateX(0deg) translateZ(0px) translateY(0px) translateX(0px);
    -o-transform: scale(1) rotateY(0deg) rotateX(0deg) translateZ(0px) translateY(0px) translateX(0px);
    -moz-transform: scale(1) rotateY(0deg) rotateX(0deg) translateZ(0px) translateY(0px) translateX(0px);
    transform: scale(1) rotateY(0deg) rotateX(0deg) translateZ(0px) translateY(0px) translateX(0px);*/ /*-webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;*/ }

@media screen and (min-width:992px) {
    /*.cmn-CasesList{width:20%;}*/

}






.cmn-CasesList:hover .CasesListUpBox { bottom: 0%; }
.cmn-CasesList:hover .CasesListPic img { -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
.cmn-CasesList:hover h1 { margin-top: 33%; }
.cmn-CasesList:hover .CasesListUpBox img { top: -47%; }

.cmn-CasesList a { position: absolute; top: 0; left: 0; width: 101%; height: 100%; }
.CasesListPicBlackMask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: all .4s ease; -o-transition: all .4s ease; -ms-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; }

.cmn-CasesList:hover .CasesListPicBlackMask { opacity: 0.3; filter: alpha(opacity=30); }


.cmn-CasesList a:before, .cmn-CasesList a:after { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; position: absolute; content: ''; opacity: 0; filter: alpha(opacity=0); z-index: 2; pointer-events: none; }
.cmn-CasesList a:before { top: 15%; right: 9%; bottom: 17%; left: 9%; border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0,1); -o-transform: scale(0,1); -moz-transform: scale(0,1); -ms-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 0 0; -o-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; }

.cmn-CasesList a:after { top: 11%; right: 13%; bottom: 11%; left: 13%; border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1,0); -o-transform: scale(1,0); -moz-transform: scale(1,0); -ms-transform: scale(1,0); transform: scale(1,0); -webkit-transform-origin: 100% 0; -o-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; }

.cmn-CasesList:hover ::before, .cmn-CasesList:hover ::after { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }



.cmn-CasesListBox { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.cmn-CasesList h1 { width: 70%; text-align: center; margin: auto; font-size: 18px; /*font-family: "Century Gothic","Open Sans",Arial,sans-serif;*/ font-style: normal; color: #FFF; display: block; z-index: 3; word-break: break-all; margin-top: 40%; -webkit-transition: all .4s ease; -o-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; transition: all .4s ease; }

.cmn-CasesList h2 { width: 100%; color: #FFF; font-weight: 300; display: block; text-align: center; overflow: visible; font-size: 20px; word-break: break-all; z-index: 3; }

.cmn-CasesList img { width: 100%; -webkit-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

.CasesListPic { width: 100%; position: absolute; top: 0; left: 0; }


/*上拉*/
.CasesListUpBox { height: 39%; position: absolute; bottom: -34%; left: 0; width: 100%; -webkit-transition: all .4s ease; -o-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; transition: all .4s ease; }
    .CasesListUpBox img { width: 100%; position: absolute; top: 0; }
.CasesListUpBod { width: 100%; height: 100%; background: #b70034; /*background:#b70034 url(../images/CasesShow/CasesListUpBox.png) center center;background-size:100%;background-position:0px 100%;*/ }
.cmn-CasesList:nth-child(2n+1) .CasesListUpBod { background: #f60045; /*background:#f60045 url(../images/CasesShow/CasesListUpBox.png) center center;background-size:100%;background-position:0px 100%;*/ }

/*.CasesListUpBod img{display:none;}*/


body .cmn-CasesShowBriefRightIE .cmn-CasesHover { background: #fff; border: 2px solid #8d8d8d; color: #8d8d8d; outline: none; text-decoration: none; }
    body .cmn-CasesShowBriefRightIE .cmn-CasesHover:hover { background: #ce0346; border: 2px solid #ce0346; color: #fff; }
    body .cmn-CasesShowBriefRightIE .cmn-CasesHover.Select { background: #ce0346; border: 2px solid #ce0346; color: #fff; }

    body .cmn-CasesShowBriefRightIE .cmn-CasesHover, body .cmn-CasesShowBriefRightIE .cmn-CasesHover span { -webkit-animation: none; -o-animation: none; -moz-animation: none; -ms-animation: none; animation: none; -webkit-transform: none; -o-transform: none; -moz-transform: none; -ms-transform: none; transform: none; }
body .cmn-CasesShowBriefRightIE .cmn-CasesBox { display: none; }
body .cmn-CasesShowBriefRightIE .cmn-CasesHover:hover { -webkit-animation: none; -o-animation: none; -moz-animation: none; -ms-animation: none; animation: none; -webkit-transform: none; -o-transform: none; -moz-transform: none; -ms-transform: none; transform: none; }


/*翻页按钮*/
.CaseShowFlip { width: 100%; text-align: center; margin-top: 2%; }
    .CaseShowFlip > div { display: inline-block; *display: inline; zoom: 1; font-size: 23px; color: #000; vertical-align: middle; cursor: pointer; }
        /*.CaseShowFlip>div:hover{color:#b70034;}*/

        .CaseShowFlip > div > div { display: inline-block; *display: inline; zoom: 1; font-size: 25px; vertical-align: middle; cursor: pointer; /*border: 2px solid #8D8D8D;*/ padding: 1px 3px 1px 3px; margin: auto 5px; -webkit-transition: all .4s ease; -o-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; transition: all .4s ease; }
            .CaseShowFlip > div > div.Select { background: #8D8D8D; color: #fff; }
            .CaseShowFlip > div > div:hover { background: #8D8D8D; color: #fff; }
.CaseShowPagePre:hover, .CaseShowPageNext:hover { color: #8D8D8D; }
/*更多案例按钮*/
.cmn-CasesMoreBtn { text-align: center; width: 100%; margin: 1% auto 2% auto; }
    .cmn-CasesMoreBtn h2 { /*color:#fff;*/ font-size: 22px; display: inline-block; *display: inline; zoom: 1; margin: 0 10px 0 0; line-height: 36px; position: relative; vertical-align: middle; }

.cmn-CasesMoreHover { display: inline-block; *display: inline; zoom: 1; width: 120px; height: 56px; line-height: 56px; position: relative; vertical-align: middle; cursor: pointer; }
    .cmn-CasesMoreHover a { display: block; width: 100%; height: 100%; font-size: 20px; }

.cmn-CasesMoreBtn { }
.cmn-CasesMoreHover { height: 40px; line-height: 35px; }
    .cmn-CasesMoreHover .cmn-CasesBox { -webkit-transform: translateZ(-35px); -moz-transform: translateZ(-35px); -ms-transform: translateZ(-35px); -o-transform: translateZ(-35px); transform: translateZ(-35px); }
        .cmn-CasesMoreHover .cmn-CasesBox .front { -webkit-transform: rotateX(0deg) translateZ(21px); -moz-transform: rotateX(0deg) translateZ(21px); -ms-transform: rotateX(0deg) translateZ(21px); -o-transform: rotateX(0deg) translateZ(21px); transform: rotateX(0deg) translateZ(21px); }
        .cmn-CasesMoreHover .cmn-CasesBox .back { -webkit-transform: rotateX(-89deg) translateZ(20px); -moz-transform: rotateX(-89deg) translateZ(20px); -ms-transform: rotateX(-89deg) translateZ(20px); -o-transform: rotateX(-89deg) translateZ(20px); transform: rotateX(-89deg) translateZ(20px); }

/************************客户*************************/
.cmn-Clients { background: #d6d6d6; }

.cmn-ClientsContent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.cmn-ClientsContentMask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: table; text-align: center; vertical-align: middle; opacity: 0.3; filter: alpha(opacity=30); /*background-image: url(../images/Clients/Bg.png);*/ }
    .cmn-ClientsContentMask img { width: 83%; }
.cmn-ClientsContentMaskVg { display: table-cell; vertical-align: middle; /*-webkit-animation:FromSmallToLarge 2s .5s ease both;
    -moz-animation:FromSmallToLarge 2s .5s ease both;
    -o-animation:FromSmallToLarge 2s .5s ease both;
    -ms-animation:FromSmallToLarge 2s .5s ease both;
    animation:FromSmallToLarge 2s .5s ease both;*/ }


.cmn-ClientsInner { width: 100%; height: 100%; position: relative; margin: auto; }
    .cmn-ClientsInner .cmn-ClientsBox { width: 100%; height: 100%; text-align: center; }
.cmn-ClientsBox > div { display: inline-block; *display: inline; zoom: 1; vertical-align: bottom; position: relative; text-align: left; margin-top: 16%; float: none; vertical-align: top; height: 354px; word-break: break-all; }
.cmn-ClientsLeft { width: 512px; }
    .cmn-ClientsLeft h1 { text-align: left; line-height: 131%; font-size: 25px; font-weight: bold; }
        .cmn-ClientsLeft h1 a { cursor: default; color: #000; border-bottom: 2px solid #ce0346; padding-bottom: 2px; text-decoration: none; }
    .cmn-ClientsLeft h3 { text-align: left; font-weight: bold; line-height: 120%; font-size: 30px; font-weight: bold; }
    .cmn-ClientsLeft h2 { text-align: left; font-weight: bold; line-height: 120%; font-size: 35px; font-weight: bold; }
    .cmn-ClientsLeft p { text-align: left; font-size: 15px; }


.cmn-ClientsRight { width: 695px; }
.cmn-ClientsRightBox { width: 100%; height: 100%; overflow: hidden; }
.cmn-ClientsRightList { margin-bottom: 2%; float: none; display: inline-block; *display: inline; zoom: 1; width: 24%; /*-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;*/ }
    .cmn-ClientsRightList img { width: 100%; }


/*客户轮播圆点*/
.ClientsScrollRound { position: absolute; right: 0%; top: 35%; }
    .ClientsScrollRound > div { width: 7px; height: 7px; text-indent: -9999px; border-radius: 50%; margin-bottom: 8px; cursor: pointer; /*background:#000;*/ -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; }
        .ClientsScrollRound > div.Select { background: #ce003a; }

.navigation .pagination-dot { position: absolute; border-radius: 50%; width: 20px; height: 20px; background: #000; }

.navigation .pagination-current { position: absolute; border-radius: 50%; width: 20px; height: 20px; background: #cf0246; transform: scale(1.5,1.5); -webkit-transform: scale(1.5,1.5); -moz-transform: scale(1.5,1.5); -o-transform: scale(1.5,1.5); -ms-transform: scale(1.5,1.5); z-index: 1; }


/************************联系我们*************************/
.cmn-ContactUs { /*padding-top:12%;*/ background: #fff; }
/*overflow-y:auto;height:auto  !important;*/

.cmn-Communicate { position: relative; left: 0; width: 100%; text-align: center; margin-top: 4%; }
    .cmn-Communicate h1, .cmn-Communicate h4 { color: #5f5f5f; font-weight: bold; }
    .cmn-Communicate h1 { font-size: 35px; }
    .cmn-Communicate h4 { font-size: 25px; }

.cmn-ContactUsContent { padding: 2% 0% 0% 0%; margin-top: 5%; position: relative; top: 0; width: 100%; height: 100%; /*background:url(../images/ContactUs/Bg.jpg) no-repeat center;background-size:100% 100%;*/ }
.cmn-ContactUsContentBg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../images/ContactUs/Bg2.jpg) no-repeat center; background-size: cover; }
    .cmn-ContactUsContentBg img { width: 100%; height: 100%; }

.cmn-ContactUsContentIcon { position: absolute; width: 5%; top: -7%; left: 47%; }
    .cmn-ContactUsContentIcon img { width: 100%; }



.cmn-ContactUsContentTitle { width: 100%; text-align: center; font-size: 22px; margin: 2% auto; color: #fff; line-height: 120%; position: relative; }

/*留信息*/
.cmn-ContactUsInfoWrap { text-align: center; border-top: 1px solid #FF638E; position: relative; }

.cmn-ContactUsInfoLeft, .cmn-ContactUsInfoRight { display: inline-block; *display: inline; zoom: 1; vertical-align: top; text-align: left; padding-top: 1%; }

.cmn-ContactUsInfoTel { font-size: 40px; pointer-events: none; }
    .cmn-ContactUsInfoTel a { color: #fff; text-decoration: none; }
.cmn-ContactUsInfoWrite { font-size: 30px; font-weight: bold; line-height: 170%; margin-top: -1%; }
    .cmn-ContactUsInfoWrite a { color: #000; border-bottom: 4px solid #000; text-decoration: none; cursor: default; }
.cmn-ContactUsDesc { font-size: 19px; color: #fff; word-break: break-all; pointer-events: none; }
    .cmn-ContactUsDesc a { font-size: 19px; color: #fff; }
    .cmn-ContactUsDesc span { display: inline-block; *display: inline; zoom: 1; }
    .cmn-ContactUsDesc .span_1 { min-width: 80px; text-align: right; margin-right: 2%; }

/*左侧*/
.cmn-ContactUsInfoLeft { width: 35%; margin-right: 5%; border-right: 1px solid #FF638E; padding-right: 4.7%; text-align: right; pointer-events: none; }
/*.cmn-ContactUsInfoLeft .cmn-ContactUsInfoTel{line-height:58%;}*/

/*右侧*/
.cmn-ContactUsInfoRight { width: 30%; }
    .cmn-ContactUsInfoRight .cmn-ContactUsInfoTel { font-size: 34px; }

    .cmn-ContactUsInfoRight input { background: none; border: none; color: #fff; font-size: 15px; box-shadow: none; outline: none; border: none; }
        .cmn-ContactUsInfoRight input:focus { border: 0; box-shadow: none; }
        .cmn-ContactUsInfoRight input:active { border: 0; box-shadow: none; }

.ContactName { width: 80%; border-bottom: 2px solid #fff; margin-top: 4%; }

/*提交按钮*/
/*.cmn-InfoSubmitBtn{margin:40px auto auto auto;}*/
.cmn-InfoSubmitBtn { width: 130px; height: 56px; line-height: 54px; margin-left: 0; }
    .cmn-InfoSubmitBtn a { display: block; width: 100%; height: 102%; }
    .cmn-InfoSubmitBtn span { font-size: 24px; }


.cmn-ContactUsInfoWrap .cmn-CasesMoreBtn { margin: 12px auto 25px 0; }




/************底部按钮***************/
.cmn-Footer { font-size: 0; background: url(../images/Public/FooterBg.jpg) no-repeat; background-size: 100% 100%; padding: 20px 0px; text-align: center; /*margin-top:80px;*/ position: fixed; bottom: 0%; width: 100%; -webkit-transition: all .3s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; }

    .cmn-Footer.Hide { opacity: 0; filter: alpha(opacity=0); }

.cmn-Adress, .cmn-ContactBtn { display: inline-block; *display: inline; zoom: 1; }

.cmn-Adress { float: left; word-break: break-all; margin-left: 8%; }
    .cmn-Adress > div { display: inline-block; *display: inline; zoom: 1; vertical-align: middle; font-size: 14px; color: #fff; }

        .cmn-Adress > div.cmn-AdressDeta { width: 50%; font-size: 12px; text-align: left; margin-left: 10px; }
.cmn-AdressTitle { text-align: left; }
	.cmn-AdressTitle a { color: #fff; }


.cmn-ContactBtn { float: right; right: 0; top: 50%; -webkit-transform: translate(0,-50%); position: absolute; }
    .cmn-ContactBtn > div { display: inline-block; *display: inline; zoom: 1; vertical-align: middle; margin-right: 5px; cursor: pointer; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms; }

    .cmn-ContactBtn .Footeranim { position: absolute; }
    .cmn-ContactBtn img { width: 100%; }

.cmn-BusinessLicense { top: 50%; -webkit-transform: translate(0,-50%); position: absolute; }
    .cmn-BusinessLicense img { width: 54px; }
/*扩大淡出退场*/
@-webkit-keyframes MaxFadeOut {
    0% { opacity: 1; -webkit-transform: scale(1); }
    60% { -webkit-transform: scale(1.3); opacity: 0; }
}

@-moz-keyframes MaxFadeOut {
    0% { -moz-transform: scale(1); opacity: 1; }
    60% { -moz-transform: scale(1.3); opacity: 0; }
}

@-o-keyframes MaxFadeOut {
    0% { -o-transform: scale(1); opacity: 1; }
    60% { -o-transform: scale(1.3); opacity: 0; }
}

@-ms-keyframes MaxFadeOut {
    0% { -ms-transform: scale(1); opacity: 1; }
    60% { -ms-transform: scale(1.3); opacity: 0; }
}

@keyframes MaxFadeOut {
    0% { transform: scale(1); opacity: 1; }
    60% { transform: scale(1.3); opacity: 0; }
}
/*.cmn-ContactBtn>div:hover{
    -webkit-transform:scale(1.1);
    -o-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
}*/

.cmn-ContactBtn .Footeranim:hover { -webkit-animation: MaxFadeOut 1s .2s ease both; -moz-animation: MaxFadeOut 1s .2s ease both; -o-animation: MaxFadeOut 1s .2s ease both; -ms-animation: MaxFadeOut 1s .2s ease both; animation: MaxFadeOut 1s .2s ease both; }


/*********************展示**************************/
.CaseShowPagePopWrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; background: #fff; }
    .CaseShowPagePopWrap .HeadReturn { position: absolute; top: 18px; left: 18px; cursor: pointer; }
.CaseShowPagePopInner { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow-y: auto; }
/*案例展示*/
.CaseShowBannerMod { width: 100%; position: absolute; top: 0; left: 0; }
    .CaseShowBannerMod img { width: 100%; }

/*产品*/
.CaseShowBannerModProductPic { width: 100%; position: absolute; top: 0; left: 0; }
/*黑色遮罩*/
.BlackMask, .RedMask { width: 100%; position: absolute; top: 0; left: 0; }
.RedMask { background: #fa0d50; opacity: 0.6; filter: alpha(opacity=60); }
    .RedMask img { opacity: 0; filter: alpha(opacity=0); }
.BlackMask { }


.CaseShowBannerModPageCon { width: 800px; position: relative; margin: auto; text-align: center; left: 50%; top: 0; margin-left: -400px; overflow: hidden; word-break: break-all; }
.CaseShowBannerModPageTitle { width: 100%; position: relative; margin-top: 18%; color: #fff; font-size: 26px; }
    .CaseShowBannerModPageTitle span { padding: 4px 10px 7px 10px; background: #000; }
.CaseShowBannerModPageTitleArrow { position: absolute; bottom: -20px; left: 50%; margin-left: -23px; }
.CaseShowBannerModPageText { font-size: 25px; margin: auto; color: #fff; }

.CaseShowBannerModPageText1 { width: 100%; margin-top: 5%; line-height: 28px; font-size: 19px; }
    .CaseShowBannerModPageText1 span { padding: 4px 20px 7px 20px; background: #000; }

.CaseShowBannerModPageText2 { width: 356px; margin-top: 5%; display: none; }
    .CaseShowBannerModPageText2 span { background: #000; padding: 6px 15px 6px 15px; font-size: 20px; }

/**手机**/
.CaseShowVideoMod { width: 100%; position: relative; margin: auto; margin-top: 5%; overflow: hidden; }
    .CaseShowVideoMod .Bg2 { background: #fff; position: absolute; bottom: -51%; left: 0; width: 100%; height: 100%; }
    .CaseShowVideoMod .VideoShowCon { padding: 0; width: 100%; }
    .CaseShowVideoMod .Iphone { float: none; margin: auto; /*margin-top:-15%;*/ }

.CaseShowVideoModIphoneText { width: 60%; margin: auto; font-size: 19px; color: #4f4f4f; position: relative; margin: 50px auto; word-break: break-all; }


/******展示步骤******/
.ShowStep { position: relative; }
/*width:100%;*/

/*ShowStepHome*/
.ShowStepHome { width: 100%; height: 474px; border-top: 1px solid #D8D8D8; }
    .ShowStepHome .Bg { }
        .ShowStepHome .Bg img { height: 100%; }

body .RemoveCss3 { width: 100%; }

.ShowStep.RemoveCss3 .Panel { margin: auto; }
.ShowStep.RemoveCss3 .PanelPerspective { -webkit-animation: none; -o-animation: none; -moz-animation: none; -ms-animation: none; animation: none; -webkit-transform: none; -o-transform: none; -moz-transform: none; -ms-transform: none; transform: none; }
.ShowStep.RemoveCss3 .PanelRotate { -webkit-animation: none; -o-animation: none; -moz-animation: none; -ms-animation: none; animation: none; -webkit-transform: none; -o-transform: none; -moz-transform: none; -ms-transform: none; transform: none; }
.ShowStep.RemoveCss3 .StepBottom { width: 100%; }

/*故事板块*/
.StoryPlateTitle { position: relative; margin: auto; text-align: center; float: none; display: none; }
    .StoryPlateTitle img { width: 100%; }
/*手机*/
.StepHomeIphone { margin-top: 33px; margin-left: -3%; }
    .StepHomeIphone img { width: 100%; }

.StepHomeIphoneCover { position: absolute; width: 79.5%; left: 11%; top: 5.5%; }

/*手机描述*/
.StepHomeIphoneDesc { position: absolute; right: -5%; top: 13%; }
.StepHomeIphoneDescTitle { margin-bottom: 10px; font-size: 25px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: bold; color: #fff; border-left: 6px solid #C00036; padding-left: 5px; padding-top: 2px; padding-bottom: 1px; }
    .StepHomeIphoneDescTitle span { background: #c00036; padding: 5px; }

.StepHomeIphoneDescDeta { color: #4b4b4b; white-space: normal; }
    .StepHomeIphoneDescDeta p { font-size: 14px; line-height: 10px; }


/******展示步骤 1******/
.ShowStep1 { /*margin-top:257px;*/ }
.StepTop { float: none; margin: auto; text-align: center; }
    .StepTop:before, .Symbol { display: block; content: ""; width: 35px; background: #a6002f; height: 5px; margin: auto; -webkit-transform: rotate(24deg) skewX(20deg); -o-transform: rotate(24deg) skewX(20deg); -moz-transform: rotate(24deg) skewX(20deg); -ms-transform: rotate(24deg) skewX(20deg); transform: rotate(24deg) skewX(20deg); }
    .StepTop h3 { font-weight: bold; }
    .StepTop p { font-size: 20px; word-break: break-all; }

/*面板*/
body .StepBottom { float: none; margin: auto; margin-top: 30px; width: 80%; }
/*width:70%;*/

.Panel { width: 100%; margin-top: -32%; background: none; box-shadow: none; /*-webkit-transform:rotate(-28deg) skew(35deg,-7deg);
       -o-transform:rotate(-28deg) skew(35deg,-7deg);
       -moz-transform:rotate(-28deg) skew(35deg,-7deg);
       -ms-transform:rotate(-28deg) skew(35deg,-7deg);
       transform:rotate(-28deg) skew(35deg,-7deg);*/ }
    .Panel img { width: 100%; }

.PanelPerspective { /*-webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;
    -webkit-perspective-origin: 50% 0%;
    -moz-perspective-origin: 50% 0%;
    perspective-origin: 50% 0%;
    perspective-origin: 26% -42%;*/ -webkit-transform: rotateX(36deg) rotateY(-41deg); -o-transform: rotateX(36deg) rotateY(-41deg); -moz-transform: rotateX(36deg) rotateY(-41deg); -ms-transform: rotateX(36deg) rotateY(-41deg); transform: rotateX(36deg) rotateY(-41deg); }

.PanelRotate { -webkit-transition: -webkit-transform 0.7s ease-in-out; -moz-transition: -moz-transform 0.7s ease-in-out; -o-transition: -moz-transform 0.7s ease-in-out; -ms-transition: -moz-transform 0.7s ease-in-out; transition: transform 0.7s ease-in-out; -webkit-transform: rotateY(-30deg) rotateX(90deg) translateZ(-15px) translateZ(-97px); -moz-transform: rotateY(-30deg) rotateX(90deg) translateZ(-15px) translateZ(-97px); -o-transform: rotateY(-30deg) rotateX(90deg) translateZ(-15px) translateZ(-97px); -ms-transform: rotateY(-30deg) rotateX(90deg) translateZ(-15px) translateZ(-97px); transform: rotateY(45deg) rotateX(44deg) translateZ(0px); }



.Brand { /*background:url(../images/MobileCasesShow/Brand.png) no-repeat;*/ padding: 20px; color: #fff; font-weight: bold; display: inline; position: absolute; top: 79px; right: -24px; -webkit-transform: rotate(0deg) skew(0deg,26deg); -o-transform: rotate(0deg) skew(0deg,26deg); -moz-transform: rotate(0deg) skew(0deg,26deg); -ms-transform: rotate(0deg) skew(0deg,26deg); transform: rotate(0deg) skew(0deg,26deg); background: -webkit-linear-gradient(top, #f80046, #cd003a); background: -o-linear-gradient(top, #f80046, #cd003a); background: -moz-linear-gradient(top, #f80046, #cd003a); }
    .Brand h4 { line-height: 10px; }
    .Brand h2 { line-height: 5px; }


/******展示步骤 2******/
.ShowStep2 { margin-top: 50px; }





/******展示步骤 3******/
.ShowStep3 { margin-top: 50px; }



/*********************手机展示**************************/
.MobileShowPagePopWrap { display:; }
    .MobileShowPagePopWrap .ShowStepHome { margin-bottom: 15px; padding: 20px 0%; overflow: hidden; }
    /*.MobileShowPageIphone{margin-bottom:5%;}*/

    .MobileShowPagePopWrap .ShowStep { float: none; display: inline-block; *display: inline; zoom: 1; display: none; }
        .MobileShowPagePopWrap .ShowStep.RemoveCss3 { display: block; }
        .MobileShowPagePopWrap .ShowStep.ShowStepHome { display: block; }

.MobileContainer { width: 80%; }

/*横屏视频*/
.MobileShowPagePopWrap .Iphone .NotPhoneHoriIImg { display: block; }
.MobileShowPagePopWrap .Iphone .PhoneHoriIImg { display: none; }

.PhoneHoriI .Iphone { width: 55%; }
    .PhoneHoriI .Iphone .NotPhoneHoriIImg { display: block; }
    .PhoneHoriI .Iphone .PhoneHoriIImg { display: none; }

.MobileShowPagePopWrap .PhoneHoriI .Iphone .NotPhoneHoriIImg { display: none; }
.MobileShowPagePopWrap .PhoneHoriI .Iphone .PhoneHoriIImg { display: block; }


.PhoneHoriI .Iphone .IphoneVideo { top: 6%; left: 13%; width: 74.5%; overflow: hidden; }
    .PhoneHoriI .Iphone .IphoneVideo .PhoneHoriIImg { }




/*********************桌面版展示**************************/
.DesktopShowPagePopWrap { display:; }
.DesktopCasesShowPageText1 { width: 100%; margin-top: 6%; }
    .DesktopCasesShowPageText1 span { color: #DEDEDE; }
.DesktopShowPagePopWrap .IphoneVideo { top: 5%; left: 5.3%; width: 89.5%; height: 68%; background: #000; }
.DesktopShowPagePopWrap .Iphone video { width: 100%; position: relative; top: 0; left: 0; height: 100%; }
.DesktopShowPagePopWrap .VideoPlayBtn { top: 32%; left: 47.5%; width: 9%; }
.DesktopShowPagePopWrap .ShowStepHome { height: auto; }
    .DesktopShowPagePopWrap .ShowStepHome .Bg { position: relative; }
        .DesktopShowPagePopWrap .ShowStepHome .Bg img { height: auto; }


/*******图文********/
.PhotoGallery { position: relative; z-index: 2; -webkit-transition: all 600ms; -moz-transition: all 600ms; -ms-transition: all 600ms; -o-transition: all 600ms; transition: all 600ms; }

.PhotoGalleryContainer { width: 70%; word-break: break-all; }

.PhotoGallerySymbol { margin: 35px auto; }
/*文章*/
.Article { font-size: 18px; color: #4b4b4b; padding-bottom: 26px; border-bottom: 2px solid #828282; -webkit-transition: all 600ms; -moz-transition: all 600ms; -ms-transition: all 600ms; -o-transition: all 600ms; transition: all 600ms; }

.PhotoGalleryMod { margin-top: 45px; position: relative; -webkit-transition: all 600ms; -moz-transition: all 600ms; -ms-transition: all 600ms; -o-transition: all 600ms; transition: all 600ms; }

.PhotoGalleryBg { }
    .PhotoGalleryBg img { width: 100%; }


.PhotoGalleryDesc { width: 30%; height: 100%; position: absolute; right: 7%; top: 0; overflow: hidden; display: none; -webkit-transition: all 600ms; -moz-transition: all 600ms; -ms-transition: all 600ms; -o-transition: all 600ms; transition: all 600ms; }
.PhotoGalleryDescMask { background: #c00036; opacity: 0.6; filter: alpha(opacity=60); width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.PhotoGalleryDescBox { width: 100%; height: 100%; display: table; padding: 5%; position: relative; overflow: hidden; }
.PhotoGalleryDescText { display: table-cell; font-size: 18px; color: #fff; vertical-align: middle; word-break: break-all; -webkit-transition: all 600ms; -moz-transition: all 600ms; -ms-transition: all 600ms; -o-transition: all 600ms; transition: all 600ms; }


/*图文2*/
.PhotoGalleryMod2 { }
    .PhotoGalleryMod2 .PhotoGalleryDescMask { background: #fff; opacity: 1; filter: alpha(opacity=100); }
    .PhotoGalleryMod2 .PhotoGalleryDescText { color: #000; }


/*图文3*/
.PhotoGalleryMod3 { }
    .PhotoGalleryMod3 .PhotoGalleryDesc { position: relative; left: 0; top: 0; width: 100%; height: auto; }
    .PhotoGalleryMod3 .PhotoGalleryDescBox { padding: 2%; }
    .PhotoGalleryMod3 .PhotoGalleryDescMask { background: #fff; opacity: 0; filter: alpha(opacity=0); }
    .PhotoGalleryMod3 .PhotoGalleryDescText { color: #fff; }



/*底部*/
.CaseShowPageFooterWrap { width: 100%; position: relative; margin-top: 0%; left: 0%; height: 43%; }
.FooterFixed.DesktopShowPagePopInner { padding-bottom: 10%; }
.FooterFixed .CaseShowPageFooterWrap { position: fixed; bottom: 0; z-index: 2; }

.CaseShowPageFooterInner { height: 100%; background: #920029; }
.CaseShowPageFooterTop { width: 100%; height: 53%; margin-top: -16%; background: #9e002d; position: relative; left: 0%; }
    .CaseShowPageFooterTop img { width: 100%; height: 100%; display:; }

.CaseShowPageFooterBottom { background: #920029; position: relative; text-align: center; border-top: 1px dashed #920029; padding-bottom: 5%; /*display:none;*/ }
    .CaseShowPageFooterBottom .OurStoryFooterText a { color: #fff; border-bottom: 2px solid #fff; }
    .CaseShowPageFooterBottom .OurStoryFooterBackText { width: 205px; height: 48px; font-size: 17px; margin: auto; cursor: pointer; border: 1px solid #e8b3c2; color: #fff; text-align: center; line-height: 48px; }





/************************************新闻页star************************************/

.InNewsPagePopWrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; background: #fff; display: block; }
.InNewsPagePopInner { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow-y: auto; }
.InNewsPage { width: 100%; height: 100%; position: relative; margin: auto; overflow: hidden; }
/*头部*/
.InNewsPageHead { width: 100%; position: absolute; top: 0; left: 0; line-height: 44px; background: #ae002b; z-index: 3; }
    .InNewsPageHead .InNewsPageHeadTitle { padding-left: 25px; font-size: 22px; color: #fff; font-weight: bold; }

.CloseInNewsPagePopWrap { position: absolute; right: 0; top: 0; background: #dd0542; cursor: pointer; display: none; }
/****首页banner******/
.InNewsBanner { background: #fff; }
.InNewsBannerPic { width: 100%; height: 100%; }
.InNewsBanner img { width: 100%; }
.InNewsLogo { position: absolute; left: 24px; top: 44px; cursor: pointer; width: 5%; }

/******视频展示******/
.VideoShow { }
    .VideoShow .Bg { }
        .VideoShow .Bg img { height: 100%; }


.VideoShowCon { padding: 8% 0; width: 1366px; margin: auto; }
    .VideoShowCon img { width: 100%; }
/*.VideoShowCon>div{display:table-cell;vertical-align:middle;}*/

.VideoShowTitle, .VideoShowDeta { padding-top: 16%; }

.VideoShowTitle { font-size: 32px; line-height: 30px; font-weight: bold; margin-left: 10%; }
    .VideoShowTitle .span_2 { font-size: 24px; width: 100%; line-height: 38px; background: #bc0035; color: #fff; text-align: center; margin-top: 15px; padding: 2%; font-weight: normal; }

.VideoShowclearfix { margin: 8px auto; }

.Iphone { margin: auto 4%; -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; }
.IphoneVideo { position: absolute; top: 12%; left: 10%; width: 80.5%; }
.VideoPlayBtn { position: absolute; top: 40%; left: 39.5%; width: 22%; cursor: pointer; }
/*.Iphone video{    
    height: 56.8%;
    position: absolute;
    top: 22%;
    left: -40%;
    -webkit-transform: rotate(90deg);
}*/
.Iphone video { width: 101%; position: absolute; top: 0; left: -0.5%; }

.VideoShowDeta { font-size: 18px; color: #4f4f4f; }

.InNewsPagePopWrap .ShowStepHome { height: auto; margin-top: 43px; }
    .InNewsPagePopWrap .ShowStepHome .Bg { height: auto; position: relative; }
        .InNewsPagePopWrap .ShowStepHome .Bg img { height: auto; }

/*****************我们故事*********************/
.OurStoryPop { }
.OurStoryCon { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-top: 5px solid #c00036; background: url(../images/InPagePopWrap/OurStoryPop/Bg.jpg) no-repeat; background-size: cover; }
.OurStoryContent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow-y: auto; }

    .OurStoryContent .OurStoryContainer { width: 80%; }
.MyStory, .MyStory span { padding-top: 5px; padding-bottom: 8px; }
.MyStory { display: inline; border-left: 5px solid #c00036; margin-left: 15px; padding-left: 10px; position: absolute; top: 0; width: auto; }
    .MyStory span { background: #c00036; line-height: initial; font-size: 25px; color: #fff; padding-left: 10px; padding-right: 10px; }


.OurStoryTopText { margin-top: 42px; }

    .OurStoryTopText .OurStoryTopTextTitle { font-size: 35px; color: #fff; font-weight: bold; }

    .OurStoryTopText .OurStoryTopTextP { font-size: 15px; color: #d3d3d3; list-style: none; padding: 0; }
        .OurStoryTopText .OurStoryTopTextP li { }



.OurStoryBox { width: 100%; }
    .OurStoryBox img { width: 100%; }

.OurStoryList { margin-top: 35px; cursor: pointer; }


/********Footer**********/
.OurStoryFooter { position: relative; padding-top: 50px; width: 100%; text-align: center; }
    .OurStoryFooter img { width: 100%; }
.OurStoryFooterBg { width: 100%; position: absolute; height: 100%; }
    .OurStoryFooterBg img { height: 100%; }

.OurStoryFooterText { position: relative; padding-top: 5%; font-size: 35px; display: none; }
    .OurStoryFooterText a { color: #868686; padding-bottom: 5px; border-bottom: 2px solid #868686; text-decoration: none; background: #000 url(../images/sdfs.jpg) no-repeat; }
        .OurStoryFooterText a:hover { text-decoration: none; }

.OurStoryFooterBack { width: 100%; margin: auto; position: relative; margin-top: 8%; }
.OurStoryFooterBackPic { width: 3%; margin: auto; min-width: 35px; }
.OurStoryFooterBackText { margin-top: 0.5%; font-size: 20px; color: #868686; font-weight: bold; cursor: pointer; }

/************************************新闻页end************************************/

#output canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; -webkit-animation: FadeIn 4500ms 200ms 1 linear both; -o-animation: FadeIn 4500ms 200ms 1 linear both; -moz-animation: FadeIn 4500ms 200ms 1 linear both; -ms-animation: FadeIn 4500ms 200ms 1 linear both; animation: FadeIn 4500ms 200ms 1 linear both; }
#container img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#output { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
    #output img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }



.CaseShowPageFooterWrap { height: auto; margin: auto; }
.CaseShowPageFooterInner { height: auto; }
.CaseShowPageFooterTop { display: none; }
.CaseShowPageFooterBottom { padding: 2% 0; }
.OurStoryFooterBack { margin: auto; }





@media screen and (max-width:1366px) {
    .cmn-CasesList h1, .cmn-CasesList h2 { font-size: 16px; }
    .cmn-AboutCms img, .cmn-AboutCms2 img, .cmn-AboutH5 img { width: 80%; }
    .VideoShowCon { padding: 6% 0; }

    .PhotoGalleryDescText { font-size: 13px; }
}

@media screen and (max-width:1210px) {
    /*.CaseShowBannerModPageText1{display:none;}*/
    /*.cmn-AboutCon{height:auto;overflow-y:initial;}*/

    body { overflow-y: auto; }

    /*关于我们*/
    .cmn-AboutCon { position: relative; height: auto; /*overflow-y:auto;*/ }
    .cmn-AboutDesc { position: relative; color: #fff; margin-top: -22%; }
        .cmn-AboutDesc h1 a { color: #fff; border-bottom: 2px solid #000000; }
    .cmn-TechnologyModules { width: 100%; }
    .cmn-AboutDesc h1 { font-size: 12px; }
    .cmn-AboutDesc h3 { font-size: 12px; }
    .cmn-AboutDesc p { font-size: 12px; }

    /*客户*/
    .cmn-Clients { height: auto; background: none; }
    .cmn-ClientsInner { height: auto; padding-top: 50px; }
        /*background:#d6d6d6;*/
        .cmn-ClientsInner .cmn-ClientsBox { word-break: break-all; height: auto; }


    .cmn-ClientsRightBox { height: auto; text-align: center; }
    .cmn-ClientsContent { position: relative; height: auto; }
    .cmn-ClientsBox > div { height: auto; margin-top: 2%; word-break: break-all; width: 90%; }
    .cmn-ClientsLeft h2 { font-size: 19px; }
    .cmn-ClientsRightList { width: 24%; }
    .ClientsScrollRound { display: none; }
}



@media screen and (max-width:1024px) {
    /*客户页面手机端高度自适应*/
    .cmn-ClientsContent { height: auto; overflow-y: initial; padding-bottom: 20px; }

    /*客户*/
    /*.cmn-Clients{height:auto;}
    .cmn-ClientsInner{height:auto;margin-top:50px;background:#d6d6d6;}
    .cmn-ClientsInner .cmn-ClientsBox{word-break:break-all;height:auto;}
    .cmn-ClientsRightBox{height:auto;}
    .cmn-ClientsContent{position:relative;height:auto;} 
    .cmn-ClientsBox>div{height:auto;margin-top:2%;word-break:break-all;width:90%;}
    .cmn-ClientsLeft h2{font-size:19px;}
    .cmn-ClientsRightList{width:24%;}
    .ClientsScrollRound{display:none;}*/
}


@media screen and (max-width:992px) {
    .MenuIconBtn { display: block; }
    .HeadLogo { /*right: 3%;left: initial;*/ height: 55%; top: 24%; left: 5.5%; }
    /*.CaseShowBannerModPageText1{display:block;}*/
    .cmn-NavCon { display: none; position: absolute; width: 100%; left: 0; top: 43px; background: #000; height: 240px; -webkit-transition: none; -o-transition: none; -moz-transition: none; -ms-transition: none; transition: none; }

    .cmn-Moble3DSelectIE.cmn-Moble3DTilt { width: 32%; }
    .cmn-NavIn { padding: 0; }
    .cmn-NavList { margin: 20px auto; display: block; text-align: center; }
    /*首页鼠标*/
    .HomeMouse { display: none; }

    .cmn-TechnologyModules3 { margin-top: -17%; }

    .cmn-CasesShowBriefLeft h3 { font-size: 18px; text-align: center; color: #000; font-weight: initial; }
    .cmn-CasesShowBriefLeft p { width: 80%; margin: 2% auto; }

    .cmn-CasesShowBriefLeft h1 { text-align: center; font-weight: initial; }
    .cmn-ClientsLeft h1 { text-align: center; font-weight: initial; }

    .cmn-ClientsLeft h2 { text-align: center; font-weight: initial; }
    .cmn-ClientsLeft p { width: 70%; margin: auto; }


    .cmn-ClientsContentMask { opacity: 0; }

    .HomeLine { width: 39%; left: 2%; top: 58%; }
    .PhotoGallery { margin-bottom: 50px; }

    .HomeRightEdt { width: 100%; font-size: 16px; left: 0; top: 0; text-align: center; }

    .cmn-About { height: initial; }


    /*案例列表h1 h2文字大小*/
    .cmn-CasesList h1, .cmn-CasesList h2 { font-size: 18px; }
    .cmn-CasesShowCon { width: 100%; padding-top: 13%; background: #eee; margin-top: 0; }

    .cmn-CasesMoreHover { display: block; margin: auto; margin-top: 30px; }
    .cmn-CasesShowBriefRight { position: relative; float: none; margin: 2% auto; width: 100%; text-align: center; padding: 0; }
    .cmn-CasesShowBriefRightList { font-size: 12px; /*width: 30%;*/ margin: auto; padding: 0;width: 22%; }
        /*四个按钮宽度值：22*/
        .cmn-CasesShowBriefRightList:nth-child(2) {  }
    /****内页底部****/
    .OurStoryContent .OurStoryContainer { width: 95%; }

    .OurStoryFooterText { font-size: 20px; }

    .CaseShowBannerModPageCon { position: relative; width: auto; left: 0; margin: auto; }
    .CaseShowBannerModPageTitle { position: relative; margin-top: 10%; width: auto; }

    .CaseShowBannerModPageText1 { width: auto; }
    .CaseShowBannerModPageText2 { width: auto; }

    .StepHomeIphoneDesc { position: relative; left: 0; top: 0; margin-top: 20%; }
    .StepHomeIphoneDescTitle { font-size: 20px; }

    .Brand { position: static; display: block; }
        .Brand h2 { font-size: 15px; }

    .InNewsPageHead .InNewsPageHeadTitle { font-size: 15px; }
    .Article { font-size: 15px; }
    .PhotoGalleryContainer { width: 100%; }
    .PhotoGalleryDesc { position: relative; left: 0; top: 0; width: 100%; height: auto; }
    .PhotoGalleryDescMask { background: none; }
    .PhotoGalleryDescBox { padding: 2%; height: auto; padding-bottom: 8%; background: #c00036; margin-bottom: 5%; }
    .PhotoGalleryDescText { font-size: 15px; display: block; }
    .PhotoGalleryMod2 .PhotoGalleryDescText { color: #fff; }

    /*.CaseShowPageFooterWrap{margin-top:-89%;}*/
    .CaseShowPageFooterTop { height: 75%; }


    .cmn-Communicate h4 { font-size: 22px; }

    .MusciWrap { top: 1%; bottom: initial; }

    .cmn-ContactUsContentTitle { font-size: 21px; }
    .cmn-ContactUsDesc { pointer-events: initial; }

    .ShowStepHome { height: auto; }
    .MobileShowPagePopWrap .ShowStepHome { margin-bottom: 0; padding: 6% 0%; overflow: hidden; }
    .ShowStep1 { margin-top: 20px; }

    .MobileContainer, .StepBottom { width: 100%; }
    .CaseShowVideoModIphoneText { width: 80%; }
    .cmn-Moble3DLabel { width: 250%; padding: 4%; }
    .cmn-Moble3DSelect .cmn-Moble3DScreens .cmn-Moble3DScreens1 { -webkit-transform: translateZ(30px); -o-transform: translateZ(30px); -moz-transform: translateZ(30px); -ms-transform: translateZ(30px); transform: translateZ(30px); -webkit-transform: translateZ(65px); -o-transform: translateZ(65px); -moz-transform: translateZ(65px); -ms-transform: translateZ(65px); transform: translateZ(65px); -webkit-transform: translateZ(30px); -moz-transform: translateZ(30px); -o-transform: translateZ(30px); -ms-transform: translateZ(30px); transform: translateZ(30px); }
    .cmn-Moble3DSelect .cmn-Moble3DScreens .cmn-Moble3DScreens2 { -webkit-transform: translateZ(75px); -o-transform: translateZ(75px); -moz-transform: translateZ(75px); -ms-transform: translateZ(75px); transform: translateZ(75px); -webkit-transform: translateZ(115px); -o-transform: translateZ(115px); -moz-transform: translateZ(115px); -ms-transform: translateZ(115px); transform: translateZ(115px); -webkit-transform: translateZ(75px); -o-transform: translateZ(75px); -moz-transform: translateZ(75px); -ms-transform: translateZ(75px); transform: translateZ(75px); }
    .cmn-Moble3DSelect .cmn-Moble3DScreens .cmn-Moble3DScreens3 { -webkit-transform: translateZ(120px); -o-transform: translateZ(120px); -moz-transform: translateZ(120px); -ms-transform: translateZ(120px); transform: translateZ(120px); -webkit-transform: translateZ(120px); -o-transform: translateZ(120px); -moz-transform: translateZ(120px); -ms-transform: translateZ(120px); transform: translateZ(120px); -webkit-transform: translateZ(120px); -o-transform: translateZ(120px); -moz-transform: translateZ(120px); -ms-transform: translateZ(120px); transform: translateZ(120px); }
    .cmn-Moble3DSelect .cmn-Moble3DScreens .cmn-Moble3DScreens4 { -webkit-transform: translateZ(164px); -o-transform: translateZ(164px); -moz-transform: translateZ(164px); -ms-transform: translateZ(164px); transform: translateZ(164px); -webkit-transform: translateZ(164px); -moz-transform: translateZ(164px); -o-transform: translateZ(164px); -ms-transform: translateZ(164px); transform: translateZ(164px); -webkit-transform: translateZ(164px); -o-transform: translateZ(164px); -moz-transform: translateZ(164px); -ms-transform: translateZ(164px); transform: translateZ(164px); }
    .cmn-Moble3DSelect .cmn-Moble3DScreens .cmn-Moble3DScreens5 { display: none; }
}

@media screen and (max-width:940px) {
    body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .CaseShowPageFooterTop { height: 110%; }

    .VideoShowCon { width: 100%; }
    .InNewsBanner { height: auto; }
    .VideoShow { height: auto; }
    .InNewsPagePopWrap .Iphone { float: none; margin: auto; }

    /*.CaseShowVideoMod{margin:auto;font-size:26px;}*/
    /*.CaseShowVideoMod .Iphone{margin-top:5%;}*/

    .cmn-ContactUs { padding-top: 32px; height: auto; }

    .cmn-Communicate { /*top:-19%;*/ }

    .cmn-ClientsRightList { width: 40%; }

    .cmn-ContactUsContentIcon { width: 15%; top: -5%; left: 43%; }
    .cmn-ContactUsContent { padding: 14% 0% 8% 0%; margin-top: 11%; height: auto; }
    .cmn-Footer { position: relative; padding: 12px 0px; }
    .cmn-ContactUsInfoRight { display: block; width: 90%; text-align: center; margin: auto; }
        .cmn-ContactUsInfoRight .cmn-ContactUsInfoTel { font-size: 25px; pointer-events: initial; }
    .cmn-ContactUsInfoTel { pointer-events: initial; }
    /*.cmn-ContactUsInfoTel a{font-size:25px;}*/

    .cmn-ContactUsInfoWrite { font-size: 33px; }
    .cmn-ContactUsInfoLeft { border: none; text-align: center; width: 95%; margin-right: auto; pointer-events: initial; }
    .ContactName { margin-left: auto; margin-right: auto; }
    .cmn-ContactUsInfoWrap .cmn-InfoSubmitBtn { margin: 20px auto 0px auto; -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }
    .cmn-InfoSubmitBtn span { font-size: 20px; }
    .cmn-Adress { float: none; margin-left: 0%; }
    .cmn-AdressTitle { text-align: center; }
    .cmn-ContactBtn { margin: auto; float: none; width: 23%; margin-right: 5%; margin-left: 5%; display: none; }
    .cmn-BusinessLicense { top: unset; -webkit-transform: unset; position: relative; margin-top: 4%; }
    /*.cmn-ClientsRightList{width:50%;}*/

    .CaseShowFlip { margin: 2% auto; }

    .cmn-CasesMoreHover { margin-top: 10px; }
}

@media screen and (max-width:768px) {

    /*.cmn-AboutCon{position:relative;height:auto;overflow-y:initial;} 
    .cmn-AboutDesc{position:relative;color:#fff;margin-top: -22%;}
    .cmn-AboutDesc h1 a{color:#fff;    border-bottom: 2px solid #000000;} 
    .cmn-TechnologyModules{width:100%;}
    .cmn-AboutDesc h1{font-size:12px;}
    .cmn-AboutDesc h3{font-size:12px;}
    .cmn-AboutDesc p{font-size:12px;}*/

    /*.cmn-CasesIn { padding-bottom:50px;}
    .cmn-CasesList { position:absolute;top:0;left:0;}
    #Js_CaseTemp { 
        height: 264px;
        position: relative;
        padding: 0;
        margin: auto 15px;
        width: 93%;
    }

    .cmn-AboutCon { height:100%;overflow:hidden;}
    .cmn-TechnologyModules3 .cmn-AboutDesc { 
            position: absolute;
    top: 45%;
    right: -8%;
    left: initial;
    margin-top: 0%;
    width: 62%;
    }
    .cmn-AboutH5Main {
            width: 101%;
    position: absolute;
    top: 9%;
    left: -17%;
    }



    .cmn-AboutCms2Main {     
        width: 69%;
        top: -10%;
        left: 49%;
    }
    .cmn-TechnologyModules2 { }
    .cmn-TechnologyModules2 .cmn-AboutDesc { 
        position: absolute;
        margin: auto;
        top: 10%;
        left: -2%;
        width: 68%;
        bottom:initial;
    }


    .CmsMain { 
        width: 79%;
        top: -42%;
        left: -12%;
    }
    .cmn-TechnologyModules1 .cmn-AboutDesc {
        position: absolute;
        margin: auto;
        bottom: initial;
        top: -28%;
        left: 52%;
        width: 55%;
    }


    .cmn-ClientsContent { height:100%;overflow:hidden;padding:0;}*/




}

@media screen and (max-width:750px) {
    .CaseShowPageFooterTop { height: 80%; }
    .CaseShowVideoMod { margin: auto; }
    .CaseShowBannerModProductPic, .CaseShowBannerModSupContent { display: none; }
    .CaseShowVideoMod { margin: auto; font-size: 26px; }
        .CaseShowVideoMod .Iphone { margin-top: 5%; width: 85%; }

    .cmn-NavCon { height: auto; }
}

@media screen and (max-width:640px) {

    .CaseShowPageFooterTop { height: 66%; }

    .cmn-HomeCon { top: 13%; width: 100%; left: 0; }
        .cmn-HomeCon img { width: 100%; }
        .cmn-HomeCon > .SupportContent { display: none; }
    .HomeLogo { position: relative; top: 0; left: 12%; width: 75%; }
    .PersonalWrap { width: 80%; left: 0; margin: auto; margin-top: 37%; position: relative; }
    .HomeRightText { position: relative; width: 90%; right: 0; top: 0; margin: auto; margin-top: 9%; }
        .HomeRightText img { display: none; }
}




/*by lwq*/

.Js_CasesList.show { -webkit-animation: FromSmallToLarge 1s .2s ease both; -moz-animation: FromSmallToLarge 1s .2s ease both; -o-animation: FromSmallToLarge 1s .2s ease both; -ms-animation: FromSmallToLarge 1s .2s ease both; animation: FromSmallToLarge 1s .2s ease both; }

.Js_CasesList.hide { -webkit-animation: FromLargeToSmall 1s .2s ease both; -moz-animation: FromLargeToSmall 1s .2s ease both; -o-animation: FromLargeToSmall 1s .2s ease both; -ms-animation: FromLargeToSmall 1s .2s ease both; animation: FromLargeToSmall 1s .2s ease both; }


.erweima { z-index: 9; position: fixed; right: 65px; width: 150px; bottom: 260px; }
    .erweima > div > img { }
    .erweima > div:nth-child(1) { position: absolute; display: none;    margin-left: -10px; margin-top: -8px; }
    .erweima > div:nth-child(2) { position: absolute; right: -20px; top: 60px; }



.erweima1 { display: none; }
.erweima1Div { display: none; }


   

.erweima1Div { display: none; position: fixed; right: 5%; top: 60%; z-index: 9; }
.erweima1 { position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background: rgba(0,0,0,0.85); display: none; z-index: 9; }
.erweima1 > div:nth-child(1) img {width: 100%;position: absolute;left: 0px;top: 0px;}
.erweima1 > div:nth-child(1) { position: absolute; left: 25%; top: 30%; z-index: 1; width: 50%; }


.erweima1 > div:nth-child(2) { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 0; }
.x {position: absolute;width: 10%;height: 10%;margin-top: -15%;right: -15%;}

.erweima1 > div:nth-child(1).select>img:nth-child(2) {display:none; }