/*@charset "utf-8";*/ /** * ---------------------------------------------------------------------------- * $codex 1. id和class命名采用该版块的英文单词或组合命名,并第一个单词小写,第二个单词首个字母大写,如:thinkCss(最新产品/think+Css) * $codex 2. CSS样式表各区块用注释说明 * $codex 3. 尽量使用英文命名原则 * $codex 4. 尽量不加中杠和下划线 * $codex 5. 尽量不缩写,除非一看就明白的单词 * $Author: psd2html * $mailto: * $hack :ie 6 _ \ ie7 *+ \ ie6,ie7 * \ ie7,firefox !important ie9, \9 */ /** +------------------------------------------------------------------------------ * 网站样式重写 +------------------------------------------------------------------------------ * @comefrom 互联网 * @subpackage RBAC +------------------------------------------------------------------------------ */ html { -webkit-text-size-adjust: none; /*解决chrome浏览器下字体不能小于12px*/ } body { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; } * { } a { outline: none; text-decoration: none; } a:hover { text-decoration: underline; } html { zoom: 1; } html * { outline: 0; zoom: 1; } html button::-moz-focus-inner { border-color:transparent!important; } body { overflow-x: hidden; font-size: 12px; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } table {/*border-collapse:collapse;border-spacing:0;*/ } fieldset, a img { border: 0; } address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: normal; } li { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; /*去掉苹果的默认UI来渲染按钮*/ } em, i { font-style: normal; } /** +------------------------------------------------------------------------------ * Public Class +------------------------------------------------------------------------------ * @subpackage RBAC +------------------------------------------------------------------------------ */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: block; } .clear { clear: both; }/* 清除浮动*/ .colwrapper { overflow: hidden; zoom: 1 /*for ie*/; margin: 5px auto; }/* 高度自适应 */ .strong { font-weight: bold; } .left { float: left; } .right { float: right; } .center { margin: 0 auto; text-align: center; } .block { display: block; } .inline { display: inline; } .transparent { filter: alpha(opacity=50); -moz-opacity: 0.5;/** Firefox 3.5即将原生支持opacity属性,所以本条属性只在Firefox3以下版本有效 ***/ -khtml-opacity: 0.5; opacity: 0.5; } .break { word-wrap: break-word; overflow: hidden; /*word-break:break-all;*/ } .tal { text-align: left } .tar { text-align: right; } /*文字两侧对齐*/ .justify { text-align: justify; text-justify: distribute-all-lines;/*ie6-8*/ text-align-last: justify;/* ie9*/ -moz-text-align-last: justify;/*ff*/ -webkit-text-align-last: justify;/*chrome 20+*/ } .toe { /*超出省略号*/ word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (-webkit-min-device-pixel-ratio:0) {/* chrome*/ .justify:after { content: "."; display: inline-block; width: 100%; overflow: hidden; height: 0; } } /* 兼容IE6的定位属性fixed,固定不动样式 */ .fixed { position: fixed; clip: rect(0 100% 100% 0); _position: absolute; /* 底部 */ bottom: 0px; left: 0px; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); /*_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);*/ /* 左侧 */ /*left:0px;*/ /*_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);*/ /*_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);*/ } /* 解决固定层在IE6下闪的问题 */ *html { background-image: url(about:blank); background-attachment: fixed; } /*png图片ie6下透明滤镜实现写法*/ .pngimg { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/x.png'); } /** +------------------------------------------------------------------------------ * FCK 兼容解决方案 +------------------------------------------------------------------------------ * @subpackage RBAC +------------------------------------------------------------------------------ */ em { font-style: italic !important; } strike { text-decoration: line-through !important; } strong { font-weight: bold !important; } u { text-decoration: underline !important; } /** +------------------------------------------------------------------------------ * 表单样式 +------------------------------------------------------------------------------ * @subpackage RBAC +------------------------------------------------------------------------------ */ /** +------------------------------------------------------------------------------ * 网站整体颜色总汇 +------------------------------------------------------------------------------ * @codex 颜色:使用颜色的名称或者16进制代码,如 * @subpackage RBAC +------------------------------------------------------------------------------ */ .ff8600, ff86aa a { color: #ff8600; } /** +------------------------------------------------------------------------------ * 网站整字体大小 +------------------------------------------------------------------------------ * @codex 字体大小,直接使用"font+字体大小"作为名称,如 * @package ORG * @subpackage RBAC +------------------------------------------------------------------------------ */ .font14px { font-size: 14px; } .font9pt { font-size: 9pt; } /*自定义字体*/ /* @font-face { font-family: danley; src: url('../font/danley.ttf'); } .danley { font-family: danley; } */ /** +------------------------------------------------------------------------------ * 网站整布局命名规范 +------------------------------------------------------------------------------ * @codex id和class命名采用该版块的英文单词或组合命名 如:newRelease * @package ORG * @subpackage RBAC +------------------------------------------------------------------------------ */ a { color: #5d5d5e; transition: all 0.3s ease-in-out 0s; } a:hover { color: #3e6ed4; } body { font-family: "Microsoft YaHei", sans-serif; } .css3 { /*transition: all 0.3s ease-in-out 0s;*/ -webkit-transform: translate3d(0, -20px, 0); -ms-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, transform; -webkit-transition-duration: 1000ms; transition-duration: 1000ms; -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.33, 0.98); transition-timing-function: cubic-bezier(0.25, 0.46, 0.33, 0.98); -webkit-transition-delay: 800ms; transition-delay: 800ms } .css3.animated { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } @media screen and (max-width: 650px) { } @media screen and (max-width: 480px) { } .rotate { transform: rotate(7deg); -ms-transform: rotate(7deg); /* IE 9 */ -moz-transform: rotate(7deg); /* Firefox */ -webkit-transform: rotate(7deg); /* Safari 和 Chrome */ -o-transform: rotate(7deg); /* Opera */ } body { font-size: 12px; line-height: 22px; } .wrapper { width: 1200px; margin: 0 auto; position: relative; } .gb-header, .gb-nav { height:110px; background: rgba(0, 7, 26, 0.3); box-shadow: 0px 3px 3px rgba(0, 0, 0, .3); position: fixed; left: 0; right: 0; z-index: 8; } .gb-nav { background: rgba(255,255,255,0.25); box-shadow: 0px 3px 3px rgba(0, 0, 0, .3); z-index: 99999; } .gb-nav, .gb-header { top:-96px; /*css3*/ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .gb-nav.show, .gb-header.show { top: 34px; opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .gb-nav.show { background: rgba(0,0,0,0.25); box-shadow: 0px 3px 3px rgba(0, 0, 0, .3); } .gh { float: right; height: 34px; width: 34px; margin-right:60px; margin-top: 25px; position: relative; transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; -ms-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; cursor: pointer; } .gh.selected { transform: rotate(90deg); } .gh a { background-color: #000; display: block; height: 4px; margin-top: -2px; position: relative; top: 50%; transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; } .gh:hover a:before { transform: translateY(-2px) rotate(0deg); -webkit-transform: translateY(-2px) rotate(0deg); -ms-transform: translateY(-2px) rotate(0deg); } .gh:hover a:after { transform: translateY(2px) rotate(0deg); -webkit-transform: translateY(2px) rotate(0deg); -ms-transform: translateY(2px) rotate(0deg); } .gh.selected:hover a:before { transform: translateY(0px) rotate(-55deg); -webkit-transform: translateY(0px) rotate(-55deg); -ms-transform: translateY(0px) rotate(-55deg); } .gh.selected:hover a:after { transform: translateY(0px) rotate(55deg); -webkit-transform: translateY(0px) rotate(55deg); -ms-transform: translateY(0px) rotate(55deg); } .gh a:after, .gh a:before { background-color: #000; content: ""; display: block; height: 4px; left: 0; position: absolute; transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; } .gh a:after { top: 10px; } .gh a:before { top: -10px; } .gh.selected a:after, .gh.selected a:before { top: 0; } .gh.selected a:before { transform: translateY(0px) rotate(-45deg); -webkit-transform: translateY(0px) rotate(-45deg); -ms-transform: translateY(0px) rotate(-45deg); } .gh.selected a:after { transform: translateY(0px) rotate(45deg); -webkit-transform: translateY(0px) rotate(45deg); -ms-transform: translateY(0px) rotate(45deg); } .gh.selected a { background-color: transparent !important; } .gb-nav.show .gh a, .gb-nav.show .gh a:after, .gb-nav.show .gh a:before { background-color: #fff; } .header .logo, .gb-nav .logo { margin-left: 50px; float: left; display: inline; margin-top:20px; } .gb-nav .logo { position: relative; } .gb-nav .logo img { left: 0; top: 0; } .gb-nav .logo img.img2 { -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .gb-nav.show .logo img.img2 { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .gb-nav .fx{ width: 100px; float:right; right:90px; margin-right:20px; margin-top:22px; position: absolute; } .gb-nav .fx a{ display:block; width:40px; height:40px; float:left; margin-right:10px; border-radius:50%; transition:all 0.3s; } .gb-nav .fx a:hover{ background:#fff; } .gb-nav .fx .weixin{ } .gb-nav .fx .weixin span{ background:url(/images/meifei001/syewm_wei.jpg) no-repeat; display:block; margin-left:-30px; margin-top:15px; opacity:0; transition:all 0.5s; transform: rotate(0deg); width:0px; height:0px; } .gb-nav .fx .weixin:hover span{ transform: rotate(0deg); opacity:1; width:100px; height:100px; } .gb-nav .fx .sj span{ background:url(/images/meifei001/syewm_tel.jpg) no-repeat; display:block; margin-left:-30px; margin-top:15px; opacity:0; transition:all 0.5s; transform: rotate(0deg); width:0px; height:0px; } .gb-nav .fx .sj:hover span{ transform: rotate(0deg); opacity:1; width:100px; height:100px; } .header .nav { margin-right: 34px; float: right; display: inline; margin-top:45px; } .header .nav #sddm{ margin-right:40px; float: right; display: inline; margin-top:40px; } .header .nav #sddm li { float: left; display: inline; margin-left:5px; font-size:14px; text-align:center; line-height:30px; } .header .nav #sddm li a{ display: block; position: relative; font-size: 14px; color: #FFF; line-height:40px; height:40px; overflow: hidden; width:112px; text-align:center; border-radius:5px; } .header .nav #sddm li a:hover{ text-decoration:none; color:#FFF; } .header .nav #sddm li > a abbr { position: absolute; top: -40px; background: #27323F; width: 100%; display: block; transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; color:#FFF; } .header .nav #sddm li > a span { position: relative; top: 0; display: block; transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .header .nav #sddm li.cur > a abbr, .header .nav #sddm li:hover > a abbr { top: 0; } .header .nav #sddm li.cur > a span, .header .nav #sddm li:hover > a span { top: 40px; } .header .nav #sddm div{ position: absolute; visibility: hidden; padding:0px 0px; top:40px; } .header .nav #sddm div a{ border:None; position: relative; padding: 0px 0px; width:112px; text-align: center; background:#27323F; color: #FFFFFF; font-size:13px; font-weight:normal; text-decoration:none; line-height:40px; height:40px; border-top:1px solid #FFF; } .header .nav #sddm div a:hover{ background:#435e66; color:#fff; font-weight:bold; line-height:40px; } .header .nav #sddm .CurrentLi a{ background:#27323F; color:#FFF; } .header .nav #sddm .CurrentLi div a{ background:#27323F; color:#FFF; line-height:40px; height:40px; border-bottom:none; } .header .nav #sddm .CurrentLi div a:hover{ border-bottom:none; } .section { position: relative; } .page1 { background-size: cover !important; height:100%; } /* .page1 .nav{ background: url(/images/meifei001/img4.png) repeat-x center; height:26px; position: absolute; left: 0; right: 0; bottom: -60px; text-align: center; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .page1.active .nav{ bottom:40px; } .page1 .nav li{ display: inline; margin: 0 75px; } .page1 .nav li a{ background: url/images/meifei001/img3.png) no-repeat center; width: 32px; height: 32px; display: inline-block; } .page1 .nav li.selected a{ background-image: url(/images/meifei001/img2.png); } */ .page1 .arrow, .page1 .nav { z-index: 2; } .page1 .arrow { width: 87px; height: 87px; position: absolute; left: 50%; margin-left: -44px; bottom:110px; cursor: pointer; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .page1 .arrow table { width: 100%; height: 100%; text-align: center; position: relative; top: 5px; } .page1 .arrow:before, .page1 .arrow:after { content: ''; position: absolute; left: 0; top: 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; pointer-events: none } .page1 .arrow:before { width: 88px; height: 88px; border: 1px solid #fff; -moz-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) } .page1 .arrow:after { width: 86px; height: 86px; border: 2px solid #fff; background-color: rgba(255, 255, 255, 0.1); opacity: 0; -moz-transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) } .page1 .arrow:hover:before { opacity: 0; -moz-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); -moz-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) } .page1 .arrow:hover:after { opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1) } .page2 { background: url(/images/meifei001/bg2.jpg) no-repeat center; background-size: cover !important; height:960px; } .page2 .wrapper { position: absolute; left: 50%; margin-left:-614px; top:50%; margin-top: -260px; } .page2 .head { position: relative; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay: 600ms; transition-delay: 600ms; /*opacity: 0; -webkit-opacity: 0; -moz-opacity: 0;*/ } .page2.active .head { /* opacity: 1; -webkit-opacity: 1; -moz-opacity: 1;*/ } .page2 .head .img { position: absolute; left: -600px; top:-30px; transition: all 1s ease 0.5s; -webkit-transition: all 1s ease 0.5s; -ms-transition: all 1s ease 0.5s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page2.active .head .img { left:-20px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page2 .head .img2 { width:230px; float: right; display: inline; } .page2 .head .img2 li { border-top: #000000 solid 0px; padding-top:0px; position: relative; top:1000px; } .page2.active .head .img2 li { transition-delay: 2.5s; -webkit-transition-delay: 2.5s; left:80px; top:25px; } .page2 .head .text { position: absolute; top:-350px; padding-top:250px; color: #ffffff; font-size:28px; /* 修改关于我们的文字的宽度 */ width:130px; text-align:center; line-height:35px; border-bottom-style:solid; border-bottom-width:2px; border-bottom-color:#FA4701; text-transform: uppercase; font-style: normal; font-family: "MS Serif", "New York", SimHei; transition: all 1s ease 3.5s; -webkit-transition: all 1s ease 3.5s; -ms-transition: all 1s ease 3.5s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page2.active .head .text { /* 修改关于我们的文字的居中及靠左位置 */ left:690px; top:-180px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page2 .head .video { position: absolute; left: -600px; top:110px; transition: all 1s ease 0.5s; -webkit-transition: all 1s ease 0.5s; -ms-transition: all 1s ease 0.5s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page2.active .head .video { left:-20px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page2 .head .sort { position: absolute; left: 1500px; bottom:20; padding-top:16px; text-transform: uppercase; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page2.active .head .sort { left:550px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page2 .head .sorn { position: absolute; left: 2500px; height: 400px; padding-top:130px; color: #ffffff; font-size:16px; width:700px; line-height:36px; text-transform: uppercase; transition: all 1s ease 1s; -webkit-transition: all 1s ease 1s; -ms-transition: all 1s ease 1s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page2.active .head .sorn { left: 550px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page2 .head .sorn dt { position: absolute; left:-1000px; top:480px; transition: all 1s ease 2s; -webkit-transition: all 1s ease 2s; -ms-transition: all 1s ease 2s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page2.active .sorn dt { left:500px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page2 .head .sorn a { border-radius:25px; line-height:80px; color:#fff; font-size: 14px; border:2px solid #063d81; padding:10px 60px; background:#063d81; text-decoration: none; } .page2 .head .sorn a:hover { border:2px solid #063d81; color:#FFF; background:#063d81; } .page2 .head .sorn dd { display: inline; color:#fff; } .page2 .body { margin-top:400px; position: relative; top:0px; left:-30px; } .page2 .body ul { height: auto; overflow: hidden; width:120%; } .page2 .body li { width:310px; height:200px; position: relative; float: left; border:3px solid #525151; background:#2A2627; border-style:outset; display: inline; margin-right: 16px; margin-bottom: 16px; overflow: hidden; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; -webkit-transform: translate3d(0, 500px, 0); -ms-transform: translate3d(0, 500px, 0); transform: translate3d(0, 500px, 0); } .page2.active .body li { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .page2.active .body li:nth-child(1) { -webkit-transition-delay: 200ms; transition-delay: 200ms; } .page2.active .body li:nth-child(2) { -webkit-transition-delay: 600ms; transition-delay: 600ms; } .page2.active .body li:nth-child(3) { -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } .page2.active .body li:nth-child(4) { -webkit-transition-delay: 1400ms; transition-delay: 1400ms; } .page2.active .body li:nth-child(5) { -webkit-transition-delay: 1800ms; transition-delay: 1800ms; } .page2.active .body li:nth-child(6) { -webkit-transition-delay: 2200ms; transition-delay: 2200ms; } .page2.active .body li:nth-child(7) { -webkit-transition-delay: 2600ms; transition-delay: 2600ms; } .page2 .body h1 { width: 310px; height:25px; linet-height:25px; padding-top:5px; color: #ffffff; font-size: 14px; } .page2 .body li .img img { -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .page2 .body li a:hover .img img { transform: scale(1.2); } .page2 .body li .brand table { width: 100%; height: 100%; text-align: center; } .page2 ul { height: 100%; } .page2 li { width: 25%; float: left; display: inline; text-align: center; color: #fff; height: 100%; position: relative; /*css3*/ -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .page2 li .bg { position: absolute; left: 0; right: 0; bottom: 0; background: #9a02e0; height: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .page2 li.selected .bg { height: 100%; } .page2 li.l2 .bg { background-color: #acd146; } .page2 li.l3 .bg { background-color: #04afa6; } .page2 li.l4 .bg { background-color: #f8c200; } /* .page2 li .wrap { position: absolute; left: 30px; right: 30px; top: 50%; margin-top: -110px; } .page2 li .ico { width: 109px; height: 109px; border-radius: 109px; margin: 0 auto; background-position: center top; background-repeat: no-repeat; overflow: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition-delay: 400ms; transition-delay: 400ms; } .page2 li.l1 .ico { background-image: url(/images/meifei001/img5.png); } .page2 li.l2 .ico { background-image: url(/images/meifei001/img6.png); } .page2 li.l3 .ico { background-image: url(/images/meifei001/img7.png); } .page2 li.l4 .ico { background-image: url(/images/meifei001/img8.png); } .page2 li.selected .ico { background-position: center bottom; } .page2 li .link { text-align: center; margin-top: 35px; } .page2 li .link a { background: url(/images/meifei001/img41.png) no-repeat; width: 48px; height: 48px; display: inline-block; } */ .page2 li .img { position: absolute; left: 0; right: 0; bottom: -200px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition-delay: 400ms; transition-delay: 400ms; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .page2 li.selected .img { bottom: 0; opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .page2 li .img img { display: block; width: 100%; } .page2 li a { color: #fff; text-decoration: none; } .page2 li.selected { } .page2 li.l1 { -webkit-transform: translate3d(-600px, 0, 0); -ms-transform: translate3d(-600px, 0, 0); transform: translate3d(-600px, 0, 0); } .page2 li.l2 { -webkit-transform: translate3d(-300px, 0, 0); -ms-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0); } .page2 li.l3 { -webkit-transform: translate3d(300px, 0, 0); -ms-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .page2 li.l4 { -webkit-transform: translate3d(600px, 0, 0); -ms-transform: translate3d(600px, 0, 0); transform: translate3d(600px, 0, 0); } .page2.active li { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .page2 li h2 { margin-top: 20px; font-size: 18px; font-weight: bold; line-height: 1; } .page2 li dl { margin-top: 18px; } .page2 li dd { display: inline; } .page2 li dd span { width: 1px; height: 15px; display: inline-block; background: #fff; margin: 0 15px; } .page2 li p { margin-top: 0px; line-height: 24px; } .page2 .head .sorn .right{ float: left; width: 100%; } .page2 .head .sorn .right div.p1{ font-size: 14px; color: #666666; line-height: 26px; margin-bottom: 26px; } .page2 .head .sorn .right div.p2{ font-size: 14px; color: #666666; line-height: 26px; font-family: 'Arial'; } .page2 .head .sorn .right .s_icon{ margin-top: 10px; width: 100%; } .page2 .head .sorn .right .s_icon ul li{ float: left; margin-left: 45px; } .page2 .head .sorn .right .s_icon ul li img{ float: left; display: inherit; } .page2 .head .sorn .right .s_icon ul li div{ float: left; margin-top: 5px; margin-left: 15px; } .page2 .head .sorn .right .s_icon ul li h3{ font-size: 13px; line-height: 24px; color: #fff; } .page2 .head .sorn .right .s_icon ul li p{ font-size: 12px; color: #fff; line-height: 20px; font-family: 'Arial'; } .page2 .head .sorn .right p.more a{ display: block; width: 180px; height: 43px; line-height: 43px; border: 1px solid #0a0606; text-align: center; font-size: 12px; color: #000000; margin-top: 70px; box-sizing: border-box; } .page2 .head .sorn .right p.more a:hover{ background-color: #3f853f; color: #fff; border: none; } .page2 .head .sorn .right .s_icon ul li.clearfixs { float: left; } /* 第二屏结束 第三屏开始 */ .page3 { background: url(/images/meifei001/bg3.jpg) repeat center; background-size: cover !important; height:960px; } .page3 .wrapper { position: absolute; left:50%; margin-left:-650px; top:50%; margin-top:-260px; } .page3 .head { position: relative; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay: 600ms; transition-delay: 600ms; /*opacity: 0; -webkit-opacity: 0; -moz-opacity: 0;*/ } .page3.active .head { /* opacity: 1; -webkit-opacity: 1; -moz-opacity: 1;*/ } .page3 .head .img { position: absolute; /* 修改产品展示导航图片居中及靠左的位置 */ left:500px; transition: all 1s ease 2s; -webkit-transition: all 1s ease 2s; -ms-transition: all 1s ease 2s; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page3 .head .img:first-child { top:800px; transition-delay:1s; -webkit-transition-delay:1s; } .page3.active .head .img { top:-130px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page3 .head .text { position: absolute; top:-350px; padding-top:120px; color: #ffffff; font-size:28px; /* 修改产品展示导航图片下描述文字的宽度 */ width:1000px; line-height:26px; text-transform: uppercase; font-style: normal; font-family: "MS Serif", "New York", SimHei; transition: all 1s ease 2s; -webkit-transition: all 1s ease 2s; -ms-transition: all 1s ease 2s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page3.active .head .text { /* 文字宽度修改后需要修改其居中及靠左的位置 */ left:150px; top:-180px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page3 .head .text a{ text-decoration:none; } .page3 .head .nav { margin-top:70px; width:1300px; height:510px; overflow: hidden; } .page3 .head .nav dl { float:left; width:25%; height:450px; margin-bottom:20px; position: relative; transition: all 1s ease 2.5s; -webkit-transition: all 1s ease 2.5s; -ms-transition: all 1s ease 2.5s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page3.active .head .nav dl { opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page3 .head .nav dl a { width:300px; height:400px; display: block; margin:auto; text-decoration:none; } .page3 .head .nav dl dt { width:300px; height:400px; border:1px solid #cfd0d0; } .page3 .head .nav dl dt img { display: block; width:300px; height:398px; transition: all 1s ease 3.5s; -webkit-transition: all 1s ease 3.5s; -ms-transition: all 1s ease 3.5s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page3.active .nav dl dt img { opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page3 .head .nav dl dd { width:300px; padding: 0px 0px; height: 40px; border: 1px solid #cfd0d0; border-top: none; color:#282E3A; font-size:14px; line-height:40px; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; background: #fff; } .page3 .head .nav dl a:hover dt { border: 1px solid #0067b2; } .page3 .head .nav dl a:hover dd { color:#fff; background: #0067b2; border: 1px solid #0067b2; border-top: none; } .page3 .naw { text-align:center; width:100%; margin:0 auto; padding:20px 0 0 50px; position:relative; top:-700px; transition: all 1s ease 4s; -webkit-transition: all 1s ease 4s; -ms-transition: all 1s ease 4s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page3.active .naw { top:760px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page3 .naw a { border-radius:25px; line-height:80px; color:#fff; font-size: 14px; border:2px solid #063d81; padding:10px 60px; background:#063d81; text-decoration: none; } .page3 .naw a:hover { border:2px solid #063d81; color:#FFF; background:#063d81; } /* 第三屏结束 第四屏开始 */ .page4 { background: url(/images/meifei001/bg4.jpg) no-repeat center; background-size: cover !important; height: 998px; } .page4 .wrapper { position: absolute; left: 50%; margin-left: -600px; top: 60%; margin-top: -220px; } .page4 .head .img, .page4 .head .list, .page4 .head .list dl#dl1, .page4 .head .list dl#dl2, .page4 .list li { -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .page4.active .head .img, .page4.active .head .list, .page4.active .head .list dl#dl1, .page4.active .head .list dl#dl2, .page4.active .list li { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .page4 .head { position: relative; width: 105%; } .page4 .head .img { position: absolute; left: 400px; transition: all 1s ease 2s; -webkit-transition: all 1s ease 2s; -ms-transition: all 1s ease 2s; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page4 .head .img:first-child { top: 800px; transition-delay: 1s; -webkit-transition-delay: 1s; } .page4 .active .wrapper .head .nav { top: -30px; position: absolute; height: auto; margin-top: 90px; transition: all 1s ease 1s; -webkit-transition: all 1s ease 1s; -ms-transition: all 1s ease 1s; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page4.active .head .img { top: -100px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page4 .head .nav { width: 1200px; overflow: hidden; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; transition: all 1s ease 1s; -webkit-transition: all 1s ease 1s; -ms-transition: all 1s ease 1s; opacity: 1; -webkit-opacity: 1; opacity: 0; -webkit-opacity: 0; } .page4.active .head .naw { top: -140px; left: -85px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page4 .head .naw { text-align: center; width: 100%; margin: 0 auto; padding: 20px 0 0 50px; position: relative; top: -700px; transition: all 1s ease 4s; -webkit-transition: all 1s ease 4s; -ms-transition: all 1s ease 4s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page4 .head .naw a { border-radius: 25px; line-height: 80px; color: #fff; font-size: 14px; border: 2px solid #FF4E09; padding: 10px 60px; background: #FF4E09; text-decoration: none; } .page4 .head .nav .product_img { min-height: 330px; } .page4 .head .nav .col-md-4 { width: 33.33333333%; float: left; } .page4 .head .nav .img { width: 360px; height: 269px; } .page4 .head .nav .product_img img { margin-right: auto; margin-left: auto; display: block; max-width: 100%; height: auto; margin-bottom: 10px; max-height: 320px; width: 360px; height: 269px; transition: all 0.5s; } .page4 .head .nav .product_img img:hover { transform:scale(1.1) } .page4 .head .nav .product_title { text-align: center; height: 40px; color: #fff; font-size: 16px; } .page4 .head .nav li { display: inline; margin-right: 20px; } .page4 .head .list { position: absolute; left: 485px; top: 25px; -webkit-transform: translate3d(-300px, 0, 0); -ms-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0); } .page4.active .head .list { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .page4 .head .list dl { float: left; display: inline; border-top: #f2f4f3 solid 1px; position: relative; padding-top: 45px; color: #fff; } .page4 .head .list dl a { color: #fff; } .page4 .head .list dl#dl1 { width: 470px; } .page4 .head .list dl#dl2 { width: 240px; margin-left: 15px; } .page4 .head .list dt { position: absolute; left: 0; top: 10px; font-size: 14px; font-weight: bold; } .page4 .head .list dd span { margin: 0 5px; } .page4 .body { margin-top: 75px; } .page4 .list { height: auto; overflow: hidden; width: 105%; } .page4 .list li { float: left; display: inline; width: 228px; height: 306px; background: #fff; margin-right: 15px; position: relative; transition-delay: 1s; -webkit-transition-delay: 1s; -ms-transition-delay: 1s; } .page4 .list li:nth-child(2) { top: 200px; left: 100px; } .page4 .list li:nth-child(3) { top: 400px; left: 200px; } .page4 .list li:nth-child(4) { top: 600px; left: 300px; } .page4 .list li:nth-child(5) { top: 800px; left: 400px; } .page4.active .list li { top: 0; left: 0; } .page4 .view { position: relative; padding-top: 140px; padding-left: 35px; padding-right: 30px; } .page4 .view h4 { font-size: 14px; color: #000; } .page4 .view .date { position: absolute; left: 115px; top: 40px; } .page4 .view .date big { font-size: 50px; font-weight: bold; font-family: impact; } .page4 .view .date span { position: absolute; left: 18px; bottom: 0; background: #fff; padding: 0 5px; line-height: 1.3; font-family: arial; width: 80px; } .page4 .view .img { height: 90px; } .page4 .view .img table { width: 100%; height: 100%; } .page4 .view h2 { font-size: 15px; line-height: 25px; } .page4 .mask { background: #e50581; position: absolute; left: 0; right: 0; top: 400px; bottom: 0; padding: 40px 30px; color: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .page4 .mask .img img { display: block; } .page4 a:hover .mask, .page4 .selected .mask { top: 0; opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .page4 .mask h2 { margin-top: 20px; font-size: 15px; } .page4 .mask hr { width: 37px; height: 1px; border: none; background: #fff; display: block; margin-top: 20px; margin-left: 0; } .page4 .mask p { margin-top: 20px; clear: both; } .page4 .wen { width: 46px; height: 46px; border-radius: 46px; display: inline-block; position: relative; } .page4 .wen:before, .wen:after { content: ''; position: absolute; left: 0; top: 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; pointer-events: none } .page4 .wen:before { width: 46px; height: 46px; border: 1px solid #fff; -moz-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) } .page4 .wen:after { width: 46px; height: 46px; border: 1px solid #fff; background-color: rgba(255, 255, 255, 0.1); opacity: 0; -moz-transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) } .page4 .wen:hover:before { opacity: 0; -moz-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); -moz-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) } .page4 .wen:hover:after { opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1) } .page4 .head .text { position: absolute; top:-350px; padding-top:120px; color: #ffffff; font-size:28px; /* 修改产品展示导航图片下描述文字的宽度 */ width:1000px; line-height:26px; text-transform: uppercase; font-style: normal; font-family: "MS Serif", "New York", SimHei; transition: all 1s ease 2s; -webkit-transition: all 1s ease 2s; -ms-transition: all 1s ease 2s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page4.active .head .text { /* 文字宽度修改后需要修改其居中及靠左的位置 */ left: 80px; top: -180px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page4 .head .nav .product_title a { } .page4 .naw { text-align:center; width:100%; margin:0 auto; padding:20px 0 0 50px; position:relative; top:-700px; transition: all 1s ease 3s; -webkit-transition: all 1s ease 3s; -ms-transition: all 1s ease 3s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page4.active .naw { top:560px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page4 .naw a { border-radius:25px; line-height:80px; color:#fff; font-size: 14px; border:2px solid #063d81; padding:10px 60px; background:#063d81; text-decoration: none; } .page4 .naw a:hover { border:2px solid #063d81; color:#FFF; background:#063d81; } .page5 { background: url(/images/meifei001/bg5.jpg) no-repeat center; background-size: cover !important; height:998px; } .page5 .wrapper { position: absolute; left: 50%; margin-left: -640px; top: 50%; margin-top: -240px; } .page5 .wrapper .head { /* position: relative; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay: 600ms; transition-delay: 600ms; *opacity: 0; -webkit-opacity: 0; -moz-opacity: 0;*/ } .page5.active .wrapper .head { /* opacity: 1; -webkit-opacity: 1; -moz-opacity: 1;*/ } .page5 .wrapper .head .img { position: absolute; /* 修改导航图片居中及靠左的位置 */ left:310px; transition: all 1s ease 2s; -webkit-transition: all 1s ease 2s; -ms-transition: all 1s ease 2s; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page5 .wrapper .head .img:first-child { top:800px; transition-delay:2s; -webkit-transition-delay:2s; } .page5.active .wrapper .head .img { top:-140px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page5 .wrapper .head .text { position: absolute; top:-350px; padding-top:120px; color: #ffffff; font-size:38px; /* 修改导航图片下描述文字的宽度 */ width:1000px; line-height:26px; text-transform: uppercase; font-style: normal; font-family: "MS Serif", "New York", SimHei; transition: all 1s ease 2s; -webkit-transition: all 1s ease 2s; -ms-transition: all 1s ease 2s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page5.active .wrapper .head .text { /* 文字宽度修改后需要修改其居中及靠左的位置 */ left:320px; top:-120px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page5 .wrapper .head .naw { text-align:center; width:100%; margin:0 auto; padding:20px 0 0 50px; position:relative; top:-700px; transition: all 1s ease 1.5s; -webkit-transition: all 1s ease 1.5s; -ms-transition: all 1s ease 1.5s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page5.active .wrapper .head .naw { top:560px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page5 .wrapper .head .naw a { border-radius:25px; line-height:80px; color:#fff; font-size: 14px; border:2px solid #305dc3; padding:10px 60px; background:#305dc3; text-decoration: none; } .page5 .wrapper .head .naw a:hover { border:2px solid #999; color:#FFF; background:#999; } .page5 .wrapper .head .info { top:540px; position: absolute; height: auto; margin-top:90px; transition: all 1s ease 1s; -webkit-transition: all 1s ease 1s; -ms-transition: all 1s ease 1s; opacity: 1; -webkit-opacity: 1; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page5.active .wrapper .head .info { top:-30px; position: absolute; height: auto; margin-top:90px; transition: all 1s ease 1s; -webkit-transition: all 1s ease 1s; -ms-transition: all 1s ease 1s; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page5 .wrapper .head .info ul { width:1280px; overflow: hidden; margin: 0 auto; } .page5 .wrapper .head .info ul li { width:590px; overflow: hidden; float: left; height:145px; margin-left:13px; margin-bottom:30px; background: rgba(0,0,0,0.7); box-shadow: 0px 3px 3px rgba(0, 0, 0, .5); margin-right:35px } .page5 .wrapper .head .info .khjz_m { width: 191px; overflow: hidden; float: left; height: 145px; } .page5 .wrapper .head .info .khjz_r { width: 375px; overflow: hidden; float: right; height: 145px; } .page5 .wrapper .head .info .jz_rt { width: 355px; overflow: hidden; float: left; height: 36px; line-height: 36px; margin-top: 13px } .page5 .wrapper .head .info .jz_rt a { color: #FFFFFF; text-decoration:none; } .page5 .wrapper .head .info .jz_rt p { width: 275px; overflow: hidden; float: left; font-size: 14px; } .page5 .wrapper .head .info .jz_rt span { width: 80px; overflow: hidden; float: right; text-align: right; color: #fff; } .page5 .wrapper .head .info .jz_rp { width: 355px; overflow: hidden; float: left; height: 48px; color: #F6F6F6; margin-bottom: 12px; } .page5 .wrapper .head .info .jz_rb a { width: 375px; overflow: hidden; float: right; height: 25px; text-align: right; margin-right:20px } .page5 .wrapper .head .info ul li { width: 590px; overflow: hidden; float: left; height: 145px; margin-left: 13px; margin-bottom: 30px; background: rgba(0,0,0,0.7); box-shadow: 0px 3px 3px rgb(0 0 0 / 50%); margin-right: 35px; } .page6 { background: url(/images/meifei001/bg6.jpg) no-repeat center; opacity:1; background-size: cover !important; height:998px; } .page6 video { position: absolute; left: 0; right: 0; top: 0; bottom: 0; min-width: 100%; } .page6 .wrapper { position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -260px; } .page6 .img { margin-left:0px; position: relative; } .page6 .img .quan, .page6 .img .wen { -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s; opacity: 0.9; -webkit-opacity: 0.9; -moz-opacity: 0.9; } .page6.active .img .quan, .page6.active .img .wen { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .page6 .img .wen { position: absolute; left:280px; top:0px; -webkit-transform: translate3d(100px, 0, 0); -ms-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } .page6.active .img .wen { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .page6 .img .quan { -webkit-transform: translate3d(-100px, 0, 0); -ms-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0); } .page6.active .img .quan { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .page6 .text { top:600px; position: absolute; height: auto; margin-top:80px; transition: all 1s ease 1s; -webkit-transition: all 1s ease 1s; -ms-transition: all 1s ease 1s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page6.active .text { top:20px; left:-40px; opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .page6 .text h2{ color: #ffffff; line-height:60px; font-size:26px; text-transform: uppercase; font-style: normal; font-family: "MS Serif", "New York", SimHei; } .page6 .text h3{ color: #ffffff; line-height:40px; font-size:16px; font-style: normal; } .page6 .text h4{ color: #ffffff; line-height:35px; font-size:16px; font-style: normal; } .page6 .time { position: absolute; float:right; right:-10px; top:60px; } .page6 .time .unit-line{ width:100px; float:right; color: #ffffff; line-height:50px; font-size:15px; font-style: normal; font-family: "MS Serif", "New York", SimHei; } .page6 .time td{ color: #ffffff; line-height:50px; font-size:16px; font-style: normal; } .page6 .time img{ margin-top:0px; background: rgba(255,255,255,0.10); line-height:50px; font-size:16px; } .page6 .time td select{ padding-top: 15px; background: rgba(255,255,255,0.10); box-shadow: 0 2px 8px rgba(0,0,0,0.2); border: none; color: white; padding: 10px 15px; border-radius:5px; font-size: 16px; color: #000000; outline: none; } .page6 .time .blue{ box-shadow: 0 2px 8px rgba(0,0,0,0.1); background: rgba(255,255,255,0.1); } .page6 .time td input{ padding-top: 15px; background: rgba(255,255,255,0.10); box-shadow: 0 2px 8px rgba(0,0,0,0.2); border: none; color: white; padding: 10px 15px; border-radius:5px; font-size: 16px; outline: none; } .page6 .time td textarea{ margin-top:10px; background: rgba(255,255,255,0.10); box-shadow: 0 2px 8px rgba(0,0,0,0.2); border: none; color: white; padding:5px 15px 0px 15px ; border-radius:5px; font-size: 16px; outline: none; } .page6 .tele { position: absolute; float:right; right:525px; top:150px; } .page6 .tele img { display: block; } .page6 .tele .qq { margin-top: 30px; } .page6 .teln { position: absolute; left:-200px; transition: all 1s ease 2s; -webkit-transition: all 1s ease 2s; -ms-transition: all 1s ease 2s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; } .page6.active .teln { left:920px; top:80px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; } .page6 .info { width: 100%; overflow: hidden; position: absolute; bottom: 10px; color: #c3c5c3; } .page6 .info a { text-decoration:none; color: #c3c5c3; } .page6 .info ul { width:1400px; float: left; display: inline; font-size:12px; } .page6 .info .ul1 { width:50%; float: left; font-size:12px; margin-top: 70px; margin-left: 60px; } .page6 .info .ul2 { width:200px; float: right; margin-right: 60px } .page6 .info .ul2 .img1 { margin-top:5px; float:left; margin-right:20px; } .page6 .info .ul2 .img2 { margin-top:5px; float:left; margin-left:20px; } .page6 .info .ul3 { width:600px; float:left; height:30px; font-size:12px; margin-top:12px; } .page6 .info .ul3 dl { float:right; width:20%; position: relative; border:1px solid #444; margin-bottom:10px; margin-right:10px; border-radius:5px; } .page6 .info .ul3 dt { line-height:30px; width:120px; height:30px; text-align: center; } .page6 .info .ul3 dt a { color: #c3c5c3; } .page6 .info .ul3 dt a:hover { color: #F85E01; } .flink { background: #202020; padding: 25px 0; color: #4f4f4f; } .flink dt, .flink dd { display: inline; margin-right: 35px; line-height: 27px; } .flink dt { font-weight: bold; } .gb-arrow { background: url(/images/meifei001/img42.png) no-repeat left center; height: 47px; line-height: 47px; padding-left: 30px; position: absolute; left: 30px; top: 50%; margin-top: 1500px; font-size: 12px; color: #fff; -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; } .active .gb-arrow { margin-top: -23px; opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; } .slide-wrap { width: 100%; height: 100%; position: relative; } .slide-wrap ul { width: 100%; height: 100%; } .slide-wrap li { width: 100%; height: 100%; overflow: hidden; text-align: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .slide-wrap li .wrap { position: absolute; left: 0; right: 0; top: 50%; margin-top: -250px; } .slide-wrap li.selected { } .slide-wrap li .bg { position: absolute; transition: all 1s; -webkit-transition: all 1s; -ms-transition: all 1s; -moz-transition: all 1s; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; -moz-opacity: 0; } .slide-wrap li.selected .bg { opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; -moz-opacity: 1; } .slide-wrap li .img { position: relative; z-index: 9; transition: all 1s; -webkit-transition: all 1s; -ms-transition: all 1s; -moz-transition: all 1s; } .slide-wrap li.selected .img { -webkit-transform: translate3d(0, 0, 0) !important; -ms-transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important; } .slide-wrap li .text { color: #fff; font-size: 20px; margin-top: 25px; position: relative; z-index: 9; transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s; } .slide-wrap video { position: absolute; z-index: 0; left: 0px; min-width: 0px; /*min-height: 999px;*/ min-width: 100%; height: auto; transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s; } .slide-wrap li#s1 video { opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; -moz-opacity: 0; } .slide-wrap li#s1.selected video { opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; -moz-opacity: 1; } .slide-wrap li#s1 .img { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); -ms-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } .slide-wrap li#s1.selected .img { opacity: 1; } .slide-wrap li#s1 .text { opacity: 0; } .slide-wrap li#s1.selected .text { opacity: 1; } .slide-wrap li#s2 video { top:0px; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; -moz-opacity: 0; } .slide-wrap li#s2.selected video { top:0px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; -moz-opacity: 1; } .slide-wrap li#s2 .img { position: relative; display: inline-block; opacity: 0; -webkit-transform: translate3d(0, 50px, 0); -ms-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } .slide-wrap li#s2.selected .img { opacity: 1; } .slide-wrap li#s2 .quan { position: absolute; right: 0; top: 0; } .slide-wrap li#s2 .img { opacity: 0; } .slide-wrap li#s2 .text { opacity: 0; } .slide-wrap li#s3 video { top:0px; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; -moz-opacity: 0; } .slide-wrap li#s3.selected video { top:0px; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; -moz-opacity: 1; } .slide-wrap li#s3 .img { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); -ms-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } .slide-wrap li#s3.selected .img { opacity: 1; } .slide-wrap li#s3 .text { opacity: 0; } .slide-wrap li#s3.selected .text { opacity: 1; } .slide-nav-wrap { position: absolute; left: 0; bottom: 0; width: 100%; padding-top: 25px; margin-bottom: -22px; opacity: 1; overflow: hidden; z-index: 8; -moz-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); height: 84px; } #slide-nav { position: relative; width: 620px; height: 26px; margin: auto; -moz-transform: translateX(90px); -ms-transform: translateX(90px); -webkit-transform: translateX(90px); transform: translateX(90px) } .nav-line { float: left; position: relative; width: 90px; height: 1px; top: 13px } .nav-line:after { content: ''; position: absolute; top: 0; width: 90px; height: 100%; background-color: #fff; -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) } .nav-line.small:after { width: 78px } .nav-line.x-small:after { width: 63px; -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) } .nav-line.prev:after { left: 0 } .nav-line.next:after { right: 0 } .nav-line:first-child:before, .nav-line:last-child:before { content: ''; position: absolute; top: 0; width: 8000px; height: 1px; background-color: #fff; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden } .nav-line:first-child:before { left: -8000px } .nav-line:last-child:before { right: -8000px } .nav-bullet-container { float: left; position: relative; width: 26px; height: 26px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50% } .nav-bullet-container:nth-child(1) { margin-left: 100px } .nav-bullet-container:before { content: ''; position: absolute; top: -15px; left: 8px; opacity: 0; pointer-events: none; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #fff transparent transparent transparent; -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden } .desktop #slide-nav .nav-bullet-container:hover:before { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1 } .desktop #slide-nav .nav-bullet-container:hover .nav-link:before { -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -webkit-transform: scale(2, 2); transform: scale(2, 2); opacity: 0; -moz-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) } .desktop #slide-nav .nav-bullet-container:hover .nav-link:after { -moz-transform: scale(3.3, 3.3); -ms-transform: scale(3.3, 3.3); -webkit-transform: scale(3.3, 3.3); transform: scale(3.3, 3.3); opacity: 0.2 } .desktop #slide-nav .nav-bullet-container:hover .nav-bullet { opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1) } .desktop #slide-nav .nav-bullet-container:hover .nav-text { opacity: 1; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px) } .nav-bullet-container.active .nav-link:after { opacity: 1 } .nav-link { display: block; position: relative; width: 100%; height: 100%; color: #fff; } .nav-link:before { content: ''; position: absolute; left: 5px; top: 5px; width: 14px; height: 14px; border: 1px solid #fff; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; opacity: 0.5; -moz-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) } .nav-link:after { content: ''; position: absolute; left: 9px; top: 9px; width: 8px; height: 8px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: #fff; opacity: 0.5; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) } .nav-bullet { position: absolute; left: 9px; top: 9px; width: 8px; height: 8px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: #fff; opacity: 0; -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) } .nav-text { position: absolute; left: -44px; bottom: -22px; width: 113px; text-align: center; opacity: 0; pointer-events: none; -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); color: #fff; } /*雷达波纹效果*/ .gb-radar { position: relative; } .gb-radar:before, .gb-radar:after { content: ''; position: absolute; left: 0; top: 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; pointer-events: none } .gb-radar:before { width: 88px; height: 88px; border: 1px solid #fff; -moz-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) } .gb-radar:after { width: 86px; height: 86px; border: 2px solid #fff; background-color: rgba(255, 255, 255, 0.1); opacity: 0; -moz-transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) } .gb-radar:hover:before { opacity: 0; -moz-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); -moz-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) } .gb-radar:hover:after { opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1) } /*弹出菜单*/ #nav { position: fixed; top: 0; width: 0; width: 100%; height: 100%; background: url(/images/meifei001/bg0.jpg) no-repeat center; background-size: cover !important; z-index: 9999; transition: all 0.6s; -webkit-transition: all 0.6s; -ms-transition: all 0.6s; -moz-transition: all 0.6s; opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; -moz-opacity: 1; } #nav.hide { top: -100%; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; -moz-opacity: 0; } .nav_top { width: 100%; } .nav_main { max-width: 1100px; height: 514px; margin: 0 auto; position: relative; top: 50%; margin-top: -250px; display: table; } .nav_main h1 { color: #fff; font-size: 48px; clear: both; padding-left: 10px; font-style: italic; font-family: "MS Serif", "New York", Microsoft YaHei; } .nav_main h3 { color: #ffffff; font-size:12px; padding-top:260px; clear: both; text-align: center; text-decoration:none; line-height:22px; } .nav_main ul { width: 100%; padding-top:80px; display: table; } .nav_main ul li { width: 257px; height:80px; padding-left:76px; float: left; color: #fff; } .nav_main ul li a { color: #fff; text-decoration: none; } .nav_main ul li h2 { height: 50px; line-height: 50px; font-size: 16px; } .nav_main ul li h2 a em { color: #949494; margin-left: 20px; font-size: 12px; font-style: normal; font-family: Verdana, Geneva, sans-serif; } .nav_main ul li div a { color: #dbdbdb; display: block; line-height: 22px; font-size: 12px; } .nav_main ul li div a:hover { color: #fff; } .nav_main ul li.h0 { background: url(/images/meifei001/homes.png) no-repeat 10px 12px; } .nav_main ul li.h1 { background: url(/images/meifei001/services.png) no-repeat 10px 12px; } .nav_main ul li.h2 { background: url(/images/meifei001/cases.png) no-repeat 10px 12px; } .nav_main ul li.h3 { background: url(/images/meifei001/abouts.png) no-repeat 10px 12px; } .nav_main ul li.h4 { background: url(/images/meifei001/news.png) no-repeat 10px 12px; } .nav_main ul li.h5 { background: url(/images/meifei001/Advantages.png) no-repeat 10px 12px; } .nav_main ul li.h6 { background: url(/images/meifei001/tiyans.png) no-repeat 10px 12px; } .nav_main ul li.h7 { background: url(/images/meifei001/jobs.png) no-repeat 10px 12px; } .nav_main ul li.h8 { background: url(/images/meifei001/contacts.png) no-repeat 10px 12px; } .nav_main ul li.h9 { background: url(/images/meifei001/contacts.png) no-repeat 10px 12px; } .nav_main ul li div a:after { -webkit-transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .nav-toggle { background-color: #fff; position: fixed; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; border-radius: 50%; width: 36px; height: 36px; top: 15px; right: 13px; z-index: 30; overflow: hidden; } .nav-toggle span { width: 16px; display: block; height: 2px; position: absolute; left: 10px; background-color: #24252f; opacity: 1; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .nav-toggle span:nth-child(1) { top: 13px; } .nav-toggle span:nth-child(2) { top: 18px; } .nav-toggle span:nth-child(3) { top: 23px; } .nav-toggle.close span:nth-child(1) { top: 18px; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .nav-toggle.close span:nth-child(2) { opacity: 0; left: -30px; } .nav-toggle.close span:nth-child(3) { top: 18px; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } a.logo_menu { margin-top: 21px; display: inline-block; margin-left: 31px; } a.close_menu { width: 50px; height: 48px; display: inline-block; margin-top: 20px; background: url(../images/close.png) no-repeat; float: right; margin-right: 30px; -moz-transition: -moz-transform 0.5s; /* Firefox 4 */ -webkit-transition: -webkit-transform 0.5s; /* Safari and Chrome */ -o-transition: -o-transform 0.5s; /* Opera */ } a.close_menu:hover { -moz-transform: rotate(90deg); /* Firefox 4 */ -webkit-transform: rotate(90deg); /* Safari and Chrome */ -o-transform: rotate(90deg); /* Opera */ } .sidebar { position: fixed; right: 0; top: 50%; margin-top: -80px; width: 55px; background: rgba(0,0,0,0.3); padding: 12px 0 0 0; border-radius: 8px 0 0 8px; z-index: 999999; } .sidebar li { height: 50px; width: 160px; padding-left: 17px; border-radius: 8px 0 0 8px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .sidebar li img { display: block; } .sidebar li:hover { margin-left: -105px; background: rgba(0,0,0,0.6); } /*进度条*/ #loader { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999999; background: #none; } #loader .myStat { margin: 0 auto; } #loader .wrap { text-align: center; color: #fff; position: absolute; left: 50%; margin-left: -100px; width: 200px; height: 120px; top: 50%; margin-top: -60px; } #loader .wrap h2 { margin-top: 20px; } #loader .quan { width: 100px; height: 100px; border-radius: 100px; margin: 0 auto; text-align: center; line-height: 100px; font-size: 12px; position: relative; } #loader .quan .num { width: 60px; height: 22px; background: #000; position: absolute; top: 50%; margin-top: -8px; left: 20px; text-align: center; color: #fff; line-height: 1; } /*新闻 .home-news{ padding:6px 0;} .home-news-content{padding-top:30px;} .w1000{position:relative;width:1000px;margin:0 auto;margin-bottom: 50px;} .home-title{ text-align:center; position:relative;} .home-title:before,.home-title:after{ content:""; display:inline-block; position:absolute;} .home-title:before{ border-top:1px dotted #ddd; left:0; right:0; top:26px;} .home-title:after{ height:2px; width:50px; left:50%; margin-left:-25px; bottom:0px; /*background-color:#ff9a00;*/} .home-title h2{ font-size:24px; line-height:50px; color:#333; position:relative; display:inline-block;padding:0 30px;} .page5 .wrapper .head .info .article{ float:left; width:400px; position:relative; padding-left:35px;} .page5 .wrapper .head .info .article.one{ padding-left:0;} .page5 .wrapper .head .info .article a{ display:inline-block;} .page5 .wrapper .head .info .article dl{ position:relative;} .page5 .wrapper .head .info .article dl em.peng{ position:absolute; top:-3px; left:0; bottom:0px; height:3px; width:0px; background-color:#ff9a00; z-index:5;} /* .page5 .wrapper .head .info .article dl dt{ padding-top:200px; overflow:hidden; position:relative;} .page5 .wrapper .head .info .article dl dt span{ position: absolute; left:0; right:0; top:0; bottom:0; -ms-transform: scale(1); transition: 0.6s;} */ .page5 .wrapper .head .info .article dl dt img{ width:400px; height:296px;} .page5 .wrapper .head .info .page5 .wrapper .info .article dl dd{ background:#fff; padding:15px 0px 0px; position:relative; font-size:12px;} .page5 .wrapper .head .info .article dl dd h3{ font-size:16px; line-height:24px; color:#fff;text-overflow: ellipsis;} .page5 .wrapper .head .info .article dl:hover h3{color:#ff9a00;} .page5 .wrapper .head .info .article dl dd h6{ line-height:24px; color:#fff;} .page5 .wrapper .head .info .article dl dd p{ padding:5px 0 5px; line-height:20px; color:#fff;} .page5 .wrapper .head .info .article dl dd h5{ line-height:30px; color:#fff;} .page5 .wrapper .head .info .article dl dd h5 em{ font-family:"\5b8b\4f53"; display:inline-block; padding:0 5px;} /* .page5 .article a:hover dl dt span { -ms-transform: scale(1.2); transform: scale(1.2); } */ */ #qyhd{ position: absolute; width: 100vw; height: 100vh; overflow: hidden; } #qyhd .jianjie,#qyhd .zhaoshang,#qyhd .lianxi,#qyhd .lianxi1{ width:25%; heigiht:1080px; float:left; transition:all 8s; } #qyhd .jianjie{ background:url(/images/dsp_bg11.png) no-repeat left center;-webkit-transition-delay: 200ms; transition-delay: 200ms; } #qyhd .zhaoshang{ background:url(/images/dsp_bg21.png) no-repeat left center; -webkit-transition-delay: 400ms; transition-delay: 400ms; } #qyhd .lianxi{ background:url(/images/dsp_bg31.png) no-repeat left center; -webkit-transition-delay: 600ms; transition-delay: 600ms;} #qyhd .lianxi1{ background:url(/images/dsp_bg41.png) no-repeat left center; -webkit-transition-delay: 800ms; transition-delay: 800ms;} #qyhd a{ width:100%; height:1080px; display:block; position:relative; color:#fff; transition:all 1s; } #qyhd a .xiangxi{ width: 400px; height: 600px; margin: auto; position: absolute; top: 46%; left: 50%; margin-left: -200px; margin-top: -70%; } #qyhd a .xiangxi img{ display:block; margin:auto; padding-top:70px; } #qyhd a .xiangxi span{ display:block; text-align:center; font-size:20px; line-height:20px; padding-top: 20px; } #qyhd a .xiangxi h1{ text-align:center; font-size:30px; padding-top:40px; } #qyhd a .xiangxi p{ width:300px; margin:auto; text-align:center; line-height:30px; font-size:16px; padding-top: 50px; } #qyhd .jianjie a{ background:url(/images/dsp_bg11.) no-repeat left center; } #qyhd .zhaoshang a{ background:url(/images/dsp_bg21.jpg) no-repeat left center; } #qyhd .lianxi a{ background:url(/images/dsp_bg31.jpg) no-repeat left center; } #qyhd .lianxi1 a{ background:url(/images/dsp_bg41.jpg) no-repeat left center; } #qyhd a:hover{ background:rgba(0,0,0,.3); } #qyhd .jianjie:hover{ background:url(/images/dsp_bg1.jpg) no-repeat right center; } #qyhd .zhaoshang:hover{ background:url(/images/dsp_bg2.jpg) no-repeat right center; } #qyhd .lianxi:hover{ background:rgba(0,0,0,.3); } #qyhd .lianxi1:hover{ background:rgba(0,0,0,.3); } .page1 .info { width: 100%; overflow: hidden; position: absolute; bottom:60px; color: #c3c5c3; } .page1 .info a { text-decoration:none; color: #c3c5c3; } .page1 .info .ul1 { width:40%; float: left; font-size:12px; margin-left: 10px; margin-top: 20px; } .page1 .info .ul2 { width:200px; float:right; } .page1 .info .ul2 .img1 { margin-top:5px; float:left; margin-right:20px; } .page1 .info .ul2 .img2 { margin-top:5px; float:left; margin-left:20px; text-align: center; } .page1 .info .ul3 { width:600px; float: right; font-size:12px; } .page1 .info .ul3 dl { float:right; width:23%; position: relative; border:1px solid #444; margin-bottom:10px; margin-right:10px; border-radius:5px; } .page1 .info .ul3 dt { line-height:30px; height:30px; text-align: center; } .page1 .info .ul3 dt a { color: #c3c5c3; } .page1 .info .ul3 dt a:hover { color:#00655b; } .wrap { position: absolute; left: 0; right: 0; width: 100%; height: 100%; overflow: hidden; text-align: center; top: 34%; bottom: 0; } .wrap .text { color: #fff; font-size: 1.2rem; margin-bottom: 1.2rem; position: relative; z-index: 9; /* transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s;*/ animation-delay:1.3s; -webkit-animation-delay:1.3s; } .brand-type { display: block; text-align: center; font-size: 0; margin-bottom: 3.6%; animation-delay:1.5s; -webkit-animation-delay:1.5s; } .brand-type li { display: inline-block; width: 170px; height: 2.3rem; margin: 5px 0.8rem; text-align: center; line-height: 2.3rem; border-radius: 2rem; border: solid 1px rgba(255,255,255,0.8); font-size: 14px; cursor: pointer; transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; } .brand-type li a { color: #fff; display: block; } @media screen and (max-width: 768px) { .brand-type li { width: 20%; margin: 1%; height: 40px; line-height: 40px; font-size: 16px; } } @media screen and (max-width: 640px) { .brand-type li { width: 40%; } } .brand-type li.active { color: #fff; background-color: #696969; } .brand-type li.active a { color: #fff; } .brand-type li :hover { background: rgba(1,101,90,0.8); border-radius: 2rem; border: solid 1px rgba(1,101,90,0.8); text-decoration:none; } .wrap .top{ color: #fff; font-size: 3.5rem; position: relative; z-index: 9; font-weight: bold; float: left; } .wrap .down{ color: #fff; font-size: 2.6rem; position: relative; z-index: 9; font-weight: bold; float: right; animation-delay: 1.1s; -webkit-animation-delay: 1.1s; } .mark { width: 26%; margin: auto; height: 160px; }; .doc { width: 100%; color: #FFF; } .doc .hd { width: 100%; margin: auto; width: 100%; margin: auto; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.4); z-index: 99999; position: fixed; } .welcome { float: left; line-height: 35px; color: #fff; margin-left: 50px; } .language { float: right; line-height: 35px; color: #fff; margin-right: 60px; } .language .link a { color: #fff; }