@charset "utf-8"; /* * Project Name:澳门新葡萄新京娱乐 * Author:浅浅 * Date：2017-3-10 */ @font-face { font-family: 'Conv_PFDinTextCondPro-Regular'; src: url('PFDinTextCondPro-Regular.eot'); src: local('☺'), url('PFDinTextCondPro-Regular.woff') format('woff'), url('PFDinTextCondPro-Regular.ttf') format('truetype'), url('PFDinTextCondPro-Regular.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'pf_din_text_comp_proregular'; src: url('pfdintextcomppro-regular_1-webfont.eot'); src: url('pfdintextcomppro-regular_1-webfont.eot?#iefix') format('embedded-opentype'), url('pfdintextcomppro-regular_1-webfont.woff2') format('woff2'), url('pfdintextcomppro-regular_1-webfont.woff') format('woff'), url('pfdintextcomppro-regular_1-webfont.ttf') format('truetype'), url('pfdintextcomppro-regular_1-webfont.svg#pf_din_text_comp_proregular') format('svg'); font-weight: normal; font-style: normal; } /*html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}*/ html, body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0px; border: 0; font-size: 100%; outline: none; } table, caption, tbody, tfoot, thead, tr, th, td, h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0px; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-x: hidden; } /* always display scrollbars */ body { font: 14px/1.8 "Microsoft Yahei","微软雅黑",Arial,Helvetica,sans-serif,"SimHei","黑体","微软正黑体","Microsoft JhengHei"; margin: 0 auto; color: #383838; background-color: #fff; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } img { border: 0; } input { outline: none; } input[type="text"], input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; border-radius: 0; } textarea { -webkit-appearance: none; border-radius: 0; outline: none; } ::-moz-selection { background: #6e6e6e; color: #fff; text-shadow: none; } ::selection { background: #6e6e6e; color: #fff; text-shadow: none; } select { outline: none; } select::-ms-expand { display: none; } a { text-decoration: none; blr: expression(this.onFocus=this.blur()); cursor: pointer; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } a:link, a:visited { text-decoration: none; } a:active, a:hover { text-decoration: none; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0px; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .fc { text-align: center; } .fr { text-align: right; } .l { float: left; display: inline-block; } .r { float: right; display: inline-block; } .vt { vertical-align: top; } .vm { vertical-align: middle; } .inner { width: 1200px; margin: 0px auto; } .top a:link, .top a:visited { color: #333333; } .top a:active, .top a:hover { color: #fff; } header { width: 100%; background-color: #fff; height: 54px; } .topbar-inner { padding: 10px 3%; line-height: 32px; display: none; } .topbar-inner a:link, .topbar-inner a:visited { color: #b8b8b8; } .topbar-inner a:active, .topbar-inner a:hover { color: #e98205; } .serach-box { float: left; display: block; background-color: #ededed; position: relative; overflow: hidden; padding: 5px 40px 5px 10px; height: 22px; width: 180px; } .serach-box .stxt { display: block; width: 100%; margin: 0; padding: 0; height: 22px; line-height: 22px; font-family: "Microsoft Yahei","微软雅黑",Arial,Helvetica,sans-serif,"SimHei","黑体","微软正黑体","Microsoft JhengHei"; font-size: 14px; border: 0px none; background-color: #ededed; } .serach-box .sbtn { position: absolute; right: 0; top: 0; width: 40px; height: 100%; background: url(../images/add_ico.png) no-repeat scroll center center; } .serach-box .sbtn:hover { background-color: #dddbdb; } .topbar-inner .languageA { margin-left: 25px; } .language-box{ float: right; display: block; height: 54px; line-height: 54px; margin-right: 280px;} .language-box a:link, .language-box a:visited { color: #fff; } .language-box a:active, .language-box a:hover { color: #fff; } .language-box a{ position: relative; padding-bottom: 5px;} .language-box .fg{ padding: 0px 4px;} .language-box a:before { content: ""; width: 100%; height: 1px; background-color: #fff; position: absolute; left: 0; bottom: 0px; transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: transform .3s cubic-bezier(.4,0,.2,1); transition: transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden\9; } .language-box a.active:before { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform-origin: 0; -webkit-transform-origin: 0; visibility: visible\9; } .top { position: fixed; background: url(../images/nav_bg.jpg) repeat-y scroll left top #f2cc3c; height: 54px; width: 100%; z-index: 1000; color: #fff; } .fixed { position: fixed; left: 0; top: 0; width: 100%; } .logo { position: absolute; right: 0; top: 17px; transition: 370ms; -webkit-transition: 370ms; } .logo a { display: block; background-color: #fff; padding: 18px 15px 18px 5px; height: 40px; } .logo .sj { background: url(../images/logo_sj.png) no-repeat scroll left center; width: 28px; position: absolute; left: -28px; top: 0; height: 100%; } .logo img { height: 100%; display: block; } .nav { margin-left: 3%; } .nav a:link, .nav a:visited { color: #fff; } .nav a:active, .nav a:hover { color: #fff; } .nav li { float: left; display: block; margin-right: 25px; height: 54px; line-height: 54px; font-size: 14px; } .nav a { position: relative; padding-bottom: 5px; } .nav a:before { content: ""; width: 100%; height: 1px; background-color: #fff; position: absolute; left: 0; bottom: 0px; transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: transform .3s cubic-bezier(.4,0,.2,1); transition: transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden\9; } .nav a:hover:before { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform-origin: 0; -webkit-transform-origin: 0; visibility: visible\9; } .trans, .trans:hover { -webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s; -moz-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s; -o-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s; transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s; -ms-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s; } .trans-fast, .trans-fast:hover { -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; } .menu-handler { display: none; width: 54px; height: 54px; cursor: pointer; position: absolute; right: 0px; top: 0px; transition: all 0.3s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: all 0.3s cubic-bezier(0.445, 0.145, 0.355, 1); -moz-transition: all 0.3s cubic-bezier(0.445, 0.145, 0.355, 1); } .menu-handler .burger { width: 30px; height: 3px; background: #e87e02; display: block; position: absolute; z-index: 5; top: 15px; left: 50%; margin: 0px 0px 0px -15px; transform-origin: center; -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center; -ms-transform-origin: center; } .menu-handler .burger-2 { top: 25px; } .menu-handler .burger-3 { top: 35px; } .menu-handler.active .burger-1 { top: 25px; -moz-transform: rotate(225deg); -webkit-transform: rotate(225deg); -o-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); } .menu-handler.active .burger-2 { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0); opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; left: 100%; } .menu-handler.active .burger-3 { top: 25px; -moz-transform: rotate(-225deg); -webkit-transform: rotate(-225deg); -o-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg); } .serach-Mbtn { width: 54px; height: 54px; position: absolute; right: 54px; top: 0px; cursor: pointer; display: none; border-right: 1px solid #e9e9e9; border-left: 1px solid #e9e9e9; } .serach-Mbtn i { width: 24px; height: 24px; background: url(../images/serach_btn2.png) no-repeat scroll center center; background-size: cover; display: block; margin: 15px auto; } .serachIBox { position: fixed; left: 0px; top: 54px; height: 0px; overflow: hidden; padding: 12px 76px 12px 3%; background-color: #9c9c9c; z-index: 800; width: 100%; box-sizing: border-box; -webkit-transform: perspective(600px) rotateX(-90deg); -moz-transform: perspective(600px) rotateX(-90deg); -ms-transform: perspective(600px) rotateX(-90deg); transform: perspective(600px) rotateX(-90deg); -webkit-transform-origin: center top 0; -moz-transform-origin: center top 0; -ms-transform-origin: center top 0; transform-origin: center top 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all .3s ease .2s; -moz-transition: all .3s ease .2s; -ms-transition: all .3s ease .2s; transition: all .3s ease .2s; visibility: hidden; } .serachIBox.active { visibility: visible; -webkit-transform: perspective(600px) rotateX(0deg); -moz-transform: perspective(600px) rotateX(0deg); -ms-transform: perspective(600px) rotateX(0deg); transform: perspective(600px) rotateX(0deg); height: 48px; } .serachIBox .txt { border: 0px none; height: 24px; line-height: 24px; padding: 0px; margin: 0px; width: 95%; background-color: transparent; font-size: 14px; color: #fff; font-family: "microsoft yahei"; } .serachIBox .btn { position: absolute; right: 0px; top: 0px; width: 76px; height: 100%; background-color: #e87b00; } .serachIBox .btn i { width: 20px; height: 20px; background: url(../images/serach_btn3.png) no-repeat scroll center center; background-size: cover; display: block; margin: 16px auto; } .pusher { transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s; -webkit-transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s; } .serachbg, .pusher-black { position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background-color: rgba(0,0,0,0.5); display: none; z-index: 900; } .menuBox { background-color: #ec7d10; color: #fff; position: fixed; right: 0px; top: 0px; width: 390px; height: 100%; z-index: -1; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s; -webkit-transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s; transform: translate(100%,0px); -moz-transform: translate(100%,0px); -webkit-transform: translate(100%,0px); -o-transform: translate(100%,0px); } .no-csstransforms3d .menuBox { display: none; } .languageBox a:link, .languageBox a:visited { color: #fff; } .languageBox a:active, .languageBox a:hover, .languageBox2 a.act { color: #fff; text-decoration: underline; } .languageBox { text-align: right; font-size: 14px; padding: 18px 20px 25px; } .languageBox a { margin-left: 15px; } .navMobile li { padding-bottom: 5px; } .nav-link { color: #fff; display: block; font-size: 18px; padding: 5px 25px; } .navMobile .subnav { background-color: #f5f5f5; display: none; padding: 10px 25px; } .navMobile .subnav dd { padding: 2px 0px; margin-bottom: 5px; } .navMobile .subnav a { color: #666666; position: relative; font-size: 14px; } .navMobile .subnav a:hover { color: #006f93; } .menuOpen .pusher { transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0.2s; -webkit-transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0.2s; } .menuOpen .pusher-black { display: block; } .menuOpen .menuBox { z-index: 999; } footer { background: url(../images/foot_bg.jpg) repeat-y scroll left top #f0b137; color: #fff; } footer a:link, footer a:visited { color: #fff; } footer a:active, footer a:hover { color: #fff; } .smlink { margin-left: 10px; } .footDL { padding: 42px 0px; position: relative; line-height: 1.5; } .footDL .item1 { display: block; width: 75%; } .footDL .item3 { display: block; display:none } .footNav li { float: left; display: block; width: 15%; } .footNav .t { font-weight: bold; font-size: 16px; margin-bottom: 18px; } .footNav .c a { display: block; margin-bottom: 8px; } .footDL .c a:hover { margin-left: 8px; } .footDL .item2 { position: absolute; right: 0; top: 36px; text-align: center; max-width: 30%; } .footDL .name { font-size: 20px; } .footDL .ermImg { margin: 8px auto; width: 81px; } .footDL .ermImg img { width: 100%; display: block; } .footDL .ermC { margin-bottom: 10px; } .footDL .foot-tel { font-size: 20px; } .foot-tel { float: right; display: block; background: url(../images/tel_ico.png) no-repeat scroll left center; padding-left: 32px; font-size: 18px; } .footC { padding: 10px 0px; text-align: center; font-size: 12px; font-family: arial, helvetica, sans-serif; border-top: 1px solid #fff; border-top: 1px solid rgba(255,255,255,0.5); } .footC a { position: relative; } .footC a:before { content: ""; width: 100%; height: 1px; background-color: #fff; position: absolute; left: 0; bottom: -2px; transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: transform .3s cubic-bezier(.4,0,.2,1); transition: transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden\9; } .footC a:hover:before { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform-origin: 0; -webkit-transform-origin: 0; visibility: visible\9; } /*video*/ .vwrap { display: none; z-index: 1040; width: 100%; position: fixed; } .vwrap .videobtg { z-index: 900; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #000; opacity: 0.8; filter: alpha(opacity=80); overflow: hidden; } .vwrap .videobox { z-index: 990; width: 800px; height: 500px; background-color: #fff; position: fixed; left: 50%; top: 50%; margin-top: -250px; margin-left: -400px; } .vwrap .videobox #videobox { width: 100%; display: inline-block; height: 100%; background: #80abde; } #videobox_wrapper { height: 100%!important; } .vwrap .close { z-index: 999; width: 32px; height: 32px; cursor: pointer; position: absolute; top: 0px; right: -42px; } .vwrap .close i { display: block; width: 32px; height: 32px; background: url(../images/closebtn.png) no-repeat 50% 50%; -webkit-transition: 400ms; transition: 400ms; } .vwrap .close:hover i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } #videobox_display_button, #videocontainer_display_button { background: none no-repeat!important; } .jwplayer .jwicon { opacity: 0.8; filter: alpha(opacity=80); cursor: pointer; background: url(../images/vico1.png) no-repeat!important; width: 57px!important; height: 57px!important; transform: rotate(0deg) !important; } .jwplayer .jwicon:hover { opacity: 1; filter: alpha(opacity=100); } .jwlogo, .jwclick { display: none!important; } .jwdisplayIcon { background: none no-repeat!important; } /*video style end*/ .pageNav a:link, .pageNav a:visited { color: #676767; } .pageNav a:active, .pageNav a:hover { color: #e98205; } .pageNav { height: 50px; border-bottom: 1px solid #ededed; text-align: center; } .pageNav li { display: inline-block; *display: inline; *zoom: 1; margin: 0px 8px; } .pageNav a { display: block; padding: 0px 8px; line-height: 50px; position: relative; } .pageNav a:before { content: ""; width: 100%; height: 2px; background-color: #e98205; position: absolute; left: 0; bottom: 0px; transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: transform .3s cubic-bezier(.4,0,.2,1); transition: transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden\9; } .pageNav a.active:before { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform-origin: 0; -webkit-transform-origin: 0; visibility: visible\9; } .pageNav a.active { color: #e98205; } .pagePadding { padding: 60px 0px; } .pageC { color: #676767; } .pageC img { max-width: 100%; } .pageC a:link, .pageC a:visited { color: #666; } .pageC a:active, .pageC a:hover { color: #e98205; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-loading .slick-list { background: #00865e url(../images/loader.gif) center center no-repeat; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; padding: 0; border: none; outline: none; } /* Dots */ .slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0px 5px; padding: 0px; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; outline: none; } .slick-dots li button:focus { outline: none; } @-webkit-keyframes scaleUpDown { from { -webkit-transform: scale(1.08); transform: scale(1.08); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scaleUpDown { from { -webkit-transform: scale(1.08); transform: scale(1.08); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /*base style end*/ /*index style*/ .transYT { transform: translateY(100%); -webkit-transform: translateY(100%); transition: transform 1000ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .transYT2 { transform: translateY(-100%); -webkit-transform: translateY(-100%); transition: transform 1000ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .transXT { transform: translateX(100%); -webkit-transform: translateX(100%); transition: transform 1000ms cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s; -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .transXT2 { transform: translateX(-100%); -webkit-transform: translateX(-100%); transition: transform 1000ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .transYT50 { transform: translateY(50px); -webkit-transform: translateY(50px); opacity: 0; visibility: hidden; transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; } .transYT10 { transform: translateY(10px); -webkit-transform: translateY(10px); opacity: 0; visibility: hidden; transition: transform 400ms,opacity .4s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 400ms,opacity .4s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; } .transYT250 { transform: translateY(-50px); -webkit-transform: translateY(-50px); opacity: 0; visibility: hidden; transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; } .transXT50 { transform: translateX(50px); -webkit-transform: translateX(50px); opacity: 0; visibility: hidden; transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; } .transXT280 { transform: translateX(-80px); -webkit-transform: translateX(-80px); opacity: 0; visibility: hidden; transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; } .action.transYT50, .action.transYT10 { opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); } .action.transYT250 { opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); } .action.transXT50 { opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); } .action.transXT280 { opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); } .action.transYT { transform: translateY(0px); -webkit-transform: translateY(0px); } .action.transYT2 { transform: translateY(0px); -webkit-transform: translateY(0px); } .action.transXT { transform: translateY(0px); -webkit-transform: translateY(0px); } .action.transXT2 { transform: translateY(0px); -webkit-transform: translateY(0px); } .tlbg:after, .trbg:after, .ttbg:after, .tbbg:after { background-color: #eee; content: ""; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px: transition: transform .8s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s; -webkit-transition: transform .8s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s; z-index: 1; } .tlbg:after { transform-origin: left top 0; -webkit-transform-origin: left top 0; } .trbg:after { transform-origin: right top 0; -webkit-transform-origin: right top 0; } .ttbg:after { transform-origin: left top 0; -webkit-transform-origin: left top 0; } .tbbg:after { transform-origin: left bottom 0; -webkit-transform-origin: left bottom 0; } .action.tlbg:after, .action.trbg:after { transform: scaleX(0); -webkit-transform: scaleX(0); } .action.ttbg:after, .action.tbbg:after { transform: scaleY(0); -webkit-transform: scaleY(0); } .no-csstransforms .action.tlbg:after, .no-csstransforms .action.trbg:after, .no-csstransforms .action.ttbg:after, .no-csstransforms .action.tbbg:after { z-index: -1; background-color: transparent; } .dly_1 { transition-delay: 100ms; -webkit-transition-delay: 100ms; } .dly_2 { transition-delay: 200ms; -webkit-transition-delay: 200ms; } .dly_3 { transition-delay: 300ms; -webkit-transition-delay: 300ms; } .dly_4 { transition-delay: 400ms; -webkit-transition-delay: 400ms; } .dly_5 { transition-delay: 500ms; -webkit-transition-delay: 500ms; } .dly_6 { transition-delay: 600ms; -webkit-transition-delay: 600ms; } .dly_7 { transition-delay: 700ms; -webkit-transition-delay: 700ms; } .dly_8 { transition-delay: 800ms; -webkit-transition-delay: 800ms; } .dly_9 { transition-delay: 900ms; -webkit-transition-delay: 900ms; } .dly_10 { transition-delay: 1000ms; -webkit-transition-delay: 1000ms; } .dly_11 { transition-delay: 1100ms; -webkit-transition-delay: 1100ms; } .align-vertical { height: 100%; width: 100%; position: relative; display: table; } .vertical-inner { display: table-cell; vertical-align: middle; } .bannerBox { position: relative; width: 100%; height: 100%; color: #fff; background-color: #f7f7f7; overflow: hidden; } .bannerBox a:link, .bannerBox a:visited { color: #fff; } .bannerBox a:active, .bannerBox a:hover { color: #fff; } .banner .item { opacity: 1 !important; } .banner .imgbox { width: 100%; height: 100%; display: block; position: absolute; left: 0%; bottom: 0; overflow: hidden; } .banner .pimg { width: 100%; display: block; position: relative; left: 0; top: 0; } @-webkit-keyframes slideIn { 0% { -webkit-transform: translateX(100%); opacity: 1; } 100% { -webkit-transform: translateX(0); opacity: 1; } } @keyframes slideIn { 0% { transform: translateX(100%); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } } @-webkit-keyframes imgIn { 0% { -webkit-transform: -webkit-translateX(-90%); opacity: 1; } 100% { -webkit-transform: -webkit-translateX(0); opacity: 1; } } @keyframes imgIn { 0% { transform: translateX(-90%); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } } .banner .pimg1 { display: block; } .banner .pimg2 { display: none; } .binbox { position: absolute; color: #fff; right: 5%; width: 500px; top: 20%; padding: 20px 24px 18px; background: url(../images/banner_bg.png) repeat-y scroll right top; transform: translateX(88px); -webkit-transform: translateX(88px); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; opacity: 0; visibility: hidden; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } .binbox .zh-t, .binbox .zh-by, .binbox .bot, .binbox .en-t, .binbox .en-by { opacity: 0; visibility: visible; transform: translateX(80px); -webkit-transform: translateX(80px); } .binbox .zh-t { font-size: 30px; line-height: 1.2; } .binbox .zh-by { font-size: 46px; line-height: 1.2; } .binbox .bot { margin: 20px 0px 15px; width: 70px; height: 3px; background-color: #fff; display: block; } .binbox .en-t { font-size: 18px; line-height: 1.2; font-family: arial, helvetica, sans-serif; padding-bottom: 5px; } .binbox .en-by { font-size: 14px; line-height: 1.2; } .banner .slick-active { z-index: 800 !important; } .banner .slick-active .imgbox { -webkit-animation: slideIn 1600ms cubic-bezier(0.190, 1, 0.420, 1); animation: slideIn 1600ms cubic-bezier(0.190, 1, 0.420, 1); -moz-animation: slideIn 1600ms cubic-bezier(0.190, 1, 0.420, 1); } .banner .slick-active .pimg { -webkit-animation: imgIn 1600ms cubic-bezier(0.190, 1, 0.420, 1); animation: imgIn 1600ms cubic-bezier(0.190, 1, 0.420, 1); -moz-animation: imgIn 1600ms cubic-bezier(0.190, 1, 0.420, 1); } .banner .slick-active .binbox { transform: translate(0,0); -webkit-transform: translate(0,0); opacity: 1; visibility: visible; transition: .68s .28s; -webkit-transition: .68s .28s; } .banner .slick-active .zh-t { -webkit-transition: all .68s 0.5s; transition: all .68s 0.5s; } .banner .slick-active .zh-by { -webkit-transition: all .68s 0.55s; transition: all .68s 0.55s; } .banner .slick-active .bot { -webkit-transition: all .68s 0.6s; transition: all .68s 0.6s; } .banner .slick-active .en-t { -webkit-transition: all .68s 0.7s; transition: all .68s 0.7s; } .banner .slick-active .en-by { -webkit-transition: all .68s 0.75s; transition: all .68s 0.75s; } .banner .slick-active .zh-t, .banner .slick-active .zh-by, .banner .slick-active .bot, .banner .slick-active .en-t, .banner .slick-active .en-by { opacity: 1; visibility: visible; transform: translateX(0px); -webkit-transform: translateX(0px); } .banner .slick-dots { position: absolute; bottom: 5%; z-index: 800; width: 90%; left: 5%; text-align: right; } .banner .slick-dots li { margin: 0px 0px 0px 5px; position: relative; width: 17px; height: 17px; display: inline-block; } .banner .slick-dots a { width: 100%; height: 17px; overflow: hidden; display: block; background: url(../images/banner_i2.png) no-repeat scroll center center; text-indent: -2em; position: absolute; left: 0px; bottom: 0px; font-size: 0px; transition: 300ms; -webkit-transition: 300ms; } .banner .slick-dots li.slick-active a { background-image: url(../images/banner_i1.png); } .oneBoxList dd { height: 300px; width: 50%; float: left; position: relative; overflow: hidden; } .aboutIbox { background-color: #ec9513; color: #fff; } .aboutIbox a:link, .aboutIbox a:visited { color: #fff; } .aboutIbox a:active, .aboutIbox a:hover { color: #fff; } .aboutIbox .t { padding: 3% 0px 0px 5%; line-height: 1.2; } .aboutIbox .name { font-size: 30px; font-family: arial, helvetica, sans-serif; } .aboutIbox .en { font-size: 40px; font-weight: bold; font-family: arial, helvetica, sans-serif; text-transform: uppercase; } .aboutIbox .zh { font-size: 16px; } .aboutI-ul { position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid #f2b75f; } .aboutI-ul li { float: left; width: 25%; } /*.aboutI-ul li.lastMore{ width: 24%;}*/ .aboutI-ul article { border-left: 1px solid #f2b75f; padding: 15px 0px 0px 24%; height: 120px; line-height: 1.5; font-size: 14px; } .aboutI-ul .num { font-size: 42px; font-family: "Conv_PFDinTextCondPro-Regular",arial, helvetica, sans-serif; } .aboutI-ul .bot { background-color: #fff; width: 18px; height: 2px; overflow: hidden; display: block; margin-bottom: 15px; } .aboutI-ul .c { font-size: 14px; } .aboutI-ul .more { display: block; border-left: 1px solid #f2b75f; width: 100%; height: 135px; background: url(../images/more.png) no-repeat scroll center center; } .aboutI-ul .more:hover { background-position: 55% center; } .videobox { cursor: pointer; } .videoIbox .vimg { width: 100%; height: 300px; } .videoIbox .vimg .img { height: 100%; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; transition: transform .8s ease-out 0s; -webkit-transition: -webkit-transform .8s ease-out 0s; } .black-20 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/black_20.png) repeat; background: none rgba(0,0,0,0.2); } .videoIbox .vico { background: url(../images/vico2.png) no-repeat; width: 57px; height: 57px; display: block; position: absolute; left: 50%; top: 50%; margin: -28px 0px 0px -28px; } .videoIbox .vico i { background: url(../images/vico.png) no-repeat scroll center center; width: 100%; height: 100%; display: block; animation: 3s linear 0s normal none infinite running vrotate; -webkit-animation: 3s linear 0s normal none infinite running Turnico; } @keyframes Turnico { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } @keyframes Turnico { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } .videoIbox:hover .vimg .black-20 { background: url(../images/black_35.png) repeat; background: none rgba(0,0,0,0.35); } .videoIbox:hover .vimg .img { transform: scale(1.1); -webkit-transform: scale(1.1); } #videobox { position: absolute !important; left: 0; top: 0; height: 100% !important; } .newIbox { padding: 60px 45px; } .newIdemo a:link, .newIdemo a:visited { color: #434343; } .newIdemo a:active, .newIdemo a:hover { color: #5d176d; } .newIdemo .item { float: left; margin: 0px 40px; position: relative; overflow: hidden; } .newIdemo .time { color: #ababab; } .newIdemo .t { font-size: 18px; line-height: 1.5; margin: 12px 0px 18px; height: 27px; overflow: hidden; } .newIdemo .c { color: #9a9a9a; height: 76px; overflow: hidden; margin-bottom: 20px; } .newIdemo .item:hover .t, .newIdemo .item:hover .btn-viewMore2 .txt { color: #5d176d; } .btn-viewMore2 { position: relative; display: inline-block; } .btn-viewMore2 .i { position: absolute; left: 110%; background: url(../images/jt_2.png) no-repeat scroll right center; width: 18px; height: 100%; transition: 400ms; -webkit-transition: 400ms; } .btn-viewMore2:hover .i { background-image: url(../images/jt_3.png); width: 41px; } .newIdemo .item:hover .btn-viewMore2 .i { background-image: url(../images/jt_3.png); width: 41px; } .newIdemo .slick-arrow { background-color: #c7c7c7; width: 26px; height: 26px; z-index: 10; top: 50%; margin-top: -13px; } .newIdemo .slick-arrow i { width: 100%; height: 100%; display: block; transition: 300ms; -webkit-transition: 300ms; } .newIdemo .slick-prev { left: -26px; } .newIdemo .slick-next { right: -26px; } .newIdemo .slick-prev i { background: url(../images/img_l1.png) no-repeat scroll center center; } .newIdemo .slick-next i { background: url(../images/img_r1.png) no-repeat scroll center center; } .newIdemo .slick-prev:hover, .newIdemo .slick-next:hover { background-color: #5d176d; } .newIdemo .slick-prev:hover i { transform: translateX(-5px); -webkit-transform: translateX(-5px); } .newIdemo .slick-next:hover i { transform: translateX(5px); -webkit-transform: translateX(5px); } .ilinkA { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; } .productIbox dd { float: left; display: block; width: 25%; background-color: #ededed; position: relative; } .productIbox .img { position: relative; overflow: hidden; margin: 0px 0px 81%; overflow: hidden; } .productIbox .img img { width: 100%; display: block; transition: all 0.9s cubic-bezier(0.445, 0.145, 0.355, 1) 0s; -webkit-transition: all 0.9s cubic-bezier(0.445, 0.145, 0.355, 1) 0s; } .productIbox .twoItem .img { margin: 81% 0px 0px; } .productIbox .black-20 { opacity: 0; visibility: hidden; transition: 300ms; -webkit-transition: 300ms; } .productIbox .con { position: absolute; left: 8%; top: 50%; width: 84%; height: 50%; text-align: center; } .productIbox .twoItem .con { top: 0; } .productIbox .arrow { background: url(../images/sj.png) no-repeat scroll center center; width: 19px; height: 12px; position: absolute; left: 50%; top: -12px; margin-left: -9px; } .productIbox .twoItem .arrow { background-image: url(../images/sj2.png); top: auto; bottom: -12px; } .productIbox .info { padding-top: 15%; transform: translateY(32px); -webkit-transform: translateY(32px); transition: transform .5s cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transition: transform .5s cubic-bezier(0.645, 0.045, 0.355, 1); } .productIbox .info .t { font-size: 20px; line-height: 1.5; margin-bottom: 12px; color: #212121; } .productIbox .info .c { color: #676767; max-height: 76px; overflow: hidden; margin-bottom: 20px; } .productIbox .btn-viewMore { opacity: 0; visibility: hidden; transition: opacity .38s cubic-bezier(.4,0,.2,1),visibility .3s; -webkit-transition: opacity .38s cubic-bezier(.4,0,.2,1),visibility .3s; } .btn-viewMore { text-align: left; position: relative; width: 104px; height: 32px; line-height: 32px; color: #fff; overflow: hidden; display: block; margin: 0px auto; padding: 0px 16px; z-index: 1; background-color: #e98205; } .btn-viewMore .i { background: url(../images/jt_1.png) no-repeat scroll right center; width: 41px; height: 100%; position: absolute; right: 16px; top: 0; -webkit-transition: 400ms; transition: 400ms; } .btn-viewMore:hover .i { -webkit-animation: mouse-dot 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite; animation: mouse-dot 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite; } @keyframes mouse-dot { from { opacity: 0; } 33% { opacity: 1; } to { transform: translateX(12px); -webkit-transform: translateX(12px); opacity: 0; } } @-webkit-keyframes mouse-dot { from { opacity: 0; } 33% { opacity: 1; } to { transform: translateX(12px); -webkit-transform: translateX(12px); opacity: 0; } } .productIbox dd:hover .btn-viewMore .i { -webkit-animation: mouse-dot 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite; animation: mouse-dot 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite; } .productIbox dd:hover .img img { transform: scale(1.08); -webkit-transform: scale(1.08); } .productIbox dd:hover .black-20 { opacity: 1; visibility: visible; } .productIbox dd:hover .info { transform: none; -webkit-transform: none; } .productIbox dd:hover .btn-viewMore { opacity: 1; visibility: visible; } .linkList a:link, .linkList a:visited { color: #676767; } .linkList a:active, .linkList a:hover { color: #212121; } .linkList { padding: 26px 0px; } .linkList .item { float: left; display: block; width: 176px; padding: 12px; } .linkList .img { display: block; margin: 0px auto; max-width: 100%; transition: 400ms; -webkit-transition: 400ms; } .linkList .item .img:hover { transform: scale(0.8); -webkit-transform: scale(0.8); } /*index style end*/ /*about style*/ .pbanner { padding: 42px 0px; background: url(../images/yy.png) repeat-x #ededed; text-align: center; line-height: 1.5; position: relative; overflow: hidden; } .pbanner .en { color: #777777; font-weight: bold; font-size: 40px; text-transform: uppercase; } .pbanner .zh { font-size: 18px; color: #8e8e8e; } .pbanner .gp1 { background: url(../images/gq1.png) no-repeat; width: 161px; height: 161px; display: block; position: absolute; left: -1%; top: -1%; display: block; animation: 9s linear 0s alternate none infinite running do-icon-full-animation; -webkit-animation: 9s linear 0s alternate none infinite running do-icon-full-animation; } .pbanner .gp2 { background: url(../images/gq2.png) no-repeat; width: 228px; height: 228px; display: block; position: absolute; right: -3%; bottom: -3%; display: block; animation: 7s ease 0s alternate none infinite running do-icon-animation; -webkit-animation: 7s ease 0s alternate none infinite running do-icon-animation; } @keyframes do-icon-animation { 0% { -moz-transform: matrix(0.939693,0.34202,-0.34202,0.939693,-17.101,46.9846); -webkit-transform: matrix(0.939693,0.34202,-0.34202,0.939693,-17.101,46.9846); -o-transform: matrix(0.939693,0.34202,-0.34202,0.939693,-17.101,46.9846); -ms-transform: matrix(0.939693,0.34202,-0.34202,0.939693,-17.101,46.9846); transform: matrix(0.939693,0.34202,-0.34202,0.939693,-17.101,46.9846); } 100% { -moz-transform: matrix(0.939693,-0.34202,0.34202,0.939693,-17.101,-46.9846); -webkit-transform: matrix(0.939693,-0.34202,0.34202,0.939693,-17.101,-46.9846); -o-transform: matrix(0.939693,-0.34202,0.34202,0.939693,-17.101,-46.9846); -ms-transform: matrix(0.939693,-0.34202,0.34202,0.939693,-17.101,-46.9846); transform: matrix(0.939693,-0.34202,0.34202,0.939693,-17.101,-46.9846); } } @-webkit-keyframes do-icon-animation { 0% { -moz-transform: matrix(0.939693,0.34202,-0.34202,0.939693,-17.101,46.9846); -webkit-transform: matrix(0.939693,0.34202,-0.34202,0.939693,-17.101,46.9846); -o-transform: matrix(0.939693,0.34202,-0.34202,0.939693,-17.101,46.9846); -ms-transform: matrix(0.939693,0.34202,-0.34202,0.939693,-17.101,46.9846); transform: matrix(0.939693,0.34202,-0.34202,0.939693,-17.101,46.9846); } 100% { -moz-transform: matrix(0.939693,-0.34202,0.34202,0.939693,-17.101,-46.9846); -webkit-transform: matrix(0.939693,-0.34202,0.34202,0.939693,-17.101,-46.9846); -o-transform: matrix(0.939693,-0.34202,0.34202,0.939693,-17.101,-46.9846); -ms-transform: matrix(0.939693,-0.34202,0.34202,0.939693,-17.101,-46.9846); transform: matrix(0.939693,-0.34202,0.34202,0.939693,-17.101,-46.9846); } } @keyframes do-icon-full-animation { 0% { -moz-transform: matrix(1,0,0,1,0,0); -webkit-transform: matrix(1,0,0,1,0,0); -o-transform: matrix(1,0,0,1,0,0); -ms-transform: matrix(1,0,0,1,0,0); transform: matrix(1,0,0,1,0,0); } 100% { -moz-transform: matrix(-1,0,0,-1,0,-80); -webkit-transform: matrix(-1,0,0,-1,0,-80); -o-transform: matrix(-1,0,0,-1,0,-80); -ms-transform: matrix(-1,0,0,-1,0,-80); transform: matrix(-1,0,0,-1,0,-80); } } @-webkit-keyframes do-icon-full-animation { 0% { -moz-transform: matrix(1,0,0,1,0,0); -webkit-transform: matrix(1,0,0,1,0,0); -o-transform: matrix(1,0,0,1,0,0); -ms-transform: matrix(1,0,0,1,0,0); transform: matrix(1,0,0,1,0,0); } 100% { -moz-transform: matrix(-1,0,0,-1,0,-80); -webkit-transform: matrix(-1,0,0,-1,0,-80); -o-transform: matrix(-1,0,0,-1,0,-80); -ms-transform: matrix(-1,0,0,-1,0,-80); transform: matrix(-1,0,0,-1,0,-80); } } .about-pdl .img, .about-pdl .con { float: left; display: block; width: 50%; } .about-pdl .img img { vertical-align: middle; } .about-pdl-r .img { float: right; } .about-pdl .item { padding: 0px 0px 20px 20px; } .about-pdl-r .item { padding: 0px 20px 20px 0px; } .aboutT { font-weight: bold; font-size: 30px; line-height: 1.5; color: #212121; } .honor-list { margin-top: 50px; } .honor-list dd { padding: 15px 0px; transition: 400ms; -webkit-transition: 400ms; line-height: 1.5; } .honor-list .itemT { background: url(../images/honor_t.jpg) no-repeat scroll center bottom; background-size: cover; color: #fff; font-size: 16px; } .honor-list .item1, .honor-list .item2, .honor-list .item3 { float: left; display: block; padding-left: 4%; } .honor-list .item1 { width: 45%; } .honor-list .item2 { width: 18%; } .honor-list .item3 { width: 21%; } .honor-list .itemC { color: #787878; } .honor-list .twoItemC { background-color: #fbeee0; } .honor-list .itemC:hover { background-color: #777777; color: #fff; } .fixedImg { background-attachment: fixed; background-position: center top; background-repeat: no-repeat; } .history-bg { background: url(../images/white_70.png) repeat; background: none rgba(255,255,255,0.7); } .history-nav { text-align: center; padding: 112px 0px 35px; } .history-nav li { display: inline-block; width: 170px; padding-left: 70px; *display: inline; *zoom: 1; background: url(../images/hi_bot.png) no-repeat scroll 23px center; margin-bottom: 30px; } .history-nav li.firstItem { padding-left: 0; } .history-item { display: inline-block; background: url(../images/lj.png) no-repeat; width: 170px; height: 148px; position: relative; z-index: 1; color: #666; font-size: 16px; line-height: 1.2; cursor: pointer; } .history-item:before { content: ""; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0%; top: 0%; transform: scale(0.5); -webkit-transform: scale(0.5); visibility: hidden; opacity: 0; background: url(../images/lj2.png) no-repeat scroll center center; transition: 360ms ease-in-out; -webkit-transition: 360ms ease-in-out; } .history-item.active:before { opacity: 1; visibility: visible; transform: scale(1); -webkit-transform: scale(1); } .history-item:hover { color: #e87b00; } .history-item .year { padding-top: 30%; font-weight: bold; font-size: 20px; font-family: arial, helvetica, sans-serif; } .historyPage a:link, .historyPage a:visited { color: #666; } .historyPage a:active, .historyPage a:hover { color: #e87b00; } .historyDemo { position: relative; } .history-line { position: absolute; left: 301px; width: 3px; height: 100%; background-color: #bebebe; top: 0; } .history-list { position: relative; z-index: 2; padding-bottom: 28px; } .history-list dt { padding-bottom: 52px; } .history-list dd { padding-bottom: 24px; position: relative; } .historyDemo .h-year { margin-left: 287px; padding-left: 60px; background: url(../images/dian_1.png) no-repeat scroll left top; font-weight: bold; font-size: 30px; color: #e87b00; } .history-list .img { margin: 0px 90px 0px 95px; float: left; display: block; width: 170px; } .history-list .img img { width: 100%; display: block; } .history-list .yd { background: url(../images/dian_2.png) no-repeat; width: 13px; height: 13px; display: block; position: absolute; left: 296px; top: 48px; } .history-list .con { width: 504px; padding: 20px; background-color: #fff; float: left; display: block; color: #676767; border-radius: 5px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); position: relative; } .history-list .con .day { font-size: 16px; border-bottom: 1px solid #d6d6d6; padding-bottom: 5px; margin-bottom: 8px; } .history-list .con .sj { background: url(../images/sj3.png) no-repeat; width: 11px; height: 14px; display: block; position: absolute; left: -10px; top: 50px; } .history-list .con .c { min-height: 75px; } .teamList dd { border: 1px solid #f0f0f0; margin-bottom: 32px; transition: 300ms; } .teamList figure { float: left; display: block; width: 20%; } .teamList figure img { width: 100%; display: block; } .teamList .con { padding: 30px 4%; float: left; display: block; width: 72%; color: #787878; } .teamList .t { color: #59544d; font-size: 16px; margin-bottom: 4%; } .teamList .name { font-size: 24px; font-weight: bold; padding-right: 5px; } .teamList dd:hover { box-shadow: 5px 5px 21px -5px rgba(0, 0, 0, 0.2); } .innovations-dl { width: 80%; margin: 0px auto; } .innovations-dl dd { float: left; display: block; width: 31.33%; padding: 70px 1%; } .initem { position: relative; z-index: 1; border-radius: 50%; display: block; width: 180px; height: 180px; margin: 0px auto; border: 2px solid #676767; color: #676767; line-height: 1.5; } .initem .img { padding: 30px 0px 0px; display: block; width: 60px; height: 60px; margin: 0px auto 8px; position: relative; } .initem .img .ico { position: absolute; left: 0px; top: 30px; width: 60px; height: 60px; background-size: cover; background-repeat: no-repeat; background-position: center center; } .initem .img .i2 { opacity: 0; visibility: hidden; } .initem:before { content: ""; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0%; top: 0%; background: none #676767; border-radius: 50%; opacity: 0; transform: scale(0.7); -webkit-transform: scale(0.7); visibility: hidden; transition: all 0.5s ease 0s; -webkit-transform: all 0.5s ease 0s; } .initem .name { display: block; text-align: center; width: 80%; margin: 0px auto; } .initem:hover:before { opacity: 1; transform: scale(1.02); -webkit-transform: scale(1.02); visibility: visible; } .initem:hover { color: #fff; } .initem:hover .img { border-bottom-color: #fff; } .initem:hover .img .i1 { opacity: 0; visibility: hidden; } .initem:hover .img .i2 { opacity: 1; visibility: visible; -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: gelatine 0.5s 1; animation: gelatine 0.5s 1; } @keyframes gelatine { from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } } @-webkit-keyframes gelatine { from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } } .innovations-list{ display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap;} .innovations-list dd { float: left; display: block; margin-bottom: 32px; position: relative;} .innovations-list dd::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; border: 1px solid #cccccc; } .innovations-list .t { background: url(../images/bian.jpg) repeat; background-size: cover; color: #fff; border: 1px solid #cccccc; border-bottom: 0px none; padding: 10px 5%; font-size: 14px; font-weight: bold; } .innovations-list .con { padding: 30px 5%;} .innovations-list1 dd { width: 50%; } .innovations-list1 dd:nth-child(even) { position: relative; left: -1px; } .innovations-list2 { margin-left: -2%; } .innovations-list2 dd { width: 31.33%; margin-left: 2%; } /*about style end*/ /*news style*/ .pbanner2 { position: relative; overflow: hidden; width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; } .pbanner2 .load-img { width: 100%; display: block; } .newsList a:link, .newsList a:visited { color: #4a4a4a; } .newsList a:active, .newsList a:hover { color: #e87b00; } .newsList dd { position: relative; overflow: hidden; padding-left: 424px; height: 187px; color: #4a4a4a; padding-bottom: 38px; border-bottom: 1px solid #e5e5e5; margin-bottom: 45px; } .newsList .tiemBox { width: 82px; background-color: #eae6e2; text-align: center; font-family: arial, helvetica, sans-serif; position: absolute; left: 0; top: 0; } .newsList .tiemBox .day { font-size: 51px; color: #000; line-height: 1.5; } .newsList .tiemBox .time { display: block; border-top: 1px solid #fff; font-size: 12px; } .newsList .img { position: absolute; left: 100px; top: 0; width: 294px; overflow: hidden; } .newsList .img img { width: 100%; display: block; transition: all 0.6s 0s; -webkit-transition: all 0.6s 0s; } .newsList .black-20 { opacity: 0; visibility: hidden; transition: all 0.3s 0s; -webkit-transition: all 0.3s 0s; } .newsList .con h4 { font-weight: bold; font-size: 20px; line-height: 1.1; } .newsList .con .c { margin: 24px 0px; height: 76px; overflow: hidden; color: #9b9b9b; } .newsList dd:hover .more, .newsList dd:hover h4 { color: #e87b00; } .newsList dd:hover .img img { transform: scale(1.1); -webkit-transform: scale(1.1); } .newsList dd:hover .black-20 { opacity: 1; visibility: visible; } .paging { text-align: center; } .paging a:link, .paging a:visited { color: #676767; } .paging a:active, .paging a:hover { color: #fff; background-color: #e98205; } .paging a, .paging span { display: inline-block; margin: 0px 5px; border: 1px solid #bdbdbd; font-size: 14px; width: 52px; height: 52px; line-height: 52px; } .paging .prev, .paging .next { display: inline-block; } .paging .prev { background: url(../images/prev.png) no-repeat scroll center center; } .paging .next { background: url(../images/next.png) no-repeat scroll center center; } .paging a.active, .paging span { background-color: #e98205; border-color: #e98205; color: #fff!important; } .infoPage { background-color: #f2f2f2; position: relative; padding: 0px 0px 80px; overflow: hidden; width: 100%; } .infoPage .ys1 { background: url(../images/ys.png) no-repeat; background-attachment: fixed; width: 405px; height: 100%; position: absolute; left: 0; top: 0; } .infoPage .ys2 { background: url(../images/ys2.png) no-repeat scroll right bottom; background-attachment: fixed; width: 448px; height: 100%; position: absolute; right: 0; bottom: 0; } .infoPage .inner { position: relative; } .infoT { padding: 34px 0px; color: #212121; } .infoT .t { font-size: 32px; line-height: 1.4; margin-bottom: 5px; } .infoT .time { color: #828282; } .infoC { background-color: #fff; padding: 70px 64px; } .pager { color: #212121; text-align: center; margin-top: 25px; } .pager a:link, .pager a:visited { color: #212121; } .pager a:active, .pager a:hover { color: #fff; } .pager a { height: 58px; line-height: 58px; } .pager .list { background: url(../images/list.png) no-repeat scroll left center; padding-left: 32px; margin: 0px auto; display: inline-block; } .pager .prev, .pager .next { border: 1px solid #898989; display: block; position: relative; } .pager .prev { padding: 0px 38px 0px 0px; width: 138px; float: left; text-align: right; } .pager .next { padding: 0px 0px 0px 38px; width: 138px; float: right; text-align: left; } .pager .prev i { position: absolute; top: 0; height: 100%; background: url(../images/mjt1.png) no-repeat scroll left center; width: 31px; right: 108px; display: block; transition: all 0.3s 0s; -webkit-transition: all 0.3s 0s; } .pager .next i { position: absolute; top: 0; height: 100%; background: url(../images/mjt2.png) no-repeat scroll right center; width: 31px; left: 108px; display: block; transition: all 0.3s 0s; -webkit-transition: all 0.3s 0s; } .pager .prev:hover, .pager .next:hover { background-color: #e98205; border-color: #e98205; } .pager .prev:hover i { background-image: url(../images/mjt3.png); width: 56px; } .pager .next:hover i { background-image: url(../images/mjt4.png); width: 56px; } .pager .list:hover { color: #e98205; } .videoList dd { width: 49%; float: left; margin-bottom: 40px; position: relative; } .videoList dd:nth-child(2n+2) { float: right; } .videoList dd figure { display: block; position: relative; overflow: hidden; line-height: 0; } .videoList dd figure img { display: block; width: 100%; height: auto; line-height: 1; transition: 455ms; } .videoList dd figure .vico { display: block; width: 57px; height: 57px; background: url(../images/vico1.png) center no-repeat; position: absolute; right: 0; margin: auto; top: 0; left: 0; bottom: 0; } .videoList dd article { display: block; line-height: 57px; height: 57px; border-bottom: 1px solid #d9d9d9; text-align: center; color: #666666; font-size: 16px; font-weight: normal; position: relative; transition: 320ms; } .videoList dd article:before { content: ""; width: 100%; height: 1px; background: #f6792b; position: absolute; left: 0; bottom: -1px; opacity: 0; visibility: hidden; transform: scaleX(0); -webkit-transform: scaleX(0); -moz-transform: scaleX(0); transition: 426ms; transform-origin: left top; -webkit-transform-origin: left top; } .videoList dd:hover figure img { transform: scale(1.04); -webkit-transform: scale(1.04); -moz-transform: scale(1.04); } .videoList dd:hover article { color: #f6792b; } .videoList dd:hover article:before { opacity: 1; visibility: visible; transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); } /*news style end*/ /*prodcut style*/ .pro-info-t { font-size: 24px; color: #777; line-height: 1.4; text-align: left; } .pro-info-by { font-size: 16px; color: #8e8e8e; text-align: left; line-height: 1.8; } .pro-info-con .pageC { font-size: 16px; color: #676767; } .pro-img-demo { margin-top: 60px; } .pro-img-demo dd { float: left; display: block; margin-right: 3px; } .pro-img-demo .img { display: block; width: 100%; transition: 600ms; -webkit-transition: 600ms; } .pro-img-demo .img-item1 { width: 352px; } .pro-img-demo .img-item2 { width: 268px; } .pro-img-demo .img-item3 { width: 574px; margin-right: 0px; } .pro-img-demo .img-item3 figure { float: left; display: block; } .pro-img-demo figure { margin-bottom: 3px; position: relative; } .pro-img-demo .pro-kc-item1, .pro-img-demo .pro-kc-item3, .pro-img-demo .pro-kc-item6, .pro-img-demo .pro-kc-item7 { margin-bottom: 0px; } .pro-kc-item4, .pro-kc-item6 { margin-right: 3px; } .pro-kc-item4 { width: 58%; } .pro-kc-item7 { width: 57.9%; } .pro-kc-item5, .pro-kc-item6 { width: 41.4%; } .pro-kc-item5 { background-color: #ededed; } .pro-kc-item5 .txt { position: absolute; left: 0; top: 42%; color: #e98205; width: 100%; text-align: center; font-size: 2em; line-height: 1.2; } .productPage { padding: 35px 0px; } .proT { font-size: 30px; margin-bottom: 15px; } .prodcutDemo a:link, .prodcutDemo a:visited { color: #676767; } .prodcutDemo a:active, .prodcutDemo a:hover { color: #e87b00; } .prodcutDemo { padding-bottom: 10px; } .prodcutDemo ul { margin-left: -2%; } .prodcutDemo .item { float: left; display: block; width: 31.33%; margin: 0px 0px 2% 2%; } .prodcutDemo .img { overflow: hidden; } .prodcutDemo .img img { width: 100%; display: block; transition: all 0.6s 0s; -webkit-transition: all 0.6s 0s; } .ppnum { border: 1px solid #9f9f9f; height: 52px; line-height: 52px; text-align: center; color: #747474; font-size: 16px; font-family: arial, helvetica, sans-serif; position: relative; } .ppnum .cnum { color: #e98205; } .ppnum .arrow { width: 30px; z-index: 10; height: 100%; position: absolute; top: 0; } .ppnum .arrow i { width: 100%; height: 100%; display: block; transition: 300ms; -webkit-transition: 300ms; } .ppnum .prev { left: 17px; } .ppnum .next { right: 17px; } .ppnum .prev i { background: url(../images/mjt1.png) no-repeat scroll left center; } .ppnum .next i { background: url(../images/mjt2.png) no-repeat scroll right center; } .ppnum .prev:hover i { background-image: url(../images/mjt5.png); } .ppnum .next:hover i { background-image: url(../images/mjt6.png); } .ppnum .arrow:hover { width: 56px; } .prodcut-list a:link, .prodcut-list a:visited { color: #666; } .prodcut-list a:active, .prodcut-list a:hover { color: #fff; } .prodcut-list { margin-bottom: 50px; } .prodcut-list dt { background: url(../images/honor_t.jpg) no-repeat scroll left top #f6ad06; padding: 10px 4%; color: #fff; font-size: 24px; line-height: 1.2; } .prodcut-list dd { position: relative; overflow: hidden; font-size: 15px; line-height: 1.5; color: #666666; transition: 300ms; -webkit-transition: 300ms; } .prodcut-list .item1, .prodcut-list .item2, .prodcut-list .item3, .prodcut-list .item4, .prodcut-list .item5 { float: left; display: block; padding: 15px 0px 15px 4%; width: 15%; } .prodcut-list .item1 { width: 18%; } .prodcut-list .item2 { width: 19%; } .prodcut-list .item5 { width: 12%; } .prodcut-list .itemC { color: #787878; } .prodcut-list .twoItemC { background-color: #fbeee0; } .prodcut-list .itemC:hover { background-color: #777777; color: #fff; } .prodcut-list .more-l { background: url(../images/more_2.png) no-repeat scroll right center; padding-right: 15px; color: #fff; } .prodcut-list .twoItemC .more-l { color: #fbeee0; } .prodcut-list dd:hover .more-l { background-image: url(../images/more_3.png); } .blackBtn { position: relative; display: inline-block; line-height: 50px; color: #676767; } .blackBtn:before { content: ""; width: 100%; height: 5px; background-color: #e98205; position: absolute; left: 0; bottom: -3px; transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: transform .3s cubic-bezier(.4,0,.2,1); transition: transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden\9; } .blackBtn.active:before { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform-origin: 0; -webkit-transform-origin: 0; visibility: visible\9; } .blackBtn:hover { color: #e98205; } .pro-i-box a:link, .pro-i-box a:visited { color: #676767; } .pro-i-box a:active, .pro-i-box a:hover { color: #e87b00; } .pro-i-box { background-color: #f2f2f2; padding: 50px 0px; } .pro-i-box dd { float: left; display: block; width: 50%; } .pro-i-box dl { background-color: #fff; margin: 0px 45px 0px 86px; position: relative; } .pro-i-box .plogo { position: absolute; left: 3%; width: 25%; position: absolute; top: 0; } .pro-i-box .plogo img { width: 100%; display: block; } .pro-i-box .img { margin-left: 28%; width: 72%; } .pro-i-box .img img { width: 100%; display: block; } .pro-i-box .imgbox { background-color: #f2f2f2; position: relative; } .pro-i-box .t { background: url(../images/pro_t.jpg) no-repeat scroll right top #6c6c6c; font-size: 24px; padding: 10px 5%; color: #fff; } .pro-i-box .con { padding: 20px 5%; background-color: #fff; } .pro-i-box .item { border-bottom: 1px solid #cccccc; padding: 10px 0px; } .pro-i-box .item:last-child { border-bottom: 0px none; } .serviceLINK { position: absolute; right: -28px; bottom: 5%; background-color: #e98205; padding: 10px 74px 10px 12px; color: #fff; } .serviceLINK .txt { color: #fff; } .serviceLINK i { background: url(../images/mjt4.png) no-repeat scroll left center; width: 56px; right: 12px; height: 100%; display: block; position: absolute; top: 0; } .serviceLINK:hover { background-color: #6C6C6C; } .serviceLINK:hover i { -webkit-animation: mouse-dot 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite; animation: mouse-dot 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite; } @keyframes mouse-dot { from { opacity: 0; } 33% { opacity: 1; } to { transform: translateX(10px); -webkit-transform: translateX(10px); opacity: 0; } } @-webkit-keyframes mouse-dot { from { opacity: 0; } 33% { opacity: 1; } to { transform: translateX(10px); -webkit-transform: translateX(10px); opacity: 0; } } .proPage table { border-collapse: collapse; margin: 0 auto!important; width: 100%!important; font-size: 16px; } .proPage table tr td { border: 1px solid #676767; text-align: center; padding: 15px!important; margin: 0px!important; } .proPage table th { background-color: #6c6c6c!important; color: #fff; border: 1px solid #676767; } .proPage table tr:first-child { background-color: #6c6c6c!important; color: #fff; font-weight: bold; } .proPage table tr td:first-child { text-align: left; } /*prodcut style end*/ /*brand style*/ .concept-tab { padding: 38px 0px 18px; width: 80%; margin: 0px auto; } .concept-tab li { float: left; display: block; width: 33.33%; } .conceptItem { margin: 0px auto; width: 100px; color: #676767; font-size: 16px; line-height: 1.5; padding-bottom: 30px; position: relative; text-align: center; cursor: pointer; } .conceptItem .img { width: 60px; height: 60px; display: block; margin: 0px auto 15px; position: relative; } .conceptItem .img .ico { position: absolute; left: 0px; top: 0px; width: 60px; height: 60px; background-size: cover; background-repeat: no-repeat; background-position: center center; } .conceptItem .img .i2 { opacity: 0; visibility: hidden; } .conceptItem .i { background: url(../images/sj4.png) no-repeat; width: 20px; height: 14px; position: absolute; left: 50%; bottom: 0; margin-left: -10px; transition: 300ms; -webkit-transition: 300ms; opacity: 0; visibility: hidden; } .conceptItem:hover .img .i1, .concept-tab .active .conceptItem .img .i1 { opacity: 0; visibility: hidden; } .conceptItem:hover .img .i2, .concept-tab .active .conceptItem .img .i2 { opacity: 1; visibility: visible; -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: gelatine 0.5s 1; animation: gelatine 0.5s 1; } .conceptItem:hover .i, .concept-tab .active .conceptItem .i { opacity: 1; visibility: visible; } .concept-tab-con { background-color: #fff; border: 1px solid #e4e4e4; position: relative; overflow: hidden; } .concept-tab-c { padding: 38px 5%; position: absolute; left: 0; top: 0; overflow: hidden; color: #676767; } .concept-tab-c h4 { font-weight: normal; font-size: 25px; margin-bottom: 15px; color: #383838; } .make_transist { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .hidescale { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); filter: alpha(opacity=0); opacity: 0; } .showscale { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; -ms-transition-delay: .3s; transition-delay: .3s; z-index: 1; } .oneshwoTab .showscale { position: relative; display: block; } .spirit-T { text-align: center; color: #383838; } .spirit-T .t { font-size: 30px; } .spirit-T .c { font-size: 16px; } .spiritList { padding-top: 50px; margin-left: -2%; color: #676767; display: flex; flex-wrap: wrap;} .spiritList dd { width: 48%; margin-left: 2%; margin-bottom: 2%; position: relative;} .spiritList dd::before{ content: ""; position: absolute; width: 100%; height: 100%; border: 1px solid #eaeaea;} .spiritList article { padding: 35px 8%; } .spiritList article h3 { font-weight: normal; font-size: 24px; line-height: 1.5; margin-bottom: 15px; color: #383838; } /*brand style end*/ /*responsibility style*/ .responsibility-page { position: relative; width: 1000px; margin: 0px auto; } .responsibility-page .line { width: 3px; height: 100%; background-color: #bebebe; position: absolute; left: 63px; top: 0; } .responsibility-page dd, .responsibility-page dl { position: relative; } .responsibility-page .time { width: 128px; background-color: #787878; padding: 25px 0px; text-align: center; color: #fff; font-size: 16px; position: absolute; left: 0; top: 0; } .responsibility-page .con { margin-left: 206px; border-bottom: 1px solid #e4e4e4; padding-bottom: 30px; margin-bottom: 30px; position: relative; overflow: hidden; } .responsibility-page .t { font-size: 20px; line-height: 1.5; margin-bottom: 15px; color: #4a4a4a; } .responsibility-page .c { color: #a4a4a4; margin-bottom: 15px; } .responsibility-page .more { color: #e87b00; } .responsibility-page dd:hover .time { background-color: #e87b00; } .responsibility-page .con:hover .t { color: #e87b00; } .responsiblility-img li { float: left; display: block; width: 19%; margin: 12px 1% 0px 0px; overflow: hidden; } .responsiblility-img li img { width: 100%; display: block; } .ledmore:link, .ledmore:visited { color: #787878; } .ledmore:active, .ledmore:hover { color: #e87b00; } .ledmore { display: block; position: relative; top: -1px; text-align: center; padding: 5px 0px; } .ledmore .txt { background: url(../images/arrow.png) no-repeat scroll right center; padding-right: 26px; } /*responsibility style end*/ /*phosphorusNutrition style*/ .phos-t { font-size: 40px; font-weight: bold; color: #777777; } .phos-by { color: #8e8e8e; font-size: 18px; } .phos-dl { text-align: center; padding-top: 50px; } .phos-dl dd { display: inline-block; display: inline-block; *display: inline; *zoom: 1; margin: 0px 25px; } .phositem { position: relative; z-index: 1; display: block; margin: 0px auto; color: #787878; font-size: 16px; line-height: 1.5; background: url(../images/x1.png) no-repeat; background-size: cover; width: 180px; height: 207px; } .phositem .img { padding: 30px 0px 0px; display: block; width: 60px; height: 60px; margin: 0px auto 8px; position: relative; } .phositem .img .ico { position: absolute; left: 0px; top: 30px; width: 60px; height: 60px; background-size: cover; background-repeat: no-repeat; background-position: center center; } .phositem .img .i2 { opacity: 0; visibility: hidden; } .phositem:before { content: ""; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0%; top: 0%; background: url(../images/x2.png) no-repeat; background-size: cover; opacity: 0; transform: scale(0.7); -webkit-transform: scale(0.7); visibility: hidden; transition: all 0.5s ease 0s; -webkit-transform: all 0.5s ease 0s; } .phositem .name { display: block; text-align: center; width: 80%; margin: 0px auto; } .phositem .sj { background: url(../images/sj4.png) no-repeat scroll center bottom; width: 12px; height: 9px; position: absolute; left: 50%; margin-left: -6px; bottom: -22px; opacity: 0; visibility: hidden; } .phositem:hover:before, .phositem.active:before { opacity: 1; transform: scale(1.02); -webkit-transform: scale(1.02); visibility: visible; } .phositem:hover, .phositem.active { color: #fff; } .phositem:hover .img .i1, .phositem.active .img .i1 { opacity: 0; visibility: hidden; } .phositem:hover .img .i2, .phositem.active .img .i2 { opacity: 1; visibility: visible; -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: gelatine 0.5s 1; animation: gelatine 0.5s 1; } .phositem.active .sj { opacity: 1; visibility: visible; } .phos-con { width: 80%; margin: 0px auto 50px; } .phos-cimg { margin-left: -1%; padding-bottom: 40px; } .phos-cimg li { float: left; display: block; width: 32.33%; margin: 0px 0px 20px 1%; } .phos-cimg img { width: 100%; display: block; } .chT { font-size: 24px; line-height: 1.5; color: #000000; margin-bottom: 32px; } .phos-list { border-top: 1px solid #d4d4d4; } .phos-list a:link, .phos-list a:visited { color: #616060; } .phos-list a:active, .phos-list a:hover { color: #fff; } .phos-list li { border-bottom: 1px solid #d4d4d4; height: 55px; line-height: 55px; overflow: hidden; font-size: 18px; } .phos-list li .more { float: right; display: block; background: url(../images/more_jt.png) no-repeat scroll right center; padding-right: 18px; margin-right: 20px; color: #fff; font-size: 12px; transition: 300ms; -webkit-transition: 300ms; } .phos-list li a { display: block; position: relative; z-index: 1; padding-left: 8px; } .phos-list li a:before { content: ""; z-index: -1; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #e87b00; -webkit-transition: -webkit-transform .38s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .38s cubic-bezier(.4,0,.2,1); transition: transform .38s cubic-bezier(.4,0,.2,1); transition: transform .38s cubic-bezier(.4,0,.2,1),-webkit-transform .38s cubic-bezier(.4,0,.2,1); transform: scaleY(0); -webkit-transform: scaleY(0); -moz-transform: scaleY(0); transform-origin: 50% 100% 0; -webkit-transform-origin: 50% 100% 0; visibility: hidden\9; } .phos-list li a:hover:before { transform: scaleY(1); -webkit-transform: scaleY(1); -moz-transform: scaleY(1); transform-origin: 50% 0 0; -webkit-transform-origin: 50% 0 0; visibility: visible\9; } .phos-list li:hover .more { background-image: url(../images/more_jt2.png); padding-right: 44px; } .bgf2 { background-color: #F2F2F2; } /*phosphorusNutrition style end*/ /*hr style*/ .humanPage { width: 90%; margin: 0px auto; } .hrlist dd { float: left; display: block; width: 50%; } .hrItem { position: relative; overflow: hidden; } .hrItem .whitebg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/white_70.png) repeat; background: none rgba(255,255,255,0.7); transition: 300ms; -webkit-transition: 300ms; } .hrItem img { width: 100%; display: block; transition: all 0.9s cubic-bezier(0.445, 0.145, 0.355, 1) 0s; -webkit-transition: all 0.9s cubic-bezier(0.445, 0.145, 0.355, 1) 0s; } .hrItem .con { position: absolute; left: 0; top: 100%; padding: 0px 8%; width: 84%; color: #8e8e8e; margin-top: -45px; transition: top 600ms,marginTop .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: top 600ms,marginTop .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; } .hrItem .con .t { color: #212121; font-size: 20px; padding-bottom: 20px; line-height: 1.4; margin-bottom: 20px; border-bottom: 1px solid #8e8e8e; } .hrItem:hover .whitebg { background: url(../images/white_90.png) repeat; background: none rgba(255,255,255,0.9); } .hrItem:hover .con { top: 10%; margin-top: 0; } .hrItem:hover .con .t { color: #777777; border-bottom-color: #777777; } .hrItem:hover img { transform: scale(1.1); -webkit-transform: scale(1.1); } .join-t { padding: 32px 0px; font-size: 24px; } .slider-nav { float: left; display: block; width: 22%; } #joinPage { padding-bottom: 60px; } #joinPage .humanPage { background-color: #fff; padding: 40px 0px 60px; } .joinC { float: right; display: block; width: 67%; } .human-T { font-size: 20px; color: #212121; } .slider-nav .human-T { margin-left: 32px; } .slider-nav-list a:link, .slider-nav-list a:visited { color: #616060; } .slider-nav-list a:active, .slider-nav-list a:hover { color: #fff; } .slider-nav-list { border-top: 1px solid #dbdbdb; margin-top: 10px; padding-top: 20px; } .slider-nav-list a { display: block; padding: 8px 0px 8px 10%; font-size: 16px; } .slider-nav-list a.active, .slider-nav-list a:hover { background-color: #e98205; color: #fff; } .joinBy { margin: 50px 5% 20px 0px; } .joinSelect a:link, .joinSelect a:visited { color: #676767; } .joinSelect a:active, .joinSelect a:hover { color: #fff; } .joinSelect { padding: 20px 0px 30px; line-height: 28px; } .joinSelect .sebox { float: left; display: block; margin: 0px 28px 8px 0px; } select.ss { width: 170px; height: 28px; line-height: 28px; padding: 0px 0px 0px 15px; vertical-align: middle; border: 1px solid #dbdbdb; background-color: #e5e5e5; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: "microsoft yahei"; color: #646464; cursor: pointer; display: block; font-size: 14px; margin: 0px 0px 0px 4px; background: url(../images/SICO.png) no-repeat scroll 94% center; float: left; display: block; } .no-csstransitions select.ss { padding-left: 0; background: none; } select.ss option { padding: 2px 15px; } select.ss:hover { color: #212121; border-color: #E98205; } .chabtn { width: 52px; height: 28px; height: 28px; text-align: center; float: left; display: block; background-color: #dbdbdb; } .chabtn:hover { background-color: #E98205; } .joinList { font-size: 14px; padding: 10px 0px 40px; color: #969696; border-top: 1px solid #DBDBDB; padding-top: 10px; } .joinList dd { margin-bottom: 3px; position: relative; } .joinList .joindt { overflow: hidden; display: flex; cursor: pointer; padding: 10px 0;} .joinList .joinT { background-color: #838383; display: flex; cursor: pointer; transition: 400ms; -ms-transition: 400ms; -webkit-transition: 400ms; -moz-transition: 400ms;} .joinList .joindt .joinspan ,.joinList .joinT .joinspan { line-height: 1.5; padding: 14px 0; width: 20%; margin-left: 4%; } .joinList .joindt .joinspan:nth-child(1),.joinList .joinT .joinspan:nth-child(1){ /* text-align: left; */ } .joinList .joindt .joinspan:nth-child(2),.joinList .joinT .joinspan:nth-child(2){ width: 10%; } .joinList .joindt .joinspan:nth-child(4),.joinList .joinT .joinspan:nth-child(4){ width: 25%; } .joinList .joinT .joinspan4{ width: 6%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .joinList .joinT .joinspan { color: #fff; } .joinList .ib { width: 21px; height: 21px; display: block; position: relative; transition: 400ms; -webkit-transition: 400ms; -moz-transition: 400ms; -ms-transition: 400ms; } .joinList .ib i { display: block; background-color: #fff; } .joinList .ib .ic1 { width: 2px; height: 21px; margin-left: 10px; } .joinList .ib .ic2 { width: 21px; height: 2px; position: absolute; left: 0; top: 50%; margin-top: -1px; } .joinList .joinB { display: none; } .joinList .joinCon { width: 91%; margin: 0px auto; padding: 30px 0px 22px; overflow: hidden; } .joinList .joinCon .pageC { color: #969696; } .hline { border-top: 1px solid #eeeeee; padding: 22px 0px; margin-top: 35px; } .hline a:link, .hline a:visited { color: #e98205; text-decoration: underline; } .hline a:active, .hline a:hover { color: #212121; } .joinList .active .ib { transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: rotate(90deg); } .joinList .active .ib .ic2 { display: none; } .joinList dd.active .joinT, .joinList dd:hover .joinT { background-color: #e98205; } /*hr style end*/ /*investor style */ .investorBanner a:link, .investorBanner a:visited { color: #fff; } .investorBanner a:active, .investorBanner a:hover { color: #e98205; } .investorBanner { color: #fff; position: absolute; left: 0; bottom: 0; width: 100%; } .investorBanner .t { font-size: 16px; margin-bottom: 10px; line-height: 1.2; } .investorBanner .t .num { font-family: "pf_din_text_comp_proregular"; padding-left: 10px; } .zhangdie { font-size: 34px; font-family: "pf_din_text_comp_proregular"; line-height: 1.2; margin-bottom: 14px; } .zhangdie .ico { font-size: 20px; background: url(../images/dd.png) no-repeat scroll right center; padding: 0px 26px 0px 18px; text-transform: uppercase; } .zhangdie .ico.green { background: url(../images/zz.png) no-repeat scroll right center; } .investorBanner .list { border-top: 1px solid #fff; border-bottom: 1px solid #fff; width: 460px; padding: 8px 0px; } .investorBanner .list li { float: left; display: block; font-size: 13px; width: 115px; } .investorBanner .c { padding: 18px 0px; font-size: 12px; } .filler { position: absolute; display: block; -webkit-transition: 0.3s ease 0s; transition: 0.3s 0s; } .noticeList { margin-left: -2%; padding: 20px 0px; } .noticeList li { float: left; display: block; width: 23%; margin: 0px 0px 2% 2%; } .noticeList .item { background-color: #f6f6f6; position: relative; display: block; padding: 67px 18px 18px; } .noticeList .item .time { position: absolute; left: 0px; top: 0px; background-color: #e98205; color: #fff; text-align: center; width: 67px; height: 67px; font-family: Arial; } .noticeList .item .time .num { font-size: 24px; } .noticeList .t { color: #8e8f8f; height: 50px; overflow: hidden; margin: 25px 0px 36px; } .noticeList .item .down-btn { color: #8e8f8f; background: url(../images/pdfico.png) no-repeat scroll left center; height: 35px; display: block; padding-left: 40px; line-height: 35px; width: 60px; -webkit-transition: 0.3s; transition: 0.3s; } .noticeList .filler { background-color: #e98205; z-index: 5; } .noticeList .filler-left { width: 1px; height: 0%; left: 0%; top: 0%; } .noticeList .filler-right { width: 1px; height: 0%; right: 0%; bottom: 0%; } .noticeList .filler-top { width: 0%; height: 1px; right: 0%; top: 0%; transition-delay: 0.3s; -webkit-transition-delay: 0.3s; } .noticeList .filler-bottom { width: 0%; height: 1px; left: 0%; bottom: 0%; transition-delay: 0.3s; -webkit-transition-delay: 0.3s; } .noticeList .item:hover .filler-left { height: 100%; } .noticeList .item:hover .filler-right { height: 100%; } .noticeList .item:hover .filler-top { width: 100%; } .noticeList .item:hover .filler-bottom { width: 100%; } .noticeList .item:hover .down-btn { background-image: url(../images/pdfico2.png); color: #e98205; } #noticePage { padding: 20px 0px 60px; } .allMore:link, .allMore:visited { color: #676767; } .allMore:active, .allMore:hover { color: #fff; } .allMore { display: block; width: 170px; height: 42px; text-align: center; line-height: 42px; margin: 0px auto; border: 1px solid #676767; position: relative; z-index: 1; } .allMore:before { content: ""; width: 100%; height: 100%; background-color: #e98205; position: absolute; left: 0; z-index: -1; bottom: 0px; transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition: transform .3s cubic-bezier(.4,0,.2,1); transition: transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden\9; } .allMore:hover:before { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform-origin: 0; -webkit-transform-origin: 0; visibility: visible\9; } .allMore:hover { border-color: #e98205; } #presentationPage { padding-bottom: 60px; } .presentationPage { padding: 40px 0px 0px; } .presentationList a:link, .presentationList a:visited { color: #676767; } .presentationList a:active, .presentationList a:hover { color: #e98205; } .presentationList { padding-bottom: 40px; } .presentationList dd { position: relative; background-color: #fff; overflow: hidden; color: #676767; margin-bottom: 12px; } .presentationList .item { padding: 20px 15% 25px 16px; border: 1px solid #bebebe; } .presentationList .time { background: url(../images/time_ico.png) no-repeat scroll left center; padding-left: 22px; color: #999999; } .presentationList .t { font-size: 18px; font-weight: bold; margin: 0px 0px 12px; line-height: 1.5; } .presentationList .pdf { background: url(../images/pdf2.png) no-repeat; width: 38px; height: 53px; position: absolute; right: 5%; top: 30px; } .presentationList .filler { background-color: #e98205; z-index: 5; } .presentationList .filler-left { width: 1px; height: 0%; left: 0%; top: 0%; } .presentationList .filler-right { width: 1px; height: 0%; right: 0%; bottom: 0%; } .presentationList .filler-top { width: 0%; height: 1px; right: 0%; top: 0%; -webkit-transition: 0.8s ease 0.3s; transition: 0.8s ease 0.3s; } .presentationList .filler-bottom { width: 0%; height: 1px; left: 0%; bottom: 0%; -webkit-transition: 0.8s ease 0.3s; transition: 0.8s ease 0.3s; } .presentationList dd:hover .filler-left { height: 100%; } .presentationList dd:hover .filler-right { height: 100%; } .presentationList dd:hover .filler-top { width: 100%; } .presentationList dd:hover .filler-bottom { width: 100%; } .presentationList dd:hover .pdf { background-image: url(../images/pdf1.png); -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: gelatine 0.5s 1; animation: gelatine 0.5s 1; } .prese-l .allMore { margin: 0; } .prese-l, .prese-r { float: left; display: block; width: 49%; } .prese-r { margin-left: 2%; } .prese-r-box { padding: 34px 6%; border: 1px solid #bebebe; background-color: #fff; } .prese-r-box .t { font-weight: bold; font-size: 18px; color: #676767; line-height: 1.5; margin-bottom: 50px; } .prese-r-box .tel { background: url(../images/add_pr2.png) no-repeat scroll left 7px; padding-left: 30px; margin-bottom: 8px; } .prese-r-box .email { background: url(../images/add_pr1.png) no-repeat scroll left 7px; padding-left: 30px; } .prese-r .r{ font-size: 16px; font-weight: bold; margin: 25px 0 0 6%; float: none;} .prese-r .r a { color: #676767; } .prese-r-c { font-size: 16px; font-weight: bold; margin-top: 25px; text-align: right;} .prese-r-c a { color: #676767; } /*investor style end*/ /*contact style*/ .mapBox { height: 400px; } .contactPage { position: relative; overflow: hidden; } .contactPage .bgf2 { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; } .contactPage .inner { position: relative; z-index: 2; } /* .contactList dd { float: left; display: block; width: 50%; } */ .contactList .t { padding: 40px 0px 8px; font-size: 24px; color: #000000; } .con-left-box .c { border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; padding: 22px 10px 45px 0px; font-size: 16px; color: #676767; } .con-left-box .c-i { padding-left: 30px; background-position: left 6px; background-repeat: no-repeat; margin-bottom: 8px; } .con-left-box .c-i1 { background-image: url(../images/c_i1.png); } .con-left-box .c-i2 { background-image: url(../images/c_i2.png); } .con-left-box .c-i3 { background-image: url(../images/c_i3.png); } .con-left-box .c-i4 { background-image: url(../images/c_i4.png); } .addressList { display: flex; margin-left: -3.33%;} .addressList li { position: relative; width: 30%; padding: 48px 1.33% 48px 2%;} .addressList li::before{ content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: #cccccc;} .addressList li:first-child::before{ display: none;} .addressList .add { font-size: 18px; line-height: 1.5; color: #414141; margin-bottom: 10px; } .con-right-box .t { padding-left: 8%; } .formbox { margin-left: 8%; } .formbox p { padding-bottom: 10px; } .formbox .ctxt { color: #212121; padding: 12px 3%; height: 25px; line-height: 25px; width: 93%; font-size: 14px; font-family: "microsoft yahei"; border: 1px solid #c9c9c9; background-color: #F2F2F2; } .formbox .ctxt3 { height: 154px; resize: none; } .contactPage a.moreMess { color: #fff; } .moreMess { padding: 12px 3%; height: 25px; line-height: 25px; width: 93.5%; font-size: 14px; color: #fff; background-color: #e98205; display: block; position: relative; z-index: 1; } .moreMess .ico { background: url(../images/mjt4.png) no-repeat scroll left center; height: 100%; position: absolute; top: 0; width: 56px; right: 2%; } .moreMess:before { content: ""; width: 100%; height: 100%; background-color: #212121; position: absolute; left: 0; z-index: -1; bottom: 0px; transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform .5s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .5s cubic-bezier(.4,0,.2,1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden\9; } .formbox input[type="text"]:focus, .formbox textarea:focus { border-color: #e98205; color: #e98205; } /*contact style end*/ .phosinfo-page { overflow: hidden; width: 920px; } .phosinfo-page table { width: 100% !important; margin: 0 !important; padding: 0 !important; } .inner900 { width: 900px; margin: 0px auto; } @media screen and (max-width:1024px) { .inner900 { width: 90%; } }