body{color: #333; font-family:"微软雅黑";} a{color:#333} a:hover{color:#0061ad} a:visited{color:#333} a:active,a:focus,a:hover{color:#0061ad} .header{ height: 88px; top: 0; left: 0; width: 100%; z-index:99; background-color: #00458f; position: relative;} /* LOGO */ .logo{ vertical-align: middle; z-index: 2; position: relative; height: 88px; text-align: left; margin: 0; } .logo a{ height: 100%; line-height: 0; text-align: left; align-items:start;} .logo img{vertical-align: middle;max-height:100%;} .logo .active{ display: none;} .fix-head{ transition: all 0.5s;} .fix-head,.fix-head .logo{ height: 88px;} .htool{ height: 88px; position: absolute; right: 0; top: 0;} .wapNavBtn{display:none;line-height: 60px; height:60px; width:60px;font-size: 2rem; z-index:1000000; float: right; width: 60px;} .wapNavBtn:before{color: #d11734;font-weight: bold;} .wapNavBtn.on:before{} .wapNavBtn span{ display:block; right:0; width:65%; height:3px; top:calc((100% - 50px) / 2);transition: all 0.4s; position: relative; margin:0 auto; border-radius: 3px; background: #fff;} .wapNavBtn span:nth-child(1){animation: outfirst 0.5s; transform: translateY(15px) rotate(0); } .wapNavBtn span:nth-child(2){animation: outlast 0.5s; transform: translateY(21px) rotate(0); } .wapNavBtn span:nth-child(3){animation: outlast 0.5s; transform: translateY(27px) rotate(0); } .wapNavBtn.on span{ background:#fff; z-index: 100000; } .wapNavBtn.on span:nth-child(1){transform: translateY(25px) rotate(45deg); } .wapNavBtn.on span:nth-child(2){transform: translateX(0) rotate(0); display:none;} .wapNavBtn.on span:nth-child(3){transform: translateY(23px) rotate(-45deg);} .fix-head .wapNavBtn span{ background: #0061ad;} .search{ height: 69px; box-sizing: border-box; position: absolute; top: 97px; z-index: 10000; width: 360px; right: 0; display: none;} .search form{ } .search .text{ border:0; background-color: #f4f7fa; width: 280px; font-size: 16px; color: #333; height: 44px; line-height: 44px; padding:0 20px; box-sizing: border-box; border-radius: 44px 0 0 44px;} .search input::-webkit-input-placeholder { color: #999;} .search .btn1{ background:#0061ad; color:#fff; text-align:center; border:none; height:44px; font-size: 16px; width:80px; font-size: 14px; padding:0; position: relative; border-radius: 0 44px 44px 0;} .fix-head .search{ top: 80px;} /* 导航-1 */ .navBox{position: relative; box-sizing: border-box; margin-left: 22%;} .navBox ul.navCont{} .navBox ul.navCont li.child{float:left; width: 25%; text-align:center; position: relative;} .navBox ul.navCont li.child a{display: block;color:#def3ff; font-size: 18px; text-transform:uppercase; line-height: 88px; position: relative; transition: all 0.1s; height: 88px; } .navBox ul.navCont li.child a span::after{ content: ""; width: 100%; height: 3px; background:#fff; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; opacity: 0; bottom: 22px; border-radius: 3px; margin: 0 auto;} .navBox ul.navCont li.child a span{ position: relative; z-index: 2; display: inline-block;} .navBox ul.navCont li.child a i{ display: inline-block; vertical-align: top; margin-right: 5px;} .navBox ul.navCont li.child a:hover,.navBox ul.navCont li.child.cur a{ color: #fff;} .navBox ul.navCont li.child.cur a span::after,.navBox ul.navCont li.child a:hover span::after{ opacity: 1;} .navBox ul.navCont li.child.last a{ color: #fff;} /*二级*/ .navBox ul.navCont li.child .childcont{position:absolute;top:58px; left: 0; right: 0; z-index:999;display:none;width:100%; text-align: center; margin: 0 auto; background-color: rgba(0,0,0,0.5); padding: 3rem 0 2rem; border: 1px solid #8494a2;} .navBox ul.navCont li.child .childcont li{ width: 100%; display: block;} .navBox ul.navCont li.child .childcont a{ height: 39px; line-height: 39px; font-size: 16px; color: #fff!important;} .navBox ul.navCont li.child .childcont a:hover{ background-color: rgba(255,255,255,0.2);} .navBox ul.navCont li.child .childcont a:hover::after,.navBox ul.navCont li.cur .childcont a::after,.navBox ul.navCont li:hover .childcont a::after{ display: none!important;} .navBox ul.navCont li.child .pro-cate{ position: absolute; background:none; width: 100%; top: 102px; left: 0; box-sizing: border-box; padding: 0;} .pro-cate .nav_w{ background-color: #f8f8f8; width: 545px; margin: 0 auto; box-sizing: border-box;} .pro-cate .nav_w .span-6:nth-child(1){ background-color: #d80c18;} .pro-cate .psub{ line-height: 36px; text-align: left; padding: 30px 10px 20px 30px;} .pro-cate .psub .fl{ width: 50%; text-align: left;} .pro-cate .nav_img{ padding: 30px; text-align: center;} .navBox ul.navCont li.child .pro-cate .psub a{ display: inline-block; color: #fff; font-size: 14px; opacity: 0.7; line-height: 36px; text-align: left; height: auto;} .navBox ul.navCont li.child .pro-cate .psub a:hover{color:#fff; opacity: 1;} .navBox ul.navCont li.child .pro-cate .psub a::after{ display: none;} .navBox ul.navCont li.child .pro-cate .psub a::before{ content: "—"; display: none; color: #fff; margin-right: 5px; position: relative; width: auto; height: auto;} .navBox ul.navCont li.child .pro-cate .psub a:hover::before{ display: inline-block;} .fix-head .navBox ul.navCont li.child .childcont,.fix-head .navBox ul.navCont li.child .pro-cate{ top: 41px;} /*底部*/ .footer{ background: #4c4e5e; color: #fff; padding: 3rem 0; line-height: 24px; position: relative; font-size: 14px;} .footer a{ color: #fff; display: inline-block; margin: 0 5px;} .footer a:hover{ color: #004ea2;} .footer span{ display: inline-block; margin: 0 5px;} .fixedTop{ position: fixed; width: 70px; height: 70px; box-sizing: border-box; padding: 10px; border-radius: 60px; right: 20px; bottom: 10%; z-index: 10; cursor: pointer;} .fixedTop i{ background-color: #fff; display: block; border-radius: 50px; line-height: 50px; color: #333; font-size: 2.6rem; text-align: center;} /*标题样式*/ .box-title{ line-height: 56px; clear: both;overflow: hidden; position: relative; text-align: center;} .box-title span{color: #333333; font-size: 4rem; display:inline-block; font-weight: bold; position: relative;} .box-title span::before,.box-title span::after{ content: ""; position: absolute; width: 80%; height: 1px; background-color: #cacaca; top: 0; bottom: 0; margin: auto 0;} .box-title span::before{ left: -100%;} .box-title span::after{ right: -100%;} .title-1{ line-height: 42px; text-align: center;} .title-1 span{ font-size: 3rem; display: inline-block;} .title-1 span::after{ content: ""; display: block; margin: 1rem auto 0; width: 137px; height: 2px; background-color: #004EA2;} /*媒体盒子模型*/ .media-box{display:block;margin-bottom:10px;width: 100%;} .media-box a{ display: block;} .media-box .icon{ background: #efefef; width: 100%; overflow: hidden; text-align: center;} .media-box .icon{transition-duration: .5s;-ms-transition-duration: .5s;-moz-transition-duration: .5s;-webkit-transition-duration: .5s;} .media-box .icon img{ max-height: 100%;} .media-box .icon img{transition-duration: 1s;-ms-transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;} .media-box h3{ text-align: center; font-size: 1.8rem; color: #373737; padding: 1rem 0;} .media-box a:hover .icon img{transform:scale(1.2);} /*翻页*/ .pager{text-align: center; color: #333;font-size: 16px;min-height: 500px;border: 1px solid #e5e5e5;margin-bottom: 80px;} .pager ._f_page_num,.pager ._f_page_num_d,.pager ._f_jump_d{ display: inline-block;} .pager a,.pager ._f_page_num{ padding: 0 15px; height: 40px; line-height:40px; display: inline-block;margin:0 2px; color: #333; text-align: center; color: #333; position: relative; } .pager a.on,.pager a:hover,.pager ._page_active,.pager ._f_page_num:hover{ color:#fff!important; background-color: #004ea2;} .pager ._f_jump_input{ width: 40px; height: 40px; border: 1px solid #eee; text-align: center;} .pager ._f_btn{ cursor: pointer;} .pager ._f_jump_txt{ margin-right: 10px;} /*文章列表*/ .nlist li{ border-bottom: 1px solid #ddd; padding: 1.5rem 0; clear: both; overflow: hidden; line-height: 3rem;} .nlist li a{ display: block; float: left; width: 80%; font-size: 1.6rem; background: url(../img/sdot.png) no-repeat 0 center; padding-left: 2rem;} .nlist li span{ float: right; color: #a3a3a3; font-weight: normal; font-size: 14px;} .nlist li p{ color: #666; clear: both; padding-top: 0.5rem;} .nlist-2 li{ background: #f5f5f5; padding: 0 3rem 0 5rem; line-height: 5.4rem; margin-bottom: 1.2rem; position: relative; clear:both; overflow: hidden;} .nlist-2 li:before{ content: "A"; color: #fff; width: 3.4rem; height: 3.4rem; text-align: center; line-height: 3.4rem; text-align: center; display: block; position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0;background-image:linear-gradient(-300deg,#045098,#1469ba) ; border-radius: 1rem 0 1rem 0;} .nlist-2 li a{ display: block; width: 80%; font-weight: bold; font-size:16px; float: left;} .nlist-2 li .navContent{ display: none; clear: both; overflow: hidden;} .nlist-2 li .show{ display: block;} .nlist-2 li i{ float: right; display: block; cursor: pointer; font-size: 3rem; color: #959595;} .nlist-2 li i:after{ content: "\e628";font-family: "iconfont" !important;} .nlist-2 li i.open::after{ content: "\e702";} .nlist-2 li p{ line-height: 26px; margin-bottom: 2rem; color: #999;} .ul-news{ background: url(../img/line1.jpg) repeat-x 0 bottom; padding-bottom: 20px;} .ul-news li{ line-height: 40px; clear: both; overflow: hidden;} .ul-news li a{ font-size: 16px; display: block; width: 70%;float: left;} .ul-news li a i{ color: #888; font-size: 24px; display: inline-block; vertical-align: middle;} .ul-news li a i::before{ margin-left: -7px;} .ul-news li span{ float: right; color: #aaa; font-size: 14px;} .ul-news li:hover a i,.ul-news li:hover span{ color: #0061ad;} a.more{display: inline-block; color: #fff; font-size: 3.6rem; width: 40%; line-height: 80px; background-color: #004EA2; text-align: center; border-radius: 8px;} a.more:hover{ background-color: #0061ad; color: #fff;} /*选项卡*/ .tablist { margin-bottom: 0.4rem;} .tablist .tlist{ height: 0; position: relative; clear: both; overflow: hidden;} .tablist .active{ height: auto;} .tabs{line-height:26px;} .tabs a{color: #333; } .tabs a:hover,.tabs .active a{ } .tabs a:hover span,.tabs .active a span{} .layui-input-block{ margin-left: 130px;min-height:48px;} ._f_hr_from_cont ._f_hr_right_d { -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: top; padding: 0 0.15rem; width: calc(100% - 2rem); height: 0.4rem; background-color: #ffffff; border: solid 0.01rem #b6b6b6; } ._f_hr_from_cont ._f_file_lb, ._f_hr_from_cont ._f_date_lb { position: relative; font-size: 16px; color: #333333; display: inline-block; width: 100%; line-height: 38px; vertical-align: top; } /*__________________________________________responsive.css__________________________________________________________________*/ /* 中等屏幕（桌面显示器，小于1600） */ @import url(../../web/css/Pc.css) screen and (max-width:1680px); @import url(../../web/css/Mpc.css) screen and (max-width:1366px); @import url(../../web/css/Pad.css) screen and (max-width: 1200px); @import url(../../web/css/Mobile.css) screen and (max-width: 760px); html{font-size: 10px} body{font:14px/1.8 Arial,'Microsoft Yahei'} body{width: 100%;height: 100%;overflow-x: hidden;overflow-y: scroll} body:after { display: block; height: 0; line-height: 0; overflow: hidden; visibility: hidden; content: 'Pc'; } .wrap{width:1200px;margin-left:auto;margin-right:auto;} .wrap2{width:1400px;margin-left:auto;margin-right:auto;} .wrap3{margin-left:2.2%;margin-right:2.2%;} .wrap4{width:1652px;margin-left:auto;margin-right:auto;} /* * PcMode-min */ @media only screen and (min-width: 1440px) and (max-width: 1680px) { .wrap{width:1200px;} .wrap2{width:1300px;} .wrap4{width:1400px;} } @media only screen and (min-width: 1366px) and (max-width: 1440px) { .wrap{width:1200px;} .wrap2{width:1200px;} .wrap4{width:1300px;} } @media only screen and (min-width: 1200px) and (max-width: 1366px) { html{font-size: 9px} .wrap{width:1002px;} .wrap2{width:1002px;} .wrap4{width:1200px;} } @media screen and (max-width:1030px) { .navCont{display: none;} .navCont_mobil{width:64px;height: 64px; background-color: #fff;display: inline-block;right:10px;top:10px;position: absolute;} } @media screen and (min-width:1031px) { } /* * PadMode */ @media only screen and (min-width: 640px) and (max-width: 1200px) { body{font:14px/1.8 Arial,'Microsoft Yahei'} body:after { content: 'Pad'; } .wrap{padding-left:2%;padding-right:2%;width: auto;} .wrap2{width:auto; padding-left:2%;padding-right:2%;} .wrap3{margin-left:2%;margin-right:2%;} .wrap4{margin-left:2%;margin-right:2%;width:auto;} } @media only screen and (max-width: 1366px) { html{font-size: 8.5px} } @media only screen and (max-width: 1024px) { html{font-size: 7px} } /* * MobileMode */ @media only screen and (max-width: 640px) { html{font-size:7px;} body:after { content: 'Mobile'; } body,input,textarea,button,select {font:15px/1.8 Arial,'Microsoft Yahei'} .wrap{padding-left:4%;padding-right:4%;width:auto;} .wrap2{padding-left:4%;padding-right:4%;width:auto;} .wrap3{margin-left:4%;margin-right:4%;} .wrap4{padding-left:4%;padding-right:4%;width:auto;} .UnmobilePush{display: none;} .MobilePush{display:block;} } /* ---------------------------------------------------------- */ /* */ /* A media query that captures: */ /* */ /* - Retina iOS devices */ /* - Retina Macs running Safari */ /* - High DPI Windows PCs running IE 8 and above */ /* - Low DPI Windows PCs running IE, zoomed in */ /* - Low DPI Windows PCs and Macs running Firefox, zoomed in */ /* - Android hdpi devices and above */ /* - Android tvdpi devices, including Google Nexus 7 */ /* - Chrome running on high DPI Macs and PCs */ /* - Opera running on high DPI Macs, PCs and mobile devices */ /* */ /* Please note that that this code assumes you'll swap a */ /* 2× version of your images. If you'd like to supply */ /* finer increments, other thresholds might be appropriate. */ /* */ /* A test for CSS pixel densites can be found here: */ /* http://bjango.com/articles/min-device-pixel-ratio/ */ /* */ /* @marcedwards from @bjango */ /* */ /* ---------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.3),only screen and (-o-min-device-pixel-ratio: 13/10),only screen and (min-resolution: 120dpi) { /* Your code to swap higher DPI images */ } /* ---------------------------------------------------------- */ /* */ /* A media query for iphone device */ /* */ /* */ /* Please note that that this code assumes you'll swap a */ /* 2× version of your images. If you'd like to supply */ /* finer increments, other thresholds might be appropriate. */ /* */ /* hotone1985@sina.com from @tony */ /* */ /* ---------------------------------------------------------- */ @media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){ /*iphone6*/ } @media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){ /*iphone6+*/ } /* ---------------------------------------------------------- */ /* */ /* 专门针对ANDROID设备 */ /* */ /* 可解决安卓不同分辨率引起的页面重构问题 */ /* */ /* ---------------------------------------------------------- */ @media only screen and (max-device-width:240px) { /* 240px的宽度Styles */ } @media only screen and (min-device-width:241px) and (max-device-width:360px) { /* 360px的宽度Styles */ } @media only screen and (min-device-width:361px) and (max-device-width:480px) { /* 480px的宽度Styles */ } /* * 栅格 */ .row{width:102%;} .row:after,.row:before{clear:both;display:table;content:" ";} .full-row .row .span-1,.span-1{float:left;margin-right:2%;width:6.33333333%;transition:.2s width ease;} .full-row .row .span-2,.span-2{float:left;margin-right:2%;width:14.66666667%;transition:.2s width ease;} .full-row .row .span-3,.span-3{float:left;margin-right:2%;width:23%;transition:.2s width ease;} .full-row .row .span-4,.span-4{float:left;margin-right:2%;width:31.33333333%;transition:.2s width ease;} .full-row .row .span-5,.span-5{float:left;margin-right:2%;width:39.66666667%;transition:.2s width ease;} .full-row .row .span-6,.span-6{float:left;margin-right:2%;width:48%;transition:.2s width ease;} .full-row .row .span-7,.span-7{float:left;margin-right:2%;width:56.33333333%;transition:.2s width ease;} .full-row .row .span-8,.span-8{float:left;margin-right:2%;width:64.66666667%;transition:.2s width ease;} .full-row .row .span-9,.span-9{float:left;margin-right:2%;width:73%;transition:.2s width ease;} .full-row .row .span-10,.span-10{float:left;margin-right:2%;width:81.33333333%;transition:.2s width ease;} .full-row .row .span-11,.span-11{float:left;margin-right:2%;width:89.66666667%;transition:.2s width ease;} .full-row .row .span-12,.span-12{float:left;margin-right:2%;width:98%;transition:.2s width ease;} .full-row .row .span-13,.span-13{float:left;margin-right:2%;width:106.33333333%;transition:.2s width ease;} .full-row .row .span-14,.span-14{float:left;margin-right:2%;width:114.66666667%;transition:.2s width ease;} .full-row .row .span-15,.span-15{float:left;margin-right:2%;width:123%;transition:.2s width ease;} .full-row .row .span-16,.span-16{float:left;margin-right:2%;width:131.33333333%;transition:.2s width ease;} .full-row .row .span-17,.span-17{float:left;margin-right:2%;width:139.66666667%;transition:.2s width ease;} .full-row .row .span-18,.span-18{float:left;margin-right:2%;width:148%;transition:.2s width ease;} .full-row .row .span-19,.span-19{float:left;margin-right:2%;width:156.33333333%;transition:.2s width ease;} .full-row .row .span-20,.span-20{float:left;margin-right:2%;width:164.66666667%;transition:.2s width ease;} .full-row .row .span-21,.span-21{float:left;margin-right:2%;width:173%;transition:.2s width ease;} .full-row .row .span-22,.span-22{float:left;margin-right:2%;width:181.33333333%;transition:.2s width ease;} .full-row .row .span-23,.span-23{float:left;margin-right:2%;width:189.66666667%;transition:.2s width ease;} .full-row .row .span-24,.span-24{float:left;margin-right:2%;width:198%;transition:.2s width ease;} .pull-right{float:right;} .pull-left{float:left;} .hide{display:none;} .center{position:relative;left:-1%;float:none;clear:both;display:block;margin-right:auto;margin-left:auto;} .pull-left-1{position:relative;left:-8.33333333%;} .pull-left-2{position:relative;left:-16.66666667%;} .pull-left-3{position:relative;left:-25%;} .pull-left-4{position:relative;left:-33.33333333%;} .pull-left-5{position:relative;left:-41.66666667%;} .pull-left-6{position:relative;left:-50%;} .pull-left-7{position:relative;left:-58.33333333%;} .pull-left-8{position:relative;left:-66.66666667%;} .pull-left-9{position:relative;left:-75%;} .pull-left-10{position:relative;left:-83.33333333%;} .pull-left-11{position:relative;left:-91.66666667%;} .pull-left-12{position:relative;left:-100%;} .pull-left-13{position:relative;left:-108.33333333%;} .pull-left-14{position:relative;left:-116.66666667%;} .pull-left-15{position:relative;left:-125%;} .pull-left-16{position:relative;left:-133.33333333%;} .pull-left-17{position:relative;left:-141.66666667%;} .pull-left-18{position:relative;left:-150%;} .pull-left-19{position:relative;left:-158.33333333%;} .pull-left-20{position:relative;left:-166.66666667%;} .pull-left-21{position:relative;left:-175%;} .pull-left-22{position:relative;left:-183.33333333%;} .pull-left-23{position:relative;left:-191.66666667%;} .pull-left-24{position:relative;left:-200%;} .pull-right-1{position:relative;left:8.33333333%;} .pull-right-2{position:relative;left:16.66666667%;} .pull-right-3{position:relative;left:25%;} .pull-right-4{position:relative;left:33.33333333%;} .pull-right-5{position:relative;left:41.66666667%;} .pull-right-6{position:relative;left:50%;} .pull-right-7{position:relative;left:58.33333333%;} .pull-right-8{position:relative;left:66.66666667%;} .pull-right-9{position:relative;left:75%;} .pull-right-10{position:relative;left:83.33333333%;} .pull-right-11{position:relative;left:91.66666667%;} .pull-right-12{position:relative;left:100%;} .pull-right-13{position:relative;left:108.33333333%;} .pull-right-14{position:relative;left:116.66666667%;} .pull-right-15{position:relative;left:125%;} .pull-right-16{position:relative;left:133.33333333%;} .pull-right-17{position:relative;left:141.66666667%;} .pull-right-18{position:relative;left:150%;} .pull-right-19{position:relative;left:158.33333333%;} .pull-right-20{position:relative;left:166.66666667%;} .pull-right-21{position:relative;left:175%;} .pull-right-22{position:relative;left:183.33333333%;} .pull-right-23{position:relative;left:191.66666667%;} .pull-right-24{position:relative;left:200%;} .full-row{width:100%;} .full-row:after,.full-row:before{clear:both;display:table;content:" ";} .full-row [class*=midd],.full-row [class*=smal],.full-row [class*=span]{margin-right:0;} .full-row .span-1{width:8.33333333%;} .full-row .span-2{width:16.66666667%;} .full-row .span-3{width:25%;} .full-row .span-4{width:33.33333333%;} .full-row .span-5{width:41.66666667%;} .full-row .span-6{width:50%;} .full-row .span-7{width:58.33333333%;} .full-row .span-8{width:66.66666667%;} .full-row .span-9{width:75%;} .full-row .span-10{width:83.33333333%;} .full-row .span-11{width:91.66666667%;} .full-row .span-12{width:100%;} .full-row .span-13{width:108.33333333%;} .full-row .span-14{width:116.66666667%;} .full-row .span-15{width:125%;} .full-row .span-16{width:133.33333333%;} .full-row .span-17{width:141.66666667%;} .full-row .span-18{width:150%;} .full-row .span-19{width:158.33333333%;} .full-row .span-20{width:166.66666667%;} .full-row .span-21{width:175%;} .full-row .span-22{width:183.33333333%;} .full-row .span-23{width:191.66666667%;} .full-row .span-24{width:200%;} .full-row .center{left:auto;} .span-3-1{float:left;margin-right:2%;width:38%;transition:.2s width ease;} .span-3-2{float:left;margin-right:2%;width:28%;transition:.2s width ease;} .span-3-3{float:left;margin-right:2%;width:28%;transition:.2s width ease;} @media only screen and (max-width:64em){ .full-row .row .midd-1,.midd-1{width:6.33333333%;} .full-row .row .midd-2,.midd-2{width:14.66666667%;} .full-row .row .midd-3,.midd-3{width:23%;} .full-row .row .midd-4,.midd-4{width:31.33333333%;} .full-row .row .midd-5,.midd-5{width:39.66666667%;} .full-row .row .midd-6,.midd-6{width:48%;} .full-row .row .midd-7,.midd-7{width:56.33333333%;} .full-row .row .midd-8,.midd-8{width:64.66666667%;} .full-row .row .midd-9,.midd-9{width:73%;} .full-row .row .midd-10,.midd-10{width:81.33333333%;} .full-row .row .midd-11,.midd-11{width:89.66666667%;} .full-row .row .midd-12,.midd-12{width:98%;} .full-row .row .midd-13,.midd-13{width:106.33333333%;} .full-row .row .midd-14,.midd-14{width:114.66666667%;} .full-row .row .midd-15,.midd-15{width:123%;} .full-row .row .midd-16,.midd-16{width:131.33333333%;} .full-row .row .midd-17,.midd-17{width:139.66666667%;} .full-row .row .midd-18,.midd-18{width:148%;} .full-row .row .midd-19,.midd-19{width:156.33333333%;} .full-row .row .midd-20,.midd-20{width:164.66666667%;} .full-row .row .midd-21,.midd-21{width:173%;} .full-row .row .midd-22,.midd-22{width:181.33333333%;} .full-row .row .midd-23,.midd-23{width:189.66666667%;} .full-row .row .midd-24,.midd-24{width:198%;} .midd-hide{display:none!important;} .midd-center{position:relative;left:-1%;float:none;clear:both;display:block;margin-right:auto;margin-left:auto;} .full-row .midd-1{width:8.33333333%;} .full-row .midd-2{width:16.66666667%;} .full-row .midd-3{width:25%;} .full-row .midd-4{width:33.33333333%;} .full-row .midd-5{width:41.66666667%;} .full-row .midd-6{width:50%;} .full-row .midd-7{width:58.33333333%;} .full-row .midd-8{width:66.66666667%;} .full-row .midd-9{width:75%;} .full-row .midd-10{width:83.33333333%;} .full-row .midd-11{width:91.66666667%;} .full-row .midd-12{width:100%;} .full-row .midd-13{width:108.33333333%;} .full-row .midd-14{width:116.66666667%;} .full-row .midd-15{width:125%;} .full-row .midd-16{width:133.33333333%;} .full-row .midd-17{width:141.66666667%;} .full-row .midd-18{width:150%;} .full-row .midd-19{width:158.33333333%;} .full-row .midd-20{width:166.66666667%;} .full-row .midd-21{width:175%;} .full-row .midd-22{width:183.33333333%;} .full-row .midd-23{width:191.66666667%;} .full-row .midd-24{width:200%;} .midd-show{display:block;} } @media only screen and (max-width:40em){ .full-row .row .smal-1,.smal-1{width:6.33333333%;} .full-row .row .smal-2,.smal-2{width:14.66666667%;} .full-row .row .smal-3,.smal-3{width:23%;} .full-row .row .smal-4,.smal-4{width:31.33333333%;} .full-row .row .smal-5,.smal-5{width:39.66666667%;} .full-row .row .smal-6,.smal-6{width:48%;} .full-row .row .smal-7,.smal-7{width:56.33333333%;} .full-row .row .smal-8,.smal-8{width:64.66666667%;} .full-row .row .smal-9,.smal-9{width:73%;} .full-row .row .smal-10,.smal-10{width:81.33333333%;} .full-row .row .smal-11,.smal-11{width:89.66666667%;} .full-row .row .smal-12,.smal-12{width:98%;} .full-row .row .smal-13,.smal-13{width:106.33333333%;} .full-row .row .smal-14,.smal-14{width:114.66666667%;} .full-row .row .smal-15,.smal-15{width:123%;} .full-row .row .smal-16,.smal-16{width:131.33333333%;} .full-row .row .smal-17,.smal-17{width:139.66666667%;} .full-row .row .smal-18,.smal-18{width:148%;} .full-row .row .smal-19,.smal-19{width:156.33333333%;} .full-row .row .smal-20,.smal-20{width:164.66666667%;} .full-row .row .smal-21,.smal-21{width:173%;} .full-row .row .smal-22,.smal-22{width:181.33333333%;} .full-row .row .smal-23,.smal-23{width:189.66666667%;} .full-row .row .smal-24,.smal-24{width:198%;} .smal-hide{display:none!important;} .smal-center,.smal-show{display:block!important;} .smal-center{position:relative;left:-1%;float:none;clear:both;margin-right:auto;margin-left:auto;} [class*=pull-left-],[class*=pull-right-]{right:auto;left:auto;} .full-row .smal-1{width:8.33333333%;} .full-row .smal-2{width:16.66666667%;} .full-row .smal-3{width:25%;} .full-row .smal-4{width:33.33333333%;} .full-row .smal-5{width:41.66666667%;} .full-row .smal-6{width:50%;} .full-row .smal-7{width:58.33333333%;} .full-row .smal-8{width:66.66666667%;} .full-row .smal-9{width:75%;} .full-row .smal-10{width:83.33333333%;} .full-row .smal-11{width:91.66666667%;} .full-row .smal-12{width:100%;} .full-row .smal-13{width:108.33333333%;} .full-row .smal-14{width:116.66666667%;} .full-row .smal-15{width:125%;} .full-row .smal-16{width:133.33333333%;} .full-row .smal-17{width:141.66666667%;} .full-row .smal-18{width:150%;} .full-row .smal-19{width:158.33333333%;} .full-row .smal-20{width:166.66666667%;} .full-row .smal-21{width:175%;} .full-row .smal-22{width:183.33333333%;} .full-row .smal-23{width:191.66666667%;} .full-row .smal-24{width:200%;} .span-3-1{float:left;margin-right:2%;width:98%;transition:.2s width ease;} .span-3-2{float:left;margin-right:2%;width:48%;transition:.2s width ease;} .span-3-3{float:left;margin-right:2%;width:48%;transition:.2s width ease;} } /*__________________________________________base.css__________________________________________________________________*/ @charset "utf-8"; /* CSS Document */ html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%} body{-webkit-overflow-scrolling: touch;overflow-scrolling: touch} /*上下拉动滚动条时卡顿、慢*/ body,button,dd,dl,form,h1,h2,h3,h4,h5,h6,ol,p,ul,menu{margin:0} ol,ul,menu{padding-left:0;list-style-type:none} article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block} audio,canvas,progress,video{display:inline-block;vertical-align:baseline} audio:not([controls]) {display: none;height: 0;} [hidden], template {display: none;} abbr[title] {border-bottom: 1px dotted;} b,strong {font-weight: bold;} i{ font-style: normal;} dfn{font-style:italic} h1{margin:.67em 0;font-size:2em} mark{color:#000;background:#ff0} small{font-size:80%} sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline} sup{top:-.5em} sub{bottom:-.25em} img{border:0} svg:not(:root) {overflow: hidden;} figure{margin:1em 40px} hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box} pre{overflow:auto} code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em} button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit} button{overflow:visible} button,select{text-transform:none} button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button;cursor: pointer;} button[disabled],html input[disabled] {cursor: default;} button::-moz-focus-inner,input::-moz-focus-inner {padding: 0;border: 0;} input {line-height: normal;} input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield; } input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver} legend{padding:0;border:0} textarea{overflow:auto} optgroup{font-weight:700} table{border-spacing:0;border-collapse:collapse} td,th{padding:0} img{max-width:100%;border:0;vertical-align:middle;} a,button,input,select,textarea{outline:0} /* 美化 */ .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {text-shadow: rgba(0,0,0,.15) 0 0 1px;} a{text-shadow:none;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);background-color: transparent;} * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; /*旋转屏幕时，字体大小调整的问题*/ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* base anim */ a, input, b, h1, img, span, button, header, .arrow, .portinfo, .portinfo h3, .portinfo p, .portimg,*:before, *:after , .nav_transform1 ul.navCont li .title,.media-box .icon,.cusbox a{ -moz-transition: all ease-in-out 0.25s; -webkit-transition: all ease-in-out 0.25s; -o-transition: all ease-in-out 0.25s; -ms-transition: all ease-in-out 0.25s; transition: all ease-in-out 0.25s; } /*浮动*/ .fl{ float:left;} .fr{ float:right;} /*去除浮动*/ .clear{ clear:both; overflow:hidden; zoom:1; float:none;} ul,li{ list-style: none;} /*间距*/ .mt1 { margin-top:1rem; } .mt2 { margin-top:2rem; } .mt3 { margin-top:3rem; } .mt4 { margin-top:3rem; } .mt5 { margin-top:5rem; } .mt6 { margin-top:6rem; } .mt7 { margin-top:7rem; } .mt8 { margin-top:8rem; } .mt10 { margin-top:10rem; } .mb1 { margin-bottom:1rem; } .mb2 { margin-bottom:2rem; } .mb3 { margin-bottom:3rem; } .pad{padding-left: 4%;padding-right: 4%;} .pt1 { padding-top:1rem; } .pt2 { padding-top:2rem; } .pt3 { padding-top:4rem; } .pt4 { padding-top:4rem; } .pt5 { padding-top:5rem; } .pt6 { padding-top:6rem; } .pb1 { padding-bottom:1rem; } .pb2 { padding-bottom:2rem; } .pb3 { padding-bottom:3rem; } /*对齐样式*/ .dcenter { margin:0 auto;} .tl{ text-align:left!important;} .tr{ text-align:right!important;} .tc{text-align:center!important;} .in{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis;} .pos{ position: relative;} /*垂直居中1*/ .jcent{ display: flex; align-items: center; justify-content: center; flex-direction: column;} /*垂直居中2*/ .ghost-center{height: 100%} .ghost-center:before{content: " ";display: inline-block;height: 100%;width: 1%;vertical-align: middle;} .ghost-center p,.ghost-center a{display: inline-block;vertical-align: middle;} .my-auto{ display: flex;} /*文字缩略*/ .txtW { overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -moz-text-overflow:ellipsis; white-space:nowrap; } .txtH { word-break:break-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";} .f-cb,.f-cbli li{zoom:1;} /* widgets 组件 ----------------------------------------------------*/ .widget-respimg{display:table-cell!important;text-align:center;vertical-align:middle} .widget-respimg img{max-height:100%;max-width:100%} /*scroll*/ ::-webkit-scrollbar {width:4px;height:4px} ::-webkit-scrollbar-button:vertical {display:none} ::-webkit-scrollbar-corner,::-webkit-scrollbar-track {background-color:#fff;} ::-webkit-scrollbar-thumb {border-radius:0;background-color: #eee;} ::-webkit-scrollbar-thumb:vertical:hover {background-color: #eee;} ::-webkit-scrollbar-thumb:vertical:active {background-color: #eee;} /* 表单 */ .m-form {} .m-form legend{font-size: 18px;color: #2f75b5;padding-bottom: 8px;} .m-form .btn{width: 100%;border-radius: 0;padding:10px 10px;margin-top:0;border:1px solid #f89e1d;background: #f89e1d;color: #fff;} .m-form .btn { transition-duration: .5s;-ms-transition-duration: .5s;-moz-transition-duration: .5s;-webkit-transition-duration: .5s;} .m-form .btn-default:focus, .m-form .btn-default.focus{color: #fff; opacity: 0.8} .m-form .btn-default:hover{color: #fff; opacity: 0.8;border-color:#ff8e00;background-color: #ff8e00;} .m-form .btn[type='reset']{background-color: #797979;border:1px solid #797979;} .m-form .form-control{ margin-bottom: 1rem;} .ys-form {} .ys-form legend{font-size: 1.6rem;color: #fff;padding-bottom: 8px;} .ys-form .btn{width: 140px;border-radius: 0;padding:0 10px;margin-top:0;border:1px solid #b80924;background: #b80924;color: #fff; height: 48px; font-size: 16px; margin-left: 75px;} .ys-form .btn { transition-duration: .5s;-ms-transition-duration: .5s;-moz-transition-duration: .5s;-webkit-transition-duration: .5s;} .ys-form .btn-default:focus, .ys-form .btn-default.focus{color: #fff; opacity: 0.8} .ys-form .btn-default:hover{color: #fff; opacity: 0.8;border-color:#ff8e00;background-color: #ff8e00;} .ys-form .btn[type='reset']{background-color: #797979;border:1px solid #797979;} .ys-form .form-control{ margin-bottom: 2rem; background: #f1f1f1; border-radius: 40px; border-color: #f5f5f5; width: 70%;} .ys-form label{ float: left; width: 75px; line-height: 40px; color: #565656; font-size: 16px;} .ys-form select{ margin-bottom: 2rem; background: #fff; border-radius: 40px; border-color: #eee; width: 70%;box-sizing:border-box; display: block; height: 40px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143;} /*表单*/ .form-label{display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: normal;font-size: 14px} /*input label：*/ .form-control { box-sizing:border-box; display: block; width: 100%; height: 40px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #000; background:none; background-color:none; background-image: none; border: 1px solid #ddd; /*#ccc;*/ border-radius: 0; /*4px;*/ /* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; */ } .form-control:focus{border-color: #fff; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0), 0 0 8px rgba(215, 12, 24, .6); box-shadow: inset 0 1px 1px rgba(0,0,0,0), 0 0 8px rgba(215, 12, 24, .6);} .form-control::-moz-placeholder{color: #666; opacity: 1;} .form-control:-ms-input-placeholder{color: #666;} .form-control::-webkit-input-placeholder{color: #666;} .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{background-color: #eee; opacity: 1;} .form-control[disabled], fieldset[disabled] .form-control{cursor: not-allowed;} textarea.form-control{height: auto;} input[type="search"]{-webkit-appearance: none;} /*__________________________________________iconfont.css__________________________________________________________________*/ @font-face { font-family: "iconfont"; /* Project id 3389101 */ src: url('iconfont.woff2?t=1652165633955') format('woff2'), url('iconfont.woff?t=1652165633955') format('woff'), url('iconfont.ttf?t=1652165633955') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-dibudaohanglan-:before { content: "\e62e"; } .icon-icon_zuo:before { content: "\e64a"; } .icon-dian:before { content: "\ec1e"; } .icon-zhankai-:before { content: "\e648"; } .icon-zhankai:before { content: "\e633"; } .icon-liaojiejingqu-jingqujianjie:before { content: "\e66d"; } .icon-sousuo:before { content: "\e62a"; } .icon-weixin:before { content: "\e607"; } .icon-31shijian:before { content: "\e600"; } .icon-qqkongjian:before { content: "\e66f"; } .icon-weibo:before { content: "\e65a"; } .icon-QQ:before { content: "\e882"; } .icon-xiala:before { content: "\e681"; } .icon-dingbu:before { content: "\e76c"; } .icon-touzi:before { content: "\e618"; } .icon-youxiang:before { content: "\e667"; } .icon-youxiang1:before { content: "\e672"; } .icon-dianhua:before { content: "\e61d"; } .icon-city-full:before { content: "\e9e9"; } .icon-a-diaochetadiaogongchengxiujian:before { content: "\e7a5"; } /*__________________________________________responsive.css__________________________________________________________________*/ @charset "UTF-8"; .wow{visibility: hidden;} /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { 11.1% { -webkit-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg) } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg) } 100% { -webkit-transform: none; transform: none } } @keyframes jello { 11.1% { -webkit-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg) } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg) } 100% { -webkit-transform: none; transform: none } } .jello{ -webkit-animation-name:jello; animation-name:jello; -webkit-transform-origin: center; transform-origin: center } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /*__________________________________________main.css_____________________________________________________________*/ /* ========================================================================== Index Page ========================================================================== */ /*首页banner大图样式*/ .ibanner{ position:relative; overflow: hidden; height: 880px; transition: all 0.6s; z-index: 12; color: #fff;} .ibanner .swiper-container {width: 100%;height: 100%;} .ibanner .swiper-slide{ position:relative; background-position: center center; background-size: cover;} .ibanner .bfont span{ font-size: 4.5rem; color: #1d1f24; font-weight: bold; line-height: 6.8rem;} .ibanner .bfont p{ color: #1d1f24; font-size: 18px; margin: 20px 0;} .ibanner a{ display: block; line-height: 0; text-align: center;} .ibanner .swiper-scrollbar-drag{ background:#1b85e7;} .ibanner .swiper-button-prev{ left:150px;} .ibanner .swiper-button-next{ left:250px; right: auto;} .ibanner .swiper-button-prev, .ibanner .swiper-button-next{ bottom:6rem; margin:0; width:66px; height:66px; line-height:66px; border-radius: 66px; text-align:center; top: auto; background-size: cover;} .ibanner .ban-img{ width:100%; color:#fff; position: absolute; text-align: center; top: 30%; margin: 0 auto; left: 0; right: 0;} .ibanner .swiper-pagination{ color: #fff; text-align: center; width: 100%; height: 30px; bottom: 4rem; left: 0; overflow: hidden;} .ibanner .swiper-pagination-bullet{ background: #fff; opacity: 0.5; position: relative; width: 12px; height: 12px; border-radius: 12px; margin: 0 5px; display: inline-block; text-align: center;} .ibanner .swiper-pagination-bullet-active{ background: #fff; opacity: 1;} .ibanner .swiper-pagination-current{} .ibanner .video-bk{ position: absolute; bottom: 30px; left: 0; z-index: 100;} .ibanner .video-bk img{ border-radius: 8px;} .ibanner .video-bk .bimg{ position: relative;} .ibanner .video-bk .bimg::after{ content: ""; cursor: pointer; display: block; position: absolute; top: 0; left: 0; z-index: 2; background: url(../img/dot_video.png) no-repeat center center; background-size: cover; width: 100%; height: 100%; } .ibanner .video-bk span{ display: block; font-size: 2.6rem; line-height: 37px; text-align: center; margin-top: 10px;} .video-box{ position: fixed; background: rgba(0,0,0,0.5); z-index: 10000; width: 100%; height: 100%; left: 0; top: 0; display: none;} .video-box .wrap{ height: 100%;} .video-box .close{ width: 60px; height: 60px; border-radius: 60px; background-color: #fff; text-align: center; line-height: 60px; font-size: 36px; margin-bottom: 10px; cursor: pointer;} .video-cont{ width: 1200px; height: 60%; box-sizing: border-box; border-radius: 10px; overflow: hidden; border: 5px solid #fff;} .video-cont iframe{ width: 100%; height: 100%;} .inews-box{} .inews-box h4{ line-height: 36px; font-size: 22px; border-bottom: 1px dashed #ddd; padding-bottom: 2rem;color: #4bb03f;} .inews-box h4 a{ color: #4bb03f;} .inews-box span{ color: #999; display: block; padding: 10px 0 5px;} .inews-box span i{ color: #0061ad; display: inline-block; vertical-align: middle; font-size: 18px; margin-right: 5px;} .inews-box p{ font-size: 14px; line-height: 26px; color: #777;} .inews-box p a{ color: #0061ad;} .inews-box2{ clear: both; overflow: hidden; margin-bottom: 5px;} .inews-box2 h4{ line-height: 30px; font-size: 18px; font-weight: normal;} .inews-box2 span{ color: #999; font-size: 14px;vertical-align: middle;} .inews-box2 span i{ display: inline-block; vertical-align: middle; margin-right: 10px; color: #666; font-size: 18px;} .inews-box2 .fr span{ display: block; background-color: #d80c18; color: #fff; line-height: 28px; font-size: 14px; text-align: center;} .inews-box2 .fr{ width: 20%;} .inews-box2 .fl{ width: 78%;} .news-box{ margin-bottom: 3rem;} .news-box .icon img{ width: 100%;} .news-box h4{ line-height: 36px; font-size: 18px; font-weight: normal;} .news-box span{ font-size: 12px; color: #d80c18;} .news-box p{ font-size: 14px; color: #999;} .inews-box3{ clear: both; overflow: hidden; margin-bottom: 2rem;} .inews-box3 .btit{ position: relative; padding-left: 30px; margin-bottom: 0.5rem;} .inews-box3 .btit::before{ content: "Q"; display: inline-block; border: 1px solid #eaeaea; width: 20px; height: 20px; line-height: 20px; text-align: center; color: #999; font-size: 14px; vertical-align: middle; position: absolute; top: 3px; left: 0;} .inews-box3 .btit span{line-height: 30px; font-size: 18px; vertical-align: middle;} .inews-box3 .bny::before{ content: "A"; display: inline-block; border: 1px solid #eaeaea; width: 20px; height: 20px; line-height: 20px; text-align: center; color: #999; font-size: 14px; vertical-align: middle; position: absolute; top: 2px; left: 0;} .inews-box3 .bny{ position: relative; padding-left: 30px;} .inews-box3 .bny p{ font-size: 14px; color: #888; line-height: 24px;} .img-box{ margin-bottom: 0;} .img-box .icon{ background-color: #fff;} /* ========================================================================== Other Page ========================================================================== */ .nbanner{ background: url(../img/nban1.jpg) no-repeat center center; background-size:cover ; height: 600px; position: relative; overflow: hidden;} .nbanner .bH{ position: relative; height: 100%;} .psub{ text-align: center;} .psub a{ display: inline-block; border-radius: 8px; background-color: #EDEDED; line-height: 60px; color: #222; font-size: 2.6rem; margin: 0 3%; width: 280px;} .psub a:hover,.psub a.active{ background-color: #004EA2; color: #fff;} .mtop{margin-top:5%;} .jobs-tit{ background-color: #ededed; line-height: 70px; } .jobs-tit span{ font-size: 2.6rem;} .jobs-tit2{ border-bottom: 2px solid #ddd; padding-bottom: 2rem;} .jobs-tit2 span{ font-size: 24px; font-weight: bold;} .jobs-tit2 p{ font-size: 18px; font-weight: bold;} .jobs-info{ line-height: 30px; font-size: 16px;} .jobs-info span{margin: 10px 0; font-size: 18px;} .jobs-info a.more{ width: 200px; line-height: 60px; font-size: 18px; margin: 0 1%;} .jobs-info a.more:nth-child(2){ background-color: #e5e5e5; color: #666;} .jobs-info a.more:nth-child(2):hover{ background-color: #00458f; color: #fff;} .jobs-brow{ line-height: 70px; padding: 0 3rem;} .jobs-brow:nth-child(odd){ background-color: #FAFAFA;} .jobs-brow span{ font-size: 2.2rem;} .block-1 .brow{ text-align: center;} .block-1 .brow i{ display: block;} .block-1 .brow:hover i img{ transform: rotateY(360deg); transition: all 1s;} .block-1 .brow span{ display: block; font-size: 22px; margin: 1rem 0;} .block-1 .brow p{ font-size: 14px; line-height: 24px;} .nbg_k1{ background-color: #F9FCFF; padding: 8rem 0;} .block-3{ text-align: center;} .block-3 p{ font-size: 3rem;} .block-2 .brow{ position: relative; overflow: hidden; margin-bottom: 2rem;} .block-2 .brow .bimg img{ width: 100%;} .block-2 .brow .bhover{ position: absolute; bottom: 0; left: 0; width: 100%; color: #fff; z-index: 2; box-sizing: border-box; padding: 3rem 3rem 1rem;} .block-2 .brow .btit i{ display: block;} .block-2 .brow .btit span{ font-size: 2.6rem; display: block; margin-top: 1rem;} .block-2 .brow .binfo{ font-size: 2rem; line-height: 28px; height: 0; opacity: 0;} .block-2 .brow:hover .bhover{ background-color: rgba(0,0,0,0.4); height: 100%; transition: all 0.6s;} .block-2 .brow:hover .binfo{ height: auto; opacity: 1; transition: all 0.6s;} .layui-input, .layui-select, .layui-textarea{ height: 47px; border-width: 2px; font-size: 16px; color: #666;} .layui-form-label{ padding: 14px 15px; color: #666; font-size: 16px; font-weight: bold; width: 100px;} .layui-input-block{ margin-left: 130px;min-height:48px;} .layui-form-radio{ line-height: 36px;} .layui-form-radio>i:hover, .layui-form-radioed>i,.layui-form-radio>i{ color: #000;} .fdate{ background: url(../img/dot_date.png) no-repeat right 13px center;} .fupload{ line-height: 48px; font-size: 999px; filter: alpha(opacity=0); min-height: 100%; min-width: 100%; opacity: 0; position: absolute; right: 0; text-align: right; top: 0; cursor: pointer;} .bk-upload{ background: url(../img/dot_upload.png) no-repeat right 10px center; position: relative; border: 2px solid #e6e6e6; line-height: 48px; height: 47px; width: 100%;} .bk-yzm{ position: relative;} .bk-yzm img{ position: absolute; right: 0; top: 0;} .bk-yzm .layui-input-inline{ width: 55%;} .fbtn{ height: 60px; width: 200px; font-size: 18px; background-color: #00458f;} .fbtn2{ height: 60px; width: 200px; font-size: 18px; background-color: #e5e5e5; color: #666; border-color: #e5e5e5;} .layui-btn-primary:hover{ color: #00458f; border-color: #00458f;} .my-auto{ display: flex;} .my-auto{ margin-bottom: 2rem;} ._f_hr_right_d{box-sizing: border-box; vertical-align: top; padding: 0 10px; height: 47px; background-color: #ffffff; border: solid 2px #e6e6e6;} #file1 { display: none; } ._f_file_lb,._f_date_lb { position: relative; font-size: 16px; color: #666; display: inline-block; width: 100%; line-height: 45px; vertical-align: top;} ._f_file_img{margin-top: 12px; height: 20px; vertical-align: top; position: absolute; right: 0;} /*面包屑*/ .place{ color: #999; position: relative; font-size: 14px;} .place span{ margin: 0 5px; color: #999;} .place a{ color: #999; margin: 0 5px;} .place a:hover{ color: #d80c18;} .place i{ display: inline-block; background-color: #f1f1f1; padding: 0 1.5rem; margin-right: 1rem; font-size: 2rem; line-height: 62px;} /*分类样式*/ .module_cate{ background-color: #eee; height: 58px; line-height: 58px; text-align: center; position: relative; z-index: 100;} .module_cate span{ color: #333; font-size: 2.4rem; font-weight: bold; } .subCate{ clear: both; overflow: hidden; text-align: right;} .subCate li{ display: inline-block; margin-left: 8%;} .subCate li a{ font-size: 18px; position: relative;} .subCate li:hover a,.subCate li.active a{ color: #d80c18;} .select-date{ display: inline-block; float: right; height: 48px; line-height: 48px; padding: 0 2rem; border: 2px solid #ccc; position: relative;} .select-date select{ border: none; font-size: 18px; color: #d80c18; background-color: transparent; width: 120px; margin-left: 10px;} .select-date select option{ color: #4d4d4d; line-height: 36px; font-size: 16px;} .select-date::after{ content: "\e681"; font-family: "iconfont"; display: inline-block; top: -1px; right: 18px; position: absolute; font-size: 22px;} .msg-bk{ } .m-form .btn{ background-color: #d70c18; border-color: #d70c18; font-size: 18px; font-weight: bold; line-height: 40px; width: 40%; color: #fff;} .m-form label{ font-size: 18px; margin-bottom: 1rem; display: block;} .m-form label i{ color: #f00;} .m-form .form-control{ border: 2px solid #f7f7f7; color: #333; height: 60px; font-size: 16px; } .m-form .msg-btn .btn:hover{ background-color: #ff8e00; color: #fff; opacity: 1;} .m-form textarea.form-control{ border: 2px solid #f7f7f7; height: auto;} .m-form .form-group{ margin-bottom: 1rem;} /*横排分类*/ .tip{ line-height: 36px; color: #565656; font-size: 16px;} .content{ line-height: 34px; color: #666; font-size: 16px;} .content p{ margin: 0 0 10px; font-size: 16px;} .subtab{background-color: #e6f1ff; line-height: 6rem; font-size: 18px; font-weight: bold; color: #474747; padding-left: 5rem;} .sub_cont{border: 1px solid #e7e5e5; border-top: 0; } .sub_cont .subNav{ line-height: 60px; position: relative; font-size: 14px; color: #3d3d3d; padding-left: 5rem; border-top: 1px solid #e7e5e5;} .sub_cont .subNav:after{ content: "\e608"; float: right;font-family: "iconfont" !important; color: #0070f6; font-size: 14px; position: absolute; right: 3rem; top: 0; width: 30px; height: 30px; line-height: 30px; border: 1px solid #0070f6; border-radius: 30px; text-align: center; bottom: 0; margin: auto 0; font-weight: bold;} .sub_cont .subNav.open:after{ content: '\e60d'; color: #0070f6;} .navContent{ display: none; background: #fff; margin: 0; padding: 3rem 5rem; border-top: 1px solid #e7e5e5;} .navContent p{ margin: 1rem 0 0; color: #3d3d3d; font-size: 14px; line-height: 30px;} .navContent span{ font-weight: bold; font-size: 18px;} .navContent .subtit{ margin-bottom: 2rem;} .navContent .subtit span{ font-weight: bold; color: #0070f6; font-size: 14px;} .article{ line-height: 30px; padding:7rem 5rem; background: #fff;} .news-tit{ font-size: 3.6rem; font-weight: bold; line-height: 4rem; text-align: center;} .tool{ color: #888; border-bottom: 1px solid #e5e5e5; margin-top: 1rem; line-height: 48px; text-align: center;} .tool span{ display: inline-block; margin: 0 1%; font-size: 14px;} .tool .bshare-custom #bshare-shareto{ font-weight: normal; font-size: 14px;color: #888; } .bshare-custom.icon-medium-plus .bshare-weixin,.bshare-custom.icon-medium-plus .bshare-qqim,.bshare-custom.icon-medium-plus .bshare-sinaminiblog,.bshare-custom.icon-medium-plus .bshare-qzone{ background:none!important; padding-left: 5px!important;} .bshare-custom.icon-medium-plus i{ color: #888; font-size: 20px;} .bshare-custom{ padding: 0;} .article .content,.article .content p{ line-height: 36px; color: #666; font-size: 16px;} .keys{padding-bottom: 2rem; line-height: 36px;} .keys span{ color: #333; font-size: 16px;} .keys a{ color: #666; display: inline-block; background-color: #f3f3f3; border-radius: 36px; padding: 0 20px; margin: 0 1rem 5px;} .keys a:hover{ background-color: #d8271c; color: #fff;} .ny-page{ line-height: 85px; font-size: 16px; border-bottom: 1px solid #dedede; border-top: 1px solid #dedede; text-align: center;} a.aback{ display: block; background-color: #d8271c; color: #fff;} .pro-page{ line-height: 76px;} .pro-page .pline{ border-right: 1px solid #dedede;} .bvideo{overflow: hidden; height: 520px; position: relative;} .bzz{position: absolute; width: 100%; height: 100%; z-index: 3;} /*新闻详情样式2*/ .bshare-custom{ padding: 2rem 0;} .big_img{position: fixed;z-index: -1;opacity: 0;background: rgba(0,0,0,0.8);width: 100%;height: 100%;top:0;left:0;} .big_img .swiper-container2 {position: absolute;width: 50%;height: 80%; bottom: 0; top: 0; left: 0; right: 0; overflow: hidden; margin: auto auto;} .big_img .swiper-container2 .swiper-wrapper{width: 100%;height: 100%;} .big_img .swiper-slide{width: 100%;height: 100%;display: table} .big_img .swiper-slide .cell{width: 100%;height: 100%;display: table-cell;vertical-align: middle;text-align: center;} .big_img .swiper-slide img{max-width: 80%;max-height: 80%;margin:0 auto;} .big_img .page2{position: absolute; top:0.2rem;text-align: center;width: 100%;} .big_img .page2 span{margin:0 0.05rem;} .big_img .close{ font-size: 20px; color: #1863af; width: 30px; height: 30px; line-height: 30px; top: 10%; right: 0; left: 0; margin: 0 auto; position: absolute; z-index: 10000; cursor: pointer; text-align: center; border-radius: 30px; background-color: #fff;} .big_img .swiper-button-next,.big_img .swiper-button-prev{ background: none;} .big_img .swiper-button-next{ right: 0;} .big_img .swiper-button-prev{ left: 0;} .big_img .swiper-button-next i,.big_img .swiper-button-prev i{ font-size: 4rem; color: #ababaa; display: block; text-align: center;} .vshare{ background-color: #fbfbfb; position: absolute; width: 100%; height: 10%; box-sizing: border-box; text-align: right; padding: 0 2rem; bottom: 0; left: 0;} .big-video .swiper-container2{ width: 80%;} .big-video .close{ left: auto; color: #fff; font-size: 3rem; background-color: rgba(0,0,0,0.5); right: 12%; top: 12%;} .fmsg{ width: 70%; margin: 0 auto;} .ys-msg input{ background: #fff; border: 1px solid #ddd; height: 55px; line-height: 55px; box-sizing: border-box; padding: 0 20px; width: 80%; display: block;float: left; border-radius: 5px; font-size: 16px;} .ys-msg button{ background: #0e68b0; text-align: center; width: 18%; font-size: 16px; border-radius: 5px; border: 0; float: right; height: 55px; line-height: 55px; color: #fff;} .pc-call{position:fixed;bottom:10%;right:0;width:50px;z-index: 1000;} .pc-call li{ width: 50px; height: 50px; background-image: linear-gradient(-220deg,#ff9e1d,#ff9e1d); margin-bottom: 2px; border-radius: 10px 0 0 10px; position: relative; line-height: 50px; right: 0;} .pc-call li a{ color: #fff;} .pc-call .pc-Top{ background: #cbcbcb; text-align: center; color: #fff; font-size: 20px; font-family: impact; cursor: pointer; position: relative;} .pc-call .pc-Top:before{ content: ""; background: url(pointer.png) no-repeat; width: 10px; height: 5px; position: absolute; top: -5px; left: 0; right: 0; margin: 0 auto;} .pc-call .pc-font{} .pc-call .pc-font span{display: block; line-height: 20px; text-align: center; padding-top: 6px;} .pc-call .pc-icon i{ display: inline-block;} .pc-call .pc-icon .qq{ display: inline-block; background: url(QQ.png) no-repeat center center; background-size:70% ; width: 100%; height: 100%;} .pc-call .pc-tel a{ background-image: linear-gradient(-220deg,#ff9e1d,#ff9e1d); margin-bottom: 2px; border-radius: 10px 0 0 10px; display: block; position: absolute; right: 0; top: 0; width: 100%; height: 100%; overflow: hidden;} .pc-call .pc-tel .tel{ display: inline-block; background: url(tel.png) no-repeat center center; width: 50px; height: 100%; vertical-align: middle; background-size:70% ;} .pc-call .pc-tel span{ display: inline-block; color: #fff; vertical-align: middle; font-size: 16px;} .pc-call .pc-tel:hover a{ width: 190px;} .pc-call .pc-code .code{ display: inline-block; background: url(code.png) no-repeat center center; width: 100%; height: 100%; background-size:70% ;} .pc-call .pc-code .code-img{position: absolute; right: 0; bottom: 0; width: 150px; height: 150px; display: none; transition: all 0.5s;} .pc-call .pc-code .code-img img{ width: 100%;} .pc-call .pc-code:hover .code-img{ display: block; right: 60px; transition: all 0.5s;} #mob-call {position: fixed;bottom: 0;height: 50px;width: 100%;background: #515151;left: 0; z-index: 1000;} #mob-call li {display: block; text-align: center;} #mob-call li i{ display: inline-block; width: 100%; height: 25px; background: url(QQ.png) no-repeat center center; background-size: auto 90%; margin-top: 5px;} #mob-call #call-list {position: initial} #mob-call #call-list li:active {background: rgba(0, 0, 0, .3);border-radius: initial} #mob-call #call-list .item {width: 25%;background: 0 0;display: block;float: left;position: static;position: initial;} #mob-call #call-list .item a {display: block;height: 100%;width: 100%;margin: 0;padding: 0; color: #fff;} #mob-call #call-list .item span{ margin-top: -15px; display: block;} #mob-call #call-list .item-top i{ background-image: url(top.png);} #mob-call #call-list .item-tel i{ background-image: url(tel.png);} #mob-call #call-list .item-code i{ background-image: url(code.png);} #mob-call #call-list .item-home i{ background-image: url(home.png);} /** * Swiper 4.5.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swiper/ * * Copyright 2014-2019 Vladimir Kharlampidi * * Released under the MIT License * * Released on: February 22, 2019 */ .swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px} /*手机导航*/ .mo_map_k { width: 36px; height: 36px; overflow: hidden; position: absolute; top: 30px; right:25px; z-index: 2000; border-radius: 6px; background: #00458f; display: block;} .mo_map_k svg { width: 100%; pointer-events: none; } .mo_b_top { width: 36px; height: 36px; overflow: hidden; position: fixed; bottom: 38px; right: 5px; z-index: 2000; border-radius: 6px; display: none; border: 1px solid #ddd; background: #fff; } .mo_b_top svg { width: 100%; pointer-events: none; } .mo_map { width: 100%; height: 100%; position: fixed; top: 0; right: -100%; background-color: #fff; z-index: 2999; } .mo_map_nav { width: 100%; height: 36px; padding: 12px 0; position: relative; background-color: #000; z-index: 3000; } .mo_map_nav a { font-size: 12px; } .mo_map_back, .mo_map_home { width: 36px; height: 36px; position: absolute; cursor: pointer; z-index: 3000; } .mo_map_back svg, .mo_map_home svg { width: 36px; height: 36px; float: left; pointer-events: none; } .mo_map_back { } .mo_map_home { right: 12px; } .mo_map_con { height: 100%; overflow-y: auto;background: #000; } .mo_map_list { padding: 0 0 90px 0px; } .mo_map_list .map_list ul li { width:130px;/* padding:0 20px 0 0;*/} .mo_map_list .map_list ul li a { font-size:12px;font-family: "雅黑",arial,verdana,sans-serif; } @media screen and (min-width:1030px) { .mo_map_k { display:none; } .mo_b_top { display:none; } .e_menu_w{display: block;} } @media screen and (max-width:1029px) { .mo_b_top { display: block; } .e_menu_w{display:none;} } /*map*/ .js_b { width:auto; height:auto; overflow:hidden; padding:20px 10px 0;} .js_t { width:auto; height:20px; overflow:hidden; padding:5px 0px; } .js_t a { float: left; display:block; height:18px; line-height:16px; font-size:18px; color:#fff; font-weight:700; padding-left:8px; width: 100%;text-align: center; } .map_list {width:auto; height:auto; overflow:hidden;} .map_list ul { padding:10px;} .map_list ul li { float:left; width:140px; height:30px; line-height:30px; overflow: hidden; background:url(/eportal/fileDir/mccbts/resource/cms/2018/12/img_pc_site/2018120709515735694.png) 1px 50% no-repeat; } .map_list ul li a { font-size:14px; color:#333; padding-left:13px; } .map_list ul li a:hover { color:#045bb8; }