@charset "utf-8"; /*! responsive-nav.js 1.0.39 by @viljamis */ @media screen and (max-width: 991px) { .nav-collapse ul { margin: 0; padding: 0; width: 100%; display: block; list-style: none; } .nav-collapse li { width: 100%; display: block; } .js .nav-collapse { clip: rect(0 0 0 0); max-height: 0; position: absolute; display: block; overflow: hidden; zoom: 1; } .nav-collapse.opened { max-height: 9999px; } .nav-toggle { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } /* ------------------------------------------ NAVIGATION STYLES (+ responsive-nav.css file is loaded in the ) --------------------------------------------- */ .fixed { position: fixed; width: 100%; top: 0; left: 0; } .nav-collapse, .nav-collapse * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .nav-collapse, .nav-collapse ul { list-style: none; width: 100%; float: left; } .nav-collapse li { float: left; width: 100%; } .nav-collapse a { color: #fff; text-decoration: none; width: 100%; background: #1756c0; border-bottom: 1px solid white; padding: 0.7em 1em; float: left; font-size: 1.5rem; } .nav-collapse a.pl25 { background: #87a1c7; } .nav-collapse ul ul a { background: #ca3716; padding-left: 2em; } .nav-collapse .subnav a { font-size: 1rem; } /* ------------------------------------------ NAV TOGGLE STYLES --------------------------------------------- */ @font-face { font-family: "responsivenav"; src: url("../icons/responsivenav.eot"); src: url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"), url("../icons/responsivenav.ttf") format("truetype"), url("../icons/responsivenav.woff") format("woff"), url("../icons/responsivenav.svg#responsivenav") format("svg"); font-weight: normal; font-style: normal; } .nav-toggle { position: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; text-indent: -999px; position: relative; overflow: hidden; width: 70px; height: 55px; float: right; } .nav-toggle:before { color: #1756c0; /* Edit this to change the icon color */ font-family: "responsivenav", sans-serif; font-style: normal; font-weight: normal; font-variant: normal; font-size: 28px; text-transform: none; position: absolute; content: "≡"; text-indent: 0; text-align: center; line-height: 55px; speak: none; width: 100%; top: 0; left: 0; } .nav-toggle.active::before { font-size: 24px; content: "x"; } } html { font-size: 62.5%; } body { color: #666666; } .wrap { max-width: 1920px; margin: 0 auto; } .main { max-width: 1400px; margin: 0 auto; } .main:after { display: table; content: " "; clear: both; } .row { margin-left: 0; margin-right: 0; } .table { display: table; content: " "; } .clearfix { clear: both; } .trans { -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s; transition: all .5s; } .hid { opacity: 0; } .animated { opacity: 1 !important; } /* css */ body { color: #333; font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif; font-size: 12px; background: #fff; } * { margin: 0; padding: 0; } a { text-decoration: none; color: #333; cursor: pointer; } a:hover { text-decoration: underline; } ul, li { list-style: none; } img { border: 0; } .border0 { border: 0 !important; } .color_main { color: #024999; } /* main color */ .color_555 { color: #555; } .dashline { border-top: 1px dashed #555; height: 1px; border-bottom: 0; } .fl { float: left; } .fr { float: right; } .center { text-align: center; } .relative { position: relative; } .clear { clear: both; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .ma0 { margin: 0; } .mt1 { margin-top: 1px !important; } .mt5 { margin-top: 5px !important; } .mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px !important; } .mt20 { margin-top: 20px !important; } .mt25 { margin-top: 25px !important; } .mt30 { margin-top: 30px !important; } .mt35 { margin-top: 35px !important; } .mt40 { margin-top: 40px !important; } .mt45 { margin-top: 45px !important; } .mt50 { margin-top: 50px !important; } .mt55 { margin-top: 55px !important; } .mt60 { margin-top: 60px !important; } .mt65 { margin-top: 65px !important; } .mt70 { margin-top: 70px !important; } .mt80 { margin-top: 80px !important; } .mt85 { margin-top: 85px !important; } .mt90 { margin-top: 90px !important; } .mt95 { margin-top: 95px !important; } .mt100 { margin-top: 100px !important; } .mt200 { margin-top: 200px !important; } .mr1 { margin-right: 1px !important; } .mr3 { margin-right: 3px !important; } .mr5 { margin-right: 5px !important; } .mr10 { margin-right: 10px !important; } .mr15 { margin-right: 15px !important; } .mr20 { margin-right: 20px !important; } .mr25 { margin-right: 25px !important; } .mr30 { margin-right: 30px !important; } .mr35 { margin-right: 35px !important; } .mr40 { margin-right: 40px !important; } .mr45 { margin-right: 45px !important; } .mr50 { margin-right: 50px !important; } .mr55 { margin-right: 55px !important; } .mr60 { margin-right: 60px !important; } .mr65 { margin-right: 65px !important; } .mr70 { margin-right: 70px !important; } .mr80 { margin-right: 80px !important; } .mr85 { margin-right: 85px !important; } .mr90 { margin-right: 90px !important; } .mr95 { margin-right: 95px !important; } .mr100 { margin-right: 100px !important; } .mb1 { margin-bottom: 1px !important; } .mb5 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb25 { margin-bottom: 25px !important; } .mb30 { margin-bottom: 30px !important; } .mb35 { margin-bottom: 35px !important; } .mb40 { margin-bottom: 40px !important; } .mb45 { margin-bottom: 45px !important; } .mb50 { margin-bottom: 50px !important; } .mb55 { margin-bottom: 55px !important; } .mb60 { margin-bottom: 60px !important; } .mb65 { margin-bottom: 65px !important; } .mb70 { margin-bottom: 70px !important; } .mb80 { margin-bottom: 80px !important; } .mb85 { margin-bottom: 85px !important; } .mb90 { margin-bottom: 90px !important; } .mb95 { margin-bottom: 95px !important; } .mb100 { margin-bottom: 100px !important; } .ml1 { margin-left: 1px !important; } .ml5 { margin-left: 5px !important; } .ml10 { margin-left: 10px !important; } .ml15 { margin-left: 15px !important; } .ml20 { margin-left: 20px !important; } .ml25 { margin-left: 25px !important; } .ml30 { margin-left: 30px !important; } .ml35 { margin-left: 35px !important; } .ml40 { margin-left: 40px !important; } .ml45 { margin-left: 45px !important; } .ml50 { margin-left: 50px !important; } .ml55 { margin-left: 55px !important; } .ml60 { margin-left: 60px !important; } .ml65 { margin-left: 65px !important; } .ml70 { margin-left: 70px !important; } .ml80 { margin-left: 80px !important; } .ml85 { margin-left: 85px !important; } .ml90 { margin-left: 90px !important; } .ml95 { margin-left: 95px !important; } .ml100 { margin-left: 100px !important; } /*padding*/ .pa0 { padding: 0 !important; } .pt1 { padding-top: 1px !important; } .pt5 { padding-top: 5px !important; } .pt10 { padding-top: 10px !important; } .pt15 { padding-top: 15px !important; } .pt20 { padding-top: 20px !important; } .pt25 { padding-top: 25px !important; } .pt30 { padding-top: 30px !important; } .pt35 { padding-top: 35px !important; } .pt40 { padding-top: 40px !important; } .pt45 { padding-top: 45px !important; } .pt50 { padding-top: 50px !important; } .pt55 { padding-top: 55px !important; } .pt60 { padding-top: 60px !important; } .pt65 { padding-top: 65px !important; } .pt70 { padding-top: 70px !important; } .pt80 { padding-top: 80px !important; } .pt85 { padding-top: 85px !important; } .pt90 { padding-top: 90px !important; } .pt95 { padding-top: 95px !important; } .pt100 { padding-top: 100px !important; } .pt200 { padding-top: 200px !important; } .pr1 { padding-right: 1px !important; } .pr5 { padding-right: 5px !important; } .pr10 { padding-right: 10px !important; } .pr15 { padding-right: 15px !important; } .pr20 { padding-right: 20px !important; } .pr25 { padding-right: 25px !important; } .pr30 { padding-right: 30px !important; } .pr35 { padding-right: 35px !important; } .pr40 { padding-right: 40px !important; } .pr45 { padding-right: 45px !important; } .pr50 { padding-right: 50px !important; } .pr55 { padding-right: 55px !important; } .pr60 { padding-right: 60px !important; } .pr65 { padding-right: 65px !important; } .pr70 { padding-right: 70px !important; } .pr80 { padding-right: 80px !important; } .pr85 { padding-right: 85px !important; } .pr90 { padding-right: 90px !important; } .pr95 { padding-right: 95px !important; } .pr100 { padding-right: 100px !important; } .pb1 { padding-bottom: 1px !important; } .pb5 { padding-bottom: 5px !important; } .pb10 { padding-bottom: 10px !important; } .pb15 { padding-bottom: 15px !important; } .pb20 { padding-bottom: 20px !important; } .pb25 { padding-bottom: 25px !important; } .pb30 { padding-bottom: 30px !important; } .pb35 { padding-bottom: 35px !important; } .pb40 { padding-bottom: 40px !important; } .pb45 { padding-bottom: 45px !important; } .pb50 { padding-bottom: 50px !important; } .pb55 { padding-bottom: 55px !important; } .pb60 { padding-bottom: 60px !important; } .pb65 { padding-bottom: 65px !important; } .pb70 { padding-bottom: 70px !important; } .pb80 { padding-bottom: 80px !important; } .pb85 { padding-bottom: 85px !important; } .pb90 { padding-bottom: 90px !important; } .pb95 { padding-bottom: 95px !important; } .pb100 { padding-bottom: 100px !important; } .pl1 { padding-left: 1px !important; } .pl5 { padding-left: 5px !important; } .pl10 { padding-left: 10px !important; } .pl15 { padding-left: 15px !important; } .pl20 { padding-left: 20px !important; } .pl25 { padding-left: 25px !important; } .pl30 { padding-left: 30px !important; } .pl35 { padding-left: 35px !important; } .pl40 { padding-left: 40px !important; } .pl45 { padding-left: 45px !important; } .pl50 { padding-left: 50px !important; } .pl55 { padding-left: 55px !important; } .pl60 { padding-left: 60px !important; } .pl65 { padding-left: 65px !important; } .pl70 { padding-left: 70px !important; } .pl80 { padding-left: 80px !important; } .pl85 { padding-left: 85px !important; } .pl90 { padding-left: 90px !important; } .pl95 { padding-left: 95px !important; } .pl100 { padding-left: 100px !important; } .linkGreen { color: #0c3b98; } .linkblue { color: #0099e9; } .linkRed { color: #ff0000; } .linkOrange { color: #ff440e; } .linkYellow { color: #fcff00; } .titleBlue14 { color: #4a91ad; font-size: 14px; font-weight: bold; } .titleBlue13 { color: #4a91ad; font-size: 13px; font-weight: bold; } .textGray12 { font-size: 12px; color: #787878; } .textRed { font-size: 12px; color: red; } .textBlue { color: #155973; } .fontSize { font-size: 16px; } .fontSize15 { font-size: 15px; } .fontSize16 { font-size: 16px; } .fontBold { font-weight: bold; } .bold { font-weight: bold; } .w200 { width: 200px; } /* duang 加特效 */ .hui-bounce, .hui-flip, .hui-flash, .hui-shake, .hui-swing, .hui-wobble, .hui-ring { -webkit-animation: 1s ease; -moz-animation: 1s ease; -ms-animation: 1s ease; animation: 1s ease; } .hui-fadein, .hui-fadeinT, .hui-fadeinR, .hui-fadeinB, .hui-fadeinL, .hui-bouncein, .hui-bounceinT, .hui-bounceinR, .hui-bounceinB, .hui-bounceinL, .hui-rotatein, .hui-rotateinLT, .hui-rotateinLB, .hui-rotateinRT, .hui-rotateinRB, .hui-flipin, .hui-flipinX, .hui-flipinY { -webkit-animation: 1s ease-out backwards; -moz-animation: 1s ease-out backwards; -ms-animation: 1s ease-out backwards; animation: 1s ease-out backwards; } .hui-fadeout, .hui-fadeoutT, .hui-fadeoutR, .hui-fadeoutB, .hui-fadeoutL, .hui-bounceout, .hui-bounceoutT, .hui-bounceoutR, .hui-bounceoutB, .hui-bounceoutL, .hui-rotateout, .hui-rotateoutLT, .hui-rotateoutLB, .hui-rotateoutRT, .hui-rotateoutRB, .hui-flipout, .hui-flipoutX, .hui-flipoutY { -webkit-animation: 1s ease-in forwards; -moz-animation: 1s ease-in forwards; -ms-animation: 1s ease-in forwards; animation: 1s ease-in forwards; } /* 淡入 */ .hui-fadein { -webkit-animation-name: fadein; -moz-animation-name: fadein; -ms-animation-name: fadein; animation-name: fadein; } /* 淡入-从上 */ .hui-fadeinT { -webkit-animation-name: fadeinT; -moz-animation-name: fadeinT; -ms-animation-name: fadeinT; animation-name: fadeinT; } /* 淡入-从右 */ .hui-fadeinR { -webkit-animation-name: fadeinR; -moz-animation-name: fadeinR; -ms-animation-name: fadeinR; animation-name: fadeinR; } /* 淡入-从下 */ .hui-fadeinB { -webkit-animation-name: fadeinB; -moz-animation-name: fadeinB; -ms-animation-name: fadeinB; animation-name: fadeinB; } /* 淡入-从左 */ .hui-fadeinL { -webkit-animation-name: fadeinL; -moz-animation-name: fadeinL; -ms-animation-name: fadeinL; animation-name: fadeinL; } /* 淡出 */ .hui-fadeout { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; -ms-animation-name: fadeout; animation-name: fadeout; } /* 淡出-向上 */ .hui-fadeoutT { -webkit-animation-name: fadeoutT; -moz-animation-name: fadeoutT; -ms-animation-name: fadeoutT; animation-name: fadeoutT; } /* 淡出-向右 */ .hui-fadeoutR { -webkit-animation-name: fadeoutR; -moz-animation-name: fadeoutR; -ms-animation-name: fadeoutR; animation-name: fadeoutR; } /* 淡出-向下 */ .hui-fadeoutB { -webkit-animation-name: fadeoutB; -moz-animation-name: fadeoutB; -ms-animation-name: fadeoutB; animation-name: fadeoutB; } /* 淡出-向左 */ .hui-fadeoutL { -webkit-animation-name: fadeoutL; -moz-animation-name: fadeoutL; -ms-animation-name: fadeoutL; animation-name: fadeoutL; } /* 弹跳 */ .hui-bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -ms-animation-name: bounce; animation-name: bounce; } /* 弹入 */ .hui-bouncein { -webkit-animation-name: bouncein; -moz-animation-name: bouncein; -ms-animation-name: bouncein; animation-name: bouncein; } /* 弹入-从上 */ .hui-bounceinT { -webkit-animation-name: bounceinT; -moz-animation-name: bounceinT; -ms-animation-name: bounceinT; animation-name: bounceinT; } /* 弹入-从右 */ .hui-bounceinR { -webkit-animation-name: bounceinR; -moz-animation-name: bounceinR; -ms-animation-name: bounceinR; animation-name: bounceinR; } /* 弹入-从下 */ .hui-bounceinB { -webkit-animation-name: bounceinB; -moz-animation-name: bounceinB; -ms-animation-name: bounceinB; animation-name: bounceinB; } /* 弹入-从左 */ .hui-bounceinL { -webkit-animation-name: bounceinL; -moz-animation-name: bounceinL; -ms-animation-name: bounceinL; animation-name: bounceinL; } /* 弹出 */ .hui-bounceout { -webkit-animation-name: bounceout; -moz-animation-name: bounceout; -ms-animation-name: bounceout; animation-name: bounceout; } /* 弹出-向上 */ .hui-bounceoutT { -webkit-animation-name: bounceoutT; -moz-animation-name: bounceoutT; -ms-animation-name: bounceoutT; animation-name: bounceoutT; } /* 弹出-向右 */ .hui-bounceoutR { -webkit-animation-name: bounceoutR; -moz-animation-name: bounceoutR; -ms-animation-name: bounceoutR; animation-name: bounceoutR; } /* 弹出-向下 */ .hui-bounceoutB { -webkit-animation-name: bounceoutB; -moz-animation-name: bounceoutB; -ms-animation-name: bounceoutB; animation-name: bounceoutB; } /* 弹出-向左 */ .hui-bounceoutL { -webkit-animation-name: bounceoutL; -moz-animation-name: bounceoutL; -ms-animation-name: bounceoutL; animation-name: bounceoutL; } /* 转入 */ .hui-rotatein { -webkit-animation-name: rotatein; -moz-animation-name: rotatein; -ms-animation-name: rotatein; animation-name: rotatein; } /* 转入-从左上 */ .hui-rotateinLT { -webkit-animation-name: rotateinLT; -moz-animation-name: rotateinLT; -ms-animation-name: rotateinLT; animation-name: rotateinLT; } /* 转入-从左下 */ .hui-rotateinLB { -webkit-animation-name: rotateinLB; -moz-animation-name: rotateinLB; -ms-animation-name: rotateinLB; animation-name: rotateinLB; } /* 转入-从右上 */ .hui-rotateinRT { -webkit-animation-name: rotateinRT; -moz-animation-name: rotateinRT; -ms-animation-name: rotateinRT; animation-name: rotateinRT; } /* 转入-从右下*/ .hui-rotateinRB { -webkit-animation-name: rotateinRB; -moz-animation-name: rotateinRB; -ms-animation-name: rotateinRB; animation-name: rotateinRB; } /* 转出 */ .hui-rotateout { -webkit-animation-name: rotateout; -moz-animation-name: rotateout; -ms-animation-name: rotateout; animation-name: rotateout; } /* 转出-向左上 */ .hui-rotateoutLT { -webkit-animation-name: rotateoutLT; -moz-animation-name: rotateoutLT; -ms-animation-name: rotateoutLT; animation-name: rotateoutLT; } /* 转出-向左下 */ .hui-rotateoutLB { -webkit-animation-name: rotateoutLB; -moz-animation-name: rotateoutLB; -ms-animation-name: rotateoutLB; animation-name: rotateoutLB; } /* 转出-向右上 */ .hui-rotateoutRT { -webkit-animation-name: rotateoutRT; -moz-animation-name: rotateoutRT; -ms-animation-name: rotateoutRT; animation-name: rotateoutRT; } /* 转出-向右下 */ .hui-rotateoutRB { -webkit-animation-name: rotateoutRB; -moz-animation-name: rotateoutRB; -ms-animation-name: rotateoutRB; animation-name: rotateoutRB; } /* 翻转 */ .hui-flip { -webkit-animation-name: flip; -moz-animation-name: flip; -ms-animation-name: flip; animation-name: flip; } /* 翻入-X轴 */ .hui-flipinX { -webkit-animation-name: flipinX; -moz-animation-name: flipinX; -ms-animation-name: flipinX; animation-name: flipinX; } /* 翻入-Y轴 */ .hui-flipin, .hui-flipinY { -webkit-animation-name: flipinY; -moz-animation-name: flipinY; -ms-animation-name: flipinY; animation-name: flipinY; } /* 翻出-X轴 */ .hui-flipoutX { -webkit-animation-name: flipoutX; -moz-animation-name: flipoutX; -ms-animation-name: flipoutX; animation-name: flipoutX; } /* 翻出-Y轴 */ .hui-flipout, .hui-flipoutY { -webkit-animation-name: flipoutY; -moz-animation-name: flipoutY; -ms-animation-name: flipoutY; animation-name: flipoutY; } /* 闪烁 */ .hui-flash { -webkit-animation-name: flash; -moz-animation-name: flash; -ms-animation-name: flash; animation-name: flash; } /* 震颤 */ .hui-shake { -webkit-animation-name: shake; -moz-animation-name: shake; -ms-animation-name: shake; animation-name: shake; } /* 摇摆 */ .hui-swing { -webkit-animation-name: swing; -moz-animation-name: swing; -ms-animation-name: swing; animation-name: swing; } /* 摇晃 */ .hui-wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -ms-animation-name: wobble; animation-name: wobble; } /* 震铃 */ .hui-ring { -webkit-animation-name: ring; -moz-animation-name: ring; -ms-animation-name: ring; animation-name: ring; } /* define */ /* 淡入 */ @-webkit-keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } /* 淡入-从上 */ @-webkit-keyframes fadeinT { 0% { opacity: 0; -webkit-transform: translateY(-100px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeinT { 0% { opacity: 0; -moz-transform: translateY(-100px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-ms-keyframes fadeinT { 0% { opacity: 0; -ms-transform: translateY(-100px); } 100% { opacity: 1; -ms-transform: translateY(0); } } @keyframes fadeinT { 0% { opacity: 0; transform: translateY(-100px); } 100% { opacity: 1; transform: translateY(0); } } /* 淡入-从右 */ @-webkit-keyframes fadeinR { 0% { opacity: 0; -webkit-transform: translateX(100px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeinR { 0% { opacity: 0; -moz-transform: translateX(100px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-ms-keyframes fadeinR { 0% { opacity: 0; -ms-transform: translateX(100px); } 100% { opacity: 1; -ms-transform: translateX(0); } } @keyframes fadeinR { 0% { opacity: 0; transform: translateX(100px); } 100% { opacity: 1; transform: translateX(0); } } /* 淡入-从下 */ @-webkit-keyframes fadeinB { 0% { opacity: 0; -webkit-transform: translateY(100px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeinB { 0% { opacity: 0; -moz-transform: translateY(100px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-ms-keyframes fadeinB { 0% { opacity: 0; -ms-transform: translateY(100px); } 100% { opacity: 1; -ms-transform: translateY(0); } } @keyframes fadeinB { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateY(0); } } /* 淡入-从左 */ @-webkit-keyframes fadeinL { 0% { opacity: 0; -webkit-transform: translateX(-100px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeinL { 0% { opacity: 0; -moz-transform: translateX(-100px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-ms-keyframes fadeinL { 0% { opacity: 0; -ms-transform: translateX(-100px); } 100% { opacity: 1; -ms-transform: translateX(0); } } @keyframes fadeinL { 0% { opacity: 0; transform: translateX(-100px); } 100% { opacity: 1; transform: translateX(0); } } /* 淡出 */ @-webkit-keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } @-ms-keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } /* 淡出-向上 */ @-webkit-keyframes fadeoutT { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-100px); } } @-moz-keyframes fadeoutT { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-100px); } } @-ms-keyframes fadeoutT { 0% { opacity: 1; -ms-transform: translateY(0); } 100% { opacity: 0; -ms-transform: translateY(-100px); } } @keyframes fadeoutT { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-100px); } } /* 淡出-向右 */ @-webkit-keyframes fadeoutR { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(100px); } } @-moz-keyframes fadeoutR { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(100px); } } @-ms-keyframes fadeoutR { 0% { opacity: 1; -ms-transform: translateX(0); } 100% { opacity: 0; -ms-transform: translateX(100px); } } @keyframes fadeoutR { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(100px); } } /* 淡出-向下 */ @-webkit-keyframes fadeoutB { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(100px); } } @-moz-keyframes fadeoutB { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(100px); } } @-ms-keyframes fadeoutB { 0% { opacity: 1; -ms-transform: translateY(0); } 100% { opacity: 0; -ms-transform: translateY(100px); } } @keyframes fadeoutB { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(100px); } } /* 淡出-向左 */ @-webkit-keyframes fadeoutL { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-100px); } } @-moz-keyframes fadeoutL { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-100px); } } @-ms-keyframes fadeoutL { 0% { opacity: 1; -ms-transform: translateX(0); } 100% { opacity: 0; -ms-transform: translateX(-100px); } } @keyframes fadeoutL { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-100px); } } /* 弹跳 */ @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); } 40% { -moz-transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); } } @-ms-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -ms-transform: translateY(0); } 40% { -ms-transform: translateY(-30px); } 60% { -ms-transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } /* 弹入 */ @-webkit-keyframes bouncein { 0% { opacity: 0; -webkit-transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes bouncein { 0% { opacity: 0; -moz-transform: scale(0.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(0.9); } 100% { -moz-transform: scale(1); } } @-ms-keyframes bouncein { 0% { opacity: 0; -ms-transform: scale(0.3); } 50% { opacity: 1; -ms-transform: scale(1.05); } 70% { -ms-transform: scale(0.9); } 100% { -ms-transform: scale(1); } } @keyframes bouncein { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } /* 弹入-从上 */ @-webkit-keyframes bounceinT { 0% { opacity: 0; -webkit-transform: translateY(-100px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceinT { 0% { opacity: 0; -moz-transform: translateY(-100px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { -moz-transform: translateY(0); } } @-ms-keyframes bounceinT { 0% { opacity: 0; -ms-transform: translateY(-100px); } 60% { opacity: 1; -ms-transform: translateY(30px); } 80% { -ms-transform: translateY(-10px); } 100% { -ms-transform: translateY(0); } } @keyframes bounceinT { 0% { opacity: 0; transform: translateY(-100px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } /* 弹入-从右 */ @-webkit-keyframes bounceinR { 0% { opacity: 0; -webkit-transform: translateX(100px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceinR { 0% { opacity: 0; -moz-transform: translateX(100px); } 60% { opacity: 1; -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); } 100% { -moz-transform: translateX(0); } } @-ms-keyframes bounceinR { 0% { opacity: 0; -ms-transform: translateX(100px); } 60% { opacity: 1; -ms-transform: translateX(-30px); } 80% { -ms-transform: translateX(10px); } 100% { -ms-transform: translateX(0); } } @keyframes bounceinR { 0% { opacity: 0; transform: translateX(100px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } /* 弹入-从下 */ @-webkit-keyframes bounceinB { 0% { opacity: 0; -webkit-transform: translateY(100px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceinB { 0% { opacity: 0; -moz-transform: translateY(100px); } 60% { opacity: 1; -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(0); } } @-ms-keyframes bounceinB { 0% { opacity: 0; -ms-transform: translateY(100px); } 60% { opacity: 1; -ms-transform: translateY(-30px); } 80% { -ms-transform: translateY(10px); } 100% { -ms-transform: translateY(0); } } @keyframes bounceinB { 0% { opacity: 0; transform: translateY(100px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } /* 弹入-从左 */ @-webkit-keyframes bounceinL { 0% { opacity: 0; -webkit-transform: translateX(-100px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceinL { 0% { opacity: 0; -moz-transform: translateX(-100px); } 60% { opacity: 1; -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); } 100% { -moz-transform: translateX(0); } } @-ms-keyframes bounceinL { 0% { opacity: 0; -ms-transform: translateX(-100px); } 60% { opacity: 1; -ms-transform: translateX(30px); } 80% { -ms-transform: translateX(-10px); } 100% { -ms-transform: translateX(0); } } @keyframes bounceinL { 0% { opacity: 0; transform: translateX(-100px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } /* 弹出 */ @-webkit-keyframes bounceout { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); } } @-moz-keyframes bounceout { 0% { -moz-transform: scale(1); } 25% { -moz-transform: scale(0.95); } 50% { opacity: 1; -moz-transform: scale(1.1); } 100% { opacity: 0; -moz-transform: scale(0.3); } } @-ms-keyframes bounceout { 0% { -ms-transform: scale(1); } 25% { -ms-transform: scale(0.95); } 50% { opacity: 1; -ms-transform: scale(1.1); } 100% { opacity: 0; -ms-transform: scale(0.3); } } @keyframes bounceout { 0% { transform: scale(1); } 25% { transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(0.3); } } /* 弹出-向上*/ @-webkit-keyframes bounceoutT { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-100px); } } @-moz-keyframes bounceoutT { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(20px); } 100% { opacity: 0; -moz-transform: translateY(-100px); } } @-ms-keyframes bounceoutT { 0% { -ms-transform: translateY(0); } 20% { opacity: 1; -ms-transform: translateY(20px); } 100% { opacity: 0; -ms-transform: translateY(-100px); } } @keyframes bounceoutT { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-100px); } } /* 弹出-向右*/ @-webkit-keyframes bounceoutR { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(100px); } } @-moz-keyframes bounceoutR { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(-20px); } 100% { opacity: 0; -moz-transform: translateX(100px); } } @-ms-keyframes bounceoutR { 0% { -ms-transform: translateX(0); } 20% { opacity: 1; -ms-transform: translateX(-20px); } 100% { opacity: 0; -ms-transform: translateX(100px); } } @keyframes bounceoutR { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(100px); } } /* 弹出-向下 */ @-webkit-keyframes bounceoutB { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(100px); } } @-moz-keyframes bounceoutB { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(-20px); } 100% { opacity: 0; -moz-transform: translateY(100px); } } @-ms-keyframes bounceoutB { 0% { -ms-transform: translateY(0); } 20% { opacity: 1; -ms-transform: translateY(-20px); } 100% { opacity: 0; -ms-transform: translateY(100px); } } @keyframes bounceoutB { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(100px); } } /* 弹出-向左 */ @-webkit-keyframes bounceoutL { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-100px); } } @-moz-keyframes bounceoutL { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(20px); } 100% { opacity: 0; -moz-transform: translateX(-100px); } } @-ms-keyframes bounceoutL { 0% { -ms-transform: translateX(0); } 20% { opacity: 1; -ms-transform: translateX(20px); } 100% { opacity: 0; -ms-transform: translateX(-100px); } } @keyframes bounceoutL { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-200px); } } /* 转入 */ @-webkit-keyframes rotatein { 0% { opacity: 0; -webkit-transform: rotate(-200deg); } 100% { opacity: 1; -webkit-transform: rotate(0); } } @-moz-keyframes rotatein { 0% { opacity: 0; -moz-transform: rotate(-200deg); } 100% { opacity: 1; -moz-transform: rotate(0); } } @-ms-keyframes rotatein { 0% { opacity: 0; -ms-transform: rotate(-200deg); } 100% { opacity: 1; -ms-transform: rotate(0); } } @keyframes rotatein { 0% { opacity: 0; transform: rotate(-200deg); } 100% { opacity: 1; transform: rotate(0); } } /* 转入-从左上 */ @-webkit-keyframes rotateinLT { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateinLT { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-ms-keyframes rotateinLT { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(-90deg); opacity: 0; } 100% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; } } @keyframes rotateinLT { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } /* 转入-从左下 */ @-webkit-keyframes rotateineftB { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateineftB { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-ms-keyframes rotateineftB { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(90deg); opacity: 0; } 100% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; } } @keyframes rotateineftB { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } /* 转入-从右上 */ @-webkit-keyframes rotateinRT { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateinRT { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-ms-keyframes rotateinRT { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(90deg); opacity: 0; } 100% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1; } } @keyframes rotateinRT { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } /* 转入-从右下*/ @-webkit-keyframes rotateinRB { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateinRB { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-ms-keyframes rotateinRB { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(-90deg); opacity: 0; } 100% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1; } } @keyframes rotateinRB { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } /* 转出 */ @-webkit-keyframes rotateout { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0; } } @-moz-keyframes rotateout { 0% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(200deg); opacity: 0; } } @-ms-keyframes rotateout { 0% { -ms-transform-origin: center center; -ms-transform: rotate(0); opacity: 1; } 100% { -ms-transform-origin: center center; -ms-transform: rotate(200deg); opacity: 0; } } @keyframes rotateout { 0% { transform-origin: center center; transform: rotate(0); opacity: 1; } 100% { transform-origin: center center; transform: rotate(200deg); opacity: 0; } } /* 转出-向左上 */ @-webkit-keyframes rotateoutLT { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateoutLT { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-ms-keyframes rotateoutLT { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; } 100% { -ms-transform-origin: left bottom; -ms-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateoutLT { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } } /* 转出-向左下 */ @-webkit-keyframes rotateoutLB { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateoutLB { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-ms-keyframes rotateoutLB { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; } 100% { -ms-transform-origin: left bottom; -ms-transform: rotate(90deg); opacity: 0; } } @keyframes rotateoutLB { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } } /* 转出-向右上 */ @-webkit-keyframes rotateoutRT { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateoutRT { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-ms-keyframes rotateoutRT { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1; } 100% { -ms-transform-origin: right bottom; -ms-transform: rotate(90deg); opacity: 0; } } @keyframes rotateoutRT { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } } /* 转出-向右下 */ @-webkit-keyframes rotateoutBR { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateoutBR { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-ms-keyframes rotateoutBR { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1; } 100% { -ms-transform-origin: right bottom; -ms-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateoutBR { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } } /* 翻转 */ @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out; } 40% { -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out; } 50% { -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in; } 80% { -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-animation-timing-function: ease-in; } 100% { -moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in; } } @-ms-keyframes flip { 0% { -ms-transform: perspective(400px) rotateY(0); -ms-animation-timing-function: ease-out; } 40% { -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg); -ms-animation-timing-function: ease-out; } 50% { -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-animation-timing-function: ease-in; } 80% { -ms-transform: perspective(400px) rotateY(360deg) scale(0.95); -ms-animation-timing-function: ease-in; } 100% { -ms-transform: perspective(400px) scale(1); -ms-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } /* 翻入-X轴 */ @-webkit-keyframes flipinX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0); opacity: 1; } } @-moz-keyframes flipinX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0); opacity: 1; } } @-ms-keyframes flipinX { 0% { -ms-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -ms-transform: perspective(400px) rotateX(-10deg); } 70% { -ms-transform: perspective(400px) rotateX(10deg); } 100% { -ms-transform: perspective(400px) rotateX(0); opacity: 1; } } @keyframes flipinX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0); opacity: 1; } } /* 翻入-Y轴 */ @-webkit-keyframes flipinY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0); opacity: 1; } } @-moz-keyframes flipinY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateY(-10deg); } 70% { -moz-transform: perspective(400px) rotateY(10deg); } 100% { -moz-transform: perspective(400px) rotateY(0); opacity: 1; } } @-ms-keyframes flipinY { 0% { -ms-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -ms-transform: perspective(400px) rotateY(-10deg); } 70% { -ms-transform: perspective(400px) rotateY(10deg); } 100% { -ms-transform: perspective(400px) rotateY(0); opacity: 1; } } @keyframes flipinY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0); opacity: 1; } } /* 翻出-X轴 */ @-webkit-keyframes flipoutX { 0% { -webkit-transform: perspective(400px) rotateX(0); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipoutX { 0% { -moz-transform: perspective(400px) rotateX(0); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-ms-keyframes flipoutX { 0% { -ms-transform: perspective(400px) rotateX(0); opacity: 1; } 100% { -ms-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipoutX { 0% { transform: perspective(400px) rotateX(0); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } /* 翻出-Y轴 */ @-webkit-keyframes flipoutY { 0% { -webkit-transform: perspective(400px) rotateY(0); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-moz-keyframes flipoutY { 0% { -moz-transform: perspective(400px) rotateY(0); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-ms-keyframes flipoutY { 0% { -ms-transform: perspective(400px) rotateY(0); opacity: 1; } 100% { -ms-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipoutY { 0% { transform: perspective(400px) rotateY(0); opacity: 1; } 100% { transform: perspective(400px) rotateY(90deg); opacity: 0; } } /* 闪烁 */ @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-moz-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-ms-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } /* 震颤 */ @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px); } } @-ms-keyframes shake { 0%, 100% { -ms-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -ms-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -ms-transform: translateX(10px); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } /* 摇摆 */ @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0); } } @-moz-keyframes swing { 20% { -moz-transform: rotate(15deg); } 40% { -moz-transform: rotate(-10deg); } 60% { -moz-transform: rotate(5deg); } 80% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0); } } @-ms-keyframes swing { 20% { -ms-transform: rotate(15deg); } 40% { -ms-transform: rotate(-10deg); } 60% { -ms-transform: rotate(5deg); } 80% { -ms-transform: rotate(-5deg); } 100% { -ms-transform: rotate(0); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0); } } /* 摇晃 */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0); } 15% { -webkit-transform: translateX(-100px) rotate(-5deg); } 30% { -webkit-transform: translateX(80px) rotate(3deg); } 45% { -webkit-transform: translateX(-65px) rotate(-3deg); } 60% { -webkit-transform: translateX(40px) rotate(2deg); } 75% { -webkit-transform: translateX(-20px) rotate(-1deg); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0); } 15% { -moz-transform: translateX(-100px) rotate(-5deg); } 30% { -moz-transform: translateX(80px) rotate(3deg); } 45% { -moz-transform: translateX(-65px) rotate(-3deg); } 60% { -moz-transform: translateX(40px) rotate(2deg); } 75% { -moz-transform: translateX(-20px) rotate(-1deg); } 100% { -moz-transform: translateX(0); } } @-ms-keyframes wobble { 0% { -ms-transform: translateX(0); } 15% { -ms-transform: translateX(-100px) rotate(-5deg); } 30% { -ms-transform: translateX(80px) rotate(3deg); } 45% { -ms-transform: translateX(-65px) rotate(-3deg); } 60% { -ms-transform: translateX(40px) rotate(2deg); } 75% { -ms-transform: translateX(-20px) rotate(-1deg); } 100% { -ms-transform: translateX(0); } } @keyframes wobble { 0% { transform: translateX(0); } 15% { transform: translateX(-100px) rotate(-5deg); } 30% { transform: translateX(80px) rotate(3deg); } 45% { transform: translateX(-65px) rotate(-3deg); } 60% { transform: translateX(40px) rotate(2deg); } 75% { transform: translateX(-20px) rotate(-1deg); } 100% { transform: translateX(0); } } /* 震铃 */ @-webkit-keyframes ring { 0% { -webkit-transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); } } @-moz-keyframes ring { 0% { -moz-transform: scale(1); } 10%, 20% { -moz-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -moz-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -moz-transform: scale(1.1) rotate(-3deg); } 100% { -moz-transform: scale(1) rotate(0); } } @-ms-keyframes ring { 0% { -ms-transform: scale(1); } 10%, 20% { -ms-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -ms-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -ms-transform: scale(1.1) rotate(-3deg); } 100% { -ms-transform: scale(1) rotate(0); } } @keyframes ring { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } .head { width: 100%; z-index: 99; -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s; transition: all .5s; } .head .main { max-width: 100%; background-color: #fff; } .head:after { display: table; content: " "; clear: both; } .head .logo { max-width: 80%; height: 100px; line-height: 100px; } .head .logo > img { max-height: 100px; padding-left: 5px; } .head .logo .main { height: 100px; background-repeat: no-repeat; background-size: 100% 100%; } .head-tel { margin-top: 25px; position: relative; } .head-tel .bd { position: absolute; left: 20px; bottom: 0; color: #1756c0; font-size: 21px; } @media screen and (min-width: 1680px) { .head .logo { padding-left: 50px; } } @media screen and (max-width: 992px) { .head { width: 100%; position: relative; top: 0; left: 0; background: none; } .head .logo > img { max-width: 100%; } .head .logo .main { height: 100px; padding: 0; background: none; } } @media screen and (max-width: 320px) { .head .logo { max-width: 70%; height: 70px; line-height: 70px; } .nav-toggle { top: 5px !important; } } .nav-toggle { z-index: 999; display: none; } .menu { border-top: 1px solid #e5e5e5; border-bottom: 2px solid #d60617; } .nav-menu { margin-right: 150px; float: right; } .nav-menu > li { padding: 0 35px; text-align: center; float: left; position: relative; } .nav-menu > li + li { margin-left: 0; } .nav-menu > li > a { height: 100px; line-height: 100px; margin: 0 auto; padding: 0; display: inline-block; font-size: 16px; font-weight: bold; border-radius: 0px; text-decoration: none; } .nav-menu > li > a:hover, .nav-menu > li > a.active, .nav-menu > li > a:hover { background: transparent; color: #1756c0; } .nav-menu > li:hover .subnav { display: block; } .subnav { width: 100%; position: absolute; top: 100px; left: 0; text-align: center; color: #000; display: none; z-index: 1000; } .subnav > li { height: 50px; line-height: 50px; background: #fff; } .subnav > li > a { color: #727272; font-size: 15px; padding: 0; text-decoration: none; display: block; } .subnav > li:hover > a { color: #1756c0; background: #ddd; } @media screen and (max-width: 1366px) { .nav-menu { margin-right: 0; } } @media screen and (max-width: 1200px) { .nav-menu { margin-right: 0; } .nav-menu li { padding: 0 20px; } } @media screen and (max-width: 992px) { .nav-toggle { display: block; top: 20px; } .nav-menu { display: none; } } .ceil { width: 100%; height: 35px; line-height: 35px; font-size: 14px; color: #fff; z-index: 100; } .ceil .main { max-width: 100%; background-color: #1a2a42; } .ceil .main .lang { float: left; } .ceil .main .search { float: left; } .ceil .main > ul > li { float: left; position: relative; } .ceil .main > ul > li:hover .ceil-pop { display: block; } .ceil .main > ul > li.lang { width: 137px; background-image: url(../images/ceil-language.png); background-repeat: no-repeat; background-position: center; text-align: center; } .ceil .main > ul > li.share-split { background-image: url(../images/share-split.png); background-repeat: no-repeat; background-position: right center; } .ceil .main > ul > li.share { padding: 0 15px; } .ceil .language { width: 100%; } .ceil .language li { width: 100%; height: 43px; line-height: 43px; padding-left: 10px; padding-right: 10px; text-align: center; } .ceil .language li a { width: 100%; display: block; text-decoration: none; } .ceil .language li:hover { background-color: #1756c0; } .ceil .language li:hover a { color: #fff; } .ceil .welcome { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ceil:after { display: table; content: " "; clear: both; } .ceil-pop { width: 160px; padding-top: 10px; background-color: #fff; display: none; position: absolute; top: 35px; z-index: 100; } .ceil-pop .hd { height: 20px; background-image: url(../images/triangle.png); background-repeat: no-repeat; background-position: 70% bottom; } .ceil-pop .bd { border-radius: 3px; box-shadow: 0 0 20px #999; } .ceil-pop .bd:before { content: ' '; width: 0; height: 0; border-right: 6px solid transparent; border-left: 6px solid transparent; border-bottom: 6px solid #fff; position: absolute; top: 4px; left: 40%; } .ceil-pop .bd:after { display: table; content: " "; clear: both; } .ceil-pop.search { width: 250px; left: -150px; } .ceil-pop.search .bd { height: 43px; line-height: 43px; } .ceil-pop.search .bd .row > div { padding-left: 5px; padding-right: 5px; } .ceil-pop.search .bd input { width: 100%; height: 30px; line-height: 30px; padding: 0 5px; border-radius: 3px; } .ceil-pop.search .bd input.keywrod { color: #333; border: 1px solid #ddd; outline: none; } .ceil-pop.search .bd input[type=submit] { width: 100%; background-color: #1756c0; color: #fff; border: none; } .ceil-pop.search .bd:before { left: 70%; } .ceil-pop.share { left: -60px; } .ceil-pop.share .bd { padding: 10px; } .ceil-pop.share .bd img { max-width: 100%; } .ceil-pop.share .bd:before { left: 50%; } @media screen and (min-width: 1680px) { .ceil .main { padding: 0 135px; } } @media screen and (max-width: 992px) { .ceil .main > ul > li.share { display: none; } } #swiper-banner { width: 100%; } #swiper-banner .swiper-container, #swiper-banner .swiper-wrapper { width: 100%; height: 100%; } #swiper-banner .swiper-slide { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; text-align: center; font-size: 18px; } #swiper-banner .swiper-slide img { width: 100%; } #swiper-banner .swiper-pagination-bullet { width: 12px; height: 12px; color: #ddd ! important; } #swiper-banner .swiper-pagination-bullet-active { background: #fff ! important; } .banner { max-width: 1920px; margin: 0 auto; text-align: center; } .banner img { max-width: 100%; width: 100%; } .banner-home .item { height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; } .index .ceil { position: absolute; top: 0; } .index .ceil .main { max-width: 100%; } .index .head { position: absolute; top: 35px; } .index .head .main { max-width: 100%; } .index .nav-menu { margin-right: 100px; } .index .main { max-width: 1400px; } .index .bottom { width: 100%; position: relative; bottom: 0; z-index: 4; } .index .bottom .copyright { background-color: #1a2a42; color: #cdd1d9; } .index .bottom .copyright a { color: #cdd1d9; } .index .bottom:after { display: table; content: " "; clear: both; } .news { padding: 15px; background-color: #1756c0; color: #fff; } .news .main > div { height: 70px; } .news .main .news-hd { width: 18%; line-height: 70px; float: left; padding: 0 15px; padding-left: 90px; border-right: 1px dotted #fff; background-image: url(../images/icon-news.png); background-repeat: no-repeat; background-position: 30px center; text-align: center; font-size: 26px; } .news .main .swiper-news { width: 70%; float: left; } .news .main .news-ft { width: 12%; float: left; background-image: url(../images/split.png); background-repeat: no-repeat; background-position: center; position: relative; } .news .main .news-ft .swiper-button-prev, .news .main .news-ft .swiper-button-next { width: 18px; height: 30px; margin-top: -15px; background-size: 18px 30px; } .news .main .news-ft .swiper-button-prev { margin-left: -37px; left: 50%; } .news .main .news-ft .swiper-button-next { margin-right: -37px; right: 50%; } .swiper-news .swiper-slide { padding: 0 15px 0 80px; border-right: 1px dotted #fff; font-size: 14px; position: relative; } .swiper-news .swiper-slide .caption { width: 100%; } .swiper-news .swiper-slide .title { width: 100%; display: inline-block; margin-bottom: 5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .swiper-news .swiper-slide p { color: #a7b7e1; } .swiper-news .swiper-slide .month { width: 50px; font-size: 20px; position: absolute; top: 0; left: 15px; } .swiper-news .swiper-slide .day { width: 50px; font-size: 32px; text-align: right; position: absolute; top: 28px; left: 15px; } .home-product { width: 500px; background: rgba(0, 0, 0, 0.3); position: absolute; top: 135px; left: 0; z-index: 2; } .home-product .title { height: 55px; line-height: 55px; background-color: #595959; font-size: 20px; color: #fff; text-align: center; } .home-product .bd { height: 100%; display: flex; flex-direction: column; justify-content: space-around; } .home-product .bd .row { height: 33.333%; } .home-product .bd .row .col-xs-6 { height: 100%; padding-left: 0; padding-right: 0; background-size: contain; background-position: center center; color: #fff; display: flex; align-items: center; } .home-product .bd .row .col-xs-6 .mask { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; font-size: 18px; text-align: center; } .home-product .bd .row .col-xs-6 .mask a { width: 100%; text-align: center; } .home-product .bd .row .col-xs-6 .subtitle { padding: 0 10px; font-size: 14px; } .home-product .bd .row img { width: 100%; } .home-product .bd .row a { color: #fff; text-decoration: none; } .home-product .bd .row:nth-child(2n) .col-xs-6:first-child { float: right; } @media screen and (max-width: 680px) { .home-product { width: 340px; } } @media screen and (max-width: 992px) { .index .bottom .news { display: none; } .index .bottom .bot-menu { display: none; } .index .bottom .flink { display: none; } .home-product { display: none; } } /**/ .position { height: 43px; line-height: 43px; font-size: 14px; background: #f9f9f9; border-bottom: none; padding: 0 28px; color: #444; } .position .childs { float: right; } .position .childs > a { height: 100%; display: inline-block; margin: 0 25px; padding: 0 2px; text-decoration: none; } .position .childs > a.active { border-bottom: 2px solid #1756c0; } .article { width: 100%; max-width: 1000px; margin: 0 auto; } .article .article-title { text-align: center; } .article .article-title > h1 { font-size: 22px; } .article .article-body { width: 100%; font-size: 15px; padding: 10px; line-height: 25px; border-radius: 8px; padding-top: 30px; } .article .article-body iframe { max-width: 100%; } .article .article-body > p { margin-bottom: 15px; } .article img { max-width: 100%; } @media screen and (max-width: 992px) { .position { display: none; } } .article-tab { padding-top: 20px; } .article-tab a { padding: 10px 20px; margin: 10px; background: #f2f2f2; border: none; border-radius: 0; float: left; } .article-tab a.active, .article-tab a:hover { color: #fff; background: #1756c0; box-shadow: none; -webkit-box-shadow: none; } @media (max-width: 992px) { .article-tab a { padding: 6px 12px; margin: 6px; } } .product { padding: 50px 15px; } .product-photo { padding: 1px; } .product-photo .swiper-slide { padding: 5px; text-align: center; } .product-photo .swiper-slide img { max-width: 100%; max-height: 100%; } .product-photo .swiper-button-prev { left: 0; } .product-photo .swiper-button-next { right: 0; } .product-title { margin: 10px 0; font-size: 18px; } .product-desc { font-size: 16px; color: #666; } .product-body { margin-top: 50px; padding: 50px; border-top: 2px solid #eee; } .product-body img { max-width: 100%; } .article-list > div { padding-left: 8px; padding-right: 8px; } .article-list .item { min-height: 210px; margin-bottom: 18px; padding: 20px 20px 45px; border: 1px solid #bfbfbf; box-shadow: 5px 5px 10px #ddd; color: #1756c0; font-size: 14px; position: relative; -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s; transition: all .5s; } .article-list .item .title { line-height: 25px; margin-top: 10px; margin-bottom: 10px; } .article-list .item .title > a { font-size: 16px; color: #1756c0; } .article-list .item .visit { position: absolute; bottom: 25px; right: 20px; } .article-list .item:hover { border: 2px solid #1756c0; background-color: #1756c0; color: #fff; } .article-list .item:hover .title > a { color: #fff; } @media screen and (max-width: 992px) { .article-list .item { min-height: 100px; } } .timer { padding: 30px 0; } .timer > div { height: 200px; } .timer > div:nth-child(1) { background-image: url(../images/timer-1.png); background-repeat: no-repeat; background-position: center; } .timer > div:nth-child(2) { background-image: url(../images/timer-2.png); background-repeat: no-repeat; background-position: center; } .timer > div:nth-child(3) { background-image: url(../images/timer-3.png); background-repeat: no-repeat; background-position: center; } .timer .timer { font-size: 80px; color: #1756c0; } .project { background-image: url(../images/article-project.png); background-repeat: repeat-x; background-position: center top; } /* _wrapper.css */ .wrapper { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin-left: auto; margin-right: auto; } /* _timeline.css */ .timeline { position: relative; margin: 30px auto; padding: 60px 0; font-size: 16px; } .timeline::before { content: ""; position: absolute; top: 0; left: 0%; width: 80px; height: 100%; border-left: 1px solid #ddd; border-right: 1px solid #ddd; background-image: url(../images/timeline-bg.png); background-repeat: repeat-y; background-position: center; } @media (min-width: 800px) { .timeline::before { left: 50%; margin-left: -41px; } } .timeline__item { margin-bottom: 20px; position: relative; } .timeline__item::after { content: ""; clear: both; display: table; } .timeline__item:nth-child(2n) .timeline__item__content { float: right; text-align: left; } .timeline__item:nth-child(2n) .timeline__item__content::before { content: ''; right: 40%; } .timeline__item:last-child { margin-bottom: 0; } .timeline__item-bg { -webkit-transition: all 1s ease-out; transition: all 1s ease-out; color: #fff; } .timeline__item-bg:nth-child(2n) .timeline__item__content { text-align: left; } .timeline__item-bg .timeline__item__station { background-image: url(../images/timeline-icon.png); background-repeat: no-repeat; background-position: center; } .timeline__item-bg .timeline__item__content__date { color: #ca342b; font-weight: bold; } .timeline__item-bg .timeline__item__content__description { color: #ca342b; font-weight: bold; } .timeline__item__station { width: 24px; height: 24px; position: absolute; border-radius: 50%; padding: 10px; top: 30px; left: 10%; margin-left: -11px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (min-width: 800px) { .timeline__item__station { left: 50%; margin-left: -14px; width: 24px; height: 24px; border-width: 6px; } } .timeline__item__content { width: 80%; background: #fff; padding: 20px 30px; border-radius: 6px; float: right; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (min-width: 800px) { .timeline__item__content { width: 40%; float: inherit; padding: 30px 40px; text-align: right; } } @media (min-width: 800px) { .timeline__item__content::before { left: 40%; top: 30px; height: 4px; margin-top: -2px; } } .timeline__item__content__date { margin: 0 0 5px 0; display: inline-block; font-weight: normal; } .timeline__item__content__description { margin: 0; padding: 0; } .image-list > div { padding-left: 8px; padding-right: 8px; } .image-list .item { margin-bottom: 18px; border: 1px solid #bfbfbf; border-radius: 8px; } .image-list .item .media-object { border-radius: 8px 8px 0 0; } .image-list .item .caption { min-height: 80px; padding: 5px 10px; font-size: 14px; } .image-list .item .caption > div { margin-bottom: 5px; } .video-list > div { padding-left: 10px; padding-right: 10px; } .video-list .item { margin-bottom: 18px; } .video-list .item .media-object { position: relative; } .video-list .item .media-object .play { margin-top: -25px; margin-left: -25px; position: absolute; top: 50%; left: 50%; } .video-list .item .caption { min-height: 120px; padding: 10px 0; font-size: 14px; } .video-list .item .caption h4 { margin-top: 10px; margin-bottom: 10px; font-size: 16px; font-weight: bold; } .video-list .item .caption > div { margin-bottom: 5px; } .video-list .item .caption a.more { height: 30px; line-height: 30px; padding-right: 20px; display: inline-block; background-image: url(../images/icon-arrow.png); background-repeat: no-repeat; background-position: right center; } .block { width: 100%; padding-top: 1px; } .block .hd { margin-top: 60px; text-align: center; } .block .hd h3 { margin-bottom: 30px; font-size: 26px; color: #1756c0; } .block .bd { margin-top: 50px; margin-bottom: 50px; } .block .bd img { max-width: 100%; } .block .bd:after { display: table; content: " "; clear: both; } .core-block1 .item { margin-bottom: 20px; padding: 0 20px; background-image: url(../images/plus.png); background-repeat: no-repeat; background-position: right center; } .core-block1 .item .bd { text-align: center; } .core-block1 .item .bd img { max-width: 100%; } .core-block1 .item:last-child { background-image: none; } @media screen and (max-width: 992px) { .core-block1 .item { background-image: none; } } .core-block3 .bd { padding: 125px 0 280px 0; text-align: center; position: relative; } .core-block3 .item { position: absolute; text-align: left; } .core-block3 .item .caption { line-height: 25px; font-size: 14px; color: #8a8a8a; } .core-block3 .item .caption h4 { margin-bottom: 10px; font-size: 18px; color: #333; } .core-block3 .item1 { top: 0; left: 350px; } .core-block3 .item2 { top: 125px; left: 650px; } .core-block3 .item3 { top: 350px; left: 650px; } .core-block3 .item4 { top: 500px; left: 350px; } .core-block3 .item5 { top: 370px; } .core-block3 .item6 { top: 125px; left: 0; } @media screen and (max-width: 992px) { .core-block3 .bd { padding: 0; text-align: center; } .core-block3 .bd img { margin-bottom: 25px; } .core-block3 .item { margin-bottom: 15px; float: left; position: relative; left: 0; top: 0; } } .job-list > div { padding-left: 10px; padding-right: 10px; } .job-list .item { margin-bottom: 20px; border: 1px solid #bfbfbf; } .job-list .item .title { line-height: 26px; padding: 12px; background-color: #1756c0; color: #fff; font-size: 18px; font-weight: bold; letter-spacing: 1px; } .job-list .item .title > span { font-size: 14px; } .job-list .item .caption { min-height: 120px; padding: 15px; font-size: 14px; } .job-list .item .caption > div { margin-bottom: 5px; } .job-list .item .caption a.more { height: 32px; line-height: 32px; padding: 0 25px 0 40px; display: inline-block; background-color: #1756c0; background-image: url(../images/icon-plane.png); background-repeat: no-repeat; background-position: 10px center; border-radius: 15px; color: #fff; text-decoration: none; } #tpl { display: none; } .job-form { padding: 20px; font-size: 16px; } .job-form .col-xs-12 { margin-bottom: 10px; } .job-form .control-label { font-weight: bold; } .job-form input { width: 100%; height: 50px; padding: 0 10px; border: 1px solid #ddd; border-radius: 3px; outline: none; } .job-form .submit { width: 100%; height: 50px; border: none; border-radius: 3px; background-color: #ffcc00; font-size: 18px; font-weight: bold; } .download-list > div { padding-left: 10px; padding-right: 10px; } .download-list .item { margin-bottom: 10px; border-left: 10px solid #1756c0; border-radius: 5px; } .download-list .item .title { line-height: 26px; padding: 12px; background-color: #f8f8ff; background-image: url(../images/plus-main.png); background-repeat: no-repeat; background-position: 98% center; font-size: 14px; } .download-list .item .title a { width: 100%; display: block; } .download-search { max-width: 675px; margin-bottom: 50px; margin-left: auto; margin-right: auto; } .download-search input { width: 100%; height: 50px; border-radius: 5px; font-size: 14px; } .download-search input.keywrod { padding-left: 50px; background-image: url(../images/icon-search.png); background-repeat: no-repeat; background-position: 12px center; border: 1px solid #ddd; outline: none; } .download-search input[type=submit] { width: 100%; padding: 0 20px; background-color: #1756c0; color: #fff; border: none; font-size: 18px; left: 3px; } .product-list { padding: 50px 0; text-decoration: none; } .product-list .item { margin-bottom: 100px; position: relative; } .product-list .item > div { padding-left: 0px; padding-right: 0px; } .product-list .item .item-image { text-align: center; } .product-list .item .caption { line-height: 28px; padding: 30px 45px; background: rgba(209, 221, 242, 0.5); font-size: 14px; } .product-list .item .caption h3 { margin-bottom: 15px; font-size: 20px; } @media screen and (min-width: 992px) { .product-list .item .item-image { width: 55%; } .product-list .item .caption { width: 48%; position: absolute; top: 50px; right: 0; } .product-list .item:nth-child(2n) .item-image { float: right; } .product-list .item:nth-child(2n) .caption { float: left; left: 0; } } .contact-block .hd h3 { font-size: 48px; } .contact-block .item { height: 380px; line-height: 25px; margin-bottom: 20px; padding: 20px; background-color: #1756c0; background-image: url(../images/icon-address.png); background-repeat: no-repeat; background-position: center 85px; color: #fff; font-size: 14px; } .contact-block .item .caption .title { margin-top: 140px; margin-bottom: 30px; font-size: 20px; font-weight: bold; text-align: center; } .contact-block .item2 { background-image: url(../images/icon-tel.png); } .contact-block .item3 { background-image: url(../images/icon-email.png); } .col-code { padding-top: 50px; margin-bottom: 50px; } .col-code .title { background-image: url(../images/line.png); background-repeat: repeat-x; background-position: center; font-size: 16px; text-align: center; color: #1756c0; } .col-code .title span { padding: 0 20px; background-color: #fff; } .col-code .bd { font-size: 14px; } .col-code .bd .col-xs-12 { padding: 80px; } .col-code .bd .item { min-height: 100px; padding-left: 80px; background-image: url(../images/icon-wx.png); background-repeat: no-repeat; background-position: left center; } .col-code .bd .item.item-facebook { background-image: url(../images/icon-facebook.png); background-repeat: no-repeat; background-position: left center; } @media screen and (max-width: 992px) { .col-code .bd .col-xs-12 { padding: 20px; } } .contact { padding-top: 50px; background-color: #f6f6f6; } .contact .title { padding: 20px 0; font-size: 24px; font-weight: bold; text-align: center; } .contact-form { max-width: 500px; margin: 0 auto; font-size: 16px; padding: 30px 10px 100px 10px; } .contact-form .row { margin-bottom: 25px; } .contact-form .control-label { height: 40px; line-height: 40px; padding-right: 0; text-align: left; font-weight: normal; } .contact-form input, .contact-form select { height: 40px; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 5px; border-radius: 2px; border: 1px solid #bfbfbf; } .contact-form .btn-default { padding: 10px 55px; border-radius: 0; border: none; background-color: #1756c0; border-radius: 6px; font-size: 18px; color: #fff; } .sidebar { width: 100%; float: left; margin-top: 30px; margin-bottom: 100px; box-shadow: 1px 6px 8px #bbb; } .sidebar .heading { font-size: 16px; font-weight: bold; margin: 0; padding: 55px 20px; background: #1756c0; color: #fff; } .sidebar .heading p { font-size: 14px; } .sidebar .list-group { margin-top: 1px; margin-bottom: 0; } .sidebar .list-group .list-group-item { width: 100%; display: block; border-radius: 0; border: none; border-bottom: 1px solid #eee; font-size: 15px; padding: 15px 30px; margin-bottom: 0; color: #333; text-decoration: none; } .sidebar .list-group .list-group-item > i { width: 10px; height: 10px; display: inline-block; } .sidebar .list-group .list-group-item.active, .sidebar .list-group .list-group-item:hover { color: #fff; background: #1756c0; } .sidebar .list-group .list-group-item.active > i, .sidebar .list-group .list-group-item:hover > i { background: url(../images/sidebar-item-on.png); } .sidebar .list-group .list-group-subitem { padding: 6px 15px; border: none; } .sidebar .list-group .list-group-subitem > i { font-size: 12px; padding-left: 15px; } .sidebar .list-group .list-group-subitem:last-child { border-bottom: 1px solid #ddd; } .sidebar-info { width: 240px; float: left; margin-top: 15px; border: 1px solid #ddd; } .sidebar-info-head { height: 56px; font-size: 18px; margin: 0; background: url(../images/in_bg.jpg) left bottom no-repeat; } .sidebar-info-head > h2 { height: 100%; margin: 0; padding-top: 10px; padding-left: 32px; background-image: url(../images/contact.jpg); background-repeat: no-repeat; background-position: 5px center; font-size: 16px; color: #000; } .sidebar-info-content { line-height: 25px; padding: 15px; } .sidebar-info-content p { margin-bottom: 0; } @media (min-width: 1200px) { .sidebar { width: 240px; } } .sidebar-info-home { width: 270px; margin-bottom: 20px; } .sidebar-products li { width: 100%; margin-bottom: 10px; } .sidebar-products li img { width: 100%; border: 1px solid #ddd; } .sidebar-products li > a { width: 100%; line-height: 30px; display: inline-block; text-align: center; } .sidebar-news li { width: 100%; float: left; } .sidebar-news li > a { width: 100%; line-height: 22px; display: inline-block; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sidebar-news li > a:before { content: " "; display: inline-block; vertical-align: middle; margin-right: 8px; width: 6px; height: 6px; background-color: #1756c0; border-radius: 50%; } /** 分页 **/ .layui-laypage { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin: 10px 0; font-size: 0; } .layui-laypage > a:first-child, .layui-laypage > a:first-child em { border-radius: 2px 0 0 2px; } .layui-laypage > a:last-child, .layui-laypage > a:last-child em { border-radius: 0 2px 2px 0; } .layui-laypage > *:first-child { margin-left: 0!important; } .layui-laypage > *:last-child { margin-right: 0!important; } .layui-laypage a, .layui-laypage span, .layui-laypage input, .layui-laypage button, .layui-laypage select { border: 1px solid #e2e2e2; } .layui-laypage a, .layui-laypage span { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; padding: 0 15px; height: 30px; line-height: 28px; margin: 0 -1px 5px 0; background-color: #fff; color: #333; font-size: 12px; } .layui-laypage a:hover { color: #286090; } .layui-laypage em { font-style: normal; } .layui-laypage .layui-laypage-spr { color: #999; font-weight: 700; } .layui-laypage a { text-decoration: none; } .layui-laypage .layui-laypage-curr { position: relative; } .layui-laypage .layui-laypage-curr em { position: relative; color: #fff; } .layui-laypage .layui-laypage-curr .layui-laypage-em { position: absolute; left: 0px; top: 0px; padding: 1px; width: 100%; height: 100%; background-color: #1756c0; } .layui-laypage-em { border-radius: 1px; } .layui-laypage-prev em, .layui-laypage-next em { font-family: Sim sun; font-size: 16px; } .layui-laypage .layui-laypage-count, .layui-laypage .layui-laypage-limits, .layui-laypage .layui-laypage-skip { margin-left: 10px; margin-right: 10px; padding: 0; border: none; } .layui-laypage .layui-laypage-limits { vertical-align: middle; } .layui-laypage select { height: 30px; padding: 3px; border-radius: 2px; cursor: pointer; } .layui-laypage .layui-laypage-skip { height: 30px; line-height: 30px; color: #999; } .layui-laypage input, .layui-laypage button { height: 30px; line-height: 30px; border-radius: 1px; vertical-align: top; background-color: #fff; box-sizing: border-box; } .layui-laypage input { display: inline-block; width: 40px; margin: 0 10px; padding: 0 3px; text-align: center; } .layui-laypage input:focus, .layui-laypage select:focus { border-color: #286090!important; } .layui-laypage button { margin-left: 10px; padding: 0 10px; cursor: pointer; } .sb-pagination { width: 100%; padding: 30px 0; float: left; } .layui-laypage-prev, .layui-laypage-next, .layui-laypage-count { display: none !important; } .layui-laypage a, .layui-laypage span.layui-laypage-curr, .layui-laypage span.layui-laypage-curr em { width: 40px; height: 40px; line-height: 40px; margin-right: 10px; border-radius: 100%; } /*foot*/ .copyright { width: 100%; padding: 10px 10px; font-size: 14px; background-color: #1756c0; color: #fff; } .copyright a { padding: 0 5px; color: #fff; } .flink { width: 100%; line-height: 25px; padding: 15px; float: left; font-size: 14px; color: #183867; } .flink a { padding: 10px; float: left; color: #183867; } @media screen and (max-width: 992px) { .copyright .bot-menu { display: none; } } /*webuploader*/ .uploader-image .file-item { width: 100%; float: left; position: relative; } .uploader-image .file-item img { display: none; } .uploader-image .file-item .error { position: absolute; top: 4px; left: 4px; right: 4px; background: red; color: white; text-align: center; height: 20px; font-size: 14px; line-height: 23px; } .uploader-image .file-item .info { /*position: absolute; left: 4px; bottom: 4px; right: 4px;*/ height: 20px; line-height: 20px; text-indent: 5px; background: rgba(0, 0, 0, 0.6); color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; z-index: 10; } .uploader-image .upload-state-done:after { content: "\f00c"; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 32px; position: absolute; bottom: 0; right: 4px; color: #4cae4c; z-index: 99; display: none; } .uploader-image .file-item .progress { position: absolute; right: 4px; bottom: 4px; height: 3px; left: 4px; height: 4px; overflow: hidden; z-index: 15; margin: 0; padding: 0; border-radius: 0; background: transparent; } .uploader-image .file-item .progress span { display: block; overflow: hidden; width: 0; height: 100%; background: #d14 url(../images/progress.png) repeat-x; -webit-transition: width 200ms linear; -moz-transition: width 200ms linear; -o-transition: width 200ms linear; -ms-transition: width 200ms linear; transition: width 200ms linear; -webkit-animation: progressmove 2s linear infinite; -moz-animation: progressmove 2s linear infinite; -o-animation: progressmove 2s linear infinite; -ms-animation: progressmove 2s linear infinite; animation: progressmove 2s linear infinite; -webkit-transform: translateZ(0); } .uploader-image { width: 100%; position: relative; } .uploader-image .uploader-list { width: 100%; overflow: hidden; } .uploader-image .uploader-list li { width: 110px; height: 110px; background: url(../images/bg.png) no-repeat; text-align: center; margin: 0 8px 20px 0; position: relative; display: inline; float: left; overflow: hidden; font-size: 12px; } .uploader-image .uploader-list div.file-panel { position: absolute; height: 20px; top: 0; right: 0; overflow: hidden; z-index: 300; } .uploader-image .uploader-list div.file-panel span { background: rgba(0, 0, 0, 0.5); border-radius: 2px; color: #fff; width: 18px; height: 18px; line-height: 14px; text-align: center; font-size: 20px; display: block; cursor: pointer; } .uploader-image .uploader-list div.file-panel span.cancel { background-position: -48px -24px; } .uploader-image .uploader-list div.file-panel span.cancel:hover { background-position: -48px 0; } .uploader-image .uploader-list div.file-panel.cover { width: 35px; left: 0; } .uploader-image .uploader-list div.file-panel.cover span { width: 35px; font-size: 12px; } .uploader-image .uploader-list .set-cover { text-align: center; cursor: pointer; }