/* */ /*reset*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote,a, th, td{padding: 0; color: #765816; font-family: 'Microsoft YaHei'; margin: 0; -webkit-text-size-adjust: none;-webkit-appearance: none; letter-spacing: .2em; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} table{border-collapse: collapse; border-spacing: 0;} fieldset, img{border: 0;} address, caption, cite, code, dfn, em, strong, th, var{font-weight: normal; font-style: normal;} ol, ul{list-style: none;} caption, th{text-align: left;} a{ text-decoration: none;} h1, h2, h3, h4, h5, h6{font-weight: normal; font-size: 100%;} q:before, q:after{content: '';} abbr, acronym{border: 0;} body,html{ height: 100%; background-color: #ffffff;} div{font: 0/1.5em 'Microsoft YaHei';} .cf:after, .cf:before{ content: ''; display: table; } .cf:after{ clear: both; } .cf{ zoom:1; } .fl{float: left; display: inline;} .fr{display: inline-block;float: left;} .dis_none{ display: none;} .pos-a{ position: absolute;} .overHidden{overflow: hidden;} section{ overflow: hidden;} /*公用*/ .warp{ width: 1180px; margin: 0 auto; height: 100%;} .page{ -o-transition: all 0ms; transition: all 0ms; -webkit-transition: all 0ms; } .colorLine{ width: 100%; height: 2px;} .colorLine>div{ width: 25%; float: left; height: 2px;} .colorLine>div:nth-of-type(1){background-color: #f7a405} .colorLine>div:nth-of-type(2){background-color: #0782ed} .colorLine>div:nth-of-type(3){background-color: #da251d} .colorLine>div:nth-of-type(4){background-color: #80d414} /*头部*/ @keyframes headerAnim { 0%{ background-position: 0 0} 100%{ background-position: 1440px 0} } @-webkit-keyframes headerAnim { 0%{ background-position: 0 0} 100%{ background-position: 1440px 0} } .header { z-index: 11; -o-transition: all 200ms; transition: all 200ms; -webkit-transition: all 200ms; height: 114px; background: rgba(0,0,0,.6); position: fixed;top: 0; left: 0; width: 100%; border-top: solid 1px #000;} .header:after{ animation:headerAnim 5s infinite linear;-webkit-animation:headerAnim 5s infinite linear; width: 100%; background: url("../images/line.png") repeat-x bottom center; position: absolute; left: 0; bottom: 0; height: 3px; display: block; content: ""; } .logoBox{ -o-transition: all 200ms; transition: all 200ms; -webkit-transition: all 200ms; height: 114px; width: 190px; display: flex; align-items: center; } .logoBox>div{ width: 190px; height: 62px; background: url(../images/logo1.png) no-repeat center; background-size: 100% 100%; } /* background: url("../images/logo1.png") no-repeat center; width: 190px; height: 62px; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; */ .logoBox>p{ font-size: 12px; line-height: 24px; text-align: center; color:#a28d7a;letter-spacing:0.05em;} .nav{ height: 100%;} .nav>a,.nav>i{position: relative; font-family: "Microsoft YaHei"; -o-transition: all 200ms; transition: all 200ms; -webkit-transition: all 200ms;font-style:normal;width:132px; font-size:18px; color: #be9c50; line-height: 114px; height: 100%; text-align: center; float: left; } .nav>a:hover,.nav>i:hover,.nav>i>em>a:hover,.nav>a.activate{ background: rgba(0,0,0,.7); color: #ffe4a8; } .warp{ position: relative;} .nav>i:after{ position: absolute; width: 0; height: 0; content: ""; display: block; border: solid 7px transparent; border-top: solid 7px #be9c50; top: 47%; right: 8px;} .nav>i:hover:after{-o-transition: all 300ms;transition: all 300ms; -webkit-transition: all 300ms; border: solid 7px transparent; border-bottom: solid 7px #be9c50; top:40%; } body .nav .loginBtn{letter-spacing: 0 !important; -o-transition: all 200ms; transition: all 200ms; -webkit-transition: all 200ms;cursor: pointer; margin-left: 30px; font-size: 18px; width:76px; height: 36px; line-height: 36px !important; margin-top: 38px; text-align: center; border: solid 1px #be9c50; color:#be9c50;display: inline-block; *display: inline;zoom:1; padding: 0 20px; border-radius: 5px; } body .nav .loginBtn:hover{ color: #ffe4a8; border: solid 1px #ffe4a8; } .nav>i>em{ -o-transition: all 200ms; transition: all 200ms; -webkit-transition: all 200ms; position: absolute; width: 100%; left: 0; top: 114px; overflow: hidden; height: 0;} .nav>i:hover>em{ height: 245px;} .nav>i>em>a{cursor:pointer;color: #be9c50; display: block; width: 100%; height: 60px; text-align: center; line-height: 60px;background: rgba(0,0,0,.6); } .header.small{ height:70px;background: rgba(0,0,0,.9);} .small .nav>i>em{ top: 70px; } .small .logoBox{ height:70px; -ms-transform: scale(.6); transform: scale(.6);-webkit-transform: scale(.6); padding-top: 2px;} .small .nav>a,.small .nav>i{font-size: 16px; height: 70px; line-height: 70px;} .small .logoBox>p{display: none;} body .small .nav .loginBtn{ height:30px; line-height: 30px !important; font-size: 16px; margin-top: 19px; /*display: -webkit-box; display: -ms-flexbox; display: flex;*/-webkit-box-align: center;-ms-flex-align: center;align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;} /*banner*/ .banner{ width: 100%; height: 500px; position: relative;} .bannerList{ width: 100%; height: 100%; position: relative; background: #000; overflow: hidden;} .bannerList li{pointer-events: none; width: 100%; left: 0;opacity: 0; z-index: 8; overflow: hidden; height: 100%; position: absolute; top: 0; background-size: cover; background-position: center;} .bannerList li .bannerBg{ /*background-attachment: fixed;*/width: 100%; height: 100%; /*background-size: cover;*/ background-position: center;background-repeat: no-repeat;background-color: #fff} .bannerList li img{ display: block;} .bannerList li.current{ opacity: 1;pointer-events: auto; z-index: 9} /*.bannerList li.on{transform: translateX(0%);-webkit-transform: translateX(0%);}*/ /*.bannerList li.on .bannerBg{ }*/ .slideBtn{ text-align: center; width: 100%; position: absolute; bottom: 40px; left: 0; z-index: 10 } .slideBtn li { cursor: pointer; border-radius: 8px; width:6px; height: 36px; display: inline-block; *display: inline; zoom:1; background: rgba(0,0,0,0.2); margin: 0 5px; -o-transition: all 300ms; transition: all 300ms; -webkit-transition: all 300ms;; } .slideBtn li.on { background: #be9c50; } .banner11{ position: absolute; left: 50%; top: 50%; margin-left:-434px; margin-top: -91px; } .banner12{ position: absolute; left: 50%; top: 50%; margin-left:-390px; margin-top: -210px; } .banner13{ position: absolute; left: 50%; top: 50%; margin-left:-426px; margin-top: -260px; } .loginBox{text-align: center; position: absolute; top: 70%; width: 100%;} .loginBox a{ cursor: pointer; -o-transition: .3s all; transition: .3s all; -webkit-transition: .3s all; width: 145px; height: 36px; margin: 0 30px; border:2px solid #4d504f; color: #4d504f; font: bold 20px/34px "Microsoft YaHei"; text-align: center; display: inline-block; *display: inline;zoom:1; } .loginBox a:hover{ background-color: rgba(255,255,255,.4)} .fourPoint{ margin-top:145px; height: 102px;border-bottom:1px solid #ffe4a8; } .fourPoint dl{ float: left; width: 209px; padding-left: 86px;} .fourPoint dl dt{float: left; width: 74px; height: 74px; margin-left: -86px;} .fourPoint dl dt img{ width: 100%; height: 100%} .fourPoint dl dd h3{-o-transition: all 300ms;transition: all 300ms;-webkit-transition: all 300ms; font-size: 18px;letter-spacing:1px; line-height: 20px; padding-top: 7px; color:#765816; margin-bottom: 5px; } .fourPoint dl dd p{-o-transition: all 300ms;transition: all 300ms;-webkit-transition: all 300ms;letter-spacing:3px; font-size: 14px; line-height: 16px; color:#765816; } @keyframes ic1 { 0%{ background-position:0 0;} 5.3%{ background-position:-74px 0; } 10.6%{ background-position:-148px 0; } 15.9%{ background-position:-222px 0; } 21.2%{ background-position:-296px 0; } 26.5%{ background-position:-370px 0; } 31.8%{ background-position:-444px 0; } 37.1%{ background-position:-518px 0; } 42.4%{ background-position:-592px 0; } 47.7%{ background-position:-666px 0; } 53%{ background-position:-740px 0; } 58.3%{ background-position:-814px 0; } 63.6%{ background-position:-888px 0; } 68.9%{ background-position:-962px 0; } 74.2%{ background-position:-1036px 0; } 79.5%{ background-position:-1110px 0; } 84.8%{ background-position:-1184px 0; } 90.1%{ background-position:-1258px 0; } 95.4%{ background-position:-1332px 0; } 100%{ background-position:-1406px 0; } } @-webkit-keyframes ic1 { 0%{ background-position:0 0;} 5.3%{ background-position:-74px 0; } 10.6%{ background-position:-148px 0; } 15.9%{ background-position:-222px 0; } 21.2%{ background-position:-296px 0; } 26.5%{ background-position:-370px 0; } 31.8%{ background-position:-444px 0; } 37.1%{ background-position:-518px 0; } 42.4%{ background-position:-592px 0; } 47.7%{ background-position:-666px 0; } 53%{ background-position:-740px 0; } 58.3%{ background-position:-814px 0; } 63.6%{ background-position:-888px 0; } 68.9%{ background-position:-962px 0; } 74.2%{ background-position:-1036px 0; } 79.5%{ background-position:-1110px 0; } 84.8%{ background-position:-1184px 0; } 90.1%{ background-position:-1258px 0; } 95.4%{ background-position:-1332px 0; } 100%{ background-position:-1406px 0; } } @keyframes ic2 { 0%{ background-position:0 -74px;} 5.3%{ background-position:-74px -74px; } 10.6%{ background-position:-148px -74px; } 15.9%{ background-position:-222px -74px; } 21.2%{ background-position:-296px -74px; } 26.5%{ background-position:-370px -74px; } 31.8%{ background-position:-444px -74px; } 37.1%{ background-position:-518px -74px; } 42.4%{ background-position:-592px -74px; } 47.7%{ background-position:-666px -74px; } 53%{ background-position:-740px -74px; } 58.3%{ background-position:-814px -74px; } 63.6%{ background-position:-888px -74px; } 68.9%{ background-position:-962px -74px; } 74.2%{ background-position:-1036px -74px; } 79.5%{ background-position:-1110px -74px; } 84.8%{ background-position:-1184px -74px; } 90.1%{ background-position:-1258px -74px; } 95.4%{ background-position:-1332px -74px; } 100%{ background-position:-1406px -74px; } } @-webkit-keyframes ic2 { 0%{ background-position:0 -74px;} 5.3%{ background-position:-74px -74px; } 10.6%{ background-position:-148px -74px; } 15.9%{ background-position:-222px -74px; } 21.2%{ background-position:-296px -74px; } 26.5%{ background-position:-370px -74px; } 31.8%{ background-position:-444px -74px; } 37.1%{ background-position:-518px -74px; } 42.4%{ background-position:-592px -74px; } 47.7%{ background-position:-666px -74px; } 53%{ background-position:-740px -74px; } 58.3%{ background-position:-814px -74px; } 63.6%{ background-position:-888px -74px; } 68.9%{ background-position:-962px -74px; } 74.2%{ background-position:-1036px -74px; } 79.5%{ background-position:-1110px -74px; } 84.8%{ background-position:-1184px -74px; } 90.1%{ background-position:-1258px -74px; } 95.4%{ background-position:-1332px -74px; } 100%{ background-position:-1406px -74px; } } @keyframes ic3 { 0%{ background-position:0 -148px;} 5.3%{ background-position:-74px -148px; } 10.6%{ background-position:-148px -148px; } 15.9%{ background-position:-222px -148px; } 21.2%{ background-position:-296px -148px; } 26.5%{ background-position:-370px -148px; } 31.8%{ background-position:-444px -148px; } 37.1%{ background-position:-518px -148px; } 42.4%{ background-position:-592px -148px; } 47.7%{ background-position:-666px -148px; } 53%{ background-position:-740px -148px; } 58.3%{ background-position:-814px -148px; } 63.6%{ background-position:-888px -148px; } 68.9%{ background-position:-962px -148px; } 74.2%{ background-position:-1036px -148px; } 79.5%{ background-position:-1110px -148px; } 84.8%{ background-position:-1184px -148px; } 90.1%{ background-position:-1258px -148px; } 95.4%{ background-position:-1332px -148px; } 100%{ background-position:-1406px -148px; } } @-webkit-keyframes ic3 { 0%{ background-position:0 -148px;} 5.3%{ background-position:-74px -148px; } 10.6%{ background-position:-148px -148px; } 15.9%{ background-position:-222px -148px; } 21.2%{ background-position:-296px -148px; } 26.5%{ background-position:-370px -148px; } 31.8%{ background-position:-444px -148px; } 37.1%{ background-position:-518px -148px; } 42.4%{ background-position:-592px -148px; } 47.7%{ background-position:-666px -148px; } 53%{ background-position:-740px -148px; } 58.3%{ background-position:-814px -148px; } 63.6%{ background-position:-888px -148px; } 68.9%{ background-position:-962px -148px; } 74.2%{ background-position:-1036px -148px; } 79.5%{ background-position:-1110px -148px; } 84.8%{ background-position:-1184px -148px; } 90.1%{ background-position:-1258px -148px; } 95.4%{ background-position:-1332px -148px; } 100%{ background-position:-1406px -148px; } } @keyframes ic4 { 0%{ background-position:0 -222px;} 5.3%{ background-position:-74px -222px; } 10.6%{ background-position:-148px -222px; } 15.9%{ background-position:-222px -222px; } 21.2%{ background-position:-296px -222px; } 26.5%{ background-position:-370px -222px; } 31.8%{ background-position:-444px -222px; } 37.1%{ background-position:-518px -222px; } 42.4%{ background-position:-592px -222px; } 47.7%{ background-position:-666px -222px; } 53%{ background-position:-740px -222px; } 58.3%{ background-position:-814px -222px; } 63.6%{ background-position:-888px -222px; } 68.9%{ background-position:-962px -222px; } 74.2%{ background-position:-1036px -222px; } 79.5%{ background-position:-1110px -222px; } 84.8%{ background-position:-1184px -222px; } 90.1%{ background-position:-1258px -222px; } 95.4%{ background-position:-1332px -222px; } 100%{ background-position:-1406px -222px; } } @-webkit-keyframes ic4 { 0%{ background-position:0 -222px;} 5.3%{ background-position:-74px -222px; } 10.6%{ background-position:-148px -222px; } 15.9%{ background-position:-222px -222px; } 21.2%{ background-position:-296px -222px; } 26.5%{ background-position:-370px -222px; } 31.8%{ background-position:-444px -222px; } 37.1%{ background-position:-518px -222px; } 42.4%{ background-position:-592px -222px; } 47.7%{ background-position:-666px -222px; } 53%{ background-position:-740px -222px; } 58.3%{ background-position:-814px -222px; } 63.6%{ background-position:-888px -222px; } 68.9%{ background-position:-962px -222px; } 74.2%{ background-position:-1036px -222px; } 79.5%{ background-position:-1110px -222px; } 84.8%{ background-position:-1184px -222px; } 90.1%{ background-position:-1258px -222px; } 95.4%{ background-position:-1332px -222px; } 100%{ background-position:-1406px -222px; } } @keyframes ic5 { 0%{ background-position:0 0;} 5.3%{ background-position:-83px 0; } 10.6%{ background-position:-166px 0; } 15.9%{ background-position:-249px 0; } 21.2%{ background-position:-332px 0; } 26.5%{ background-position:-415px 0; } 31.8%{ background-position:-498px 0; } 37.1%{ background-position:-581px 0; } 42.4%{ background-position:-664px 0; } 47.7%{ background-position:-747px 0; } 53%{ background-position:-830px 0; } 58.3%{ background-position:-913px 0; } 63.6%{ background-position:-996px 0; } 68.9%{ background-position:-1079px 0; } 74.2%{ background-position:-1162px 0; } 79.5%{ background-position:-1245px 0; } 84.8%{ background-position:-1328px 0; } 90.1%{ background-position:-1411px 0; } 95.4%{ background-position:-1494px 0; } 100%{ background-position:-1577px 0; } } @-webkit-keyframes ic5 { 0%{ background-position:0 0;} 5.3%{ background-position:-83px 0; } 10.6%{ background-position:-166px 0; } 15.9%{ background-position:-249px 0; } 21.2%{ background-position:-332px 0; } 26.5%{ background-position:-415px 0; } 31.8%{ background-position:-498px 0; } 37.1%{ background-position:-581px 0; } 42.4%{ background-position:-664px 0; } 47.7%{ background-position:-747px 0; } 53%{ background-position:-830px 0; } 58.3%{ background-position:-913px 0; } 63.6%{ background-position:-996px 0; } 68.9%{ background-position:-1079px 0; } 74.2%{ background-position:-1162px 0; } 79.5%{ background-position:-1245px 0; } 84.8%{ background-position:-1328px 0; } 90.1%{ background-position:-1411px 0; } 95.4%{ background-position:-1494px 0; } 100%{ background-position:-1577px 0; } } @keyframes ic6 { 0%{ background-position:0 -83px;} 5.3%{ background-position:-83px -83px; } 10.6%{ background-position:-166px -83px; } 15.9%{ background-position:-249px -83px; } 21.2%{ background-position:-332px -83px; } 26.5%{ background-position:-415px -83px; } 31.8%{ background-position:-498px -83px; } 37.1%{ background-position:-581px -83px; } 42.4%{ background-position:-664px -83px; } 47.7%{ background-position:-747px -83px; } 53%{ background-position:-830px -83px; } 58.3%{ background-position:-913px -83px; } 63.6%{ background-position:-996px -83px; } 68.9%{ background-position:-1079px -83px; } 74.2%{ background-position:-1162px -83px; } 79.5%{ background-position:-1245px -83px; } 84.8%{ background-position:-1328px -83px; } 90.1%{ background-position:-1411px -83px; } 95.4%{ background-position:-1494px -83px; } 100%{ background-position:-1577px -83px; } } @-webkit-keyframes ic6 { 0%{ background-position:0 -83px;} 5.3%{ background-position:-83px -83px; } 10.6%{ background-position:-166px -83px; } 15.9%{ background-position:-249px -83px; } 21.2%{ background-position:-332px -83px; } 26.5%{ background-position:-415px -83px; } 31.8%{ background-position:-498px -83px; } 37.1%{ background-position:-581px -83px; } 42.4%{ background-position:-664px -83px; } 47.7%{ background-position:-747px -83px; } 53%{ background-position:-830px -83px; } 58.3%{ background-position:-913px -83px; } 63.6%{ background-position:-996px -83px; } 68.9%{ background-position:-1079px -83px; } 74.2%{ background-position:-1162px -83px; } 79.5%{ background-position:-1245px -83px; } 84.8%{ background-position:-1328px -83px; } 90.1%{ background-position:-1411px -83px; } 95.4%{ background-position:-1494px -83px; } 100%{ background-position:-1577px -83px; } } @keyframes ic7 { 0%{ background-position:0 -166px;} 5.3%{ background-position:-83px -166px; } 10.6%{ background-position:-166px -166px; } 15.9%{ background-position:-249px -166px; } 21.2%{ background-position:-332px -166px; } 26.5%{ background-position:-415px -166px; } 31.8%{ background-position:-498px -166px; } 37.1%{ background-position:-581px -166px; } 42.4%{ background-position:-664px -166px; } 47.7%{ background-position:-747px -166px; } 53%{ background-position:-830px -166px; } 58.3%{ background-position:-913px -166px; } 63.6%{ background-position:-996px -166px; } 68.9%{ background-position:-1079px -166px; } 74.2%{ background-position:-1162px -166px; } 79.5%{ background-position:-1245px -166px; } 84.8%{ background-position:-1328px -166px; } 90.1%{ background-position:-1411px -166px; } 95.4%{ background-position:-1494px -166px; } 100%{ background-position:-1577px -166px; } } @-webkit-keyframes ic7 { 0%{ background-position:0 -166px;} 5.3%{ background-position:-83px -166px; } 10.6%{ background-position:-166px -166px; } 15.9%{ background-position:-249px -166px; } 21.2%{ background-position:-332px -166px; } 26.5%{ background-position:-415px -166px; } 31.8%{ background-position:-498px -166px; } 37.1%{ background-position:-581px -166px; } 42.4%{ background-position:-664px -166px; } 47.7%{ background-position:-747px -166px; } 53%{ background-position:-830px -166px; } 58.3%{ background-position:-913px -166px; } 63.6%{ background-position:-996px -166px; } 68.9%{ background-position:-1079px -166px; } 74.2%{ background-position:-1162px -166px; } 79.5%{ background-position:-1245px -166px; } 84.8%{ background-position:-1328px -166px; } 90.1%{ background-position:-1411px -166px; } 95.4%{ background-position:-1494px -166px; } 100%{ background-position:-1577px -166px; } } @keyframes ic8 { 0%{ background-position:0 -249px;} 5.3%{ background-position:-83px -249px; } 10.6%{ background-position:-166px -249px; } 15.9%{ background-position:-249px -249px; } 21.2%{ background-position:-332px -249px; } 26.5%{ background-position:-415px -249px; } 31.8%{ background-position:-498px -249px; } 37.1%{ background-position:-581px -249px; } 42.4%{ background-position:-664px -249px; } 47.7%{ background-position:-747px -249px; } 53%{ background-position:-830px -249px; } 58.3%{ background-position:-913px -249px; } 63.6%{ background-position:-996px -249px; } 68.9%{ background-position:-1079px -249px; } 74.2%{ background-position:-1162px -249px; } 79.5%{ background-position:-1245px -249px; } 84.8%{ background-position:-1328px -249px; } 90.1%{ background-position:-1411px -249px; } 95.4%{ background-position:-1494px -249px; } 100%{ background-position:-1577px -249px; } } @-webkit-keyframes ic8 { 0%{ background-position:0 -249px;} 5.3%{ background-position:-83px -249px; } 10.6%{ background-position:-166px -249px; } 15.9%{ background-position:-249px -249px; } 21.2%{ background-position:-332px -249px; } 26.5%{ background-position:-415px -249px; } 31.8%{ background-position:-498px -249px; } 37.1%{ background-position:-581px -249px; } 42.4%{ background-position:-664px -249px; } 47.7%{ background-position:-747px -249px; } 53%{ background-position:-830px -249px; } 58.3%{ background-position:-913px -249px; } 63.6%{ background-position:-996px -249px; } 68.9%{ background-position:-1079px -249px; } 74.2%{ background-position:-1162px -249px; } 79.5%{ background-position:-1245px -249px; } 84.8%{ background-position:-1328px -249px; } 90.1%{ background-position:-1411px -249px; } 95.4%{ background-position:-1494px -249px; } 100%{ background-position:-1577px -249px; } } .shopBanner{ background-color:#010201; width: 100%; position: relative; } .bImg{ background: url("../images/banner/shopBanner.jpg") no-repeat center #010201; width: 100%; height: 100%;} .bTx{ background: url("../images/banner/shopBannerText.png") no-repeat center bottom; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0;} .fourPoint dl dt i{ display: block; width: 74px; height: 74px;background-image: url("../images/ico4co.png"); background-repeat: no-repeat; } /*.ic1{ background-position:-1406px 0;}*/ /*.ic2{ background-position:-1406px -74px;}*/ /*.ic3{ background-position:-1406px -148px;}*/ /*.ic4{ background-position:-1406px -222px;}*/ /*.ic5{ background-position:-1577px 0;}*/ /*.ic6{ background-position:-1577px -83px;}*/ /*.ic7{ background-position:-1577px -166px;}*/ /*.ic8{ background-position:-1577px -249px;}*/ /*.fourPoint dl:hover dt i.ic1{animation: 1s ic1 steps(1);-webkit-animation: 1s ic1 steps(1);} .fourPoint dl:hover dt i.ic2{animation: 1s ic2 steps(1);-webkit-animation: 1s ic2 steps(1);} .fourPoint dl:hover dt i.ic3{animation: 1s ic3 steps(1);-webkit-animation: 1s ic3 steps(1);} .fourPoint dl:hover dt i.ic4{animation: 1s ic4 steps(1);-webkit-animation: 1s ic4 steps(1);} */ /*.mediaFourPoint>div:hover>i.ic5{animation: 1s ic5 steps(1);-webkit-animation: 1s ic5 steps(1); } .mediaFourPoint>div:hover>i.ic6{animation: 1s ic6 steps(1);-webkit-animation: 1s ic6 steps(1); } .mediaFourPoint>div:hover>i.ic7{animation: 1s ic7 steps(1);-webkit-animation: 1s ic7 steps(1); } .mediaFourPoint>div:hover>i.ic8{animation: 1s ic8 steps(1);-webkit-animation: 1s ic8 steps(1); }*/ .fourPoint dl:hover dd h3{ -ms-transform: translateY(20px); transform: translateY(20px); -webkit-transform: translateY(20px); color: #be9c50;} .fourPoint dl:hover dd p{opacity: 0;-ms-transform: translateY(-5px);transform: translateY(-5px); -webkit-transform: translateY(-5px)} .brandInfo{ text-align: center; padding-top: 88px;} .brandInfo h1{ font-size: 32px;letter-spacing:2px; line-height: 50px; padding-top: 44px;color: #6a81e5} .brandInfo p{ font-size: 18px; letter-spacing:4px; line-height: 27px; padding-top: 10px;color: #4e4f57} .scenario{ width: 100%; text-align: center; padding: 65px 0 130px;} .scenario li{ position: relative; width:205px; display: inline-block; *display: inline; zoom:1; margin: 0 45px;} .scenario li>img { width:205px; height: 236px; -o-transition: all 300ms; transition: all 300ms; -webkit-transition: all 300ms; } .scenario li>p{ font-size:18px; line-height: 54px;-o-transition: all 300ms;transition: all 300ms; -webkit-transition: all 300ms; color: #4e4f57 } .scenario li>div{ opacity: 0; -ms-transform: scale(0); transform: scale(0);-webkit-transform: scale(0); -o-transition: all 300ms; transition: all 300ms; -webkit-transition: all 300ms; width: 250px; height: 287px; position: absolute; left: 50%; top: 50%; margin: -174px 0 0 -125px;} .scenario li>div>h2{-ms-transform:translateY(80px);transform:translateY(80px); -webkit-transform:translateY(80px); -o-transition: all 300ms; transition: all 300ms; -webkit-transition: all 300ms; font:24px/2em "Microsoft YaHei"; color: #fff; padding-top: 70px;} .scenario li>div>h3{ -ms-transform:translateY(80px); transform:translateY(80px); -webkit-transform:translateY(80px);-o-transition: all 300ms;transition: all 300ms; -webkit-transition: all 300ms; font:14px/2em "Microsoft YaHei"; color: #fff; padding: 0 40px;} .scenario li:hover>img{-ms-transform: scale(0);transform: scale(0);-webkit-transform: scale(0); } .scenario li:hover>p{opacity: 0; -ms-transform:translateY(-20px); transform:translateY(-20px); -webkit-transform:translateY(-20px); } .scenario li:hover>div{opacity: 1;-ms-transform: scale(1);transform: scale(1);-webkit-transform: scale(1); } .scenario li:hover>div>h2{ -ms-transform:translateY(0); transform:translateY(0); -webkit-transform:translateY(0); } .scenario li:hover>div>h3{ -ms-transform:translateY(0); transform:translateY(0); -webkit-transform:translateY(0); } /*视频展示区域*/ .showVideo{ padding-top: 100px; padding-bottom: 100px; } .videoDiv{ width: 1430px; margin: 30px auto 0px; height: 350px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 100px } .showVideo h2{ line-height: 40px; letter-spacing: 1px; font-size: 32px; text-align: center; } .clr:before,.clr:after { content:""; display:table; } .clr:after { clear:both; } .clr{ zoom:1; } .videoTitle{ font-size: 1em; width: 1230px; margin: 0 auto; } .videoTitle span{ display: inline-block; width: 50%; text-align: center; } .case{ padding-bottom: 40px;} .caseTitle{ padding-top:106px;color: #6a81e5} .caseTitle h2{ line-height: 40px; letter-spacing: 1px; font-size: 32px; text-align: center;color: #6a81e5} .caseTitle h3{ line-height: 22px; padding-top: 8px; letter-spacing: 4px; font-size: 18px; text-align: center; color: #4e4f57} .caseBox{background: url("../images/iPadbg.png") no-repeat top; width: 1413px; height: 872px; margin: 10px auto; } .caseList{ width:920px; height: 694px; margin: 0 auto; padding-top: 43px; text-align: center;} .caseList li{ width: 176px; height: 336px; margin: 8px 0 0; display: inline-block; *display: inline; zoom:1; } .caseList li>a>div{position: relative; overflow: hidden;width: 176px; height:277px;} .caseList li>a>div>img{ width: 153px; height: 285px;-o-transition: all 300ms;transition: all 300ms;-webkit-transition: all 300ms; } .caseList li>a>div>i{ opacity: 0;-o-transition: all 300ms;transition: all 300ms;-webkit-transition: all 300ms; width: 176px; height: 277px; position: absolute; left: 0; top: 0;display: block; background: rgba(0,0,0,.6);} .caseList li>a>div>i>img{ -o-transition: all 300ms; transition: all 300ms;-webkit-transition: all 300ms;-ms-transform: scale(0);transform: scale(0);-webkit-transform: scale(0); -ms-transform-origin: 50% 50%; transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%; width: 152px; height: 152px; position: absolute; left: 12px; top:62px; } .caseList li>a>h3{ -o-text-overflow: ellipsis; text-overflow: ellipsis;white-space: normal; overflow: hidden; height: 25px; text-align: center; font-size:16px; color: #4e4f57; line-height:25px;padding-top: 8px; } .caseList li>a>h4{text-align: center; font-size:12px; color: #C3C3C3; line-height:14px; } .caseList li>a:hover>div>i,.caseList li.on>a>div>i{opacity: 1;} .caseList li>a:hover>div>img,.caseList li.on>a>div>img{-ms-transform: scale(1.2);transform: scale(1.2);-webkit-transform: scale(1.2);} .caseList li>a:hover>div>i>img,.caseList li.on>a>div>i>img{-ms-transform: scale(1);transform: scale(1);-webkit-transform: scale(1); } .pos_re{ position: relative;} .mediaInfo{ text-align: center; height: 534px; margin-bottom: 174px; padding-top: 100px; } .mediaFourPoint{ padding-top: 45px; text-align: center; width: 1110px; margin: 0 auto;} .mediaFourPoint>div{display: inline-block; *display: inline; zoom:1; width: 25%; float: left;text-align: center;} .mediaFourPoint>div>i{background-image: url("../images/ico4co2.png"); display: block;width: 83px; height: 83px; margin: 0 auto; background-repeat: no-repeat; } .mediaFourPoint>div>h3{ font: 18px/36px "Microsoft YaHei"; padding-top: 8px;color: #6a81e5} .mediaFourPoint>div>p{ -webkit-transition: all 300ms;-o-transition: all 300ms;transition: all 300ms; font: 14px/16px "Microsoft YaHei"; padding-top: 3px; letter-spacing: 3px; color: #a99873;} .mediaFourPoint>div:hover>p{ opacity: 0; -ms-transform: translateY(-30px); transform: translateY(-30px); -webkit-transform: translateY(-30px)} .dataInfo{ width: 1176px; margin: 60px auto 0; background-color: rgba(0,0,0,0.1); height: 454px;} .dataInfo h2{ font-size: 20px; line-height: 30px; color: #d8b76f; text-align: center; padding-top:50px; } .dataInfo>div{ width: 150px; height: 150px; border: solid 1px #706958; margin: 156px auto 0; position: relative;border-radius: 50%;} .dataInfo>div>em{ width:134px; height: 134px; background:url("../images/wxic.png") no-repeat #a29060 center; top:8px; left: 8px; position:absolute; border-radius: 50%; } .dataInfo>div span{ position: absolute; left: 50%; top: 50px; height: 0; width: 0;} .dataInfo>div i.i1{ display: block; background: url("../images/qm1.png") no-repeat; height: 82px; width: 82px;position: absolute; left: -144px; top: -120px; } .dataInfo>div i.i2{ display: block; background: url("../images/qm2.png") no-repeat; height: 93px; width: 82px;position: absolute;left: -41px; top: -160px; } .dataInfo>div i.i3{ display: block; background: url("../images/qm3.png") no-repeat; height: 82px; width: 82px;position: absolute;right:-144px; top: -120px; } .threePoint{ width: 1176px; margin: 0 auto; padding: 50px 0 20px; } .threePoint>div{ width:392px; height: 228px; float: left; position: relative;overflow: hidden;} .threePoint>div>img{-o-transition: all 300ms;transition: all 300ms;-webkit-transition: all 300ms; width:392px; height: 228px; position: absolute; left: 0; top: 0; } .threePoint>div>div{ -o-transition: all 300ms; transition: all 300ms;-webkit-transition: all 300ms; width: 80px; height: 80px;margin: 44px auto 40px; position: relative; } .threePoint>div>div>i,.threePoint>div>div>em{-o-transition: all 300ms;transition: all 300ms;-webkit-transition: all 300ms; background-image: url("../images/dic.png"); background-repeat: no-repeat; width: 80px; height: 80px; display: block; position: absolute;left: 0; top: 0;} .threePoint>div>div>em{ opacity: 0;} .threePoint>div>h2{display: block; text-align: center; font-size: 22px; color: #fff; position: relative;-o-transition: all 300ms;transition: all 300ms;-webkit-transition: all 300ms; } .threePoint>div>p{ letter-spacing: .1em; -o-transition: all 300ms; transition: all 300ms;-webkit-transition: all 300ms; color: #d8b76f; position: absolute; -ms-transform:translateY(100%); transform:translateY(100%);-webkit-transform:translateY(100%); bottom: 0; left: 0; height: 72px; background: #000; display: block; width: 260px; padding: 22px 66px 0; font-size: 16px; line-height: 21px;} .threePoint>div:hover>img{ -ms-transform: translateY(-10%); transform: translateY(-10%);-webkit-transform: translateY(-10%);} .threePoint>div:hover>div{ -ms-transform: translateY(-20%); transform: translateY(-20%);-webkit-transform: translateY(-20%);} .threePoint>div:hover>div>em{ opacity: 1;} .threePoint>div:hover>div>i{ opacity: 0;} .threePoint>div:hover>h2{opacity: 0;} .threePoint>div:hover>p{ -ms-transform:translateY(0); transform:translateY(0);-webkit-transform:translateY(0); } .mediaBox{ position: relative;} .mediaBox .caseTitle h2,.mediaBox .caseTitle h3{ color: #ffe4a8; } .tB1{ width: 100%; background:url("../images/b1.jpg") no-repeat center; height: 510px; position: absolute; left: 0; top: 0; } .dataBox{} /*.dataBox .caseTitle h2,.dataBox .caseTitle h3{ color:#ffe4a8; }*/ .moreCase{ color: #be9c50; margin: 0 auto; font-size: 20px; display: block; width: 150px; line-height: 38px;text-align: center; } .slide{ width: 1240px; height: 760px; padding-bottom: 40px; margin:20px auto 0; position: relative; overflow: hidden; } .slide li{ width: 100%; height: 760px; position: absolute; left: 0; top: 0;} .slide li .txt h2{ font-size:22px; line-height:64px; text-align: center; } .slide li .txt p{ font-size:20px; line-height:34px; width: 890px; margin: 0 auto; } .slide li .img{text-align: center;} .ctrlBtn{ width: 1400px; margin: 0 auto; height: 0; position: relative; } .ctrlBtn>div{-o-transition: all 200ms;transition: all 200ms;-webkit-transition: all 200ms; width: 64px; height: 64px; position: absolute; cursor: pointer; top: 428px; background:url("../images/nextico.png") no-repeat;} .ctrlBtn>div.prevBtn{background-position: left top; left: 0;} .ctrlBtn>div.nextBtn{background-position: right bottom; right: 0;} .ctrlBtn>div.prevBtn:hover{background-position: right top;} .ctrlBtn>div.nextBtn:hover{background-position: left bottom;} .logoList ul{ width: 1176px; margin: 44px auto 60px;} .logoList li:nth-of-type(1){ border: solid 1px #be9c50;} .logoList li{ width: 140px; height:106px; background-position: center; background-repeat: no-repeat; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: inline-block; *display: inline; zoom:1; } .logoList li>div,.logoList li>i{-o-transition: 500ms all;transition: 500ms all;-webkit-transition: 500ms all; display: block; position: absolute; left: 0; top: 0; width: 147px; height:106px; background-position: center; background-repeat: no-repeat; } .logoList li>i{ opacity: 1;filter: hue-rotate(35deg) brightness(158%) saturate(119%);-webkit-filter: hue-rotate(35deg) brightness(158%) saturate(119%);} .logoList li>div{ opacity: 0;} .logoList li:hover>i{ opacity: 0; } .logoList li:hover>div{ opacity: 1; } .footer{ background: url("../images/footerBg.png") no-repeat #000 center; background-size: cover !important; height: 268px;} /*.footer .warp{width: 900px;}*/ .codeBox{ margin-top: 56px; } .codeBox .code{ width: 132px; margin-right:70px;float: left; } .codeBox .code img{ width: 132px; height: 132px;} .codeBox .code p{ text-align: center; font-size: 16px; color:#be9c50; line-height: 40px; } .footInfo h3{ letter-spacing: 0 !important; margin-top: 56px; font-size:60px; line-height: 80px;font-weight: bold; color: #be9c50; } .fastClick{ font-size:16px; line-height: 20px; color: #be9c50; margin-top: 15px; } .fastClick span{margin: 0 15px;} .fastClick a{ font-size:16px; line-height: 20px; color: #be9c50; } .footInfo p{ font-size:16px;letter-spacing: 0 !important; line-height: 20px; color: #be9c50; margin-top: 10px; } .lineBox{border-left: solid 1px white;height: 100px;display: inline-block;width: 1px;margin-left: 56px;} .languageBox{margin: 56px;display: inline-block;} .languageBox li{font-size: 18px;letter-spacing: 3px;color: white;height: 50px;line-height: 56px;padding: 0 15px;} .languageBox li:hover{background: rgba(0,0,0,.3);cursor: pointer;} .caseType{ padding-top: 20px; } .caseType .warp{ position: relative; } .caseTypeNav li{ float: left; position: relative;margin-right: 20px; } .caseTypeNav li>a{ overflow: hidden; cursor: pointer; padding-right: 30px; display: block; height: 57px; font: 16px/57px "Microsoft YaHei"; color: #765816;} .caseTypeNav li>a>i{ display: block; float: left; background-image: url("../images/typeIc.png"); width: 20px; height: 17px; margin:20px 5px 0 0; } .caseTypeNav li>a:after{ -webkit-transition: all 300ms;-o-transition: all 300ms;transition: all 300ms; background: url("../images/sj.png") no-repeat; width: 9px; height: 4px; position: absolute; right: 10px; top:27px; content: ""; display: block; -webkit-animation: all 300s;animation: all 300s; } .caseTypeNav li>a:before{ opacity:0;-webkit-transition: all 300ms;-o-transition: all 300ms;transition: all 300ms; display: block; content: ""; background: #d7c49b; width: 100%; height: 4px; position: absolute; left: 0; bottom: -4px; } .typeIc1{background-position: 0 0;} .typeIc2{background-position: -20px 0;} .typeIc3{background-position: -40px 0;} .caseTypeNav li>a>i.typeIc4{ display: block; float: left; background: url("../images/hot.gif"); width: 22px; height: 22px; margin:17px 5px 0 0; } .caseTypeNav li>div{ display:none;-webkit-transition: all 300ms;-o-transition: all 300ms;transition: all 300ms; -webkit-box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15); z-index:20;position: absolute; top:57px; padding: 20px; width: 260px; background: #f7f7f7; } .caseTypeNav li>div>a{-webkit-transition: all 300ms;-o-transition: all 300ms;transition: all 300ms; cursor: pointer; text-indent: 15px; width: 130px; display: block; height: 36px; float: left; font: 16px/36px "Microsoft YaHei"; color: #94783E; } .caseTypeNav li>div>a:hover{ background: #94783E; color: #fff;} .caseTypeNav li:hover>div{ display: block; } .caseTypeNav li:hover>a:after{ -ms-transform: rotate(180deg); transform: rotate(180deg);-webkit-transform: rotate(180deg)} .caseTypeNav li:hover>a:before{ bottom: 0;opacity:1; } .caseType{overflow: inherit;} .searchBox{ position: absolute; right: 0; top:12px;} .searchBox input{ -webkit-transition: all 300ms;-o-transition: all 300ms;transition: all 300ms; color: #e5e5e5; width:105px; height: 22px; padding: 5px 34px 5px 8px; font-size: 14px; display: block; border: solid 1px #D4D4D4 ;outline: none; } .searchBox input::-webkit-input-placeholder{-webkit-transition: all 300ms;-o-transition: all 300ms;transition: all 300ms; color: #D4D4D4;} .searchBox input:focus{border-color: #cdaf6d; width: 150px; color: #cdaf6d; } .searchBox input:focus::-webkit-input-placeholder{ color: #cdaf6d; } .searchBox .searchBtn{ cursor: pointer; width: 32px; height: 32px; position: absolute; right: 0; top: 0;} .searchBox .searchBtn i{-webkit-transition: all 300ms;-o-transition: all 300ms;transition: all 300ms; opacity: 1 ;width: 100%; height: 100%;background: url("../images/search.png") no-repeat center; position: absolute; left: 0; top: 0;} .searchBox .searchBtn em{-webkit-transition: all 300ms;-o-transition: all 300ms;transition: all 300ms;opacity: 0; width: 100%; height: 100%;background: url("../images/search2.png") no-repeat center; position: absolute; left: 0; top: 0;} .searchBox input:focus~ .searchBtn i{ opacity: 0;} .searchBox input:focus~ .searchBtn em{ opacity: 1;} .casePageList{ width: 1233px; margin-left: -53px; padding-top: 30px;} .casePageList li{ width: 358px; height: 304px; margin-left: 53px; float: left; overflow: hidden; position: relative;} .casePageList li .bgC{ overflow: hidden; width: 358px; height:222px; position: relative; } .casePageList li .img{-o-transition: all 300ms;transition: all 300ms; -webkit-transition: all 300ms; background-image: url("../images/phoneBg.png"); width: 210px; height: 160px; padding-top: 40px; margin: 22px auto 0; } .casePageList li .img>div{width: 182px; height: 160px; margin:0 auto; background-position: top center; background-size: cover; } .casePageList li>a>p{ position: relative; z-index: 9; width: 358px; height:82px; font:18px/36px "Microsoft YaHei"; padding-top: 5px; color: #be9c50; text-align: left; text-indent: 30px;} .casePageList li .tx{-o-transition: all 300ms;transition: all 300ms; -webkit-transition: all 300ms; -ms-transform: translateY(100%); transform: translateY(100%);-webkit-transform: translateY(100%); opacity: 0;background: rgba(0,0,0,.7);position: absolute; left: 0; bottom: 0; width: 358px; height: 46px; } .casePageList li .tx>p{font:14px/46px "Microsoft YaHei"; color: #fff; padding:0 30px;height: 46px; -o-text-overflow:ellipsis; text-overflow:ellipsis;overflow:hidden; width: 298px;word-break:keep-all;/* 不换行 */ white-space:nowrap; } .casePageList li>a>p>i{-webkit-transition: all 300ms;-o-transition: all 300ms;transition: all 300ms; width:100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0;} .casePageList li>a>p>span{-webkit-transition: all 300ms;-o-transition: all 300ms;transition: all 300ms; width:100%; padding-top:10px;position: absolute; left: 0; top: 0; } .casePageList li:hover .tx{ opacity: 1;-ms-transform: translateY(0);transform: translateY(0);-webkit-transform: translateY(0); } .casePageList li:hover .img{-ms-transform: scale(1.1);transform: scale(1.1);-webkit-transform: scale(1.1);} .casePageList li:hover>a>p>i{ opacity: 1;} .casePageList li:hover>a>p{ color: #fff;} .casePageDiv .warp{ position: relative;} .casePageDiv .prevBtn,.casePageDiv .nextBtn{-o-transition: all 200ms;transition: all 200ms;-webkit-transition: all 200ms; width: 64px; cursor: pointer; height: 64px; position: absolute; top: 50%; margin-top: -32px; background:url("../images/nextico.png") no-repeat;} .casePageDiv .prevBtn{background-position: left top; left: -90px;} .casePageDiv .nextBtn{background-position: right bottom; right: -90px;} .casePageDiv .prevBtn:hover{background-position: right top;} .casePageDiv .nextBtn:hover{background-position: left bottom;} .pageNum{ margin-bottom: 25px;} .pageNum>div{text-align: center; border-bottom: solid 1px #eaded3; padding: 25px 0;} .pageNum a{ cursor: pointer; float: left; display: inline-block; text-align: center; min-width:40px; height: 40px; background-color: #eaeaea; color:#b1b1b1; font: 20px/40px "arial"; margin-left: 6px; } .pageNum a:hover{ background-color:#be9c50; color:#fff; } .pageNum a.primary-bg{ background-color:#be9c50; color: #ffe4a8; } .breadCrumbs{ height:70px; font-size:16px; padding-top: 20px; line-height: 50px; color: #765816; } .breadCrumbs a{ color:#c7ac70; } .detailInfo{ padding: 70px 0 80px; } .detailInfo .img{ width: 175px; height: 175px; background-position: center; background-size: cover;} .detailInfo .txt{ margin-left:26px; width: 554px;} .detailInfo .txt h1{ font-size:16px; line-height: 1.2em; } .detailInfo .txt h2{ font-size:30px; line-height: 1.8em; padding-bottom:20px; } .detailInfo .txt p{ font-size:16px; line-height: 1.8em; } .promote i{ cursor:pointer;position: relative;float: left; font-style: normal; border: solid 1px #a98536; line-height: 24px; padding: 0 5px; margin-right: 8px;} .promote em{ -o-transition: all 300ms; transition: all 300ms; -webkit-transition: all 300ms; opacity: 0; display: none; top: -160px; position: absolute; width: 156px; height:110px; border-radius: 10px; background: #be9c50; color: #fff; font: 14px/1.5em "Microsoft YaHei"; padding: 20px; } .promote em:after{display: block; width: 12px; height: 12px;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg); position: absolute; bottom: -6px; content: "";background: #be9c50; } .promote i:hover{ background: #a98536; color: #fff;} .promote i:hover em{display: block;opacity: 1; } .promote span{float: left;} .promote .sms em{ left: 0;} .promote .sms em:after{ left: 29%;} .promote .em em{ left: -37px;} .promote .em em:after{ left: 95px;} .promote .media em{ right: 0;} .promote .media em:after{ left: 144px;} .detailInfo .btn a{ width:140px; height: 46px; -o-transition: all 300ms; transition: all 300ms; -webkit-transition: all 300ms; border: 2px solid #a98536; display: block; margin-top: 26px; text-align: center; font-size: 20px; color: #765816; line-height: 46px; } .detailInfo .btn a:hover{ background: #a98536; color: #fff;} .detailInfo .code{ width:148px; border: solid 1px #a98536; } .detailInfo .code img{ width: 148px; height: 148px;} .detailInfo .code p{ width: 148px; height: 25px; text-align: center;font-size: 16px; line-height: 25px; color: #fff; background: #a98536; } .detailBox{ background: #f7f7f7} .detailBox .title{ background: url("../images/detialBg.png") no-repeat; text-align: center; width: 160px; height: 71px; margin: 0 auto 20px;} .detailBox .title h5{ font-size:24px; color: #765816; line-height: 36px; } .detailBox .title h6{ font-size:14px; color: #d0ba89; line-height: 16px; } .detailBox .img ul{ text-align: center;} .detailBox .img ul li{ display: inline-block; *display: inline; zoom:1; width:282px; height:446px; padding: 4px 4px 23px; background:#423f3d; margin: 0 34px; } .detailBox .img ul li img{width:282px; height:446px; display: block;} .detailBox .img{ padding-bottom:60px;border-bottom: 1px solid #ffffff;position: relative; } .detailBox .img:after{ content: ""; display: block; position: absolute; width: 100%; height: 1px; background:#efe4ca; bottom: 0;left: 0; } .detailBox .info{ width:1144px; margin: 60px auto; } .detailBox .info h5{ font-size:22px; line-height: 50px;padding-top: 10px; } .detailBox .info p{ font-size:18px; line-height: 28px; } .detailBox .info p a{ color: #765816; text-decoration: underline; margin-right: 10px;} .detailBox .info p a:hover{ color: #be9c50; } .poinyOne{background: #f7f7f7; padding: 110px 0 100px;} .poinyOne ul{ text-align: center; } .poinyOne ul li{ display: inline-block; *display: inline; zoom:1; margin: 0 23px;} .poinyOne ul li .img{ width:220px; height: 220px; position: relative; border: solid 7px #f1f1f1; overflow: hidden; border-radius: 100%;} .poinyOne ul li .img>div{ width:100%; height:100%; -o-transition: 1s all; transition: 1s all; -webkit-transition: 1s all;border-radius: 100%; overflow: hidden; background-position: center; background-repeat: no-repeat; position: absolute; left: 0; top: 0; } .poinyOne ul li:hover .img>div:nth-of-type(1){ -o-transition: 20s all ease-out; transition: 20s all ease-out; -webkit-transition: 20s all ease-out; -ms-transform: rotate(360deg); transform: rotate(360deg);-webkit-transform: rotate(360deg)} .poinyOne ul li p{ font-size: 20px; line-height: 2em;} .poinyTwo { padding: 110px 0 100px;} .poinyTwo .title{ text-align: center;} .poinyTwo .title h2{ font-size: 32px; line-height: 32px; padding-bottom: 20px;} .poinyTwo .title p{ font-size: 18px; line-height: 26px; padding-bottom: 20px;} .poinyTwo .fourPoint{ margin-top: 15px; border: none; } .bannerBox{ width: 100%; background-position: top center; background-repeat: no-repeat;background-attachment: fixed;} .banner2{height: 490px; text-align: center; background-image: url("../images/joinUs/banner2.jpg"); } .banner2 h2{ font-size: 32px; line-height: 40px; padding: 145px 0 15px; color: #ffe4a8;} .banner2 h3{ font-size: 16px; line-height: 16px; padding: 0 0 20px;color: #ffe4a8;} .banner2 p{ font-size: 12px; line-height: 28px;color: #ffe4a8;} .poinyThree{ padding: 130px 0; text-align: center; } .poinyThree .title h3{ font-size: 32px; line-height: 40px; } .poinyThree .title h4{ font-size: 18px; line-height: 40px; } .process1{ padding:40px 0 60px; border-bottom: solid 1px #ffe4a8; } .process1 li{ display: inline-block; *display:inline; zoom:1; margin: 0 1px; } .process1 li{ font-size: 18px; line-height: 32px;} .process2{ padding:40px 0 0; } .process2 li{ display: inline-block; *display:inline; zoom:1; margin: 0 40px; } .process2 li{ font-size: 18px; line-height: 32px;} .banner3{ height:448px; background-image: url("../images/joinUs/banner3.jpg"); text-align: center; } .banner3 h2{ font-size: 32px; line-height: 40px; padding: 145px 0 40px; color: #ffe4a8;} .banner3 h3{ font-size: 26px; line-height: 26px; padding: 0 0 20px;color: #ffe4a8;} .caseType ul li:nth-of-type(11),.caseType ul li:nth-of-type(21){ margin-right: 100px; } .caseType ul li:nth-of-type(12),.caseType ul li:nth-of-type(22){ margin-left: 96px; } ::-webkit-scrollbar { width: 6px; height: 6px } body #wtEmct_submitBtn input{ -o-transition: all 300ms; transition: all 300ms; -webkit-transition: all 300ms; background-color: #f7f7f7 ; border: solid 1px #be9c50; color:#be9c50; } body #wtEmct_submitBtn input:hover{ background-color: #be9c50 ; border: solid 1px #be9c50; color: #fff;} body #wtEmct_blueLight,body #wtEmct_commtSub{ border-color: #be9c50 ;} body #wtEmct_commentArea .font_tip{ color:#be9c50 } ::-webkit-scrollbar-track-piece { background-color: #e3e3e3 } ::-webkit-scrollbar-thumb { background-color: #464545 !important } .hide{ display:none!important; } .spreadDiv{ text-align: center;} .spreadDiv img{ margin:62px 100px 0; } .spreadPoint{ padding:50px 0 120px; height: 220px; position: relative; text-align: center;} .spreadPoint em{ width: 100%; height:1px; background: #ececec; position: absolute; left: 0; top: 91px; } .spreadPoint>div{ width:295px; float: left; position: relative } .spreadPoint>div>h2{font:18px/36px "Microsoft YaHei"; height: 36px; text-align: center; color: #765816;} .spreadPoint>div>i{display: block; background: url("../images/ice5.png") no-repeat; width: 12px ; height: 12px; margin: 0 auto 10px;} .spreadPoint>div>p{ width: 153px; height: 160px; margin: 0 auto;} .spreadPoint>div>p>span{font: 14px/19px "Microsoft YaHei"; color: #fff; width: 70%; display: block; margin: 0 auto; padding-top: 40px;} .threePoint2{ padding: 80px 0; text-align: center;} .threePoint2 li{ width: 380px; margin: 0 20px; display: inline-block;} .threePoint2 li h2{ font-size: 24px; line-height: 2em;color: #6a81e5} .threePoint2 li h4{ height:332px; } .threePoint2 li i.iic1{ width:350px; height: 350px; display: block; margin: 0 auto; background-image: url("../images/111.png");background-position: center; background-size: contain; } .threePoint2 li i.iic2{ width:350px; height: 350px; display: block; margin: 0 auto; background-image: url("../images/222.png");background-position:center; background-size: contain;} .threePoint2 li i.iic3{ width:350px; height: 350px; display: block; margin: 0 auto; background-image: url("../images/333.png");background-position: center; background-size: contain;} @keyframes iic1 { 0%{ background-position: 0 0;} 3.4%{ background-position: -323px 0; } 6.8%{ background-position: -646px 0; } 10.2%{ background-position: -969px 0; } 13.6%{ background-position: -1292px 0; } 17%{ background-position: -1615px 0; } 20.4%{ background-position: -1938px 0; } 23.8%{ background-position: -2261px 0; } 27.2%{ background-position: -2584px 0; } 30.6%{ background-position: -2907px 0; } 34%{ background-position: -3230px 0; } 37.4%{ background-position: -3553px 0; } 40.8%{ background-position: -3876px 0; } 44.2%{ background-position: -4199px 0; } 47.6%{ background-position: -4522px 0; } 51%{ background-position: -4845px 0; } 54.4%{ background-position: -5168px 0; } 57.8%{ background-position: -5491px 0; } 61.2%{ background-position: -5814px 0; } 64.6%{background-position: -6137px 0; } 68%{ background-position: -6460px 0; } 71.4%{ background-position: -6783px 0; } 74.8%{ background-position: -7106px 0; } 78.2%{ background-position: -7429px 0; } 81.6%{ background-position: -7752px 0; } 85%{ background-position: -8075px 0; } 88.4%{ background-position: -8398px 0; } 91.8%{ background-position: -8721px 0; } 95.2%{ background-position: -9044px 0; } 100%{ background-position: -9367px 0; } } @-webkit-keyframes iic1 { 0%{ background-position: 0 0;} 3.4%{ background-position: -323px 0; } 6.8%{ background-position: -646px 0; } 10.2%{ background-position: -969px 0; } 13.6%{ background-position: -1292px 0; } 17%{ background-position: -1615px 0; } 20.4%{ background-position: -1938px 0; } 23.8%{ background-position: -2261px 0; } 27.2%{ background-position: -2584px 0; } 30.6%{ background-position: -2907px 0; } 34%{ background-position: -3230px 0; } 37.4%{ background-position: -3553px 0; } 40.8%{ background-position: -3876px 0; } 44.2%{ background-position: -4199px 0; } 47.6%{ background-position: -4522px 0; } 51%{ background-position: -4845px 0; } 54.4%{ background-position: -5168px 0; } 57.8%{ background-position: -5491px 0; } 61.2%{ background-position: -5814px 0; } 64.6%{background-position: -6137px 0; } 68%{ background-position: -6460px 0; } 71.4%{ background-position: -6783px 0; } 74.8%{ background-position: -7106px 0; } 78.2%{ background-position: -7429px 0; } 81.6%{ background-position: -7752px 0; } 85%{ background-position: -8075px 0; } 88.4%{ background-position: -8398px 0; } 91.8%{ background-position: -8721px 0; } 95.2%{ background-position: -9044px 0; } 100%{ background-position: -9367px 0; } } @keyframes iic2 { 0%{ background-position: 0 0;} 3.4%{ background-position: -307px 0; } 6.8%{ background-position: -614px 0; } 10.2%{ background-position: -921px 0; } 13.6%{ background-position: -1228px 0; } 17%{ background-position: -1535px 0; } 20.4%{ background-position: -1842px 0; } 23.8%{ background-position: -2149px 0; } 27.2%{ background-position: -2456px 0; } 30.6%{ background-position: -2763px 0; } 34%{ background-position: -3070px 0; } 37.4%{ background-position: -3377px 0; } 40.8%{ background-position: -3684px 0; } 44.2%{ background-position: -3991px 0; } 47.6%{ background-position: -4298px 0; } 51%{ background-position: -4605px 0; } 54.4%{ background-position: -4912px 0; } 57.8%{ background-position: -5219px 0; } 61.2%{ background-position: -5526px 0; } 64.6%{background-position: -5833px 0; } 68%{ background-position: -6140px 0; } 71.4%{ background-position: -6447px 0; } 74.8%{ background-position: -6754px 0; } 78.2%{ background-position: -7061px 0; } 81.6%{ background-position: -7368px 0; } 85%{ background-position: -7675px 0; } 88.4%{ background-position: -7982px 0; } 91.8%{ background-position: -8289px 0; } 95.2%{ background-position: -8596px 0; } 100%{ background-position: -8903px 0; } } @-webkit-keyframes iic2 { 0%{ background-position: 0 0;} 3.4%{ background-position: -307px 0; } 6.8%{ background-position: -614px 0; } 10.2%{ background-position: -921px 0; } 13.6%{ background-position: -1228px 0; } 17%{ background-position: -1535px 0; } 20.4%{ background-position: -1842px 0; } 23.8%{ background-position: -2149px 0; } 27.2%{ background-position: -2456px 0; } 30.6%{ background-position: -2763px 0; } 34%{ background-position: -3070px 0; } 37.4%{ background-position: -3377px 0; } 40.8%{ background-position: -3684px 0; } 44.2%{ background-position: -3991px 0; } 47.6%{ background-position: -4298px 0; } 51%{ background-position: -4605px 0; } 54.4%{ background-position: -4912px 0; } 57.8%{ background-position: -5219px 0; } 61.2%{ background-position: -5526px 0; } 64.6%{background-position: -5833px 0; } 68%{ background-position: -6140px 0; } 71.4%{ background-position: -6447px 0; } 74.8%{ background-position: -6754px 0; } 78.2%{ background-position: -7061px 0; } 81.6%{ background-position: -7368px 0; } 85%{ background-position: -7675px 0; } 88.4%{ background-position: -7982px 0; } 91.8%{ background-position: -8289px 0; } 95.2%{ background-position: -8596px 0; } 100%{ background-position: -8903px 0; } } @keyframes iic3 { 0%{ background-position: 0 0;} 3.4%{ background-position: -314px 0; } 6.8%{ background-position: -628px 0; } 10.2%{ background-position: -942px 0; } 13.6%{ background-position: -1256px 0; } 17%{ background-position: -1570px 0; } 20.4%{ background-position: -1884px 0; } 23.8%{ background-position: -2198px 0; } 27.2%{ background-position: -2512px 0; } 30.6%{ background-position: -2826px 0; } 34%{ background-position: -3140px 0; } 37.4%{ background-position: -3454px 0; } 40.8%{ background-position: -3768px 0; } 44.2%{ background-position: -4082px 0; } 47.6%{ background-position: -4396px 0; } 51%{ background-position: -4710px 0; } 54.4%{ background-position: -5024px 0; } 57.8%{ background-position: -5338px 0; } 61.2%{ background-position: -5652px 0; } 64.6%{background-position: -5966px 0; } 68%{ background-position: -6280px 0; } 71.4%{ background-position: -6594px 0; } 78.2%{ background-position: -6908px 0; } 81.6%{ background-position: -7222px 0; } 85%{ background-position: -7536px 0; } 88.4%{ background-position: -7850px 0; } 91.8%{ background-position: -8164px 0; } 95.2%{ background-position: -8478px 0; } 100%{ background-position: -8792px 0; } } @-webkit-keyframes iic3 { 0%{ background-position: 0 0;} 3.4%{ background-position: -314px 0; } 6.8%{ background-position: -628px 0; } 10.2%{ background-position: -942px 0; } 13.6%{ background-position: -1256px 0; } 17%{ background-position: -1570px 0; } 20.4%{ background-position: -1884px 0; } 23.8%{ background-position: -2198px 0; } 27.2%{ background-position: -2512px 0; } 30.6%{ background-position: -2826px 0; } 34%{ background-position: -3140px 0; } 37.4%{ background-position: -3454px 0; } 40.8%{ background-position: -3768px 0; } 44.2%{ background-position: -4082px 0; } 47.6%{ background-position: -4396px 0; } 51%{ background-position: -4710px 0; } 54.4%{ background-position: -5024px 0; } 57.8%{ background-position: -5338px 0; } 61.2%{ background-position: -5652px 0; } 64.6%{background-position: -5966px 0; } 68%{ background-position: -6280px 0; } 71.4%{ background-position: -6594px 0; } 78.2%{ background-position: -6908px 0; } 81.6%{ background-position: -7222px 0; } 85%{ background-position: -7536px 0; } 88.4%{ background-position: -7850px 0; } 91.8%{ background-position: -8164px 0; } 95.2%{ background-position: -8478px 0; } 100%{ background-position: -8792px 0; } } /*.threePoint2 li:hover i.iic1{animation: iic1 1s steps(1);}*/ /*.threePoint2 li:hover i.iic2{animation: iic2 1s steps(1);}*/ /*.threePoint2 li:hover i.iic3{animation: iic3 1s steps(1);}*/ .lxb-container{ background: url("../images/phoneMsgBg.png") no-repeat!important;; width: 227px!important;; height: 163px !important;} .custom-text{ display: none !important;} .lxb-hide-btn{ background: url("../images/close.png") no-repeat !important;; width: 17px !important;; height: 17px !important;; position: absolute !important;; left: 200px !important;; top: 13px !important;;} .lxb-cb-input{ border-radius: 5px !important; padding: 0 5px !important; width: 204px!important; height: 38px!important; left: 6px !important;; top: 62px !important; text-align: center !important;} .lxb-cb-input-btn{ background-color:#be9c50 !important; border-radius: 5px !important; color: #fff !important; width: 150px !important; height: 30px !important; top: 117px !important; left:38px !important; } .lxb-container{ background-color: rgb(190, 156, 80) !important; } .qiao-icon-head{ background: url("../images/msgBg.png") no-repeat !important;; width: 39px !important;; height: 163px !important;} .lxb-close-btn{ background: url("../images/phoneMs.png") no-repeat !important;; width: 36px !important;; height: 163px !important;} #qiao-invite-wrap .qiao-invite-reject{ padding: 6px!important; margin-bottom: 10px!important; margin-right: 50px!important; } #qiao-invite-wrap .qiao-invite-accept{ padding: 6px!important; margin-bottom: 10px!important; margin-right: 20px!important; background: #BE9C50!important; } .header{background-color:rgba(0,0,0,0.6); } .header>.warp{ width: calc( 100% - 80px); display: -webkit-box; display: -ms-flexbox; display: flex; white-space: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* .logoBox>div{ background: url("../images1/logo1.png") no-repeat center; background-size: 100% 100%; } */ .logoBox>p{ color:#fff; } .nav{ display: -webkit-box; display: -ms-flexbox; display: flex; } .nav>a:hover, .nav>i:hover, .nav>i>em>a:hover, .nav>a.activate{ color: #fff; background: rgba(0,0,0,.3); } .nav>a, .nav>i{ color:#fff; } .nav>i>em>a{ border-top:1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.7); color: #fff; } .nav>i>em>a:hover{ background: rgba(255,255,255,.8); color: #333333 } .nav>i:after{ border-top: solid 7px #fff; } body .nav .loginBtn{ border: solid 1px #fff; color: #fff; } .header.small{ background-color:rgba(0,0,0,0.6); } .slideBtn li.on{ background-color: #4e4f57; } .logoBox>p{ display: none; } body .nav .loginBtn:hover{ color: #d6cdcd; border: solid 1px #d6cdcd; } .nav>i:hover:after{ border-bottom: solid 7px #fff; } .fourPoint{ border-bottom: 1px solid #da251d; } .fourPoint dl:nth-child(1) dt i{ background-image: url("../images1/01.png"); } .fourPoint dl:nth-child(2) dt i{ background-image: url("../images1/02.png"); } .fourPoint dl:nth-child(3) dt i{ background-image: url("../images1/03.png"); } .fourPoint dl:nth-child(4) dt i{ background-image: url("../images1/04.png"); } .fourPoint .wow1 h3{ color: #6a81e5!important; } .fourPoint .wow2 h3{ color: #6a81e5!important; } .fourPoint .wow3 h3{ color: #6a81e5; } .fourPoint .wow4 h3{ color: #6a81e5; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, a, th, td{ color: #4e4f57; } .moreCase{ color: #4e4f57; } .spreadPoint>div>h2{ color: #4e4f57; } .mediaBox .caseTitle h2, .mediaBox .caseTitle h3{ color: #6a81e5; } .mediaBox .caseTitle h3{color: #4e4f57} .tB1{ background: url("../images1/b1.jpg") no-repeat center; } .mediaFourPoint>div>p{ color:#4e4f57; } .threePoint>div>p{ background:#141f27; color: #fff; } .mediaFourPoint>div:nth-child(1)>i{ background-image:url("../images1/mic1.png"); } .mediaFourPoint>div:nth-child(2)>i{ background-image:url("../images1/mic2.png"); } .mediaFourPoint>div:nth-child(3)>i{ background-image:url("../images1/mic3.png"); } .mediaFourPoint>div:nth-child(4)>i{ background-image:url("../images1/mic4.png"); } .threePoint>div>div>i, .threePoint>div>div>em{ background-image: url("../images1/dic.png"); } .logoList li:nth-of-type(1){ border: solid 1px #be9c50; } .footInfo h3{ color: #fff; } .fastClick,.footInfo p,.fastClick a{ color: #fff; } .codeBox .code p{ color: #fff; } .footer{ background: url("../images1/footerBg.png") no-repeat center; } .bImg{ background: url("../images1/shopBanner.jpg")center #010201; } .bTx{ background: url("../images1/shopBannerText.png") no-repeat center bottom; } .caseTypeNav li>a>.typeIc1{ background-image: url("../images1/typeIc.png"); background-repeat: no-repeat; } .caseTypeNav li>a>.typeIc2{ background-image: url("../images1/typeIc1.png"); background-repeat: no-repeat; background-position:0 0; } .caseTypeNav li>a>.typeIc3{ background-image: url("../images1/typeIc2.png"); background-repeat: no-repeat; background-position:0 0; } .caseTypeNav li>a>i.typeIc4{ background: url("../images1/hot.gif"); } .caseTypeNav li>div>a{ color: #BF1A20; } .caseTypeNav li>div>a:hover{ background: #BF1A20; } .caseTypeNav li>a:before{ background: #BF1A20; } .casePageList li>a>p{ color:#BF1A20; } .pageNum a.primary-bg{ background-color: #BF1A20; } .pageNum a:hover{ background-color: #BF1A20; } .fourPoint dl dd h3{ color: #BF1A20; } .fourPoint dl dd p{ color: #4d504f; } .fourPoint dl:hover dd h3{ color: #6a81e5; } .banner2 { height: 490px; text-align: center; background-image: url("../images1/banner2.png"); } .banner2 h2,.banner2 h3,.banner2 p,.banner3 h2,.banner3 h3{ color: #fff; } .banner3 { height: 448px; background-image: url("../images1/banner3.png"); text-align: center; } #nav li.current a { background-color: #BF1A20; } #nav li a{ background-color: #e0464c; } #jedatebox .jedateyear,#jedatebox .jedatemonth{ color: #fff; } .loginBox{ top: 500px;width: 1920px;padding-left: 4.5%; padding-left: 668px;text-align: left;margin-left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%); /*padding-left: 13.5%;*/ } .bannerList li .bannerBg{ /*background-position-y: 50px;*/ } .MllistDataBox .Mlcontent .Mltitle >div:nth-of-type(2) a{color: #6a81e5} .MllistDataBox .Mlcontent .Mltitle >div:nth-of-type(3) a{color: #6a81e5} .swiper-pagination-bullet-active{background: #6a81e5 !important}