@charset "utf-8"; /* icon classes can be used entirely standalone. they are named after their original file names. example usage in html: `display: block` sprite:
to change `display` (e.g. `display: inline-block;`), we suggest using a common css class: // css .icon { display: inline-block; } // html */ .icon-about-contact-location { background-image: ; background-position: 0px -92px; width: 29px; height: 40px; } .icon-about-contact-mail { background-image: ; background-position: -140px 0px; width: 36px; height: 24px; } .icon-about-contact-tel { background-image: ; background-position: -37px -92px; width: 26px; height: 40px; } .icon-add-more { background-image: ; background-position: -140px -66px; width: 24px; height: 24px; } .icon-career-play { background-image: ; background-position: 0px 0px; width: 40px; height: 40px; } .icon-cn { background-image: ; background-position: 0px -212px; width: 18px; height: 12px; } .icon-connect-white { background-image: ; background-position: -96px -140px; width: 24px; height: 24px; } .icon-connect { background-image: ; background-position: -64px -140px; width: 24px; height: 24px; } .icon-download { background-image: ; background-position: -140px -98px; width: 24px; height: 24px; } .icon-employ-play { background-image: ; background-position: -160px -140px; width: 16px; height: 16px; } .icon-gift { background-image: ; background-position: -140px -32px; width: 24px; height: 26px; } .icon-hide-more-text { background-image: ; background-position: -52px -172px; width: 28px; height: 9px; } .icon-left-arrow-s { background-image: ; background-position: -18px -172px; width: 9px; height: 28px; } .icon-left-arrow { background-image: ; background-position: 0px -172px; width: 10px; height: 32px; } .icon-link-arrow { background-image: ; background-position: -215px -23px; width: 7px; height: 24px; } .icon-main-pagination-active { background-image: ; background-position: -215px -76px; width: 12px; height: 12px; } .icon-main-pagination { background-image: ; background-position: -215px -122px; width: 6px; height: 6px; } .icon-more-text { background-image: ; background-position: -88px -172px; width: 28px; height: 8px; } .icon-pagination-active { background-image: ; background-position: -215px -55px; width: 13px; height: 13px; } .icon-pagination { background-image: ; background-position: -215px -136px; width: 5px; height: 5px; } .icon-play-btn { background-image: ; background-position: -48px 0px; width: 40px; height: 40px; } .icon-plus { background-image: ; background-position: -71px -92px; width: 30px; height: 30px; } .icon-pro-play-black { background-image: ; background-position: -32px -140px; width: 24px; height: 24px; } .icon-pro-play-white { background-image: ; background-position: 0px -140px; width: 24px; height: 24px; } .icon-pro-play { background-image: ; background-position: -128px -140px; width: 24px; height: 24px; } .icon-right-arrow-s { background-image: ; background-position: -35px -172px; width: 9px; height: 28px; } .icon-right-arrow { background-image: ; background-position: -184px -115px; width: 10px; height: 32px; } .icon-sale-tab-close { background-image: ; background-position: -215px -113px; width: 15px; height: 1px; } .icon-sale-tab-open { background-image: ; background-position: -215px 0px; width: 15px; height: 15px; } .icon-search-close { background-image: ; background-position: -184px -32px; width: 20px; height: 20px; } .icon-search-white { background-image: ; background-position: -184px 0px; width: 23px; height: 24px; } .icon-search { background-image: ; background-position: -109px -92px; width: 23px; height: 24px; } .icon-service-nav-active { background-image: ; background-position: -215px -96px; width: 9px; height: 9px; } .icon-tab-close { background-image: ; background-position: -140px -130px; width: 19px; height: 1px; } .icon-tab-open { background-image: ; background-position: -184px -88px; width: 19px; height: 19px; } .icon-video-close { background-image: ; background-position: -184px -60px; width: 20px; height: 20px; } .icon-video-less { background-image: ; background-position: -184px -155px; width: 20px; height: 6px; } .icon-video-more { background-image: ; background-position: -124px -172px; width: 20px; height: 6px; } .icon-weibo-hover { background-image: ; background-position: -96px -44px; width: 36px; height: 36px; } .icon-weibo { background-image: ; background-position: -96px 0px; width: 36px; height: 36px; } .icon-weichat-hover { background-image: ; background-position: -44px -48px; width: 36px; height: 36px; } .icon-weichat { background-image: ; background-position: 0px -48px; width: 36px; height: 36px; } * { margin: 0; padding: 0; outline: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-font-smoothing: antialiased; } html { box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box; color: #222; } body,html{ overflow-x: hidden; } *, *:before, *:after { box-sizing: inherit; -webkit-box-sizing: inherit; -o-box-sizing: inherit; -moz-box-sizing: inherit; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; font-family: 'microsoft yahei'; } fieldset, img { border: 0; } :focus { outline: 0; } address, caption, cite, code, dfn, em, strong, i, th, var, optgroup { font-style: normal; font-weight: normal; } input, button, textarea, select, optgroup, option { font-family: 'microsoft yahei'; font-size: inherit; font-style: inherit; font-weight: inherit; } input, button { font: 12px "\5b8b\4f53", arial, helvetica, "sans-serif"; vertical-align: middle; } a, button { cursor: pointer; } abbr, acronym { border: 0; font-variant: normal; } code, kbd, samp, tt { font-size: 100%; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th { text-align: left; } sup, sub { font-size: 100%; vertical-align: baseline; } :link, :visited, ins { text-decoration: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } body { font: 12px "\5b8b\4f53", arial, helvetica, "sans-serif"; border: 0; color: #666; scrollbar-base-color: #ededed; scrollbar-shadow-color: #fbfbfb; scrollbar-darkshadow-color: #d1d0d0; background-color: #000; } h1, h2, h3, h4, h5, h6 { font-size: 12px; } button { border: 0; } legend, caption { display: none; } a:link, a:visited { color: #666; } a:hover, a:active { color: #666; text-decoration: none; } img { -ms-interpolation-mode: bicubic; } input[type=text]::-ms-clear { display: none; } .r { float: right; } .l { float: left; } .v-top { vertical-align: top; } .text-right { text-align: right; } .font-thin { font-family: 'pingfangsc-thin', 'microsoft yahei'; } .font-light { font-family: 'pingfangsc-light', 'microsoft yahei'; } .font-medium { font-family: 'pingfangsc-medium', 'microsoft yahei'; } .font-regular { font-family: 'pingfangsc regular', 'microsoft yahei'; } @font-face { font-family: 'baskerville'; src: ; src: local('☺'), format('woff'), format('truetype'), format('svg'); font-weight: normal; font-style: normal; } .baskerville { font-family: baskerville; } .clear { clear: both; } .clearfloat:after { content: "."; display: block; height: 0; line-height: 0; clear: both; font-size: 0; } .clearfloat { zoom: 1; } .icon { display: inline-block; *display: inline; *zoom: 1; } .btn { display: inline-block; *display: inline; *zoom: 1; cursor: pointer; height: 36px; line-height: 36px; padding: 0 30px; color: #fff; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; } .btn-black { background: #222; color: #fff; } .fixed { position: fixed; } .container-top { width: 1280px; max-width: 1280px; margin: 0 auto; overflow: hidden; } .main-pagination { background: #fcd2c0; z-index: 30; padding: 8px 0; overflow: hidden; top: 50%; margin-top: -73px; } .main-pagination li { padding-right: 24px; height: 44px; line-height: 44px; font-size: 12px; color: #ffffff; vertical-align: top; cursor: pointer; white-space: nowrap; } .main-pagination li span.text { position: relative; margin-left: 6px; font-family: 'pingfangsc-light', 'microsoft yahei'; } .main-pagination li.active .text { font-family: 'pingfangsc-medium', 'microsoft yahei'; } .main-pagination .icon-main-pagination { position: relative; top: -2px; } .main-pagination .active .icon-main-pagination { background-image: ; background-position: -215px -76px; width: 12px; height: 12px; position: relative; left: -3px; top: 1px; } .main-pagination-mini { z-index: 31; } .main-pagination-mini li { padding-right: 11px; padding-left: 14px; } .main-pagination-text { left: 37px; } .top-section { top: 0; left: 0; width: 100%; z-index: 10000; } .page-wapper { padding-top: 110px; } .swiper-container { margin: 0 auto; position: relative; overflow: hidden; direction: ltr; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; /* fix of webkit flickering */ z-index: 1; } .swiper-wrapper { position: relative; width: 100%; -webkit-transition-property: -webkit-transform, left, top; -webkit-transition-duration: 0s; -webkit-transform: translate3d(0px, 0, 0); -webkit-transition-timing-function: ease; -moz-transition-property: -moz-transform, left, top; -moz-transition-duration: 0s; -moz-transform: translate3d(0px, 0, 0); -moz-transition-timing-function: ease; -o-transition-property: -o-transform, left, top; -o-transition-duration: 0s; -o-transform: translate3d(0px, 0, 0); -o-transition-timing-function: ease; -o-transform: translate(0px, 0px); -ms-transition-property: -ms-transform, left, top; -ms-transition-duration: 0s; -ms-transform: translate3d(0px, 0, 0); -ms-transition-timing-function: ease; transition-property: transform, left, top; transition-duration: 0s; transform: translate3d(0px, 0, 0); transition-timing-function: ease; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { float: left; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /* ie10 windows phone 8 fixes */ .swiper-wp8-horizontal { -ms-touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; } .top-bar { background-color: #000; height: 40px; } .top-bar a { font-family: 'pingfangsc-light', 'microsoft yahei'; font-size: 12px; color: #e5e5e5; } .top-bar .top-bar-link li { display: inline-block; height: 40px; text-align: center; } .top-bar .top-bar-link a { margin: 12px 0; padding: 0 40px; line-height: 16px; display: block; } .top-bar .top-bar-link .border { border-right: 1px solid #444; } .top-bar .top-bar-r { margin-right: 40px; } .top-bar .top-bar-r .about-btn { display: inline-block; height: 40px; width: 100px; text-align: center; line-height: 40px; } .top-bar .top-bar-r .icon-cn { position: relative; top: 2px; } .top-nav { background: #000; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06); height: 70px; } .top-nav .container-top { position: relative; } .top-nav .logo { display: inline-block; *display: inline; *zoom: 1; padding: 25px 40px 0; width: 248px; } .top-nav .logo img { width: 100%; } .top-nav .top-nav-menu { position: relative; margin-left: 160px; display: inline-block; *display: inline; *zoom: 1; } .top-nav .top-nav-menu .top-nav-menu-list li { float: left; display: inline-block; *display: inline; *zoom: 1; margin-right: 32px; font-family: 'pingfangsc-light', 'microsoft yahei'; font-size: 16px; height: 70px; } .top-nav .top-nav-menu .top-nav-menu-list li a { display: block; color: #fbc9ba; height: 70px; line-height: 70px; } .top-nav .active-bar { position: absolute; left: 0; width: 0; bottom: 0; height: 2px; background-color: #fbc9ba; transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -wekit-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; } .top-nav-right { margin-right: 40px; } .top-nav-right .connect { height: 70px; line-height: 70px; font-family: 'pingfangsc-light', 'microsoft yahei'; font-size: 16px; color: #fbc9ba; } .top-nav-right .connect .icon { position: relative; top: 5px; margin-right: 10px; } .search-area { position: absolute; width: 32px; height: 70px; overflow: hidden; top: 0; right: 176px; z-index: 200; background-color: #000; transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -wekit-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; } .search-area.open-search { width: 705px; } .search-area.open-search .wapper { border-bottom: 1px solid #eeeeee; } .search-area.open-search .hide { opacity: 1; } .search-area .wapper { position: absolute; left: 0; overflow: hidden; width: 680px; height: 33px; margin-top: 23px; white-space: nowrap; border-bottom-color: transparent; transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -wekit-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; } .search-area .hide { opacity: 0; } .search-area .icon { cursor: pointer; } .search-area .icon-search-close { position: relative; top: 25px; right: 0; margin-left: 5px; } .search-area input { font-family: 'pingfangsc-thin', 'microsoft yahei'; display: inline-block; *display: inline; *zoom: 1; width: 630px; font-size: 14px; line-height: 26px; border: none; -webkit-appearance: none; margin-left: 20px; background-color: transparent; transition: all 1s ease-out 0s; -moz-transition: all 1s ease-out 0s; -o-transition: all 1s ease-out 0s; -wekit-transition: all 1s ease-out 0s; -ms-transition: all 1s ease-out 0s; } .nav { position: fixed; top: 110px; left: 0; z-index: 20; width: 100%; background: #ffffff; box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1); padding: 40px 0 70px 0; opacity: 1; overflow: hidden; transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; -wekit-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; } .nav.nav-closed { top: -400px; opacity: 0; } .nav .container { width: 1000px; margin: 0 auto; max-width: 1000px; position: relative; } .nav .nav-list { position: absolute; z-index: 2; left: 0; top: 0; display: none; } .nav .nav-list.nav-notab { left: 50%; margin-left: -425px; } .nav .nav-list.nav-notab .tab-content { border: none; } .nav .nav-list.nav-notab .tab-content ul { padding-left: 102px; } .nav .tab-title { width: 140px; display: inline-block; *display: inline; *zoom: 1; } .nav .tab-title li { font-family: 'pingfangsc-thin', 'microsoft yahei'; width: 140px; height: 60px; font-size: 16px; color: #999999; line-height: 20px; text-align: center; cursor: pointer; transition: all 0.5s linear 0s; -moz-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; -wekit-transition: all 0.5s linear 0s; -ms-transition: all 0.5s linear 0s; } .nav .tab-title li span { line-height: 60px; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border 0.5s linear 0s; -moz-transition: border 0.5s linear 0s; -o-transition: border 0.5s linear 0s; -wekit-transition: border 0.5s linear 0s; -ms-transition: border 0.5s linear 0s; } .nav .tab-title li.active { color: #222; } .nav .tab-title li.active span { border-bottom: 1px solid #222; } .nav .tab-content { border-left: 1px solid #eee; padding: 0 10px; } .nav .tab-content .series { display: none; } .nav .tab-content .series-1 { display: block; } .nav .tab-content ul { overflow: hidden; width: 835px; margin-top: -20px; } .nav .tab-content ul.series-img-hover li:hover .hover-img { opacity: 1 !important; } .nav .tab-content ul.series-img-hover li:hover .img { opacity: 0; } .nav .tab-content li { position: relative; float: left; margin-left: 25px; margin-top: 20px; } .nav .tab-content li a { display: block; } .nav .tab-content li .img { display: inline-block; *display: inline; *zoom: 1; width: 138px; height: 80px; transition: opacity 0.3s ease-out 0s; -moz-transition: opacity 0.3s ease-out 0s; -o-transition: opacity 0.3s ease-out 0s; -wekit-transition: opacity 0.3s ease-out 0s; -ms-transition: opacity 0.3s ease-out 0s; } .nav .tab-content li .hover-img { position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; } .nav .tab-content li .name { text-align: center; font-size: 12px; color: #999; margin-top: 10px; font-family: 'pingfangsc-light', 'microsoft yahei'; } .nav .tab-content li:hover .name { color: #222; transition: color 0.5s ease-out 0s; -moz-transition: color 0.5s ease-out 0s; -o-transition: color 0.5s ease-out 0s; -wekit-transition: color 0.5s ease-out 0s; -ms-transition: color 0.5s ease-out 0s; } .bottom-area { background-color: #fff; padding: 0 0 25px 0; } .bottom-area .container { width: 1000px; margin: 0 auto; border-top: 1px solid #999; padding-top: 48px; } .bottom-area .menu { overflow: hidden; } .bottom-area .menu li { width: 160px; float: left; } .bottom-area .menu li .menu-item a { font-family: 'pingfangsc-thin', 'microsoft yahei'; font-size: 12px; color: #444; line-height: 25px; display: block; } .bottom-area .menu li .menu-item .title { font-family: 'pingfangsc-thin', 'microsoft yahei'; font-size: 16px; color: #222; margin-bottom: 10px; text-align: left; } .bottom-area .socail-share-area .btn-area { margin-top: 28px; } .bottom-area .socail-share-area .text-right { font-family: 'pingfangsc-thin', 'microsoft yahei'; font-size: 16px; color: #ffffff; } .bottom-area .socail-share-area .socail-btn { margin-left: 20px; position: relative; } .bottom-area .socail-share-area .icon { cursor: pointer; transition: opacity 0.9s linear 0s; -moz-transition: opacity 0.9s linear 0s; -o-transition: opacity 0.9s linear 0s; -wekit-transition: opacity 0.9s linear 0s; -ms-transition: opacity 0.9s linear 0s; opacity: 0.9; } .bottom-area .socail-share-area .icon:hover { opacity: 1; } .bottom-area .socail-share-area .qrcode { position: absolute; padding-right: 0; right: 0; top: 0; opacity: 0; z-index: 1; overflow: hidden; transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; -wekit-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; } .bottom-area .socail-share-area .qrcode.show { padding-right: 56px; opacity: 1; } .bottom-area .bottom-bar { width: 100%; margin-top: 88px; overflow: hidden; } .bottom-area .bottom-bar .bottom-logo-img { width: 122px; } .bottom-area .bottom-bar .copyright { font-family: 'pingfangsc-thin', 'microsoft yahei'; font-size: 12px; color: #444; letter-spacing: 0px; display: inline-block; *display: inline; *zoom: 1; line-height: 20px; } .link-section { padding-bottom: 100px; margin-top: 80px; } .link-section .container { border-top: 1px dotted #222; } .link-section .link-section-title { font-family: 'pingfangsc-light', 'microsoft yahei'; font-size: 20px; color: #222; text-align: center; padding: 40px 0; } .link-section .btn-area { text-align: center; } .link-section .btn-area .btn { color: #fff; position: relative; } .link-section .btn-area .btn:before { position: absolute; left: 0; top: 0; content: ''; width: 0; height: 100%; z-index: 9; background: #f9caba; overflow: hidden; text-align: center; transition: width 0.5s ease-out 0s; -moz-transition: width 0.5s ease-out 0s; -o-transition: width 0.5s ease-out 0s; -wekit-transition: width 0.5s ease-out 0s; -ms-transition: width 0.5s ease-out 0s; } .link-section .btn-area .btn:after { content: '联系美容顾问了解更多'; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; text-align: center; z-index: 10; color: #fff; } .link-section .btn-area .btn:hover:before { width: 100%; } .link-section .link-area { margin: 0 -10px; overflow: hidden; margin-top: 60px; } .link-section .link-area .link { width: 50%; float: left; padding: 0 10px; } .link-section .link-area .link .link-content { height: 171px; overflow: hidden; } .link-section .link-area .link .link-content .link-content-text { text-align: center; font-family: 'pingfangsc-light', 'microsoft yahei'; color: #222; padding-right: 60px; float: right; display: inline-block; } .link-section .link-area .link .link-content .link-content-text .link-content-title { font-size: 20px; margin-top: 40px; line-height: 20px; } .link-section .link-area .link .link-content .link-content-text .link-content-link { font-size: 16px; margin-top: 40px; display: block; color: #222; text-decoration: underline; } .link-section .link-area .link-1 .link-content { background: #5d4b48 no-repeat 0 0; } .link-section .link-area .link-1 .link-content .link-content-text { color: #fff; } .link-section .link-area .link-1 .link-content .link-content-text .link-content-link { color: #fff; } .link-section .link-area .link-2 .link-content { background: #fce9f1 no-repeat 0 0; } .link-section .link-area .link-2 .link-content .link-content-title { text-shadow: #f7edf1 0 0 7px; } .link-section .link-area .link-3 .link-content { background: #dcf0f2 no-repeat 0 0; } .video-section { width: 100%; height: 100%; left: 0; top: 0; z-index: 10002; display: none; } .video-section .shadow { background: #222; opacity: 0.75; width: 100%; height: 100%; } .video-section .video-area { position: absolute; width: 800px; height: 450px; top: 50%; left: 50%; margin-top: -225px; margin-left: -400px; background: #fff; } .video-section .icon-video-close { position: absolute; top: 50%; left: 50%; margin-top: -225px; margin-left: 428px; } .ol-type-square, .ol-type-arrow, .ol-type-star, .ol-type-circle {list-style-type:none; } .ol-type-square li, .ol-type-arrow li, .ol-type-star li, .ol-type-circle li{ text-indent:-1em; overflow:visible!important; display:block !important; width:auto !important; margin:auto !important;} .ol-type-circle1 li{ text-indent:0em; overflow:visible!important; display:block !important; width:auto !important; margin:auto !important;} .ol-type-star li { text-indent: -1.25em; } .ol-type-square li:before, .ol-type-arrow li:before, .ol-type-circle li:before{ content:""; display:inline-block; width:0.9em;vertical-align:middle; margin-top:-0.4em; text-indent:0em; } .ol-type-circle1 li:before{ content:""; display:inline-block; width:1.8em;vertical-align:middle; margin-top:-0.2em; text-indent:0; } .ol-type-star li:before{ content:""; display:inline-block; width:1em;vertical-align:middle; margin-top:0.1em; color: #ff0000;font-style:normal ;font-family: 'pingfangsc-light','微软雅黑';font-size: 14px;text-indent: 0.4em; } /*.ol-type-circle1 li:after{ content:""; width:0.5em;vertical-align:middle; margin-top:-0.2em; color: #ff0000; }*/ .ol-type-square li:before{ content:"■";} .ol-type-arrow li:before{ content:"►";} .ol-type-star li:before{ content:"*"; } .ol-type-circle li:before{ content:"•";font-size: 4px;} .ol-type-circle1 li:before{ content:"•";font-size: 20px;} .ol-type-text {padding-left:1em;list-style-type:none;} .ol-type-text li{ text-indent:-1em;overflow:visible!important;} .ol-type-text .ol-type-label {list-style-type:none; display:inline-block;width:1em;vertical-align:top;text-indent:0;} .ol-type-text-1 {padding-left:1em;} .ol-type-text-2 {padding-left:2em;} .ol-type-text-3 {padding-left:3em;} .ol-type-text-4 {padding-left:4em;} .ol-type-text-5 {padding-left:5em;} .ol-type-text-6 {padding-left:6em;} .ol-type-text-1 li{ text-indent:-1em;} .ol-type-text-2 li{ text-indent:-2em;} .ol-type-text-3 li{ text-indent:-3em;} .ol-type-text-4 li{ text-indent:-4em;} .ol-type-text-5 li{ text-indent:-5em;} .ol-type-text-6 li{ text-indent:-6em;} .ol-type-text-1 .ol-type-label {width:1em;} .ol-type-text-2 .ol-type-label {width:2em;} .ol-type-text-3 .ol-type-label {width:3em;} .ol-type-text-4 .ol-type-label {width:4em;} .ol-type-text-5 .ol-type-label {width:5em;} .ol-type-text-6 .ol-type-label {width:6em;} /*promotion07-css-begin*/ .index { /* =============================================================== pagination styles ================================================================*/ position: relative; display: block; } .index .pro-content { padding-top: 110px; } .index .pro-content .content { width: 100%;position: relative;overflow: hidden;min-width: 1280px; } @-webkit-keyframes starflash{ 0%{-webkit-transform: rotatez(-6deg);-ms-transform: rotatez(-6deg);-moz-transform: rotatez(-6deg);-o-transform: rotatez(-6deg);transform: rotatez(-6deg);opacity: 0.5;} 50%{-webkit-transform: rotatez(0deg);-ms-transform: rotatez(0deg);-moz-transform: rotatez(0deg);-o-transform: rotatez(0deg);transform: rotatez(0deg);opacity: 1;} 100%{-webkit-transform: rotatez(8deg);-ms-transform: rotatez(8deg);-moz-transform: rotatez(8deg);-o-transform: rotatez(8deg);transform: rotatez(8deg);opacity: 0.5;} } @-ms-keyframes starflash{ 0%{-webkit-transform: rotatez(-6deg);-ms-transform: rotatez(-6deg);-moz-transform: rotatez(-6deg);-o-transform: rotatez(-6deg);transform: rotatez(-6deg);opacity: 0.5;} 50%{-webkit-transform: rotatez(0deg);-ms-transform: rotatez(0deg);-moz-transform: rotatez(0deg);-o-transform: rotatez(0deg);transform: rotatez(0deg);opacity: 1;} 100%{-webkit-transform: rotatez(8deg);-ms-transform: rotatez(8deg);-moz-transform: rotatez(8deg);-o-transform: rotatez(8deg);transform: rotatez(8deg);opacity: 0.5;} } @-moz-keyframes starflash{ 0%{-webkit-transform: rotatez(-6deg);-ms-transform: rotatez(-6deg);-moz-transform: rotatez(-6deg);-o-transform: rotatez(-6deg);transform: rotatez(-6deg);opacity: 0.5;} 50%{-webkit-transform: rotatez(0deg);-ms-transform: rotatez(0deg);-moz-transform: rotatez(0deg);-o-transform: rotatez(0deg);transform: rotatez(0deg);opacity: 1;} 100%{-webkit-transform: rotatez(8deg);-ms-transform: rotatez(8deg);-moz-transform: rotatez(8deg);-o-transform: rotatez(8deg);transform: rotatez(8deg);opacity: 0.5;} } @-o-keyframes starflash{ 0%{-webkit-transform: rotatez(-6deg);-ms-transform: rotatez(-6deg);-moz-transform: rotatez(-6deg);-o-transform: rotatez(-6deg);transform: rotatez(-6deg);opacity: 0.5;} 50%{-webkit-transform: rotatez(0deg);-ms-transform: rotatez(0deg);-moz-transform: rotatez(0deg);-o-transform: rotatez(0deg);transform: rotatez(0deg);opacity: 1;} 100%{-webkit-transform: rotatez(8deg);-ms-transform: rotatez(8deg);-moz-transform: rotatez(8deg);-o-transform: rotatez(8deg);transform: rotatez(8deg);opacity: 0.5;} } @keyframes starflash{ 0%{-webkit-transform: rotatez(-6deg);-ms-transform: rotatez(-6deg);-moz-transform: rotatez(-6deg);-o-transform: rotatez(-6deg);transform: rotatez(-6deg);opacity: 0.5;} 50%{-webkit-transform: rotatez(0deg);-ms-transform: rotatez(0deg);-moz-transform: rotatez(0deg);-o-transform: rotatez(0deg);transform: rotatez(0deg);opacity: 1;} 100%{-webkit-transform: rotatez(8deg);-ms-transform: rotatez(8deg);-moz-transform: rotatez(8deg);-o-transform: rotatez(8deg);transform: rotatez(8deg);opacity: 0.5;} } /****8月促销****/ body { background: none; } .index img { display: block; } .width1120 { width: 1120px; margin: 0 auto; } .title-image { text-align: left; margin: 47px auto 45px; position: relative; } .title-qrcode { position: absolute; right: 0; /*top: -24px;*/ top: 45px; } /*.content-title {*/ /*border-bottom: solid 1px #000;*/ /*}*/ .floor-title { text-align: center; padding: 50px 0; } .floor-title img { display: inline-block; } .special .floor-content { width: 100%; height: 601px; overflow: hidden; position: relative; } .special .product { width: 3600px; height: 601px; position: absolute; top: 0; left: 50%; margin-left: -1800px; } .text { width: 447px; position: absolute; left: 49%; top: 200px; z-index: 1; margin-left: -241px; } .descript { position: relative; z-index: 1; width: 450px; position: absolute; left: 50%; margin-left: -530px; } .product2 { position: absolute; width: 236px; height: 325px; top: 78px; left: 8px; } .text-detail { margin: 80px 0 0 0; } .text-detail .text-item:first-child{ height: 117px; overflow-y: hidden; position: relative;} .text-detail .text-item:nth-child(2){ height: 15px; margin-top: 300px; overflow-y: hidden; position: relative; } .text-detail .text-item { margin-bottom: 20px; } .text-detail .text-item span { cursor: pointer; position: absolute; top: 41px; font-size: 13px; text-decoration: underline; color: #e6415d; padding: 10px 20px; } .text-detail .text-item:first-child span { left: 400px; } .text-detail .text-item:nth-child(2) span{ left: 370px; } .text-detail .text-item.active { height: auto; } .text-detail .text-item .span-active { color: #7e7e7e; } .lastimg{padding: 50px 0 70px 0;background: #f2c0cb;width: 1600px;margin-bottom: 50px;} .lastimg img{margin: 0 auto;} .bg_12pro{background: #fff;} /*.special .floor-title01 {width: 100%;height: 169px;overflow: hidden;position: relative;}*/ /*.special .floor-title01 .product01{width: 1950px;height: 169px;position: absolute;left: 50%;margin-left: -975px;}*/ .btnanim{-webkit-animation: btnanim 4s linear infinite;} @-webkit-keyframes btnanim{ 0%{-webkit-transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg);} } .ani_rotate{-webkit-animation: ani_rotate 1s linear infinite alternate;transform-origin: center -100%;} @-webkit-keyframes ani_rotate{ 0%{-webkit-transform: rotate(0);} 100% {-webkit-transform: rotate(3deg);} } .twisting{ -webkit-animation: twisting 2s 0.3s ease infinite; } @-webkit-keyframes twisting{ 0%{-webkit-transform: skew(2deg,1deg);} 15%{-webkit-transform: skew(3deg,0deg);} 30%{-webkit-transform: skew(1deg,2deg);} 45%{-webkit-transform: skew(4deg,1deg);} 60%{-webkit-transform: skew(3deg,3deg);} 75%{-webkit-transform: skew(1deg,1deg);} 90%{-webkit-transform: skew(3deg,0deg);} 100%{-webkit-transform: skew(2deg,1deg);} } .mask-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-mask-image: ; overflow: hidden; -webkit-mask-size: 100% auto; } .title2_mask { display: block; position: absolute; top: 0; left: 105px; width: 150px; height: 100%; background: -webkit-linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); animation: animask 4s infinite linear; } @keyframes animask { 0% { transform: translatex(0); } 100% { transform: translatex(530px); } } .special .floor-content1 {width: 100%;height: 1098px;overflow: hidden;position: relative;} .special .floor-content1 .product01{width: 1265px;height: 1098px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content1 .product01{width: 1265px;height: 1098px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content1 .p03{position: absolute;display: block;left: 50%;top: 0;margin-left: 122px;width: 459px;height: 639px;} .special .floor-content1 .p04{position: absolute;display: block;left: 50%;top: 76px;margin-left: -288px;width: 751px;height: 960px;} .special .a01{position: absolute;display: block;left: 50%;top: 426px;margin-left: 142px;width: 371px;height: 410px;} .special .floor-content2 {width: 100%;height: 670px;overflow: hidden;position: relative;} .special .floor-content2 .product01{width: 1265px;height: 670px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content2 .p01{position: absolute;display: block;left: 50%;top: 110px;margin-left: -96px;width: 197px;height: 197px;} .special .floor-content3 {width: 100%;height: 850px;overflow: hidden;position: relative;} .special .floor-content3 .product01{width: 1265px;height: 850px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content3 .text01 img{display: block;} .special .floor-content3 .text01{width: 1072px;height: 833px;position: absolute;left: 50%;top: 27px;margin-left: -440px;} .special .a03{position: absolute;display: block;left: 50%;top: 245px;margin-left: -258px;width: 371px;height: 410px;} .special .floor-content4 {width: 100%;height: 850px;overflow: hidden;position: relative;} .special .floor-content4 .product01{width: 1265px;height: 850px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content4 .text01 img,.special .floor-content4 .text02 img{display: block;} .special .floor-content4 .text01{width: 822px;height: 561px;position: absolute;left: 50%;top: 213px;margin-left: -191px;} .special .a041{position: absolute;display: block;left: 50%;top: 245px;margin-left: -278px;width: 223px;height: 410px;} .special .a042{position: absolute;display: block;left: 50%;top: 245px;margin-left: -17px;width: 93px;height: 410px;} .special .floor-content5 {width: 100%;height: 999px;overflow: hidden;position: relative;} .special .floor-content5 .product01{width: 1265px;height: 999px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content5 .text01 img,.special .floor-content5 .text02 img{display: block;} .special .floor-content5 .text01{width: 1079px;height: 677px;position: absolute;left: 50%;top: 123px;margin-left: -448px;} .special .a051{position: absolute;display: block;left: 50%;top: 245px;margin-left: -287px;width: 233px;height: 410px;} .special .a052{position: absolute;display: block;left: 50%;top: 245px;margin-left: -27px;width: 74px;height: 410px;} .special .a053{position: absolute;display: block;left: 50%;top: 435px;margin-left: 53px;width: 117px;height: 160px;} .special .floor-content6 {width: 100%;height: 670px;overflow: hidden;position: relative;} .special .floor-content6 .product01{width: 1265px;height: 670px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content7 {width: 100%;height: 1209px;overflow: hidden;position: relative;} .special .floor-content7 .product01{width: 1265px;height: 1209px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content8 {width: 100%;height: 820px;overflow: hidden;position: relative;} .special .floor-content8 .product01{width: 1265px;height: 820px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content9 {width: 100%;height: 820px;overflow: hidden;position: relative;} .special .floor-content9 .product01{width: 1265px;height: 820px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content10 {width: 100%;height: 820px;overflow: hidden;position: relative;} .special .floor-content10 .product01{width: 1265px;height: 820px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content11 {width: 100%;height: 940px;overflow: hidden;position: relative;} .special .floor-content11 .product01{width: 1265px;height: 940px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content12 {width: 100%;height: 670px;overflow: hidden;position: relative;} .special .floor-content12 .product01{width: 1265px;height: 670px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content13 {width: 100%;height: 865px;overflow: hidden;position: relative;} .special .floor-content13 .product01{width: 1265px;height: 865px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content14 {width: 100%;height: 940px;overflow: hidden;position: relative;} .special .floor-content14 .product01{width: 1265px;height: 940px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content15 {width: 100%;height: 937px;overflow: hidden;position: relative;} .special .floor-content15 .product01{width: 1265px;height: 937px;position: absolute;left: 50%;margin-left: -632.5px;} .special .floor-content16 {width: 100%;height: 601px;overflow: hidden;position: relative;} .special .floor-content16 .product01{width: 1265px;height: 601 px;position: absolute;left: 50%;margin-left: -632.5px;}