body { position: relative; } /***** slider start *****/ .index-swiper{ width:1000px; height:500px; } .swiper-container:hover .swiper-title, .swiper-container:hover .swiper-button-next, .swiper-container:hover .swiper-button-prev { opacity: 1; filter: progid:dximagetransform.microsoft.alpha(enabled=false); } .swiper-title { position: absolute; bottom: 0; left: 0; z-index: 11; width: 100%; height: 60px; background: url(/uploads/image/ncimages/slide-title-bg.png) repeat; color: white; font-size: 18px; line-height: 60px; opacity: 0; filter: progid:dximagetransform.microsoft.alpha(opacity=0); cursor: pointer; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .swiper-title:hover { color: white; } .swiper-title span { display: block; padding: 0 20px; } .swiper-slide { position: relative; transition: all .3s ease-in-out; } /***** slider end *****/ /***** module hd start *****/ .module-hd{ position: relative; height: 70px; margin:20px auto; } .module-hd h2{ height: 70px; margin:0 auto; } .module-hd h2 a{ display: block; width: 100%; height: 100%; text-indent: -9999px; background: url(/uploads/image/ncimages/index-title.jpg) no-repeat; } .module-hd .left-links, .module-hd .right-links{ position: absolute; line-height: 70px; font-size: 16px; color: #222; top:0; } .module-hd .left-links{ left: 0; text-align: right; } .module-hd .left-links a{ margin-left:20px; } .module-hd .right-links{ right: 0; text-align: left; } .module-hd .right-links a{ margin-right:20px; } /***** module hd end *****/ /***** subfocus start *****/ .subfocus-module h2{ width:352px; } .subfocus-module h2 a{ background-position:left -522px; } .subfocus-module .left-links, .subfocus-module .right-links{ width: 280px; } .subfocus-module{ margin:40px auto 20px; } .subfocus-module .main{ float: left; width: 680px; height: 510px; overflow: hidden; } .subfocus-module .side{ float: right; width: 300px; height: 510px; } .subfocus-slide{ position: relative; width: 680px; height: 430px; overflow: hidden; } .subfocus-slide .cont li { position: absolute; left: 0; right: 0; height: 430px; } .subfocus-slide .cont li img{ display: block; width: 680px; height: 430px; } .subfocus-slide .cont li .caption{ position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; background: rgba(0,0,0,.6); filter: progid:dximagetransform.microsoft.gradient(startcolorstr="#cc000000",endcolorstr="#cc000000"); } .subfocus-slide h3 { height: 40px; line-height: 40px; font-size: 22px; margin-top: 5px; padding-left: 10px; overflow: hidden; } .subfocus-slide h3 a{ color: #fff; } .subfocus-slide p { height: 28px; line-height: 28px; font-size: 14px; padding-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color:#fff; } .subfocus-slide .triggers{ position: absolute; z-index: 9; left: 0; top:20px; width: 90px; } .subfocus-slide .triggers li { margin-bottom: 1px; } .subfocus-slide .triggers li a{ display: block; height: 40px; line-height: 40px; background: #fff; opacity: .7; filter:alpha(opacity=70); font-size: 14px; text-align: center; border-left: 4px solid transparent; } .subfocus-slide .triggers a.current, .subfocus-slide .triggers a:hover { color:#333; border-left: 4px solid #ef0000; } .subfocus-module .links-list{ margin-top: 10px; /*padding-bottom: 15px;*/ } .subfocus-module .links-list a{ display: block; font-size: 14px; height: 40px; line-height: 40px; width:300px; float: left; margin-right: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /*background: url(/uploads/image/ncimages/home_sprites.png) no-repeat -308px -461px;*/ } .subfocus-module .links-list a.last{ margin-right: 0; } /***** subfocus end *****/ /***** module bd start *****/ .module-bd{ margin-bottom: 20px; } .module-bd .left { float: left; width: 50%; } .module-bd .right { float: right; width: 50%; } .module-bd .item img{ -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1); transform: scale(1); } .module-bd .item-des { position: absolute; top: 0; left: 0; display: table; color: white; text-align: center; } .module-bd .item-cont { display: table-cell; padding: 20px; color: white; vertical-align: middle; } .module-bd .item-cont a { color: white; } .module-bd .item-des h3 { opacity: 0; filter:alpha(opacity=0); overflow: hidden; margin: 5px 0 10px; max-height: 60px; font-weight: normal; font-size: 21px; line-height: 30px; /*-webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0);*/ -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,20px,0) scale(1.1); transform: translate3d(0,20px,0) scale(1.1); } .module-bd .item-des p { overflow: hidden; max-height: 48px; font-size: 14px; opacity: 0; filter:alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,20px,0) scale(1.1); transform: translate3d(0,20px,0) scale(1.1); } .module-bd .button { display: inline-block; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); } .module-bd .button span { display: block; margin: 0 auto; width: 140px; height: 24px; line-height: 24px; /*border: 1px solid white;*/ color: white; font-size: 14px; /*font-family: 'impact';*/ } .module-bd .item-time { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; } .module-bd .item:hover img { -webkit-transform: scale(1.15); transform: scale(1.15); } .module-bd .item:hover .item-des { background-color: rgba(0,0,0,.3); } .module-bd .item:hover .button{ color: white; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .module-bd .item:hover h3{ opacity: 1; filter:alpha(opacity=100); -webkit-transform: translate3d(0,0,0) scale(1); transform: translate3d(0,0,0) scale(1); } .module-bd .item:hover p{ opacity: 1; filter:alpha(opacity=100); -webkit-transform: translate3d(0,0,0) scale(1); transform: translate3d(0,0,0) scale(1); } .module-bd .left .item{ position: relative; width: 500px; height: 500px; } .module-bd .left .item-pic { overflow: hidden; width: 500px; height: 500px; } .module-bd .left img { width: 500px; height: 500px; } .module-bd .left .item-des{ width: 500px; height: 500px; } .module-bd .right .item { position: relative; float: left; width: 250px; height: 250px; } .module-bd .right .item-pic { overflow: hidden; width: 250px; height: 250px; } .module-bd .right img { width: 250px; height: 250px; } .module-bd .right .item-des{ width: 250px; height: 250px; } .module-bd .links-list{ margin-top: 20px; } .module-bd .links-list h3{ /*border-left: 5px solid #ef0000; padding-left: 15px;*/ text-align: center; font-size: 22px; height: 30px; line-height: 30px; width: 400px; margin: 0 300px 10px; border-bottom: 2px solid #333; } .module-bd .links-list a{ display: block; font-size: 14px; height: 50px; line-height: 50px; width:300px; float: left; margin-right: 50px; /*padding-left:15px;*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /*background: url(/uploads/image/ncimages/home_sprites.png) no-repeat -308px -461px;*/ /*padding-bottom: 10px;*/ border-bottom: 1px solid #d8d8d8; vertical-align: middle; } .module-bd .links-list a span{ font-size: 22px; margin-right: 15px; vertical-align: middle; } .module-bd .links-list a em{ vertical-align: middle; } .module-bd .links-list a.last{ margin-right: 0; } /***** module bd end *****/ /***** star module start *****/ .star-module h2{ width:312px; } .star-module h2 a{ background-position:left 13px; } .star-module .left-links, .star-module .right-links{ width: 300px; } /***** star module end *****/ /***** fashion module start *****/ .fashion-module h2{ width:408px; } .fashion-module h2 a{ background-position:left -78px; } .fashion-module .left-links, .fashion-module .right-links{ width: 250px; } /***** fashion module end *****/ /***** beauty module start *****/ .beauty-module h2{ width:384px; } .beauty-module h2 a{ background-position:left -169px; } .beauty-module .left-links, .beauty-module .right-links{ width: 260px; } .event-box{ margin-top: 40px; } .event-box h3{ height: 24px; line-height: 24px; font-size: 22px; border-left:5px solid #ef0000; padding-left:15px; } .event-slide { position: relative; width: 1000px; height: 168px; /*padding:0 55px; */ margin-top: 10px; background: #f8f8f8; overflow: hidden; } .event-list{ width: 890px; height: 168px; margin:0 auto; overflow: hidden; } .event-slide ul{ width: 876px; height: 128px; overflow: hidden; margin: 20px auto 0; } .event-slide ul li { position: relative; float: left; width: 272px; height: 128px; margin-right: 30px; overflow: hidden; } .event-slide ul li img{ display: block; width: 128px; height: 128px; float: left; margin-right: 10px; } .event-slide ul li .title{ display: block; font-size: 14px; line-height: 20px; height: 60px; margin-top: 8px; /*margin: 8px 0 0 138px;*/ overflow: hidden; } .event-slide ul li .btns{ position: absolute; left: 138px; bottom: 15px; } .event-slide ul li .btns a{ display: inline-block; width:64px; height: 24px; line-height: 24px; background: #ef0000; color: #fff; font-size: 14px; text-align: center; } a.prev:hover, a.next:hover{ -moz-opacity:0.8; opacity:0.8; } /*.event-slide ul li span{ display: block; width: 210px; line-height: 20px; padding: 0 15px 0 5px; font-size: 14px; height: 40px; overflow: hidden; }*/ .event-slide .prev, .event-slide .next{ position: absolute; width: 40px; height: 40px; top:50%; margin-top: -20px; cursor: pointer; background: url(/uploads/image/ncimages/home_sprites.png) no-repeat; } .event-slide .next{ right: 0; background-position: -260px -420px; } .event-slide .prev{ left: 0; background-position: -261px -341px; } /***** trybox start *****/ .event-box{ margin-top: 40px; } .event-box h3{ height: 24px; line-height: 24px; font-size: 22px; border-left:5px solid #ef0000; padding-left:15px; } .event-try { position: relative; width: 1000px; height: 168px; /*padding:0 55px; */ margin-top: 10px; background: #f8f8f8; overflow: hidden; } .event-try ul{ width: 890px; height: 130px; overflow: hidden; margin: 20px auto 0; } .event-try ul li { float: left; width: 270px; height: 130px; margin-right: 25px; overflow: hidden; position: relative; } .event-try ul li img{ display: block; width: 128px; height: 128px; float: left; margin-right: 10px; } .event-try ul li a.title{ display: block; font-size: 14px; line-height: 20px; height: 60px; margin-top: 8px; /*margin: 8px 0 0 138px;*/ overflow: hidden; } .event-try ul li a.title:hover{ color: #daa521; } .event-try ul li a.btns{ position: absolute; bottom: 10px; display: inline-block; width:100px; height: 24px; line-height: 24px; color: #daa521; border:1px solid #daa521; font-size: 14px; text-align: center; border-radius: 5px; } .event-try ul li a.btns:hover{ background: #daa521; color: #fff; } /***** trybox end *****/ /***** beauty module end *****/ /***** life module start *****/ .life-module h2{ width:452px; } .life-module h2 a{ background-position:left -262px; } .life-module .left-links, .life-module .right-links{ width: 230px; } /***** life module end *****/ /***** feature module start *****/ .feature-module h2{ position: absolute; left: 50%; margin-left: -200px; width: 400px; background: #fff; } .feature-module h2 a{ background-position:65px -348px; } .feature-module .module-hd:before{ position: absolute; content: ''; top: 50%; width: 100%; height: 1px; background: #000; } .feature-slide { position: relative; width: 1000px; height: 280px; overflow: hidden; } .feature-list { width: 920px; height: 280px; margin:0 auto; overflow: hidden; } /*.feature-slide ul{ width: 920px; margin:0 auto; }*/ .feature-slide ul li { position: relative; float: left; width: 230px; height: 280px; } .feature-slide ul li img{ display: block; width: 230px; height: 230px; margin-bottom: 10px; } .feature-slide ul li span{ display: block; width: 210px; line-height: 20px; padding: 0 15px 0 5px; font-size: 14px; height: 40px; overflow: hidden; } .feature-slide .prev, .feature-slide .next{ position: absolute; width: 40px; height: 40px; top:50%; margin-top: -50px; cursor: pointer; background: url(/uploads/image/ncimages/home_sprites.png) no-repeat; } .feature-slide .next{ right: 0; background-position: -260px -420px; } .feature-slide .prev{ left: 0; background-position: -261px -341px; } .feature-module .more{ width: 100%; height: 30px; margin-top: 20px; position: relative; } .feature-module .more:before{ position: absolute; content: ''; top: 50%; width: 100%; height: 1px; background: #000; } .feature-module .more a{ position: absolute; display: block; z-index: 3; left: 50%; margin-left:-55px; background: #fff; width:110px; height: 28px; line-height: 28px; text-align: center; cursor: pointer; border:1px solid #000; } /***** feature module end *****/ /***** search module start *****/ .search-module{ padding: 35px 0; /*border-bottom: 1px solid #000;*/ /*border: 1px solid #d8d8d8;*/ margin-top: 40px; background: #f8f8f8; } .search-module .form { margin: 0 auto 20px; width: 500px; height: 50px; /*border: 1px solid #333;*/ background: #fff; } .search-module .search-btn{ width: 50px; height: 50px; /*background: url(/uploads/image/ncimages/button-search.png) no-repeat 10px;*/ background: url(/uploads/image/ncimages/home_sprites.png) no-repeat -252px -95px; cursor: pointer; vertical-align: middle; } .search-keywords{ padding: 0 25px; } .search-keywords a{ font-size: 14px } /***** search module end *****/ /***** one bazaar start *****/ .one-bazaar { margin: 40px auto; } .one-bazaar-title { overflow: hidden; margin-bottom: 20px; width:300px; height:40px; margin:0 auto 20px; background: url(/uploads/image/ncimages/index-title.jpg) no-repeat left -448px; text-indent: -9999px; } .one-bazaar-slider { position: relative; overflow: hidden; padding-bottom: 40px; } .one-bazaar-container { border: 1px solid #d8d8d8; width: 998px; height: 348px; overflow: visible; } .one-bazaar-container .swiper-wrapper { margin-bottom: 0; } .one-bazaar-slider .swiper-pagination{ bottom: -55px; width: 100%; text-align: center; left: -2px; right: 0; padding-top: 20px; } .one-bazaar-slider .swiper-pagination span{ float: none; display: inline-block; background-position:-192px -112px; } .one-bazaar-slider .swiper-pagination span.swiper-active-switch{ background-position: -112px -112px; } .one-bazaar-box { padding: 15px; width: 220px; border-right: 1px solid #d8d8d8; text-align: center; } .one-bazaar-box h3 { margin-bottom: 10px; font-size: 16px; } .one-bazaar-box p { font-size: 12px; line-height: 18px; margin-bottom: 20px; height: 36px; overflow: hidden; } .one-bazaar-pic { overflow: hidden; height: 180px; text-align: center; line-height: 180px; } .one-bazaar-pic img { display: inline-block; /*max-width: 260px;*/ max-width: 220px; vertical-align: middle; } .one-bazaar-link { display: block; margin-top:8px; height: 40px; background-color: #f3f3f3; letter-spacing: 10px; font-size: 14px; line-height: 40px; } .one-bazaar-qr { position: absolute; bottom: 65px; left: 50%; margin-left: -80px; padding: 10px; width: 140px; height: 140px; background-color: rgb(204,204,204); display: none; } .one-bazaar-qr .arrow { display: block; margin: 6px auto 0; width: 140px; height: 12px; background: url(/uploads/image/ncimages/home_sprites.png) no-repeat 32px -435px; } /***** one bazaar end *****/ /* footer */ .footer { margin-top: 0; }