html {
overflow: hidden;
}
body,
.section {
min-width: 1190px;
}
.wimg img{ width: 100%; max-width: 1920px; margin:0 auto; overflow:hidden;}
.yuyuebtn {display: inline-block; height: 30px; line-height: 30px; background-color: #3B8AC2; padding: 0 8px; color: #FFFFFF; margin-top: 20px; border-radius: 5px;}
.yuyuebtn:hover {text-decoration: none; color: #FFFFFF;}
.footbox-container {width: 100%; background: #E9E9E9;}
.shop:hover div, .products:hover div, .about:hover div, .dynamic:hover div, .super:hover div, .brand:hover div, .resource:hover div {display: block !important;}
.wrap {
width: 1190px;
margin: 0 auto;
}
.feature-nav {
height: 393px;
background: url(../images/shangcheng/bg2.jpg);
margin-top: -5px;
}
.feature-nav ul {
padding: 80px 0 80px 30px;
}
.feature-nav ul li {
float: left;
margin-right: 32px;
background: url(../images/shangcheng/functions_background.png) no-repeat;
padding-top: 188px;
width: 196px;
text-align: center;
font-size: 18px;
line-height: 1.2em;
position: relative;
cursor: pointer;
}
.feature-nav ul .feature-1 {
color: #C86E24;
}
.feature-nav ul i {
background: url(../images/shangcheng/function_icons.png) no-repeat;
position: absolute;
display: block;
}
.feature-nav ul .feature-1 i {
width: 70px;
height: 70px;
background-position: 2px 0;
top: 55px;
left: 64px;
}
.feature-nav ul .feature-2 {
color: #4a8e18;
}
.feature-nav ul .feature-2 i {
width: 70px;
height: 70px;
background-position: -63px 0;
top: 55px;
left: 64px;
}
.feature-nav ul .feature-3 {
color: #724CA4;
}
.feature-nav ul .feature-3 i {
width: 70px;
height: 70px;
background-position: -140px 0;
top: 58px;
left: 64px;
}
.feature-nav ul .feature-4 {
color: #2B73A6;
}
.feature-nav ul .feature-4 i {
width: 70px;
height: 70px;
background-position: -223px 0;
top: 56px;
left: 65px;
}
.feature-nav ul .feature-5 {
color: #D84C81;
}
.feature-nav ul .feature-5 i {
width: 70px;
height: 70px;
background-position: -295px 0;
top: 56px;
left: 66px;
}
.section-wrap {
height: 100%;
width: 100%;
min-width: 1190px;
position: absolute;
}
.section {
background-size: cover;
background-position: 50% 50%;
height: 100%;
width: 100%;
overflow: hidden;
}
.section-feature1 {
background-image: url(../images/shangcheng/b2.jpg);
}
.section-feature2 {
background-size: auto;
background-color: #F6F3EC;
}
.section-feature3 {
background-color: #9375BB;
}
.section-feature4 {
background: #F6F3EC;
}
.section-feature5 {
background-color: #F6659C;
}
.section-feature1 .wrap {
background: url(../images/shangcheng/yuyuetmall.png) 246px 0 no-repeat;
height: 600px;
position: relative;
top: 50%;
margin-top: -290px;
margin-bottom: 290px;
}
.section-feature2 .wrap {
background: url(../images/shangcheng/taiketmall.png) 480px 50px no-repeat;
height: 660px;
position: relative;
top: 50%;
margin: -290px auto 260px auto;
}
.section-feature3 .wrap {
background: url(../images/shangcheng/yuyuejd.png) 249px 0 no-repeat;
height: 590px;
position: relative;
top: 50%;
margin: -280px auto 0 auto;
}
.section-feature4 .wrap {
background: url(../images/shangcheng/yizhanshi.png) 550px 30px no-repeat;
height: 620px;
position: relative;
top: 50%;
margin-top: -295px;
}
.section-feature5 .wrap {
background: url(../images/shangcheng/wenhua.png) 200px 40px no-repeat;
position: relative;
top: 50%;
height: 690px;
margin-top: -345px;
}
.section-feature1 .section-feature-detail {
top: 80px;
text-align: right;
margin-right: 177px;
}
.section-feature2 .section-feature-detail {
color: #609A50;
left: 171px;
padding-top: 10px;
}
.section-feature3 .section-feature-detail {
text-align: right;
margin-right: 177px;
padding-top: 63px;
}
.section-feature4 .section-feature-detail {
margin-left: 180px;
padding-top: 30px;
color: #2678b2;
}
.section-feature5 .section-feature-detail {
text-left: right;
margin-left: 570px;
color: #FFFFFF;
padding-top: 70px;
position: relative;
}
.section-feature-detail {
color: #fff;
position: relative;
}
.section-feature-title {
font-size: 60px;
line-height: 1.2em;
}
.section-feature-title span {
font-size: 56px;
}
.section-feature-title i {
display:inline-block;
background: url(../images/shangcheng/detail-icons.png) 0 0 no-repeat;
width: 55px;
height: 55px;
position: relative;
top: 8px;
left: -10px;
}
.section-feature2 .section-feature-title i {
display:inline-block;
background: url(../images/shangcheng/detail-icons.png) -50px 0 no-repeat;
width: 55px;
height: 55px;
position: relative;
top: 8px;
left: -10px;
}
.section-feature3 .section-feature-title i {
display:inline-block;
background: url(../images/shangcheng/detail-icons.png) -110px 0 no-repeat;
width: 80px;
height: 55px;
position: relative;
top: 8px;
left: -10px;
}
.section-feature2 .section-feature-title, .section-feature2 .section-feature-desc {
width: 353px;
text-align: right;
}
.section-feature4 .section-feature-title i {
background-position: 0 0;
width: 42px;
height: 38px;
margin-left: 25px;
position: relative;
top: -1px;
}
.section-feature5 .section-feature-title i {
background-position: 0 -377px;
width: 40px;
height: 45px;
position: relative;
top: 2px;
}
.section-feature-desc, .desc2 {
color: #96531f;
font-size: 24px;
line-height: 1.5em;
}
.section-feature2 .section-feature-desc, .section-feature2 .desc2 {
color: #609A50;
}
.section-feature3 .section-feature-desc, .section-feature3 .desc2 {
color: #564074;
}
.section-feature4 .section-feature-desc {
color: #2678b2;
}
.section-feature5 .section-feature-desc {
color: #933B5D;
margin-top: 25px;
}
.section-feature5 .section-feature-images {
position: absolute;
top: 350px;
}
.section-feature1 .section-feature-images, .section-feature2 .section-feature-images, .section-feature3 .section-feature-images {
padding: 15px;
background-color: #FFFFFF;
filter:alpha(Opacity=80);
-moz-opacity:0.5;
opacity: 0.5;
width: 197px;
height: 198px;
position: absolute;
z-index: 2;
}
.section-feature1 .erweima, .section-feature2 .erweima, .section-feature3 .erweima {
width: 197px;
height: 198px;
position: absolute;
z-index: 3;
}
.desc2 {
margin-top: 260px;
font-size: 16px;
padding: 0 92px;
}
.section-feature1 .erweima {
background: url("../images/shangcheng/yytmall.jpg") 0 0 no-repeat;
left: 740px;
top: 300px;
}
.section-feature2 .erweima {
background: url("../images/shangcheng/tktmall.jpg") 0 0 no-repeat;
left: 75px;
top: 310px;
}
.section-feature3 .erweima {
background: url("../images/shangcheng/yyjd.jpg") 0 0 no-repeat;
left: 740px;
top: 365px;
}
.section-feature1 .section-feature-images {
left: 725px;
top: 285px;
}
.section-feature2 .section-feature-images {
left: 60px;
top: 295px;
}
.section-feature3 .section-feature-images {
left: 725px;
top: 350px;
}
.section-feature4 .section-feature-images {
position: relative;
top: 35px;
margin-left: 180px;
}
.section-feature4 .section-feature-images .image1 {
background: url(../images/shangcheng/function4_img.png) 0 0 no-repeat;
width: 260px;
height: 260px;
position: absolute;
z-index: 2;
left: 20px;
}
.section-feature5 .section-feature-images .image1 {
background: url(../images/shangcheng/function5-img.png) 0 0 no-repeat;
width: 210px;
height: 220px;
position: absolute;
z-index: 2;
left: 228px;
}
.section-feature5 .section-feature-images .image2 {
background: url(../images/shangcheng/function5-img.png) 0 -224px no-repeat;
width: 210px;
height: 220px;
position: absolute;
z-index: 2;
}
.section-feature1 .section-feature-title i {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-animation-duration: .5s;
animation-duration: .5s;
}
@-webkit-keyframes sf4-image1 {
0% {
opacity: 0;
-webkit-transform: translateX(-150px);
transform: translateX(-150px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
@keyframes sf4-image1 {
0% {
opacity: 0;
transform: translateX(-150px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
.section-feature5 .animation .image1 {
-webkit-animation-name: sf4-image1;
animation-name: sf4-image1;
}
@-webkit-keyframes sf4-image2 {
0% {
opacity: 0;
-webkit-transform: translateX(150px);
transform: translateX(150px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
@keyframes sf4-image2 {
0% {
opacity: 0;
transform: translateX(150px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
.section-feature5 .animation .image2 {
-webkit-animation-name: sf4-image2;
animation-name: sf4-image2;
}

.animated {
-webkit-animation-duration: .8s;
-ms-animation-duration: .8s;
-moz-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-ms-animation-timing-function: ease;
animation-timing-function: ease;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-30px);
transform: translateX(-30px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
transform: translateX(0);
}
}
@-ms-keyframes fadeInLeft {
0% {
opacity: 0;
-ms-transform: translateX(-30px);
transform: translateX(-30px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-ms-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(30px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-ms-transform: translateY(30px);
transform: translateY(30px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes rotateIn {
0% {
opacity: 0;
-webkit-transform: rotateZ(-360deg);
transform: rotateZ(-360deg);
}
100% {
opacity: 1;
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
}
@keyframes rotateIn {
0% {
opacity: 0;
transform: rotateZ(-360deg);
}
100% {
opacity: 1;
transform: rotateZ(0deg);
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateScaleIn {
0% {
opacity: 0;
-webkit-transform: scale(0) rotateZ(-360deg);
transform: scale(0) rotateZ(-360deg);
}
100% {
opacity: 1;
-webkit-transform: scale(1) rotateZ(0deg);
transform: scale(1) rotateZ(0deg);
}
}
@keyframes rotateScaleIn {
0% {
opacity: 0;
transform: scale(0) rotateZ(-360deg);
}
100% {
opacity: 1;
transform: scale(1) rotateZ(0deg);
}
}
.rotateScaleIn {
-webkit-animation-name: rotateScaleIn;
animation-name: rotateScaleIn;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotateZ(0);
-ms-transform: rotateZ(0);
transform: rotateZ(0);
}
25% {
-webkit-transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}
75% {
-webkit-transform: rotateZ(30deg);
-ms-transform: rotateZ(30deg);
transform: rotateZ(30deg);
}
100% {
-webkit-transform: rotateZ(0);
-ms-transform: rotateZ(0);
transform: rotateZ(0);
}
}
@keyframes swing {
0% {
-ms-transform: rotateZ(0);
transform: rotateZ(0);
}
25% {
-ms-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}
75% {
-ms-transform: rotateZ(30deg);
transform: rotateZ(30deg);
}
100% {
-ms-transform: rotateZ(0);
transform: rotateZ(0);
}
}
.swing {
-webkit-animation-name: swing;
-webkit-animation-timing-function: ease-in-out;
animation-name: swing;
}
@-webkit-keyframes bounce-scale {
0% {
-webkit-transform: scale(0);
}
80% {
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes bounce-scale {
0% {
transform: scale(0);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

body {
font-family: Helvetica, Arial, 'Microsoft Yahei';
_height: 100%;
}
button {
font-family: inherit;
}
.section {
_height: 100% !important;
display: block;
_zoom: 1;
}
.navbar {
position: fixed;
_position: absolute;
bottom: 50px;
right: 50px;
z-index: 5;
}
.navbar ul {
*width: 50px;
}
.navbar li {
background: url(../images/shangcheng/nav.png) 0 -256px;
width: 20px;
height: 20px;
margin: 8px auto;
cursor: pointer;
}
.navbar li.current {
background-position: 0 -185px;
width: 20px;
height: 21px;
cursor: auto;
}
.navbar button {
background: url(../images/shangcheng/nav.png) 10px -93px;
width: 49px;
height: 55px;
border: none;
outline: none;
margin-top: 15px;
cursor: pointer;
}
.navbar button:hover {
background-position: 0 0;
width: 49px;
height: 55px;
}

.section-feature1 .yuyuebtn {
margin-right: 164px;
background-color: #c76c00;
}
.section-feature2 .yuyuebtn {
margin-right: 170px;
background-color: #609a50;
font-size: 12px;
}
.section-feature3 .yuyuebtn {
margin-right: 164px;
background-color: #795aa3;
}