/**初始**/ @font-face { font-family: "DINCOND"; src: url("../font/dincond-bold.woff2") format("woff2"), url("../font/dincond-bold.woff") format("woff"), url("../font/dincond-bold.ttf") format("truetype"), url("../font/dincond-bold.eot") format("embedded-opentype"), url("http://www.anzon.cn/fonts/dincond-bold.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "Helvetica"; src: url("../font/helveticaneueltpro-thcn.woff2") format("woff2"), url("../font/helveticaneueltpro-thcn.woff") format("woff"), url("../font/helveticaneueltpro-thcn.ttf") format("truetype"), url("../font/helveticaneueltpro-thcn.eot") format("embedded-opentype"), url("http://www.anzon.cn/fonts/helveticaneueltpro-thcn.svg") format("svg"); font-weight: normal; font-style: normal; } * {outline: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; margin: 0; padding: 0;} html {font: normal 14px "Microsoft YaHei";-webkit-text-size-adjust: 100%} body {padding: 0;margin: 0 auto;font-size: 14px; line-height:24px; color: #555555; background: url("../image/bg3.png") repeat; font-family: "Microsoft YaHei","Arial"; -webkit-text-size-adjust: none; /*取出点击出现半透明的灰色背景*/ -webkit-tap-highlight: rgba(0,0,0,0); /*控制内容的可选择性*/ /*-webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;*/ } input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;} ul, li, form, dl, dt, dd, div, ol, figure, aside{padding: 0;margin: 0;} .ul, .ul li {list-style: none;} table {border-collapse: collapse;border-spacing: 0} table td {border-collapse: collapse;font-size: 14px;} select, input, textarea {font-size: 14px;color: #333;border-radius: 0;-webkit-border-radius: 0;font-family: "Microsoft YaHei";} img{border: none;max-width: 100%;vertical-align: middle;} a {color: #333;text-decoration: none;noline:-webkit-tap-highlight-color:rgba(0,0,0,0);/* 去掉链接触摸高亮 */} a:hover {color: black;text-decoration: none;} a:focus {color: #000;outline: none;-moz-outline: none;} a:active {color: #000;} pre{ white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; margin:0; font-family: "Microsoft YaHei"; text-align:justify; text-justify:inter-ideograph; } .clear {clear: both;height: 0px;overflow: hidden;zoom: 0;} .clearfix {*zoom:1;}/*IE/7/6*/ .clearfix:after {content:" "; display:block; height:0; clear:both; } .dot{display: block;white-space: nowrap; text-overflow: ellipsis;overflow: hidden;} /*2行文本省略号*/ .dot2 {display: -webkit-box;display: box;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2;} .Ispic{ background-repeat:no-repeat; background-position:center center; background-size:cover;} .Isimg{ position: absolute; left: 50%; top: 50%; max-width: 100%; max-height: 100%; transform: translate(-50%,-50%);} .Isimg_2{ position: absolute; left: 0; top: 0; width: 100%;height: 100%; transition: transform .8s ease-in-out;} /*:before, :after{ position:absolute; content:'';}*/ :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .fl{ float: left;} .fr{ float: right;} .slick-slider { position: relative; display: block; -webkit-touch-callout: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { position: relative; z-index: 1; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list: focus { outline: none } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; min-height: 1px; } [dir = 'rtl'] .slick-slide { float: right; } .slick-slide .slick-loading img { display: none; } .slick-slide .dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow .slick-hidden { display: none; } .slick-arrow{ width: 40px; height: 40px; position: absolute; top: 50%; margin-top: -20px; background: url("../image/icon2.png") no-repeat left center; border: none; z-index: 10; font-size: 0; cursor: pointer;} .slick-prev{ transform: rotate(-180deg); left: 3%;} .slick-next{ right: 3%;} .slick-arrow:hover{ background-position: right center;} .w1720{ max-width:1720px; margin:0 auto;} @media(max-width:1720px){.w1720{ padding:0 2%;}} .w1600{ max-width:1600px; margin:0 auto;} @media(max-width:1600px){.w1600{ padding:0 2%;}} .w1200{ max-width:1200px; margin:0 auto;} @media(max-width:1200px){.w1200{ padding:0 2%;}} @keyframes shiny { 0% { opacity:1; } 50% { opacity:0.5; } 100% { opacity:1; } } @-webkit-keyframes shiny { 0% { opacity:1; } 50% { opacity:0.5; } 100% { opacity:1; } } @-moz-keyframes shiny { 0% { opacity:1; } 50% { opacity:0.5; } 100% { opacity:1; } } .Header{ position:fixed; left: 0; top: 0; width: 100%; text-align: center; z-index: 200; transition: all 0.5s; background:#1f181c; opacity: 0.7;} .Header .logo{ padding: 1.5% 0; transition: all 0.5s;} .Header .logo img{ position: relative; z-index: 10;} .Header .img2{ display: none;} .Header .logo.hide{ opacity: 0;} .Header .top_icon{ position: absolute; right: 2%; bottom: 20%;} .Header .top_icon dd{ width: 38px; height: 30px; bottom: 24%; z-index: 5; display: inline-block; margin-left: 43px; } .Header .top_icon dd > a{ display: block; width: 100%; height: 100%; background: url("../image/top_icon1.png") no-repeat center;} .Header dd.top-search{ } .Header dd.top-search > a{ background-image: url("../image/top_icon2.png");} .Header dd.openMenu{position:relative;} .Header dd.openMenu:before {opacity:0; animation:shiny 2s infinite;-moz-animation:shiny 2s infinite;-webkit-animation:shiny 2s infinite; -o-animation:shiny 2s infinite; width:38px; height:30px; content:''; display:block; position:absolute; right:0; top:0; background:url(../image/top_icon3_s.png) no-repeat right center;} .Header #open_menu{ background: url("../image/top_icon3.png") no-repeat center; width: 100%; height: 30px; cursor: pointer; position:relative; z-index:1;} .Header dd.openMenu:hover:before {display:none;} .Header #open_menu:hover {background-image:url(../image/top_icon3_h.png);} .Header dd.cart{ left: auto; right: 0; display: none;} .Header dd.cart a{ background-image: url("../image/top_icon4.png");} .Header_opacity{ opacity: 0;} .Header_white, .Header_white2{ } .Header_show{ opacity: 1;} .blank {height:107px;} /*.Header_white .img2, .Header_white2 .img2{ display: inline-block;} .Header_white .img1, .Header_white2 .img1{ display: none;} .Header_white dd.lang > a, .Header_white2 dd.lang > a{ background-image: url("../images-1/top_icon5.png");} .Header_white dd.top-search > a, .Header_white2 dd.top-search > a{ background-image: url("../images-1/top_icon6.png");} .Header_white #open_menu, .Header_white2 #open_menu{ background-image: url("../images-1/top_icon7.png");} .Header_white dd.cart > a, .Header_white2 dd.cart > a{ background-image: url("../images-1/top_icon8.png");}*/ .Index_box2 .Header_white2 .logo{ padding: 0.8% 0;} .Index_box_show .Header{ background: none;} .Index_box_show .Header .img1{ display: inline-block;} .Index_box_show .Header .img2{ display: none;} .Index_box_show .Header dd.lang > a{ background-image: url("../image/top_icon2.png");} .Index_box_show .Header dd.top-search > a{ background-image: url("../image/top_icon2.png");} .Index_box_show .Header dd.cart > a{ background-image: url("../image/top_icon4.png");} .Header_ceramic:before{ content: ''; opacity: 0.6; position: absolute; width: 100%; height: 100%; left: 0;top: 0; background: -webkit-linear-gradient(top,black, rgba(255,255,255,0)); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(top,black, rgba(255,255,255,0)); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(top,black, rgba(255,255,255,0)); /* Firefox 3.6 - 15 */ background: -ms-linear-gradient(top, black, rgba(255,255,255,0)); background: linear-gradient(top,black, rgba(255,255,255,0));} .Header_white:before{ display: none;} .search-open, .open_Nav{ position: fixed; left: 0; top: 0; width: 100%; height: 0; /* background: url("../images-1/bg1.png") repeat; */ background:#1f181cb3; z-index: 6; opacity: 0; transition: all 0.5s;} .search-open{ z-index: 201;} .search-open *{ display: none;} .search-open .search-logo{ text-align: center; display: block;} .search-open .search-box{ position: absolute; left: 50%; top: 50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%); width: 96%; max-width: 768px; display: none;} .search-open .search-box .box{ position: relative; margin-top: 10%; display: block;} .search-open .close{ position: absolute; right: 5%; top: 5%; width: 50px; height: 50px; cursor: pointer;} .search-open .close:before, .search-open .close:after{ content: ''; position: absolute; width: 1px; height: 80%; background: #fff;} .search-open .close:before{ transform: rotate(-45deg);} .search-open .close:after{ transform: rotate(45deg);} .search-box .text{ display: block; width: 100%; border: 1px solid #f5f5f5; background: #fff; padding:0 50px 0 10px; height: 60px; line-height: 60px; font-size: 16px; color: #666;} .search-box .btn{ position: absolute; right: 0; top: 0; line-height: 60px; width: 50px; text-align: center; font-size: 20px; color: #333;} .open-search-show{ opacity: 1; height: 100%;} .open-search-show *{ display: inline-block;} .open-search-show .search-box{ display: block;} .open_Nav{ width: 50%; left: auto; right: 0; opacity: 0; height: 100%; z-index: 300; transition: all 0.5s; transform: translateX(100%); position: fixed;min-width: 768px;} .open_Nav:before{ content: ''; width: 100%; right: 100%; top: 0; height: 100%; position: absolute; z-index: 1; display: none;} .open_Nav .Nav_con{ position: relative; width: 100%; height: 100%; overflow: auto; z-index: 2;} .header-menu-show{ opacity: 1; transform: translateX(0);} /*.header-menu-show:before{ display: block;}*/ .open_Nav .nav_logo{ padding: 6% 0; border-bottom: 1px solid rgba(255,255,255,0.1);text-align: center;} .open_Nav .nav_lang{ text-align: center; margin: 2% 0 0;} .open_Nav .nav_lang a, .open_Nav .nav_lang em{ display: inline-block; vertical-align: middle; color: #fff; font-size: 16px;} .open_Nav .nav_lang em{ margin: 0 10px; font-style: normal;} .open_Nav .nav_lang .on{ color: #235f62;} .open_Nav ul{ width: 33.33%; position: relative;} .open_Nav li >a { display: block; padding-left: 31.5%; color: #fff; line-height: 80px; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: left; font-size: 24px; position: relative; padding-right: 25px;} .open_Nav .sub_two, .open_Nav .sub_three{ position: absolute; left: 100%; width: 100%; top: 0; display: none;} .open_Nav .sub_two{ top: 30px;} .open_Nav .sub_two dd > a{color: #9398a3;line-height: 36px;font-size: 16px;display: block;padding-left: 25%;text-align: left;width: 88%;position: relative;padding-right: 15px;} .open_Nav .navA:before, .open_Nav .navA:after, .open_Nav .sub_three i:before, .open_Nav .sub_three i:after{content: '';position: absolute;right: 0;width: 8px;height: 1px;background: #235f62;top: 50%;} .open_Nav .navA:before, .open_Nav .sub_three i:before{transform: rotate(-45deg);margin-top: 3px;} .open_Nav .navA:before, .open_Nav .navA:after{ opacity: 0;} .open_Nav .navA:after, .open_Nav .sub_three i:after{transform: rotate(45deg);margin-top: -2px;} .open_Nav li >.navA:before, .open_Nav li >.navA:after{ width: 15px;} .open_Nav li >.navA:before{margin-top: 8px;} .open_Nav li >.navA:after{margin-top: -3px;} .open_Nav .sub_three{ width: 90%; top: 10px; text-align: left; overflow: hidden; padding-left: 15%;} .open_Nav .sub_three figure{ overflow: hidden;} .open_Nav .sub_three h3, .open_Nav .sub_three p{ color: #a8adb5;} .open_Nav .sub_three h3{ padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 16px; font-weight: normal; margin: 4% 0 6%;} .open_Nav .sub_three p{ margin-bottom: 11%; max-width: 227px;} .open_Nav .sub_three img{ transition: all 0.5s;} .open_Nav .sub_three span{ color: #235f62; display: inline-block; position: relative; padding-right: 20px;} .open_Nav .sub_three i{ display: inline-block; width:15px; height: 15px; position: absolute; left: 30px; top: 50%; margin-top: -7px; transition: all 0.5s;} .open_Nav .sub_three span:after{ content: ''; height: 1px; background: #235f62; position: absolute; left: 40px; top: 50%; margin-top: 0.9%; transition: all 0.5s; width: 0; } .open_Nav .sub_three a:hover span i{ left: 59px;} .open_Nav .sub_three a:hover span:after{width: 30px;} .open_Nav .sub_three a:hover img{ transform: scale(1.15);} .open_Nav ul li:first-child .sub_two, .open_Nav li dd:first-child .sub_three{ display: block;} .open_Nav ul .select > .navA{ color: #235f62;} .open_Nav ul .select > .navA:before, .open_Nav ul .select > .navA:after{ opacity: 1;} .open_Nav .close{ position: absolute; right: 2%; width: 30px;height: 30px; top: 6%; cursor: pointer;} .open_Nav .close:before, .open_Nav .close:after{content: ''; position: absolute; width: 2px; height: 100%; background: #fff;} .open_Nav .close:before{ transform: rotate(-45deg);} .open_Nav .close:after{ transform: rotate(45deg);} @media(min-width:1025px){ .open_Nav .close, .open_Nav .nav_lang{display:none;} } .H_banner{ position: relative; width: 100%; height: 100%;} /*.H_banner .swiper-wrapper{}*/ .H_banner li, .H_banner li a{ position: relative; height: 100%; width: 100%; display: block;} .H_banner li #video{ position: absolute; left: 50%; transform: translateX(-50%);-webkit- transform: translateX(-50%);-ms- transform: translateX(-50%);top: 0; min-width: 100%; min-height: 100%;height: 100%; z-index: 5; background: #000;object-fit: cover;} .H_banner li:first-child{} .H_banner li:first-child:before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; /* background: url("../images-1/bg2.png"); */ z-index: 10;} .H_banner li figure{ position: absolute; left: 0; width: 100%; height: 100%; top: 0;} .H_banner img{ display: none; width: 100%;} .H_banner .info{ position: absolute;left: 0; top: 49%; width: 100%; text-align: center; color: #fff; letter-spacing: 8px;transform: translateY(100%);-ms-transform:translateY(100%);-moz-transform:translateY(-50%);-webkit-transform:translateY(100%);-o-transform:translateY(100%); transition: all 1s; opacity: 0; z-index: 10; } .H_banner .swiper-slide-active .info{ opacity: 1;transform: translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);} .H_banner .info h3{ font-size: 48px; font-weight: normal; line-height: 50px;} .H_banner .info p{ font-size: 24px; line-height: 30px; margin-top: 1.5%; opacity: 0.9;} .H_banner li:nth-child(2) .info{ top: 35%;} .H_banner .swiper-pagination-bullet{ width: 9px; height: 9px; background: #bec1c7; opacity: 1; margin: 0 6px; position: relative; margin: 0 7px!important;} .H_banner .swiper-pagination{ bottom: 2.6% !important;} .H_banner .swiper-pagination-bullet:before{ content: ''; position: absolute; width: 17px; height: 17px; top: 50%; left: 50%; margin: -8px 0 0 -9px; border: 1px solid #235f62; cursor: pointer; border-radius: 100%; opacity: 0;} .H_banner .swiper-pagination-bullet-active{ background: #235f62;} .H_banner .swiper-pagination-bullet-active:before{ opacity: 1;} .more_a{ display: inline-block; line-height: 40px; border-bottom: 1px solid #dedce1; padding: 0 23px; color: #fff; position: relative; transition: all 0.3s;} .more_a span{ display: inline-block; position: relative; z-index: 2;} .more_a:before{ content: ''; position: absolute; left: 0; bottom: 0; background: #235f62; width: 100%; height: 0; transition: all 0.3s;} .more_a:hover{ border-bottom-color: #235f62; color: #fff;} .more_a:hover:before{ height: 100%; } .more_a2{ display: inline-block; line-height: 40px; padding: 0 23px; color: #235f62; position: relative; transition: all 0.8s; font-size: 16px;} .more_a2 span{ display: inline-block; position: relative; z-index: 2;} .more_a2 i{ display: inline-block; width: 6px; height: 9px; vertical-align: middle; position: relative; margin-top: -3px; margin-left: 15px; background: url("../image/icon1.png") no-repeat center bottom;} .more_a2:before{ content: ''; position: absolute; left: 0; bottom: 0; background: #235f62; width: 100%; height: 0; transition: all 0.3s;} .more_a2:hover{ border-bottom-color: #235f62; color: #fff;} .more_a2:hover i{ background-position: center top;} .more_a2:hover:before{ height: 100%;} .more_a3{ display: inline-block; line-height: 40px; border-bottom: 1px solid #235f62; padding: 0 23px; color: #235f62; position: relative; transition: all 0.3s;} .more_a3 span{ display: inline-block; position: relative; z-index: 2;} .more_a3 i{display: inline-block;width: 6px;height: 9px;vertical-align: middle;position: relative;margin-top: -3px;margin-left: 15px;background: url(../image/icon1.png) no-repeat center bottom;} .more_a3:before{ content: ''; position: absolute; left: 0; bottom: 0; background: #235f62; width: 100%; height: 0; transition: all 0.3s;} .more_a3:hover{ color: #fff;} .more_a3:hover:before{ height: 100%; } .more_a3:hover i{ background-position: center top;} .investment_table .more_a3:before{height: 100%;} .footer{ background: url("../image/footer_bgs.jpg") no-repeat center; position: relative; height: 100%; padding-bottom: 2%;} .footer .w1600{ position: relative;} .footer .top{ padding: 12.4% 4% 9.5% 3%} .footer .top .left, .footer .top .right{ width: 50%;} .footer .top h2{ font-size: 24px; color: #fff; margin-bottom: 5%; font-weight: normal;} .footer .top .right{ max-width:514px; } .footer .top .right a{ border: 1px solid #313c50; text-align: center; font-size: 16px; color: #fff;float: left; padding: 3.31% 10.215%; transition: all 0.5s; position: relative; overflow: hidden;} .footer .top .right a span{ display: inline-block; position: relative; z-index: 2;} .footer .top .right a:before{ content: ''; position: absolute; left: 0; top: 100%; width: 100%; height: 100%; background: #235f62; transition: all 0.3s; opacity: 0;} .footer .top .right a:after{ content: ''; display: inline-block; width: 6px; height: 9px; vertical-align: middle; position: relative; margin-top: -3px; margin-left: 15px; background: url("../image/icon1.png") no-repeat center top;} .footer .top .right a:last-child{ float: right;} .footer .top .right a:hover{ border-color: #235f62;} .footer .top .right a:hover:before{ background: #235f62; top: 0; opacity: 1;} .footer .top .left h2{ letter-spacing: 3px;} .footer .search{ max-width: 500px; position: relative; margin-top: -1%;} .footer .search .text{ width: 100%; line-height: 40px;height: 40px; padding-right: 30px; border:none; border-bottom: 1px solid #dddddd; background: none; color: #aaadb3; font-size: 16px;} .footer .search .text::-webkit-input-placeholder{color: #fff;} .footer .search .text:-moz-placeholder{color: #fff;} .footer .search .text::-moz-placeholder{color: #fff;} .footer .search .text:-ms-input-placeholder{color: #fff;} .footer .search a{ position: absolute; right: 0; top: 0; width: 30px; height: 100%; background: url("../image/foot_icon1.png") no-repeat center top;} .footer nav{ border-top: 1px solid #313c50;border-bottom: 1px solid #313c50; padding: 4% 0 4.5% 0; margin: 0 3% 0 4%;} .footer dt{ color: #aaadb3; font-size: 16px; margin-bottom: 20px;} .footer dl a{ display: block; line-height: 26px; color: #676e7d;} .footer dl a:hover{ color: #fff;} /*.footer dl.icon_dl{ margin-right: 8.5%;} .footer dl.share_dl dd,*/ .footer dl.icon_dl dd{overflow: hidden;} .footer dl.icon_dl a{float: left;} .footer dl.icon_dl a:not(:last-child){margin-right: 92px;} .footer dl.icon_dl a:hover .img1, .footer dl.icon_dl .img2{ display: none;} .footer dl.icon_dl a:hover .img2{ display: inline-block;} .footer dl.share_dl{ margin-right: 0;} .footer dl.share_dl a{float: left;width: 50px; height: 50px; background: url("../image/foot_share.png") no-repeat center 14px #313b4f; border-radius: 100%; margin: 0 25px 0 0; position: relative;} .footer dl.share_dl a:hover{ background-color: #235f62;} .footer dl.share_dl a.sina{ background-position: center -34px;margin-right: 0;} .footer dl.share_dl a figure{ background-color:#fff; position: absolute; left: 50%; bottom: 100%; display: none;/*padding-left: 10px; background: url("../images-1/foot_icon4.png") no-repeat left top;*/ width: 265px; margin-left:-132px;margin-bottom: 10px;} .footer dl.share_dl a figure span{ color:#333; display:inline-block; width:49%; text-align: center; padding-top:8px; } .footer dl.share_dl a figure:after{position: absolute; content: ''; top: 100%; border:5px solid transparent; border-top-color: #fff; left: 50%; margin-left: -5px;} .footer dl.share_dl a figure img{ width: 130px; height: 130px; padding:0 8px 8px; background: #fff;} .footer dl.share_dl a:hover figure{ display: block; } .footer dl.contact_dl{text-align: center;} .footer dl.call_dl b{color: #fff;font-size: 24px;padding-left: 18px;background: url("../image/foot_icon2.png") no-repeat left center;display: block;font-weight: normal;font-family: DINCOND;text-align: left;letter-spacing: 1px;} .footer .down{ position: relative; width:230px; line-height: 40px; color: #8f939b; margin: 0 0 20px 0; } .footer .down span{ display: block; position: relative; border: 1px solid #313c50;} .footer .down i{ transform: rotate(90deg);} .footer .down .sub{ position: absolute; left: 0; top: 100%; width: 100%; z-index: 10; background: black; border: 1px solid #313c50; padding: 15px 0; display: none; } .footer .down a{ background: none; color: #8f939b;} .footer dl.contact_dl a.more{ width: 230px; line-height: 40px; color: #fff; text-align: center; background: #235f62; display: block; margin: 0 auto 0;} .footer dl.contact_dl i{ display: inline-block; width: 6px; height: 9px; vertical-align: middle; position: relative; margin-top: -3px; margin-left: 15px; background: url("../image/icon1.png") no-repeat center top;} .footer .copyright{ text-align: center; color: #515a6c; padding-top: 2.5%; line-height: 36px;} .footer .copyright em{ width: 1px; height: 10px; display: inline-block; vertical-align: middle; margin: 0 10px 0 12px; background: #3c465a;} .footer .copyright a{ color: #515a6c;} .footer .copyright .p1 a{ display: inline-block; color: #646a76; vertical-align: middle;} #toTop{ width: 40px; height: 40px; border-radius: 100%; bottom: 2.5%; right: 7%; position: absolute; background: url("../image/foot_icon3.png") no-repeat center #235f62;} @media(min-width:1025px){ .footer dl{ float: left;} } @media(max-width:1200px){ .footer dl.icon_dl a:not(:last-child) {margin-right: 30px;} } @media(max-width:1024px){ .footer dl{margin: 0 0 30px 0!important;text-align: center;clear: both;} .footer dl dd{display: table; margin: 0 auto;} } .Nbanner_video{ position: relative; cursor: pointer; z-index: 10;} .Nbanner_video .wapban{ display: none; width: 100%;} .Nbanner_video .txt{ position: absolute; width: 100%; left: 0; top: 50%;transform: translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%); text-align: center;} .Nbanner_video .txt span{ background: url("../image/play_icon.png") no-repeat center; width: 60px; height: 60px; display: block; margin: 0 auto;} .Nbanner_video .txt p{ color: #fff; font-size: 36px; margin-top: 1.6%;} .Nbanner_video video{ position: absolute; left: 0; width: 100%; height: 100%; top: 0; background: #000; display: none;} .pro_menu{ position: absolute; left: 0; top: 0; width: 100%;} .pro_menu .menu_box{ background: #eaeaeb; padding: 0 2%; line-height: 60px; opacity: 0; transition: all 0.5s; z-index: 1;} .pro_menu .menu_box h2{ float: left; width: 50%; text-align: center; font-size: 18px; color: #333;} .pro_menu .menu_box .right{ float: left; width: 50%;} .pro_menu .menu_box ul{ display: inline-block; overflow: hidden; vertical-align: middle; margin-left: 147px;} .pro_menu .menu_box li{ float: left; padding: 0 12px; margin-right: 55px; font-size: 16px; color: #333; border-bottom: 2px solid transparent; cursor: pointer;} .pro_menu .menu_box li:hover, .pro_menu .menu_box li.on{ border-bottom-color: #235f62; color: #235f62;} .pro_menu .menu_box .buy{ display: inline-block; width: 100px; line-height: 32px; vertical-align: middle; text-align: center; color: #fff; background: #235f62; border-radius: 5px;} .pro_menu .menu_box_on{ position: fixed; width: 100%; left: 0; top: 0; opacity: 1; z-index: 100} .pro_con{background: #fafafa;} .pro_con .box_info{ position: relative;} .pro_con .content{} .pro_con .gallery-top li{ position: relative;} .pro_con .gallery-thumbs{ max-width: 965px; position: absolute; left: 50%; bottom: 5%; width: 100%;transform: translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%); z-index: 5;} .gallery-thumbs .slick-track{ margin: 0 auto;} .gallery-thumbs li{position: relative; padding: 0 10px;} .gallery-thumbs li figure{ width: 100%; padding-top: 50%; position: relative;} .gallery-thumbs li figure:before{ content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: 4px solid transparent; } .gallery-thumbs .slick-current figure:before{ border-color: #235f62;} .pro_con .box_info1 .txt{ position: absolute; max-width: 780px; color: #fff; right: 0; bottom: 32%; width: 50%; font-size: 16px; line-height: 26px;} .pro_con .box_info2{ padding: 8% 0;} .pro_con .box_info2 .swiper-wrapper{align-items: center;} .pro_con .box_info2 .hover, .pro_con .box_info2 .slick-center .txt{ display: none;} .pro_con .box_info2 .slick-center .hover{ display: block;} .pro_con .box_info2 .txt{ text-align: center; width: 100%;} .pro_con .box_info2 .txt h3{ font-size: 20px; color: #333; margin: 15px 0 3px; font-weight: normal;} .pro_con .box_info2 .txt p{ color: #999999;} .pro_con .box_info2 .pic{ position: relative; margin: 3% 0 11%;} .pro_con .box_info2 .pic2{ margin: 0;} .pro_con .box_info2 .hover{ text-align: center;} .pro_con .box_info2 .hover h2{ font-size: 42px; line-height: normal; font-weight: normal; color: #333;} .pro_con .box_info2 .hover h3{ font-size: 24px; color: #555; line-height: 30px; font-weight: normal; margin-bottom: 10px;} .pro_con .box_info2 .hover p{ font-size: 16px; color: #555; line-height: 28px;white-space: nowrap;} .pro_con .box_info2 .slick-track{ display: table;} .pro_con .box_info2 .slick-slide{ display: table-cell; vertical-align: middle; float: none;} .pro_con .box_info2 .slick-arrow{ width: 25%; height: 100%; top: 0; margin-top: 0; top: 0; background: none;} .pro_con .box_info2 .slick-arrow span{width: 40px;height: 40px; background: url("../image/icon3.png") no-repeat center top; position: absolute; top: 50%;margin-top: -20px; right: 5%;} .pro_con .box_info2 .slick-next{ left: auto; right: 0;} .pro_con .box_info2 .slick-arrow span:hover{ background-position: center bottom;} .pro_con .box_info2 .slick-center h2{ -webkit-animation: fadeInRight 1s both;animation: fadeInRight 1s both;animation-delay:0.8s;-webkit-animation-delay:0.8s;} .pro_con .box_info2 .slick-center .pic{ -webkit-animation: fadeInRight 1.4s both;animation: fadeInRight 1.4s both;animation-delay:0.9s;-webkit-animation-delay:0.9s;} .pro_con .box_info2 .slick-center h3{ -webkit-animation: fadeInRight 1.6s both;animation: fadeInRight 1.6s both;animation-delay:1s;-webkit-animation-delay:1s;} .pro_con .box_info2 .slick-center .p{ -webkit-animation: fadeInRight 1.8s both;animation: fadeInRight 1.8s both;animation-delay:1.1s;-webkit-animation-delay:1.1s;} .pro_con .box_info2 li dd{ position: absolute; color: #555;} .pro_con .box_info2 dd .line i{ position: absolute; background: #131313;} .pro_con .box_info2 .hover dd p{white-space: nowrap; color: #131313; font-size: 18px;} .pro_con .box_info2 .li2 .pic{ margin-top: 15%;} .pro_con .box_info2 dd .line{ width: 160px; height:103px; position: absolute;right: 106%;top: 25%; overflow: hidden; } .pro_con .box_info2 dd .line .i1{ width: 1px;height: 100%;left: 0;top: 0;} .pro_con .box_info2 dd .line .i2{ width: 100%;height: 1px;left: 0;top: 0;} .pro_con .box_info2 .li2 dd{ left: 89%; top: 1%;} .pro_con .box_info2 .li3 dd .line{ width: 119px; height: 90px; top: 50%;} .pro_con .box_info2 .li3 dd.dd1{ left: 78%; top: 23%;} .pro_con .box_info2 .li3 dd span{ color: #999999; font-size: 14px; display: block;} .pro_con .box_info2 .li3 dd.dd2 .line{ width: 1px; height: 59px; left: -3%;top: -87%;} .pro_con .box_info2 .li3 dd.dd2{ text-align: left; left: 68%; top: 79%;} .pro_con .box_info2 .li3 dd.dd2 .line .i1{width: 1px;height: 100%;} .pro_con .box_info2 .li4 dd{ font-size: 18px;white-space: nowrap;} .pro_con .box_info2 .li4 .line{ display: inline-block; width: 123px; height: 1px; vertical-align: middle;position: relative;right: auto;top: auto;} .pro_con .box_info2 .li4 .line i{ background: #000055;} .pro_con .box_info2 .li4 dd span{ display: inline-block; vertical-align: middle; margin-left: 10px;} .pro_con .box_info2 .li4 .dd1{ left: 41%;top: 70%;} .pro_con .box_info2 .li4 .dd2{ left: 63%;top: 55%;} .pro_con .box_info2 .li4 .dd3{ left: 81%;top: 41%;} .pro_con .box_info2 .slick-center .dd1 .i1{ -webkit-animation: fadeInUp 1s both;animation: fadeInUp 1s both;animation-delay:0.8s;-webkit-animation-delay:2s;} .pro_con .box_info2 .slick-center .dd1 .i2{ -webkit-animation: fadeInLeft 1s both;animation: fadeInLeft 1s both;animation-delay:0.8s;-webkit-animation-delay:3s;} .pro_con .box_info2 .slick-center .dd1 p{ -webkit-animation: fadeIn 1s both;animation: fadeIn 1s both;animation-delay:0.8s;-webkit-animation-delay:4s;} .pro_con .box_info2 .slick-center .dd2 .i1{ -webkit-animation: fadeInDown 1s both;animation: fadeInDown 1s both;animation-delay:0.8s;-webkit-animation-delay:5s;} .pro_con .box_info2 .slick-center .dd2 .i2{ -webkit-animation: fadeInLeft 1s both;animation: fadeInLeft 1s both;animation-delay:0.8s;-webkit-animation-delay:6s;} .pro_con .box_info2 .slick-center .dd2 p{ -webkit-animation: fadeIn 1s both;animation: fadeIn 1s both;animation-delay:0.8s;-webkit-animation-delay:7s;} .pro_con .box_info2 .slick-center.li4 .dd1 .i2{ -webkit-animation: fadeInLeft 1s both;animation: fadeInLeft 1s both;animation-delay:0.8s;-webkit-animation-delay:2s;} .pro_con .box_info2 .slick-center.li4 .dd1 span{ -webkit-animation: fadeIn 1s both;animation: fadeIn 1s both;animation-delay:0.8s;-webkit-animation-delay:2.8s;} .pro_con .box_info2 .slick-center.li4 .dd2 .i2{ -webkit-animation: fadeInLeft 1s both;animation: fadeInLeft 1s both;animation-delay:0.8s;-webkit-animation-delay:3.2s;} .pro_con .box_info2 .slick-center.li4 .dd2 span{ -webkit-animation: fadeIn 1s both;animation: fadeIn 1s both;animation-delay:0.8s;-webkit-animation-delay:4s;} .pro_con .box_info2 .slick-center.li4 .dd3 .i2{ -webkit-animation: fadeInLeft 1s both;animation: fadeInLeft 1s both;animation-delay:0.8s;-webkit-animation-delay:4.8s;} .pro_con .box_info2 .slick-center.li4 .dd3 span{ -webkit-animation: fadeIn 1s both;animation: fadeIn 1s both;animation-delay:0.8s;-webkit-animation-delay:5.8s;} .pro_con .box_info3 li{ position: relative;} .pro_con .box_info3 figure img{ display: block; width: 100%;} .pro_con .box_info3 li .txt{ position: absolute; left: 50%; width: 100%; max-width: 1386px;transform: translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%); } .pro_con .box_info3 .slick-active .an_1{ -webkit-animation: fadeInUp 1s both;animation: fadeInUp 1s both;animation-delay:2s;-webkit-animation-delay:0.8s;} .pro_con .box_info3 .slick-active .an_2{ -webkit-animation: fadeInUp 1.5s both;animation: fadeInUp 1.5s both;animation-delay:2.2s;-webkit-animation-delay:0.9s;} .pro_con .box_info3 .slick-active .an_3{ -webkit-animation: fadeInUp 2s both;animation: fadeInUp 2s both;animation-delay:2.4s;-webkit-animation-delay:1s;} .pro_con .box_info3 .slick-dots{ position: absolute; left: 0; bottom: 3.5%; z-index: 10; text-align: center; width: 100%;font-size: 0; } .pro_con .box_info3 .slick-dots li{ display: inline-block; width: 44px; height: 10px; line-height: 10px; margin: 0 5px; border: 1px solid transparent; cursor: pointer; opacity: 1;} .pro_con .box_info3 .slick-dots button{ border: none; width: 40px;font-size: 0; height: 2px; display: inline-block; vertical-align: middle; margin-top: -2px; background: #fff; opacity: 0.8} .pro_con .box_info3 .slick-dots .slick-active{ border-color: #235f62;} .pro_con .box_info3 .slick-dots .slick-active button{ width: 38px; height: 4px; background: #235f62; opacity: 1;} .protxt_button a{ position: absolute;} .protxt_button a{ position: absolute; padding-bottom: 15px; z-index: 20;} .protxt_button .line{ width: 30px; height: 30px; position: relative; border-radius: 100%; display: block; line-height: 30px; text-align: center; } .protxt_button .line i{width: 10px; height: 10px; background: rgba(154,136,103,0.8); opacity: 1; display: inline-block; border-radius: 100%; z-index: 3} .protxt_button .line:before, .protxt_button .line:after{ content: '';position: absolute; border-radius: 100%; left: 50%; top: 50%;transform: translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%); } .protxt_button .line:before{ width: 20px; height: 20px; background: rgba(255,255,255,0.4);animation: Hbox5line2 2s ease-in;-webkit-animation: Hbox5line2 2s ease-in;-moz-animation: Hbox5line2 2s ease-in;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite; z-index: 2} .protxt_button .line:after{ width: 30px; height: 30px;background: rgba(154,136,103,0.5);animation: Hbox5line 2.5s ease-in;-webkit-animation: Hbox5line 2.5s ease-in;-moz-animation: Hbox5line 2.5s ease-in;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite; z-index: 1} .protxt_button span, .protxt_button p{ position: absolute; display: none;white-space: nowrap; } .protxt_button span{padding: 0 10px; background: rgba(154,136,103,0.8); border-radius: 5px; color: #fff; left: 50%;transform: translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%); top: 100%; line-height: 32px;} .protxt_button span:before{ content:''; position: absolute; bottom: 100%; left: 50%; width: 0; height: 0; border: 5px solid transparent; border-bottom-color: rgba(154,136,103,0.8); margin-left: -5px;} .protxt_button p{ color: #fff; font-size: 16px; line-height: 30px;} .protxt_button .dd1 p{ right: -80%; top:189%;} .protxt_button .dd2 p{ left: 450%; top:79%;} .protxt_button .dd4 p{ left: 279%; top:106%;} .protxt_button a:hover span, .protxt_button a:hover p{ display: block;} .hover_protxt{position: absolute;width: 100%;bottom: 23%;left: 29%;color: #fff;font-size: 16px;line-height: 30px;max-width: 475px; } .parameter{ overflow: hidden; position: relative; padding-right: 50%; background: black;} .parameter figure{ position: relative; padding-top: 100%; background-repeat:no-repeat;background-size:cover;background-position:center center;} .parameter figure img{ display: none;} @media(max-width:640px){ .parameter figure img{ display: block;} } .parameter .right{ position: absolute; right: 0; top: 50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%); max-height: 90%; width: 50%; } .parameter .right ul{ max-width: 380px; margin: 0 auto; display: table; width: 100%;} .parameter .right li{ display: table-row;} .parameter .right span{ width: 50%; display: table-cell; padding: 20px 0 20px 8%;line-height:23px; border-bottom: 1px dashed rgba(243,243,243,0.1);font-size: 16px; color: #515a6c; } .parameter .right span.txt{color: #fff;} .parameter .right .img2, .parameter .right a:hover .img1{ display: none;} .parameter .right a:hover .img2{ display: inline-block;} /*.parameter .right li:last-child span{ border-bottom: none; padding: 15% 0 0 8%; opacity: 1;}*/ .pro_down{ height: 960px; padding-top: 160px; background-position: center top;} .pro_down_show{ -webkit-animation: fadeInUp 1s both;animation: fadeInUp 1s both;animation-delay:0.8s;-webkit-animation-delay:0.8s;} .pro_down .list{ width: 50%; padding-right: 3.5%; overflow: hidden;} .pro_down .list ul{ max-width: 540px; float: right; width: 100%; margin-top: 22%;} .pro_down .list li{ margin-bottom: 30px;} .pro_down .list li a{ display: block; background: #fff; line-height: 80px; font-size: 16px; color:#333; padding: 0 8%; position: relative; transition: all 0.5s;} .pro_down .list li a:before{ content: ''; position: absolute; width: 30px; height: 100%; right: 5%; top: 0; background: url("../image/icon6.png") no-repeat center; transition: all 0.5s;} .pro_down .list li a:hover{ background: #b29c74; color: #fff;} .pro_down .list li a:hover:before{ background-image: url("../image/icon7.png");} .Store_index{ background: url(../image/storebg.jpg) no-repeat center top;background-size:cover; } .pro_title{ text-align: center; font-size: 42px; color: #333333; line-height: normal; padding: 2% 0;} .Store_index .pro_title aside{font-size:18px;font-weight:100;padding:10px 0 58px 0;} .Store_index .pro_title{color:#fff;padding-bottom:0; padding-top:5%;} .Store_top{ text-align: center; width:80%; margin:0 auto; position: relative;} .Tanl .Store_top{margin-top:27px;} .Tanl .Store_top dl{position:relative;margin-right:20px;} .Store_index .Store_top{padding-bottom: 60px;} .Store_index .Store_top{width:90%; max-width:480px;} .Store_top dd.dd_select{padding-right:160px;} .Store_top dd.add{ display: none;} .Store_top dd span{ display: block; width: 240px; height: 48px; border: 2px solid #e5e5e5; padding: 0 20px; color: #999999; line-height: 44px; text-align: left; position: relative;} .Store_top dd select{ display: block; width: 240px; height: 48px; border: 2px solid #e5e5e5; padding: 0 20px; color: #999999; line-height: 44px; text-align: left; position: relative;-webkit-appearance: none;-moz-appearance: none; background: none;} /*.Store_top .dd_select:before{ content: '>'; font-family: '宋体'; font-size: 14px; color: #999999; position: absolute; right: 20px; top: 3px;}*/ .Store_top dd .text{ width: 100%; height: 44px; line-height: 44px; color: #666; padding: 0 10px; font-size:16px;} .Store_index .Store_top dd .text{background:rgba(255,255,255,0.76);border:1px solid #fff;} .Store_top dd a{position:absolute; right:0; line-height:44px;top:0;background: black;color:#fff; width:140px;font-size:16px;} .Store_top dd #bottomsBtn{background:#235f62;} .Store_list{ background: #fafafa; position: relative; padding-right: 50%; } .Store_list .map{ width: 100%; height: 700px;} .Store_list .map *{ max-width: none; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; -o-box-sizing:content-box;-o-box-sizing:content-box; box-sizing:content-box;} .Store_list .right{ position: absolute; right: 0; top: 0; width: 50%; height: 100%;} .Store_list .right .close{ width: 30px; height: 30px; position: absolute; top: 5%; right: 7%; cursor: pointer;} .Store_list .right .close:before, .Store_list .right .close:after{ content: ''; position: absolute; width: 1px; height: 90%; background: black; left: 50%; top: 0;} .Store_list .right .close:before{ transform: rotate(45deg);} .Store_list .right .close:after{ transform: rotate(-45deg);} .Store_list .right ul{ position: absolute; top: 15%; left: 12%; width: 80%; height: 81.5%; max-height: 81.5%; overflow: auto; padding-right: 2%;} .Store_index .Store_list .right ul{top:15%; max-height:70%; height:70%;} .Store_list .right ul li{ border-bottom: 1px solid #eeeeee; margin-bottom: 8%;} .Store_list .right ul h3{ padding-left: 55px; font-size: 24px; color: black; background: url("../image/icon4.png") no-repeat left top; line-height: 30px;} .Store_list ul .txt{ padding-left: 55px; line-height: 30px; font-size: 16px; color: #999; margin: 5% 0 7%;} .Store_list ul .tel{ padding-left: 15px; background: url("../image/icon5.png") no-repeat left 8px; color: #235f62; margin-top: 2%;} .Store_list ul::-webkit-scrollbar {/*滚动条整体样式*/ width: 8px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .Store_list ul::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 10px;background: #235f62; } .Store_list ul::-webkit-scrollbar-track {/*滚动条里面轨道*/ border-radius: 10px;background: #eeeeee; } @media(min-width:1025px)and (max-width:1440px){ .Tanl .Store_list .map{height: 600px;} } @media(max-width:1024px){ .Store_index .Store_list{padding-right:0;} .Store_index .Store_list .right{position:relative; height:400px;width:100%;} .Store_index .Store_list .map{height:400px;} } .p_bottom_5{ padding-bottom: 5%;} .other_pro{ background: #fff; padding-top: 5%;} .other_pro .list{padding: 4% 4% 4.5%; overflow: hidden; position: relative;} .other_pro li{ text-align: center; padding: 0 3%;} .other_pro li figure{ overflow: hidden;} .other_pro li img{ transition: all 0.5s;} .other_pro li a:hover img{ transform: scale(1.15);} .other_pro li h3{ font-size: 30px; color: #333; line-height: normal; font-weight: normal; margin: 8% 0 2%;} .other_pro li a:hover h3{ color: #235f62;} .other_pro li p{ font-size: 16px; color: #555555; margin-bottom: 4%;} .other_pro .slick-arrow{ width: 40px; height: 40px; background:url("../image/icon9.png") no-repeat center bottom; cursor: pointer;} .other_pro .slick-prev{ transform: rotate(180deg); left: -2%;} .other_pro .slick-next{ right: -2%;} .other_pro .slick-arrow:hover{ background-position: center top;} .other_pro .slick-disabled{ opacity: 0.5;} /*底部地图弹框*/ .Tanl{ display:none; position:fixed; top:50%; background-color:#fff; border:solid 1px #eeeeee; padding:5px; left:10%; width:80%; z-index:9; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .Tanl .Store_list{ display:block; } .Tanl .right{ display:none; } @media(max-width:1024px){ .Tanl{left:2%; width: 96%;margin-top: 20px;} .Tanl .Store_top{margin: 10px 0;width: 100%;} .Tanl .Store_list{padding-right:0;} .Tanl .Store_list .right{position:initial; height:auto;width:100%;} .Tanl .Store_list .map{height:240px;} .Tanl .Store_top dd.dd_select{padding-right: 80px;} .Tanl .Store_top dl{margin-right: 0;} .Tanl .Store_top dd a{width: 76px;} .Tanl .Store_list .right ul{left: 0;width: 100%;position: relative; height: 200px;max-height: 200px;top: auto;} .Tanl .Store_list .right .close{right:0;top:0;} .Tanl .Store_list .right ul h3{font-size:20px; padding-left: 40px;background-position: 10px center; } .Tanl .Store_list ul .txt{margin: 5px 0 10px 0;} .Tanl .Store_list .right ul li{margin-bottom: 18px;} } .nybanner{ position: relative;} .nybanner .wapban{ display: none;} .nybanner .txt_con{ left: 0; top: 0; width: 100%; height: 100%; position: absolute;text-align: center; color: #fff; line-height: normal; background-position: center;} .nybanner h3{ font-size: 48px; font-weight: normal; padding-bottom: 5px; z-index: 10; position: relative;} .nybanner p{ font-family: "Helvetica"; text-transform: uppercase; font-size: 30px; letter-spacing: 0.5em; z-index: 10; position: relative;} .nybanner .txt_con i:before, .nybanner .txt_con i:after, .nybanner .txt:before, .nybanner .txt:after{ content: ''; position: absolute;} .nybanner .txt_con i:before, .nybanner .txt_con i:after{ width: 9px; height: 9px; border: 1px solid #fff;} .nybanner .txt_con i:before{ left: 100%; top: -9px;} .nybanner .txt_con i:after{ left: -9px; bottom: -9px;} .nybanner .txt{ width: 575px; border: 1px solid #fff; position: relative;background: inherit;position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%); padding: 1.367% 2%;} .nybanner .txt:before, .nybanner .txt:after{ width: 100%; height: 100%; left: 0; top: 0;} .nybanner .txt:before{background: inherit;filter: blur(4px);} .nybanner .txt:after{ background: rgba(0, 0, 0, 0.2);} .nybanner .pic_bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .nybanner_news .txt:after{ background: rgba(38, 49, 71, 0.2);} .nybanner_pro .txt:after{ background: rgba(37, 48, 70, 0.4);} .nybanner_cz .txt{ background: none;} .nybanner_cz .txt:after{ display: none;} .ban_click{ position: absolute; width: 24px; height: 36px; left: 50%; margin-left: -12px; bottom: 5%; z-index: 5; background: url("../image/mouse_icon.png") no-repeat center; cursor: pointer;animation: mouse 2.5s ease-in-out 0s infinite; -webkit-animation: mouse 2.5s ease-in-out 0s infinite;} /*瓷砖banner*/ .nybanner_czlist{ position: relative;} .nybanner_czlist .wapban{ display: none;} .nybanner_czlist .info{ position: absolute; top: 56%; left: 50%;transform: translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%); width: 82%; color: #fff;} .nybanner_czlist h3, .nybanner_czlist h4{ font-weight: normal; line-height: normal;} .nybanner_czlist h3{ font-size: 42px; padding: 2% 0;} .nybanner_czlist h4{ font-size: 24px; letter-spacing: 10px; } .nybanner_czlist p{ max-width: 370px; line-height: 30px; font-size: 16px; margin-top: 10px;} .nybanner_czlist .slick-active h3{ -webkit-animation: fadeInDown 1s both;animation: fadeInDown 1s both;} .nybanner_czlist .slick-active h4{ -webkit-animation: fadeInDown 1.2s both;animation: fadeInDown 1.2s both;} .nybanner_czlist .slick-active p{ -webkit-animation: fadeInDown 1.4s both;animation: fadeInDown 1.4s both;} .nybanner_czlist li.slick-slide img{width: 100%;} .nybanner_prolist .info{ top: 50%;} .nybanner_prolist h3{ font-size: 48px; padding: 0;} .nybanner_prolist h4{ font-size: 30px; font-family: Arial; margin-bottom:30px; text-transform: uppercase; } .nybanner_prolist p{ font-size: 20px;} .nybanner_zsjm h4{ letter-spacing: normal;} .nybanner_zsjm p{ max-width: 485px;} /*mouse*/ @keyframes mouse {0% {bottom:6%;} 50% {bottom:3%;} 100% {bottom:6%;} } @-webkit-keyframes mouse {0% {bottom:6%;} 50% {bottom:3%;} 100% {bottom:6%;} } .ny_menu{ padding-top: 1%; line-height: 80px; border-bottom: 1px solid #eeeeee; margin-bottom: 4.5%;} .current{ float: right; overflow: hidden;} .current em{ display: inline-block; font-style: normal; background: url("../image/current_icon.png") no-repeat left center; padding-left: 20px; font-size: 16px;} .current a{ color: #999;} .current a:hover, .current span{ color: #555555;} .ny_menu ul{ font-size: 0;} .ny_menu li{ width: 12%; text-align: center; margin-right: 1.5%; float: left;} .ny_menu li a{ font-size: 20px; display: block; color: #555555; transition: all 0.5s;} .ny_menu li a:hover, .ny_menu li.on a{ background: black; color: #fff;} .ny_menu_info{ padding-top: 0; border-bottom: none;} /*瓷砖菜单栏*/ .ny_menu_czlist li{ width: auto; margin-right: 0.5%;} .ny_menu_czlist li a{ padding: 0 35px; position: relative; overflow: hidden;} .ny_menu_czlist li i{ position: absolute; color: #fff; font-style: normal; background: #235f62; width: 75px;height: 45px;transform: rotate(-45deg);left: -15%;top: -15%;line-height: 71px;font-size: 12px;text-transform: uppercase;font-weight: bold; } /*产品菜单栏*/ .ny_menu_prolist{ margin-bottom: 0;} .ny_menu_prolist li{ width: auto; margin-right: 0.05%;} .ny_menu_prolist li a{ padding: 0 20px;} /*工程*/ /*.engineering_list{ margin-bottom: -3%;}*/ .engineering_list li{ float: left; width: 31.625%; margin-right: 2.5%; margin-bottom: 3.5%;} .engineering_list li *{ transition: all 0.8s;} .engineering_list li:nth-child(3n){ margin-right: 0;} .engineering_list figure{ overflow: hidden; padding-top: 71.148%; position: relative;} .engineering_list img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .engineering_list .txt{ padding:8% 0 7%;} .engineering_list h2, .engineering_list h3{ font-weight: normal;} .engineering_list h2{ font-size: 20px; color: #555555;} .engineering_list h3{ font-size: 14px; color: #999999; padding: 12px 0 30px;} .engineering_list span{ display: inline-block; min-width: 60px; text-align: center; padding: 0 10px; border: 1px solid #235f62; color: #235f62; line-height: 20px;} .engineering_list a:hover img{transform: scale(1.1);} .engineering_list a:hover .txt{ background: black; padding: 8% 5% 7%;} .engineering_list a:hover h2{ color: #ffffff;} .engineering_list a:hover h3{ color: #999999;} /*工程详情*/ .engineering_box{ background: url("../image/hbox2_bg.png") repeat; margin-bottom: 6.5%;} .engineering_box .pic{width: 61.875%; } .engineering_info{ padding: 5% 3% 0 4%; width: 38%; color: #fff;} .engineering_info .h2{ font-size: 42px; line-height: normal; font-weight: normal; margin-bottom: 2%;} .engineering_info .p span{ display: inline-block; min-width: 60px; text-align: center; padding: 0 10px; border: 1px solid #235f62; color: #235f62; line-height: 20px;} .engineering_info .txt{ font-size: 16px; color: #a6a8ae; line-height: 30px; margin: 10% 0 20%; height: 190px;} .engineering_info .more{ display: block; width: 150px; line-height: 40px; height: 40px; text-align: center; color: #235f62; font-size: 16px; border: 1px solid #235f62; transition: all 0.8s; position: relative; overflow: hidden;} .engineering_info .more span, .engineering_info .more i{display: inline-block; position: relative;} .engineering_info .more i{width: 6px;height: 9px;margin-left: 15px;background: url(../image/icon1.png) no-repeat center bottom;} .engineering_info .more:before{ content: ''; position: absolute; width: 100%; left: 0; top: 100%; background: #fff; height: 100%; opacity: 0; transition: 0.8s;} .engineering_info .more:hover:before{ opacity: 1; top: 0;} /*品牌新闻*/ .news_top{ background: url("../image/hbox2_bg.png") repeat; position: relative; margin-bottom: 5%;} .news_top figure{ width: 43.75%;} .news_txt{ width: 56%; padding: 0 6%; color: #fff;} .news_txt time{ font-family: "Arial"; font-size: 48px; line-height: normal; display: block; padding: 8% 0 7%;} .news_txt time span{ font-size: 16px; display: inline-block; margin-left: 15px;} .news_txt h3{ font-size: 24px; font-weight: normal;} .news_txt p{ font-size: 16px; line-height: 30px; color: #757c8a; overflow: hidden; max-height: 95px; margin: 5% 0 10%;} .news_txt .more{ display: block; width: 150px; line-height: 40px; height: 40px; text-align: center; color: #235f62; font-size: 16px; border: 1px solid #235f62; transition: all 0.8s; position: relative; overflow: hidden;} .news_txt .more span, .news_txt .more i{display: inline-block; position: relative;} .news_txt .more i{width: 6px;height: 9px;margin-left: 15px;background: url(../image/icon1.png) no-repeat center bottom;} .news_txt .more:before{ content: ''; position: absolute; width: 100%; left: 0; top: 100%; background: #fff; height: 100%; opacity: 0; transition: 0.8s;} .news_txt .more:hover:before{ opacity: 1; top: 0;} .news_top .slick-dots, .news_top .btn{ position: absolute; right: 6%; bottom: 14%; color: #fff;} .news_top .slick-dots li{ display: none;} .news_top .slick-dots a{ color: #fff; font-size: 18px;} .news_top .slick-dots .slick-active, .news_top .slick-dots ol{ display: inline-block;} .news_top .slick-dots ol{ margin:0 25px 0 5px; font-size: 12px;} .news_top .slick-arrow{ display: none!important;} .news_top .btn{ width: 100px; height: 26px; line-height: 26px; z-index: 10;} .news_top .btn span{ width: 9px; height: 26px; background: url("../image/icon10.png") no-repeat center; float: right; cursor: pointer; } .news_top .btn .prev{ float: left; transform: rotate(180deg);} .news_top .btn:before{ content: ''; position: absolute; width: 360%; height: 1px; right: 115%; top: 50%; background: rgba(154,136,103,0.3);} /*.news_list{ margin-bottom: -4%;}*/ .news_list li{ float: left; width: 31.625%; margin-right: 2.5%; margin-bottom: 5%; overflow: hidden; border-bottom: 1px solid #eeeeee;} .news_list li:nth-child(3n){ margin-right: 0;} .news_list figure{ width: 100%; padding-top: 68.58%;transition: all 0.5s;} .news_list .txt{ padding: 8% 5% 5%; color: #999; font-size: 16px; position: relative; overflow: hidden;transition: all 0.3s;} .news_list h3{ font-weight: normal; font-size: 20px; color: #555555;} .news_list p{ overflow: hidden; height: 95px; line-height: 30px; color: #999999; font-size: 16px; margin: 3% 0 10%;} .news_list time{ line-height: 40px;} .news_list .more{ float: right; width: 150px; height: 40px; line-height: 40px; color: #235f62; text-align: right; position: relative; overflow: hidden;} .news_list .more span, .news_list .more i{display: inline-block; position: relative; z-index: 3;} .news_list .more i{width: 6px;height: 9px;margin-left: 15px;background: url(../image/icon1.png) no-repeat center bottom; overflow: hidden;} .news_list .more:before{ content: ''; position: absolute; width: 100%; left: 0; top: 100%; background: #235f62; height: 100%; opacity: 0; transition: 0.8s;} .news_list a:hover .txt{ background: black; color: #fff;} .news_list a:hover figure{ transform: scale(1.1);} .news_list a:hover h3{ color: #fff;} .news_list a:hover .more{ color: #fff; text-align: center;} .news_list a:hover .more i{ background-position: center top;} .news_list a:hover .more:before{ top: 0; opacity: 1;} /*品牌视频*/ .video_top{ position: relative; overflow: hidden;} .video_top img{ width: 100%; display: block; transition: all 0.8s;} .video_box .txt{ position: absolute; left: 50%; width: 94%; text-align: center; top: 50%;transform: translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%); color: #fff; font-size: 30px; line-height: normal; overflow: hidden; z-index: 3;} .video_box .play{ display: block; width: 80px; height: 80px; margin: 2% auto 5%; background: url("../image/play_icon1.png") no-repeat center; background-size: contain;} .video_list li{ float: left; width: 31.625%; margin-right: 2.5%; margin-top: 5%; overflow: hidden; position: relative;} .video_list li:nth-child(3n){ margin-right: 0;} .video_list li *{ transition: all 0.8s;} .video_list figure{ position: relative; padding-top: 56.325%;} .video_list li a:before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 2;} .video_list li .txt{ font-size: 16px; color: #235f62;} .video_list li .txt .play{ margin: 0 auto; width: 30px; height: 30px; transition: all 0.3s;} .video_list p{ opacity: 0; transform: translateY(100%); position: absolute;} .video_list a:hover figure, .video_box a:hover img{ transform: scale(1.1);} .video_list a:hover .txt .play{ background-image: url("../image/play_icon2.png");} .video_list a:hover p{ opacity: 1; transform: translateY(0); top: 0; position: relative; margin-top: 2%;} .video_list a:hover:before{ background: rgba(38,49,71,0.9);} /*瓷砖频道页*/ .ceramic_box{ margin: -3% 0 0; padding-bottom: 3%;} .ceramic_box li{ position: relative; overflow: hidden; margin-bottom: 5%;} .ceramic_box .pic{ position: absolute; left: 0; top: 0; width: 65.625%; height: 100%;} .ceramic_box li .Ispic:nth-child(1){ z-index:1} .ceramic_box .Ispic{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .ceramic_box .txt{ float: right; width: 550px; background: url("../image/hbox2_bg.png") repeat; position: relative; z-index: 2; padding: 2% 2% 4% 3%; color: #fff;} .ceramic_box li:nth-child(2n) .txt{ float: none; box-shadow: 0 0 10px #333;} .ceramic_box li:nth-child(2n) .pic{ left: auto; right: 0;} .ceramic_box .txt i.icon, .ceramic_box .txt:before, .ceramic_box .txt:after{position: absolute;} .ceramic_box .txt:before, .ceramic_box .txt:after{ content: ''; background: #235f62;} .ceramic_box .txt i.icon{ width: 10px; height: 10px; border: 1px solid #235f62; right: 4.3%; top:3.6%;} .ceramic_box .txt:before{left: 9%; width: 85%; top: 5%; height: 1px;} .ceramic_box .txt:after{right: 6%; width: 1px; top: 5%; height: 90%;} .ceramic_box h2, .ceramic_box h3, .ceramic_box h4{ font-weight: normal; line-height: normal;} .ceramic_box h2{ font-size: 48px; font-family: "Helvetica"; padding-top: 10%; text-transform: uppercase;} .ceramic_box h3{ font-size: 36px; margin:-1% 0 8%;} .ceramic_box h4{ font-size: 24px; padding: 2% 0;} .ceramic_box p{ max-width: 370px; font-size: 16px; color: #80848d;height: 72px;overflow: hidden;} .ceramic_box dl{} .ceramic_box dt{ font-size: 0; margin: 7.815% 0 8%;} .ceramic_box dt figure{ display: inline-block; width: 25.535%; vertical-align: top; margin-right: 5%; position:relative;} .ceramic_box dt figure:hover:before{ content:''; display:block; width:100%; height:100%; position:absolute; background-color:rgba(38, 49, 71, 0.4)} .ceramic_box dd a{ display: inline-block; width: 150px; line-height: 40px; height: 40px; text-align: center; color: #235f62; font-size: 16px; border: 1px solid #235f62; transition: all 0.8s; position: relative; overflow: hidden; margin-right: 4%;} .ceramic_box dd span, .ceramic_box dd i{display: inline-block; position: relative;} .ceramic_box dd i{width: 6px;height: 9px;margin-left: 15px;background: url(../image/icon1.png) no-repeat center bottom;} .ceramic_box dd a:before{ content: ''; position: absolute; width: 100%; left: 0; top: 100%; background: #235f62; height: 100%; opacity: 0; transition: 0.8s;} .ceramic_box dd a:hover{ color: #fff;} .ceramic_box dd a:hover i{ background-position: center top;} .ceramic_box dd a:hover:before{ opacity: 1; top: 0;} .ceramic_box .show_pic{ position:absolute; width:100%; height:100%; top:0; background:no-repeat center center} /*瓷砖选项*/ .option_table{ display: table; width: 100%;border: 1px solid #eeeeee;} .option_table dl{ display: table-row; background: #fff;} .option_table dt, .option_table dd{ display: table-cell; vertical-align: middle; padding: 20px; border-bottom: 1px solid #f5f5f5; font-size: 16px; color: #999;} .option_table dt{ width: 200px; background: #f5f5f5; padding-left: 50px; border-bottom: 1px solid #fff;} .option_table dd span{ display: inline-block; vertical-align: top; width: 15%;} .option_table dd{ padding-left: 15%; position: relative; line-height: 30px;} .option_table dd .all{ position: absolute; left: 0; top: 20px; width: 15%; text-align: center;} .option_table dd a{ color: #999;} .option_table dd a:hover, .option_table dd a.on{ color: black;} .czlist_current{ padding: 2.5% 0;} .czlist_current h2{ display: inline-block; font-size: 30px; color: black; font-weight: normal;} .czlist_current .search{ float: right; width: 25%; max-width: 300px; position: relative; padding-right: 50px; border-bottom: 1px solid black;} .czlist_current .search .text{ border: none; padding: 0 15px; line-height: 40px; height: 40px; font-size: 16px; color: #cccccc;} .czlist_current .search .btn{ width: 50px; height: 100%; position: absolute; right: 0; top: 0; background: url("../image/search_icon.png") no-repeat center;} .prolist_current{ padding-bottom: 1.5%;} .prolist_current h2{ line-height: 40px;} /*瓷砖列表*/ /*.czlist_list{ margin-bottom: -4%;}*/ .czlist_list li{ width: 48.75%; float: left; margin-right: 2.5%; border-bottom: 1px solid #eeeeee; margin-bottom: 5%;} .czlist_list li:nth-child(2n){ margin-right: 0;} .czlist_list .pic{ padding-top: 66.668%; position: relative; width: 100%; display: block; transition: all 0.8s; overflow: hidden; z-index: 3;} .czlist_list .pic:before, .czlist_list .info, .czlist_list .Ispic{ position: absolute;} .czlist_list .pic *{ transition: all 0.8s;} .czlist_list .Ispic{ left: 0; top: 0; width: 100%; height: 100%; z-index: 1;} .czlist_list .pic:before{ content: ''; left: 0; top: 0; width: 100%; height: 100%; background: rgba(37,48,70,0.8); opacity: 0; z-index: 2; transition: all 0.8s;} .czlist_list .info{ left: 50%; top: -100%;transform: translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%); width: 100%; text-align: center; max-width: 300px; opacity: 0; z-index: 3;} .czlist_list .info p{ color: #fff; font-size: 16px; margin-top: 10px; transform: translateY(-100%)} .czlist_list dl{ padding: 3.5% 2% 4.6% 3%; position: relative; z-index: 2; transition: all 0.8s;} .czlist_list dt{ float: left; width: 56%;} .czlist_list dd{ float: right;display:none;} .czlist_list h3{ font-size: 20px; font-weight: normal; margin-bottom: 2%;} .czlist_list h3 a{ color: #555555;} .czlist_list dt p{ height: 45px; overflow: hidden; font-size: 16px; color: #999;} .czlist_list dd a{ display: inline-block; width: 30px; height: 30px; display: inline-block; background: url("../image/cz_icon.png") no-repeat center; margin-left: 10px; position: relative;-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter:grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter:gray; opacity: 0.3; transition: all 0.5s; background-size: cover;} .czlist_list dd .icon2{ background-image: url("../image/cz_icon2.png");} .czlist_list dd .icon3{ background-image: url("../image/cz_icon3.png");} .czlist_list dd a:hover{-webkit-filter: none;-moz-filter: none;-ms-filter:none;-o-filter: none;filter: none;filter:none; opacity: 1;} .czlist_list .ewm{ position: absolute; right: 140%; width: 120px; height: 140px; text-align: center; padding: 10px; top: -27px; background: #fff; font-size: 16px; color: #999; box-shadow: 0 0 10px #ccc; display: none;} .czlist_list .ewm:before{ content: ''; position: absolute; left: 100%; top: 30px; border: 10px solid transparent; border-left-color: #fff; width: 0; height: 0;} .czlist_list .img{ padding-top: 100%; background-position: center; background-size: cover;} .czlist_list li:hover .pic:before{ opacity: 1;} .czlist_list li:hover .Ispic{ transform: scale(1.1);} .czlist_list li:hover .info{ opacity: 1; top: 50%;} .czlist_list li:hover .info p{ transform: translateY(0);} .czlist_list li:hover dl{ background: #fff; box-shadow: 0 0 10px #ccc;} /*瓷砖详情*/ .czBox_con{ overflow: hidden;} .czBox_con .ny_menu { margin-bottom: 0;} .czBox_con .czlist_current{ padding: 0; margin-bottom: 2%;} .cz_title{ display: inline-block; position: relative; padding: 0 23px 15px 0; font-size: 30px; color: black; font-weight: normal; line-height: normal;} .cz_title:before, .cz_title:after{ content: ''; position: absolute; background: #eeeeee;} .cz_title:before{ width: 100%; height: 1px; left: 0; bottom: 0;} .cz_title:after{ right: 0; bottom: 0; width: 1px; height: 100%;} .cz_title i{ position: absolute; left: 100%; width: 6px; height: 6px; border: 1px solid #eee; top: 99%;} .czBox_info1{ background: url("../image/hbox2_bg.png") repeat; margin-bottom: 5%;} .czBox_info1 .pic{ width: 61.875%;} .czBox_info1 .txt_con{ width: 38%; color: #fff; padding: 3.5% 3.5% 0;} .czBox_con .cz_h2, .czBox_con .cz_h3{ font-weight: normal; line-height: normal;} .czBox_con .cz_h2{ text-transform: uppercase; font-size: 48px; font-family: 'Helvetica';} .czBox_con .cz_h3{ font-size: 30px; margin-bottom: 11%; position: relative;} .czBox_con .cz_h3:after{ content: ''; position: absolute; right: 0; top: 65%; width: 70%; height: 1px; background: #235f62; opacity: 0.3;} .czBox_info1 .singlepage{ line-height: 30px; font-size: 16px; color: #a6a8ae; margin-bottom: 3.5%; } .czBox_info1 p span{ text-transform: uppercase;} .czBox_info1 dl{ overflow: hidden; margin-top: 20%; border-top: 1px solid #484b50; padding-top: 12%;} .czBox_info1 dt{ float: left;} .czBox_info1 dd{ float: right; text-align: right;} .czBox_info1 .more{ width: 150px; height: 40px; line-height: 40px; color: #235f62; text-align: center; position: relative; overflow: hidden; display: block; border: 1px solid #235f62; font-size: 16px;} .czBox_info1 .more span, .czBox_info1 .more i{display: inline-block; position: relative; z-index: 3;} .czBox_info1 .more i{width: 6px;height: 9px;margin-left: 15px;background: url(../image/icon1.png) no-repeat center bottom; overflow: hidden;} .czBox_info1 .more:before{ content: ''; position: absolute; width: 100%; left: 0; top: 100%; background: #235f62; height: 100%; opacity: 0; transition: 0.8s;} .czBox_info1 dd a{ display: inline-block; width: 40px; height: 40px; background: url("../image/cz_icon2.png") no-repeat center; background-size: cover; margin-left: 15px;} .czBox_info1 dd a.icon2{ background-image: url("../image/cz_icon3.png");} .czBox_info2{ position: relative; border-bottom: 1px solid #eeeeee; margin-bottom: 3%;} .czBox_info2 .title{ position: absolute; right: 0; width: 45%;} .czBox_info2 .cz_h3{ margin-bottom: 0;} .czBox_info2 .cz_h3:after{ width: 85%;} .czBox_info2 .pic{ width: 50%; font-size: 18px; color: #555555;} .czBox_info2 .pic dl{ padding: 2% 0; overflow: hidden;} .czBox_info2 .pic dt, .czBox_info2 .pic dd{ float: left; width: 50%; min-height: 50px;} .czBox_info2 .pic dt{ padding: 13px 0;} .czBox_info2 .pic dd{ text-align: right;} .czBox_info2 .pic dd span{ position: relative; padding:13px 0 13px 60px; display: inline-block;} .czBox_info2 .pic dd i{ width: 50px; height: 50px; line-height: 50px; text-align: center; font-style: normal; border: 1px solid #eeeeee; position: absolute; left: 0; top: 0;} .czBox_info2 .pic dd img{ display: inline-block;} .czBox_info2 .txt{ margin-top: 140px; width: 45%;font-size: 16px; color: #555; overflow: hidden;} .czBox_info2 .ewm, .czBox_info2 .slider-nav{ display: inline-block; vertical-align: top;} .czBox_info2 .slider-nav{ width: 71%;} .czBox_info2 .slider-nav li{ padding: 0 0.5%; cursor: pointer;} .czBox_info2 .slider-nav .info{ max-width: 110px; text-align: center;} .czBox_info2 .slider-nav figure{ width: 90.92%; padding-top: 181.82%; background-size: cover; display: block; margin: 0 auto;} .czBox_info2 .txt p{ padding: 10px 0;} .czBox_info2 .ewm{max-width: 200px; text-align: center; display: inline-block;} .czBox_info2 .ewm figure{ border: 1px solid rgba(154,136,103,0.2); padding: 9px;} .czBox_info3 .title{ margin-bottom: 2%;} .czBox_info3 li{ position: relative;} .czBox_info3 .txt{ position: absolute; right: 8%; background: rgba(38,49,71,0.9); color: #fff; z-index: 10; top: 25%; max-width: 360px; padding:2% 3% 5%;} .czBox_info3 .txt h2{ font-size: 30px; line-height: normal; font-weight: normal; padding: 15% 0; border-bottom: 1px solid #4a4b4f; margin-bottom: 8%;} .czBox_info3 .txt p{ max-width: 245px; line-height: 30px; font-size: 16px; min-height: 155px;} .czBox_info3 .slick-dots{ position: absolute; left: 0; bottom: 5%; z-index: 10; text-align: center; width: 100%;font-size: 0; } .czBox_info3 .slick-dots li{ display: inline-block; width: 44px; height: 10px; line-height: 10px; margin: 0 5px; border: 1px solid transparent; cursor: pointer; opacity: 1;} .czBox_info3 .slick-dots button{ border: none; width: 40px;font-size: 0; height: 2px; display: inline-block; vertical-align: middle; margin-top: -1px; background: #fff;} .czBox_info3 .slick-dots .slick-active{ border-color: #fff;} .czBox_info3 .slick-dots .slick-active button{ width: 38px; height: 4px;} .czBox_info3 .slick-active .txt{ -webkit-animation: fadeInRight 1s both;animation: fadeInRight 1s both;} .czBox_info3 .slick-active h2{ -webkit-animation: fadeInRight 1.5s both;animation: fadeInRight 1.5s both;} .czBox_info3 .slick-active p{ -webkit-animation: fadeInRight 2s both;animation: fadeInRight 2s both;} .czBox_info4_con{ background: url("../image/hbox2_bg.png") repeat; margin: 0 0 5%; overflow: hidden;} .czBox_info4_con figure, .czBox_info4_con .txt_con{ width: 50%;} .czBox_info4_con .txt_con{ padding: 4.5% 4.5% 0; color: #fff;} .czBox_info4_con .txt_con .img{ margin-right: 5%;} .czBox_info4_con .txt_con .img:nth-child(2){ margin-right: 0;} .czBox_info4_con .txt_con .pic img{ max-width: 48%;} .czBox_info4_con .line{ padding-bottom: 10%;} .czBox_info4_con .txt_con h3{ font-size: 30px; font-weight: normal; margin-bottom: 4%;} .czBox_info4_con .txt_con p{ color: #aaadb3; font-size: 16px;} /*产品频道页*/ .pro_index{ overflow: hidden; margin-bottom: 10%;} .pro_index h3, .pro_index h2{ font-size: 48px; font-weight: normal; line-height: normal;} .pro_index h3{ font-size: 30px; margin: 2% 0;} .pro_index_box1 li{ width: 48.75%; float: left; margin-right: 2.5%; margin-bottom: 2.5%; position: relative; overflow: hidden;} .pro_index_box1 li:nth-child(2n){ margin-right: 0;} .pro_index_box1 figure{ position: relative; padding-top: 66.667%;} .pro_index_box1 .icon{ position: absolute;left: -57px;top: -14px;color: #fff;font-size: 30px;font-family: Arial;background: #235f62;z-index: 5;text-transform: uppercase;width: 175px;height: 90px;transform: rotate(-45deg);text-align: center;line-height: 130px;} .pro_index_box1 .txt{ position: absolute; top: 50%;transform: translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%); width: 85%; left: 7%; color: #fff;} .pro_index_box1 .more_a{ margin-top: 8%; color: #235f62; border-bottom-color: #235f62;} .pro_index_box1 .more_a i{ display: inline-block;width: 6px;height: 9px;vertical-align: middle;position: relative;margin-top: -3px;margin-left: 15px;background: url(../image/icon1.png) no-repeat center bottom;} .pro_index_box1 .more_a:hover{ color: #fff;} .pro_index_box1 .more_a:hover i{ background-position: center top;} .pro_index_box1 li:nth-child(2) .txt{ color: black;} .pro_index_list .top{ position: relative; overflow: hidden;} .pro_index_list .top figure{ position: relative; padding-top: 37.5%;} .pro_index_list .top .txt{ position: absolute; top: 20%; color: #fff;} .pro_index_list .top .txt > a{color: #fff;} .pro_index_list .txt_center{ left: -1%; width: 99%; text-align: center;} .pro_index_list .top h2{ letter-spacing: 10px;} .pro_index_list .top h3{ margin: 0.5% 0 2.5%;letter-spacing: 15px;} .pro_index_list .txt_left{ left: 17%; width: 80%;} .pro_index_list .txt_left h3{ font-size: 24px; margin: 2.5% 0 4%;} .pro_index_list .more_a3{ padding: 0 35px;} .pro_index .white{ border-bottom-color: #fff; color: #fff;} .pro_index .white i{ background-position: center top;} .pro_index .white:hover{ border-bottom-color: #235f62;} .pro_index_list dl{ position: absolute; left: 2%; top: 0;} .pro_index_list dd{ display: inline-block; width: 50px;} .pro_index_list .list{ padding:2% 25% 3% 2%; position: relative; background: black; text-align: center; margin-bottom: 2.5%;} .pro_index_list .pro_more{ position: absolute; right: 5%; top: 50%; height: 50px; line-height: 50px; border: 1px solid #235f62; color: #235f62; font-size: 16px; padding: 0 1.78%; overflow: hidden;} .pro_index_list .pro_more span{ position: relative; z-index: 10;} .pro_index_list .pro_more:before, .pro_index_list .pro_more span:after{ content: '';} .pro_index_list .pro_more span:after{width: 6px;height: 9px;margin-left: 15px;background: url(../image/icon1.png) no-repeat center bottom; overflow: hidden; display: inline-block;} .pro_index_list .pro_more:before{ position: absolute; left: 0; top: 100%; width: 100%; height: 100%; background: #235f62; transition: all 0.5s;} .pro_index_list .pro_more:hover{ color: #fff;} .pro_index_list .pro_more:hover span:after{ background-position: center top;} .pro_index_list .pro_more:hover:before{ top: 0;} .pro_index_list .list li{ position: relative;} .pro_index_list .list li:after{ content: ''; position: absolute; right: 2px; top: 5%; width: 1px; height: 90%; background:url("../image/icon11.png") no-repeat center; background-size: cover;} .pro_index_list .list li figure{ position: relative;} .pro_index_list .list li h3{ color: #fff; font-size: 16px; text-align: center; margin-bottom: 5%; padding: 0 1%;} .pro_index_list .category_list li{ width: 48.75%; float: left; margin-right: 2.5%; margin-bottom: 2.5%; overflow: hidden;} .pro_index_list .category_list li:nth-child(2n){ margin-right: 0;} .pro_index_list .category_list figure{ position: relative; padding-top: 66.667%; transition: all 0.8s;} .pro_index_list .category_list .txt{ background: #fff; border: 1px solid #eeeeee; position: relative; z-index: 2; padding: 2.5% 160px 2.5% 6%;} .pro_index_list .category_list .more_a2{ position: absolute; right: 2%; top: 50%; margin-top: -20px;} .pro_index_list .category_list h2{ font-size: 30px; color: black;} .pro_index_list .category_list h3{ font-size: 18px; color: #999999; margin: 5px 0 0;} .pro_index_box1 figure, .pro_index_list .pic{ transition: all 0.8s;} .pro_index_box1 a:hover figure, .pro_index_list a:hover .pic, .pro_index_list .category_list a:hover figure{ transform: scale(1.1);} .pro_index_box3{ position: relative;} .pro_index_box3 a{color:#fff;} .pro_index_box3 img{ display: block; width: 100%;} .pro_index_box3 .txt{ position: absolute; position: absolute; right: 8%; background: rgba(38,49,71,0.9); color: #fff; z-index: 10; top: 16%; width: 400px; padding:2% 3% 2.5%;} .pro_index_box3 h2{} .pro_index_box3 h2 span{ display: block; margin-bottom: 5px;} .pro_index_box3 h3{ font-size: 24px; margin: 12% 0;} .pro_index_box3 .more_a3{ padding: 0 35px;} /*产品列表*/ .pro_list{ overflow: hidden; margin-bottom: -6%;} .pro_list li{ width: 30%; float: left; margin-right: 5%; margin-bottom: 6%;} .pro_list li:nth-child(3n){ margin-right: 0;} .pro_list .pic{ position: relative; width: 100%; padding-top: 100%; display: block; background-size: cover; overflow: hidden; z-index: 3; /* background: url("../images-1/pro_list_bg.jpg") no-repeat center; */} .pro_list .pic figure, .pro_list .label, .pro_list .pic dl, .pro_list .icon{ position: absolute; left: 0; top: 0;} .pro_list .pic figure{ width: 100%; height: 100%; transition: all 0.8s;} .pro_list .label{ left: -43px;top: -13px;color: #fff;font-size: 18px;font-family: Arial;background: #235f62;z-index: 5;text-transform: uppercase;width: 130px;height: 70px;transform: rotate(-45deg);text-align: center;line-height: 105px;} .pro_list .pic dl{ left: auto; right: 4%; top: 4%;} .pro_list .pic dd{ width: 34px; height: 34px; display: inline-block; background-size: cover;} .pro_list .txt{ background: #fff; border: 1px solid #eeeeee; padding: 5% 100px 5% 7%; position: relative; transition: all 0.8s;} .pro_list h3{ font-size: 24px; font-weight: normal;} .pro_list p{ font-size: 16px; color: #999999; margin: 4% 0;} .pro_list .more_a2{ padding: 0;} .pro_list .more_a2:hover{ padding: 0 23px;} .pro_list .icon{ left: auto; top: 13%; right: 3.5%;display:none;} .pro_list .icon a{ width: 30px; height: 30px; background: url("../image/cz_icon2.png") no-repeat center; background-size: contain;margin-left: 8px;-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;opacity: 0.3; display: inline-block;} .pro_list .icon a.JD{ background-image: url("../image/cz_icon3.png");} .pro_list .icon a:hover{-webkit-filter: none;-moz-filter: none;-ms-filter:none;-o-filter: none;filter: none;filter:none; opacity: 1;} .pro_list a:hover h3{ color: black;} .pro_list li:hover figure{ transform: scale(1.1);} .pro_list li:hover .txt{ box-shadow: 0 0 10px #ccc;} /*法恩莎简介*/ .about_index{ margin-bottom: 7%;} .about_index .pic{ position: relative; width: 45%; padding: 3.1% 3.1% 0 0;} .about_index .pic img{ position: relative; z-index: 5;} .about_index .pic i, .about_index .pic:before, .about_index .pic:after, .about_index .pic i:before{ position: absolute;} .about_index .pic:before, .about_index .pic:after, .about_index .pic i:before{ content: '';} .about_index .pic i{ background: #252f44; right: 0; top: 0; width: 89%; height: 82%;} .about_index .pic:before, .about_index .pic:after{ background: #9b8868; right: 3.3%;top: 4%; z-index: 2;} .about_index .pic:before{ width: 65%; height: 1px;} .about_index .pic:after{ width: 1px; height: 58%;} .about_index .pic i:before{ width: 10px; height: 10px; border: 1px solid #9b8868; right: 2.2%; top: 3%;} .about_index_con{ width: 49%; font-size: 16px; line-height: 30px; color: #555555; text-align: justify;} .about_tit{ font-size: 40px; line-height: normal; color: black; padding: 2% 0 3%;} .about_numcon { text-align:center} .about_numcon li{ width: 32%; display:inline-block; margin: 7% 0;} .about_numcon .num{ font-weight: bold; font-size: 60px; line-height: normal; color: black; margin-bottom: -10px;} .about_numcon li i{ font-style: normal; display: inline-block; vertical-align: top; font-size: 30px; margin-top: 5px;} .Brand_story{ background: url(http://www.anzon.cn/images-1/brand_bg.jpg) no-repeat center black; background-size: contain; font-size: 16px; color: #7c8390; line-height:28px;} .Brand_story .box{ position: relative; } .Brand_story .txt, .Brand_story figure{ width: 50%;} .Brand_story .txt{ padding: 2% 10% 0 4%;} .Brand_story .txt1{ padding-top:0; position: absolute; right: 0; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .Brand_story .txt1:before, .Brand_story .txt1:after{content: '';position: absolute; background:rgba(155, 136, 104, 0.2);right: 17%;top:7%;z-index: 2;} .Brand_story .txt1:before{width: 46%;height: 1px;} .Brand_story .txt1:after{width: 1px;height:92%;} .Brand_story .txt .line{ width: 10px; height: 10px; border: 1px solid rgba(155, 136, 104, 0.2); right: 16%;top:7%; position: absolute;margin-top: -9px;margin-right: 1px;} .brand_tit{ font-size: 42px; line-height: normal; color: #fff; margin-bottom: 4%;} .Brand_story .txt2{ padding:0;position: absolute; left: 0; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .Brand_story .Brand_dl{ width: 430px; position: relative; margin-left: 8%; margin-bottom: 3%;} .Brand_story .Brand_dl2{margin-left: 27%;} .Brand_story .Brand_dl3{margin-left: 46%; margin-bottom: 0;} .Brand_story .spacing{display:block; clear:both; width:100%; height:1.2vh;} .Brand_story .Brand_dl:before, .Brand_story .Brand_dl:after, .Brand_story .Brand_dl dd:before, .Brand_story .Brand_dl .line:before, .Brand_story .Brand_dl .line:after{content: '';position: absolute;background:rgba(155, 136, 104, 0.2);z-index: 2;} .Brand_story .Brand_dl:before, .Brand_story .Brand_dl:after{right: 0;top: 18%;} .Brand_story .Brand_dl:before{width: 70%;height: 1px;} .Brand_story .Brand_dl:after{width: 1px;height: 72%;} .Brand_story .Brand_dl dt{font-size: 40px; line-height: normal; color: #fff;} .Brand_story .Brand_dl dd{ padding-left: 105px; margin-top: -20px; position: relative;line-height: 28px;} .Brand_story .Brand_dl dd:before{width: 7%;height: 1px; right: 0; bottom: 13%;} /*.Brand_story .Brand_dl2{ float: right; margin-top: 10%;width: 385px;} .Brand_story .Brand_dl2:before{ width: 72%;} .Brand_story .Brand_dl2 dd:before{ width: 9%;}*/ .Brand_story .Brand_dl .line{ right: auto; left: 8.5%; top: auto; bottom: 5%;} .Brand_story .Brand_dl .line:before{width: 50px;height: 1px;left: 100%;top: -1px;} .Brand_story .Brand_dl .line:after{width: 1px;height: 50px;right: -1px;bottom: 100%;} .Brand_story .txt3{ padding:0; position:absolute; right:0; height:100%;} .Brand_story .txt3 article{width:83%; padding:0 40px 30px 70px;} .Brand_story .txt3 .twxt{ width:100%; padding-top:0; position: absolute; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .Brand_story .txt3 dl{ width:100%; float: left; margin-bottom:40px; font-size:16px; line-height:28px; color:rgba(255, 255, 255, 0.4);} .Brand_story .txt3 dl .brand_tit{font-size: 42px; line-height: normal; color: #fff; margin-bottom: 4%;} .Brand_story .txt3 dl:nth-child(2){ margin-bottom:0; } .Brand_story .txt3 .line{ right:16%; bottom: 0; top: auto;} .Brand_story .txt3 .twxt:before, .Brand_story .txt3 .twxt:after{content: '';position: absolute; background:rgba(155, 136, 104, 0.2); right:17%; z-index: 2;} .Brand_story .txt3 .twxt:before{width:30%;height: 1px;right:17%;top: auto; bottom: 9px;} .Brand_story .txt3 .twxt:after{width: 1px;height:90%;right:17%; bottom:2%;top: auto;} .about_title{ text-align: center; padding: 5% 0 2%; font-size: 42px; line-height: normal; color: black;} .about_title p{ color: #999999; font-size: 16px; margin-top: 0.7%;} .honor_list{ margin-bottom: 7%;} .honor_list ul{ max-width: 1618px; margin: 0 auto;} .honor_list figure{ position: relative; padding-top: 111.854%; margin: 0 18px; background-size: auto; border: 1px solid #eeeeee; background-color: #fff; overflow:hidden;} .honor_list figure img{ position: absolute; left: 50%; top: 50%; max-width: 100%; max-height: 100%; transform: translate(-50%,-50%);} .honor_list li figure span{ left:0; top:0; display:block; position:absolute; width:100%; height:100%;transition: all 0.8s; } .honor_list li:hover figure span{transform: scale(1.1);} .about_box .slick-arrow{ width: 42px; height: 83px; background: url("../image/icon12.png") no-repeat right center; opacity: 0.2;} .about_box .slick-prev{ left: -3%;} .about_box .slick-next{ right: -3%;} .about_box .slick-arrow:hover{ opacity: 1;} .history{ background: url("../image/history_bg.jpg") no-repeat center; background-size: cover; padding: 0 0 6%;} .history .main{position: relative;max-width: 1600px; margin: 2% auto 0; } .history .bd{ overflow: hidden; user-select:none;} .history .bd ul{} .history .bd:before{ content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: url("../image/history_line.png") repeat-x;} .history li{ position: relative; padding-right: 2%; height: 460px;display: inline-block;} .history li:before, .history li:after{ content: ''; position: absolute; left: 0; top: 50%;} .history li:before{width: 10px; height: 10px; border: 1px solid #9b8868; margin-top: -5px;} .history li:after{ left: 5px; margin-top: -2px; width: 1px; height: 21px; background: #9b8868;} .history li:nth-child(2n):after{ margin-top: -20px;} .history li > *{position: absolute; left: 0; width: 70%;max-width: 220px} .history figure{ /*position: relative; width: 100%;*/ background-size: contain; ; height: 230px;} .history li:nth-child(2n) .txt, .history li:nth-child(2n-1) figure{top: 0;} .history li:nth-child(2n-1) .txt, .history li:nth-child(2n) figure{bottom: 0;} .history .txt{ height: 230px; line-height: 230px; overflow: hidden; } .history article{ display: inline-block; width: 100%; line-height: 28px;vertical-align: middle;} /*.history li:nth-child(2n) article{ vertical-align: top;} .history li:nth-child(2n) figure{ margin: 20% 0 0;}*/ .history li time{ font-size: 34px; color: black; line-height: normal;} .history li p{ color: #555555; font-size: 16px; line-height: 28px;word-break: break-all;white-space: normal;} .history .slick-prev{ left: -5%;} .history .slick-next{ right: -5%;} @media(max-width:1024px){ .history li{padding-right: 1%;} } @media(max-width:640px){ .history li{padding-right: 0;} .history li > *{max-width: 90%; margin: 0 auto;} .history li:before, .history li:after{left: 5%;} .history li:after{margin-left: 4px;} .history figure{background-size: auto 60%;} } .manContent{ min-height: 200px;} /*联系我们*/ .contact_info{} .contact_tit{ text-align: center;} .contact_tit h2{ font-size: 42px; color: black; line-height: normal;} .contact_tit h3{ line-height: normal; font-size: 38px; color: #235f62; margin: 1.5% 0 1%;} .contact_tit h3 span{ display: block; font-size: 16px; color: #555555;} .contact_tit p{ font-size: 16px; color: #555555;} .contact_info ul{ width: 100%; display: table; min-height: 612px; background: url("../image/contact_img.jpg") no-repeat center top; margin-bottom: 10%;} .contact_info li{ display: table-cell; width: 20%; vertical-align: middle; text-align: center; color: #fff; padding: 0 1%;} .contact_info li h2{ font-weight: normal; font-size: 20px; margin-bottom: 5%;} .contact_info li h3{ font-size: 24px; color: #235f62;} .contact_info li i{ background: #235f62; width: 20px; height: 1px; display: block; margin: 5% auto 0;} .contact_info li .span{ display: block; font-size: 14px; color: #80848e;} .contact_info li .i1{ width: 1px; height: 30px; margin: 20% auto 1%;} .contact_info li .add{ max-width: 230px; margin: 7% auto 20%; font-size: 16px;} .contact_info li .add span{ margin-bottom: 2%;} .news_info .title{ text-align: center; padding-bottom: 30px; border-bottom: 1px solid #ebebeb; margin-bottom: 30px;} .news_info .title h1{ font-size: 24px; margin: 0 0 20px;} .news_info .title span{ display: inline-block; margin: 0 20px; color: #999999;} .news_info .info{ line-height: 30px; font-size: 16px; color: #666666; margin: 10px auto 50px; max-width: 1080px;} .news_back{ padding: 50px 0; border-top: 1px solid #ebebeb; margin-top: 50px; color: #9fa0a0; font-size: 18px; line-height: 36px;} .news_back a{ color: #9fa0a0;} /*招商加盟*/ .investment_tit{ font-size: 42px; color: black; text-align: center; line-height: normal; font-weight: normal;} .investment_info{ font-size: 16px; color: #555555; line-height: 30px; padding:5% 0 10%;} .investment_info .icon_1{ display: block; width: 1px; height: 20px; background: #235f62; margin: 20px auto;} .investment_info2{ background: url("http://www.anzon.cn/images-1/investment_bg.jpg") no-repeat center right; color: #fff;} .investment_info2 .investment_tit{ color: #fff; padding: 4% 0;} .investment_ul{ padding: 9% 0 24%;} .investment_ul li{ float: left; width: 14.285%; padding: 0 2.5%;} .investment_ul b{ text-align: center; display: block; font-size: 24px;} .investment_ul h3{ font-weight: normal; text-align: center; font-size: 18px; margin: 10px 0;} .investment_ul i{ display: block; width: 1px; height: 20px; background: #235f62; margin: 20px auto;} .investment_ul p{ font-size: 14px; line-height: 30px;} .investment_table{ max-width: 800px; margin-top: -14%; background: #f6f6f6; padding: 5% 0;} .investment_table ul{ max-width: 240px; margin: 0 auto;} .investment_table .btn{ border: none; background: none; display: block; font-size: 16px;color: #d7d7d7; cursor: pointer; width: 100%; line-height: 40px; height: 40px; position: relative; z-index: 2;} .investment_table li{ margin: 10px 0;} .investment_table .text{ border: none; border-bottom: 1px solid #eeeeee; background: none; text-align: center; height: 34px; line-height: 34px; width: 100%; font-size: 16px;} .investment_table .more_a3{ width: 100%; text-align: center; border-bottom: 1px solid #eeeeee;} .investment_table .text::-webkit-input-placeholder {color: #d7d7d7;} .investment_table .text::-moz-input-placeholder {color: #d7d7d7;} .investment_table .text::-ms-input-placeholder {color: #d7d7d7;} .investment_table .more_a3:hover .btn{ color: #fff;} .investment_info3{ padding: 15% 0 60%; max-width: 1240px; margin: 0 auto;} .investment_info3_ul{ width:632px; float: right; margin-right: 190px; } .investment_info3_ul li{ float: left; width: 50%; border-left: 1px solid #235f62; font-size: 16px; color: #333333; margin-bottom: 20%; padding: 0 5%;} .investment_info3_ul span{ display: block; font-size: 24px; margin-bottom: 15px;} .Hbox2, .Hbox2 .slick-slider, .Hbox2 .slick-list, .Hbox2 .slick-track{ position: relative; height: 100%;} .Hbox2{ position: relative; height: 100%; background:#1f181c; /* background: url("../image/hbox2_bg.png") repeat center; */} .Hbox2 > .swiper-container-h{ height: 100%;} .Hbox2 li{ position: relative; height: 100%;} .Hbox2 .left, .Hbox2 .pic{ position: absolute; height: 100%; top: 0; text-align: center;} .Hbox2 .pic{ width: 39.063%;right: 0;} .Hbox2 .pic figure{position: relative;} .Hbox2 .pic .tit{ position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%); color: #fff; text-align: center; z-index: 3;} .Hbox2 .pic h3{ font-size: 36px; font-weight: normal; line-height: normal; margin-bottom: 5%;} .Hbox2 .left{ left: 0;transition:height 1s 0.2s; -webkit-transition:height 1s 0.2s; width: 60.937%;} .Hbox2 .left figure{ margin: 0 auto; margin-bottom: 3.5%; position: relative;} .Hbox2 .left .swiper-container-v{ width: 550px; max-width: 80%; display: inline-block; vertical-align: middle; margin-top: 3%;} .Hbox2 .swiper-slide_pic750 .left .swiper-container-v{ width: 600px; margin-top: 0;} .Hbox2 .left h2{ font-size: 30px; line-height: 36px; color: #fff; font-weight: normal;} .Hbox2 .left p{ font-size: 16px; color: #7d8391; padding: 20px 0 30px;} .Hbox2 .left .icon{ width: 200px; text-align: left; display: inline-block; vertical-align: bottom; } .Hbox2 .left .icon span, .Hbox2 .left .icon a{ display: inline-block; vertical-align: middle;} .Hbox2 .left .icon span{ margin-top: 5px;} .Hbox2 .left .icon a{ width: 50px; line-height: 50px; height: 50px; border-radius: 100%; text-align: center; overflow: hidden; position: relative; margin-right: 10px;} .Hbox2 .left .icon a img{ position: relative; z-index: 10;} .Hbox2 .left .icon a:before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%;background: #235f62; transition: all 0.3s; opacity: 1; } .Hbox2 .left .icon a:after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #235f62; border-radius: 100%;} .Hbox2 .left .icon a .img1, .Hbox2 .left .icon a:hover .img2{ display: none;} .Hbox2 .left .icon a:hover:before{ background: #235f62; opacity: 0; left: -100%;} .Hbox2 .left .icon a:hover:after{ border-color: #dddddd;} .Hbox2 .left .icon a:hover .img1{ display: inline-block;} .Hbox2 .txt_con{ max-width: 600px; margin-left: 15%;} .Hbox2 .swiper-slide_txt .txt_con{ position: absolute; top: 42%; transform: translateY(-50%); margin-left: 20%;} .Hbox2 .swiper-slide_txt .icon{ position: relative; vertical-align: middle; margin-top: 36%;} .Hbox2 .txt{ width: 100%; left: 0; top: 50%; position: absolute;transform: translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%); } .Hbox2 .slick-dots{ position: relative!important; margin: 3% 0 0;} .Hbox2 .slick-dots li{ width: 9px; height: 9px; background: #bec1c7; opacity: 1; margin: 0 6px; position: relative; margin: 0 7px;display: inline-block;border-radius: 100%;} .Hbox2 .slick-dots button{ font-size: 0; display: none;} .Hbox2 .slick-dots li.slick-active{ background: #235f62;} .Hbox2 .slick-arrow{ width: 40px; height: 40px; background:url("../image/icon8.png") no-repeat center bottom; opacity: 1!important; left: auto; right: 43%; top: 50%; border: none;} .Hbox2 .slick-next{ margin-top: 25px;} .Hbox2 .slick-prev{ transform: rotate(-180deg); margin-top: -25px;} .Hbox2 .slick-arrow:hover{ background-position: center top;} .Hbox2 .swiper-button-disabled{ opacity: 0.5!important;} .Hbox2 .more_a2 span{ color: #235f62;} .Hbox2 .color_f span{ color:#fff; } .Hbox2 .more_a2:hover span{ color: #fff;} .Hbox2 .left .more_a2{transition: all 1.4s 1.1s; border-bottom: 1px solid #235f62;} @media(max-width:640px){ .Hbox2 li{height: auto!important;} } @media(min-width:769px){ .Hbox2 .left figure, .Hbox2 .left h2, .Hbox2 .left p, .Hbox2 .left .more_a2{ opacity: 0; transform: translateY(-70px);} .Hbox2 .left figure{ transition: all 1.4s .8s;} .Hbox2 .left h2{transition: all 1.4s .9s;} .Hbox2 .left p{transition: all 1.4s 1s;} .Hbox2 .slick-active{z-index: 10;} .Hbox2 .slick-active .pic{height: 100%;} .Hbox2 li.swiper-slide{opacity: 1!important;} .Hbox2 .pic{ top: 0;height:0;transition:0.6s ease-in;-webkit-transition:1s cubic-bezier(0.88, 0.08, 0.29, 0.93);overflow: hidden;} .Hbox2 .view .pic{height: 100%;transition: 0s;} .Hbox2 .pic .tit{ opacity: 0; transition: all 2.5s .85s; transform: translateY(-70px)} .Hbox2 .view .left figure, .Hbox2 .view .left h2, .Hbox2 .view .left p, .Hbox2 .view .left .more_a2{ transform: translateY(-50px); opacity: 0;} .Hbox2 .view .left figure{ transition: all 0.8s .6s;} .Hbox2 .view .left h2{transition: all 0.8s .6s;} .Hbox2 .view .left p{transition: all 0.8s .6s;} .Hbox2 .view .left .more_a2{transition: all 0.8s .6s;} .Hbox2 .slick-active .pic .tit, .Hbox2 .slick-active .left figure, .Hbox2 .slick-active .left h2, .Hbox2 .slick-active .left p, .Hbox2 .slick-active .left .more_a2{ opacity: 1; transform: translateY(0)} .Hbox2 .slick-active .left figure{ transition: all 2.6s .8s;} .Hbox2 .slick-active .left h2{transition: all 2.6s .9s;} .Hbox2 .slick-active .left p{transition: all 2.6s 1s;} .Hbox2 .slick-active .left .more_a2{transition: all 2.6s 1.1s; } } .Hbox3, .Hbox3 .slick-slider, .Hbox3 .slick-list, .Hbox3 .slick-track{ position: relative; height: 100%;} .Hbox3 li, .Hbox3 li .pic{ position: relative; height: 100%;} .Hbox3 .pic img{ display: none;} .Hbox3 .box{ width: 100%; max-width: 1380px; left: 50%; top: 0; height: 100%;transform: translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%); z-index: 10; position: absolute;} .Hbox3 .left, .Hbox3 .right{ position: absolute; width: 49%; top: 50%;} .Hbox3 .left{ left: 0; max-width: 500px; color: #fff;} .Hbox3 .left h3{ font-size: 43px; line-height: normal; font-weight: normal;} .Hbox3 .left h4{ font-weight: normal; font-size: 24px; line-height: normal; margin: 8% 0 2%;} .Hbox3 .left p{ font-size: 16px; line-height: 30px; margin-bottom: 9.4%;} .Hbox3 .right{ right: 0;transform: translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%); max-width: 400px; text-align: center; overflow: hidden;} .Hbox3 .right .ri_con{ background: #fff; position: relative;} .Hbox3 .right figure{ padding-top: 60%;} .Hbox3 .right figure img{ display: none;} .Hbox3 .right .icon{ width: 70px; height: 70px; line-height: 70px; display: block; margin: 0 auto; text-align: center; background: #fff; border-radius: 100%; position: relative; top: 50%; transform: translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%); z-index: 7; cursor: pointer;} .Hbox3 .right .icon img{ position: relative; z-index: 5; display: inline-block;} .Hbox3 .right .icon img.img2{ display: none;} .Hbox3 .right .icon:before{ content: ''; position: absolute; width: 71.45%; height: 71.45%; border: 1px solid #dddddd; border-radius: 100%; left: 50%; top: 50%;transform: translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%); background: #fff; z-index: 1;} .Hbox3 .right .icon_on:before{ background: #235f62; border-color: #235f62;} .Hbox3 .right .icon_on img.img1{ display: none;} .Hbox3 .right .icon_on img.img2{ display: inline-block;} .Hbox3 .right h2{ font-size: 30px; font-weight: normal; color: #333; line-height: normal; margin-top: -5%;} .Hbox3 .right h2 span{ display: block; font-size: 20px;} .Hbox3 .right p{ font-size: 16px; line-height: 30px; color: #555555; max-width: 250px; margin: 4% auto 9%;} .Hbox3 .right .txt{ padding-bottom: 13%; position: relative; z-index: 5; transition: all 0.5s;} .Hbox3 .right .ri_con:before{ content: ''; position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%); width: 90%; height: 94%; border: 1px solid rgba(226,226,226,0.5);} .Hbox3 .right .hover{ position: absolute;bottom: 4%;background: #fff;width: 94%;z-index: 6;padding-bottom: 7%;left: 3%; transform: translateY(100%); opacity: 0; transition: all 0.8s;padding-top: 11%;} .Hbox3 .right .ewm{ width: 47.875%; margin: 0 auto 1%;} .Hbox3 .right .info_txt_on .hover{ transform: translateY(0); opacity: 1;} .Hbox3 .right .info_txt_on .txt{ opacity: 0;} .Hbox3 .dots{ position: absolute; width: 100%; max-width: 1380px; left: 50%; bottom: 17%; transform: translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%); z-index: 10;} .Hbox3 .dots .slick-dots{ width: 50%; right: 0; text-align: center; max-width: 400px; position: absolute;} .Hbox3 .slick-dots li{ display: inline-block; width: 44px; height: 10px; line-height: 10px; margin: 0 5px; border: 1px solid transparent; cursor: pointer; opacity: 1;} .Hbox3 .slick-dots button{ border: none; width: 40px;font-size: 0; height: 2px; display: inline-block; vertical-align: middle; margin-top: -3px; background: #fff; opacity: 0.8} .Hbox3 .slick-dots .slick-active{ border-color: #fff;} .Hbox3 .slick-dots .slick-active button{ width: 38px; height: 4px; background: #fff; opacity: 1;} .Hbox3 .left h3, .Hbox3 .left h4, .Hbox3 .left p, .Hbox3 .left .more_a, .Hbox3 .ri_con, .Hbox3 .right h2, .Hbox3 .right h2 span, .Hbox3 .right p, .Hbox3 .right .more_a2{ opacity: 0;} .Hbox3 .slick-active .left h3{-webkit-animation: fadeInUp 1s both;animation: fadeInUp 1s both;animation-delay:2s;-webkit-animation-delay:2s;} .Hbox3 .slick-active .left h4 {-webkit-animation: fadeInUp 1s both;animation: fadeInUp 1s both;animation-delay:2.2s;-webkit-animation-delay:2.2s;} .Hbox3 .slick-active .left p{-webkit-animation: fadeInUp 1s both;animation: fadeInUp 1s both;animation-delay:2.4s;-webkit-animation-delay:2.4s;} .Hbox3 .slick-active .left .more_a{-webkit-animation: fadeInUp 1s both;animation: fadeInUp 1s both;animation-delay:2.6s;-webkit-animation-delay:2.6s;} .Hbox3 .slick-active .ri_con, .Hbox3 .slick-active .right h2, .Hbox3 .slick-active .right h2 span, .Hbox3 .slick-active .right p, .Hbox3 .slick-active .right .more_a2{-webkit-animation: fadeInRight 1s both;animation: fadeInRight 1s both;} .Hbox3 .slick-active .ri_con{animation-delay:3s;-webkit-animation-delay:3s;} .Hbox3 .slick-active .right h2{animation-delay:3.4s;-webkit-animation-delay:3.4s;} .Hbox3 .slick-active .right h2 span{animation-delay:3.6s;-webkit-animation-delay:3.6s;} .Hbox3 .slick-active .right p{animation-delay:3.8s;-webkit-animation-delay:3.8s;} .Hbox3 .slick-active .right .more_a2{animation-delay:4s;-webkit-animation-delay:4s;} .Hbox4{ position: relative; background: -webkit-linear-gradient(left,#34264c , #020202); overflow: hidden;} .Hbox4 .tit{ position: relative; padding-top: 22%; } .Hbox4 .tit figure, .Hbox4 .tit h2{ position: absolute; width: 100%; text-align: center; left: 0; } .Hbox4 .tit figure{ height: 100%;top: 0; overflow: hidden;} .Hbox4 .tit figure img{} .Hbox4 .tit h2{ top: 47%; transform: translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%); font-size: 42px; line-height: normal; color: #fff; font-weight: normal;} .Hbox4 .tit h2 span{ font-size: 16px; color: #fff; display: block; margin-top: 1%;} .Hbox4 .ul li{ width: 50%; float: left; position: relative; overflow: hidden;} .Hbox4 .ul li figure{ padding-top: 56.25%; transition: all 0.5s; position: relative;} .Hbox4 .ul li figure:before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(57, 73, 93, 0.39); z-index: 3;} .Hbox4 .ul li img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;} .Hbox4 .ul li:hover figure{ transform: scale(1.03);} .Hbox4 .ul li .txt{ position: absolute; left: 0; width: 100%; top: 50%;transform: translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%); text-align: center; color: #fff; z-index: 5;} .Hbox4 .ul li .txt h3{ font-size: 30px; font-weight: normal; margin-bottom: 4%;} .Hbox4 .ul li:hover figure img{-webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter:normal;} .Hbox4 .ul li:hover figure:before{ opacity: 0;} .Hbox4 .tit{ transition:.8s .25s; -webkit-transition:.8s .25s;} .Hbox4 .tit figure img{opacity:0;-webkit-transition: all 1.2s;-moz-transition: all 1.2s;-ms-transition: all 1.2s;-o-transition: all 1.2s;transition: all 1.2s;-webkit-transform:translateY(74px);-moz-transform:translateY(74px);-ms-transform:translateY(74px);-o-transform:translateY(74px);transform:translateY(74px);} .Hbox4 .tit h2{opacity:0; -webkit-transition: all 1.2s .15s;-moz-transition: all 1.2s .15s;-ms-transition: all 1.2s .15s;-o-transition: all 1.2s .15s;transition: all 1.2s .15s; -webkit-transform:translateY(74px);-moz-transform:translateY(74px);-ms-transform:translateY(74px);-o-transform:translateY(74px);transform:translateY(74px); } .Hbox4 .tit h2 span{ opacity:0; -webkit-transition: all 1.2s .25s;-moz-transition: all 1.2s .25s;-ms-transition: all 1.2s .25s;-o-transition: all 1.2s .25s;transition: all 1.2s .25s; -webkit-transform:translateY(74px);-moz-transform:translateY(74px);-ms-transform:translateY(74px);-o-transform:translateY(74px);transform:translateY(74px); } .Hbox4 .ul li{position:relative; opacity:0;-webkit-transition: all 1.2s .55s;-moz-transition: all 1.2s .55s;-ms-transition: all 1.2s .55s;-o-transition: all 1.2s .55s;transition: all 1.2s .55s; } .Hbox4 .ul li:nth-of-type(1) { -webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%); } .Hbox4 .ul li:nth-of-type(2) { -webkit-transform:translateX(50%);-moz-transform:translateX(50%);-ms-transform:translateX(50%);-o-transform:translateX(50%);transform:translateX(50%); } .Hbox4 .ul li .txt h3{opacity:0; -webkit-transition: all 1.2s .85s;-moz-transition: all 1.2s .85s;-ms-transition: all 1.2s .85s;-o-transition: all 1.2s .85s;transition: all 1.2s .85s; -webkit-transform:translateY(74px);-moz-transform:translateY(74px);-ms-transform:translateY(74px);-o-transform:translateY(74px);transform:translateY(74px); } .Hbox4 .ul li .txt .more_a{opacity:0; -webkit-transition: all 1.2s .95s;-moz-transition: all 1.2s .95s;-ms-transition: all 1.2s .95s;-o-transition: all 1.2s .95s;transition: all 1.2s .95s; -webkit-transform:translateY(74px);-moz-transform:translateY(74px);-ms-transform:translateY(74px);-o-transform:translateY(74px);transform:translateY(74px);} .Hbox4_on .tit h2, .Hbox4_on .tit h2 span, .Hbox4_on .ul li:nth-of-type(1), .Hbox4_on .ul li:nth-of-type(2), .Hbox4_on .tit figure img, .Hbox4_on .ul li .txt h3, .Hbox4_on .ul li .txt .more_a{opacity: 1;-webkit-transform: translate(0);-moz-transform: translate(0);-ms-transform: translate(0);-o-transform: translate(0);transform: translate(0);} .Hbox5 .slick-slider, .Hbox5 .slick-list, .Hbox5 .slick-track, .Hbox5, .Hbox5 li, .Hbox5 .pic{ position: relative; height: 100%; width: 100%;} .Hbox5 .pic{background-position:center top;background-repeat:no-repeat;overflow:hidden;} .Hbox5 .pic img{ display: none;} .Hbox5 .pic dl{position:absolute;width:1920px; left:50%;margin-left:-960px; height:100%; background:rgba(38,49,71,0.2);} .Hbox5 .tit{ position: absolute; left: 50%; margin-left: -500px; z-index: 2; color: #fff; width: 50%; top: 30%;} .Hbox5 .tit h2{ font-size: 42px; font-weight: normal; line-height: normal;} .Hbox5 .tit p{ font-size: 18px; letter-spacing: 5px; margin-top: 1.2%;} /*.Hbox5 .tit p:after{ content:''; display: inline-block; width: 140px; height: 1px; vertical-align: middle; background: #fff; margin-left: 30px;}*/ .Hbox5 .slick-active .tit h2{-webkit-animation: fadeInUp 1s both;animation: fadeInUp 1s both;animation-delay:2s;-webkit-animation-delay:2s;} .Hbox5 .slick-active .tit p{-webkit-animation: fadeInUp 1s both;animation: fadeInUp 1s both;animation-delay:2s;-webkit-animation-delay:2.4s;} .Hbox5 .info_txt{ width: 330px; position: absolute; right: 50%; margin-right: -550px; top: 53%;transform: translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%); background: #fff; z-index: 2; overflow: hidden;} .Hbox5 .info_txt .item_pic{ display: none;} .Hbox5 .info_txt img{ display: block; width: 100%;} .Hbox5 .info_txt h4{font-size: 16px;color: #999999;text-align: center;font-weight: normal;padding: 4.25% 0; margin:0 20px;border-bottom:1px solid #eee;} .Hbox5 .txt{ text-align: center;} .Hbox5 .txt h3{font-weight: normal;font-size: 24px;color: #555555;font-weight: normal;padding: 20px 0 9px 0;} .Hbox5 .txt p{ font-size: 14px; color: #555555; line-height: 24px;} .Hbox5 .btn{padding:20px;overflow:hidden;} .Hbox5 .more{float:left;width:48%; line-height: 40px; color: #fff; text-align: center; background: #235f62;} .Hbox5 .more-2{float:right;background:black;} .Hbox5 .more i{ display: inline-block; width: 6px; height: 9px; vertical-align: middle; position: relative; margin-top: -3px; margin-left: 15px; background: url("../image/icon1.png") no-repeat center top;} .Hbox5 .swiper-button-prev:after, .Hbox5 .swiper-button-next:after{ display: none;} .Hbox5 .hover{position: absolute;width: 100%;left: 0;top: 0;background: #fff;text-align: center;height: 100%;transform: translateY(100%);-ms-transform:translateY(100%);-moz-transform:translateY(100%);-webkit-transform:translateY(100%);-o-transform:translateY(100%); opacity: 0; transition: all 0.5s;} .Hbox5 .hover .close{position:absolute; width:30px; height:30px;background:#235f62; right:10px; top:10px;cursor:pointer;z-index:10;} .Hbox5 .hover .close:before, .Hbox5 .hover .close:after{position:absolute; content:'';width:70%; left:15%; height:2px;top:50%; margin-top:-1px;background:#fff;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);} .Hbox5 .hover .close:after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);} .Hbox5 .hover_show{transform: translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0); opacity: 1;} .Hbox5 .hover:before{ content: ''; left: 50%; top: 50%;transform: translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%); width: 90%; height: 92%; border: 1px solid rgba(226,226,226,0.5); position: absolute;} .Hbox5 .hover h2{ font-size: 24px; font-weight: normal; line-height: normal; padding: 11% 0 2%;} .Hbox5 .hover h2 span{ font-size: 16px; color: #999999; text-align: center; display: block; margin-top: 2%;} .Hbox5 .hover .item{ width: 240px; margin: 6% auto;} .Hbox5 .hover .table{ position: relative; z-index: 3;} .Hbox5 .hover .text{ text-align: center; line-height: 40px; height: 40px; border: none; border-bottom: 1px solid #eeeeee; width: 100%;} .Hbox5 .hover .more{margin: 9% auto 0;float:none;display:block; } .Hbox5 .hover .text::-webkit-input-placeholder { color: #d0d0d0; } .Hbox5 .hover .text::-moz-input-placeholder { color: #d0d0d0; } .Hbox5 .hover .text::-ms-input-placeholder { color: #d0d0d0; } .Hbox5 .pic dd a{ position: absolute; padding-bottom: 15px; z-index: 20;} .Hbox5 .pic .line{ width: 30px; height: 30px; position: relative; border-radius: 100%; display: block; line-height: 30px; text-align: center; } .Hbox5 .pic .line i{width: 20px; height: 20px; background: rgba(154,136,103,0.8); opacity: 1; position:absolute;left:50%; top:50%; margin:-10px 0 0 -10px; border-radius: 100%; z-index:10;} .Hbox5 .pic .line:before, .Hbox5 .pic .line:after{ content: '';position: absolute; border-radius: 100%; left: 50%; top: 50%;transform: translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%); z-index:1; } .Hbox5 .pic .line:before{ width: 32px; height: 32px; background: rgba(255,255,255,0.7);animation: Hbox5line2 1s ease-in;-webkit-animation: Hbox5line2 1s ease-in;-moz-animation: Hbox5line2 1s ease-in;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite;} .Hbox5 .pic .line:after{ width: 46px; height: 46px;background: rgba(154,136,103,0.8);animation: Hbox5line 1s ease-in;-webkit-animation: Hbox5line 1s ease-in;-moz-animation: Hbox5line 1s ease-in;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite;} .Hbox5 .pic dd span{ position: absolute; padding: 0 20px; background: rgba(154,136,103,0.8); border-radius: 5px; color: #fff; left: 50%;transform: translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%);white-space: nowrap; top: 100%; line-height: 32px; display: none;} .Hbox5 .pic dd span:before{ content:''; position: absolute; bottom: 100%; left: 50%; width: 0; height: 0; border: 5px solid transparent; border-bottom-color: rgba(154,136,103,0.8); margin-left: -5px;} .Hbox5 .pic dd.on a span, .Hbox5 .pic dd a:hover span{ display: block;} .Hbox5 li:nth-child(2) .tit{ top: 22%;} .Hbox5 .swiper-button-next, .Hbox5 .swiper-button-prev{ width: 40px; height: 40px; background:url("../image/icon2.png") no-repeat left center; opacity: 1!important;} .Hbox5 .swiper-button-prev{ transform: rotate(180deg);} .Hbox5 .swiper-button-next:hover, .Hbox5 .swiper-button-prev:hover{ background-position: right center;} .Hbox5 .swiper-button-disabled{ opacity: 0.5!important;} .Hbox5 .info_txt{ opacity: 0;transform:translate(100%,-50%); -webkit-transform:translate(100%,-50%); -ms-transform:translate(100%,-50%); transition:0.6s 0.6s; -webkit-transition:0.6s 0.6s;} .Hbox5_on .slick-active .info_txt{transform:translate(0,-50%); -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%);opacity:1; transition:1.2s 0.6s; -webkit-transition:1.2s 0.6s;} .wapNav_li{ display: none;} /*搜索*/ .newsList_box{ margin:-2% 0 2%;} .newsList_box li{ line-height:55px;border-bottom:1px dashed #e5e5e5;} .newsList_box li a{ padding-right:10px;} .newsList_box li time{ float:right;} .newsList_box li a:hover{ color: black;} @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInUp { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -200%, 0); transform: translate3d(0, -200%, 0); } } @keyframes fadeInUp { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -200%, 0); transform: translate3d(0, -200%, 0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes Hbox5line{ 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; } } @keyframes Hbox5line{ 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; } } @-webkit-keyframes Hbox5line2{ 0%{ opacity: 0.8; } 50%{ opacity: 1; } 100%{ opacity: 0.8; } } @keyframes Hbox5line2{ 0%{ opacity: 0.8; } 50%{ opacity: 1; } 100%{ opacity: 0.8; } } #index_nav{position: fixed;right: 1%;bottom: 1%;z-index: 150;} #index_nav li{font-size: 0;position: relative;text-align: right;width: 40px;font-family: DINCOND;overflow: hidden;} #index_nav li a{color: #fff;display:block;height:25px;} #index_nav li:after{content: '';float: right;width: 20px;height: 1px;background: #fff;/* clear: both; */} .index_nav_y#index_nav li a{ color: #235f62;} .index_nav_y#index_nav li:after{ background: #dadada;} #index_nav li.active{font-size: 24px;margin:10px 0 0 0;} #index_nav li.active a{heigth:29px;line-height:28px;} #index_nav li.active:after{width: 40px;margin-top: 4px;} .index_nav_y#index_nav li.active:after{ background: #235f62;} .list_links { padding-bottom:2%;} .list_links ul li{ float:left; width:20%; padding:1%; margin-bottom: 2%;} .list_links ul li a{ display:block; background-color:#fff; padding:6px;} .list_links ul li .pic { padding-bottom:35%; background:no-repeat center center; background-size:contain; border: 1px solid #f5f5f5;} .list_links ul li h4{ text-align:center; margin-top: 10px;} @media(max-width:768px){ .list_links ul li{ width:33.33%;} } @media(max-width:640px){ .list_links ul li{ width:50%;} } /*Page002046 */ .Page002046 .Pages{ text-align:center; padding:4% 0 7%;} .Page002046 .Pages a{ display:inline-block; vertical-align:middle;border:1px solid #ececec; padding:0 17px; line-height:43px; color:#666666; font-size: 16px;} .Page002046 .Pages a:hover, .Page002046 .Pages a.a_cur{ background-color:black; color:#fff;} .Page002046 .Pages em{ font-style:normal; display:inline-block; vertical-align:middle; overflow:hidden;} .Page002046 .Pages em a{ float:left; margin-left:-1px;} .Page002046 .Pages .p_cur, .Page002046 .Pages .p_count, .Page002046 .Pages .p_jump, .Page002046 .Pages .p_total{ display:none;} .Page002046 .Pages .a_prev, .Page002046 .Pages .a_next{ padding:0; width:45px; background:url(../image/page002046-a_prev.gif) no-repeat center center; overflow:hidden; line-height:1000px; height:43px;} .Page002046 .Pages .a_next{ background-image:url(../image/page002046-a_next.gif);} .Page002046 .Pages .a_first, .Page002046 .Pages .a_end{ width: 80px;} @media(max-width:640px){ .Page002046 .Pages .a_first, .Page002046 .Pages .a_end{ display:none;} } @media(max-width:480px){ .Page002046 .Pages a{padding:0 5px; } } @media(max-width:1600px){ .slick-prev{ left: 1%;} .slick-next{ right: 1%;} .Hbox3 li .pic{ background-size: cover;} .history .slick-prev, .about_box .slick-prev{ left: 0;} .history .slick-next, .about_box .slick-next{ right: 0;} .pro_con .box_info4 .left{ padding-left: 5%;} .pro_con .box_info4 .slick-dots{ width: 90%;} } @media(max-width:1400px){ .Hbox3 .left{ left: 4%;} .Hbox3 .right, .Hbox5 .info_txt{ right: 4%;} .Hbox5 .info_txt{ margin-right: 0;} } @media(max-width:1366px){ .pro_con .box_info4 .left{ padding-left: 2%;} .pro_con .box_info4 .slick-dots{ width: 98%;} } @media(max-width:1200px){ .pro_con .box_info4 .left .slick-slide{ padding-right: 3%;} .pro_con .box_info4 .slick-dots{ bottom: 0;} } @media(max-width:1024px){ #index_nav{ display: none;} #fullPage .section, #fullPage .fp-tableCell{ height: auto!important;} .H_banner img{ display: block;} .H_banner li figure{ position: relative;} .H_banner .info h3, .Hbox3 .left h3, .Hbox5 .tit h2{ font-size: 36px;line-height: normal;} .H_banner .info p{ font-size: 20px; line-height: normal;} .Hbox2 .left, .Hbox2 .pic{ position: relative; float: left;} .Hbox2 .left{ width: 55%; padding-top: 5%;} .Hbox2 .pic{ width: 45%;} .Hbox2 .pic h3{ font-size: 24px;} .Hbox2 .txt{ position: relative; transform: none; top: auto;} .Hbox2 .left .swiper-container-v{ width: 350px;} .Hbox2 .left h2{ font-size: 24px; line-height: normal;} .Hbox2 .left p{ padding: 10px 0 20px;} .Hbox3 li .pic{ padding-top: 65%;} .Hbox3 .left{ top: 40%;} .Hbox3 .left h3{ margin-top: 5%;} .Hbox3 .right .txt{ padding-bottom: 10%;} .Hbox3 .right .txt, .Hbox4 .tit h2{ font-size: 24px;} .Hbox3 .right h2 span{ font-size: 18px;} .Hbox3 .right p{ line-height: 26px; margin:3% auto 6%;} .Hbox4 .tit h2{ top: 40%; font-size: 36px;} .Hbox5 .pic img{ display: block;} .Hbox5 .tit{ left: 4%; margin-left: 0;} .Hbox5 .info_txt{ width: 300px;} .Hbox5 .txt h3{ font-size: 20px; padding: 3% 0 3%;} .Hbox5 .hover h2{ font-size: 20px;} .Hbox5 .pic dl{ display: none;} .footer .top .left{ width: 45%;} .footer .top h2{ font-size: 20px;} .footer .top .right a{padding: 2% 8.215%;} .footer dl{ margin-right: 3%;} #toTop{ right: 2%;} .open_Nav{ width: 700px;} .pro_con .box_info4 .left{ padding-top: 5%;} .pro_con .gallery-thumbs{ max-width: 500px;} .pro_con .gallery-thumbs .slick-arrow{ display: none!important;} .pro_con .box_info2 .hover{ display: block;} .pro_con .box_info2 .txt{ display: none;} .pro_con .box_info2 .slick-slide{ float: left; display: block;} .other_pro li h3{ font-size: 20px;} .other_pro li p{ font-size: 14px;} } @media(max-width:768px){ .fp-tableCell{ display: block;} .nybanner img, .nybanner_czlist img, .Nbanner_video img{ display: none;} .nybanner .wapban, .nybanner_czlist .wapban, .Nbanner_video .wapban{ display: block; width: 100%;} .Hbox2{ overflow-x: hidden; height: auto;} .Hbox2 .left, .Hbox2 .pic{ float: none; width: 100%; overflow: hidden; z-index: 1; height: auto;} .Hbox2 .left, .Hbox2 .pic{ position: relative; transform: none;} .Hbox2 .view .left figure{ transform: translateY(0);} .Hbox2 .slick-arrow{ display: none!important;} .Hbox2 .left{ padding: 5% 0; z-index: 10;} .Hbox2 .swiper-slide_txt .icon, .Hbox2 .left .icon{ display: none;} .Hbox3 li{} .Hbox3 .left, .Hbox3 .right{ transform: none!important; position: relative; top: 0; left: auto; margin: 0 auto;} .Hbox3 .left{padding: 4% 0;} .Hbox3 .right{ padding: 2% 0 13%;} .Hbox3 li .pic{ position: absolute; width: 100%; height: 100%;} .Hbox3 .box{ position: relative; transform: none; left: auto;} .Hbox3 .left p{ max-height: 60px; overflow: hidden;} .Hbox3 .dots{ position: absolute; transform: none; bottom: 2%; left: 0;} .Hbox3 .dots .slick-dots{ width: 100%; position: static;} /*.Hbox3 .slick-dots button{ margin-top: -5px;}*/ .Hbox3 .slick-arrow{ display: none!important;} .option_table dd span{ width: auto;} .pro_menu .menu_box ul{ margin-left: 0;} .pro_con .box_info2 dl{ display: none;} .footer .top h2{ text-align: center;} .footer .top .left, .footer .top .right{ float: none; width: 100%; margin-bottom: 15%; max-width: 100%;} .footer .search{ margin: 0 auto;} .footer .top .right a{padding: 2% 0;width: 100%; margin-bottom: 3%;} .czBox_info1 .pic, .czBox_info1 .txt_con{ float: none; width: 100%;} } @media(max-width:640px){ .Header .logo{ padding: 3% 0;} .Header .logo img{ max-width: 40%;} .Hbox4 .tit figure{ position: relative;} .Hbox4 .ul li{ float: none; width: 100%;} .Hbox5 .pic{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .Hbox5 li{ padding: 3% 0;} .Hbox5 .tit, .Hbox5 .info_txt{ position: relative; transform: none!important; margin: 0 auto; right: auto;} .Hbox5 .tit{ width: 300px;} .Hbox5 .pic img{ display: none;} .H_banner .info h3, .Hbox3 .left h3, .Hbox5 .tit h2,.Hbox2 .pic h3{ font-size: 20px;} .H_banner .info p{ font-size: 16px;} .Hbox2 .txt_con{ margin-left: 0;} .Hbox2 .swiper-slide_txt .txt_con{ margin-left: 0; padding: 0 2%;} .Hbox2 .left h2, .Hbox3 .left h4{ font-size: 18px;} .Hbox3 .left, .Hbox3 .right{ width: 90%; right: auto;} .Hbox4 .tit h2, .Hbox4 .ul li .txt h3{ font-size: 24px;} .Hbox4 .tit h2 span{ font-size: 14px;} .Hbox4 .ul li .txt h3{ margin-bottom: 2%;} .Hbox5 .tit{ margin-bottom: 5%;} .Header .top_icon{ position: static;} .Header .top_icon dd{ position: absolute; margin-left: 0;} .Header dd.openMenu{ right: 2%;} .Header dd.top-search{ left: 0;} .Header dd.lang{ display: none;} .open_Nav{ width: 100%;min-width: auto;} .open_Nav ul{ width: 50%;} .open_Nav .sub_three{ display: none!important;} .open_Nav li >a{ font-size: 20px; line-height: 60px; padding-left: 15%;} .open_Nav .sub_two{ top: 18px;} .open_Nav .sub_two dd > a{ padding-left: 15%;} .nybanner .txt{ max-width: 80%;} .nybanner h3, .nybanner_prolist h3, .nybanner_czlist h3{ font-size: 24px;} .nybanner p, .nybanner_prolist h4, .Nbanner_video .txt p, .nybanner_czlist .slick-active h4{ font-size: 20px;} .nybanner_prolist p{ font-size: 16px;} .ny_menu li a, .ny_menu_prolist li a{ line-height: 36px; font-size: 16px;} .ny_menu li a.haslabel{padding-left: 35px;} .ny_menu_czlist li i{ line-height: 62px;width: 60px;height: 39px;top: -38%;font-size: 10px;} .option_table dt, .option_table dd{ display: block; padding: 10px; font-size: 14px;} .option_table dd{ padding-left: 15%;} .option_table dt{ width: 100%;} .option_table dd .all{ top: 10px;} .pro_index_box1 li, .pro_index_list .category_list li{ width: 100%; float: none; margin-right: 0;} .pro_index_box1 .icon{top: -20px; width: 140px;height: 80px;} .pro_index h3, .pro_index h2, .pro_index_list .category_list h2, .czlist_current h2{ font-size: 24px;} .pro_index h3,.pro_index_list .txt_left h3,.pro_list h3{ font-size: 18px;} .pro_index_list .list{ padding-right: 3%;} .pro_index_list .pro_more{display: block;margin: 7% auto 0;width: 100%; position: relative;right: auto;} .pro_index_list .category_list h3{ font-size: 16px;} .pro_index_list .category_list .more_a2{ position: relative; margin-top: 10px; position: relative;right: auto;} .pro_index_box3 .txt{ position: relative; width: 100%; right: auto;} .pro_list li{ float: none; margin-right: 0; width: 100%;} .pro_list p{ font-size: 14px;} .czlist_current .search{ display: none;} .Nbanner_video .txt span{ width: 35px; height: 35px; background-size: cover;} .pro_menu .menu_box{ line-height: 40px;} .pro_menu .menu_box h2{ float: none; width: 100%; text-align: left;} .pro_menu .menu_box .right{float: none; width: 100%;} .pro_menu .menu_box ul{ margin-left: 0;} .pro_con .gallery-thumbs{ position: relative; } .pro_con .gallery-thumbs li{ padding-top: 20px;} .pro_con .box_info2 .hover h2{ font-size: 20px;} .pro_con .box_info2 .hover p{white-space: normal;} .pro_con .box_info2 li dl{ display: none;} .pro_con .box_info4 .left h3, .pro_title{ font-size: 24px;} .pro_con .box_info4 .left, .pro_con .box_info4 .right{ float: none; width: 100%;} .parameter{ padding-right: 0;} .parameter figure{padding-top:0;} /*.parameter figure{ position: absolute; left: 0; top: 0; width: 100%;}*/ .parameter .right{ position: relative; width: 100%; padding: 10% 4%;top:auto;transform:translateY(0);-webkit-transform:translateY(0);-ms-transform:translateY(0);} .pro_down{ height: auto; padding-top: 0;background-size: cover;background-position: center;} .pro_down .list{ width: 100%; padding: 10% 4%;background-size: cover;background-position: center;} .ceramic_box .pic{ position: relative!important; width: 100%;} .ceramic_box .Ispic{ position: relative; padding-top: 66.4%; display: none;} .ceramic_box .pic .Ispic:first-child{ display: block;} .ceramic_box .txt{ float: none; width: 100%; padding: 3% 5% 10%} .ceramic_box h2, .czBox_con .cz_h2, .engineering_info .h2, .about_tit, .brand_tit, .Brand_story .Brand_dl dt, .about_title, .news_txt time, .contact_tit h2, .investment_tit{ font-size: 24px;} .ceramic_box h3, .czBox_con .cz_h3, .cz_title, .czBox_info4_con .txt_con h3, .contact_tit h3{ font-size: 20px;} .ceramic_box h4, .engineering_list h2, .news_txt h3, .news_list h3, .news_info .title h1, .video_box .txt, .contact_info li h2, .investment_ul b{ font-size: 18px;} .ceramic_box p{ font-size: 14px; padding-right: 2%;} .ceramic_box dd a{ width: 135px;} .ceramic_box .txt:before{left: 5%;width: 89%;bottom: 4%; top: auto;} .ceramic_box .txt:after{ height: 91%; } .ceramic_box .txt i.icon{right: 3.5%;bottom: 2%; top: auto;} .czlist_list li, .engineering_list li, .news_list li{ float: none; width: 100%; margin-right: 0;} .czlist_list h3, .contact_info li h3, .investment_ul h3, .investment_info3_ul span{ font-size: 16px;} .czlist_list dt p, .engineering_info .txt, .Brand_story, .news_txt p, .news_list p, .news_back, .contact_info li .add{ font-size: 14px;} .czlist_list .info{ display: none!important;} .fl, .fr, .czBox_info2 .pic dt, .czBox_info2 .pic dd{ float: none;} .czBox_info1 .pic, .czBox_info1 .txt_con, .czBox_info2 .pic, .czBox_info2 .txt, .czBox_info2 .pic dt, .czBox_info2 .pic dd, .czBox_info4_con figure, .czBox_info4_con .txt_con, .engineering_box .pic, .engineering_info, .about_index .pic, .about_index_con, .Brand_story .txt, .Brand_story figure, .news_top figure, .news_txt{ width: 100%;} .czBox_info1 .txt_con{ padding-bottom: 5%;} .czBox_info2 .title{ position: relative; width: 100%; margin: 10% 0 5%;} .czBox_info2 .pic dd{ text-align: left;} .czBox_info2 .txt{ margin-top:0; font-size: 14px;} .czBox_info2 .txt p{ font-size: 12px;} .czBox_info3 .txt{ display: none;} .czBox_info4_con .txt_con{ padding-bottom: 5%;} .current{ float: none;} .ny_menu li{ width: auto;} .ny_menu li a{ padding: 0 10px;} .engineering_list h3{ padding: 8px 0 10px;} .engineering_info .txt, .Brand_story, .news_txt p, .news_list p{ line-height: 24px;} .engineering_info{ padding-bottom: 10%;} .engineering_info .txt{ height: auto; margin: 5% 0 8%;} .wapNav_li{ display: block;} .about_numcon .num{ font-size: 30px; text-align: center;} .about_tit{ text-align: center;} .about_index .pic{ padding: 6% 6% 0 0;} .Brand_story .txt1:before, .Brand_story .txt1:after{right: 4%;top: 8%;} .Brand_story .txt .line{right: 1.5%;top:8%;} .Brand_story .txt3 .line{left: 0;bottom: 0;top: auto;} .Brand_story .txt3:before, .Brand_story .txt3:after{ left: 9px;} .Brand_story .txt{ padding-bottom: 10%; overflow: auto;} .Brand_story .txt2{ padding:5% 0;} .Brand_story .txt3{ padding:4% 10% 4% 4%; margin-bottom:5%;} .Brand_story .txt1 .brand_tit{ margin-top:30px; } .Brand_story .Brand_dl{ max-width: 90%;} .Brand_story .Brand_dl dd{ padding: 3% 3% 3% 70px;} .Brand_story .Brand_dl .line{ top: auto; bottom: 0;} .Brand_story .txt1, .Brand_story .txt2, .Brand_story .txt3{ position: inherit;} .Brand_story .txt1, .Brand_story .txt2, .Brand_story .txt3 .twxt{ position: inherit; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);} .Brand_story .txt3 article{ padding:0; padding-bottom:20px; width:100%; } .Brand_story .txt3 .line{ left:auto; right:-5%; } .Brand_story .txt3 .twxt:before, .Brand_story .txt3 .twxt:after{ right:-2%; } .about_box .slick-arrow{width: 20px;height: 30px; margin-top: -15px; top: 72%;} .history .slick-arrow{top: 50%;} /* .honor_list ul, .history ul{ max-width: 90%;} .history li{ text-align: center; padding-right: 0;} .history li:before, .history li:after{ left: 50%;} .history li:after{left: 50%;margin-top: -22px;margin-left: 5px;} .history figure{ max-width: 100%;} .history .txt{ padding: 0 5%;}*/ .news_txt{ padding-bottom: 15%;} .news_top .slick-dots, .news_top .btn{ bottom: 2%;} .news_list p{ height: auto; margin-bottom: 5%;} .video_box .play{ width: 30px; height: 30px;} .video_list li{ width: 49%; margin-right: 2%;} .video_list li:nth-child(3n){ margin-right: 2%;} .video_list li:nth-child(2n){ margin-right: 0;} .contact_info ul{ background-size: cover; padding: 25% 0;} .contact_info li{ display: block; width: 100%; margin: 10% 0;} .contact_info li .i1{margin: 5% auto 1%;} .investment_info2{ background-size: cover;} .investment_ul li{ width: 100%; float: none; text-align: center; margin-bottom: 5%;} .investment_info3{ padding: 5% 0;} .investment_info3_ul{ width: 90%; margin: 0 auto; float: none;} .ceramic_box li{ margin-bottom: 10%;} .H_banner li #video{ display: none;} .czlist_list, .news_list{ margin-bottom: 2%;} } /*新品详情*/ .pro_con .box_info3 li h2{font-size: 48px;font-weight: normal;line-height: normal;margin: 3% 0;} .pro_con .box_info3 li h3{font-size: 30px;line-height: normal;font-weight: normal;} .pro_con .box_info3 li p{font-size: 16px; line-height: 30px; } .pro_con .box_info3 li .solar_txt1{ max-width: 100%; top: 50%;transform: translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);} .pro_con .box_info3 .solar_txt1 .con{ float: right; width: 50%; color: #333;} .pro_con .box_info3 .solar_txt1 h2{ color: #2e2d2f;} .pro_con .box_info3 .solar_txt1 h3{margin: 1.5% 0 3%;} .pro_con .box_info3 .solar_txt1 .pic{ margin-bottom: 2%;} .pro_con .box_info3 .solar_txt1 p{ max-width: 635px;} .pro_con .box_info3 .solar_txt1 span{ display: inline-block;} .pro_con .box_info3 .solar_txt1 .span2{ margin:0 0.5% 0 5%;} .pro_con .box_info3 li .solar_txt2{ top: 50%;transform: translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%); color: #fff;} .pro_con .box_info3 .solar_txt2 h3{margin: 1.5% 0 2%;} .pro_con .box_info3 .solar_txt2 p{max-width: 670px;} .pro_con .box_info .wapimg{ display: none;} .fade-in-Up{transform: translateY(100%); opacity: 0;} .an-fadeInUp{ transform: translateY(0); opacity: 1;transition-duration:2s; transition-delay:1s;} .pro_con .box_info1{overflow:hidden;} .pro_con .box_info1 li .txt{ left: 50%; right: auto; transform: translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%);} .pro_con .box_info1 .txt *{ opacity: 0;} .pro_con .box_info1 .slick-current .txt *{ opacity: 1;} .pro_con .ordinary.ani-show .h3{ -webkit-animation: fadeInUp 1s both;animation: fadeInUp 1s both;animation-delay:0.8s;-webkit-animation-delay:0.8s;} .pro_con .ordinary.ani-show .p{ -webkit-animation: fadeInUp 1.5s both;animation: fadeInUp 1.5s both;animation-delay:0.8s;-webkit-animation-delay:0.8s;} .pro_con .box_info1 .ordinary .txt{ left: auto; transform: none; right: 0;} .pro_con .box_info1 .ordinary .txt *{ max-width: 500px; margin: 0; transition-delay: 2s;} .pro_con .box_info1 .ordinary .txt .h3{ font-weight: normal; font-size: 42px; line-height: 60px; margin-bottom: 3%;} .pro_con .info_pro_m20 .txt{ width: 100%; max-width: 1575px; top: 25%;} .pro_con .box_info1 .info_pro_m20 .pic{ max-width: 55%; opacity: 0; transition: all 1.6s;} .pro_con .box_info1 .info_pro_m20 .an-fadeInUp{ opacity: 1;} .pro_con .box_info1 .ordinary .fade-in-Up{opacity: 0; transition: all 1.6s;} .pro_con .box_info1 .ordinary .an-fadeInUp{opacity: 1;} .pro_con .box_info1 .ordinary p span{ display: block;} .pro_con .box_info3 li .m20_txt1{ max-width: 100%; top: 50%;transform: translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);} .pro_con .box_info3 .m20_txt1 .con{ float: right; width: 50%; color: #333; max-width: 790px; color: #fff;} .pro_con .box_info3 .m20_txt1 h2{ font-size: 36px; margin: 0;} .pro_con .box_info3 .m20_txt1 h3{ font-size: 42px; margin: 3.5% 0 3%;} .pro_con .box_info3 .m20_txt1 p{ font-size: 16px; max-width: 505px;} .pro_con .box_info4 .left, .pro_con .box_info4 .right{ width: 50%; float: left;} .pro_con .box_info4 .left{ padding: 15% 0 0 10%} .pro_con .box_info4 .left h3{ font-size: 42px; color: #333; font-weight: normal; line-height: normal; } .pro_con .box_info4 .left p{ font-size: 16px; color: #555; line-height: 30px; max-width: 500px;margin: 2.5% 0 7%;} .pro_con .box_info4 .left .small_pic{ max-width: 623px; margin: 0;} .pro_con .box_info4 .slick-dots{ position: absolute;text-align: left;right: 100%;width: 82%;bottom: 8%;} .pro_con .box_info4 .slick-dots li{ background: none; border-radius: 0; width: 44px; height: 10px; vertical-align: middle; display: inline-block; opacity: 1; margin: 0 8px!important; position: relative; border: 1px solid transparent; } .pro_con .box_info4 .slick-dots li button{ position: absolute; width: 40px; height: 2px; background: #235f62; left: 2px; top: 3px;font-size: 0; border: none;} .pro_con .box_info4 .slick-dots .slick-active button{ height: 4px; width: 38px; top: 2px;} .pro_con .box_info4 .slick-dots .slick-active{ border-color: #235f62;} /*.pro_con .box_info4 .right{ position: relative;}*/ /*.pro_con .box_info4 .right li{ position: relative;}*/ .pro_con .box_info4_txtfr .left{ float: right;} .pro_con .box_info4_txtfr .slick-dots{ width: 100%; left: 100%; padding-left: 20%;} .pro_con .box_info5 .table{ display: table; width: 100%; position: relative;} .pro_con .box_info5 .left, .pro_con .box_info5 .right{ display: table-cell; vertical-align: middle; width: 50%;} .pro_con .box_info5 .left{ padding: 0 0 0 10%; background: #fafafa;} .pro_con .box_info5 .slick-dots{ position: absolute;text-align: left;right: 0%;width: 40%;bottom: 8%; z-index: 10;} .pro_con .box_info5 .slick-dots li{ background: none; border-radius: 0; width: 44px; height: 10px; vertical-align: middle; display: inline-block; opacity: 1; margin: 0 8px!important; position: relative; border: 1px solid transparent; } .pro_con .box_info5 .slick-dots li button{ position: absolute; width: 40px; height: 2px; background: #235f62; left: 2px; top: 3px;font-size: 0; border: none;} .pro_con .box_info5 .slick-dots .slick-active button{ height: 4px; width: 38px; top: 2px;} .pro_con .box_info5 .slick-dots .slick-active{ border-color: #235f62;} .pro_con .box_info5 .right{ position: relative;} .pro_con .box_info5 .small li{ display: inline-block; margin-right: 9%; line-height: 30px; font-size: 16px; text-align: center;} .pro_con .box_info5 .left h3{ font-size: 42px; color: #333; font-weight: normal; line-height: normal; } .pro_con .box_info5 .left p{ font-size: 16px; color: #555; line-height: 30px; max-width: 495px;margin: 2.5% 0 7%;} .pro_con .box_info5 li .left *{ opacity: 0} .pro_con .box_info5 .small li p{ color: #333333; margin: 12px 0 0;} .pro_con .box_info5 .ani-show .left *, .pro_con .box_info5 .ani-show-one .left *{ opacity: 1;} .pro_con .box_info5 .ani-show h3{ -webkit-animation: fadeInUp 1s both;animation: fadeInUp 1s both;animation-delay:0.8s;-webkit-animation-delay:0.8s;} .pro_con .box_info5 .ani-show p{ -webkit-animation: fadeInUp 1.5s both;animation: fadeInUp 1.5s both;animation-delay:0.8s;-webkit-animation-delay:0.8s;} .pro_con .box_info5 .ani-show .small{ -webkit-animation: fadeInUp 1.5s both;animation: fadeInUp 1.5s both;animation-delay:0.8s;-webkit-animation-delay:0.8s;} .pro_con .box_info5 .ani-show-one .left .fade-in-Up{opacity: 0;} .pro_con .box_info5 .ani-show-one .left .an-fadeInUp{opacity: 1;} .newspro_item{ display: table; width: 100%; position: relative;} .newspro_item .pic, .newspro_item .txt{ display: table-cell; vertical-align: middle; width: 50%;} .newspro_item .txt{ padding: 3% 0 3% 10%; background: #fafafa;} .newspro_item .txt h3{ font-size: 42px; color: #333; font-weight: normal; line-height: normal; } .newspro_item .txt p{ font-size: 16px; color: #333333; line-height: 30px; max-width: 495px;margin: 2.5% 0 7%;} .newspro_item .small{ max-width: 600px;} .newspro_item .small li{ display: inline-block; margin: 2% 6.5% 5% 0; min-width:154px;line-height: 30px; font-size: 16px; text-align: center; vertical-align: top;} .newspro_item .small ol{ display: block;line-height: 30px; font-size: 16px; text-align: center; vertical-align: top;} .newspro_item3 .small li{ margin: 10% 6% 0 0;} .newspro_item .small p{ margin: 10px 0 5px; max-width: 100%;} .newspro_item .small span{ display: block; font-size: 14px; color: #888888; line-height: 16px;} @media(max-width:1500px){ .newspro_item .txt{ padding-left: 5%;} } @media(max-width:1400px){ .pro_con .box_info3 li .txt, .pro_con .info_pro_m20 .txt{ padding: 0 4%;} } @media(max-width:1200px){ .newspro_item .txt h3{ font-size: 30px;} .newspro_item .small li, .newspro_item3 .small li{ margin-right: 2%;} } @media(max-width:1024px){ .pro_con .box_info3 li .txt{ padding: 0 4%;} .pro_con .box_info4 .left{ padding: 5% 0 0 5%;} .pro_con .box_info4 .left h3{ font-size: 30px;} .pro_con .box_info4 .left p{ font-size: 14px; line-height: 24px;} .newspro_item .pic, .newspro_item .txt{ display: block; width: 100%;} .newspro_item .small{ max-width:100%;} .newspro_item .small ol{ display: inline-block;} .newspro_item3 .small li{ margin-top: 0;} .pro_con .box_info5 .left, .pro_con .box_info5 .right{ display: block; width: 100%;} .pro_con .box_info5 .left{ padding: 10% 4% 3%;} .pro_con .box_info5 .left h3{ font-size: 30px; color: #333;} .pro_con .box_info5 .left p{ color: #555!important;} .pro_con .box_info5 .slick-dots{ bottom: 3%; width: 100%; text-align: center;} } @media(max-width:768px){ .pro_con .box_info1 .ordinary .txt{ width: 80%; left: 10%;} .pro_con .box_info1 .ordinary .txt .h3{ font-size: 30px;} .pro_con .box_info3 li h2{font-size: 30px;} .pro_con .box_info3 li h3{font-size: 24px;} .pro_con .box_info3 li p{font-size: 14px; line-height: 24px; } .pro_con .box_info3 .solar_txt1 .con{ } .pro_con .box_info3 .solar_txt1 .con, .pro_con .box_info3 .solar_txt1 h2{ color: #fff;} .pro_con .box_info .pcimg{ display: none;} .pro_con .box_info .wapimg{ display: block;} .pro_con .box_info5 .small li{ margin-right: 2%;} .pro_con .box_info5 .small li p{ font-size: 14px;} .pro_con .box_info3 li .m20_txt1{ top: auto; transform: none; bottom: 5%; left: 0;} .pro_con .box_info3 li .m20_txt1 .con{ float: none; width: 100%;} .pro_con .box_info3 li .solar_txt2{ left: 4%; transform: none; bottom: 10%; top: auto; width: 92%;} .pro_con .box_info3 .solar_txt2 p{ max-width: 450px;} .pro_con .box_info4 .left, .pro_con .box_info4 .right{ float: none; width: 100%;} .pro_con .box_info4 .left{ padding: 10% 4% 2%;} .pro_con .box_info4 .left h3{ font-size: 30px;} .pro_con .box_info4 .left p{ font-size: 14px; line-height: 24px; } .pro_con .box_info4 .slick-dots{ top: auto; z-index: 10;width: 100%; text-align: center; bottom: 5%; right: 0; left: 0;} .pro_con .box_info4 .left .small_pic{ display: none;} } @media(max-width:640px){ .pro_con .box_info1 .txt{ width: 100%; bottom: 10%; font-size: 14px; line-height: 24px;} .pro_con .box_info1 .ordinary .txt .h3{ font-size: 20px; line-height: normal;} .pro_con .info_pro_m20 .txt{ display: block;} .pro_con .box_info3 li h2{font-size: 20px;} .pro_con .box_info3 li h3{font-size: 16px;} .pro_con .box_info3 .solar_txt1 .con{ width: 52%;} .pro_con .box_info3 .solar_txt1 .pic img{max-width: 50%;} .pro_con .box_info3 .m20_txt1 h2{ font-size: 20px;} .pro_con .box_info3 .m20_txt1 h3{ font-size: 24px;} .pro_con .box_info3 .m20_txt1 p{ font-size: 14px;} .hover_protxt{ left: 2%;} .pro_con .box_info4 .left h3{ font-size: 20px;} .pro_con .box_info4 .hover_protxt{ display: none;} .pro_con .box_info5 .left h3{ font-size: 20px;} .pro_con .box_info5 .small_img{ width: 80px; margin: 0 auto;} .pro_con .box_info5 .small_img img{ max-width: 65%;} .newspro_item .txt{ padding: 3% 4%;} .newspro_item .txt h3{ font-size: 24px;} .newspro_item .txt p{ font-size: 14px;} } /*招商加盟*/ .investment_info{ padding: 0;} .investment_tit_news{ font-size: 42px;color: black;text-align: center;line-height: normal;font-weight: normal;} .investment_item1 ul{ font-size: 0; text-align: center; padding: 4% 2% 9%;} .investment_item1 li{ display: inline-block; vertical-align: top; text-align: center; width: 33.33%; position: relative;} .investment_item1 li figure{ overflow: hidden; margin: 0 auto; position: relative;} .investment_item1 li img{ position: relative; z-index: 10;} .investment_item1 li figure:before, .investment_item1 li figure:after{ content: ''; position: absolute; top: 0;} .investment_item1 li figure:after{ width: 140px; height: 140px; background: black; border-radius: 100%;left: 50%; transform: translateX(-50%);} .investment_item1 li figure:before{ right: 0; width: 1px; height: 100%; background: #eeeeee;} .investment_item1 p{ font-size: 16px; line-height: 30px; color: #555555; max-width: 320px; margin: 8% auto;} .investment_item1 li:last-child figure:before{ display: none;} .investment_item2{ color: #fff; background-size: cover; background-repeat: no-repeat; background-position: center top;} .investment_item2 .investment_tit_news{ color: #fff;padding: 6% 0 0;} .investment_item2_ul{ padding: 6% 0 18%;} .investment_item2_ul li{ float: left; width: 25%; padding: 0 2.5%; position: relative;} .investment_item2_ul b{ text-align: center; display: block; font-size: 60px; color: #235f62; font-family: DINCOND; line-height: normal;} .investment_item2_ul h3{ font-weight: normal; text-align: center; font-size: 18px; margin: 10px 0 10%;} .investment_item2_ul i{ display: block; width: 1px; height: 20px; background: #235f62; margin: 20px auto;} .investment_item2_ul p{ font-size: 16px; line-height: 30px; margin: 0 auto; max-width: 280px;} .investment_item2_ul .li1 p{ max-width: 200px;} .investment_item2_ul .li2 p{ max-width: 275px;} .investment_item2_ul .li4 p{ max-width: 240px;} .investment_item2_ul li:before{ content: ''; position: absolute; width: 70%; top:35px; left: 65%; height: 1px; background: url("../image/zsjm_icon1.png") repeat;} .investment_item2_ul .li4:before{ display: none;} .investment_item3{ max-width:1600px; margin: -6% auto 8%; background: #f6f6f6; padding: 5% 2% 4% 5%;background:#f6f6f6; position: relative;; background: linear-gradient(-45deg,transparent 3.5em, #f6f6f6 0)bottom right, linear-gradient(0,transparent 0, #f6f6f6 0)top right, linear-gradient(135deg,transparent 2.5em, #f6f6f6 0)top left, linear-gradient(0,transparent 0, #f6f6f6 0)bottom left; background-size: 50% 50%; background-repeat: no-repeat; } .investment_item3:before{ content: '';position: absolute;width: 0;height: 0;border: 2.5em solid transparent;border-bottom-color: #cccccc;left: 14px;top: 14px;transform: rotate(135deg);} .investment_item3 .investment_tit_news{ margin-bottom:2%;} .investment_item3 dl{ width:100%; float: left;} .investment_item3 dl dt{ font-size: 30px; color: #235f62; line-height: normal; margin-bottom: 50px;} .investment_item3 dd{ float: left; width: 50%; border-left: 1px solid #235f62; font-size: 16px; color: #333333; margin-bottom: 13%; padding: 0 20px;} .investment_item3 dd h3{ font-weight: normal; font-size: 24px; margin-bottom: 10px;} .investment_item3 dd span{ font-size: 16px; display: inline-block; vertical-align: middle; margin-left: 5px; margin-top: -5px;} .investment_item3 p{ display: block;} .investment_item3 .Tab_a{ text-align:center; overflow: hidden; margin-bottom:5%; } .investment_item3 .Tab_a span{ cursor: pointer; font-size:16px; min-width:150px; line-height:40px; vertical-align: middle; color:#235f62; border:solid 1px #235f62; padding:0 20px; display:inline-block; margin-right:30px;} .investment_item3 .Tab_a span:last-child{ margin-right:0; } .investment_item3 .Tab_a span:hover, .investment_item3 .Tab_a span.on{ color:#fff; background:#235f62;} .investment_item3 .Tab_bcon{ display:none; } .investment_item3 .fl-box{ width:50%; float:left; } .investment_item3 .fr-box{ width:50%; float: right;} .investment_item3 .Tiboxw{ padding:14% 10%; background-color:black; overflow: hidden;} .investment_item3 .Tiboxw .input{ width:46%; border-bottom:solid 1px rgba(255, 255, 255, 0.3); float:left;} .investment_item3 .Tiboxw .input:nth-child(2){ float: right; } .investment_item3 .Tiboxw .input:nth-child(4){ float: right; } .investment_item3 .Tiboxw input{ font-size:16px; color:#fff; line-height:45px; height:45px; padding:0 10px; border:none; background:none; width:100%; } .investment_item3 .Tiboxw .input:hover{ border-bottom-color:#235f62; } .investment_item3 .Tiboxw .selectBox{ margin:30px 0; width:100%; float:left; } .investment_item3 .Tiboxw .select{ position:relative; width:46%; border-bottom:solid 1px rgba(255, 255, 255, 0.3); float:left;} .investment_item3 .Tiboxw .select:nth-child(3){ float: right; } .investment_item3 .Tiboxw .select:after {display:block; content:''; display:block; width:15px; height:9px; background:url(../image/icon_r01.png) no-repeat center center; background-size:contain; position:absolute; right:10px; top:50%; margin-top:-4.5px;} .investment_item3 .Tiboxw select {font-size:16px; color:#949aa5; display:block!important; background:none; width:100%; height:45px; line-height:45px; padding:0 10px; appearance: none; -moz-appearance: none; -webkit-appearance: none;border:none; position:relative; z-index:1; text-align:center;} .investment_item3 .Tiboxw select::-ms-expand {display: none;} .investment_item3 .Tiboxw .input img {display:block; width:90px; margin-top:5px; height:35px; float:right;} .investment_item3 .Tiboxw .verify { padding-left:10px; margin-right:100px;} .investment_item3 .Tiboxw .verify .text {height:45px; line-height:45px; padding:10px 0;} .investment_item3 .Tiboxw .btn { width:46%; float: right; line-height:45px; height:45px; text-align:center; } .investment_item3 .Tiboxw .submit {cursor:pointer; font-size:16px; font-weight:normal; display:block; width:100%; height:45px; background-color:#235f62; color:#fff; border:none; margin:0 auto;} @media(max-width:1024px){ .investment_item3 .fr-box, .investment_item3 .fl-box{ width:100%; } } @media(max-width:768px){ .investment_tit_news{ font-size: 30px;} .investment_item1 ul{ padding-right: 0; padding-left: 0;} .investment_item1 li img, .investment_item1 li figure:after{ width: 100px; height: 100px;} .investment_item1 p{ font-size: 14px; line-height: 24px;} } @media(max-width:640px){ .investment_tit_news{ font-size: 24px; padding-bottom: 3%;} .investment_item1 li{ display: block; width: 100%;} .investment_item2_ul li{ width: 100%; margin-bottom: 5%;} .investment_item2_ul li:before{ display: none;} .investment_item2_ul b{ font-size: 40px;} .investment_item2_ul h3{ margin-bottom: 5%;} .investment_item2_ul li p{ font-size: 14px; line-height: 24px; max-width: 100% !important;} .investment_item3{ margin:-14% auto 8%; padding:20% 2% 4%; } .investment_item3 dl{ width: 100% !important; float: none!important; margin-bottom: 5%;} .investment_item3 dl dt{ font-size: 20px; margin-bottom: 20px;} .investment_item3 dd{ width:100%; margin-bottom:5%; font-size: 14px;} .investment_item3 dd h3{ font-size: 18px;} .investment_item3 .Tiboxw{ padding:10% 5%; margin-top:5%;} .investment_item3 .Tiboxw .input.Yanzm{ width:100%; } .investment_item3 .Tiboxw .selectBox{ margin:20px 0; } .investment_item3 .Tiboxw .btn{ width:100%; margin-top:20px; } } .searchResult li {float:left; width:48%; padding-bottom:1.5%;} .searchResult li:nth-child(2n) {float:right;} .searchResult li time {display:block; float:right; font-size:16px; color:#999;} .searchResult li span {display:block; width:65px; padding-right:4px; overflow:hidden; position:relative; float:left;} .searchResult li span:after {content:''; display:block; border-left:8px solid #33bdb7; border-top:8px solid transparent; border-bottom:8px solid transparent; position:absolute; bottom:-8px; right:0;} .searchResult li i {display:block; font-style:normal; color:#fff; border-radius:3px; position:relative; height:30px; line-height:30px; background-color:#33bdb7; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:1; font-size:16px;} .searchResult li .pro:after {border-left-color:#9b8868;} .searchResult li .pro i {background-color:#9b8868;} .searchResult li .case:after {border-left-color:#51596c;} .searchResult li .case i {background-color:#51596c;} .searchResult li .info {margin-left:85px; margin-right:110px; overflow:hidden;} .searchResult li h2 {font-weight:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:18px; color:#555; line-height:30px; margin-bottom:2px; transition:all .3s;} .searchResult li p {font-size:16px; color:#999; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.875em;} .searchResult li a {display:block; overflow:hidden; background-color:#fff; border:1px solid #eee; padding:20px 25px 35px 20px; transition:all .3s;} .searchResult li a:hover {box-shadow:0px 0px 20px rgba(119,119,119,.2);} .searchResult li a:hover h2 {color:black;} @media(max-width:960px){ .searchResult li {float:none; width:auto;} .searchResult li:nth-child(2n) {float:none;} } @media(max-width:768px){ .searchResult li time {font-size:12px;} .searchResult li span {width:55px;} .searchResult li i {font-size:14px; height:24px; line-height:24px;} .searchResult li .info {margin-left:60px; margin-right:70px;} .searchResult li h2 {font-size:16px; line-height:24px;} .searchResult li p {font-size:14px;} .searchResult li a {padding:10px;} } .reservation {background:no-repeat center center; background-size:cover; padding:11% 0 9%;} .reservation .box {background-color:rgba(38,49,71,.95); width:900px; margin:0 auto; padding:33px 25px;} .reservation .form {position:relative;} .reservation .form:before, .reservation .form:after {position:absolute; content:''; display:block; height:92%; width:34.824%; overflow:hidden; background-repeat:no-repeat; background-size:auto 100%;} .reservation .form:before {left:0; top:3%; background-image:url(../image/form_left.png); background-position:left top;} .reservation .form:after {right:0; bottom:3%; background-image:url(../image/form_right.png); background-position:right bottom;} .reservation h2 {font-weight:normal; color:#fff; text-align:center; margin:0 0 18px; font-size:36px; padding:0; line-height:1.38em;} .reservation .Tab_a, .reservation form {width:500px; margin:0 auto; display:block; overflow:hidden; position:relative; z-index:1;} .reservation .input {overflow:hidden;} .reservation .text {display:block; width:100%; border:none; background:none; border-bottom:1px solid rgba(255,255,255,.3); height:60px; line-height:60px; padding:18px 0; text-align:center; font-size:16px; color:#949aa5;} .reservation .selectBox {padding:20px 0; overflow:hidden;} .reservation .select {background-color:rgba(255,255,255,.22); position:relative; margin-bottom:10px;} .reservation .select:after {display:block; content:''; display:block; width:15px; height:9px; background:url(../image/icon_r01.png) no-repeat center center; background-size:contain; position:absolute; right:10px; top:50%; margin-top:-4.5px;} .reservation select {font-size:16px; color:#949aa5; display:block!important; background:none; width:100%; height:60px; line-height:60px; padding:0 30px; appearance:none; -webkit-appearance:none; border:none; position:relative; z-index:1; text-align:center;} .reservation select::-ms-expland {display:none;} .reservation .Tab_a{ margin:20px auto; } .reservation .Tab_a span{ display:block; width:50%; border:solid 1px #235f62; color:#235f62; float:left; text-align:center; font-size:16px; line-height:40px;} .reservation .Tab_a span:hover, .reservation .Tab_a span.on{ background-color:#235f62; color:#fff; } .reservation .selectCity {float:left; width:49%; height:60px;} .reservation .selectArea {float:right; width:49%; height:60px;} .reservation .input img {display:block; width:170px; height:45px; float:right;} .reservation .verify {margin-right:200px;} .reservation .verify .text {height:45px; line-height:45px; padding:10px 0;} .reservation .btn {margin-top:50px;} .reservation .submit {cursor:pointer; font-size:16px; font-weight:normal; display:block; width:200px; height:50px; background-color:#235f62; color:#fff; border:none; margin:0 auto;} @media(max-width:960px){ .reservation .box {width:93.75%;} .reservation h2 {font-size:24px;} } @media(max-width:768px){ .reservation {padding:18% 0 15%;} .reservation .box {padding:30px 15px 25px;} .reservation h2 {font-size:18px; margin-bottom:10px;} .reservation .Tab_a, .reservation form {width:80%;} .reservation .text {height:45px; line-height:45px; padding:10px 0; font-size:14px;} .reservation select {height:45px; line-height:45px; font-size:14px;} .reservation .selectCity, .reservation .selectArea {float:none; width:auto; height:45px;} .reservation .submit {width:110px; height:36px; font-size:14px;} .reservation .input img {width:113px; height:30px;} .reservation .verify {margin-right:130px;} .reservation .verify .text {height:30px; line-height:30px; padding: 5px 0;} .reservation .btn {margin-top:30px;} .reservation .Tab_a{ margin:15px auto 5px; } .reservation .Tab_a span{ line-height:30px; font-size:14px; } .reservation .form:before, .reservation .form:after{ height:96%; } .reservation .form:before{ top:1%; } .reservation .form:after{ bottom:1%; } } .booking-fixed{position:fixed; left:-100%;opacity:0; top:0; width:100%;height:100%;z-index:200; transition:opacity 0.3s; background:rgba(0,0,0,0.5);} .booking-fixed.show{opacity:1; left:0;} .booking-fixed .ytable{display:table;width:100%;height:100%;} .booking-fixed .ytable-cell{display:table-cell; vertical-align:middle;} .booking-fixed .box {background-color:rgba(38,49,71,.95); width:900px; margin:0 auto; padding:33px 25px;} .booking-fixed .form{position:relative;} .booking-fixed .form .close{position:absolute; width:30px; height:30px; right:-20px; top:-20px; cursor:pointer;} .booking-fixed .form .close:before, .booking-fixed .form .close:after{position:absolute; content:''; width:80%; height:2px;background:#235f62; top:50%;margin-top:-1px; left:10%; transform:rotate(45deg);} .booking-fixed .form .close:after{transform:rotate(-45deg);} .booking-fixed .form:before, .booking-fixed .form:after {position:absolute; content:''; display:block; height:92%; width:34.824%; overflow:hidden; background-repeat:no-repeat; background-size:auto 100%;} .booking-fixed .form:before {left:0; top:3%; background-image:url(../image/form_left.png); background-position:left top;} .booking-fixed .form:after {right:0; bottom:3%; background-image:url(../image/form_right.png); background-position:right bottom;} .booking-fixed h2 {font-weight:normal; color:#fff; text-align:center; margin:0 0 18px; font-size:36px; padding:0; line-height:1.38em;} .booking-fixed form {width:500px; margin:0 auto; display:block; overflow:hidden; position:relative; z-index:1;} .booking-fixed .input {overflow:hidden;} .booking-fixed .text {display:block; width:100%; border:none; background:none; border-bottom:1px solid rgba(255,255,255,.3); height:60px; line-height:60px; padding:18px 0; text-align:center; font-size:16px; color:#949aa5;} .booking-fixed .selectBox {padding:20px 0; overflow:hidden;} .booking-fixed .select {background-color:rgba(255,255,255,.22); position:relative; margin-bottom:10px;} .booking-fixed .select:after {display:block; content:''; display:block; width:15px; height:9px; background:url(../image/icon_r01.png) no-repeat center center; background-size:contain; position:absolute; right:10px; top:50%; margin-top:-4.5px;} .booking-fixed select {font-size:16px; color:#949aa5; display:block!important; background:none; width:100%; height:60px; line-height:60px; padding:0 30px; appearance: none; -moz-appearance: none; -webkit-appearance: none;border:none; position:relative; z-index:1; text-align:center;} .booking-fixed select::-ms-expand { display: none; } .booking-fixed .selectCity {float:left; width:49%; height:60px;} .booking-fixed .selectArea {float:right; width:49%; height:60px;} .booking-fixed .input img {display:block; width:170px; height:45px; float:right;} .booking-fixed .verify {margin-right:200px;} .booking-fixed .verify .text {height:45px; line-height:45px; padding:10px 0;} .booking-fixed .btn {margin-top:50px;} .booking-fixed .submit {cursor:pointer; font-size:16px; font-weight:normal; display:block; width:200px; height:50px; background-color:#235f62; color:#fff; border:none; margin:0 auto;} @media(max-width:960px){ .booking-fixed .box {width:93.75%;} .booking-fixed h2 {font-size:24px;} } @media(max-width:768px){ .booking-fixed {padding:18% 0 15%;} .booking-fixed .box {padding:30px 15px 25px;} .booking-fixed h2 {font-size:18px; margin-bottom:10px;} .booking-fixed form {width:80%;} .booking-fixed .text {height:45px; line-height:45px; padding:10px 0; font-size:14px;} .booking-fixed select {height:45px; line-height:45px; font-size:14px;} .booking-fixed .selectCity, .booking-fixed .selectArea {float:none; width:auto; height:45px;} .booking-fixed .submit {width:110px; height:36px; font-size:14px;} .booking-fixed .input img {width:113px; height:30px;} .booking-fixed .verify {margin-right:130px;} .booking-fixed .verify .text {height:30px; line-height:30px; padding: 5px 0;} .booking-fixed .btn {margin-top:30px;} } @media(max-width:640px){ .Hbox2 .left{height: 530px;display: table; vertical-align: middle;padding: 0;} .Hbox2 .left .txt{vertical-align: middle;display: table-cell;} .Hbox2 .swiper-slide_pic750 .left .swiper-container-v{width: 90%; margin: 0 auto;max-width: none;} } @media(min-width:1025px){ .booking-fixed .btn{margin-top: 73px;} } .str_wrap { overflow: hidden; zoom: 1; width: 100%; font-size: 12px; line-height: 16px; position: relative; -moz-user-select: none; -khtml-user-select: none; user-select: none; white-space: nowrap; } .str_wrap.str_active { } .str_move { white-space: nowrap; position: absolute; top: 0; left: 0; cursor: move; } .str_move_clone { zoom:1; vertical-align: top; position: absolute; left: 100%; top: 0; } .str_vertical .str_move_clone { left: 0; top: 100%; } .str_down .str_move_clone { left: 0; bottom: 100%; } .str_vertical .str_move, .str_down .str_move { white-space: normal; width: 100%; } .str_static .str_move, .no_drag .str_move, .noStop .str_move { cursor: inherit; } .str_wrap img { max-width: none !important; } .czBox_down{padding: 4% 0 2%;} .czBox_down .title{ text-align: center;} .czBox_down .cz_title{padding: 12px 56px;border: 1px solid #eeeeee;} .czBox_down .cz_title:before, .czBox_down .cz_title:after{width: 6px;height: 6px;border: 1px solid #eee;background: none;} .czBox_down .cz_title:after{left: 100%;top: 99%;} .czBox_down .cz_title:before{ left: -6px; top: -6px;} .czBox_down ul{max-width: 1160px;margin: 4% auto;overflow: hidden;} .czBox_down li{background: #eeeeee;width: 46.8%;margin: 0 1.6% 2%;float: left;} .czBox_down li a{display: block;background: #eeeeee;line-height: 80px;font-size: 16px;color:#333;padding: 0 12% 0 5%;position: relative;transition: all 0.5s;} .czBox_down li a:before{content: '';position: absolute;width: 30px;height: 100%;right: 4%;top: 0;background: url("../image/icon6.png") no-repeat center;transition: all 0.5s;} .czBox_down li a:hover{ background: #b29c74; color: #fff;} .czBox_down li a:hover:before{ background-image: url("../image/icon7.png");} @media(max-width:768px){ .czBox_down li{ width: 100%; float: none; margin: 0 0 2%;} }