._block {width: 100%;position: relative;float: left;} ._block ._bggroup {width:100%; height:100%; position:absolute; left:0; top:0; z-index:0;} ._block ._bggroup2 {opacity:0} ._block ._bggroup3 {opacity:1} ._block ._background {width:100%; height:100%; position:absolute; left:0; top:0; z-index:0;} ._block ._mask {width:100%; height:100%; position:absolute; left:0; top:0; z-index:1;} ._block ._content {width:100%;position:relative; left:0; top:0; z-index:2;float:left;} ._block .zhiding {position: absolute;right: 50%;bottom: 146px;-webkit-transition: all 1s ease-out 0s; -moz-transition: all 1s ease-out 0s; -o-transition: all 1s ease-out 0s; transition: all 1s ease-out 0s; } ._block .zhiding img{-webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s;} ._block .zhiding_action img {-webkit-transform: translateY(-10px);-moz-transform: translateY(-10px);-ms-transform: translateY(-10px); -o-transform: translateY(-10px);transform: translateY(-10px); } ._block ._title {z-index:11;}._mw0{width:100%;}._mw1920{max-width: 1920px;margin: 0 auto;} ._mw1090{max-width: 1090px;margin: 0 auto;} ._mw1300{max-width: 1300px;margin: 0 auto;} ._mw1370{max-width: 1370px;margin: 0 auto;} #_header_1 ._block{padding:46px 0px 86px 0px;margin:0px auto 0px auto;} #_header_1{position:relative;z-index:15;} .section1 #_header_1{ height:200px; display: flex; align-items: center; z-index: auto; } .section1 #_header_1 ._block{margin:0 auto 0px auto; padding:0;} #_header_1 ._title{margin-bottom:0px;} #_h{ width: 100%; float: left;} #_h .ctext{ width: 100%; float: left; } #_h .ctext .top{ width: 100%; float: left; position:relative;} #_h .ctext .logo{ line-height: 0; float: left; position: relative;} #_h .ctext .logo img{ width: auto; height:107px;} #_h .ctext .letter{ float:right;display: flex;margin-top: 5px;} #_h .ctext .letter a{ float:left; color:#000000; font-size:24px; line-height:34px; display: flex; align-items: center; justify-content: center; font-family: 'Baskerville'; font-style:italic;} #_h .ctext .letter a .tit{ display:flex; height:26px;} #_h .ctext .letter a .ico{ display: block; position: relative; width: 110px; height: 110px; top: -8px; left: -8px;} #_h .ctext .letter a .icospan{background: #ffffff; z-index: 21; width: 98px; height: 98px; position: relative; display: inline-block; margin: 0 0 0 20px;} #_h .ctext .letter a .icospan_action{border-radius: 50%;border: 1px solid #bfbfbf;overflow: hidden;} #_h .ctext .letter a .ico2{ display:none;} #_h .ctext .letter a .active.ico1{ display:none;} #_h .ctext .letter a .active.ico2{ display:block;} #_content_12 ._block{padding:0px 0px 0px 0px;margin:0px auto 0px auto;} #_content_12 ._title{margin-bottom:20px;} #_c_5 .slide_banner{ float:left; width:100%; margin:0; position:relative; z-index:3; overflow:hidden;} #_c_5 .slide_banner .slick-slide{ width:100%; padding:0; position:relative; height:84vh; padding:0 0 62px 0; line-height:0; border-bottom:5px solid #FFEA01;} #_c_5 .slide_banner .la{ float:left; width:100%; height:84vh; border-bottom:5px solid #FFEA01;} #_c_5 .slide_banner img{ width:100%;} #_c_5 .slide_banner .cont{ float:left; width:100%; position:absolute; left:0; top:113px;} #_c_5 .slide_banner .wh1370{ margin-left:auto; margin-right:auto; width:1370px;} #_c_5 .slide_banner .cont .ban1{ float:left; width:100%; color:#fff; font-size:65px; line-height:82px;font-family:'DIN'; text-transform:uppercase;/* padding:0 62px;*/} #_c_5 .slide_banner .cont .ban2{ float:left; width:100%; color:#fff; font-size:39px; line-height:48px; margin-top:20px; font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif; } #_c_5 .slide_banner .slick-dots{ height:2.2rem; bottom:9.2rem;} #_c_5 .slide_banner .slick-dots li{ background:url(../img/ban2.png) center no-repeat; background-size:100% 100%; width:25px; height:25px; margin:0 13px; text-indent:-9999px; vertical-align:top; border-radius:50%; position:relative;-webkit-transition: all 1s ease-out 0s; -moz-transition: all 1s ease-out 0s; -o-transition: all 1s ease-out 0s; transition: all 1s ease-out 0s;clip: rect(0px, 100px, 100px, 50px);} #_c_5 .slide_banner .slick-dots li.slick-active{ background:url(../img/ban1.png) center no-repeat; background-size:100% 100%; -webkit-animation:roat 4s infinite linear;animation:roat 4s infinite linear;} @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #_c_5 .next_dowm{ float:left; width:36px; line-height:0; cursor:pointer; position:absolute; left:50%; margin-left:-18px; bottom:25px; z-index:4;} #_c_5 .next_dowm img{ width:100%; height:100%; display: flex; } .banner_gonext{ -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .banner_gonext_hidden{ filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0; } #_content ._block{padding:57px 0px 18px 0px;margin:0px auto 0px auto;} #_content ._title{margin-bottom:20px;} /*.section2{ min-height:100vh;}*/ #_c{ width: 100%; float: left;} #_c .ctext{ width: 100%; float: left;} #_c .ctext .title{ width: 100%; float: left; color:#000000; font-size:56px; line-height:72px; font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif; font-weight:lighter;} #_c .ctext .title p{ font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif; background-image: -webkit-linear-gradient(bottom,#666666,#666666,#666666); color: #666666; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight:100; } #_c .ctext .title .p{ font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif; font-weight: 400; color: #000000; background-image: -webkit-linear-gradient(bottom,#000000,#000000,#000000); -webkit-background-clip: text; } #_c .ctext .title .top{font-size: 18px; line-height: 20px; vertical-align: top; zoom: 0.8;} #_c .ctext .det{ display:none; width: 100%; float: left; color:#000000; font-size:22px; line-height:38px; font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif;padding-bottom: 30px; color: #666666;} #_c .ctext .det p{ font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif;font-weight: lighter;} #_c .ctext .btn{ width:39px; height:39px; background:#FFEA01; float: left; margin-top:28px; margin-bottom:0px;position:relative; border-radius:50%; cursor: pointer} #_c .ctext .btn .icon{ width: 100%; height: 100%; } /*下面是弹窗的效果*/ .dialog { position:fixed; left: 0; top: 0; width: 100%; min-height: 100%; background: rgba(0, 0, 0, .9); z-index: 20; color: #ffffff; display: none; } .dialog_content { position: absolute; left: 50%; top: 200px; width: 90%; max-width: 1230px; box-sizing: bordre-box; transform: translate(-50%, 0); overflow-x: hidden; overflow-y: auto; padding-bottom: 30px; color: #000000; z-index: 20; display: none; } .dialog_content .block_content { background: #fff; border-radius: 0px; padding: 50px; } .dialog_content .block_content .title1 { text-align: center; } .dialog_content .block_content .title1 .tit { height: 40px; } .dialog_content .block_content .title2 { letter-spacing: 8px; font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif; background-image: -webkit-linear-gradient(bottom,#666666,#666666,#666666); color: #666666; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 100; font-size: 32px; line-height: 52px; text-align: center; margin-top: 15px; padding-bottom: 10px; } .dialog_content .block_content .main_content { } .dialog_content .block_content .main_content p { font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif; font-weight: 100; width: 100%; color: #000000; font-size: 20px; line-height: 34px; display: flex; flex-direction: column; } /*下面是弹出的幻灯片图片样式*/ .fancybox-prev span{ background-image:url("../newimg/zuojiantou.svg"); background-position:0 0; background-size: 100% 100%; width: 30px; height: 30px; left: -50px; } .fancybox-next span{ background-image:url("../newimg/youjiantou.svg"); background-position:0 0; background-size: 100% 100%; width: 30px; height: 30px; right: -50px; } .fancybox-opened .fancybox-skin{ -webkit-box-shadow:none; box-shadow:none; } .fancybox-skin{background:transparent;} .fancybox-nav span{visibility:inherit} .fancybox-close{display: none;} #_content_5 ._block{padding:20px 0px 20px 0px;margin:0px auto 0px auto;}#_content_5 ._title{margin-bottom:20px;} #_c_3 .ctext{ float:left; width:100%; height:1px; background:#7f7f7f;} #_content_2 ._block{padding:0px 0px 50px 0px;margin:0px auto 0px auto;}#_content_2 ._title{margin-bottom:20px;} #_c_1{ width: 100%; float: left;} #_c_1 .ctext{ width: 100%; float: left;} #_c_1 .ctext .selt{ width: 100%; float: left; color:#808080; font-size:16px; line-height:22px;font-family: 'DIN';font-weight: lighter;} #_c_1 .ctext .selt a{ color:#808080; display:inline-flex; padding:0 1px; position:relative;font-family: 'DIN';font-weight: lighter;} #_c_1 .ctext .selt a:after{ float:left; width:0; height:100%; content:''; position:absolute; left:0; bottom:0; background:#FFEA01;-webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index:-1; } #_c_1 .ctext .selt a.on:after{ width:100%;} #_c_1 .ctext .selt a:hover:after{ width:100%;} #_c_1 .ctext .selt span{margin-left: 6px; margin-right: 6px;} #_c_1 .ctext .list{ margin:0 -20px;} #_c_1 .ctext .list ul{float:left; width:100%; margin-top:34px;} #_c_1 .ctext .list li{ float:left; width:33.33%; margin-bottom:30px; padding:0 20px; } #_c_1 .ctext .list li a{ float:left; width:100%; } .hmore{ float:left; width:100%; margin-top:80px; display: flex; align-items: center; justify-content: center; } .hmore span{display: flex; align-items: center; justify-content: center; width:11px; height:11px; border-radius:50%; background:transparent; margin:7px; position:relative; -webkit-animation:roat 4s infinite linear;animation:roat 4s infinite linear; } .hmore span:after{ float:left; width:25px; height:25px; border-radius:50%; position:absolute; left:-7px; top:-7px; background:url(../newimg/loading.png) center no-repeat;background-size: 100% 100%; content:'';} #_c_1 .ctext .list li .img{ float:left; width:100%; line-height:0; overflow:hidden; position:relative; background:#ededed; } #_c_1 .ctext .list li .img img{-webkit-transition: all 0.3s ease-out 0s; -webkit-filter:grayscale(1); -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;} #_c_1 .ctext .list li:hover .img img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1);transform: scale(1.1); -webkit-filter:grayscale(0); } #_c_1 .ctext .list li .tit{ float:left; width:100%; color:#666666; font-size:28px; line-height:31px; padding-top:5px;padding-bottom: 3px; font-family:PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif; border-top:8px solid #FFEA01; position:relative; font-weight:lighter; } #_c_1 .ctext .list li .tit:after{ float:left; width:0; height:8px; content:''; position:absolute; left:100%; top:-8px; background:#fff;-webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-transform:translateX(-100%); -ms-transform:translateX(-100%); transform:translateX(-100%); -moz-transform:translateX(-100%); -o-transform:translateX(-100%); } #_c_1 .ctext .list li:hover .tit:after{ width:100%;} #_c_1 .ctext .list li .addr{ float:left; width:100%; color:#000000; font-size:16px; line-height:20px;font-family:PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif;} #_c_1 .ctext .list li .info{ float:left; width:100%;margin-top: 3px; color:#b3b3b3; font-size:14px; line-height:18px; font-family: 'DIN';font-weight: 100;} #_c_1 .ctext .list li a.active{ margin-top:200px; opacity:0;} #_c_1 .ctext .list li a.active_ok{margin-top:0px; opacity:1;} #_content_4 ._block{padding:0;margin:0px auto 0px auto; position:absolute; left:0; top:1px; z-index:3;} #_content_4 ._title{margin-bottom:20px;} #_content_3 ._block{padding:143px 170px 138px 170px;margin:0px auto 0px auto;} #_c_2{ width: 100%; float: left;} #_c_2 .ctext{ width: 100%; float: left;} #_c_2 .ctext .list{ float:left; width:100%; margin-top:50px;position: relative;} #_c_2 .ctext .list ul{ float:left; width:100%; padding:0 7%;} #_c_2 .ctext .list li{ float:left; width:25%; padding:0 8px; text-align:center; margin-top:15px;} #_c_2 .ctext .list li a{ float:left; width:100%;} #_c_2 .ctext .list li .img{ float:left; width:100%; line-height:0;} #_c_2 .ctext .list li .img img{/* width:10.8rem;*/ height:168px;-webkit-transition: all 1s ease-out 0s; -moz-transition: all 1s ease-out 0s; -o-transition: all 1s ease-out 0s; transition: all 1s ease-out 0s; } #_c_2 .ctext .list li .tit1{ float:left; width:100%; color:#000000; font-size:24px; line-height:32px; margin-top:-8px;font-family:'DIN Medium','DIN Medium';letter-spacing: -1px;} #_c_2 .ctext .list li .tit2{ float:left; width:100%; color:#000000; font-size:18px; line-height:26px;font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif;font-weight: lighter;} #_t{ width: 100%; float: left;} #_t .ctext{ width: 100%; float: left;display: flex; align-items: center;justify-content: center; flex-direction:column;} #_t .ctext .box{ display: flex; flex-direction:column;} #_t .ctext .en{ display: flex; color:#000000; font-size:21px; line-height:27px; text-align:center; text-transform:uppercase;font-family:'DIN Medium','DIN Medium';letter-spacing: -0.01px; padding:0 6px;} #_t .ctext .zh{ display: flex; color:#000000; font-size:56px; line-height:65px; text-align:center; margin-top:14px;font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif; letter-spacing:1px;font-weight: 100;} #_content_6 ._block{ padding:60px 0px 42px 0;margin:0px auto 0px auto; display: flex; align-items: flex-end ;} #_content_6 ._title{margin-bottom:20px;} #_c_4{ width: 100%; float: left;} #_c_4 .ctext{ width: 100%; float: left;} #_c_4 .ctext .tit1{ width: 100%; float: left; color:#000000;letter-spacing: -1px; font-size:21px; line-height:31px; text-transform:uppercase;font-family:'DIN Medium'; margin-top:300px;} #_c_4 .ctext .cont{ width: 100%; float: left; color:#000000; position:relative; margin-top:35px; border-bottom:1px solid #000;} #_c_4 .ctext .cont:after{ float:left; width:0; height:1px; position:absolute; left:0; bottom:-1px; z-index:4; content:''; background:#b3b3b3;-webkit-transition: all 1s ease-out 0s; -moz-transition: all 1s ease-out 0s; -o-transition: all 1s ease-out 0s; transition: all 1s ease-out 0s; } #_c_4 .ctext .cont .fv{ width: 100%; float: left; color:#fff; font-size:56px; line-height:67px; height:67px; background:none; border:none; padding-right:140px;font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif;font-weight: 100; position:relative;} #_c_4 .ctext .cont .btn{ float: left; color:#000; font-size:56px; line-height:67px; height:67px; background:none; border:none; position:absolute; right:0; top:0;font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif;font-weight: 100;} #_c_4 .ctext input::-webkit-input-placeholder{color:#fff;} #_c_4 .ctext input:-moz-placeholder{color:#fff;} #_c_4 .ctext input::-moz-placeholder{color:#fff;} #_c_4 .ctext input:-ms-input-placeholder{color:#fff;} #_c_4 .ctext .cont .fv.huise{color:#b3b3b3;} #_c_4 .ctext ._cont:after{ width:100%;} #_c_4 .ctext .weixin{ float:left; width:100%; margin-top:460px; display: flex; align-items: center; justify-content: center;} #_c_4 .ctext .weixin .img{ display: flex; width:109px; height:109px;} #_c_4 .ctext .weixin .text{ color:#000000; font-size:12px; line-height:18px; margin-left:20px;font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif;} #_c_4 .ctext .weixin .text p{ font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif; font-weight: lighter; color: #333333; } #_footer_7 ._block{padding:8px 0px 8px 0px;margin:0px auto 0px auto;}#_footer_7 ._title{margin-bottom:20px;} #_f{ width: 100%; float: left;} #_f .ctext{ width: 100%; float: left; padding:0 15px;} #_f .ctext .share{ float:left;} #_f .ctext .share a{ float:left; width:22px; height:22px; line-height:0; margin-right:8px;} #_f .ctext .share a img{ width:22px; height:22px; border-radius:50%;} #_f .ctext .COPYRIGHT{ float:right; color:#fff; font-size:12px; line-height:22px;} #_content_13 ._block{padding:0px 0px 320px 0px;margin:0px auto 0px auto;} #_content_13 ._title{margin-bottom:20px;} #_c_6{ width: 100%; float: left;} #_c_6 .ctext{ width: 100%; float: left;} #_c_6 .ctext .text{ width: 100%; float: left;} #_c_6 .ctext .textL{ width: 31.38%; float: left; border-top:7px solid #231816;} #_c_6 .ctext .textL .l1{ float:left; width:100%; height:203px; line-height:0; display: flex; align-items: center; border-bottom:1px solid #5b5150;} #_c_6 .ctext .textL .l1 img{ height:114px;} #_c_6 .ctext .textL .l2{ float:left; color:#000000; font-size:20px; line-height:38px; padding:37px 0 31px 0; border-bottom:2px solid #918b8b; font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif;font-weight: lighter;} #_c_6 .ctext .textL .l3{ float:left; width:100%; margin-top:18px; } #_c_6 .ctext .textL .l3 a{ float:left; width:100%; color:#000000; font-size:18px; line-height:28px;font-family:'DIN Regular';cursor: default;} #_c_6 .ctext .textR{ width: 65.69%; float: right; border-top:0.7rem solid #231816;} #_c_6 .ctext .textR .top{ float:left; width:100%; height:203px; display: flex; align-items: center; justify-content: center; border-bottom:1px solid #5b5150; flex-direction:column;} #_c_6 .ctext .textR .l1{ float:left; width:100%; color:#000000; font-size:38px; line-height:58px; margin:5px 0 18px 0;display: flex; font-family:PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif;font-weight: 100;} #_c_6 .ctext .textR .l1 .p{font-family:'DIN Regular'} #_c_6 .ctext .textR .l2{ float:left; width:100%; color:#000000; font-size:26px; line-height:38px;display: flex; font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif;} #_c_6 .ctext .textR .l3{ float:left; width:100%; color:#000000; font-size:20px; line-height:34px; margin-top:36px;display: flex; flex-direction:column; font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif; font-weight: lighter;} #_c_6 .ctext .textR .l3 p{ font-family: PingFang SC,Helvetica,PingFang SC, Microsoft YaHei,sans-serif; font-weight: 100;} #_c_6 .ctext .list{ float:left; width:100%; margin-top:8rem;position: relative;} #_c_6 .ctext .list ul{ margin:0 4px; } #_c_6 .ctext .list .l1{ float:left; width:100%; line-height:0; padding:0 5px; margin-bottom:10px;} #_c_6 .ctext .list .l2{ float:left; width:50%; line-height:0; padding:0 5px; margin-bottom:10px;} #_c_6 .ctext .list .img{ height: 100%;background-size: cover;background-position: center;background-repeat: no-repeat;} #_content_8 ._block{padding:0px 0px 0px 0px;margin:0px auto 0px auto;}#_content_8 ._title{margin-bottom:20px;} #_content_10 ._block{padding:192px 0px 182px 0px;margin:0px auto 0px auto;} .section{ overflow:hidden; float:left; width:100%; position:relative;} .section5 .fp-tableCell{display: block !important;} .section1{ min-height:100vh;} .section3{ display: flex; align-items: center; justify-content: center;} .hv100{ float:left; width:100%; height:100vh; overflow:hidden; overflow-y:auto; scrollbar-width:thin; max-height:100vh; position:relative; } .hv100::-webkit-scrollbar { width:8px; } .hv100::-webkit-scrollbar-track { background-color:#b3b3b3; border-radius:8px; } .hv100::-webkit-scrollbar-thumb { width:8px; height:60px; background-color:#FFEA01; border-radius:8px; } .gekai_1{height: 24px; float: left; width: 100%;} @-webkit-keyframes roat{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);} 100%{-webkit-transform:rotate(720deg);transform:rotate(720deg);} } @keyframes roat{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);} 100%{-webkit-transform:rotate(720deg);transform:rotate(720deg);} } .roat{-webkit-animation-name:roat;animation-name:roat;} @-webkit-keyframes right-spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(180deg); } } @-webkit-keyframes left-spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-webkit-keyframes close-wrapper { to { clip: rect(auto, auto, auto, auto); } } @-webkit-keyframes fadeInLab { 0% { top: 40px; opacity: 0; } 100% { top: 0px; opacity: 1; } } @keyframes fadeInLab { 0% { top: 40px; opacity: 0; } 100% { top: 0px; opacity: 1; } } .fadeInLab { -webkit-animation-name: fadeInLab; animation-name: fadeInLab; } #sidebar { position: fixed; top: 70px; bottom: 0; left: 0; width: 33%; background: #fff; z-index: 999999; opacity: .3; visibility: hidden; -webkit-transform: translate3d(-60%, 0, 0) scale(.99); -ms-transform: translate3d(-60%, 0, 0) scale(.99); transform: translate3d(-60%, 0, 0) scale(.99); transition: all 250ms ease-out; -webkit-transition: all 250ms ease-out } #sidebar.on { -webkit-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); opacity: 1; visibility: visible } #sidebar .control { position: absolute; top: 0; height: 68px; left: 0; width: 100%; border-bottom: 1px solid #e0e0e0 } #sidebar .control .title h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } #sidebar .control .buttons { position: absolute; right: 50px; width: 270px } #sidebar .control .buttons button { float: left; width: 90px; height: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 98px; background-color: #fff!important } #sidebar .control .buttons button.send-friend { background: url("") no-repeat -278px -300px } #sidebar .control .buttons button.send-friend .arw { left: 17% } #sidebar .control .buttons button.sidebar-send-retailer { background: url("") no-repeat -429px -300px } #sidebar .control .buttons button.profile { background: url("") no-repeat -730px -300px } #sidebar .control .buttons button.profile .arw { left: 83% } #sidebar .control .buttons button .arw { top: 59px } #sidebar .control .buttons button .arw:after { border-bottom-color: #fafafa; border-width: 0 7px 8px; margin-left: -7px } #sidebar .control .hair-cross { top: 16px; right: 16px } #sidebar .content { position: absolute; top: 68px; left: 0; right: 0; bottom: 0; overflow: auto } #sidebar .content .header h4 { font-family: durabold-p, "Helvetica Neue", Helvetica, Arial, sans-serif } #sidebar .my-duravit, #sidebar .send-a-friend { top: 0; padding-bottom: 50px; display: none; background: #fafafa; border-bottom: 1px solid #e0e0e0 } #sidebar .my-duravit.on, #sidebar .send-a-friend.on { display: block } #sidebar .my-duravit .form-container, #sidebar .send-a-friend .form-container { margin-top: 0; padding-top: 15px } #sidebar .my-duravit .foldable.closed:after, #sidebar .send-a-friend .foldable.closed:after { top: 5px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) } #sidebar .my-duravit #myduravit-profile-login { padding-bottom: 20px; position: relative; overflow: hidden } #sidebar .my-duravit #myduravit-profile-login .cancel-button { cursor: pointer } #sidebar .my-duravit #myduravit-profile-login .cancel-button:hover { text-decoration: underline } #sidebar .my-duravit #myduravit-profile-login .loader-wrapper { visibility: hidden; opacity: .3; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,.8); z-index: 1 } #sidebar .my-duravit #myduravit-profile-login .loader-wrapper .loader-circle { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px } #sidebar .my-duravit #myduravit-profile-login .loader-wrapper.on { visibility: visible; opacity: 1; -webkit-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s } #sidebar .my-duravit .myduravit-profile { margin-bottom: 20px; padding-top: 20px } #sidebar .my-duravit .myduravit-profile-buttons { padding-top: 10px } #sidebar .my-duravit .myduravit-profile-buttons #submitRegisterSidebar { float: right } #sidebar .my-duravit #loggedIn #username { font-family: durabold-p, "Helvetica Neue", Helvetica, Arial, sans-serif } #sidebar .my-duravit #loggedIn #logout { float: right; cursor: pointer } #sidebar .my-duravit #loggedIn #idb_link a { float: right } #sidebar .my-duravit #loggedIn #idb_link span { display: none } #sidebar .my-duravit #loggedIn #myduravit-profile-info { padding-bottom: 30px } #sidebar .my-duravit #loggedIn #myduravit-profile-contact { padding-top: 30px } #sidebar .my-duravit #loggedIn #myduravit-profile-password { padding-top: 30px } #sidebar .my-duravit #loggedIn #contact_data_mail { padding-bottom: 15px } #sidebar .my-duravit #loggedIn #contact_data_idb_status div { float: left } #sidebar .my-duravit #loggedIn #contact_data_idb_status div i { margin-left: 5px; margin-right: 5px; border-radius: 50%; width: 13px; height: 13px; display: block; float: left; margin-top: 4px } #sidebar .my-duravit h4 { font-family: durabold-p, "Helvetica Neue", Helvetica, Arial, sans-serif } #sidebar .save { width: 60px; height: 50px; background: url("") no-repeat -591px -300px; vertical-align: top } #sidebar .gotoprofile { margin-top: 30px; margin-bottom: 30px } #sidebar #close-profile .close-overlay, #sidebar .close-send-a-friend .close-overlay { top: 0; cursor: pointer; padding: 10px } #sidebar button.collection-profile { float: right; margin-top: 20px } #stage, .stage-container { z-index:3; background:#f2f2f2; padding: 0; height: calc(100vh - 200px) !important; border-bottom:5px solid #FFEA01; overflow: hidden } #stage .slide, .stage-container .slide { -moz-user-select: -moz-none; -webkit-user-select: none; -ms-user-select: none; user-select: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #ffffff; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } #stage .slide .item_pic_con {height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;} #stage{ -webkit-animation-name: fadeIn; /*动画名称*/ -webkit-animation-duration: 2s; /*动画持续时间*/ -webkit-animation-iteration-count: 1; /*动画次数*/ -webkit-animation-delay: 0s; /*延迟时间*/ } @-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% { opacity: 0; /*中间状态 透明度为0*/ } 100% { opacity: 1; /*结尾状态 透明度为1*/ } } #stage .item_video{background: #000;} /*下面是播放视频相关*/ .item_video_mengban{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; cursor: pointer; display: none; } .item_video_mengban img{ position: absolute; left: 50%; top: 50%; width: 80px; box-sizing: bordre-box; transform: translate(-50%, -50%); max-height: 100%; overflow-x: hidden; overflow-y: auto; } .bgVideo { width: 100%; position: fixed; height: 100%; left: 0; top: 0; right:0; bottom:0; z-index: 500; } .fullScreenVideo { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;display: none } .fullScreenVideo_show{display: block; -webkit-animation-name: fadeIn; /*动画名称*/ -webkit-animation-duration: 1s; /*动画持续时间*/ -webkit-animation-iteration-count: 1; /*动画次数*/ -webkit-animation-delay: 0s; /*延迟时间*/ } .closeVideo {position: fixed;right:10px;top:10px;z-index: 501;} #stage .slide.me-slide, .stage-container .slide.me-slide { visibility: visible } #stage .slide.me-slide:first-child.active, .stage-container .slide.me-slide:first-child.active { opacity: 1 } #stage .slide:first-child, .stage-container .slide:first-child { visibility: visible; } #stage .slide.current, .stage-container .slide.current { z-index:101 !important; } #stage .slide.video-slide .video-poster-image, .stage-container .slide.video-slide .video-poster-image { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 103; background-size: cover; background-repeat: no-repeat; background-position: center } #stage .slide.video-slide .video-poster-image .video-play-button, .stage-container .slide.video-slide .video-poster-image .video-play-button { position: absolute; width: 90px; height: 91px; background: url("") no-repeat -810px -805px; cursor: pointer; left: calc(50% - 45px); top: calc(50% - 45px); z-index: 104 } #stage .slide .hotspots, #stage .slide .image, #stage .slide .video, .stage-container .slide .hotspots, .stage-container .slide .image, .stage-container .slide .title, .stage-container .slide .video { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; height:100% !important; overflow: hidden; opacity: 1 } #stage .slide .hotspots, .stage-container .slide .hotspots { position: relative } #stage .slide .hotspots #hotspot-store, .stage-container .slide .hotspots #hotspot-store { position: absolute; left: 0; top: 85%; width: 10%; height: 15%; } #stage .slide .image, #stage .slide .video, .stage-container .slide .image, .stage-container .slide .video { display: block; z-index: 2 } #stage .slide .image img, #stage .slide .video img, .stage-container .slide .image img, .stage-container .slide .video img { height:100% !important; margin-top:0 !important; } #stage .slide .image .max-cropped-area, #stage .slide .video .max-cropped-area, .stage-container .slide .image .max-cropped-area, .stage-container .slide .video .max-cropped-area { position: absolute; display: none; border: 1px solid rgba(0,0,0,.9) } #stage .slide .image .max-cropped-area.visible, #stage .slide .video .max-cropped-area.visible, .stage-container .slide .image .max-cropped-area.visible, .stage-container .slide .video .max-cropped-area.visible { display: inline-block } #stage .slide .image span .WGA-Item-Edit, #stage .slide .video span .WGA-Item-Edit, .stage-container .slide .image span .WGA-Item-Edit, .stage-container .slide .video span .WGA-Item-Edit { margin-top: -9999px } #stage .slide .hotspots, .stage-container .slide .hotspots { z-index: 20; visibility: hidden } #stage .slide .hotspots.show, .stage-container .slide .hotspots.show { visibility: visible } #stage .slide .hotspots .eyecatch, #stage .slide .hotspots .spot, .stage-container .slide .hotspots .eyecatch, .stage-container .slide .hotspots .spot { position: absolute } #stage .slide .hotspots .eyecatch.draggable, #stage .slide .hotspots .spot.draggable, .stage-container .slide .hotspots .eyecatch.draggable, .stage-container .slide .hotspots .spot.draggable { cursor: pointer } #stage .slide .hotspots .eyecatch .eyecatcher, #stage .slide .hotspots .spot .eyecatcher, .stage-container .slide .hotspots .eyecatch .eyecatcher, .stage-container .slide .hotspots .spot .eyecatcher { top: -50%; left: -50%; opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: opacity 150ms ease-out 0s; transition: opacity 150ms ease-out 0s; -webkit-animation: circlescale 1.1s ease-out 1; animation: circlescale 1.1s ease-out 1; cursor: pointer } #stage .slide .hotspots .eyecatch .eyecatcher a[href*='media/flipping_books']:not(.open-flippingbook), #stage .slide .hotspots .spot .eyecatcher a[href*='media/flipping_books']:not(.open-flippingbook), .stage-container .slide .hotspots .eyecatch .eyecatcher a[href*='media/flipping_books']:not(.open-flippingbook), .stage-container .slide .hotspots .spot .eyecatcher a[href*='media/flipping_books']:not(.open-flippingbook) { background: 0 0; padding-left: 0 } #stage .slide .hotspots .eyecatch .eyecatcher img, #stage .slide .hotspots .spot .eyecatcher img, .stage-container .slide .hotspots .eyecatch .eyecatcher img, .stage-container .slide .hotspots .spot .eyecatcher img { width: auto } #stage .slide .hotspots .eyecatch .circle, #stage .slide .hotspots .spot .circle, .stage-container .slide .hotspots .eyecatch .circle, .stage-container .slide .hotspots .spot .circle { position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; background: rgba(255,255,255,.35); border: 1px solid #fff; border-radius: 50%; box-shadow: 0 0 60px 0 rgba(0,0,0,.7); opacity: 0; cursor: pointer; -webkit-transform: translate3d(5px, 0, 0) scale(1.8); -ms-transform: translate3d(5px, 0, 0) scale(1.8); transform: translate3d(5px, 0, 0) scale(1.8) } #stage .slide .hotspots .eyecatch .circle.show, #stage .slide .hotspots .spot .circle.show, .stage-container .slide .hotspots .eyecatch .circle.show, .stage-container .slide .hotspots .spot .circle.show { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: opacity 150ms ease-out 0s; transition: opacity 150ms ease-out 0s; -webkit-animation: circlescale 1.1s ease-out 1; animation: circlescale 1.1s ease-out 1 } #stage .slide .hotspots .eyecatch .circle.invert, #stage .slide .hotspots .spot .circle.invert, .stage-container .slide .hotspots .eyecatch .circle.invert, .stage-container .slide .hotspots .spot .circle.invert { background: rgba(255,255,255,.35); border: 1px solid #ccc } #stage .slide .hotspots .eyecatch .circle.invert .inner, #stage .slide .hotspots .spot .circle.invert .inner, .stage-container .slide .hotspots .eyecatch .circle.invert .inner, .stage-container .slide .hotspots .spot .circle.invert .inner { background: #fff; border: 1px solid #bebfc3 } #stage .slide .hotspots .eyecatch .line45, #stage .slide .hotspots .spot .line45, .stage-container .slide .hotspots .eyecatch .line45, .stage-container .slide .hotspots .spot .line45 { position: absolute; border-top: 1px solid #fff; width: 35px; height: 0; cursor: default; opacity: 0 } #stage .slide .hotspots .eyecatch .line45.bl, #stage .slide .hotspots .spot .line45.bl, .stage-container .slide .hotspots .eyecatch .line45.bl, .stage-container .slide .hotspots .spot .line45.bl { top: 18px; left: -37px; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg) } #stage .slide .hotspots .eyecatch .line45.br, #stage .slide .hotspots .spot .line45.br, .stage-container .slide .hotspots .eyecatch .line45.br, .stage-container .slide .hotspots .spot .line45.br { top: 18px; left: 2px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) } #stage .slide .hotspots .eyecatch .line45.tl, #stage .slide .hotspots .spot .line45.tl, .stage-container .slide .hotspots .eyecatch .line45.tl, .stage-container .slide .hotspots .spot .line45.tl { bottom: 18px; left: -37px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) } #stage .slide .hotspots .eyecatch .line45.tr, #stage .slide .hotspots .spot .line45.tr, .stage-container .slide .hotspots .eyecatch .line45.tr, .stage-container .slide .hotspots .spot .line45.tr { bottom: 18px; left: 2px; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg) } #stage .slide .hotspots .eyecatch .line45.show, #stage .slide .hotspots .spot .line45.show, .stage-container .slide .hotspots .eyecatch .line45.show, .stage-container .slide .hotspots .spot .line45.show { opacity: 1 } #stage .slide .hotspots .eyecatch .box, #stage .slide .hotspots .eyecatch .spotbox, #stage .slide .hotspots .spot .box, #stage .slide .hotspots .spot .spotbox, .stage-container .slide .hotspots .eyecatch .box, .stage-container .slide .hotspots .eyecatch .spotbox, .stage-container .slide .hotspots .spot .box, .stage-container .slide .hotspots .spot .spotbox { position: absolute; background: #fff; width: 360px; cursor: default; box-shadow: 0 0 30px 0 rgba(0,0,0,.1); opacity: 0; visibility: hidden; text-align: left } #stage .slide .hotspots .eyecatch .box.bl, #stage .slide .hotspots .eyecatch .spotbox.bl, #stage .slide .hotspots .spot .box.bl, #stage .slide .hotspots .spot .spotbox.bl, .stage-container .slide .hotspots .eyecatch .box.bl, .stage-container .slide .hotspots .eyecatch .spotbox.bl, .stage-container .slide .hotspots .spot .box.bl, .stage-container .slide .hotspots .spot .spotbox.bl { top: 31px; right: 32px; -webkit-transform: translate3d(10px, -10px, 0); -ms-transform: translate3d(10px, -10px, 0); transform: translate3d(10px, -10px, 0) } #stage .slide .hotspots .eyecatch .box.br, #stage .slide .hotspots .eyecatch .spotbox.br, #stage .slide .hotspots .spot .box.br, #stage .slide .hotspots .spot .spotbox.br, .stage-container .slide .hotspots .eyecatch .box.br, .stage-container .slide .hotspots .eyecatch .spotbox.br, .stage-container .slide .hotspots .spot .box.br, .stage-container .slide .hotspots .spot .spotbox.br { top: 31px; left: 32px; -webkit-transform: translate3d(-10px, -10px, 0); -ms-transform: translate3d(-10px, -10px, 0); transform: translate3d(-10px, -10px, 0) } #stage .slide .hotspots .eyecatch .box.tl, #stage .slide .hotspots .eyecatch .spotbox.tl, #stage .slide .hotspots .spot .box.tl, #stage .slide .hotspots .spot .spotbox.tl, .stage-container .slide .hotspots .eyecatch .box.tl, .stage-container .slide .hotspots .eyecatch .spotbox.tl, .stage-container .slide .hotspots .spot .box.tl, .stage-container .slide .hotspots .spot .spotbox.tl { bottom: 31px; right: 32px; -webkit-transform: translate3d(10px, 10px, 0); -ms-transform: translate3d(10px, 10px, 0); transform: translate3d(10px, 10px, 0) } #stage .slide .hotspots .eyecatch .box.tr, #stage .slide .hotspots .eyecatch .spotbox.tr, #stage .slide .hotspots .spot .box.tr, #stage .slide .hotspots .spot .spotbox.tr, .stage-container .slide .hotspots .eyecatch .box.tr, .stage-container .slide .hotspots .eyecatch .spotbox.tr, .stage-container .slide .hotspots .spot .box.tr, .stage-container .slide .hotspots .spot .spotbox.tr { bottom: 31px; left: 32px; -webkit-transform: translate3d(-10px, 10px, 0); -ms-transform: translate3d(-10px, 10px, 0); transform: translate3d(-10px, 10px, 0) } #stage .slide .hotspots .eyecatch .box.show, #stage .slide .hotspots .eyecatch .spotbox.show, #stage .slide .hotspots .spot .box.show, #stage .slide .hotspots .spot .spotbox.show, .stage-container .slide .hotspots .eyecatch .box.show, .stage-container .slide .hotspots .eyecatch .spotbox.show, .stage-container .slide .hotspots .spot .box.show, .stage-container .slide .hotspots .spot .spotbox.show { opacity: 1; visibility: visible; z-index: 1; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: opacity 150ms ease-out 0s, transform 150ms ease-out 0s; -webkit-transition: opacity 150ms ease-out 0s, -webkit-transform 150ms ease-out 0s } #stage .slide .hotspots .eyecatch .box.xtra-large, #stage .slide .hotspots .eyecatch .spotbox.xtra-large, #stage .slide .hotspots .spot .box.xtra-large, #stage .slide .hotspots .spot .spotbox.xtra-large, .stage-container .slide .hotspots .eyecatch .box.xtra-large, .stage-container .slide .hotspots .eyecatch .spotbox.xtra-large, .stage-container .slide .hotspots .spot .box.xtra-large, .stage-container .slide .hotspots .spot .spotbox.xtra-large { width: 540px } #stage .slide .hotspots .eyecatch .box .btn-hide, #stage .slide .hotspots .eyecatch .spotbox .btn-hide, #stage .slide .hotspots .spot .box .btn-hide, #stage .slide .hotspots .spot .spotbox .btn-hide, .stage-container .slide .hotspots .eyecatch .box .btn-hide, .stage-container .slide .hotspots .eyecatch .spotbox .btn-hide, .stage-container .slide .hotspots .spot .box .btn-hide, .stage-container .slide .hotspots .spot .spotbox .btn-hide { position: absolute; right: 0; top: 0; color: #000; opacity: .5; font-family: Arial, sans; font-size: 18px; line-height: .5; z-index: 101; padding: 20px } #stage .slide .hotspots .eyecatch .box .spotbox-container, #stage .slide .hotspots .eyecatch .spotbox .spotbox-container, #stage .slide .hotspots .spot .box .spotbox-container, #stage .slide .hotspots .spot .spotbox .spotbox-container, .stage-container .slide .hotspots .eyecatch .box .spotbox-container, .stage-container .slide .hotspots .eyecatch .spotbox .spotbox-container, .stage-container .slide .hotspots .spot .box .spotbox-container, .stage-container .slide .hotspots .spot .spotbox .spotbox-container { display: block; padding: 20px; text-decoration: none } #stage .slide .hotspots .eyecatch .box .spotbox-container .spotbox-image, #stage .slide .hotspots .eyecatch .spotbox .spotbox-container .spotbox-image, #stage .slide .hotspots .spot .box .spotbox-container .spotbox-image, #stage .slide .hotspots .spot .spotbox .spotbox-container .spotbox-image, .stage-container .slide .hotspots .eyecatch .box .spotbox-container .spotbox-image, .stage-container .slide .hotspots .eyecatch .spotbox .spotbox-container .spotbox-image, .stage-container .slide .hotspots .spot .box .spotbox-container .spotbox-image, .stage-container .slide .hotspots .spot .spotbox .spotbox-container .spotbox-image { background: no-repeat center center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-behavior: url(""); width: 100%; height: 100px } #stage .slide .hotspots .eyecatch .box .spotbox-container .spotbox-image.product, #stage .slide .hotspots .eyecatch .spotbox .spotbox-container .spotbox-image.product, #stage .slide .hotspots .spot .box .spotbox-container .spotbox-image.product, #stage .slide .hotspots .spot .spotbox .spotbox-container .spotbox-image.product, .stage-container .slide .hotspots .eyecatch .box .spotbox-container .spotbox-image.product, .stage-container .slide .hotspots .eyecatch .spotbox .spotbox-container .spotbox-image.product, .stage-container .slide .hotspots .spot .box .spotbox-container .spotbox-image.product, .stage-container .slide .hotspots .spot .spotbox .spotbox-container .spotbox-image.product { background: no-repeat center center; background-size: contain; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; -ms-behavior: url("") } #stage .slide .hotspots .eyecatch .box .spotbox-container h6, #stage .slide .hotspots .eyecatch .spotbox .spotbox-container h6, #stage .slide .hotspots .spot .box .spotbox-container h6, #stage .slide .hotspots .spot .spotbox .spotbox-container h6, .stage-container .slide .hotspots .eyecatch .box .spotbox-container h6, .stage-container .slide .hotspots .eyecatch .spotbox .spotbox-container h6, .stage-container .slide .hotspots .spot .box .spotbox-container h6, .stage-container .slide .hotspots .spot .spotbox .spotbox-container h6 { margin-top: 0 } #stage .slide .hotspots .eyecatch .box .spotbox-container a.button, #stage .slide .hotspots .eyecatch .spotbox .spotbox-container a.button, #stage .slide .hotspots .spot .box .spotbox-container a.button, #stage .slide .hotspots .spot .spotbox .spotbox-container a.button, .stage-container .slide .hotspots .eyecatch .box .spotbox-container a.button, .stage-container .slide .hotspots .eyecatch .spotbox .spotbox-container a.button, .stage-container .slide .hotspots .spot .box .spotbox-container a.button, .stage-container .slide .hotspots .spot .spotbox .spotbox-container a.button { background: no-repeat right -14px; background-color: #505050 } #stage .slide .hotspots .eyecatch .box .col-md-4, #stage .slide .hotspots .eyecatch .spotbox .col-md-4, #stage .slide .hotspots .spot .box .col-md-4, #stage .slide .hotspots .spot .spotbox .col-md-4, .stage-container .slide .hotspots .eyecatch .box .col-md-4, .stage-container .slide .hotspots .eyecatch .spotbox .col-md-4, .stage-container .slide .hotspots .spot .box .col-md-4, .stage-container .slide .hotspots .spot .spotbox .col-md-4 { padding-right: 0 } #stage .slide .hotspots .eyecatch .box .p, #stage .slide .hotspots .eyecatch .spotbox .p, #stage .slide .hotspots .spot .box .p, #stage .slide .hotspots .spot .spotbox .p, .stage-container .slide .hotspots .eyecatch .box .p, .stage-container .slide .hotspots .eyecatch .spotbox .p, .stage-container .slide .hotspots .spot .box .p, .stage-container .slide .hotspots .spot .spotbox .p { margin: 10px 0 } #stage .slide .hotspots .eyecatch .box .WGA-Item, #stage .slide .hotspots .eyecatch .spotbox .WGA-Item, #stage .slide .hotspots .spot .box .WGA-Item, #stage .slide .hotspots .spot .spotbox .WGA-Item, .stage-container .slide .hotspots .eyecatch .box .WGA-Item, .stage-container .slide .hotspots .eyecatch .spotbox .WGA-Item, .stage-container .slide .hotspots .spot .box .WGA-Item, .stage-container .slide .hotspots .spot .spotbox .WGA-Item { text-align: left } #stage .slide .hotspots .eyecatch .box .WGA-Item .WGA-Item-Edit, #stage .slide .hotspots .eyecatch .spotbox .WGA-Item .WGA-Item-Edit, #stage .slide .hotspots .spot .box .WGA-Item .WGA-Item-Edit, #stage .slide .hotspots .spot .spotbox .WGA-Item .WGA-Item-Edit, .stage-container .slide .hotspots .eyecatch .box .WGA-Item .WGA-Item-Edit, .stage-container .slide .hotspots .eyecatch .spotbox .WGA-Item .WGA-Item-Edit, .stage-container .slide .hotspots .spot .box .WGA-Item .WGA-Item-Edit, .stage-container .slide .hotspots .spot .spotbox .WGA-Item .WGA-Item-Edit { margin-top: 0 } #stage .slide .before-in-left, .stage-container .slide .before-in-left { visibility: visible; -webkit-transform: translate3d(-25%, 0, 0); -ms-transform: translate3d(-25%, 0, 0); transform: translate3d(-25%, 0, 0) } #stage .slide .before-in-right, .stage-container .slide .before-in-right { visibility: visible; -webkit-transform: translate3d(25%, 0, 0); -ms-transform: translate3d(25%, 0, 0); transform: translate3d(25%, 0, 0) } #stage .slide .no-css-before-in-right, .stage-container .slide .no-css-before-in-right { left: 100% } #stage .slide .no-css-before-in-left, .stage-container .slide .no-css-before-in-left { left: -100% } #stage .slide .move-in, .stage-container .slide .move-in { visibility: visible; transition: transform 1s cubic-bezier(.12, .945, .395, 1) 1ms; -webkit-transition: -webkit-transform 1s cubic-bezier(.12, .945, .395, 1) 1ms } #stage .slide .move-out, .stage-container .slide .move-out { visibility: visible; transition: transform .7s cubic-bezier(.55, .085, .68, .53); -webkit-transition: -webkit-transform .7s cubic-bezier(.55, .085, .68, .53) } #stage .slide .move-out img, .stage-container .slide .move-out img { transition: transform .7s cubic-bezier(.55, .085, .68, .53); -webkit-transition: -webkit-transform .7s cubic-bezier(.55, .085, .68, .53) } #stage .slide .after-out-left, .stage-container .slide .after-out-left { -webkit-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } #stage .slide .after-out-left img, .stage-container .slide .after-out-left img { -webkit-transform: translate3d(50%, 0, 0); -ms-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0) } #stage .slide .after-out-right, .stage-container .slide .after-out-right { -webkit-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } #stage .slide .after-out-right img, .stage-container .slide .after-out-right img { -webkit-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0) } #stage .slide.ani-bounce-left, .stage-container .slide.ani-bounce-left { transition-duration: .15s; -webkit-transform: translate3d(50px, 0, 0); -ms-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0) } #stage .slide.ani-bounce-right, .stage-container .slide.ani-bounce-right { transition-duration: .15s; -webkit-transform: translate3d(-50px, 0, 0); -ms-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0) } #stage .slide .zoomed-in, .stage-container .slide .zoomed-in { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } #stage .slide .zoomed-out, .stage-container .slide .zoomed-out { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1 } #stage div.content-modules, .stage-container div.content-modules { height: 100%; position: relative } #stage .indicator-wrapper, .stage-container .indicator-wrapper { position: absolute; left: 0; height:2.2rem; bottom:9.2rem; width: 100%; z-index: 102; } .loader-circle{ height:100vh;} @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400); .timer { float:left; border-radius: 50%; height: 24px; position:relative; margin:0 14px; width: 24px; cursor: pointer; } .timer:after { float:left; border-radius: 50%; content: ""; display: block; height: 24px; left: 7px; position: absolute; width: 24px; top: 7px; } .timer .hand { float: left; height: 100%; overflow: hidden; position: relative; width: 50%; } .timer .yuan { position: absolute; width: 12px; background: #ffea00; top: 6px; left: 6px; border-radius: 100%; height: 12px; } .timer .hand span { border: 1px solid rgba(255, 234, 1, 1); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border-bottom-color: transparent; border-left-color: transparent; border-radius: 50%; display: block; height: 0; position: absolute; right: 1px; top: 0; transform: rotate(225deg); width: 0; } .timer.active:after{border:none;} .timer .hand:first-child { transform: rotate(180deg); } .timer .hand span { animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; } .timer .hand:first-child span { animation-name: spin1; } .timer .hand:last-child span { animation-name: spin2; } .timer.hour .hand span { animation-duration: 100s; border-top-color: rgba(255, 234, 1, 1); border-right-color: rgba(255, 234, 1, 1); border-width:24px; } .timer.hour:after { height: 24px; left: 0; width: 24px; top: 0; } .timer.minute { height: 24px; left: 0; width: 24px; top: 0; } .timer.minute .hand span {display: none;animation-duration: 6s; border-top-color: rgba(255, 234, 1, 1);border-right-color: rgba(255, 234, 1, 1);border-width: 1px;box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 24px; height: 24px; } .timer.minute.active .hand span{ display:block;} .timer.minute:after { height: 24px; left: 0; width: 24px; top: 0;} @keyframes spin1 { 0% { transform: rotate(225deg); } 50% { transform: rotate(225deg); } 100% { transform: rotate(405deg); } } @keyframes spin2 { 0% { transform: rotate(225deg); } 50% { transform: rotate(405deg); } 100% { transform: rotate(405deg); } } /*****************************屏幕小于1600px*********************************************/ @media screen and (max-width:1600px){ #_c_4 .ctext .weixin{ margin-top:250px;} } /*****************************屏幕小于1300px*********************************************/ @media screen and (max-width:1370px){ } /*****************************屏幕小于1200px*********************************************/ @media screen and (max-width:1200px){ #_c_5 .slide_banner .cont{ top:84px;} #_c_5 .slide_banner .wh1370{ width:100%;} #_c_5 .slide_banner .cont .ban1{ font-size:48px; line-height:60px;} #_c_5 .slide_banner .cont .ban2{ font-size:29px; line-height:40px; margin-top:15px;} #_c .ctext .title{ font-size:40px; line-height:52px;} #_c .ctext .det{ font-size:20px; line-height:32px;} #_c_1 .ctext .list li .tit{ font-size:28px; line-height:30px;} #_c_2 .ctext .list ul{ padding:0 2%;} #_c_2 .ctext .list li .tit1{ font-size:22px; line-height:30px;font-family: 'DIN Medium';} #_t .ctext .zh{ font-size:41px; line-height:51px;} #_c_4 .ctext .cont .fv{ font-size:41px; line-height:53px;height:53px; padding-right:130px;} #_c_4 .ctext .cont .btn{ font-size:41px; line-height:53px;height:53px;} } /*****************************屏幕小于992px*********************************************/ @media screen and (max-width:992px){ #stage .stage-container{ height:86vh !important;} #_c_5 .slide_banner{} #_c_5 .slide_banner .slick-slide{ height:91vh;} #_c_5 .slide_banner .la{ height:91vh; border-bottom:3px solid #FFEA01;} #_c_5 .slide_banner .cont{ top:84px;} #_c_5 .slide_banner .wh1370{ width:100%;} #_c_5 .slide_banner .cont .ban1{ font-size:33px; line-height:45px; padding:0 15px;} #_c_5 .slide_banner .cont .ban2{ font-size:20px; line-height:30px; padding:0 15px; margin-top:10px;} #_c_5 .slide_banner .slick-dots{ height:25px; bottom:72px;} #_c_5 .slide_banner .slick-dots li{ margin:0 6px; } #_c_5 .next_dowm{ bottom:20px; margin-left:-15px; width:30px;} #_c_5 .next_dowm img{ width:30px; height:30px; } #_c .ctext .title{ font-size:22px; line-height:34px;} #_c .ctext .det{ font-size:16px; line-height:28px; margin-top:16px;padding-bottom: 0;} #_c .ctext .btn{ margin-top:18px; width:33px; height:33px;} #_c_1 .ctext .list{ margin:0 -11px; } #_c_1 .ctext .list ul{margin-top:24px;} #_c_1 .ctext .list li{ padding:0 11px;} #_c_1 .ctext .list li .tit{ border-top:4px solid #FFEA01; font-size:20px; line-height:28px;} #_c_2 .ctext .list ul{ padding:0;} #_c_2 .ctext .list li .img img{ height:110px;} #_c_2 .ctext .list li .tit1{ font-size:20px; line-height:28px; margin-top:-5px;} #_c_2 .ctext .list li .tit1{ font-size:16px; line-height:24px;} #_c_2 .ctext .list li .tit2{font-size: 14px;} #_t .ctext .en{ font-size:13px; line-height:20px; padding:0 3px; letter-spacing:0;font-family: 'DIN Medium';letter-spacing: -0.15px;} #_t .ctext .zh{ font-size:33px; line-height:40px; margin-top:5px; justify-content: center;} #_c_4 .ctext .tit1{ font-size:16px; line-height:26px;} #_c_4 .ctext .cont{ margin-top:20px;} #_c_4 .ctext .cont .fv{ font-size:26px; line-height:40px;height:40px; padding-right:80px;} #_c_4 .ctext .cont .btn{ font-size:26px; line-height:40px;height:40px;} #_c_4 .ctext .weixin .text{ margin-left:24px;} #_c_6 .ctext .textL{ border-top:3px solid #231816;} #_c_6 .ctext .textL .l1{ height:153px;} #_c_6 .ctext .textL .l1 img{ height:76px;} #_c_6 .ctext .textL .l2{ font-size:20px; line-height:30px; padding:20px 0 16px 0;} #_c_6 .ctext .textR{ border-top:3px solid #231816;} #_c_6 .ctext .textR .top{ height:153px;} #_c_6 .ctext .textR .l1{ font-size:32px; line-height:42px; margin:0 0 9px 0;} #_c_6 .ctext .textR .l2{ font-size:20px; line-height:30px;} #_c_6 .ctext .textR .l3{ font-size:16px; line-height:28px; margin-top:18px;} #_c_6 .ctext .list{ margin-top:40px;} #_c .ctext .det p{ letter-spacing: 0.5px; line-height: 26px;} #_c_1 .ctext .selt a{ font-size: 14px;} .dialog_content .block_content .main_content p{ font-size:16px; line-height:28px;} } /*****************************屏幕小于768px*********************************************/ @media screen and (max-width:768px){ #_header_1 .header_content_1{margin-top: 8px;} #_header_1 ._block{padding:0px 15px 0px 15px;margin:15px auto 0px auto;} #_content_12 ._block{margin:0px auto 0px auto;} #_content ._block{padding:20px 15px 5px 15px;margin:0px auto 0px auto;padding-top:20px !important;} #_content_5{ display:none;}#_content_5 ._block{padding:20px 0 20px 0;margin:0px auto 0px auto;} #_content_2 ._block{padding:20px 15px 20px 15px;margin:0px auto 0px auto;} .dialog_content .block_content .title2{ letter-spacing: 4px; font-size: 26px; line-height: 38px; padding-bottom: 0px;} .dialog_content .block_content .title1 .tit{height: 28px;} .dialog_content .block_content{padding: 30px;} #_content_4 ._block{padding:0;margin:0px auto 0px auto;} .hmore{ margin-top:20px;} #_content_3 ._block{padding:42px 15px 30px 15px;margin:0px auto 0px auto;} #_content_6 ._block{padding:80px 15px 50px 15px;margin:0px auto 0px auto; min-height:inherit;} #_footer_7 ._block{padding:13px 15px 13px 15px;margin:0px auto 0px auto;} #_content_13 ._block{padding:20px 15px 20px 15px;margin:0px auto 0px auto;} #_content_8 ._block{padding:20px 0px 20px 0px;margin:0px auto 0px auto;} #_content_10 ._block{padding:20px 15px 20px 15px;margin:0px auto 0px auto;} #_c_5 .slide_banner .cont{ top:5rem;} #_c_5 .slide_banner .cont .ban1{ font-size:28px; line-height:38px;} #_c_5 .slide_banner .cont .ban2{ font-size:18px; line-height:28px; margin-top:6px;} #_c_5 .slide_banner .slick-slide{ height:70vh;} #_c_5 .slide_banner .la{ height:70vh;} #_c_2 .ctext .list{ margin-top:5px;} #_c_1 .ctext .list{ margin:0 -5px; } #_c_1 .ctext .list ul{ margin-top:20px; } #_c_1 .ctext .list li{width:100%; padding:0 7px; } #_c_2 .ctext .list li{ width:50%; margin-top:12px; margin-bottom:12px;} .hmore{ position:static;} #_f .ctext .share{ width:100%; text-align:center; display: flex; align-items: center; justify-content: center; display:none;} #_f .ctext .share a{ float:none; display: flex; margin:0 5px;} #_f .ctext .COPYRIGHT{ width:100%; text-align:center; margin:0;} #_c_4 .ctext .tit1{ display:none;} #_c_4 .ctext .cont{ display:none;} #_c_6 .ctext .textL{ width: 100%;} #_c_6 .ctext .textL .l1{ height:auto; padding:20px 0;} #_c_6 .ctext .textR{ width: 100%; margin-top:30px;} #_c_6 .ctext .textR .top{ height:auto; padding:30px 0;} #_c_6 .ctext .textR .l1{ font-size:24px; line-height:34px; letter-spacing:0;} #_c_6 .ctext .textR .l2{ font-size:18px; line-height:28px;} #_c_4 .ctext .weixin{ margin-top:0; flex-direction:column;} #_c_4 .ctext .weixin .text{ width:100%; margin:49px 0 0 0; text-align:center;} .section1 #_header_1{ height:auto; padding:24px 15px 24px 15px;} #_h .ctext .logo{ width:100%;} #_h .ctext .logo img{ height:90px;} #_h .ctext .letter{ margin-top:22px;} #_h .ctext .letter a .tit{ height:18px;} #_h .ctext .letter a .ico{width: 56px; height: 56px; top: -4px; left: -4px;} #_h .ctext .letter a .icospan{width:49px; height:49px; margin:0 0 0 9px;} #_c .ctext .btn{ display:none;} #_c .ctext .det{ display:block;} #_t .ctext .en{ line-height:18px;} #_t .ctext .zh{ line-height:37px; margin-top:0;} #_c .ctext .title { letter-spacing:0;} #_c .ctext .title .top{ font-size:10px; line-height:16px; color: #000000;font-family: 'DIN';zoom: 0.8;} #_c_4 .ctext .weixin .text p{letter-spacing: 0.01px;} #_c_4 .ctext .weixin .text .getin{letter-spacing: -1px;} ._block .zhiding{display: none} .dialog_content { top: 194px; } .hv100{ height:auto; max-height:inherit; overflow:visible; overflow-y:visible;} .section1{ min-height:inherit;} .fp-tableCell{ height:auto !important; display:block; float:left;} .gekai_1{height: 4px; float: left; width: 100%;} }