body { color:#666; font-size:12px; font-family:arial, "microsoft yahei"; text-size-adjust:none; -webkit-text-size-adjust:none; position:relative; overflow:hidden; min-width: 1365px;}
html { text-size-adjust:none; -webkit-text-size-adjust:none; overflow-x:hidden; overflow-y:scroll; width:100%;}
form,div,body,img,p,img,dl,dt,dd,h2,h1,h3,h4,h5,h6{ margin:0px; padding:0px; border:0; }
a:link{ color:#666; text-decoration:none;}
a:visited{ color:#666; text-decoration:none;}
a:hover{ color:#666; text-decoration:none;}
a:focus { -moz-outline-style: none; }
a:active{ outline:none; text-decoration:none;}
a {transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s;}
em,i{ font-style:normal; }
ul,li{ list-style:none; margin:0; padding:0;}
input,textarea,select{ color:#666; margin:0; padding:0; font-size:12px; vertical-align:middle; -webkit-appearance:none; appearance:none; -moz-appearance:none; resize:none; -ms-appearance:none; font-family: arial, "microsofy yahei";}
select::-ms-expand { display: none; }   
input:focus,textarea:focus{ outline:none;}
select:focus {outline:none;}
input[type="submit"], input[type="button"] {border:0; cursor:pointer;}
/*删除火狐下按钮默认样式*/
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner{
	border:none; padding:0;
}
/*浮动*/
.clearboth:after{ display:block; clear:both; content:""; overflow:hidden; height:0; }
.clearboth{ *zoom:1;}   
.fl{ float:left;}
.fr{ float:right;}

@font-face{
    font-family:"modernsans";
    src:url(/uploads/image/fmodernsans/modernsans.ttf) format('truetype'),
         format('woff');
    font-weight:normal;
}


/*德必虹口运动loft*/
.header {width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding:0 4%; height:100px; transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s; position:fixed; left:0; top:0; z-index:99999; min-width: 1366px;}
.header .logo {display:block; position:absolute; left:4%; top:50%; height:25px; margin-top:-12.5px; background:url(/uploads/image/ihongkou/logo.png) no-repeat; background-size:100% 100%; width:245px;}
.header .nav {position:absolute; right:4%; top:50%; height:42px; margin-top:-21px;}
.header .nav ul {float:left;}
.header .nav ul li {float:left; position:relative; line-height:42px;}
.header .nav ul li a {display:block; position:relative; padding:0 24px; z-index:99; font-size:16px; font-family:"pingfang sc", "microsoft yahei"; color:#333;}
.skew-bg {display:block; width:100%; height:100%; position:absolute; top:0; left:0; transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s; background:#00a8f4; transform:skew(-45deg); -webkit-transform:skew(-45deg); -moz-transform:skew(-45deg);}
.header .nav ul li .skew-bg {left:50%; width:0; transform:skew(0); -webkit-transform:skew(0); -moz-transform:skew(0); opacity:0;}
.header .nav ul li.active .skew-bg {left:0; width:100%; transform:skew(-45deg); -webkit-transform:skew(-45deg); -moz-transform:skew(-45deg); opacity:1;}
.header .nav ul li.active a, .header .nav ul li.active a:hover {color:#fff;}
.header .nav ul li a:hover {color:#00a8f4;}
.header .icons {float:left; font-size:0; margin-left:24px;}
.header .icons a {display:inline-block; position:relative; width:40px; height:40px; border:1px solid rgba(234,234,200,.2); border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; margin-left:20px;}
.header .icons a:first-child {margin-left:0;}
.header .icons a.wechat {background:rgba(129,129,129,.2) url(/uploads/image/ihongkou/icon-wechat.png) no-repeat center;}
.header .icons a.home {background:rgba(129,129,129,.2) url(/uploads/image/ihongkou/icon-home.png) no-repeat center;}
.header .icons a.wechat:hover {background:rgba(255,255,255,.2) url(/uploads/image/ihongkou/icon-wechat.png) no-repeat center;}
.header .icons a.home:hover {background:rgba(255,255,255,.2) url(/uploads/image/ihongkou/icon-home.png) no-repeat center;}
.header .icons a .code {display:block; position:absolute; width:164px; height:164px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; background:#fff; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding:6px; top:48px; left:50%; margin-left:-82px; transition:all .4s; -webkit-transition:all .4s; -moz-transition:all .4s; transform-origin:center top; transform:scale(0); -webkit-transform:scale(0); -moz-transform:scale(0); opacity:0;}
.header .icons a .code img {display:block; width:100%; height:100%;}
.header .icons a .code:before {content:""; display:block; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:6px solid #fff; position:absolute; top:-6px; left:50%; margin-left:-8px;}
.header .icons a.wechat:hover .code {opacity:1; transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}
.header.active {background:#009ee6; position:fixed; height:80px; box-shadow:0 4px 10px 0 rgba(0,54,78,.28);}
.header.active .logo {background:url(/uploads/image/ihongkou/logo-white.png) no-repeat; background-size:100% 100%;}
.header.active .nav ul li .skew-bg {background:#fff;}
.header.active .nav ul li a {color:#fff;}
.header.active .nav ul li.active a, .header.active .nav ul li.active a:hover {color:#009ee6;}
.header.active .nav ul li a:hover {color:#fff;}

.hongkou-cont .bx-wrapper {margin:auto;}
.hongkou-cont .bx-wrapper .bx-viewport {left:0; border:0; box-shadow:none; background:none;}

.hongkou-cont .banner {width:100%; background:url(/uploads/image/ihongkou/banner.jpg) no-repeat center top; background-size:cover; position:relative;}
.hongkou-cont .banner img {display: none; width: 100%;}
.hongkou-cont .banner .phone-num {position:absolute; height:60px; line-height:60px; bottom:0; right:20.3%;}
.hongkou-cont .banner .phone-num div {padding:0 94px; color:#fff; background:url(/uploads/image/ihongkou/icon-phone.png) no-repeat 70px center; position:relative; z-index:99; font-size:16px;}
.hongkou-cont .banner .phone-num div span {display:block; float:left;}
.hongkou-cont .banner .phone-num div em {font-size:30px; display:block; float:left; margin-left:12px; font-family:"modernsans";}
.hongkou-cont .project {padding:192px 0 292px; position:relative; overflow:hidden;}
.hongkou-cont .intro .title {display:block; margin-bottom:24px;}
.hongkou-cont .intro p {font-size:14px; line-height:22px;}
.hongkou-cont .intro p   p {padding-top:20px;}
.hongkou-cont .intro p em {color:#45afed;}
.hongkou-cont .project .intro {float:left; width:30.2%; margin-left:18.5%; padding-top:58px;}
.hongkou-cont .project .slider {float:right; width:50.36%; position:relative;}
.hongkou-cont .project .slider .skew-bg {width:8.3%; background:#19adef; left:auto; right:-8.3%; top:16.4%;}
.hongkou-cont .project .slider li, .hongkou-cont .project .slider li img {display:block; width:100%;}
.hongkou-cont .slider .bx-wrapper .bx-controls-direction a {width:70px; height:50px; top:auto; margin-top:0; bottom:0;}
.hongkou-cont .slider .bx-wrapper .bx-controls-direction a.bx-prev {left:-46px;}
.hongkou-cont .slider .bx-wrapper .bx-controls-direction a.bx-next {right:auto; left:24px;}
.hongkou-cont .slider .bx-wrapper .bx-controls-direction a:before, .hongkou-cont .slider .bx-wrapper .bx-controls-direction a:after {content:""; display:block; position:absolute;}
.hongkou-cont .slider .bx-wrapper .bx-controls-direction a:before {width:100%; height:100%; position:absolute; top:0; left:0; transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s; background:#e5e5e5; transform:skew(-45deg); -webkit-transform:skew(-45deg); -moz-transform:skew(-45deg); transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s;}
.hongkou-cont .slider .bx-wrapper .bx-controls-direction a.bx-next:before {border-left:1px solid #b8b8b8;}
.hongkou-cont .slider .bx-wrapper .bx-controls-direction a:hover:before {background:#df2433;}
.hongkou-cont .slider .bx-wrapper .bx-controls-direction a:after {width:13px; height:23px; top:50%; left:50%; margin-top:-11.5px; margin-left:-6.5px; background:url(/uploads/image/ihongkou/arrow.png) no-repeat;}
.hongkou-cont .slider .bx-wrapper .bx-controls-direction a.bx-next:after {background-position:right bottom;}
.hongkou-cont .slider .bx-wrapper .bx-controls-direction a.bx-prev:hover:after {background-position:-13px 0;}
.hongkou-cont .slider .bx-wrapper .bx-controls-direction a.bx-next:hover:after {background-position:0 -23px;}

.hongkou-cont .location {position:relative; margin-bottom:70px;}
.hongkou-cont .location .location-img {float:left; position:relative; width:50.26%;}
.hongkou-cont .location .location-img .skew-bg {left:-38%; width:90%; top:18%; height:126%;}
.hongkou-cont .location .location-img img {display:block; position:relative; z-index:99; width:100%;}
.hongkou-cont .location .intro {float:right; width:40.1%; margin-top:10%;}
.hongkou-cont .location .intro p {width:505px; margin:34px 0 25px -12.34%;}
.hongkou-cont .location .intro ul {margin-left:-30.1%;}
.hongkou-cont .location .intro li {float:left; text-align:center; margin-left:62px; font-size:14px; color:#333;}
.hongkou-cont .location .intro li:first-child {margin-left:0;}
.hongkou-cont .location .intro li img {display:block; margin:auto;}
.hongkou-cont .location .intro li em {display:block; font-weight:bold; padding:6px 0 2px;}
.hongkou-cont .location .intro li span {display:block;}
.hongkou-cont .location .intro .map {display:block; width:154.2%; margin-left:-85%; padding-top:58px; position: relative;}
.hongkou-cont .location .intro .map img {display: block; width: 100%; transition: all .6s; -webkit-transition: all .6s; -moz-transition: all .6s;}
.hongkou-cont .location .intro .map:hover img {transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2);}
.hongkou-cont .location .loc {display:block; position:absolute; width:22.86%; right:0; top:74%;}

.hongkou-cont .rental {position:relative; padding-top:150px;}
.hongkou-cont .rental .rental-img {display:block; width:57%; position:absolute; left:0; top:150px;}
.hongkou-cont .rental .rental-info {margin-left:28.4%; position:relative; z-index:99;}
.hongkou-cont .rental .rental-info.rental2 {display: none;}

.hongkou-cont .features {position:relative; padding:11% 0 200px;}
.hongkou-cont .features .features-container {position:relative; width:62.4%; margin:0 auto;}
.hongkou-cont .features .slider {position:relative; z-index:99;}
.hongkou-cont .features .title {position:absolute; left:0; top:0;}
.hongkou-cont .features .slider li > img {display:block; width:100%; height:100%;}
.hongkou-cont .features .slider li .intro {position:absolute; left:0; bottom:0; width:100%; height:60%; background:url(/uploads/image/ihongkou/shadow.png) no-repeat center bottom; background-size:100%; transform:none;}
.hongkou-cont .features .slider li .intro em, .hongkou-cont .features .slider li .intro p {position:relative; z-index:99;}
.hongkou-cont .features .slider .bx-wrapper .bx-controls-direction a.bx-prev {left:61.1%;}
.hongkou-cont .features .slider .bx-wrapper .bx-controls-direction a.bx-next {left:67%;}
.hongkou-cont .features .slider li .intro div {position:absolute; color:#fff; width:100%; left:0; bottom:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding:0 40% 24px 13.4%; font-size:16px; line-height:30px;}
.hongkou-cont .features .slider li .intro div img {display:block; position:absolute; left:8.3%; top:5px;}
.hongkou-cont .skew-bg.skew-border {background:none; border:1px solid #dce6f3;}
.hongkou-cont .features .skew-bg {left:82.63%; top:-43.56%; width:51.4%;}

.hongkou-cont .history {position:relative; margin-bottom:300px; padding-top:74px;}
.hongkou-cont .history .history-container {position:relative; margin:auto; width:1204px; height:726px; background:url(/uploads/image/ihongkou/history.png) no-repeat; background-size:100% 100%;}
.hongkou-cont .history .title {position:absolute; left:0; top:0;}
.hongkou-cont .history .milestone {display:block; width:100%;}
.hongkou-cont .history .history-img {display:block; width:38.7%; position:absolute; right:0; bottom:-160px;}

.hongkou-cont .service {position:relative; padding-bottom:100px; padding-top:50px;}
.hongkou-cont .service .service-title {float:left; width:47%; text-align:right;}
.hongkou-cont .service .service-title .title {display:inline-block; padding-bottom:34px;}
.hongkou-cont .service .service-title .service-img {display:block; width:97.3%;}
.hongkou-cont .service .intro {width:31%; float:left; margin-left:3.33%;}
.hongkou-cont .service .intro h1 {font-size:18px; color:#393832; padding:12px 0 10px;}
.hongkou-cont .service .intro .service-list {text-align:center; padding:26px 0 40px;}
.hongkou-cont .service .intro .service-list li {float:left; width:33.33%;}
.hongkou-cont .service .intro .service-list li img {display:block; margin:0 auto 8px;}
.hongkou-cont .service .intro .service-list li span {display:block; font-size:14px; color:#393832;}
.hongkou-cont .service .intro .member {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; border:1px dashed rgba(101,99,86,.4); position:relative; padding:25px 25px 28px; margin-bottom:130px;}
.hongkou-cont .service .intro .member:before {content:""; display:block; width:19px; height:12px; background:url(/uploads/image/ihongkou/triangle.jpg) no-repeat; background-size:100% 100%; position:absolute; left:16.66%; margin-left:-9.5px; top:-12px;}
.hongkou-cont .service .intro .member em {display:block; padding-left:24px; font-size:14px; font-weight:bold; margin-bottom:10px; background:url(/uploads/image/ihongkou/icon-v.png) no-repeat left center;}
.hongkou-cont .service .intro .member .member-list div {float:left;}
.hongkou-cont .service .intro .member .member-list div:nth-child(2) {float:right;}
.hongkou-cont .service .intro .member .member-list div span {display:block; font-size:14px; line-height:28px;}

.hongkou-cont .footer {position:relative;}
.hongkou-cont .footer .logo {display:block; margin-bottom:46px;}
.hongkou-cont .footer li {font-size:16px; padding-left:30px; line-height:23px; position:relative;}
.hongkou-cont .footer li.phone {background:url(/uploads/image/ihongkou/contact-phone.png) no-repeat 6px center; margin-bottom:14px;}
.hongkou-cont .footer li.address {background:url(/uploads/image/ihongkou/contact-loc.png) no-repeat 6px center; display:inline-block;}
.hongkou-cont .footer li em {font-size:23px; color:#df2433; font-family:"modernsans"; vertical-align:bottom;}
.hongkou-cont .footer li a {display:block; position:absolute; right:-54px; width:25px; height:25px; top:50%; margin-top:-12.5px;}
.hongkou-cont .footer .code {position:absolute; top:50%; right:0; width:174px; height:174px; border:4px solid #f1f1f1; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding:12px; margin-top:-87px;}
.hongkou-cont .footer .code img {display:block; width:100%; height:100%;}

.hongkou-cont .fixed {position:fixed; right:9%; bottom:50px; display:none; z-index:9999;}
.hongkou-cont .fixed div span {display:block; text-align:center; font-family:"microsoft yahei"; transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s;}
.hongkou-cont .fixed > div {cursor:pointer;}
.hongkou-cont .fixed > div div {transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s; margin:0 auto 4px;}
.hongkou-cont .fixed > div:hover span {color:#25bcff;}
.hongkou-cont .fixed .backtop {margin-bottom:26px;}
.hongkou-cont .fixed .backtop div {width:27px; height:61px; background:url(/uploads/image/ihongkou/icon-rocket.png) no-repeat;}
.hongkou-cont .fixed .contact div {width:34px; height:29px; background:url(/uploads/image/ihongkou/icon-contact.png) no-repeat;}
.hongkou-cont .fixed .backtop:hover div {background:url(/uploads/image/ihongkou/icon-rocket-blue.png) no-repeat;}
.hongkou-cont .fixed .contact:hover div {background:url(/uploads/image/ihongkou/icon-contact-blue.png) no-repeat;}

.popbox {position:fixed; width:100%; left:0; bottom:-100%; opacity:0; transition:all .4s; -webkit-transition:all .4s; -moz-transition:all .4s; background:rgba(40,40,40,.9); padding:62px 0; z-index:9999;}
.popbox.active {bottom:0; opacity:1;}
.popbox .closebox {position:absolute; background:rgba(40,40,40,.9); height:30px; width:220px; right:0; top:-30px;}
.popbox .closebox .close {cursor:pointer; position:absolute; left:-30px; top:0; width:94px; height:58px;}
.popbox .closebox .close img, .alertbox .close {display:block; position:absolute; width:20px; height:20px; top:50%; left:50%; margin-top:-10px; margin-left:-10px; transition:all .4s; -webkit-transition:all .4s; -moz-transition:all .4s; z-index:99;}
.popbox .closebox .close:hover img, .alertbox .close:hover {transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);}
.popbox .closebox .close .skew-bg {background:#3c3c3b; border:1px solid #5e5e5e;}
.popbox .box {width:1200px; margin:auto; position:relative;}
.popbox .box .title {display:block; position:absolute; left:0; top:50%; margin-top:-20px;}
.popbox .box div {float:right; position:relative;}
.popbox .box div ul {float:left;}
.popbox .box div .submit {float:right; width:190px; height:50px; line-height:50px; text-align:center; background:#e60012; color:#fff; font-size:18px; margin-left:26px;}
.popbox .box div .submit:hover, .alertbox .box .confirm-btn:hover {background:#ff1426;}
.popbox .box div li {float:left; position:relative; margin-left:18px; width:248px; height:50px; background:rgba(21,21,21,.5);} 
.popbox .box div li:first-child {margin-left:0;}
.popbox .box div li .tip {display:block; position:absolute; left:0; bottom:100%; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; color:#fff; padding:5px 10px; background:#e60012; transition:all .4s; -webkit-transition:all .4s; -moz-transition:all .4s; transform-origin:20px bottom; transform:scale(0); -webkit-transform:scale(0); -moz-transform:scale(0); opacity:0; max-width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.popbox .box div li .tip:before {content:""; display:block; position:absolute; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:6px solid #e60012; bottom:-6px; left:20px;}
.popbox .box div li.alert .tip {transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); opacity:1;}
.popbox .box div li input {display:block; width:100%; height:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; border:0; background:none; font-size:14px; color:#fff; padding:0 10px; border:1px solid #4e4e4e; transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s;}
.popbox .box div li.alert input {border:1px solid #e60012;}

.alertbox {position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,.7); z-index:100000; display:none;}
.alertbox .box {position:absolute; background:#fff; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; width:440px; height:200px; top:50%; left:50%; margin-left:-220px; margin-top:-100px;}
.alertbox .box .close {display:block; position:absolute; top:20px; right:20px; left:auto; cursor:pointer;}
.alertbox .box span {display:block; font-size:20px; color:#333; text-align:center; padding:60px 0 50px;}
.alertbox .box .confirm-btn {display:block; width:180px; height:45px; line-height:45px; text-align:center; font-size:16px; color:#fff; margin:auto; background:#e60012;}

.basketball {display:block; position:fixed; left:0; bottom:0; width:124px; height:100%; background:url(/uploads/image/ihongkou/ball.png) no-repeat; background-position:100% 0; animation:parabola 4s linear .2s forwards;}
.badminton {display:block; position:fixed; bottom:-82px; right:-82px; z-index:999;}

/*抛物线*/
.target, .element {position: fixed; border-radius: 20px;}        
.target {width: 150px; height: 150px; background-color: #f0f3f9; left: 102%; top: 30%; cursor: move;}        
.target:active {box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .35);}    
.element {width: 150px; height: 150px; left: -200px; bottom: -200px; font-size: 12px; pointer-events: none; position: fixed; background-image:url(/uploads/image/ihongkou/ball.png); opacity:0; z-index:9999;} 
.element:before {content: attr(data-center); color: #666; position: absolute; left: 100%; top: -10px; display:none;}       
.target:before {content: attr(data-center); width: 100%; line-height: 40px; color: #666; position: absolute; text-align: center;}
.x {position: absolute; left: 0; top: 516px; right: 0; border-top: 1px solid #000;}        
.x:before, .y:before {font-size: 40px; font-style: italic; font-family: arial, helvetica, sans-serif; position: absolute;}
.x:before {content: 'x'; top: 0; right: 5px;}
.y {position: absolute; left: 976px; top: 0; bottom: 0; border-left: 1px solid #000;}
.y:before {content: 'y'; left: 5px; top: 0;}
.article {display: inline-block; margin-left: 1em; color: #34538b;}
.element.active {animation: sprite-animate-go 4.4s steps(12)infinite; -moz-animation: sprite-animate-go 4.4s steps(12)infinite; -webkit-animation: sprite-animate-go 4.4s steps(12)infinite; opacity:1;}
.element.elementbad {background-image:url(/uploads/image/ihongkou/badminton.png); left:auto; right:-200px;}
.target.targetbad {width: 150px; height: 150px; left:auto; right:102%; top:66%;}
.element.elementbad.active {animation: badminton-animate-go 4.4s steps(12)infinite; -moz-animation: badminton-animate-go 4.4s steps(12)infinite; -webkit-animation: badminton-animate-go 4.4s steps(12)infinite; opacity:1;}


@-webkit-keyframes fadeinup {
  from {opacity: 0; -webkit-transform: translate3d(0, 80%, 0); transform: translate3d(0, 80%, 0);}
  to {opacity: 1; -webkit-transform: none; transform: none;}
}

@keyframes fadeinup {
  from {opacity: 0; -webkit-transform: translate3d(0, 80%, 0); transform: translate3d(0, 80%, 0);}
  to {opacity: 1; -webkit-transform: none; transform: none;}
}

@-webkit-keyframes fadeinup20 {
  from {opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0);}
  to {opacity: 1; -webkit-transform: none; transform: none;}
}

@keyframes fadeinup20 {
  from {opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0);}
  to {opacity: 1; -webkit-transform: none; transform: none;}
}

/*篮球*/
@-webkit-keyframes sprite-animate-go {
from { background-position:0 0 }
to { background-position: -1800px 0 }
}
@-moz-keyframes sprite-animate-go {
from { background-position:0 0 }
to { background-position: -1800px 0 }
}
@-o-keyframes sprite-animate-go {
from { background-position:0 0 }
to { background-position: -1800px 0 }
}
@keyframes sprite-animate-go {
from { background-position:0 0 }
to { background-position: -1800px 0 }
}

/*羽毛球*/
@-webkit-keyframes badminton-animate-go {
from { background-position:-1800px 0 }
to { background-position:0 0 }
}
@-moz-keyframes badminton-animate-go {
from { background-position:-1800px 0 }
to { background-position:0 0 }
}
@-o-keyframes badminton-animate-go {
from { background-position:-1800px 0 }
to { background-position:0 0 }
}
@keyframes badminton-animate-go {
from { background-position:-1800px 0 }
to { background-position:0 0 }
}

@media screen and (min-width:1366px){    
    /*动画*/
    .hongkou-cont .project .intro, .hongkou-cont .project .slider, .hongkou-cont .location .location-img, .hongkou-cont .location .location-img img, .hongkou-cont .location .intro .title, .hongkou-cont .location .intro p, .hongkou-cont .location .intro ul, .hongkou-cont .location .intro .map, .hongkou-cont .rental .rental-img, .hongkou-cont .rental .rental-info, .hongkou-cont .features, .hongkou-cont .history .history-container, .hongkou-cont .history .history-img, .hongkou-cont .service .service-title, .hongkou-cont .service .intro h1, .hongkou-cont .service .intro p, .hongkou-cont .service .intro .service-list, .hongkou-cont .service .intro .member, .hongkou-cont .footer {opacity:0;}
    .hongkou-cont .project.active .slider {animation:fadeinup .6s ease-out .2s forwards; -webkit-animation:fadeinup .6s ease-out .2s forwards;}
    .hongkou-cont .project.active .intro {animation:fadeinup .6s ease-out .4s forwards; -webkit-animation:fadeinup .6s ease-out .4s forwards;}
    .hongkou-cont .location.active .location-img {animation:fadeinup20 .6s ease-out .2s forwards; -webkit-animation:fadeinup20 .6s ease-out .2s forwards;}
    .hongkou-cont .location.active .location-img img {animation:fadeinup20 .4s ease-in .4s forwards; -webkit-animation:fadeinup20 .4s ease-in .4s forwards;}
    .hongkou-cont .location.active .intro .title {animation:fadeinup .4s linear .6s forwards; -webkit-animation:fadeinup .4s linear .6s forwards;}
    .hongkou-cont .location.active .intro p {animation:fadeinup .4s linear .8s forwards; -webkit-animation:fadeinup .4s linear .8s forwards;}
    .hongkou-cont .location.active .intro ul {animation:fadeinup .4s linear 1s forwards; -webkit-animation:fadeinup .4s linear 1s forwards;}
    .hongkou-cont .location.active .intro .map {animation:fadeinup .4s linear 1.2s forwards; -webkit-animation:fadeinup .4s linear 1.2s forwards;}
    .hongkou-cont .rental.active .rental-img {animation:fadeinup20 .4s ease-out .2s forwards; -webkit-animation:fadeinup20 .4s ease-out .2s forwards;}
    .hongkou-cont .rental.active  .rental-info {animation:fadeinup20 .4s ease-out .4s forwards; -webkit-animation:fadeinup20 .4s ease-out .4s forwards;}
    .hongkou-cont .features.active {animation:fadeinup20 .4s ease-out .2s forwards; -webkit-animation:fadeinup20 .4s ease-out .2s forwards;}
    .hongkou-cont .history.active .history-container {animation:fadeinup20 .4s ease-out .2s forwards; -webkit-animation:fadeinup20 .4s ease-out .2s forwards;}
    .hongkou-cont .history.active .history-img {animation:fadeinup20 .4s ease-out .4s forwards; -webkit-animation:fadeinup20 .4s ease-out .4s forwards;}
    .hongkou-cont .service.active .service-title {animation:fadeinup20 .4s ease-out .2s forwards; -webkit-animation:fadeinup20 .4s ease-out .2s forwards;}
    .hongkou-cont .service.active .intro h1, .hongkou-cont .service.active .intro p {animation:fadeinup .6s ease-out .4s forwards;}
    .hongkou-cont .service.active .intro .service-list {animation:fadeinup .6s ease-out .6s forwards; -webkit-animation:fadeinup .6s ease-out .6s forwards;}
    .hongkou-cont .service.active .intro .member {animation:fadeinup .6s ease-out .8s forwards; -webkit-animation:fadeinup .6s ease-out .8s forwards;}
    .hongkou-cont .service.active .footer {animation:fadeinup .6s ease-out 1s forwards; -webkit-animation:fadeinup .6s ease-out 1s forwards;}
}
@media screen and (max-width:1920px){
    .element.active {animation: sprite-animate-go 3s steps(12)infinite; -moz-animation: sprite-animate-go 3s steps(12)infinite; -webkit-animation: sprite-animate-go 3s steps(12)infinite;}
    .element.elementbad.active {animation: badminton-animate-go 3s steps(12)infinite; -moz-animation: badminton-animate-go 3s steps(12)infinite; -webkit-animation: badminton-animate-go 3s steps(12)infinite;}
    .target {top: 22.6%;}  
    .target.targetbad {top:54%;}      
    .hongkou-cont .location .location-img {width:40%;}
    .hongkou-cont .location .intro {margin-top:5%; margin-right:3%;}
    .hongkou-cont .location .intro .map {width:134%;}
    .hongkou-cont .features .skew-bg {top:-30%;}
    .hongkou-cont .rental .rental-info {margin-left:18.55%;}
}
@media screen and (max-width:1600px){
    .hongkou-cont .project .intro {padding-top:25px; margin-left:13.5%;}
    .hongkou-cont .features .slider .bx-wrapper .bx-controls-direction a.bx-prev {left:60.1%;}
    .hongkou-cont .project {padding:165px 0 250px;}
    .hongkou-cont .rental {padding-top:40px;}
    .hongkou-cont .rental .rental-img {top:40px;}
    .hongkou-cont .service .intro .member {margin-bottom:52px;}
    .hongkou-cont .location .intro p {margin:25px 0 25px -12.34%;}
    .hongkou-cont .location .intro .map {padding-top:30px;}
    .hongkou-cont .location .intro {margin-top:3.2%;}
    .hongkou-cont .history {padding-top:122px;}
    .hongkou-cont .service .intro h1 {padding:0 0 10px 0;}
    .element.elementbad.active {animation: badminton-animate-go 2.4s steps(12)infinite; -moz-animation: badminton-animate-go 2.4s steps(12)infinite; -webkit-animation: badminton-animate-go 2.4s steps(12)infinite;}
    .hongkou-cont .history .history-container {width:1204px; height:460px; background:url(/uploads/image/ihongkou/history1.png) no-repeat; background-size:100% 100%;}
    .hongkou-cont .history .history-img {bottom:-240px;}
    .hongkou-cont .rental .rental-info {margin-left:10.72%;}
    .hongkou-cont .features .slider li .intro div {padding: 0 40% 24px 16%;}
}
@media screen and (max-width:1440px){
    .hongkou-cont .banner .phone-num {height:55px; line-height:55px;}
    .hongkou-cont .project .intro {padding-top:10px; margin-left:10%; width:33.2%;}
    .hongkou-cont .service .intro {width:35%;}
    .hongkou-cont .features .slider .bx-wrapper .bx-controls-direction a.bx-prev {left:60%;} 
    .hongkou-cont .fixed {right:3%;}
    .hongkou-cont .features {padding-top:12%; margin-bottom:30px;}
    .hongkou-cont .history {padding-top:120px;}
    .hongkou-cont .rental {padding:74px 0 100px;}
    .hongkou-cont .rental .rental-img {top:74px;}
    .hongkou-cont .rental .rental-info {margin-left:9.7%;}
    .hongkou-cont .location .intro {margin-top:4.2%;}
    .element.elementbad.active {animation: badminton-animate-go 2.4s steps(12)infinite; -moz-animation: badminton-animate-go 2.4s steps(12)infinite; -webkit-animation: badminton-animate-go 2.4s steps(12)infinite;}
    .hongkou-cont .rental .rental-info.rental2 {display: block;}
    .hongkou-cont .rental .rental-info.rental1 {display: none;}
    .hongkou-cont .location {margin-bottom: 130px;}
    .hongkou-cont .features .slider li .intro div img {left: 9%;}
}
@media screen and (max-width:1366px){
    .hongkou-cont .banner .phone-num {height:55px; line-height:55px;}
    .hongkou-cont .banner .phone-num div {padding:0 70px; background:url(/uploads/image/ihongkou/icon-phone.png) no-repeat 46px center;}
    .hongkou-cont .project .intro {padding-top:0; margin-left:8%;}
    .hongkou-cont .location .intro .map {padding-top:25px;}
    .hongkou-cont .location .intro p {margin:20px 0 20px -12.34%;}
    .hongkou-cont .history {padding-top:66px;}
    .hongkou-cont .features {margin-bottom:60px; padding-top:9%;}
    .hongkou-cont .project {padding:120px 0 170px;}
    .hongkou-cont .rental {padding:24px 0 100px;}
    .hongkou-cont .rental .rental-img {top:24px;}
    .hongkou-cont .location .intro li {margin-left:45px;}
    .hongkou-cont .location .intro {margin-top:1.2%;}
    .hongkou-cont .service .intro .member {margin-bottom:30px; padding:10px 20px;}
    .hongkou-cont .service {padding-top:58px;}
    .element.elementbad.active {animation: badminton-animate-go 2.2s steps(12)infinite; -moz-animation: badminton-animate-go 2.2s steps(12)infinite; -webkit-animation: badminton-animate-go 2.2s steps(12)infinite;}
    .hongkou-cont .service .intro {width:40%; margin-top:-25px;}
    .hongkou-cont .service .intro .service-list {padding:16px 0 20px;}
    .hongkou-cont .footer .logo {margin-bottom:32px;}
    .hongkou-cont .footer .code {width:144px; height:144px; margin-top:-72px;}
    .hongkou-cont .rental .rental-info {margin-left:7.2%;}
    .hongkou-cont .features .slider li .intro div img {left: 11%;}
    .hongkou-cont .features .slider li .intro div {padding: 0 40% 24px 18%;}
}
@media screen and (max-width:1365px){
    .hongkou-cont .banner {background: none; height: auto !important;}
    .hongkou-cont .banner img {display: block;}
    .hongkou-cont .banner .phone-num {display: none;}
    .hongkou-cont .rental .rental-info {margin-left:7.66%;}
}