@charset "utf-8"; html, body, div, span, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, video { margin: 0; padding: 0; outline: 0; border: 0; background: transparent; font-size: 100%; font-style: normal; } html { -webkit-tap-highlight-color: rgba(0,0,0,0); overflow-x : hidden; } body { background: #2a2a2a; color: #aaa; font-size: 14px; line-height: 1.42857143; font-family: Microsoft YaHei, PingFang SC, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif; overflow-x: hidden } /*html.mac body{font-family:"PingFang SC",Microsoft YaHei,Helvetica,Arial,sans-serif;}*/ *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } article, hgroup, menu, nav, section, aside, details, figcaption, figure, footer, header { display: block; } nav ul, ul, li { list-style: none; } blockquote { quotes: none; } blockquote:before, blockquote:after { content: none; } a { color: #ccc; vertical-align: baseline; text-decoration: none; font-size: 100%; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; margin: 0; padding: 0; } a, input { outline: none; } input, select, textarea { outline: none; } a:hover, a:focus { color: #F4CE58; text-decoration: none; cursor: pointer; } img { max-width: 100%; height: auto; } ins { color: #323841; background-color: #ff9; text-decoration: none; } mark { color: #323841; background-color: #ff9; font-weight: bold; font-style: italic; } @font-face { font-family: "Poppins"; /*src: url(../fonts/Poppins-L.otf) format('truetype');*/ font-weight: normal; font-style: normal; } @font-face { font-family: "HELVETICANEUELTPRO"; /*src: url(../fonts/HELVETICANEUELTPRO-THEX.OTF) format('truetype');*/ font-weight: normal; font-style: normal; } .PostShow:after, article:after, header:after, .row:after { clear: both; } .PostShow:before, .PostShow:after, .PostShow:after, .row:before, .row:after { content: " "; display: table; } button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; } @font-face { font-family: 'iconfont'; src: url('../fonts/iconfont.eot'); src: url('../fonts/iconfont.eot') format('embedded-opentype'), url('../fonts/iconfont.woff2') format('woff2'), url('../fonts/iconfont.woff') format('woff'), url('../fonts/iconfont.ttf') format('truetype'), url('../fonts/iconfont.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } /*----------- container -----------*/ .container { margin: 0 auto; max-width: 1260px; padding: 0 10px; overflow: hidden; } .container.Wauto { padding: 0 } .containe { position: relative; max-width: 1260px; margin: 0 auto; color: #fff; padding: 0 20px; } a:hover, a:focus { } /*----------- 头部 -----------*/ .header { padding-top: 72px; } .header .header-nav { position: fixed; width: 100%; float: left; background-color: rgba(0, 0, 0, .7); z-index: 886; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; top: 0 } .header .header-nav.fixed { background-color: rgba(0, 0, 0,.7); opacity: 1 } .header .logo { position: absolute; font-size: 0px; height: 35px; overflow: hidden; display: block; text-indent: -20000em; width: auto; background-size: 100% 100%; top: 50%; margin-top: -18px; } .header .logo a { display: block; color: #999; } .header .logo .logob { display: none } .header .container { overflow: visible } .logo img { /*height: 35px;*/ width: 230px; height: 43px; } .mLogo { height: 60px; } .mLogo .logo { display: none } .header.opaque { padding-top: 0px; } .header.opaque .header-nav { background-color: rgba(0, 0, 0, 0); } .header.opaque .header-nav.fixed { background-color: rgba(0, 0, 0,0.7); opacity: 1; } .header.opaque .navbar a, .header.opaque .navbar i { color: #FFFFFF; opacity: 0.6 } .header.opaque .navbar li.active > a, .header.opaque .navbar li.active i { color: #FFFFFF; opacity: 1 } .navbar li.on > a { color: #fff; } .header.opaque .navbar li:after { visibility: hidden; opacity: 0 } .header.opaque .fixed .navbar li:after { visibility: visible; opacity: 1 } .header.opaque .header-nav.fixed .navbar a, .header.opaque .inner .navbar a, .header.opaque .header-nav.fixed .navbar i, .header.opaque .inner .navbar i { color: # { %navColor% } ; opacity: 1 } .header.opaque .header-nav.fixed .inner .navbar li > ul > li a, .header.opaque .inner .navbar li > ul > li a { color: #888; } .header.opaque .inner .navbar a:hover { color: #fff; } .header.opaque .header-nav.fixed .navbar li.active > a, .header.opaque .header-nav.fixed .navbar li.on > a, .header.opaque .header-nav.fixed .navbar li.active > i, .header.opaque .header-nav.fixed .navbar li.on > i { color: #F4CE58; } .header.opaque .logo .logoa, .header.opaque .header-nav.fixed .logo .logob { display: none } .header.opaque .logo .logob, .header.opaque .header-nav.fixed .logo .logoa { display: block } .header.noOpaque .navbar a { line-height: 72px; } .header.noOpaque .inner .navbar a { line-height: 42px; } .header.noOpaque .inner .navbar i { color: #333 } /*导航栏*/ .navbar { float: right; } .navbar li { display: block; float: left; margin: 0px 0px; position: relative; min-width: 50px; text-align: center; padding: 0px 20px; } .navbar a { display: inline-block; line-height: 80px; font-size: 16px; color: #fff; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } .navbar i { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; margin-left: 4px; } .header-nav.fixed .navbar a { line-height: 72px; } .header-nav.fixed .navbar>li>ul>li>a { line-height: 40px; } .navbar li.active>a, .navbar li.on>a, .navbar li.active>i, .navbar li.on>i { color: #F4CE58; } .navbar li:after { background: #F4CE58; content: ""; height: 4px; width: 0px; position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; border-radius: 50px; } .navbar li.active:after, .navbar li:hover:after { width: 10px; } /*inner*/ .inner { display: none; position: absolute; z-index: 49; width: 100%; top: 60px; left: 0 } .inner li { width: 100%; margin: 0; height: 43px; overflow: hidden; padding: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease } .inner li i { position: absolute; right: 20px; top: 7px; width: 28px; height: 28px; line-height: 28px; z-index: 3; background: rgba(255,255,255,.3); border-radius: 300px; color: #fff; cursor: pointer; margin: 0; } .inner li.navOn { height: auto } .inner li.navOn i { transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); } .inner li a { display: block; font-size: 16px; font-weight: 300; line-height: 42px; padding: 0px 55px 0 55px; border-bottom: 1px solid rgba(255,255,255,.1); background-color: rgba(0,0,0,.8); } .inner li#nvabar-item-index { height: 44px; } .inner li#nvabar-item-index a { border-top: 1px solid rgba(255,255,255,.1); } .inner li a:hover { background: #F4CE58; color: #fff; border-bottom: 1px solid #F4CE58; } .inner .navbar li.active:after, .inner .navbar li:hover:after { width: 0 } .navbar li>ul>li:before { background-color: transparent; content: ''; transition: all 0.3s; } .navbar li.active:before, .navbar li.on:before { width: 100%; left: 0; } .inner li>ul>li a { background-color: rgba(0,0,0,.7); font-size: 14px; } #navBox>div>ul>li:hover>ul { top: 100%; filter: alpha(opacity=100)!important; opacity: 1!important; max-height: inherit; } #navBox>div>ul>li>ul { position: absolute; width: 160px; top: 130%; left: 50%; transform: translateX(-50%); text-align: center; padding: 20px 0; z-index: 60; filter: alpha(opacity=0)!important; opacity: 0!important; -webkit-transition: all .3s ease; -o-transition: top .3s ease; transition: all .3s ease; max-height: auto; overflow: hidden; background: rgba(255,255,255,0.96); border-top: 2px solid #F4CE58; visibility: hidden } #navBox>div>ul>li.on>ul { visibility: visible } #navBox>div>ul>li>ul>li a { float: none; display: block; padding: 0px 0px 0px; color: #666; font-size: 14px; text-align: center; line-height: 42px; opacity: 1 } #navBox>div>ul>li>ul>li:after { display: none } #navBox>div>ul>li>ul>li { width: 100%; padding: 0; margin: 0; font-size: 14px; } #navBox>div>ul>li>ul>.on a { color: #000!important; } #navBox>div>ul>li>ul>li.active a { } #navBox>div>ul>li>ul>li.on>a { color: #fff } .header .moble-bars { padding: 0; margin: 15px 0 0; font-size: 21px; float: right; color: #999; display: none; position: relative; z-index: 99 } .header a:hover.moble-bars { color: #F4CE58 } .fixed { left: 0; opacity: 0.98; position: fixed; right: 0; top: 0; width: 100%; z-index: 888; } /*----------- search-top -----------*/ .searchBox { display: none } .search-pup { position: relative; } .search-pup form input:focus { width: 180px } .search-pup form button { position: absolute; right: 0px; top: 0px; color: #000; background: 0 0; border: none; padding: 0; margin: 0; line-height: normal; font-size: 18px; font-weight: 300; outline: 0; cursor: pointer; width: 50px; height: 35px; background: #F4CE58; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } /*----------- breadcrumb -----------*/ .breadcrumb { max-width: 1220px; margin: 0 auto; padding: 12px 0; clear: both; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.1); text-indent: 0px } .fa-angle-right, .fa-bullhorn { font-size: 16px; margin: 0 4px; } /*----------- article -----------*/ .Wauto { width: 100%; max-width: none; padding: 0; } .main { width: 100%; float: left } .w1200 { padding: 0; clear: both; } .w1200 .article { width: 100%; margin-right: 0; } .PostBox { clear: both; } .PostBox.advBg { background: #2D2D2D; } .PostBox.serviceBg { background: #181818 } .PostBox.caseBg { background: #2D2D2D } .PostBox.aboutBg { background: #181818 } .PostBox.process { background: #2D2D2D } .PostBox.newsBg { background: #181818 } .PostBox.hbBg { background: #2D2D2D; } .PostBox.about .post { padding: 0; max-width: 100%; position: relative; } .PostBox.about .post .postAbout { height: auto; width: 100%; position: relative; z-index: 1; padding: 110px 0 } .PostBox.about .post .postTitle { padding: 0px 0px 20px 0; text-align: left; } .PostBox.about .post .PostText { width: 92%; line-height: 24px; color: #999; padding-top: 30px; padding-bottom: 30px; position: relative; z-index: 2; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; text-align: justify; text-justify: distribute-all-lines; -webkit-text-align-last: justify; } .PostBox.about .postLeft, .PostBox.about .postRight { display: inline-block; } .PostBox.about .postLeft { width: 50%; position: absolute; top: 0; left: 0; bottom: 0; background-color: #333; background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(../images/cbg.jpg) } .PostBox.about .postLeft .mask { width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.4); z-index: 1 } .PostBox.about .postRight { vertical-align: middle; padding-left: 55% } .PostBox.about .post .postTitle:after { right: auto; } .PostBox.about .post .more { text-align: left; } .article { margin-right: 378px; min-height: 600px; } .post { max-width: 1260px; margin: 0 auto; padding: 100px 10px 100px; } .post.list, .post.tags { padding: 10px 10px 50px; } .post.news.top { padding-top: 10px; padding-bottom: 50px; } .post .postTitle { text-align: center; padding-bottom: 15px; position: relative; margin-bottom: 1.5%; z-index: 2; } .post .postTitle h3 { font-size: 28px; font-weight: normal; position: relative; text-indent: 2px; letter-spacing: 0em; display: inline-block; margin-bottom: 3px; color: #fff; opacity: 0.9; } .post .postTitle span { clear: both; display: inline-block; width: 100%; color: #fff; filter: alpha(opacity=50); opacity: 0.5; font-size: 12px; } .post .postTitle .title1 { font-size: 16px; text-transform: uppercase; color: #fff; font-family: HELVETICANEUELTPRO-THEX; filter: alpha(opacity=50); opacity: 0.5; margin-bottom: 3px; } .post .postTitle:after { background: rgba(255,255,255,0.3); content: ""; height: 1px; width: 45px; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto } .post .PostShow { position: relative; } .post .PostShow ul { width: 100%; } .post .PostShow li, .imgShow { width: 23.5%; float: left; display: inline; margin: 1.5% 0.65% 1.5% 0.85%; overflow: hidden; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; text-align: center; vertical-align: top; } .msk { background: #000; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; opacity: 0 } .post li:hover a .msk, .imgShow a:hover .msk, .post .PostShow .item .post-img:hover .msk { background: #000; opacity: 0.7 } .post .PostShow .item { text-align: center; } .post .PostShow .item h4, .post li h4, .imgShow h4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; clear: both; margin: 0 0 5px; font-size: 16px; font-weight: normal; padding: 0 20px; color: #333; } .post .PostShow .item i, .post .PostShow li i, .imgShow i { color: #999; display: block; font-family: Arial; font-size: 12px; font-style: normal; text-align: center; line-height: 20px; padding: 0 10px; height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post .PostShow .item h2, .post .PostShow li i.h2 { height: 40px; white-space: normal; } .post .PostShow li .post-img, .imgShow .post-img { width: 100%; margin-bottom: 16px; overflow: hidden; } .post .PostShow li img, .post .PostNews li img { -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .post .PostShow li:hover img, .post .PostNews li:hover img { transform: scale(1.08) } .post-img { float: left; height: auto; margin-left: 0; margin-right: 2.8169%; max-width: 290px; width: 25%; position: relative; } .post .PostShow .item .post-img { width: 100%; margin-bottom: 16px; overflow: hidden; } .post .PostShow li img, .post .PostNews li img, .post .PostShow .item img { position: absolute; top: 0; left: 0; } .post-img:after { content: ''; display: block; padding-top: 75%; } .post .PostShow .item .post-img:after { padding-top: 75%; } .post.news .post-img:after { padding-top: 100%; } .serviceBg .post .PostShow li i.h2 { height: 20px; } .caseBg .post-img { margin: 0 } .caseBg .post .postTitle { margin-bottom: 35px; } .caseBg .post .loading { max-width: none; margin: 0 } .caseBg .post-text { position: absolute; top: 40%; transform: translateY(-50%); width: 100%; opacity: 0; visibility: hidden; z-index: 2; -webkit-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .caseBg .post li:hover .post-text { opacity: 1; visibility: visible; top: 50%; } .caseBg .post li { width: 25%; margin: 0%; position: relative; } .caseBg .post li h4 { color: #fff } .caseBg .post li h4 a, .caseBg .post li i { color: #fff; font-size: 14px; } .caseBg .post li h4 a { font-size: 16px; } .post .PostMix ul { display: block; font-size: 0; } .post .PostMix li { width: 25%; display: inline-block; margin: 0; overflow: hidden; text-align: center; vertical-align: top; } .post .PostMix .post-img { float: none; width: 100%; max-width: none; } .post .PostMix li img { position: absolute; top: 0; left: 0; } .post .PostMix .cateTab { text-align: center; margin-bottom: 30px; } .post .PostMix .cateTab span.button { border: medium none; background: rgba(0,0,0,.6); color: rgba(255,255,255,.6); margin: 4px; height: 30px; line-height: 30px; padding: 0 14px; display: inline-block; cursor: pointer; border-radius: 50px; } .post .PostMix .cateTab span.button.mixitup-control-active { background: #F4CE58; color: #000; } .post .PostMix .owl-carousel .owl-item img { position: absolute; top: 0; left: 0; } #owl1.owl-carousel .owl-nav .owl-next, #owl1.owl-carousel .owl-nav .owl-prev { top: 42% } #owl1.owl-carousel .item .imgText { padding-top: 25px; clear: both; } /*news*/ .post.news { max-width: 1260px; } .post.news .PostNews .imgBox { position: relative; overflow: hidden; } .post.news .PostNews .imgBox:after { content: ''; display: block; padding-top: 72%; } .post.news .owl-carousel .item .imgBox img { position: absolute; top: 0; left: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .post.news .owl-carousel .item:hover .imgBox img { transform: scale(1.1) } .post.news li { width: calc(100% / 4 - 20px); float: left; margin: 15px 20px 15px 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; padding: 0; } .post.news .PostNews { margin-right: -20px; } .post.news li .imgText { text-align: left; background: #222; padding: 15px 15px 35px 15px; position: relative; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .post.news li:hover .imgText { background: #F4CE58; } .post.news .imgText p { height: 44px; overflow: hidden; line-height: 22px; padding: 0px; font-size: 12px; color: #999; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .post.news .imgText p.time, .post.news .imgText i { position: absolute; left: 15; bottom: 12px; height: 12px; line-height: 12px; } .post.news .imgText h4 { font-size: 14px; padding: 0px 0 5px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post.news .imgText i a { color: #F4CE58 } .post.news .imgText i { left: auto; right: 55px; bottom: 10px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; opacity: 0 } .post.news li:hover .imgText a, .post.news li:hover .imgText i a, .post.news li:hover .imgText p { color: #000; } .post.news .item:hover .imgText i, .post.news li:hover .imgText i { right: 15px; opacity: 1; } .post.news .owl-carousel .item .imgText { padding: 15px 15px 40px; text-align: left; background: #222; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .post.news .owl-carousel .item:hover .imgText { background: #F4CE58; color: #000; } .post.news .owl-carousel .item:hover .imgText a, .post.news .owl-carousel .item:hover .imgText p, .post.news .owl-carousel .item:hover .imgText h4 { color: #000; } .post li a i.fa, .imgShow a i.fa, .post .PostShow .owl-item a i.fa { font-family: FontAwesome; top: 50%; color: #FFF; text-align: center; position: absolute; width: 100%; z-index: 2; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; filter: alpha(opacity=0); opacity: 0; text-shadow: none; font-size: 0; line-height: 0; overflow: visible } .post li a:hover i.fa, .imgShow a:hover i.fa, .post .PostShow .owl-item a:hover i.fa { font-size: 25px; filter: alpha(opacity=100); opacity: 1; } .post.news li a:hover i.fa { font-size: 25px; } .post.case .more { padding: 0 0 35px 0; } .post .more { padding: 35px 0 0; text-align: center; clear: both; } .post .more a { padding: 8px 30px; display: inline-block; background: rgba(0,0,0,0.7); text-shadow: none; font-size: 14px; position: relative; color: rgba(255,255,255,0.6); border-radius: 50px; } .post .more a:hover { background: #F4CE58; color: rgba(0,0,0,1) } .post .more a:after { background: #F4CE58; content: ""; height: 100%; width: 100%; position: absolute; left: 0; top: 0; webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; border-radius: 50px; transform: scale(0); opacity: 0 } .post .more a:hover:after { width: 100%; transform: scale(1); opacity: 1 } .post .more a span { position: relative; z-index: 1 } .post .more a:hover:after { width: 100%; } .PostBox.newsBg .post.news .PostNews { margin-right: 0px; } .PostBox.newsBg .owl-carousel .owl-nav .owl-prev, .PostBox.newsBg .owl-carousel .owl-nav .owl-next { top: 50% } /*流程*/ .PostBox.process .owl-carousel { width: 80%; margin: 0 auto } .PostBox.process .owl-carousel.owl-drag .owl-item { text-align: center; } .PostBox.process ul { margin-top: 20px; position: relative; } .PostBox.process li { display: inline-block; vertical-align: top; text-align: center; width: 100%; padding: 0 5px; } .PostBox.process li h5 { font-weight: normal; } .PostBox.process li .listId, .PostBox.process li .iBg { width: 64px; height: 64px; line-height: 64px; text-align: center; display: block; margin: 10px auto; background: #484848; border-radius: 100px; color: #999; font-size: 30px; font-family: HELVETICANEUELTPRO; webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; transform: scale(0.8); position: relative; z-index: 1 } .PostBox.process li .iBg { width: 78px; height: 78px; top: 50%; left: 50%; margin-top: -39px; margin-left: -39px; position: absolute; z-index: 0; transform: scale(0); opacity: 0 } .PostBox.process li:hover .listId { background: #F4CE58; color: #000; transform: scale(1) } .PostBox.process li:hover .iBg { background: #F4CE58; color: #000; transform: scale(.95); opacity: 0.3 } .PostBox.process .owl-carousel:after { content: ""; height: 1px; width: 100%; position: absolute; left: 0; top: 60px; border-bottom: 1px dashed rgba(255,255,255,0.5); opacity: 0.2; overflow: hidden; display: block; } .PostBox.process .owl-carousel .owl-nav i { font-size: 20px; } .PostBox.process .owl-carousel .owl-nav button.owl-next, .PostBox.process .owl-carousel .owl-nav button.owl-prev { margin-top: auto; top: 61px; } .PostBox.process .owl-carousel .owl-nav button.owl-next { right: -10px; } .PostBox.process .owl-carousel .owl-nav button.owl-prev { left: -10px; } /*合作伙伴*/ .flip-container { margin: 0px; display: inline-block; -webkit-perspective: 500; -moz-perspective: 500; -ms-perspective: 500; perspective: 500; -ms-transform: perspective(500px); -moz-transform: perspective(500px); /transform-style: preserve-3d; } .flipper { position: relative; width: 150px; height: 62px; transition: 0.6s; transform-style: preserve-3d; text-align: center; } /* 触发翻转 */ .flip-container:hover .flipper { transform: rotateY(180deg); } .front, .back { position: absolute; left: 0; top: 0; backface-visibility: hidden; /*重要*/ width: 100%; height: 100%; text-align: center; } .front { transform: rotateY(0deg); z-index: 2; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; opacity: .2 } .back { transform: rotateY(-180deg); } .hbList.owl-carousel.owl-drag .owl-item { text-align: center; } .hbList.owl-carousel .owl-item img { width: auto; display: inline-block; } .hbList.owl-carousel { padding: 0 0px; } /*moble*/ .moble { max-width: 1260px; margin: 0 auto; height: 0px; background: rgba(0,0,0,0.7); width: 100%; padding: 0 10px; display: none; position: fixed; top: 0; z-index: 889 } .moble a.moble-bars, .moble a.search-btn { -webkit-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease } .archive-top { max-width: 1260px; margin: 0 auto; padding: 50px 20px 0px; overflow: hidden; position: relative; min-height: 63px; text-align: center; } .archive-top .archive-title h1 { display: block; font-size: 2.5em; font-weight: normal; margin-bottom: 0; width: 100%; } .archive-top .archive-title span { margin-bottom: 0px; text-transform: uppercase; color: #999; font-size: 18px; clear: both; font-family: "HELVETICANEUELTPRO-THEX", "微软雅黑"; width: 100%; float: left; font-style: normal; filter: alpha(opacity=80); opacity: 0.8; } .archive-top .archive-description { color: #9e9e9e; font-size: 12px; } .archive-top.tag { text-align: left; padding: 40px 10px 10px; } .archive-top.tag h1 { display: block; font-size: 20px; font-weight: 400; margin-bottom: 5px; } /*subcate*/ .subcate { max-width: 1260px; margin: 50px auto 10px; text-align: center; padding: 0 20px; } .subcate ul { font-size: 0; display: block; } .subcate li { display: inline-flex; margin: 0px 5px; } .subcate li a { height: 30px; line-height: 30px; padding: 0 14px; font-size: 14px; background: rgba(0,0,0,0.6); text-shadow: none; border-radius: 50px; color: rgba(255,255,255,.6); } .subcate li a:hover, .subcate li.active a { background: #F4CE58; color: #000; } /*----------- lazy -----------*/ .loading { background: #5c5c5c url(../images/lay.gif) center center no-repeat; min-height: 60px } .button.loading { min-height: 30px; } a:hover .b-lazy.b-loaded { filter: alpha(opacity=100); opacity: 1 } .b-lazy { max-width: 100%; -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; filter: alpha(opacity=0); opacity: 0 } .b-lazy.b-loaded { vertical-align: middle; filter: alpha(opacity=100); opacity: 1; } /*----------- pageNav -----------*/ .pageNav { text-align: center; padding: 35px 0px 0; display: block; clear: both; } .pageNav a, .pageNav span { text-align: center; min-width: 30px; height: 30px; line-height: 30px; display: inline-block; color: rgba(255,255,255,0.6); background: rgba(0,0,0,.6); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 0px; vertical-align: top; border-radius: 50px; } .pageNav .v { line-height: 26px; } .pageNav a:hover { background: #F4CE58; color: #000; text-decoration: none; } .pageNav span { background: #F4CE58; color: #000; } .post.case .pageNav { padding-top: 0; } /*social*/ .sidebar { max-width: 1260px; margin: 0 auto; padding: 50px 10px 40px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); } .sidebar .addBox { padding: 0 5px; margin-bottom: 15px; } .sidebar .addBox h4 { display: none } .sidebar .addBox span { margin-right: 20px; display: inline-block } .sidebar .addBox span.tel { font-size: 30px; padding: 0 0 20px 0; display: block; font-weight: 300; margin-right: 0 } .sidebar .addBox span.tel i { margin-right: 5px; } .divArchives li, .divBrchives li, .divCrchives li, .divAuthors li, .divCatalog li, .divFavorites li, .divLinkage li, .divNavBar li, .divStatistics li { padding: 3px 0; margin: 1px 0 3px 0; } .divArchives li a, .divAuthors li a, .divBrchives li a, .divCatalog li a, .divFavorites li a, .divLinkage li a, .divMisc li a, .divNavBar li a, .divStatistics li { color: #555; font-size: 14px; margin-right: 24px; -o-transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s } .divArchives li:hover a, .divBrchives li:hover a, .divAuthors li:hover a, .divCatalog li:hover a, .divFavorites li:hover a, .divLinkage li:hover a, .divNavBar li:hover a, .divStatistics li:hover { padding-left: 15px; -o-transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s } .divBrchives li:hover a { color: #F4CE58 } .divBrchives li a i.fa, .tbox .fa { transform: translate(0px, -1px); } .widget-tie h3 { margin-bottom: 15px } .divTags li { float: left; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; } /*----------- article-box panel -----------*/ .article-box { padding: 0 0px 20px; margin: 20px 0 16px; background: rgba(0, 0, 0, 0); } .article-top { padding: 20px 0 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .article-tit { margin-top: 5px; margin-bottom: 0px; font-size: 22px; font-weight: 400; } .article-mt { margin-top: 10px; } .article-mt span { font-size: 14px; color: #999; display: inline-block; margin-right: 5px; } .article-mt span a { font-size: 14px; color: #999; display: inline-block; } .article-mt span i { width: 13px; display: inline-block; margin-right: 4px; font-size: 13px; } .article-main { font-size: 14px; line-height: 28px; padding: 18px 0; word-wrap: break-word; } .article-main img { margin: 5px 0; max-width: 100%; height: auto; } .article-main h2, .article-main h3, .article-main h4, .article-main h5 { padding: 0; margin: 25px 0; color: #AAA; font-weight: 600; } .article-main h2 { font-size: 20px; line-height: 24px; font-weight: bold; border-left: 5px solid #F4CE58; padding: 0 0 0 10px; } .article-main h3 { font-size: 18px; } .article-main h4 { font-size: 16px; } .article-main h5 { font-size: 14px; } .article-main ul, .article-main ol { margin: 0 0 18px 42px } .article-main ul { list-style: disc; } .article-main ol { list-style: decimal; } .article-main li { margin-bottom: 6px; list-style: inherit; } .article-main p { margin-bottom: 0px; word-wrap: break-word } .article-main pre { word-wrap: break-word } .article-main table { width: 100%; border-top: solid 1px rgba(255, 255, 255, 0.2); border-left: solid 1px rgba(255, 255, 255, 0.2); margin-bottom: 18px; border-collapse: collapse } .article-main table th { text-align: center; background-color: #282828; } .article-main table td, .article-main table th { border-bottom: solid 1px rgba(255, 255, 255, 0.2); border-right: solid 1px rgba(255, 255, 255, 0.2); padding: 5px 10px } .article-main a { color: #F4CE58; } .article-main a:hover { color: #F4CE58; } .article-main pre, .comment pre { margin: 20px 0; font: 14px/22px 'courier new'; background: #272822; padding: 10px 16px; color: #F8F8D4; border: none } .article-main blockquote { margin: 30px; padding: 25px 30px 15px; font-size: 14px; color: #aaa; border-left: 6px solid #484848; background: #181818; border-radius: 8px; } .article-main blockquote p { margin: 0; padding: 0; margin-bottom: 10px; } .article-main embed { display: block; margin-left: auto; max-width: 100%; margin-right: auto; } .article-copyright { margin-top: 42px; background-color: #eee; padding-right: 30px; font-size: 12px; padding: 5px 0; color: #aaa; text-align: center; } .article-copyright a, .article-copyright a:hover { color: #aaa; text-decoration: none; } /*----------- tag-a -----------*/ .tag-box .tag-a { padding: 20px 0 20px; line-height: 32px; } .tag-box .tag-a a { padding: 6px 10px 4px 10px; margin-right: 6px; background: rgba(255,255,255,.1); border-radius: 50px; } .tag-box .tag-a a:hover { background: #F4CE58; color: #000 } /*----------- Post Navigation -----------*/ .post-nav { border: 0px solid #eee; padding: 10px 0 10px 0; margin: 0px; clear: both; overflow: hidden; } .post-nav div { width: 40%; color: #999; font-size: 14px; position: relative; display: block; } .post-prev { float: left; } .post-next { float: right; text-align: right; } .post-nav div span { display: none; color: #999; } .post-nav div a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; } .post-nav div a i { color: #aaa; font-size: 18px; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .post-nav div a:hover i { color: #F4CE58; } .post-prev a { padding: 5px 0 5px 20px; } .post-next a { padding: 5px 20px 5px 0; } .post-prev a i { left: -5px; } .post-next a i { right: -5px; } /*----------- Author Widget -----------*/ #writer { margin: 20px 0; border: 0px solid #eee; background: rgba(255, 255, 255, 0.65); clear: both; overflow: hidden; } #writer h3 { padding: 10px 20px 8px 20px; border-bottom: 1px solid #eee; background: rgba(255, 255, 255, 0.2); } #writer h3 span { float: right; min-width: 160px; width: 50%; text-align: right; font-weight: normal; font-size: 12px; padding-top: 2px; } .writer-text { clear: both; overflow: hidden; padding: 10px; } .writer-avatar img { float: left; margin: 10px; padding: 4px; width: 64px; height: 64px; border: 1px solid #eee; -webkit-border-radius: 37px; -moz-border-radius: 37px; border-radius: 37px; background: #fff; -webkit-box-shadow: inset 0 -1px 0 #3333sf; box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out; } .writer-avatar img:hover { border: 1px solid #ccc; -webkit-box-shadow: 0 0 10px #fff; box-shadow: 0 0 10px #fff; -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); transform: rotateZ(360deg); } .writer-info { padding: 10px 10px 0 5px; font-size: 14px; line-height: 22px; } #writer-name { display: none; } #writer-top .contact { width: auto; } #writer-top .contact li { float: left; margin: 0; padding: 0; width: 28px; height: 30px; background: none; } .nb { padding: 10px 0; border-bottom: none; } .widget .nb li { padding: 0; width: 30px; height: 30px; background: none; } .widget .nb li.archive, .widget .nb li.donate { width: 82px; } .widget .nb li.archive a { width: 80px; height: 26px; } .widget .nb li.donate a { width: 80px; height: 26px; } /*----------- contact -----------*/ .contact { padding: 16px 13px 10px; } .contact ul li { background: none; } .contact li a { display: block; margin-left: 5px; width: 24px; height: 24px; color: #fff; line-height: 24px; opacity: 0.7; text-shadow: none; } .contact li a:hover { opacity: 1; } .contact li.website a { background: #F93; } .contact li.sina_weibo a { background: #f78585; } .contact li.qq_weibo a { background: #27ccc0; } .contact li.email a { background: #e66eb6; } .contact li.qq a { background: #48c3f0; } .contact li.archive a { width: 78px; height: 24px; background: #9C3; text-indent: 0px; color: #fff; line-height: 24px; } .contact li.donate a { width: 78px; height: 24px; } .contact li { display: inline; float: left; margin-right: 4px; height: 24px; text-align: center; line-height: 190%; } /*----------- relates -----------*/ .relates { padding: 20px 0; margin-bottom: 16px; background: rgba(0, 0, 0, 0); } .relates.imgRel { padding: 10px 0; } .relates.imgRel ul { margin: 0; } .relates.imgRel .title { text-indent: 10px; margin-top: 10px; } .post.relates.imgRel .PostShow li { margin: 1% 0.75% 1% 0.75%; /*margin:0;transition:none;*/ } .title { margin-bottom: 10px; overflow: hidden; } .title h3 { font-size: 1.2em; font-weight: 500; margin: 0; float: left } .relates ul { list-style: disc; margin-left: 20px; color: #999 } .relates li { margin-top: 10px; list-style: inherit } .relates li.nothing { width: 100%; text-align: left; } .relates time { font-size: 12px; margin-left: 20px; color: #bbb } .widgetBox { position: relative; clear: both; margin-bottom: 20px; background: none repeat scroll 0 0 #fff } .userMain { overflow: hidden; width: 100%; border: 1px solid #eee } #userLeft { float: left; padding-bottom: 10px; width: 17.9% } #userLeft .user-avatar { padding: 15px; text-align: center } #userLeft .user-avatar img { padding: 5px; max-width: 100px; max-height: 100px; width: 98%; height: auto; border: 1px solid #eee; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: inset 0 -1px 0 #3333sf; box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: .4s; -webkit-transition: -webkit-transform .4s ease-out; -moz-transition: -moz-transform .4s ease-out; transition: transform .4s ease-out } #userLeft .user-avatar img:hover { border: 1px solid #ccc; -webkit-box-shadow: 0 0 10px #fff; box-shadow: 0 0 10px #fff; -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); transform: rotateZ(360deg) } #userMenu li { padding: 12px 10px; text-align: center } #userMenu li.current-menu-item { margin: 0 -1px; border-left: 5px solid #F4CE58; background: #EEE } #userMenu li.current-menu-item a { margin-left: -5px; color: #F4CE58 } #userMenu li i { margin-right: 5px } #userRight { float: left; overflow: hidden; margin: 0; padding: 10px 1.333333%; min-height: 600px; width: 82%; border-bottom: none; border-left: 1px solid #E1E1E1; background: #fff } #userRight #writer-top { margin: 0 -15px; padding: 10px 15px; border-bottom: 1px solid #E1E1E1; background: #fff } #userRight .post-count { padding: 15px 10px; border-bottom: 1px solid #eee; font-weight: 700 } #userRight .archive-a h2 { font-size: 14px; padding-left: 5px; line-height: 40px } .archive-a h2 { display: inline-block; overflow: hidden; margin: 0; width: 60%; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; font-size: 16px; line-height: 28px } .archive-a h2 a i { margin-right: 5px } #writer-top h1 { margin-bottom: 10px; font-size: 20px } #writer-top .rss-cat-icon i { color: #F74D4D } .widget-main { position: relative; z-index: 1; padding: 10px 15px; border-bottom: 1px solid #E1E1E1 } .archive-a { padding: 10px 0; border-bottom: 1px solid #eee } .archive-a span { margin-right: 5px } .archive-a p.post-time { float: right; width: 36% } .post-time { margin: 10px 0; line-height: 20px } .post-time span { margin-right: 10px; color: #999 } .post-time span i { margin-right: 3px } /*----------- commList -----------*/ .commBox { padding: 20px; margin-bottom: 20px; background: rgba(0, 0, 0, 0.35); border-radius: 6px; display: block; clear: both; } .commBox .title { margin-bottom: 15px; } .commList .msg { padding-top: 10px } .commBox .posttop em { color: #999; font-style: normal; } /*---------------------------引用\评论----------------------------------*/ ul.msg { width: 100%; margin: 15px 0 15px 0; padding: 0px 0; text-align: left; list-style-position : outside; table-layout: fixed; word-wrap: break-word; background: #323232; border: 1px solid rgba(255,255,255,0.1); border-radius: 3px; } li.msgname { padding: 15px 15px 0; margin: 0px; font-weight: normal; font-size: 1em; } li.msgname small, small .revertcomment a { color: #999; font-size: 12px; font-weight: 300 } li.msgurl { text-align: right; padding: 2px 10px 2px 10px; margin: 0; font-size: 1em; } li.msggravatar { display: block; float: left; margin-right: 5px; } li.msgarticle { list-style-position : outside; padding: 10px 15px 12px; margin: 0; line-height: 160%; padding-left: 70px; /*border-bottom:1px solid #eaeaea;*/ } li.msgtime { padding: 5px 0 0 0; font-weight: normal; font-size: 0.8em; } img.avatar { width: 45px; height: 45px; float: left; margin-right: 8px; margin-top: -2px; border-radius: 50px; box-shadow: inset 0 -1px 0 #3333sf; -webkit-box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: .4s; -webkit-transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; -moz-transition: -moz-transform .3s ease-out } img.avatar:hover { transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); box-shadow: 0 0 10px #fff; -webkit-box-shadow: 0 0 10px #fff; } ul.msg ul.msg img.avatar { width: 40px; height: 40px; margin-top: 0.12em } ul.msg ul.msg { padding: 0px 0 0 0; margin: 15px 0 0 0; border: none; } ul.msg ul.msg li.msgarticle { padding-bottom: 0px; border-bottom: 0px solid #eee; padding-left: 52px; padding-right: 0; } ul.msg ul.msg li { padding-right: 0; padding-left: 0 } /************发表评论************/ #divCommentPost { width: 100%; margin: 0 0 0 0; padding: 5px 0 1px 0; } #divCommentPost p { margin-top: 10px; } #divCommentPost label { margin-top: 5px; } #divCommentPost p.posttop { color: #999; padding-left: 0; margin-bottom: 5px; float: left } #divCommentPost.reply-frm p.posttop { float: right } #divCommentPost.reply-frm p.posttop .u-msg { display: none } #divCommentPost img { margin-bottom: -0.5em; } #divCommentPost p.npt { margin-top: 0 } #cancel-reply { margin-left: 10px; line-height: 36px; display: inline-block } div.reply-frm { background: #323232; margin: 0em 0% !important; padding: .3em 0em 0.68em !important; border: 0px solid #eee } div.reply-frm #saytext { margin-top: 0px; } #saypl ul { width: 101.6%; clear: both } #saypl ul li { margin-bottom: 5px; text-align: left; display: inline-block; width: 49% } #saypl ul li.verify { position: relative } #saypl ul li.verify img { position: absolute; top: 4px; right: 4px } input.text { margin-right: 10px; position: relative; border: none; border: 1px } input.text { margin-right: 10px; position: relative; border-radius: 0px; height: 38px; line-height: 38px; padding: 0px 10px; outline: 0; color: #aaa; width: 100%; box-shadow: none; background: rgba(255,255,255,0.1); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #saytext { color: #aaa; position: relative; z-index: 1; border: 0; border-bottom: none; padding-right: 24px; overflow: hidden; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: none; -webkit-appearance: none; overflow: auto; padding: 10px; min-height: 135px; margin: 0; resize: none; outline: 0; width: 100%; min-width: 100%; background: rgba(255,255,255,0.1); font-size: 14px; } input.button, #cancel-reply { height: 36px; width: 100px; text-align: center; text-shadow: none; font-weight: normal; border: none; color: #000; background-color: #F4CE58; border-radius: 2px; background-image: none; box-shadow: none; cursor: pointer; font-size: 16px; opacity: 0.8; } input.button:hover { opacity: 1; } #cancel-reply { background-color: #d9d9d9; vertical-align: 0px; } /*----------- search -----------*/ .page-search h1 { font-size: 20px; font-weight: 400; margin-bottom: 5px; } .page-search .archive-description { font-size: 12px; color: #9e9e9e; } .page-search, .list-search p { margin: 20px 0; padding: 10px; overflow: hidden; border-radius: 2px; position: relative; line-height: 22px; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease } .list-search p { background-color: rgba(0, 0, 0, 0.15); padding: 20px; color: #888; } .list-search p:hover { background-color: rgba(0, 0, 0, 0.25); } .list-search p a:first-child { font-size: 20px; line-height: 28px; margin-bottom: 5px; margin-top: 0; } .list-search p a { margin-top: 3px; display: inline-block; } .list-search p a:hover { color: #F4CE58 } .list-search p strong { color: #F4CE58; font-weight: 100 } /*----------- gotop -----------*/ #backTop { position: fixed; right: 0px; bottom: 10%; transform: translateY(-50%); z-index: 888; } #backTop span { cursor: pointer; background: rgba(0,0,0,0.2); width: 50px; height: 50px; color: #fff; display: block; position: relative; margin: 0px 0; right: 0; } #backTop span#gttop { display: none; float: left; } #backTop span i { z-index: 1 } #backTop span.ft-qq i { background: #1ea6e9; } #backTop span.ft-wx i { background: #46be8a; } #backTop span.ft-tel i { background: #DA0023; } #backTop span small { width: 160px; height: 160px; position: absolute; left: -220px; top: 0; padding: 10px; box-shadow: 0 0 10px rgba(0,0,0,.2); visibility: hidden; opacity: 0; background: #fff; z-index: 0; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } #backTop span small.telTop { width: auto; height: 50px; line-height: 50px; padding: 0 15px; text-align: center; font-size: 22px; color: #333; right: 70%; left: auto; visibility: hidden; white-space: nowrap; } #backTop span:hover.ft-tel small.telTop { visibility: visible; opacity: 1; right: 100%; } #backTop span:hover.ft-wx small.weixin { visibility: visible; opacity: 1; left: -175px; } #backTop span.ft-qq small.qqlist { visibility: hidden; opacity: 0; left: -190px; padding: 12px 15px 12px 15px; width: 150px; height: auto; } #backTop span.ft-qq small.qqlist a, #backTop span.ft-qq small.qqlist a i { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } #backTop span.ft-qq small.qqlist a { color: #666; display: inline-block; height: 30px; line-height: 30px; padding-left: 30px; position: relative; } #backTop span.ft-qq small.qqlist a i { font-size: 18px; position: absolute; width: 20px; height: 20px; line-height: 20px; text-align: center; color: #1ea6e9; background: none; top: 5px; left: 2px; margin: 0; } #backTop span.ft-qq small.qqlist em { width: 100%; height: 30px; line-height: 30px; color: #999; font-style: normal; display: inline-block; padding: 5px 0 10px 0; } #backTop span:hover.ft-qq small.qqlist { visibility: visible; opacity: 1; left: -165px; } #backTop span.ft-qq small.qqlist a:hover, #backTop span.ft-qq small.qqlist a:hover i { color: #F4CE58; } #backTop span i { text-align: center; color: #fff; width: 50px; height: 50px; font-style: inherit; line-height: 50px; position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; font-size: 22px; } #backTop a { color: #fff; display: block; cursor: pointer } #backTop span small b { width: 25px; height: 35px; position: absolute; top: 2px; right: -10px; z-index: 999; font-size: 35px; } .sidebar .addBox span.ftqq { display: block; clear: both; } /*browse*/ #browse { padding: 10px 0; border-bottom: 1px solid #ddd; background: #F4CE58; color: #aa6800; text-align: center; font-family: arial, sans-serif; font-size: 14px } #browse a { padding: 4px; color: #008DFD } #browse a:hover { text-decoration: underline } /*----------- ADS -----------*/ .bnBox { background-color: rgba(255, 255, 255, 0.65); border: none; padding: 10px; margin: 15px auto 0 auto; overflow: hidden; max-width: 1240px; position: relative; } .bnBox.cateBn { margin-bottom: 0; margin-top: 0; padding: 0; max-width: 100%; } .bnBox.cateBn .text { width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } .bnBox.cateBn .text h3 { font-weight: 100; font-size: 30px; } .bnBox.cateBn .text p { font-size: 14px; font-weight: 100; font-family: "Poppins"; font-style: normal; clear: both; opacity: .8 } .bnBox.animation { margin-top: 16px; } .bnBox img { display: block; width: 100%; } /*----------- footer -----------*/ .footer { margin-top: 0px; padding: 0px 0 0; width: 100%; background: #000; color: rgba(255,255,255,0.48); clear: both; position: relative; font-size: 12px; line-height: 22px; text-align: left } .footer a { color: rgba(255,255,255,0.3); font-size: 12px; } .footer-text { padding: 20px 10px 10px 10px; margin: 0 auto; color: rgba(255,255,255,0.3); position: relative; overflow: hidden; max-width: 1260px } .footer .sidebar .social { display: inline-block; width: 100%; vertical-align: top; } .footer .sidebar .social.w50 { width: 43%; } .ftNav { margin: 5px 0; } .ftNav a { display: inline-block; padding: 0 10px; position: relative; color: rgba(255,255,255,0.3); } .ftNav a:hover { color: rgba(255,255,255,.6); } .ftNav a:first-child { padding-left: 0; } .ftNav a:after { content: ''; width: 1px; height: 12px; position: absolute; left: 0px; top: 6px; background: rgba(255,255,255,0.1); border-radius: 100px; } .ftNav a:first-child:after { display: none; } .link { max-width: 1260px; padding: 0px; color: rgba(255,255,255,0.3); } .link span { font-size: 12px } .link ul { display: inline } .link li { display: inline; padding: 0 6px; } .link li a:hover { color: rgba(255,255,255,.6); } .action-like, .article-social { text-align: center; text-shadow: none } .article-main a.action-like { color: #fff; } .action-like { display: inline-block; background-color: #FF5E52; color: #fff; border-radius: 3px; padding: 10px 12px 10px 15px; font-size: 15px; margin: 10px auto 18px; min-width: 120px; max-width: 100%; cursor: pointer; opacity: .75 } .action-like:hover { opacity: 1; color: #fff } /*search-form*/ .search-form { height: 35px; position: relative; } .search-form .s { height: 22px; border: 1px solid #ddd; padding: 5px 35px 5px 5px; border-radius: 3px; width: 210px; } .search-form .s:focus, #login-page .login-form .text:focus { border: 1px solid #2689FF; box-shadow: 0 0 3px #2689FF; } .search-btn, .sbtn, .searchBox { position: fixed; right: 58px; top: 18px; color: rgba(255,255,255,0.6); background: 0 0; border: none; padding: 0; margin: 0; line-height: normal; font-size: 19px; font-weight: 300; outline: 0; cursor: pointer; z-index: 890; } .fixed .sbtn, .fixed .searchBox, .header.noOpaque .sbtn { color: #999 } a.search-btn { display: none; } .search-bg, .searchBox { position: fixed; left: 50%; top: 45%; z-index: 891; height: auto; margin: -28px 0 0 -113px; display: none; } .sbtn { position: inherit; float: right; font-size: 18px; background: rgba(0,0,0,.0); height: 40px; line-height: 40px; border-radius: 1000px; text-align: center; margin-top: 19px; margin-left: 10px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; filter: alpha(opacity=65)!important; opacity: 0.65!important; } .fixed .sbtn, .header.noOpaque .sbtn { margin-top: 16px; } .sbtn:hover { filter: alpha(opacity=100)!important; opacity: 1!important; } .searchBox, .search-bg { left: 50%; width: 400px; background: #fafafa; z-index: 900; right: auto; transform: translate(-50%, -50%); margin: 0; padding: 30px; border-radius: 3px; } .search-bg .search-form { display: block; } .page-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); z-index: 890; display: none; } .search-bg .search-pup { margin-top: 0; float: none } .search-bg .search-pup form input, .searchBox .search-pup form input { width: 100%; border-radius: 3px; border: 1px solid #eaeaea; font-size: 14px; padding: 6px 60px 6px 10px; background: #fff; height: 35px; outline: 0 } .search-pup span { color: #999; font-size: 12px; margin: 10px 0 3px; display: block; clear: both; } .schList { font-size: 0; display: block; margin: 3px -3px -3px -3px; } .schList li { display: inline-block; height: 24px; line-height: 24px; margin: 3px; } .schList li a { font-size: 14px; background: #eee; width: 100%; display: block; padding: 2px 10px; border-radius: 3px; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; color: #666; } .schList li a:hover { background: #F4CE58; color: #000; } /*cate*/ .cate li { display: inline-block; text-align: center; float: left; position: relative; } .cate li a { color: #fff; font-size: 1em; width: 100%; height: auto; border-radius: 0px; float: left; opacity: 0.6; padding: 15% 0 } .cate li a:hover { opacity: 1 } .cate li a i { font-size: 1.8em; clear: both; width: 100%; float: left; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease } .cate li a p { margin: 0; padding: 0; font-style: normal; float: left; width: 100%; height: 20px; margin-top: 3% } /*分享*/ .bdshare { clear: both; padding-top: 20px; } .bd_weixin_popup { height: 300px!important; width: 252px!important } .bdsharebuttonbox a, .bdshare-button-style0-16 a { background-image: none!important; width: 32px!important; height: 32px!important; line-height: 32px!important; padding: 0!important; float: left; border-radius: 100px; text-align: center; margin: 6px 6px 6px 0; font-size: 20px!important; color: #fff!important; } .bdsharebuttonbox a.bds_weixin { background: #6bc30d; } .bdsharebuttonbox a:hover.bds_weixin { color: #fff; } .bdsharebuttonbox a.bds_sqq { background-color: #1ea6e9; } .bdsharebuttonbox a:hover.bds_sqq { color: #fff; } .bdsharebuttonbox a.bds_tsina { background-color: #f78585; } .bdsharebuttonbox a:hover.bds_tsina { color: #fff; } .bdsharebuttonbox a.bds_tqq { background-color: #00C5FF; font-size: 20px!important } .bdsharebuttonbox a:hover.bds_tqq { color: #fff; } .bdsharebuttonbox a.bds_qzone { background-color: #ff9933; font-size: 20px!important } .bdsharebuttonbox a:hover.bds_qzone { color: #fff; } .bdsharebuttonbox a.bds_more { background-color: rgba(255,255,255,.1); color: #aaa!important; } .bdsharebuttonbox a:hover.bds_more { color: #aaa; } .bdsharebuttonbox a.bds_weixin:before { content: "\e715"; } .bdsharebuttonbox a.bds_sqq:before { content: "\e62a"; } .bdsharebuttonbox a.bds_qzone:before { content: "\e728"; } .bdsharebuttonbox a.bds_tsina:before { content: "\e67a"; } .bdsharebuttonbox a.bds_tqq:before { content: "\e606"; } .bdsharebuttonbox a.bds_more:before { content: "\e607"; } /*实力*/ .PostSl { font-size: 0; display: inline-block; width: 60%; text-align: center; padding: 20px 0 20px 0; vertical-align: middle; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2 } .PostSl li { width: 50%; display: inline-block; text-align: center; vertical-align: top; margin: 25px 0; } .PostSl li:last-child { border: none } .PostSl li .slNumber { font-size: 36px; color: rgba(255,255,255,0.7); display: block; font-family: HELVETICANEUELTPRO; line-height: 38px; } .PostSl li .slTitle { font-size: 14px; color: rgba(255,255,255,0.5); padding-top: 5px; } .PostSl li .slNumber span { position: relative; } .PostSl li .slNumber em { position: absolute; font-size: 14px; top: -3px; right: -15px; line-height: normal; opacity: 0.6 } #cambrian0 { height: auto!important; clear: both; float: left!important; width: 100%!important; margin-bottom: 0px!important } ._1mpIIe { width: 100%!important; clear: both; } .FiQpSl { margin-bottom: 40px!important } .owl-carousel, .owl-carousel .owl-item { -webkit-tap-highlight-color: transparent; position: relative } .owl-carousel { display: none; width: 100%; z-index: 1 } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0, 0, 0) } .owl-carousel .owl-item, .owl-carousel .owl-wrapper { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0) } .owl-carousel .owl-item { min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-touch-callout: none } .owl-carousel .owl-item img { display: block; width: 100% } .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled { display: none } .no-js .owl-carousel, .owl-carousel.owl-loaded { display: block } .owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev { cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot { background: 0 0; color: inherit; border: none; padding: 0!important; font: inherit } .owl-carousel.owl-loading { opacity: 0; display: block } .owl-carousel.owl-hidden { opacity: 0 } .owl-carousel.owl-refresh .owl-item { visibility: hidden } .owl-carousel.owl-drag .owl-item { -ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .owl-carousel.owl-grab { cursor: move; cursor: grab } .owl-carousel.owl-rtl { direction: rtl } .owl-carousel.owl-rtl .owl-item { float: right } .owl-carousel .animated { animation-duration: 1s; animation-fill-mode: both } .owl-carousel .owl-animated-in { z-index: 0 } .owl-carousel .owl-animated-out { z-index: 1 } .owl-carousel .fadeOut { animation-name: fadeOut } @keyframes fadeOut { 0% { opacity:1 } 100% { opacity:0 } } .owl-height { transition: height .5s ease-in-out } .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity .4s ease } .owl-carousel .owl-item .owl-lazy:not([src]), .owl-carousel .owl-item .owl-lazy[src^=""] { max-height: 0 } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d } .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000 } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url(../images/owl.video.play.png) no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform .1s ease } .owl-carousel .owl-video-play-icon:hover { -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3) } .owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn { display: none } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity .4s ease } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100% } .owl-carousel { padding: 0 60px; } .owl-carousel .owl-stage-outer { padding-top: 2%; z-index: 2 } .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev { display: block; position: absolute; outline: 0; top: 50%; transform: translateY(-50%); z-index: 6; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .owl-carousel .owl-nav .owl-next { right: 0px; } .owl-carousel .owl-nav .owl-prev { left: 0px; } .owl-carousel .owl-nav i { font-size: 40px; color: rgba(255,255,255,.2); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .owl-carousel .owl-nav .owl-next:hover i, .owl-carousel .owl-nav .owl-prev:hover i { opacity: 1 } .owl-carousel:hover .owl-nav .owl-next { right: 0px; } .owl-carousel:hover .owl-nav .owl-prev { left: 0px; } .owl-dots { text-align: center; padding-top: 30px; } .owl-dots .owl-dot span { width: 6px; height: 6px; border-radius: 50px; background: #fff; display: inline-block; opacity: .3; margin: 0 5px; } .owl-dots .owl-dot.active span { opacity: 0.8 } #owl0 .owl-dots { display: inline-block; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 3; } #owl0.owl-carousel .owl-stage-outer { padding-top: 0 } #owl0.owl-carousel .owl-nav .owl-next, #owl0.owl-carousel .owl-nav .owl-prev { opacity: 0; } #owl0.owl-carousel .owl-nav i { font-size: 40px; color: #fff; opacity: 0.5; } #owl0.owl-carousel .owl-nav .owl-next { right: 80px; } #owl0.owl-carousel .owl-nav .owl-prev { left: 80px; } #owl0.owl-carousel:hover .owl-nav .owl-next { right: 20px; } #owl0.owl-carousel:hover .owl-nav .owl-prev { left: 20px; } #owl0.owl-carousel .owl-nav .owl-next:hover i, #owl0.owl-carousel .owl-nav .owl-prev:hover i { opacity: 1 } #owl0.owl-carousel:hover .owl-nav button { opacity: 1 } #owl1.owl-carousel .owl-nav .owl-next, #owl1.owl-carousel .owl-nav .owl-prev { top: 42%; transform: translateY(-50%); } .owl-carousel .owl-nav .disabled i { color: rgba(255,255,255,.1) } #owl0 .text { max-width: 1220px; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,.8); display: block; font-size: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; text-align: center; } #owl0 .text a { color: rgba(255,255,255,.8); } #owl0 .text h4 { font-size: 40px; color: #fff; font-family: Arial } #owl0 .text p { margin: 20px auto; line-height: 32px; font-size: 18px; max-width: 600px; } #owl0 .text a span { padding: 8px 30px; border: 1px solid #F4CE58; background: #F4CE58; color: #000; font-size: 16px; display: inline-block; margin-top: 28px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; position: relative; border-radius: 100px; } #owl0 .text a em { position: relative; z-index: 1; font-style: normal } #owl0 .text .bnLink { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } #owl0.owl-carousel { padding: 0 } #owl0.owl-carousel .owl-stage-outer { margin: 0 } #owl1.owl-carousel { padding: 0 5px } .owl1.owl-carousel .item .imgBox { font-size: 0; display: block; } .owl1.owl-carousel .item.advIcon .imgBox { width: 130px; height: 130px; margin: 0 auto; background: rgba(0,0,0,0.3); border-radius: 100px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .owl1.owl-carousel .item.advIcon img { opacity: 0.5!important; } .owl1.owl-carousel .item.advIcon:hover img { transform: scale(1); opacity: 1!important; } .owl1.owl-carousel .item.advIcon:hover .imgBox { background: #F4CE58; } .owl1.owl-carousel { padding: 0 80px; } .owl1.owl-carousel .owl-stage-outer { padding: 2% 0 0; } .owl1.owl-carousel .item img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; transform: scale(1) } .owl1.owl-carousel .item:hover img { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0); transform: scale(1.05) } .owl-carousel .item .imgText { text-align: center; padding: 25px 0 0 } .owl-carousel .item h4 { font-size: 16px; color: rgba(255,255,255,.9); padding: 0px 0 10px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .owl-carousel .item p { line-height: 22px; padding: 0px; font-size: 12px; color: #999 } /*联系我们*/ .contactBg.PostBox { position: relative; background: #000; } .contactBg .post { max-width: 1260px; margin: 0 auto; min-height: 500px; text-align: right; } .contactBg .post .contBox { width: 70%; max-width: 800px; position: relative; z-index: 1; display: block; margin: 0 auto; } .contactBg .post .contText { width: 100%; height: 100%; padding: 30px; background: rgba(0,0,0,.5); border-radius: 6px; box-shadow: 0 0 25px rgba(0,0,0,0.8); border: 4px solid rgba(244,206,88,.2) } .contactBg .post .postTitle { text-align: left; } .contactBg .post .postTitle:after { left: 0; right: auto } .contactBg .post .boxText { margin-top: 40px; text-align: left; } .contactBg .post .boxText .iconfont { font-size: 18px; } .contactBg .post .boxText p, .contactBg .post .boxText p a { line-height: 24px; color: #666; } .contactBg .post .boxText p.tel { font-size: 26px; padding-bottom: 20px; } .contactBg .post .boxText p a { margin: 0 10px 0 0; } .contactBg .post .postTitle span.title2 { margin-top: 20px; } .contactBg .social . { background:none; font-size:14px; width:auto; height:auto; line-height:22px; } .contactBg .social a.socialLink { background: rgba(255,255,255,.1); border-radius: 1000px; -moz-border-radius: 1000px; -webkit-border-radius: 1000px; color: #aaa; font-size: 18px; display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center; margin: 0 5px 0 0; } .contactBg .social { margin-top: 10px; } .contactBg .social a:hover { background: #F4CE58; } .contactBg .social a.socialLink:hover { color: #fff } .contactBg .mapBtn { width: 48px; height: 48px; line-height: 48px; text-align: center; position: absolute; display: block; background: #F4CE58; border-radius: 100px; right: 20px; top: 20px; opacity: .6; z-index: 4; cursor: pointer; } .contactBg .mapBtn:hover { opacity: 1; } .contactBg .mapBtn i { font-size: 24px; color: #fff; } .contactBg .mapBtn i.close { display: none; } .contactBg.on .mapBtn { opacity: 1; } .contactBg.on .mapBtn i { display: none; } .contactBg.on .mapBtn i.close { display: block; } .contactBg.on #ummap { opacity: 1 } .weixinBox { visibility: hidden; opacity: 0; position: fixed; padding: 5px 5px 25px; background: #fff; z-index: 999; line-height: 0; border-radius: 0px; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; text-align: center; } .weixinBox .img { width: 260px; height: 260px; } .weixinBox img { width: 100%; height: 100% } .weixinBox p { color: #333; font-size: 14px; margin-top: 5px } .weixinBox.open { visibility: visible; opacity: 1; transform: translate(-50%, -50%) scale(1); } /*地图*/ #ummap { background-color: #000!important; width: 100%; position: absolute; top: 0; right: 0; height: 100%; opacity: 0.4; } #ummap img { max-width: none } #ummap iframe { width: 100%; height: 100%; } #ummap .map_y { display: none } .artImg { width: 100%; margin: 0 auto; position: relative; } .preloader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999999; background-color: rgba(0,0,0,.86); background-position: center center; background-repeat: no-repeat; background-image: url(../images/loading.gif); background-size: 42px 42px; } .tag-box { clear: both; } .post .PostShow ul.cateConlist { text-align: justify; font-size: 0.1px; } .post .PostShow ul.cateConlis:after { content: ''; display: inline-block; width: 100%; } /*----------- media -----------*/ @media screen and (max-width:1280px) { .slide .text { max-width: none; left: 7%; right: 7%; transform: translate(0%, -50%); width: auto; } .post.news { padding-left: 20px; padding-right: 20px; } .post.news.n1 { padding-left: 0px; padding-right: 0px; } .post, .contactBg .post { padding: 80px 0px 80px; } .PostBox.about .post .postAbout { padding: 90px 0; } .PostBox.about .post .PostText { padding: 25px 0; } .PostBox.newsBg .owl-carousel .owl-nav .owl-prev, .PostBox.newsBg .owl-carousel .owl-nav .owl-next { top: 30% } .PostBox.newsBg .owl-carousel .owl-nav .owl-prev { left: 10px; } .PostBox.newsBg .owl-carousel .owl-nav .owl-next { right: 10px; } } @media screen and (max-width:1024px) { .post, .contactBg .post { padding: 60px 0px 60px; } .PostBox.about .post .postAbout { padding: 70px 0; } .PostBox.about .post .PostText { padding: 20px 0; } .PostSl li .slNumber { font-size: 46px; line-height: 38px } .PostBox.newsBg .owl-carousel .owl-nav .owl-prev, .PostBox.newsBg .owl-carousel .owl-nav .owl-next { top: 28% } .PostBox.process .owl-carousel:after { top: 58px } .PostBox.process .owl-carousel .owl-nav button.owl-next, .PostBox.process .owl-carousel .owl-nav button.owl-prev { top: 59px; } } @media screen and (max-width:960px) { .header, .header.opaque { padding-top: 0px; } .header.noOpaque { padding-top: 40px; } .header.noOpaque { padding-top: 50px; } .navbar { float: left; width: 100% } .moble { display: block; height: 60px; } #navBox { display: none; } nav>ul>li>ul li { font-size: 12px; text-indent: 0px; } .search-pup, .mLogo .logo, a.search-btn, .header .moble-bars, .header.opaque .header-nav.fixed .logo .logoa, .header.opaque .logo .logoa { display: block; } .header.opaque .logo .logob { display: none } .search-btn, .sbtn, .searchBox { color: #aaa; } .moble { padding: 0 10px; } .post { padding: 60px 0px; } .sidebar { padding: 40px 10px; } .post .postTitle { margin-bottom: 25px; } .post .postTitle h3 { font-size: 1.8em } .post .postTitle .title1 { font-size: 1.4em } .post .postTitle h3 i { font-size: 0.4em; left: -24px; top: 10px; } .post .PostShow li { margin-bottom: 20px; } .post .PostShow li h4 { margin-bottom: 2px; font-size: 14px; } .post .PostShow li .post-img { margin-bottom: 12px; } .post.case .more { padding: 20px 0 30px; } .post.list, .post.tags { padding: 10px 10px 30px; } .post .more { padding: 25px 0 0 0; } .PostNews { margin-top: 10px; } .post.news li p { margin-top: 5px; line-height: 22px; height: 66px; overflow: hidden; } .pageNav { padding: 20px 0 20px; } .post.case .pageNav { padding-top: 10px; } .archive-top { padding-top: 30px; } .archive-top .archive-title span { line-height: 30px; } .subcate li a { padding: 0 12px; } .list-search p { padding: 16px; } .page-search, .list-search p { margin: 10px 0; } .bnBox.cateBn .text { top: 60%; } .bnBox.cateBn .text h3 { font-size: 26px; } .bnBox.cateBn .text p { font-size: 14px; } .advBg .PostBox ul { padding-top: 15px; } .advBg .PostBox ul li .liBox .imgBox { width: 80%; } #owl0 .text h4 { font-size: 38px; } #owl0 .text p { margin-top: 15px; line-height: 26px; font-size: 16px; max-width: 500px; } #owl0 .text a span { padding: 8px 25px; font-size: 16px; margin-top: 20px; } #owl1.owl-carousel .owl-nav .owl-next, #owl1.owl-carousel .owl-nav .owl-prev, #owl2.owl-carousel .owl-nav .owl-next, #owl2.owl-carousel .owl-nav .owl-prev { top: 40% } .PostBox.newsBg .owl-carousel .owl-nav .owl-prev, .PostBox.newsBg .owl-carousel .owl-nav .owl-next { top: 30% } .PostBox.process li { padding: 0; } .PostBox.process .owl-carousel:after { top: 55px } .PostBox.process .owl-carousel .owl-nav button.owl-next, .PostBox.process .owl-carousel .owl-nav button.owl-prev { top: 56px; } .PostSl { width: 80%; } .article-tit { font-size: 20px; } .article-mt span, .article-mt span a { font-size: 12px; } } @media screen and (max-width:800px) { .container { padding: 0 12px; } .bnBox.cateBn .text h3 { font-size: 24px; } .bnBox.cateBn .text p { font-size: 12px; } .archive-top .archive-title h1 { font-size: 2.2em } } @media screen and (max-width:749px) { .advBg .PostBox { width: 88%; margin: 0 auto } .advBg .PostBox ul { padding-top: 10px; } .advBg .PostBox ul li { width: 50%; margin: 2% 0 } .advBg .PostBox ul li .liBox .imgBox { width: 45%; } .advBg .PostBox ul li .liBox p { padding: 0 20%; } .PostNews { margin-top: 0px; } .post.news.top { padding-left: 15px; padding-right: 15px } .post.news li { width: calc(100% / 4 - 10px); margin: 15px 10px 15px 0; } .post.news .PostNews { margin-right: -10px; } .post.news .imgText { padding-bottom: 35px; padding-top: 20px; } .post.news .imgText h4 { padding-bottom: 5px; } .PostSl li .slNumber { font-size: 40px; line-height: 36px; } .PostSl li .slTitle, .PostSl li .slNumber em { font-size: 12px; } .owl-carousel { padding: 0 5px; } .owl1.owl-carousel { padding: 0 25px; } .newsBg .owl-carousel { padding: 0 20px; } #owl0 .text h4 { font-size: 32px; } #owl0 .text p { margin-top: 15px; line-height: 26px; font-size: 14px; max-width: none; } #owl0 .text a span { font-size: 14px; } .post .PostShow .item .post-img:after { padding-top: 75%; } .ftNav a:after { top: 3px; } .ftNav a { display: inline; } .post .postTitle h3 { font-size: 1.6em } .post .postTitle .title1 { font-size: 1.2em; margin-bottom: 0px; } .article-tit, .title h3 { font-size: 18px; } } @media screen and (max-width:720px) { .PostBox.about .post .postAbout:after { width: 115%; } .advBg .PostBox ul { padding-top: 5px; } .post .PostMix li { width: 50%; } } @media screen and (max-width:640px) { .header, .header.opaque { padding-top: 0px; } .header.noOpaque { padding-top: 30px; } .moble { height: 48px; padding: 0 10px; } .header .moble-bars { margin-top: 9px; } .search-btn { top: 11px; right: 45px; } .inner { top: 48px; } .mLogo { height: 48px } .mLogo .logo { height: 30px; margin-top: -15px; } .mLogo .logo img { height: 30px } .post { padding-left: 0px; padding-right: 0px; } .post .PostShow li { width: 47%; margin: 0 1.46% 25px; } .post.relates.imgRel .PostShow li { width: 47%; margin: 5px 1.5% 10px;/* margin:0;*/ } .relates.imgRel .title { text-indent: 6px; margin-top: 6px; } .post-img { max-width: 284px; } .caseBg .post .PostShow li { width: 50%; } .PostSl li .slNumber { font-size: 30px; line-height: 30px; } .post .postTitle h3 { margin-bottom: 3px; font-size: 1.4em; } .post .postTitle .title1 { line-height: 1.2 } .breadcrumb { padding: 8px 0; } .subcate li a { height: 28px; padding: 0 10px; } .post-nav .post-next a { padding-right: 20px; } .post-nav .post-prev a { padding-left: 20px; } .post-nav div a i { font-size: 16px; } .article-box { padding: 0 0px 16px; margin: 16px 0 16px; } .relates, .commBox { padding: 16px; } img.avatar { width: 40px; height: 40px; } li.msgarticle { padding-left: 15px; } ul.msg ul.msg li.msgarticle { padding-left: 10px; } ul.msg ul.msg li.msgarticle { padding-left: 0px; } .msgbox { padding-left: 51px; } #saypl ul, #saypl ul li { width: 100% } .PostBox.about .post .aboutImg { width: 100%; } .PostBox.about .post .postAbout { width: 100%; } .PostBox.about .post .PostText { width: 86% } .sidebar .addBox span.add { display: block; margin-right: 0 } .bnBox.cateBn .text h3 { font-size: 22px; } .bnBox.cateBn .text p { font-size: 12px; } .archive-top .archive-title h1 { font-size: 2.0em } .advBg .PostBox ul { width: 100%; padding-top: 0px; } .advBg .PostBox ul li .liBox .imgBox { width: 50%; } .sidebar .addBox span.tel { padding: 10px 0 10px 0 } .footer .sidebar .social, .footer .sidebar .social.w50 { width: 100%; } .ftNav { width: 100%; clear: both; padding: 0px; } #owl0 .text { text-align: center; } #owl0 .text h4 { font-size: 22px; } #owl0 .text p { display: none; } #owl0 .text a span { padding: 6px 20px; font-size: 14px; } .contactBg .post { min-height: 50vh; } .contactBg .post .contBox { width: 80%; } .contactBg .post .boxText p.tel { font-size: 22px } #ummap { width: 100%; min-height: 50vh } .newsBg .owl-carousel { padding: 0 10px; } .owl-dots .owl-dot span { width: 4px; height: 4px; margin: 0 3px; } .post.news.top { padding-left: 20px; padding-right: 20px } .post.news li { width: calc(100% / 2 - 25px); margin: 15px 25px 15px 0; } .post.news .PostNews { margin-right: -25px; } .post.news .imgText { padding-bottom: 40px; padding-top: 25px; } .post.news .imgText h4 { padding-bottom: 10px; } .post .PostMix .cateTab span.button { font-size: 12px; margin: 3px; padding: 0 12px; height: 28px; line-height: 28px; } .PostBox.about .post .postTitle { text-align: center; margin-top: 40px; margin-bottom: 15px; } .PostBox.about .post .postTitle:after { right: 0 } .PostBox.about .post .PostText { display: block; margin: 0 auto; text-align: center; } .PostBox.about .post .more { text-align: center; } .PostBox.about .post .postAbout { padding-top: 0 } .PostBox.about .postLeft { width: 100%; display: block; top: auto; left: auto; position: relative; min-height: 200px; } .PostBox.about .postRight { width: 100%; padding: 0; display: block; clear: both; } .PostBox.about .PostSl { width: 80%; position: relative; top: auto; left: auto; transform: none; margin: 0 auto; display: block; } .contactBg .mapBtn { width: 36px; height: 36px; line-height: 36px; } .contactBg .mapBtn i { font-size: 20px; } } @media screen and (max-width:480px) { .post.news li h4 { margin: 0; font-size: 1em; } .post.news li p { margin-top: 3px; line-height: 20px; } .archive-top .archive-title h1 { font-size: 1.8em } .avatar { margin-right: 10px } .avatar img { width: 40px; height: 40px; } .commBody { margin-left: 55px; } .bx-wrapper .bx-pager { bottom: 10px; } #backTop { display: none; } .bnBox.cateBn .text h3 { font-size: 22px; } .bnBox.cateBn .text p { font-size: 12px; } .inner li i { right: 15px; } .advBg .PostBox ul li { width: 50%; margin: 3.5% 0 } .advBg .PostBox ul li .liBox h3 { padding: 15px 0 5px } .advBg .PostBox ul li .liBox p { padding: 0 11.5%; line-height: 24px; } .advBg .PostBox ul li .liBox .imgBox { width: 60%; } .searchBox, .search-bg { width: 360px; padding: 25px; } .sidebar { padding: 30px 10px; } .PostSl li .slNumber { font-size: 22px; line-height: 26px; } .article-tit, .title h3 { font-size: 16px; } } @media screen and (max-width:439px) { .searchBox, .search-bg { width: 300px; } .PostSl li .slNumber { font-size: 18px; line-height: 22px; } .owl-carousel { padding: 0 } .post.news .owl-carousel .imgText { padding: 20px 20px 35px } .post.news .owl-carousel .imgText p.time { left: 20px; } .post.news .owl-carousel .item:hover .imgText i { right: 20px; } .advBg .PostBox { width: auto; } .newsBg .owl-carousel { padding: 0px; } .advBg .owl1.owl-carousel { padding: 0 0px; } .owl-carousel .item .imgText { padding: 25px 25px 0 25px } .post.news.top { padding-left: 15px; padding-right: 15px } .post.news li { width: calc(100% / 2 - 15px); margin: 10px 15px 10px 0; } .post.news .PostNews { margin-right: -15px; } .post.news .imgText { padding-bottom: 35px; padding-top: 20px; } .post.news .imgText h4 { padding-bottom: 5px; } } @media screen and (max-width:360px) { .bnBox.cateBn .text h3 { font-size: 18px; } .searchBox, .search-bg { width: 280px; padding: 20px; } .slide .text h4 { font-size: 20px; } .advBg .owl1.owl-carousel { padding: 0 50px; } } @media screen and (max-width:320px) { .post-img { max-width: 100%; } .post .PostShow li { width: 98%; margin: 0 1% 20px; } } /*CSS动画样式*/ .anim { visibility: hidden; } .animated { visibility: visible; } .PostShow .animated:nth-of-type(1) { animation-delay: 0.1s; } .PostShow .animated:nth-of-type(2) { animation-delay: 0.15s; } .PostShow .animated:nth-of-type(3) { animation-delay: 0.2s; } .PostShow .animated:nth-of-type(4) { animation-delay: 0.25s; } .PostShow .animated:nth-of-type(5) { animation-delay: 0.3s; } .PostShow .animated:nth-of-type(6) { animation-delay: 0.35s; } .PostShow .animated:nth-of-type(7) { animation-delay: 0.4s; } .PostShow .animated:nth-of-type(8) { animation-delay: 0.45s; } .PostShow .animated:nth-of-type(9) { animation-delay: 0.5s; } .PostShow .animated:nth-of-type(10) { animation-delay: 0.55s; } .PostShow .animated:nth-of-type(11) { animation-delay: 0.6s; } .PostShow .animated:nth-of-type(12) { animation-delay: 0.65s; } /*! * animate.css -http://daneden.me/animate */ .animated { animation-duration: 1s; animation-fill-mode: both; } .animated.infinite { animation-iteration-count: infinite } .animated.hinge { animation-duration: 2s } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { animation-duration: .75s } @keyframes bounce { 0%, 20%, 53%, 80%, to { animation-timing-function:cubic-bezier(.215, .61, .355, 1); transform:translateZ(0) } 40%, 43% { animation-timing-function:cubic-bezier(.755, .05, .855, .06); transform:translate3d(0, -30px, 0) } 70% { animation-timing-function:cubic-bezier(.755, .05, .855, .06); transform:translate3d(0, -15px, 0) } 90% { transform:translate3d(0, -4px, 0) } } .bounce { animation-name: bounce; transform-origin: center bottom } @keyframes flash { 0%, 50%, to { opacity:1 } 25%, 75% { opacity:0 } } .flash { animation-name: flash } @keyframes pulse { 0% { transform:scaleX(1) } 50% { transform:scale3d(1.05, 1.05, 1.05) } to { transform: scaleX(1) } } .pulse { animation-name: pulse } @keyframes rubberBand { 0% { transform:scaleX(1) } 30% { transform:scale3d(1.25, .75, 1) } 40% { transform:scale3d(.75, 1.25, 1) } 50% { transform:scale3d(1.15, .85, 1) } 65% { transform:scale3d(.95, 1.05, 1) } 75% { transform:scale3d(1.05, .95, 1) } to { transform: scaleX(1) } } .rubberBand { animation-name: rubberBand } @keyframes shake { 0%, to { transform:translateZ(0) } 10%, 30%, 50%, 70%, 90% { transform:translate3d(-10px, 0, 0) } 20%, 40%, 60%, 80% { transform:translate3d(10px, 0, 0) } } .shake { animation-name: shake } @keyframes headShake { 0% { transform:translateX(0) } 6.5% { transform:translateX(-6px) rotateY(-9deg) } 18.5% { transform:translateX(5px) rotateY(7deg) } 31.5% { transform:translateX(-3px) rotateY(-5deg) } 43.5% { transform:translateX(2px) rotateY(3deg) } 50% { transform:translateX(0) } } .headShake { animation-timing-function: ease-in-out; animation-name: headShake } @keyframes swing { 20% { transform:rotate(15deg) } 40% { transform:rotate(-10deg) } 60% { transform:rotate(5deg) } 80% { transform:rotate(-5deg) } to { transform: rotate(0deg) } } .swing { transform-origin: top center; animation-name: swing } @keyframes tada { 0% { transform:scaleX(1) } 10%, 20% { transform:scale3d(.9, .9, .9) rotate(-3deg) } 30%, 50%, 70%, 90% { transform:scale3d(1.1, 1.1, 1.1) rotate(3deg) } 40%, 60%, 80% { transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg) } to { transform: scaleX(1) } } .tada { animation-name: tada } @keyframes wobble { 0% { transform:none } 15% { transform:translate3d(-25%, 0, 0) rotate(-5deg) } 30% { transform:translate3d(20%, 0, 0) rotate(3deg) } 45% { transform:translate3d(-15%, 0, 0) rotate(-3deg) } 60% { transform:translate3d(10%, 0, 0) rotate(2deg) } 75% { transform:translate3d(-5%, 0, 0) rotate(-1deg) } to { transform: none } } .wobble { animation-name: wobble } @keyframes jello { 0%, 11.1%, to { transform:none } 22.2% { transform:skewX(-12.5deg) skewY(-12.5deg) } 33.3% { transform:skewX(6.25deg) skewY(6.25deg) } 44.4% { transform:skewX(-3.125deg) skewY(-3.125deg) } 55.5% { transform:skewX(1.5625deg) skewY(1.5625deg) } 66.6% { transform:skewX(-.78125deg) skewY(-.78125deg) } 77.7% { transform:skewX(.390625deg) skewY(.390625deg) } 88.8% { transform:skewX(-.1953125deg) skewY(-.1953125deg) } } .jello { animation-name: jello; transform-origin: center } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { animation-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; transform:scale3d(.3, .3, .3) } 20% { transform:scale3d(1.1, 1.1, 1.1) } 40% { transform:scale3d(.9, .9, .9) } 60% { opacity:1; transform:scale3d(1.03, 1.03, 1.03) } 80% { transform:scale3d(.97, .97, .97) } to { opacity: 1; transform: scaleX(1) } } .bounceIn { animation-name: bounceIn } @keyframes bounceInDown { 0%, 60%, 75%, 90%, to { animation-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; transform:translate3d(0, -3000px, 0) } 60% { opacity:1; transform:translate3d(0, 25px, 0) } 75% { transform:translate3d(0, -10px, 0) } 90% { transform:translate3d(0, 5px, 0) } to { transform: none } } .bounceInDown { animation-name: bounceInDown } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { animation-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; transform:translate3d(-3000px, 0, 0) } 60% { opacity:1; transform:translate3d(25px, 0, 0) } 75% { transform:translate3d(-10px, 0, 0) } 90% { transform:translate3d(5px, 0, 0) } to { transform: none } } .bounceInLeft { animation-name: bounceInLeft } @keyframes bounceInRight { 0%, 60%, 75%, 90%, to { animation-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; transform:translate3d(3000px, 0, 0) } 60% { opacity:1; transform:translate3d(-25px, 0, 0) } 75% { transform:translate3d(10px, 0, 0) } 90% { transform:translate3d(-5px, 0, 0) } to { transform: none } } .bounceInRight { animation-name: bounceInRight } @keyframes bounceInUp { 0%, 60%, 75%, 90%, to { animation-timing-function:cubic-bezier(.215, .61, .355, 1) } 0% { opacity:0; transform:translate3d(0, 3000px, 0) } 60% { opacity:1; transform:translate3d(0, -20px, 0) } 75% { transform:translate3d(0, 10px, 0) } 90% { transform:translate3d(0, -5px, 0) } to { transform: translateZ(0) } } .bounceInUp { animation-name: bounceInUp } @keyframes bounceOut { 20% { transform:scale3d(.9, .9, .9) } 50%, 55% { opacity:1; transform:scale3d(1.1, 1.1, 1.1) } to { opacity: 0; transform: scale3d(.3, .3, .3) } } .bounceOut { animation-name: bounceOut } @keyframes bounceOutDown { 20% { transform:translate3d(0, 10px, 0) } 40%, 45% { opacity:1; transform:translate3d(0, -20px, 0) } to { opacity: 0; transform: translate3d(0, 2000px, 0) } } .bounceOutDown { animation-name: bounceOutDown } @keyframes bounceOutLeft { 20% { opacity:1; transform:translate3d(20px, 0, 0) } to { opacity: 0; transform: translate3d(-2000px, 0, 0) } } .bounceOutLeft { animation-name: bounceOutLeft } @keyframes bounceOutRight { 20% { opacity:1; transform:translate3d(-20px, 0, 0) } to { opacity: 0; transform: translate3d(2000px, 0, 0) } } .bounceOutRight { animation-name: bounceOutRight } @keyframes bounceOutUp { 20% { transform:translate3d(0, -10px, 0) } 40%, 45% { opacity:1; transform:translate3d(0, 20px, 0) } to { opacity: 0; transform: translate3d(0, -2000px, 0) } } .bounceOutUp { animation-name: bounceOutUp } @keyframes fadeIn { 0% { opacity:0 } to { opacity: 1 } } .fadeIn { animation-name: fadeIn } @keyframes fadeInDown { 0% { opacity:0; transform:translate3d(0, -100%, 0) } to { opacity: 1; transform: none } } .fadeInDown { animation-name: fadeInDown } @keyframes fadeInDownBig { 0% { opacity:0; transform:translate3d(0, -2000px, 0) } to { opacity: 1; transform: none } } .fadeInDownBig { animation-name: fadeInDownBig } @keyframes fadeInLeft { 0% { opacity:0; transform:translate3d(-100%, 0, 0) } to { opacity: 1; transform: none } } .fadeInLeft { animation-name: fadeInLeft } @keyframes fadeInLeftBig { 0% { opacity:0; transform:translate3d(-2000px, 0, 0) } to { opacity: 1; transform: none } } .fadeInLeftBig { animation-name: fadeInLeftBig } @keyframes fadeInRight { 0% { opacity:0; transform:translate3d(100%, 0, 0) } to { opacity: 1; transform: none } } .fadeInRight { animation-name: fadeInRight } @keyframes fadeInRightBig { 0% { opacity:0; transform:translate3d(2000px, 0, 0) } to { opacity: 1; transform: none } } .fadeInRightBig { animation-name: fadeInRightBig } @keyframes fadeInUp { 0% { opacity:0; transform:translate3d(0, 100%, 0) } to { opacity: 1; transform: none } } .fadeInUp { animation-name: fadeInUp } @keyframes fadeInUpBig { 0% { opacity:0; transform:translate3d(0, 2000px, 0) } to { opacity: 1; transform: none } } .fadeInUpBig { animation-name: fadeInUpBig } @keyframes fadeOut { 0% { opacity:1 } to { opacity: 0 } } .fadeOut { animation-name: fadeOut } @keyframes fadeOutDown { 0% { opacity:1 } to { opacity: 0; transform: translate3d(0, 100%, 0) } } .fadeOutDown { animation-name: fadeOutDown } @keyframes fadeOutDownBig { 0% { opacity:1 } to { opacity: 0; transform: translate3d(0, 2000px, 0) } } .fadeOutDownBig { animation-name: fadeOutDownBig } @keyframes fadeOutLeft { 0% { opacity:1 } to { opacity: 0; transform: translate3d(-100%, 0, 0) } } .fadeOutLeft { animation-name: fadeOutLeft } @keyframes fadeOutLeftBig { 0% { opacity:1 } to { opacity: 0; transform: translate3d(-2000px, 0, 0) } } .fadeOutLeftBig { animation-name: fadeOutLeftBig } @keyframes fadeOutRight { 0% { opacity:1 } to { opacity: 0; transform: translate3d(100%, 0, 0) } } .fadeOutRight { animation-name: fadeOutRight } @keyframes fadeOutRightBig { 0% { opacity:1 } to { opacity: 0; transform: translate3d(2000px, 0, 0) } } .fadeOutRightBig { animation-name: fadeOutRightBig } @keyframes fadeOutUp { 0% { opacity:1 } to { opacity: 0; transform: translate3d(0, -100%, 0) } } .fadeOutUp { animation-name: fadeOutUp } @keyframes fadeOutUpBig { 0% { opacity:1 } to { opacity: 0; transform: translate3d(0, -2000px, 0) } } .fadeOutUpBig { animation-name: fadeOutUpBig } @keyframes flip { 0% { transform:perspective(400px) rotateY(-1turn); animation-timing-function:ease-out } 40% { transform:perspective(400px) translateZ(150px) rotateY(-190deg); animation-timing-function:ease-out } 50% { transform:perspective(400px) translateZ(150px) rotateY(-170deg); animation-timing-function:ease-in } 80% { transform:perspective(400px) scale3d(.95, .95, .95); animation-timing-function:ease-in } to { transform: perspective(400px); animation-timing-function: ease-in } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; animation-name: flip } @keyframes flipInX { 0% { transform:perspective(400px) rotateX(90deg); animation-timing-function:ease-in; opacity:0 } 40% { transform:perspective(400px) rotateX(-20deg); animation-timing-function:ease-in } 60% { transform:perspective(400px) rotateX(10deg); opacity:1 } 80% { transform:perspective(400px) rotateX(-5deg) } to { transform: perspective(400px) } } .flipInX { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; animation-name: flipInX } @keyframes flipInY { 0% { transform:perspective(400px) rotateY(90deg); animation-timing-function:ease-in; opacity:0 } 40% { transform:perspective(400px) rotateY(-20deg); animation-timing-function:ease-in } 60% { transform:perspective(400px) rotateY(10deg); opacity:1 } 80% { transform:perspective(400px) rotateY(-5deg) } to { transform: perspective(400px) } } .flipInY { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; animation-name: flipInY } @keyframes flipOutX { 0% { transform:perspective(400px) } 30% { transform:perspective(400px) rotateX(-20deg); opacity:1 } to { transform: perspective(400px) rotateX(90deg); opacity: 0 } } .flipOutX { animation-name: flipOutX; -webkit-backface-visibility: visible!important; backface-visibility: visible!important } @keyframes flipOutY { 0% { transform:perspective(400px) } 30% { transform:perspective(400px) rotateY(-15deg); opacity:1 } to { transform: perspective(400px) rotateY(90deg); opacity: 0 } } .flipOutY { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; animation-name: flipOutY } @keyframes lightSpeedIn { 0% { transform:translate3d(100%, 0, 0) skewX(-30deg); opacity:0 } 60% { transform:skewX(20deg); opacity:1 } 80% { transform:skewX(-5deg); opacity:1 } to { transform: none; opacity: 1 } } .lightSpeedIn { animation-name: lightSpeedIn; animation-timing-function: ease-out } @keyframes lightSpeedOut { 0% { opacity:1 } to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0 } } .lightSpeedOut { animation-name: lightSpeedOut; animation-timing-function: ease-in } @keyframes rotateIn { 0% { transform-origin:center; transform:rotate(-200deg); opacity:0 } to { transform-origin: center; transform: none; opacity: 1 } } .rotateIn { animation-name: rotateIn } @keyframes rotateInDownLeft { 0% { transform-origin:left bottom; transform:rotate(-45deg); opacity:0 } to { transform-origin: left bottom; transform: none; opacity: 1 } } .rotateInDownLeft { animation-name: rotateInDownLeft } @keyframes rotateInDownRight { 0% { transform-origin:right bottom; transform:rotate(45deg); opacity:0 } to { transform-origin: right bottom; transform: none; opacity: 1 } } .rotateInDownRight { animation-name: rotateInDownRight } @keyframes rotateInUpLeft { 0% { transform-origin:left bottom; transform:rotate(45deg); opacity:0 } to { transform-origin: left bottom; transform: none; opacity: 1 } } .rotateInUpLeft { animation-name: rotateInUpLeft } @keyframes rotateInUpRight { 0% { transform-origin:right bottom; transform:rotate(-90deg); opacity:0 } to { transform-origin: right bottom; transform: none; opacity: 1 } } .rotateInUpRight { animation-name: rotateInUpRight } @keyframes rotateOut { 0% { transform-origin:center; opacity:1 } to { transform-origin: center; transform: rotate(200deg); opacity: 0 } } .rotateOut { animation-name: rotateOut } @keyframes rotateOutDownLeft { 0% { transform-origin:left bottom; opacity:1 } to { transform-origin: left bottom; transform: rotate(45deg); opacity: 0 } } .rotateOutDownLeft { animation-name: rotateOutDownLeft } @keyframes rotateOutDownRight { 0% { transform-origin:right bottom; opacity:1 } to { transform-origin: right bottom; transform: rotate(-45deg); opacity: 0 } } .rotateOutDownRight { animation-name: rotateOutDownRight } @keyframes rotateOutUpLeft { 0% { transform-origin:left bottom; opacity:1 } to { transform-origin: left bottom; transform: rotate(-45deg); opacity: 0 } } .rotateOutUpLeft { animation-name: rotateOutUpLeft } @keyframes rotateOutUpRight { 0% { transform-origin:right bottom; opacity:1 } to { transform-origin: right bottom; transform: rotate(90deg); opacity: 0 } } .rotateOutUpRight { animation-name: rotateOutUpRight } @keyframes hinge { 0% { transform-origin:top left; animation-timing-function:ease-in-out } 20%, 60% { transform:rotate(80deg); transform-origin:top left; animation-timing-function:ease-in-out } 40%, 80% { transform:rotate(60deg); transform-origin:top left; animation-timing-function:ease-in-out; opacity:1 } to { transform: translate3d(0, 700px, 0); opacity: 0 } } .hinge { animation-name: hinge } @keyframes jackInTheBox { 0% { opacity:0; transform:scale(.1) rotate(30deg); transform-origin:center bottom } 50% { transform:rotate(-10deg) } 70% { transform:rotate(3deg) } to { opacity: 1; transform: scale(1) } } .jackInTheBox { animation-name: jackInTheBox } @keyframes rollIn { 0% { opacity:0; transform:translate3d(-100%, 0, 0) rotate(-120deg) } to { opacity: 1; transform: none } } .rollIn { animation-name: rollIn } @keyframes rollOut { 0% { opacity:1 } to { opacity: 0; transform: translate3d(100%, 0, 0) rotate(120deg) } } .rollOut { animation-name: rollOut } @keyframes zoomIn { 0% { opacity:0; transform:scale3d(.3, .3, .3) } 50% { opacity:1 } } .zoomIn { animation-name: zoomIn } @keyframes zoomInDown { 0% { opacity:0; transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 60% { opacity:1; transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } .zoomInDown { animation-name: zoomInDown } @keyframes zoomInLeft { 0% { opacity:0; transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 60% { opacity:1; transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } .zoomInLeft { animation-name: zoomInLeft } @keyframes zoomInRight { 0% { opacity:0; transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 60% { opacity:1; transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } .zoomInRight { animation-name: zoomInRight } @keyframes zoomInUp { 0% { opacity:0; transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } 60% { opacity:1; transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function:cubic-bezier(.175, .885, .32, 1) } } .zoomInUp { animation-name: zoomInUp } @keyframes zoomOut { 0% { opacity:1 } 50% { opacity:0; transform:scale3d(.3, .3, .3) } to { opacity: 0 } } .zoomOut { animation-name: zoomOut } @keyframes zoomOutDown { 40% { opacity:1; transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } to { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } .zoomOutDown { animation-name: zoomOutDown } @keyframes zoomOutLeft { 40% { opacity:1; transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0) } to { opacity: 0; transform: scale(.1) translate3d(-2000px, 0, 0); transform-origin: left center } } .zoomOutLeft { animation-name: zoomOutLeft } @keyframes zoomOutRight { 40% { opacity:1; transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0) } to { opacity: 0; transform: scale(.1) translate3d(2000px, 0, 0); transform-origin: right center } } .zoomOutRight { animation-name: zoomOutRight } @keyframes zoomOutUp { 40% { opacity:1; transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function:cubic-bezier(.55, .055, .675, .19) } to { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(.175, .885, .32, 1) } } .zoomOutUp { animation-name: zoomOutUp } @keyframes slideInDown { 0% { transform:translate3d(0, -100%, 0); visibility:visible } to { transform: translateZ(0) } } .slideInDown { animation-name: slideInDown } @keyframes slideInLeft { 0% { transform:translate3d(-100%, 0, 0); visibility:visible } to { transform: translateZ(0) } } .slideInLeft { animation-name: slideInLeft } @keyframes slideInRight { 0% { transform:translate3d(100%, 0, 0); visibility:visible } to { transform: translateZ(0) } } .slideInRight { animation-name: slideInRight } @keyframes slideInUp { 0% { transform:translate3d(0, 100%, 0); visibility:visible } to { transform: translateZ(0) } } .slideInUp { animation-name: slideInUp } @keyframes slideOutDown { 0% { transform:translateZ(0) } to { visibility: hidden; transform: translate3d(0, 100%, 0) } } .slideOutDown { animation-name: slideOutDown } @keyframes slideOutLeft { 0% { transform:translateZ(0) } to { visibility: hidden; transform: translate3d(-100%, 0, 0) } } .slideOutLeft { animation-name: slideOutLeft } @keyframes slideOutRight { 0% { transform:translateZ(0) } to { visibility: hidden; transform: translate3d(100%, 0, 0) } } .slideOutRight { animation-name: slideOutRight } @keyframes slideOutUp { 0% { transform:translateZ(0) } to { visibility: hidden; transform: translate3d(0, -100%, 0) } } .slideOutUp { animation-name: slideOutUp } @-webkit-keyframes goTopapp { 0% { -webkit-transform:scale(.8) } to { -webkit-transform: scale(1) } } @keyframes goTopapp { 0% { transform:scale(.8) } to { transform: scale(1) } } @-webkit-keyframes drop { 0% { top: 5px; opacity: 0; } 30% { top: 10px; opacity: 1; } 100% { top: 25px; opacity: 0; } } @keyframes drop { 0% { top: 5px; opacity: 0; } 30% { top: 10px; opacity: 1; } 100% { top: 25px; opacity: 0; } } .lfooter { display: none } @media only screen and (max-width:768px) { .tools { display: none } .footer { margin-bottom: 50px; } .lfooter { max-width: 720px; height: 70px; background-color: #222; position: fixed; bottom: 0px; left: 0; right: 0; margin: 0 auto; display: block; z-index: 99; } .lfooter ul li { width: 25%; height: auto; float: left; text-align: center; padding: 10px 0px; } .lfooter ul li a { color: #FFF; line-height: 12px; font-size: 12px; } } .ecomment { margin-bottom: 12px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; padding: 3px; border: solid 1px #999; margin: 0; }