/* ----------------------------------- 方法变量 Create Time : 2014-07-22 Update Time : 2015-05-30 Author : Trueland Development Department ----------------------------------- */ /* ----------------------------------- 普通方法 ---------------------- 1 .opc() // 透明度 - 传整数 50 代表 0.5 2 .pos(r) // 定位方式 - 必须传参，r 代表relative || a 代表absolute || f 代表 fixed 3 .font() // 字体大小 - 默认12px 4 .align() // 文本对齐 - 默认 center 5 .lineH() // 行高设置 - 默认 20px 11 .arrow(r) // 三角箭头 - 必须传参 l:向左箭头 | r:向右箭头 | t:向上箭头 | b:向下箭头 12 .float() // 快速浮动 - 默认为 left || left: 向左浮动 | right:向右浮动 13 .fontC(d) // 字大小写 - 比传参数 d 为 大写 s 为首字母大写 14 .fontB() // 字体粗细 - 默认加粗 fontB(100) 传100 就是 变细 ---------------------- CSS3 方法 ---------------------- 01 .borderR() // 圆角设置 - 默认为 5px 02 .linearG(red,blue) // 线性渐变 - 两个颜色值 是开始到结束 目前支持 *上下* 渐变 03 .bgFull // 背景充满 - 背景等比例拉伸 使用 ：bgFull; 04 .css3Tansition() // 过度属性 - 默认两个值 前者是过渡动画时间 后者是过渡动画效果 使用 : .css3tansition(.4s,ease) //滤镜 05 .filterBlur() // 滤镜模糊 - 使用 ：.filterBlur(2px); 默认 5px 06 .filterGaryscale() // 滤镜灰度 - 使用 ：.filterGaryscale(1); 默认1 ★注意参数 是 0.1~1; 1代表全灰 07 .filterSepia() // 滤镜褐色 - 使用 ： .filterSepia(1); 默认1 ★注意参数 (同上) 08 .filterBrightness() // 滤镜亮度 - 使用 ： .filterBrightness(10); 默认5 ★注意参数 10代表100% 5代表50% 09 .filterHue() // 滤镜色相 - 使用 ： .filterHue(180deg); 默认180deg ★注意参数 0deg~360deg 10 .filterInvert() // 滤镜反色 - 使用 ： .filterInvert(1); 默认1 ★注意参数 0.1~1 1代表100% 11 .filterSaturate() // 滤镜饱和 - 使用 ： .filterSaturate(5); 默认5 ★注意参数 5 代表 50% 12 .filterContrast() // 滤镜饱和 - 使用 ： .filterContrast(1.5); 默认1.5 ★注意参数 1.5代表 15% ---------------------- 普通嵌套 ---------------------- 01 .vcenter // 垂直水平居中 02 .tHide // 文本超出隐藏省略 03 .blockFull // 块状元素 宽高100% 04 .block // 块状元素 没有设置宽高 05 .centerBlock // 左右居中 05 .clearfix // 清除浮动 ----------------------------------- */ .bgFull { background-position: center center; background-repeat: no-repeat; background-size: cover; } .vcenter { display: block; max-width: 100%; max-height: 100%; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } .tHide { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .blockFull { display: block; width: 100%; height: 100%; position: relative; } .block { display: block; position: relative; } .centerBlock { margin-left: auto; margin-right: auto; width: 1004px; } .clearfix { clear: both; } /* ============================================== CSS3 ANIMATION CHEAT SHEET ============================================== Made by Justin Aguilar www.justinaguilar.com/animations/ Questions, comments, concerns, love letters: justin@justinaguilar.com ============================================== */ /* ============================================== slideDown ============================================== */ .slideDown { animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown { 0% { transform: translateY(-100%); } 50% { transform: translateY(8%); } 65% { transform: translateY(-4%); } 80% { transform: translateY(4%); } 95% { transform: translateY(-2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); } 50% { -webkit-transform: translateY(8%); } 65% { -webkit-transform: translateY(-4%); } 80% { -webkit-transform: translateY(4%); } 95% { -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== slideUp ============================================== */ .slideUp { animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50% { transform: translateY(-8%); } 65% { transform: translateY(4%); } 80% { transform: translateY(-4%); } 95% { transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50% { -webkit-transform: translateY(-8%); } 65% { -webkit-transform: translateY(4%); } 80% { -webkit-transform: translateY(-4%); } 95% { -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== slideLeft ============================================== */ .slideLeft { animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(150%); } 50% { transform: translateX(-8%); } 65% { transform: translateX(4%); } 80% { transform: translateX(-4%); } 95% { transform: translateX(2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); } 50% { -webkit-transform: translateX(-8%); } 65% { -webkit-transform: translateX(4%); } 80% { -webkit-transform: translateX(-4%); } 95% { -webkit-transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideRight ============================================== */ .slideRight { animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0% { transform: translateX(-150%); } 50% { transform: translateX(8%); } 65% { transform: translateX(-4%); } 80% { transform: translateX(4%); } 95% { transform: translateX(-2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-150%); } 50% { -webkit-transform: translateX(8%); } 65% { -webkit-transform: translateX(-4%); } 80% { -webkit-transform: translateX(4%); } 95% { -webkit-transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideExpandUp ============================================== */ .slideExpandUp { animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes slideExpandUp { 0% { transform: translateY(100%) scaleX(0.5); } 30% { transform: translateY(-8%) scaleX(0.5); } 40% { transform: translateY(2%) scaleX(0.5); } 50% { transform: translateY(0%) scaleX(1.1); } 60% { transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80% { transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100% { transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30% { -webkit-transform: translateY(-8%) scaleX(0.5); } 40% { -webkit-transform: translateY(2%) scaleX(0.5); } 50% { -webkit-transform: translateY(0%) scaleX(1.1); } 60% { -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80% { -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100% { -webkit-transform: translateY(0%) scaleX(1); } } /* ============================================== expandUp ============================================== */ .expandUp { animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes expandUp { 0% { transform: translateY(100%) scale(0.6) scaleY(0.5); } 60% { transform: translateY(-7%) scaleY(1.12); } 75% { transform: translateY(3%); } 100% { transform: translateY(0%) scale(1) scaleY(1); } } @-webkit-keyframes expandUp { 0% { -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); } 60% { -webkit-transform: translateY(-7%) scaleY(1.12); } 75% { -webkit-transform: translateY(3%); } 100% { -webkit-transform: translateY(0%) scale(1) scaleY(1); } } /* ============================================== fadeIn ============================================== */ .fadeIn { animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } /* ============================================== expandOpen ============================================== */ .expandOpen { animation-name: expandOpen; -webkit-animation-name: expandOpen; animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes expandOpen { 0% { transform: scale(1.8); } 50% { transform: scale(0.95); } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } 100% { transform: scale(1); } } @-webkit-keyframes expandOpen { 0% { -webkit-transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { -webkit-transform: scale(1); } } /* ============================================== bigEntrance ============================================== */ .bigEntrance { animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } /* ============================================== hatch ============================================== */ .hatch { animation-name: hatch; -webkit-animation-name: hatch; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes hatch { 0% { transform: rotate(0deg) scaleY(0.6); } 20% { transform: rotate(-2deg) scaleY(1.05); } 35% { transform: rotate(2deg) scaleY(1); } 50% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes hatch { 0% { -webkit-transform: rotate(0deg) scaleY(0.6); } 20% { -webkit-transform: rotate(-2deg) scaleY(1.05); } 35% { -webkit-transform: rotate(2deg) scaleY(1); } 50% { -webkit-transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } /* ============================================== bounce ============================================== */ .bounce { animation-name: bounce; -webkit-animation-name: bounce; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease; -webkit-animation-timing-function: ease; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes bounce { 0% { transform: translateY(0%) scaleY(0.6); } 60% { transform: translateY(-100%) scaleY(1.1); } 70% { transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80% { transform: translateY(0%) scaleY(1.05) scaleX(1); } 90% { transform: translateY(0%) scaleY(0.95) scaleX(1); } 100% { transform: translateY(0%) scaleY(1) scaleX(1); } } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); } 60% { -webkit-transform: translateY(-100%) scaleY(1.1); } 70% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80% { -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100% { -webkit-transform: translateY(0%) scaleY(1) scaleX(1); } } /* ============================================== pulse ============================================== */ .pulse { animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } } /* ============================================== floating ============================================== */ .floating { animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== tossing ============================================== */ .tossing { animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } /* ============================================== pullUp ============================================== */ .pullUp { animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== pullDown ============================================== */ .pullDown { animation-name: pullDown; -webkit-animation-name: pullDown; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @keyframes pullDown { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullDown { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== stretchLeft ============================================== */ .stretchLeft { animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* ============================================== stretchRight ============================================== */ .stretchRight { animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } body { line-height: 31px; overflow-x: hidden; } .vcenter { position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 100%; max-height: 100%; display: block; vertical-align: middle; margin: auto; } .tHide { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .blockFull { display: block; width: 100%; height: 100%; position: relative; } .relative { position: relative; } .w1200 { width: 1200px; margin: 0 auto; padding: 0 6px; } /***********header*************/ em, i { font-style: normal; } .header { max-height: 115px; } .header .logo { display: block; padding: 20px 0; } @media (max-width: 1150px) { .header .logo img { height: 30px; } } .header .head_right span { display: block; text-align: right; margin: 10px 30px 10px 0; float: right; } @media (max-width: 1200px) { .header .head_right span { display: none; } } .header .head_right p { float: right; /*line-height: 20px;*/ margin-top: 10px; position: relative; right: 15px; } .header .head_right p a { display: inline-block; padding: 0 6px; } .header .head_right p a.atr { color: #f36e23; font-weight: bold; } @media (max-width: 1200px) { .header .head_right p { display: none; } } .header .head_right .nav li { float: left; text-align: center; width: 110px; padding: 0 12px; position: relative; z-index: 999; } .header .head_right .nav li > a { display: block; height: 58px; line-height: 22px; overflow: hidden; color: #444; font-size: 14px; } .header .head_right .nav li:hover > a { color: #f36e23; text-decoration: none; /* font-weight: bold;*/ } .header .head_right .nav li .navdown { width: 110px; position: absolute; left: 0; top: 58px; background: url("../png/nav_bj.png") repeat; display: none; } .header .head_right .nav li .navdown > a { display: block; height: 40px; line-height: 40px; color: #fff; font-size: 12px; overflow: hidden; padding:0 5px; } .header .head_right .nav li .navdown > a:hover { background: #f36e23; color: #fff; text-decoration: none; } .header .head_right .nav li.cur > a { color: #f36e23; /* font-weight: bold;*/ } @media (max-width: 1200px) { .header .head_right .nav { display: none; } } @media (max-width: 1200px) { .header { height: 70px; } } .head_right .navbtn { position: absolute; right: 15px; top: 30px; color: #ff7000; font-size: 24px; width: 24px; height: 24px; /*margin-top: 3px;*/ overflow: hidden; display: none; z-index: 999; } @media (max-width: 1200px) { .head_right .navbtn { display: block; } } @media (max-width: 500px) { .head_right .navbtn { margin-top: 0; } } /***********************banner***************************/ .banner { overflow: hidden; } .banner img { width: 100%; } .banner button { width: 38px; height: 38px; } .banner .slick-prev, .banner .slick-next { background-position: center center; background-repeat: no-repeat; background-size: cover; width: 38px; height: 38px; text-indent: 999px; overflow: hidden; z-index: 66; } .banner .slick-prev { left: 10%; } .banner .slick-prev:hover { } .banner .slick-next { right: 10%; } .banner .slick-next:hover { } /***********************index_about***************************/ .pad40 { padding: 40px 0 10px 0; font-size: 14px; } .amore { margin: 0 auto; width: 97px; height: 27px; font-size: 14px; color: #de7901; text-align: center; line-height: 27px; margin-top: 2%; } .amore a { color: #ef8201; width: 97px; height: 27px; display: block; overflow: hidden; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .amore a:hover { } .join04 { background: #f36e23; width: 156px; height: 36px; line-height: 36px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-top: 20px; -moz-border-radius: 8px; /* Firefox */ -webkit-border-radius: 8px; /* Safari 和 Chrome */ border-radius: 8px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ } .join04 a { width: 156px; height: 72px; display: block; overflow: hidden; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .join04 a:hover { } .news-more { height: 32px; line-height: 32px; width: 142px; overflow: hidden; } .news-more > a { width: 142px; height: 64px; display: block; overflow: hidden; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .news-more > a:hover { } .index_about { overflow: hidden; max-width: 1200px; margin: 0 auto; padding: 0 6px; } .index_about .inab_mid { width: 100%; padding-bottom: 20px; margin: 0 auto; } .index_about .inab_mid span { display: block; line-height: 25px; } .index_about .inab_mid .jzimg { display: block; width: 83%; overflow: hidden; margin: 20px auto 10px; } @media (max-width: 800px) { .index_about .inab_left { margin-top: 5%; } .index_about .inab_right { } .index_about .inab_mid { width: 100%; } } @media (max-width: 600px) { .index_about .inab_left { } .index_about .inab_mid { width: 100%; } } /***********************index_product***************************/ .food { width: 100%; height: auto; padding: 20px 0; overflow: hidden; background: #f3f3f3; } .title { width: 100%; height: auto; text-align: center; color: #000; padding: 33px 0 40px 0; margin-bottom: 40px; } .title h3 { font-size: 30px; color: #000; font-weight: bold; } .title p { font-size: 14px; padding: 10px 0; border-bottom:1px solid #ccc; } .jzimg img { vertical-align: middle; max-height: 100%; max-width: 100%; } .jzimg i { display: inline-block; height: 100%; vertical-align: middle; } .food_c ul li { position: relative; overflow: hidden; margin: 0 auto 10px; width:298px; } .food_c ul li a { display: block; } .food_c ul li a .jzimg { display: block; text-align: center; width: 298px; height: 200px; margin: 0 auto; position: relative; } .food_c ul li a .food_m { width: 100%; height: 100%; position: absolute; background: url(); left: -100%; top: 0; } .food_c ul li a .food_m h3 { margin-top: 78px; margin-bottom: 15px; font-size: 18px; color: #fff; text-align: center; overflow:hidden;white-space: nowrap; text-overflow: ellipsis; } .food_c ul li a .food_m span { font-size: 12px; padding: 3px 14px; border: 1px solid #fff; color: #fff; text-align: center; display: block; width: 78px; height: 25px; overflow: hidden; margin: 0 auto; line-height: 17px; } .food_c ul li a:hover .food_m { left: 0; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; width: 100%; height: 100%; top: 0; } .food_c ul li:hover .jzimg img { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } /***********************index_join***************************/ .join { background: #f36e23; overflow: hidden; } .pad20 { padding-bottom: 30px; } .joinlist { background: #fff; padding-top: 10px; padding-bottom: 30px; padding-left: 30px; } .joinlist li { width: 240px; overflow: hidden; text-align: center; } .joinlist li a { display: block; } .joinlist li a .jzimg { display: block; text-align: center; width: 240px; height: 240px; overflow: hidden; position: relative; margin: 0 auto; } .joinlist li a .jzimg em { display: block; position: absolute; left: 0; top: 0; width: 240px; height: 240px; } .joinlist li a h3 { font-size: 20px; font-weight: bold; color: #000; margin-top: 20px; } .joinlist li a p { font-size: 14px; padding: 10px 0; color: #666; } .joinlist li:hover .jzimg img { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .joinlist li:hover h3 { color: #f36e23; } .joinlist li:hover p { color: #000; } @media (max-width: 600px) { .joinlist li { width: 240px; margin: 0 auto; } } .jm_dian { padding-bottom: 50px; background: #f3f3f3; } .jiam_list { overflow: hidden; margin-top: 30px; } .jiam_list .jzimg { display: block; text-align: center; width: 236px; height: 160px; overflow: hidden; margin: 0 auto 20px; cursor: pointer; } .jiam_list .jzimg:hover img { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .join-tit { text-align: center; padding: 30px 0; } .join-tit p { overflow: hidden; width: 70%; margin: 0 auto; min-height:50px; text-align: center; } .join-tit p span { color: #fff; font-size: 36px; margin-top: 6px; display: block; } .join-tit b { display: block; font-weight: normal; font-size: 18; color: #fff; clear: both; } .jin li { background: url("../png/index_bj.png") no-repeat; width: 199px; height: 197px; text-align: center; margin: 0 auto; } .jin li span { display: block; font-size: 16px; width: 160px; margin: 20px auto 0; padding-right: 8px; height: 55px; overflow: hidden; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; } .jin li img{ width:80px; height: 80px; height: auto; margin-top: 30px; } .jin li:hover { transition: All 0.8s ease-in-out; -webkit-transition: All 0.8s ease-in-out; -moz-transition: All 0.8s ease-in-out; -o-transition: All 0.8s ease-in-out; transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); } @media (max-width: 1220px) { .join-tit p { overflow: hidden; width: 88%; margin: 0 auto; } .join-tit p img { display: block; float: left; width: 80px; height: 80px; } .join-tit p span { float: left; color: #fff; font-size: 50px; margin-top: 6px; display: block; } .join-tit p span strong { color: #fef900; } .join-tit p span em { color: #fef900; font-weight: bold; } .join-tit b { display: block; font-weight: normal; font-size: 40px; color: #fef900; clear: both; } } @media (max-width: 1000px) { .join-tit p { width: 60%; } .join-tit p img { width: 10%; height: 10%; } .join-tit p span { float: left; color: #fff; font-size: 22px; margin-top: 5px; display: block; } .join-tit b { display: block; font-weight: normal; font-size: 20px; color: #fef900; clear: both; } } @media (max-width: 600px) { .join-tit p img { display: none; } .join-tit b { display: none; } } .jiam_list dl{ width:49%; height: auto; float: left; } .jiam_list dl:nth-child(1){ margin-right: 1%; } .jiam_list dl:nth-child(2){ margin-left: 1%; } .jiam_list dl dt{ width: 100%; height: auto; border-bottom: 2px solid #000; overflow: hidden; margin-bottom: 20px; } .jiam_list dl dt img{ width:100%; height: auto; display: block; margin-bottom: 20px; } .jiam_list dl dt p{ display: inline-block; font-size: 20px; font-weight: bold; } .jiam_list dl dt span{ font-size: 18px; float: right; font-weight: normal; } .jiam_list dl dd{ margin-bottom: 20px; font-size: 18px; overflow: hidden; } .jiam_list dl dd time{ float: right; } .jiam_list dl dd:hover{ color:#fc6802; } /***********************index_news***************************/ .index-news .index-join { font-size: 12px; } .index-news .index-join .jzimg { display: block; text-align: center; max-width: 960px; max-height: 420px; overflow: hidden; width: 50%; } .index-news .index-join .in-left { width: 50%; float: left; height: 394px; overflow: hidden; background: #f8e808; color:#000; padding-left: 18%; } .index-news .index-join .in-left h2{ font-size: 24px; display: block; padding: 40px 0 20px 0; font-weight: normal; } .index-news .index-join .in-left form{ width:80%; height: auto; } .index-news .index-join .in-left form input{ width:100%; margin-bottom: 20px; font-size: 18px; line-height: 40px; border: 0; padding-left: 10px; height: 40px; } .index-news .index-join .in-left form textarea{ width:100%; height: 100px; margin-bottom: 20px; font-size: 18px; line-height: 20px; resize:none; border: 0; padding-left: 10px; } .index-news .index-join .in-left form .submit{ width: 100px; background: #000; color:#fff; padding-left: 0; } .index-news .index-join .in-right { width: 50%; float: right; height: 394px; overflow: hidden; background: #fc6802; color:#fff } .index-news .index-join .in-right strong { font-size: 24px; display: block; padding: 40px 0 20px 45px; font-weight: normal; } .index-news .index-join .in-right .join03 { padding: 0 0 0 45px; line-height: 30px; max-width: 490px; overflow: hidden; } .index-news .index-join .in-right .join03 span { font-size: 14px; display: block; color: #f36e23; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: bold; } .index-news .index-join .in-right .join03 p { margin-bottom: 20px; font-size: 13px; } .index-news .in-qyxw .qy-top { width: 50%; height: 394px; overflow: hidden; float: left; } .index-news .in-qyxw .qy-top .qy-wenzi { max-width: 590px; text-align: left; float: right; } .index-news .in-qyxw .qy-top .qy-wenzi strong { font-size: 24px; display: block; padding: 40px 110px 0px 0px; font-weight: normal; } .index-news .in-qyxw .qy-top .qy-wenzi .news05 { padding: 15px 110px 20px 0px; } .index-news .in-qyxw .qy-top .qy-wenzi .news05 ul li { text-overflow: ellipsis; white-space: nowrap; line-height: 35px; height: 35px; overflow: hidden; margin: 0 30px 0 0; padding-left: 10px; width: 100%; } .index-news .in-qyxw .qy-top .qy-wenzi .news05 ul li a.wz { font-size: 14px; color: #444; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%; } .index-news .in-qyxw .qy-top .qy-wenzi .news05 ul li:hover a { color: #000; } .index-news .in-qyxw .jzimg { display: block; text-align: center; max-width: 960px; max-height: 420px; overflow: hidden; width: 50%; } @media (max-width: 1200px) { .index-news .index-join { } .index-news .index-join .jzimg { display: none; left: 0; } .index-news .index-join .in-right .join02 { width: 1100px; margin: 0 auto; } .index-news .index-join .in-right .join02 .join03 { max-width: 1100px; overflow: hidden; } .index-news .in-qyxw .qy-top { width: 100%; } .index-news .in-qyxw .qy-top .qy-wenzi { max-width: 1100px; margin: 0 auto; float: none; padding-left: 40px; } .index-news .in-qyxw .qy-top .qy-wenzi strong { font-size: 24px; display: block; padding: 40px 110px 0px 0px; font-weight: normal; } .index-news .in-qyxw .qy-top .qy-wenzi .news05 { padding: 25px 110px 20px 0px; } .index-news .in-qyxw .jzimg { display: none; } } /***********************link***************************/ .links { padding: 10px 0; overflow: hidden; background: #f3f3f3; } .links a { display: inline-block; padding: 0 10px; } /***********************foot_menu***************************/ .footer-nav-frame { background: #f6f6f6; border-top: 1px solid #e6e6e6; padding-top: 40px; } .footer-nav-frame .footer-nav { margin: 0 auto; padding-bottom: 30px; } .footer-nav-frame .footer-nav .navigation { width: 40%; } @media (max-width: 880px) { .footer-nav-frame .footer-nav .navigation { width: 60%; } } @media (max-width: 720px) { .footer-nav-frame .footer-nav .navigation { width: 55%; } } @media (max-width: 540px) { .footer-nav-frame .footer-nav .navigation { width: 100%; } } .footer-nav-frame .footer-nav .navigation ul li { float: left; width: 33.3%; padding-left: 40px; } @media (max-width: 880px) { .footer-nav-frame .footer-nav .navigation ul li { padding-left: 20px; } } @media (max-width: 720px) { .footer-nav-frame .footer-nav .navigation ul li { padding-left: 10px; } } @media (max-width: 640px) { .footer-nav-frame .footer-nav .navigation ul li { padding: 0; } } @media (max-width: 540px) { .footer-nav-frame .footer-nav .navigation ul li { padding-left: 9%; } } @media (max-width: 440px) { .footer-nav-frame .footer-nav .navigation ul li { padding-left: 7%; } } @media (max-width: 320px) { .footer-nav-frame .footer-nav .navigation ul li { padding-left: 5%; } } .footer-nav-frame .footer-nav .navigation ul li .trues, .footer-nav-frame .footer-nav .navigation ul li .true{ color: #838383; line-height: 27px; font-size: 12px; background: url() 0 center no-repeat; display: block; padding-left: 10px; } .footer-nav-frame .footer-nav .navigation ul li .true:hover { text-decoration: underline; text-decoration: none; color: #f36e23; } .footer-nav-frame .footer-nav .navigation ul li .trues:hover { text-decoration: underline; text-decoration: none; color: #f36e23; } .footer-nav-frame .footer-nav .navigation ul li .true { color: #333333; font-size: 14px; line-height: 20px; font-weight: bold; background: none; padding: 0; } .footer-nav-frame .footer-nav .we { width: 18%; } @media (max-width: 880px) { .footer-nav-frame .footer-nav .we { width: 40%; } } @media (max-width: 720px) { .footer-nav-frame .footer-nav .we { width: 45%; } } @media (max-width: 540px) { .footer-nav-frame .footer-nav .we { width: 100%; clear: both; margin-top: 20px; } } .footer-nav-frame .footer-nav .we .fxwm { width: 50%; padding-left: 40px; } @media (max-width: 880px) { .footer-nav-frame .footer-nav .we .fxwm { padding-left: 20px; } } @media (max-width: 640px) { .footer-nav-frame .footer-nav .we .fxwm { padding: 0; width: 40%; } } @media (max-width: 540px) { .footer-nav-frame .footer-nav .we .fxwm { width: 50%; padding-left: 9%; } } @media (max-width: 440px) { .footer-nav-frame .footer-nav .we .fxwm { padding-left: 7%; } } @media (max-width: 320px) { .footer-nav-frame .footer-nav .we .fxwm { padding-left: 5%; } } .footer-nav-frame .footer-nav .we .fxwm a.jiathis { color: #333333; font-size: 14px; line-height: 20px; font-weight: bold; margin-right: 3px; margin-left: 0; } .footer-nav-frame .footer-nav .we .fxwm a { font-size: 12px; line-height: 27px; color: #838383; margin-left: 5px; } .footer-nav-frame .footer-nav .we .fxwm a:hover { text-decoration: underline; } .footer-nav-frame .footer-nav .we .lxwm { width: 100%; } @media (max-width: 640px) { .footer-nav-frame .footer-nav .we .lxwm { width: 100%; } } @media (max-width: 540px) { .footer-nav-frame .footer-nav .we .lxwm { width: 100%; } } .footer-nav-frame .footer-nav .we .lxwm a { display: block; color: #333333; font-size: 14px; line-height: 20px; font-weight: bold; } .footer-nav-frame .footer-nav .we .lxwm a:hover { text-decoration: underline; color:#f36e23; } .footer-nav-frame .footer-nav .we .lxwm span { display: block; color: #565567; font-size: 14px; line-height: 24px; margin-top: 10px; } .footer-nav-frame .footer-nav p a{ color: #95847c; font-size: 30px; line-height: 30px; margin-top: 20px; font-weight: bold; } .footer-nav-frame .footer-nav p a:hover { text-decoration: underline; color:#f36e23; } @media (max-width: 880px) { .footer-nav-frame .footer-nav p { font-size: 20px; line-height: 24px; } } .footer-nav-frame .footer-nav .qr-code { float: right; margin-right: 48px; width: 24%; padding-right: 1%; } @media (max-width: 880px) { .footer-nav-frame .footer-nav .qr-code { float: left; width: 100%; margin-top: 20px; padding-left: 2%; } } @media (max-width: 640px) { .footer-nav-frame .footer-nav .qr-code { padding-left: 0; } } @media (max-width: 540px) { .footer-nav-frame .footer-nav .qr-code { padding-left: 8%; } } @media (max-width: 440px) { .footer-nav-frame .footer-nav .qr-code { padding-left: 6%; } } @media (max-width: 340px) { .footer-nav-frame .footer-nav .qr-code { padding-left: 3%; } } @media (max-width: 327px) { .footer-nav-frame .footer-nav .qr-code { padding-left: 2%; } } @media (max-width: 320px) { .footer-nav-frame .footer-nav .qr-code { padding-left: 1%; } } .footer-nav-frame .footer-nav .qr-code .codel { float: left; } .footer-nav-frame .footer-nav .qr-code .coder { float: right; } @media (max-width: 880px) { .footer-nav-frame .footer-nav .qr-code .coder { float: left; margin-left: 20px; } } .footer-nav-frame .footer-nav .qr-code .codel, .footer-nav-frame .footer-nav .qr-code .coder { width: 48%; max-width: 131px; } .footer-nav-frame .footer-nav .qr-code .codel .wenxin, .footer-nav-frame .footer-nav .qr-code .coder .wenxin { background-position: center center; background-repeat: no-repeat; background-size: cover; border: 1px solid #dcdbdb; } .footer-nav-frame .footer-nav .qr-code .codel i, .footer-nav-frame .footer-nav .qr-code .coder i { display: block; padding-bottom: 100%; } .footer-nav-frame .footer-nav .qr-code .codel p, .footer-nav-frame .footer-nav .qr-code .coder p { text-align: center; color: #343331; font-size: 14px; line-height: 32px; } .bgFull { background-position: center center; background-repeat: no-repeat; background-size: cover; } .copyright-frame { border-top: 2px solid #545454; background: #686868; padding: 12px 0; } .copyright-frame .copyright { color: #bfbfbf; line-height: 27px; font-size: 12px; text-align: center; } .copyright-frame .copyright p { margin-bottom: 0; } .copyright-frame .copyright a { color: #bfbfbf; } .copyright-frame .copyright a:hover { text-decoration: underline; } .copyright-frame .copyrightl { float: left; padding-left: 3%; width:100%; } .copyright-frame .copyrightl a { padding-left: 15px; } .copyright-frame .copyrightl a:hover { color: #f36e23; text-decoration: none; } @media (max-width: 720px) { .copyright-frame .copyrightl { clear: both; text-align: center; padding: 0; width: 100%; } } .copyright-frame .copyrightr { float: right; padding-right: 3%; margin-right: 30px; } @media (max-width: 720px) { .copyright-frame .copyrightr { clear: both; text-align: center; padding: 0; width: 100%; } } @media (max-width: 1200px) { .footer-nav-frame { display: none; } } /****************about*****************/ .nei-main .ny-caidan .about_menu { /*width: 300px;*/ } .nei-main .ny-caidan .about_menu a { display: block; float: left; } .nei-main .ny-caidan .about_menu i { display: block; float: left; margin: 0px 10px 0 10px; } .ny-caidan { background: #f7f7f7; margin-bottom: 40px; min-height: 50px; } .ny-caidan .promenu { margin-top: 8px; float: left; margin-left: 24px; } .ny-caidan .promenu div{ float: left; } .ny-caidan .promenu a { display: block; float: left; line-height: 34px; height: 34px; max-width: 90px; text-align: center; overflow: hidden; font-size: 14px; margin: 0 auto; } .ny-caidan .promenu a.m_gao { color: #f36e23; } .ny-caidan .promenu i { display: block; float: left; margin: 0px 10px 0 10px; } .ny-caidan .promenu .slick-prev, .ny-caidan .promenu .slick-next { width: 18px; height: 18px; margin-top: -9px; } .ny-caidan .promenu .slick-prev { } .ny-caidan .promenu .slick-next { } @media (max-width: 980px) { .mbx { float: left; width: 100%; } } .mbx { line-height: 30px; color: #666; font-size: 13px; margin-top: 10px; float: right; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; max-width: 70%; } .mbx a { font-size: 13px; } .mbx em { color: #f36e23; } .nytitle { text-align: center; color: #818181; margin-bottom: 40px; } .nytitle strong { display: block; font-weight: normal; font-size: 33px; text-transform: uppercase; font-family: arial; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; } .nytitle p { overflow: hidden; text-align: center; font-size: 15px; color: #f36e23; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; } .nytitle p i { display: inline-block; width: 36px; height: 1px; padding-top: 5px; } .nytitle p em { max-width:50%; display: inline-block; margin: 0 6px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; } .bt-a { border-bottom: 1px solid #f36e23; text-align: right; color: #f36e23; font-size: 16px; padding-bottom: 6px; margin-bottom: 6px; } .mad30 { margin-top: 30px; } .pad50 { padding-bottom: 50px; } .con-neir .a-left { width: 55%; color: #393939; margin-top: 6px; } .con-neir .a-left span { display: block; } .con-neir .a-img { float: right; width: 40%; } @media (max-width: 1200px) { .con-neir .a-left { width: 100%; } .con-neir .a-img { display: none; } } .con-neir .about-mid ul li { width: 200px; overflow: hidden; margin: 0 auto; } .con-neir .about-mid ul li .bt-a { border-bottom: none; text-align: left; } .con-neir .about-mid ul li .jzimg { display: block; text-align: center; width: 221px; height: 187px; overflow: hidden; } .prolist { margin: 0 20px 60px 20px; overflow: hidden; text-align: center; } .prolist a{ display: inline-block; margin: 5px auto; width: 200px; /*float: left;*/ } @media(max-width:500px){ .prolist a{ width: 115px; } } .prolist a { color: #616161; margin-left: 5px; text-decoration: none; background-color: #ddd; display: inline-block; text-align: center; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; } .prolist a.gao, .prolist a:hover { transition: All 0.3s ease-in-out; -webkit-transition: All 0.3s ease-in-out; -moz-transition: All 0.3s ease-in-out; -o-transition: All 0.3s ease-in-out; transition: All 0.5s ease-in-out; background: #f36e23; color: #fff; } .prolist .slick-prev, .prolist .slick-next { width: 18px; height: 18px; } .prolist .slick-prev { } .prolist .slick-prev:hover { } .prolist .slick-next { } .prolist .slick-next:hover { } .list-pro ul { margin: 0 auto; padding-left: 3px; width: 880px;s } .list-pro ul li { height: 270px; margin-bottom: 40px; overflow: hidden; width: 33%; } .list-pro ul li .jzimg { display: block; height: 163px; overflow: hidden; text-align: center; width: 100%; } .list-pro ul li .pro-wz .pro-name { display: block; border-bottom: #dadada solid 1px; overflow: hidden; font-size: 14px; color: #353535; line-height: 50px; padding-left: 8px; margin-top: 10px; } .list-pro ul li .pro-wz .pro-name em { display: block; text-align: center; max-width: 180px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; float: left; } .list-pro ul li .pro-wz .pro-name b { display: block; float: right; background: url("../jpg/sub_cp.jpg") no-repeat; width: 35px; height: 26px; margin-top: 10px; } .list-pro ul li .pro-wz span { display: block; clear: both; line-height: 33px; color: #ccc; padding-left: 6px; font-size: 13px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } @media (max-width: 1200px) { .list-pro ul li { width: 31.2%; overflow: hidden; margin-right: 20px; } } @media (max-width: 992px) { .list-pro ul li { margin-right: 9px; } } @media (max-width: 800px) { .list-pro ul li { width: 48%; } } @media (max-width: 500px) { .list-pro ul li { width: 100%; } } .list-pro ul li:hover .jzimg img { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .list-pro ul li:hover .pro-name { color: #f36e23; } .list-pro ul li:hover .pro-name b { background: url("../jpg/sub_cp01.jpg") no-repeat; } /**********page************/ .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .pagination > li { display: inline; } .pagination > li > a, .pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #f36e23; text-decoration: none; background-color: #fff; border: 1px solid #ddd; } .pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { color: #23527c; background-color: #eee; border-color: #ddd; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { z-index: 2; color: #fff; cursor: default; background-color: #f36e23; border-color: #f36e23; } .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd; } /*****************productshow**********/ .proshow-top .jzimg { width: 50%; float: left; } .proshow-top .pros-right { width: 46%; margin-top: 6px; float: right; } .proshow-top .pros-right h1 { font-size: 30px; line-height: 30px; margin-bottom: 15px; } @media (max-width: 1100px) { .proshow-top .jzimg { width: 100%; } .proshow-top .pros-right { width: 100%; margin-top: 20px; } } .prosow-bot { margin-top: 40px; } .prosow-bot .probtn { background: #f7f7f7; border-bottom: 2px solid #f36e23; overflow: hidden; margin-bottom: 30px; } .prosow-bot .probtn span { display: block; float: left; font-size: 14px; color: #666666; padding: 0 30px; text-align: center; cursor: pointer; } .prosow-bot .probtn span:hover, .prosow-bot .probtn span.car { background: #f36e23; color: #fff; } .prosow-bot .protab .propub { display: none; } .prosow-bot .protab .propub .propub-wz span { /*display: block;*/ } .product-xg .xg-bt { font-size: 23px; border-bottom: 1px solid #dddddd; padding-bottom: 8px; margin-bottom: 28px; } .product-xg .xg-list li { margin: 0 auto; width: 260px; text-align: center; } .product-xg .xg-list li .jzimg { display: block; width: 260px; height: 300px; overflow: hidden; text-align: center; width: 100%; line-height: 300px; } .product-xg .xg-list li span { display: block; font-size: 16px; height: 35px; line-height: 35px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .product-xg .xg-list li:hover .jzimg img { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product-xg .xg-list .slick-prev, .product-xg .xg-list .slick-next { width: 38px; height: 38px; } .product-xg .xg-list .slick-prev { left: 10px; } .product-xg .xg-list .slick-next { right: 10px; } .return { display: block; background: #f7f7f7; width: 100px; height: 40px; line-height: 40px; text-align: center; margin: 30px 0; font-size: 15px; } .return:hover { color: #fff; background: #f36e23; } /******************feedback***********/ .message { padding-top: 30px; } .message .gray { color: #9c9c9c; } .message li { margin-top: 15px; font-size: 12px; } .message li span { width: 23%; text-align: right; display: inline-block; vertical-align: top; color: #5b5f6b; } .message li input { border: solid 1px #d9d9d9; height: 40px; line-height: 40px; text-indent: 6px; width: 70%; margin-bottom: 20px; } .message li textarea { border: solid 1px #d9d9d9; width: 70%; height: 100px; padding-left: 5px; margin-bottom: 20px; } .message li input[type="reset"] { background: #999999; color: #fff; width: 90px; height: 28px; line-height: 24px; text-align: center; border: 0; margin-right: 10px; margin-left: -2px; } .message li input[type="submit"] { background: #999999; color: #fff; width: 90px; height: 28px; line-height: 24px; text-align: center; border: 0; margin-right: 10px; margin-left: -2px; } .message li input[type="reset"]:hover { background: #f36e23; } .message li input[type="submit"]:hover { background: #f36e23; } .message li #proback { background: #f36e23; } .message li em { font-style: normal; color: #cd0000; padding-left: 5px; } .nextdiv { margin-top: 30px; border-bottom: 1px solid #c6c6c6; border-top: 1px solid #c6c6c6; -webkit-transition: All 0.4s ease; -moz-transition: All 0.4s ease; -o-transition: All 0.4s ease; transition: All 0.4s ease; } .nextdiv p { float: left; width: 50%; *width: 42%; padding: 1% 3%; } .nextdiv p a{ width: 80%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; float:right; } .nextdiv .p2 { border-left: 1px solid #c6c6c6; } @media (max-width: 640px) { .nextdiv p { width: 100%; float: none; font-size: 13px; height: 32px; line-height: 32px; padding: 0px; } .nextdiv p a{ width: 80%; } .nextdiv .p2 { border-left: none; border-top: 1px solid #c6c6c6; } } /***************honor***********/ .honor { padding-bottom: 30px; } .honor .honortext { width: 196px; float: left; margin-right: 32px; margin-top: 30px; } @media (max-width: 1024px) { .honor .honortext { width: 25%; margin-right: 0; padding: 0.6%; } } @media (max-width: 640px) { .honor .honortext { width: 33%; margin-right: 0; padding: 0.7%; } } @media (max-width: 400px) { .honor .honortext { width: 50%; margin-right: 0; padding: 0.7%; } } .honor .honortext div a { display: block; background: #f6f6f6; border: 1px solid #e7e7e7; padding: 4px; } .honor .honortext div a i { display: block; background-position: center center; background-repeat: no-repeat; background-size: cover; padding-bottom: 74.884%; } .honor .honortext div p { text-align: center; color: #565656; font-size: 12px; line-height: 20px; padding-top: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /***********************news***************************/ .mad20 { margin-top: 60px; } .news_list { width: 100%; } .news_list li { border-top: 1px dashed #bfbfbf; height: 162px; } .news_list li .news_top { width: 233px; border-right: 1px solid #bfbfbf; height: 162px; position: relative; } .news_top .jzimg { display: block; text-align: center; max-width: 193px; height: 120px; overflow: hidden; float: left; margin-top: 20px; width: 100%; } .news_list li .news_top em { display: block; background: url() no-repeat; width: 13px; height: 13px; float: right; position: absolute; right: -7px; top: -5px; } .news_con { width: 70%; height: 81px; overflow: hidden; margin-top: 40px; float: left; margin-left: 20px; } .news_con .n_two { height: 18px; overflow: hidden; margin-bottom: 19px; line-height: 18px; } .n_two .n_name { display: block; float: left; width: 85%; font-size: 16px; color: #282828; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .n_two i { display: block; float: right; font-size: 13px; width: 100px; text-align: center; } .n_three span { width: 80%; overflow: hidden; float: left; display: block; line-height: 23px; font-size: 14px; color: #949494; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } .n_three .news_more { display: block; float: right; width: 100px; height: 36px; line-height: 36px; margin-top: 8px; border: 1px solid #c9ced2; text-align: center; } .news_list li:hover .news_more { background: #f36e23; border: 1px solid #f36e23; color: #fff; transition: All 0.3s ease-in-out; -webkit-transition: All 0.3s ease-in-out; -moz-transition: All 0.3s ease-in-out; -o-transition: All 0.3s ease-in-out; transition: All 0.5s ease-in-out; } .news_list li:hover .n_name { color: #f36e23; transition: All 0.3s ease-in-out; -webkit-transition: All 0.3s ease-in-out; -moz-transition: All 0.3s ease-in-out; -o-transition: All 0.3s ease-in-out; transition: All 0.5s ease-in-out; } .news_list li:hover .jzimg img { filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 1000px) { .news_top .jzimg { display: none; } .news_list li .news_top { width: 7px; } .n_two .n_name { width: 60%; } #newszj ul li .news_con { width: 92%; } } @media (max-width: 740px) { #newszj ul li .news_con { width: 92%; } #newszj ul li .n_three span { width: 70%; } } @media (max-width: 500px) { #newszj ul li .n_three span { width: 60%; } } @media (max-width: 400px) { .news_list li .news_top { display: none; } } /***********************news_show***************************/ .news_show { margin: 0 auto; overflow: hidden; } .news_show h1 { text-align: center; font-size: 22px; color: #000; font-weight: normal; margin-bottom: 30px; } .news_show em { display: block; line-height: 32px; background: #eeeeee; text-align: center; font-size: 13px; color: #878787; margin-bottom: 28px; } .news_show em span{ margin: 0 10px; } .news_show em time{ margin: 0 10px; } .news_show span { /* display: block; font-size: 14px; color: #545454; line-height: 32px; text-indent: 2em; margin-bottom: 18px; */ } .news_menu p { min-width: 184px; } .ntp { display: block; margin: 0 auto; padding-bottom: 20px; } .products_other_title { font-size: 18px; color: #333; border-bottom: 3px double #c6c6c6; padding-bottom: 10px; margin: 20px 0; padding-top: 20px; clear: both; } .news_other { margin-top: 20px; padding: 18px; background: #f7f7f7; color: #666; } .news_other li { float: left; width: 50%; height: 30px; line-height: 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; background: url() no-repeat left center; padding-left: 12px; } .news_other li:hover a { color: #f36e23; } .news_other a { color: #666; display: block; max-width: 90%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /***********************job***************************/ .joblist { padding-top: 15px; } .joblist .col-xs-6 { background: #fff; padding-bottom: 20px; border: solid 20px #f5f5f5; } .joblist .col-xs-6 h4 { font-weight: normal; font-size: 1.2rem; height: 40px; line-height: 4rem; overflow: hidden; margin: 10px 0 10px 0; border-bottom: solid 1px #eee; } .joblist .col-xs-6 h4 a { color: #4c4c4c; font-size: 1.6rem; display: block; overflow: hidden; height:40px; } .joblist .col-xs-6 h4 span { float: right; font-size: 1.3rem; margin-left: 5px; } .joblist .col-xs-6 p { margin-top: 10px; font-size: 1.3rem; height: 48px; overflow: hidden; line-height: 24px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } .joblist .col-xs-6 .jmore { float: right; display: inline-block; background: #dbdbdb; width: 80px; height: 30px; text-align: center; line-height: 30px; margin-top: 8px; } .joblist .col-xs-6 .jmore:hover { background: #f36e23; transition: All 0.3s ease-in-out; -webkit-transition: All 0.3s ease-in-out; -moz-transition: All 0.3s ease-in-out; -o-transition: All 0.3s ease-in-out; transition: All 0.5s ease-in-out; color: #fff; } @media (max-width: 760px) { .joblist div.jobone { width: 100%; } } .jobshow .col-xs-4 { margin: 0; padding: 0; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .jmore-2 { display: inline-block; background: #dbdbdb; width: 120px; height: 40px; text-align: center; line-height: 40px; font-size: 1.4rem; } .jmore-2:hover { background: #f36e23; color: #fff; transition: All 0.3s ease-in-out; -webkit-transition: All 0.3s ease-in-out; -moz-transition: All 0.3s ease-in-out; -o-transition: All 0.3s ease-in-out; transition: All 0.5s ease-in-out; } .jontit { padding: 30px 0 10px 0; border-bottom: solid 1px #eee; margin-bottom: 20px; } .acontent .row { margin: 0; } @media (max-width: 480px) { .jobshow .jshowtit { width: 100%; } } .jobshenq .row { margin: 0; } .jobsq .col-xs-4{ margin: 0; padding: 0; margin-top: 20px; } .jobsq .col-xs-4 span { display: inline-block; width: 80px; text-align: right; font-size: 1.4rem; } .jobsq .col-xs-4 input { width: 60%; border: solid 1px #e6e6e6; height: 36px; line-height: 36px; border-radius: 1px; } .jobsq .col-xs-12 { margin: 0; padding: 0; margin-top: 20px; } .jobsq .col-xs-12 span { display: inline-block; width: 80px; text-align: right; font-size: 1.4rem; vertical-align: top; } .jobsq .col-xs-12 input { width: 10%; border: solid 1px #e6e6e6; height: 36px; line-height: 36px; border-radius: 1px; } .jobsq .col-xs-12 textarea { width: 86.5%; border: solid 1px #e6e6e6; height: 100px; line-height: 24px; border-radius: 1px; } .jobsq-btn input[type="submit"] { background: #f36e23; color: #fff; width: 90px; height: 28px; line-height: 24px; text-align: center; border: 0; margin-right: 10px; margin-left: -2px; } .jobsq-btn #proback { background: #f36e23; } .jobsq-btn input[type="reset"] { background: #999999; color: #fff; width: 90px; height: 28px; line-height: 24px; text-align: center; border: 0; margin-right: 10px; margin-left: -2px; } .jobsq-btn input { border: solid 1px #d9d9d9; height: 30px; line-height: 30px; text-indent: 6px; width: 70%; } /********contact******/ .contact { padding: 8% 0px 6%; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease; transition: All 0.3s ease; } .contact .con { text-align: center; line-height: 24px; font-size: 15px; } .contact .con .p1 { color: #484848; font-size: 24px; } .contact .con .p2 { font-size: 12px; padding-top: 1%; margin-bottom: 5%; } .contact .con .p3 span { display: inline-block; margin: 0px 2%; } .contact .map_box { margin-top: 5%; width: 100%; height: 300px; position: relative; } .contact #allmap { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .contact .anchorBL { display: none; } @media (max-width: 1000px) { .contact .con .p1 { font-size: 20px; } } @media (max-width: 1000px) { .contact .con .p1 { font-size: 18px; } } /*****************************sitemap******************************/ .map { width: 100%; margin: 0 auto; } .map dl { border: #d6dbe1 solid 1px; border-top: #f2aa72 solid 2px; border-bottom: none; margin: 20px 0 20px 0; } .map dl:hover { background: #f5f8fa; } .map dl:hover dt a { color: #f36e23; } .map dt { background: #fcfcfc; color: #0053a8; font-size: 16px; line-height: 40px; border-bottom: #d6dbe1 solid 1px; padding: 0 0 0 20px; } .map dt a { color: #333; } .map dt a:hover { color: #003e7e; } .map dt img { margin-left: 20px; vertical-align: middle; } .map dd { font-size: 12px; line-height: 30px; overflow: hidden; padding-top: 10px; } .map dd .p2 { padding: 0 0 0 20px; clear: both; } .map dd .p2 a { color: #78320b; font-weight: bold; line-height: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .map dd .p2 a:hover { color: #f36e23; } .map dd div { clear: both; overflow: hidden; line-height: 30px; border-bottom: #d6dbe1 solid 1px; padding: 0px 20px 10px 10px; } .map dd div a { color: #333; float: left; padding: 0 10px 0 10px; } .map dd div a:hover { color: #003e7e; background: #f36e23; color: #fff; } /*==========================*/ .pagination span, .pagination a{ background-color: #fff; border: 1px solid #ddd; color: #f36e23; float: left; line-height: 1.42857; margin-left: -1px; padding: 6px 12px; position: relative; text-decoration: none; font-size:14px; } .pagination .page-cur{ background-color: #fff; border: 1px solid #ddd; float: left; line-height: 1.42857; margin-left: -1px; padding: 6px 12px; position: relative; text-decoration: none; background-color: #f36e23; border-color: #f36e23; color: #fff; cursor: default; z-index: 2; } #contact-form .validate-on{ border: 1px solid red; box-shadow: 0 0 1px #ff0000; } @media (min-width:1025px) { #pnav{display:none;} } @media (max-width:1024px) { .list-pro ul li .jzimg { display: block; width: 260px; overflow: hidden; text-align: center; width: 100%; } } .pr { position:relative; } .pa { position:absolute; } .m0a { margin:0 auto; } .BMapLib_nav { display:none; padding:10px!important; } .BMapLib_bubble_content { padding:0 10px 10px 10px!important; } .BMapLib_sendToPhone,.BMapLib_bubble_close { display:none; } .mbx a.cur4 { color:#f36e23; } @media (max-width:680px) { .pagination{white-space: nowrap;} .pagination .page-num{display:none;} .pagination span, .pagination a{ font-size: 12px; } } .message #verifyInput{ width:130px; } @media (max-width:1024px) { .message #verifyInput{ width:42%; } .message #change{ display:none; } .jobsq .job4{ width: 100%; } .jobsq .col-xs-4 input { width: 57%; border: solid 1px #e6e6e6; height: 36px; line-height: 36px; border-radius: 1px; } .jobsq .col-xs-12 input { width: 57%; border: solid 1px #e6e6e6; height: 36px; line-height: 36px; border-radius: 1px; } .jobsq .col-xs-12 textarea { width: 57%; border: solid 1px #e6e6e6; height: 100px; line-height: 24px; border-radius: 1px; } } a.l-btn span.l-btn-left{ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; transition: all 0 ease 0; -webkit-transition: all 0 ease 0; -moz-transition: all 0 ease 0; -o-transition: all 0 ease 0; } .news_show .xg-list li { margin: 0 auto; width: 260px; text-align: center; } .news_show .xg-list li .jzimg { display: block; width: 236px; height: 160px; overflow: hidden; text-align: center; width: 100%; } .pagination a:hover{ background-color: #fff; border: 1px solid #ddd; background-color: #f36e23; border-color: #f36e23; color: #fff; } .joblist .col-xs-6 h4 a:hover{ color:#f36e23; } @media(max-width:680px){ .banner .slick-prev,.banner .slick-next {display:none !important;} .copyrightl .fl{width:100%;} .copyright-frame .copyrightl a{width:100%;float:left;} } .fn-suspend.floatqq_right .suspend-item-feedback a.show_qq { left: 0px !important; } .list-pro-subnav { text-align: left; width: 50%; padding: 0 10px; margin: 0 auto; margin-top:10px; float: left; /*height: 40px;*/ } .list-pro-subnav div { text-align: center } .list-pro-subnav div span { display: block; height: 36px; padding: 0 15px; font-size: 14px; overflow: hidden; line-height: 36px; border-radius: 5px; margin: 0 5px; background-color: transparent; border: 0; vertical-align: middle; z-index: 0; } .list-pro-subnav div span>a { display: block } .list-pro-subnav div span:hover { color: #f36e23; } .list-pro-subnav div>a:hover { border-color: #f36e23 } .list-pro-subnav .slick-list { width: 100%; display: inline-block } .list-pro-subnav .slick-list .slick-track { display: inline-block } .list-pro-subnav .cur { color: #f36e23; } .list-pro-subnav .cur>a { color: #f36e23 } @media (max-width:1100px) { .list-pro-subnav { width: 100%; padding: 0 30px } .list-pro-subnav .slick-prev { left: 5px } .list-pro-subnav .slick-next { right: 5px } } #cp_list{ max-width: 1200px; padding: 0; } .pro-main{ max-width: 880px; height: auto; float: right; } .about-main{ width: 880px; height: auto; float: right; } #left{ width:210px; height: 600px; float:left } #left .left_top img{ width:150px; display: block; margin: 0 auto; margin-bottom: 20px; } #left .left_top ul{ width:100px; height: auto; margin: 0 auto; border: 1px solid #000; border-radius: 10px; padding: 20px; margin-bottom: 50px; } #left .left_top ul li{ border-bottom: 1px solid #dfdfdf; font-size: 16px; text-align: center; } #left .left_foot p{ width:100%; text-align: center; font-size: 24px; } #left .left_foot ul{ width:100%; height: auto; padding: 10px; border: 1px solid #000; border-radius: 10px; } #left .left_foot ul li{ width:100%; height: auto; font-size: 12px; border-bottom: 1px solid #dfdfdf; } @media(max-width:1200px){ #left{display: none} } .poos1{ width:650px; height:610px; margin:0 auto; margin-top:80px;} .poos1 .pr_lc{ color:#1d1c21; font-size:24px; line-height:80px; text-align:center;} .poos1 ul li{ width:70px; height:70px; border-radius:50%; background:#fc6802; text-align:center; line-height:20px; font-size:16px; padding:15px 0; color:#333; float:left; margin-right:75px; position:relative;color: #fff;} .poos1 .qita .liu{ display:inline-block; margin:0 30px; width: 260px;height: auto;margin-left: 70px;} .poos1 ul li img{ position:absolute; right:-65px; top:30px;} .poos1 ul li .qita1{ position:absolute; right:30px; top:90px;} .poos1 .qita li{ width:70px; height:70px; border-radius:50%; background:#fc6802; text-align:center; line-height:20px; font-size:16px; padding:15px 0; color:#333; float:right; margin-left:75px; margin-right:0;color: #fff;} .poos1 ul li:last-child{ margin-right:0;} .poos1 ul{ margin-bottom:80px;width: 100%; height: 70px;}