@font-face { font-family: "iconfont"; /* Project id 2684660 */ src: url(../fonts/iconfont.woff2) format('woff2'), url(../fonts/iconfont.woff) format('woff'), url(../fonts/iconfont.ttf) format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon_youjiantou:before { content: "\e63f"; } .icon_zuojiantou:before { content: "\e641"; } .icon_fenxiang2:before { content: "\e86e"; } .icon_tuichuquanping:before { content: "\e63d"; } .icon_quanping:before { content: "\e634"; } .icon_fenxiang:before { content: "\e639"; } .icon_jiantou15_right:before { content: "\e632"; } .icon_24gf-playCircle:before { content: "\ea82"; } .icon_denglu-mimabukejian:before { content: "\e630"; } .icon_zhihu:before { content: "\ea8b"; } .icon_icon_bilibili:before { content: "\e62f"; } .icon_sousuo4:before { content: "\e62e"; } .icon_sousuo3:before { content: "\e6a7"; } .icon_bofang_o:before { content: "\eb5e"; } .icon_gouwuchekong:before { content: "\e62d"; } .icon_shezhi:before { content: "\e62c"; } .icon_more1:before { content: "\e71b"; } .icon_youtube:before { content: "\e76c"; } .icon_wenhao2:before { content: "\e646"; } .icon_wuzhangai:before { content: "\e638"; } .icon_fanhui:before { content: "\e6ff"; } .icon_wenhao1:before { content: "\e627"; } .icon_wenhao:before { content: "\e644"; } .icon_chuanshu:before { content: "\e65d"; } .icon_phone_1:before { content: "\e629"; } .icon_jiantou-you:before { content: "\e62b"; } .icon_linkedin:before { content: "\e642"; } .icon_youtube1:before { content: "\e8a7"; } .icon_go_top1:before { content: "\e625"; } .icon_xihuan2:before { content: "\e8c3"; } .icon_shoucang1:before { content: "\e622"; } .icon_dianzan1:before { content: "\e668"; } .icon_xihuan1:before { content: "\e637"; } .icon_tips:before { content: "\e687"; } .icon_xiaoxi1:before { content: "\e61c"; } .icon_delete:before { content: "\e718"; } .icon_edit:before { content: "\e61f"; } .icon_x2:before { content: "\e795"; } .icon_duihao:before { content: "\e6c6"; } .icon_yanjing:before { content: "\e648"; } .icon_xiaoxi:before { content: "\e66c"; } .icon_pingjia:before { content: "\e636"; } .icon_good:before { content: "\e62a"; } .icon_fenxiang1:before { content: "\e61b"; } .icon_xiaochengxu:before { content: "\e63e"; } .icon_home:before { content: "\e61a"; } .icon_jiantou14_down:before { content: "\e6cd"; } .icon_link:before { content: "\e618"; } .icon_weizhi2:before { content: "\e633"; } .icon_user2:before { content: "\e613"; } .icon_jianyi:before { content: "\e6cf"; } .icon_youxiang1:before { content: "\e66b"; } .icon_rili:before { content: "\e8cf"; } .icon_yueduliang:before { content: "\e6a0"; } .icon_linkedin2:before { content: "\ee48"; } .icon_user:before { content: "\e63c"; } .icon_sousuo2:before { content: "\e679"; } .icon_wangluo:before { content: "\e7b5"; } .icon_jiantou14_right:before { content: "\e611"; } .icon_mima:before { content: "\e60f"; } .icon_anquan:before { content: "\ec4d"; } .icon_shouji:before { content: "\e610"; } .icon_jiantou6_left:before { content: "\eb8c"; } .icon_jiantou13_right:before { content: "\e619"; } .icon_xiazai3:before { content: "\e794"; } .icon_instagram:before { content: "\e737"; } .icon_linkedin1:before { content: "\e6c1"; } .icon_guanbi:before { content: "\e623"; } .icon_bofang3:before { content: "\e63b"; } .icon_icon_jiantou12_right:before { content: "\e60e"; } .icon_shangjiantou:before { content: "\e60b"; } .icon_shangjiantou1:before { content: "\e60d"; } .icon_xiazai2:before { content: "\e617"; } .icon_weizhi:before { content: "\e78b"; } .icon_jiantou11_left:before { content: "\e76b"; } .icon_jiantou11_right:before { content: "\e8dc"; } .icon_dingwei:before { content: "\e8c4"; } .icon_douyin:before { content: "\e8db"; } .icon_yuanquanjiantou:before { content: "\e61e"; } .icon_stop:before { content: "\e650"; } .icon_bofang2:before { content: "\e87c"; } .icon_pengyouquan:before { content: "\e621"; } .icon_xiaohongshu:before { content: "\e609"; } .icon_dianhua1:before { content: "\e631"; } .icon_bofang1:before { content: "\e624"; } .icon_liuyan:before { content: "\e60a"; } .icon_shijian:before { content: "\e64d"; } .icon_dianhua:before { content: "\e616"; } .icon_youxiang:before { content: "\e608"; } .icon_xiazai1:before { content: "\e620"; } .icon_wendang1:before { content: "\e69c"; } .icon_address1:before { content: "\e67e"; } .icon_jiantou10_left:before { content: "\e768"; } .icon_jiantou10_right:before { content: "\e607"; } .icon_zuizuo3_left:before { content: "\e767"; } .icon_zuiyou3_right:before { content: "\e604"; } .icon_top1:before { content: "\e612"; } .icon_x:before { content: "\e688"; } .icon_jiantou9_left:before { content: "\e6e0"; } .icon_jiantou9_right:before { content: "\e766"; } .icon_jiantou8_left:before { content: "\e6a5"; } .icon_zuizuo2_right:before { content: "\e606"; } .icon_zuizuo2_left:before { content: "\e763"; } .icon_jiantou8_right:before { content: "\e764"; } .icon_zuizuo1_left:before { content: "\e70f"; } .icon_zuizuo1_right:before { content: "\e762"; } .icon_yanjing1:before { content: "\e605"; } .icon_position_small1:before { content: "\e603"; } .icon_qq:before { content: "\e760"; } .icon_jiantou7_right:before { content: "\e71a"; } .icon_jiantou7_left:before { content: "\e602"; } .icon_home1:before { content: "\e601"; } .icon_gouwu:before { content: "\e65c"; } .icon_yonghu:before { content: "\e719"; } .icon_sousuo1:before { content: "\e640"; } .icon_jiantou6_right:before { content: "\e628"; } .icon_jiantou5_left:before { content: "\e60c"; } .icon_jiantou5_right:before { content: "\e702"; } .icon_wechat:before { content: "\e701"; } .icon_weibo:before { content: "\e626"; } .icon_facebook:before { content: "\e653"; } .icon_twitter:before { content: "\e615"; } .icon_jiantou4_right:before { content: "\e6f3"; } .icon_jiantou4_left:before { content: "\e76a"; } .icon_jiantou3_up:before { content: "\e769"; } .icon_jiantou3_right:before { content: "\e651"; } .icon_jiantou3_left:before { content: "\e6ba"; } .icon_jiantou3_down:before { content: "\e761"; } .icon_jiantou2_left:before { content: "\e6b9"; } .icon_jiantou2_right:before { content: "\e614"; } .icon_zanting:before { content: "\e63a"; } .icon_bofang:before { content: "\e635"; } .icon_sousuo:before { content: "\e61d"; } .icon_yuyan:before { content: "\e600"; } .icon_jiantou1_right:before { content: "\e6b7"; } .icon_jiantou1_left:before { content: "\e6b8"; } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; cursor: pointer } html,body,h1,h2,h3,h4,h5,h6 { margin: 0px; padding: 0px; font-weight: 400 } p { margin: 0px; padding: 0px } body,button,input,select,textarea { font: 14px/1.5 'Arial', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif; color: #333 } img { border: 0px; vertical-align: middle; max-width: 100%; max-height: 100% } table { border-collapse: collapse; border-spacing: 0 } table th,table td { border: 1px solid #ccc } *,:after,:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-repeat: no-repeat } a { background-color: transparent; -webkit-text-decoration-skip: objects; text-decoration: none; color: #333; outline: none; cursor: pointer } a:hover { background-repeat: no-repeat; text-decoration: none } a,input[type="button"],button,label,input[type="submit"],input[type="reset"] { cursor: pointer } [type="checkbox"],[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 } input,textarea,select,button { border: none; outline: none; color: inherit; font-size: 14px; background: none; font-family: inherit; outline: none } input[type="text"],input[type="password"],input[type="button"],input[type="submit"],input[type="reset"],select,textarea { outline-style: none; -webkit-appearance: none; resize: none; border: none; border-radius: 0 } textarea { overflow: auto; vertical-align: top; resize: none } input:-webkit-autofill { -webkit-box-shadow: 0 0 0px rgba(255,255,255,0) inset !important; -webkit-appearance: none; background: none; outline: none; border: none } a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color: rgba(0,0,0,0) } input::-ms-clear { display: none } input::-ms-reveal { display: none } input:-internal-autofill-previewed,input:-internal-autofill-selected { -webkit-text-fill-color: #999 !important; -webkit-transition: background-color 99999999s ease-in-out 0s !important; -o-transition: background-color 99999999s ease-in-out 0s !important; transition: background-color 99999999s ease-in-out 0s !important } input,textarea { -webkit-appearance: none } .bd_weixin_popup,.content-box { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 } .clearfix { *zoom:1} :root ul,:root li { margin: 0px; padding: 0px; list-style: none } :root dd { list-style: none; margin: 0px; padding: 0px } :root dt { list-style: none; margin: 0px; padding: 0px } input,textarea,button { border: none; outline: none; color: inherit; font-size: 14px; background: none; font-family: inherit; outline: none } textarea { resize: none; overflow: auto } input { -webkit-appearance: none } input { background: none; outline: none; border: none } .iconfont { color: inherit; font-size: inherit; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .fl { float: left } .fr { float: right } .show { display: block !important } .hide { display: none !important } .commonweb { padding: 0px 10px } .commonwebbox { margin-left: 0px; margin-right: 0px } .commonleft { float: none } .commonright { float: none } .visible-sm,.visible-md,.visible-lg { display: none } .hidden-sm,.hidden-md,.hidden-lg { display: block } .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 { float: left; padding-left: 10px; padding-right: 10px } .col-xs-12 { width: 100% } .col-xs-11 { width: 91.66666667% } .col-xs-10 { width: 83.33333333% } .col-xs-9 { width: 75% } .col-xs-8 { width: 66.66666667% } .col-xs-7 { width: 58.33333333% } .col-xs-6 { width: 50% } .col-xs-5 { width: 41.66666667% } .col-xs-4 { width: 33.33333333% } .col-xs-3 { width: 25% } .col-xs-2 { width: 16.66666667% } .col-xs-1 { width: 8.33333333% } @media (max-width: 320px) { body { min-width:320px } } @media (min-width: 768px) { .commonweb { padding:0px 20px } .commonwebbox { margin-left: -10px; margin-right: -10px } .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 { float: left; padding-left: 10px; padding-right: 10px } .col-sm-12 { width: 100% } .col-sm-11 { width: 91.66666667% } .col-sm-10 { width: 83.33333333% } .col-sm-9 { width: 75% } .col-sm-8 { width: 66.66666667% } .col-sm-7 { width: 58.33333333% } .col-sm-6 { width: 50% } .col-sm-5 { width: 41.66666667% } .col-sm-4 { width: 33.33333333% } .col-sm-3 { width: 25% } .col-sm-2 { width: 16.66666667% } .col-sm-1 { width: 8.33333333% } .visible-sm { display: block } .hidden-sm { display: none } .commonweb { margin: 0px auto; max-width: 750px } } @media (min-width: 992px) { .commonweb { padding:0px 10px } .commonwebbox { margin-left: -10px; margin-right: -10px } .commonleft { float: left } .commonright { float: right } .visible-md { display: block } .hidden-md { display: none } .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 { float: left; padding-left: 10px; padding-right: 10px } .col-md-12 { width: 100% } .col-md-11 { width: 91.66666667% } .col-md-10 { width: 83.33333333% } .col-md-9 { width: 75% } .col-md-8 { width: 66.66666667% } .col-md-7 { width: 58.33333333% } .col-md-6 { width: 50% } .col-md-5 { width: 41.66666667% } .col-md-4 { width: 33.33333333% } .col-md-3 { width: 25% } .col-md-2 { width: 16.66666667% } .col-md-1 { width: 8.33333333% } .commonweb { max-width: 970px } } @media (min-width: 1260px) { html { cursor:default } .commonleft { float: left } .commonright { float: right } .visible-lg { display: block } .hidden-lg { display: none } .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 { float: left; padding-left: 10px; padding-right: 10px } .col-lg-12 { width: 100% } .col-lg-11 { width: 91.66666667% } .col-lg-10 { width: 83.33333333% } .col-lg-9 { width: 75% } .col-lg-8 { width: 66.66666667% } .col-lg-7 { width: 58.33333333% } .col-lg-6 { width: 50% } .col-lg-5 { width: 41.66666667% } .col-lg-4 { width: 33.33333333% } .col-lg-3 { width: 25% } .col-lg-2 { width: 16.66666667% } .col-lg-1 { width: 8.33333333% } } @media (min-width: 1260px) { .commonweb { max-width:1220px } } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; z-index: 1 } .swiper-container-no-flexbox .swiper-slide { float: left } .swiper-container-vertical>.swiper-wrapper { -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -o-transition-property: -o-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform, -o-transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box } .swiper-container-android .swiper-slide,.swiper-wrapper { -webkit-transform: translate3d(0, 0, 0); -o-transform: translate(0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .swiper-container-multirow>.swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; -webkit-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: 0 0 auto; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative } .swiper-container-autoheight,.swiper-container-autoheight .swiper-slide { height: auto } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-transition-property: -webkit-transform, height; -o-transition-property: -o-transform; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; -o-transition-property: height, -o-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform, -o-transform } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000 } .swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y } .swiper-wp8-vertical { -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; -webkit-background-size: 27px 44px; 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%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%27%20fill%3D%27%23007aff%27%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto } .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%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%27%20fill%3D%27%23000000%27%2F%3E%3C%2Fsvg%3E") } .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%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E") } .swiper-button-next,.swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z%27%20fill%3D%27%23007aff%27%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto } .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%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z%27%20fill%3D%27%23000000%27%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%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E") } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-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-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; -moz-appearance: none; -webkit-appearance: none; appearance: none } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer } .swiper-pagination-white .swiper-pagination-bullet { background: #fff } .swiper-pagination-bullet-active { opacity: 1; background: #007aff } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000 } .swiper-container-vertical>.swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0, -50%, 0); -o-transform: translate(0, -50%); -ms-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) } .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 5px 0; display: block } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px } .swiper-pagination-progress { background: rgba(0,0,0,0.25); position: absolute } .swiper-pagination-progress .swiper-pagination-progressbar { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top } .swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar { -webkit-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top } .swiper-container-horizontal>.swiper-pagination-progress { width: 100%; height: 4px; left: 0; top: 0 } .swiper-container-vertical>.swiper-pagination-progress { width: 4px; height: 100%; left: 0; top: 0 } .swiper-pagination-progress.swiper-pagination-white { background: rgba(255,255,255,0.5) } .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar { background: #fff } .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar { background: #000 } .swiper-container-3d { -webkit-perspective: 1200px; -o-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, left top, right top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image: -o-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image: -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); background-image: linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0)) } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0)) } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0)) } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image: -o-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0)); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)) } .swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper { -ms-perspective: 1200px } .swiper-container-cube,.swiper-container-flip { overflow: visible } .swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1 } .swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none } .swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto } .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,.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-cube .swiper-slide { visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100% } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0 } .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-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-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-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: 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-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0,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,0.5); border-radius: 10px; left: 0; top: 0 } .swiper-scrollbar-cursor-drag { 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%; -o-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; -o-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%270%200%20120%20120%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%3E%3Cdefs%3E%3Cline%20id%3D%27l%27%20x1%3D%2760%27%20x2%3D%2760%27%20y1%3D%277%27%20y2%3D%2727%27%20stroke%3D%27%236c6c6c%27%20stroke-width%3D%2711%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%2830%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%2860%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%2890%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%28120%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%28150%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.37%27%20transform%3D%27rotate%28180%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.46%27%20transform%3D%27rotate%28210%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.56%27%20transform%3D%27rotate%28240%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.66%27%20transform%3D%27rotate%28270%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.75%27%20transform%3D%27rotate%28300%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.85%27%20transform%3D%27rotate%28330%2060%2C60%29%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; -webkit-background-size: 100%; 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%270%200%20120%20120%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%3E%3Cdefs%3E%3Cline%20id%3D%27l%27%20x1%3D%2760%27%20x2%3D%2760%27%20y1%3D%277%27%20y2%3D%2727%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2711%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%2830%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%2860%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%2890%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%28120%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.27%27%20transform%3D%27rotate%28150%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.37%27%20transform%3D%27rotate%28180%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.46%27%20transform%3D%27rotate%28210%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.56%27%20transform%3D%27rotate%28240%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.66%27%20transform%3D%27rotate%28270%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.75%27%20transform%3D%27rotate%28300%2060%2C60%29%27%2F%3E%3Cuse%20xlink%3Ahref%3D%27%23l%27%20opacity%3D%27.85%27%20transform%3D%27rotate%28330%2060%2C60%29%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg) } } @-o-keyframes swiper-preloader-spin { 100% { -o-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) } } .animated { -webkit-animation-duration: 0.8s; -o-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite } .animated.hinge { -webkit-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s } .animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY { -webkit-animation-duration: .75s; -o-animation-duration: .75s; animation-duration: .75s } @-webkit-keyframes bounce { 0%,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0) } 40%,43% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } 40%,43%,70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06) } 70% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0) } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0) } } @-o-keyframes bounce { 0%,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0) } 40%,43% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } 40%,43%,70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06) } 70% { -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%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0) } 40%,43% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } 40%,43%,70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06) } 70% { -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; -o-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom } @-webkit-keyframes flash { 0%,50%,to { opacity: 1 } 25%,75% { opacity: 0 } } @-o-keyframes flash { 0%,50%,to { opacity: 1 } 25%,75% { opacity: 0 } } @keyframes flash { 0%,50%,to { opacity: 1 } 25%,75% { opacity: 0 } } .flash { -webkit-animation-name: flash; -o-animation-name: flash; animation-name: flash } @-webkit-keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @-o-keyframes pulse { 0% { -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } to { -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } } @keyframes pulse { 0% { -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } to { -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } } .pulse { -webkit-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(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(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1) } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @-o-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(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(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1) } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1) } to { -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(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(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1) } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1) } to { -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } } .rubberBand { -webkit-animation-name: rubberBand; -o-animation-name: rubberBand; animation-name: rubberBand } @-webkit-keyframes shake { 0%,to { -webkit-transform: translateZ(0); transform: translateZ(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) } } @-o-keyframes shake { 0%,to { -webkit-transform: translateZ(0); transform: translateZ(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%,to { -webkit-transform: translateZ(0); transform: translateZ(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; -o-animation-name: shake; animation-name: shake } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); transform: translateX(0) } } @-o-keyframes headShake { 0% { -webkit-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } } @keyframes headShake { 0% { -webkit-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } } .headShake { -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; -o-animation-name: headShake; animation-name: headShake } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @-o-keyframes swing { 20% { -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; -o-animation-name: swing; animation-name: swing } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @-o-keyframes tada { 0% { -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } } @keyframes tada { 0% { -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } } .tada { -webkit-animation-name: tada; -o-animation-name: tada; animation-name: tada } @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg) } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg) } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg) } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg) } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg) } to { -webkit-transform: none; transform: none } } @-o-keyframes wobble { 0% { -webkit-transform: none; -o-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg) } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg) } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg) } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg) } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg) } to { -webkit-transform: none; -o-transform: none; transform: none } } @keyframes wobble { 0% { -webkit-transform: none; -o-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg) } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg) } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg) } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg) } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg) } to { -webkit-transform: none; -o-transform: none; transform: none } } .wobble { -webkit-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble } @-webkit-keyframes jello { 0%,11.1%,to { -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.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg) } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg) } } @-o-keyframes jello { 0%,11.1%,to { -webkit-transform: none; -o-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -o-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -o-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -o-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -o-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -o-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg) } 77.7% { -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); -o-transform: skewX(0.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg) } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); -o-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg) } } @keyframes jello { 0%,11.1%,to { -webkit-transform: none; -o-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -o-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -o-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -o-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -o-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -o-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg) } 77.7% { -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); -o-transform: skewX(0.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg) } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); -o-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg) } } .jello { -webkit-animation-name: jello; -o-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; -ms-transform-origin: center; -o-transform-origin: center; transform-origin: center } @-webkit-keyframes bounceIn { 0%,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97) } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1) } } @-o-keyframes bounceIn { 0%,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97) } to { opacity: 1; -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } } @keyframes bounceIn { 0%,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97) } to { opacity: 1; -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } } .bounceIn { -webkit-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn } @-webkit-keyframes bounceInDown { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 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) } to { -webkit-transform: none; transform: none } } @-o-keyframes bounceInDown { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 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) } to { -webkit-transform: none; -o-transform: none; transform: none } } @keyframes bounceInDown { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 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) } to { -webkit-transform: none; -o-transform: none; transform: none } } .bounceInDown { -webkit-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 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) } to { -webkit-transform: none; transform: none } } @-o-keyframes bounceInLeft { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 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) } to { -webkit-transform: none; -o-transform: none; transform: none } } @keyframes bounceInLeft { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 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) } to { -webkit-transform: none; -o-transform: none; transform: none } } .bounceInLeft { -webkit-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 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) } to { -webkit-transform: none; transform: none } } @-o-keyframes bounceInRight { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 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) } to { -webkit-transform: none; -o-transform: none; transform: none } } @keyframes bounceInRight { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 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) } to { -webkit-transform: none; -o-transform: none; transform: none } } .bounceInRight { -webkit-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceInUp { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 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) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-o-keyframes bounceInUp { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 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) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInUp { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 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) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .bounceInUp { -webkit-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9) } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } } @-o-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9) } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9) } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } } .bounceOut { -webkit-animation-name: bounceOut; -o-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) } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } @-o-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) } to { 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) } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } .bounceOutDown { -webkit-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0) } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } @-o-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0) } to { 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) } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } @-o-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) } to { 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) } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } .bounceOutRight { -webkit-animation-name: bounceOutRight; -o-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) } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } @-o-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) } to { 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) } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } .bounceOutUp { -webkit-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp } @-webkit-keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @-o-keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } .fadeIn { -webkit-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-o-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } .fadeInDown { -webkit-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-o-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } .fadeInRight { -webkit-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-o-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } .fadeInUp { -webkit-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig } @-webkit-keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } @-o-keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } .fadeOut { -webkit-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut } @-webkit-keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } @-o-keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } @keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } .fadeOutDown { -webkit-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } @keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -o-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @-o-keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } @keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -o-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } @-webkit-keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @-o-keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } .fadeOutRight { -webkit-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } @keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -o-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } @-webkit-keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @-o-keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } .fadeOutUp { -webkit-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } @keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -o-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn) } 0%,40% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg) } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg) } 50%,80% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @-o-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn) } 0%,40% { -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg) } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg) } 50%,80% { -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn) } 0%,40% { -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg) } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg) } 50%,80% { -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; -o-animation-name: flip; animation-name: flip } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg) } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @-o-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } 0%,40% { -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg) } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } 0%,40% { -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg) } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; -o-animation-name: flipInX; animation-name: flipInX } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg) } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @-o-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } 0%,40% { -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg) } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } 0%,40% { -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg) } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; -o-animation-name: flipInY; animation-name: flipInY } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } @-o-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } .flipOutX { -webkit-animation-name: flipOutX; -o-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) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } @-o-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; -o-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) } 60%,80% { opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg) } to { -webkit-transform: none; transform: none; opacity: 1 } } @-o-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); -o-transform: skewX(20deg); transform: skewX(20deg) } 60%,80% { opacity: 1 } 80% { -webkit-transform: skewX(-5deg); -o-transform: skewX(-5deg); transform: skewX(-5deg) } to { -webkit-transform: none; -o-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); -o-transform: skewX(20deg); transform: skewX(20deg) } 60%,80% { opacity: 1 } 80% { -webkit-transform: skewX(-5deg); -o-transform: skewX(-5deg); transform: skewX(-5deg) } to { -webkit-transform: none; -o-transform: none; transform: none; opacity: 1 } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; -o-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1 } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0 } } @-o-keyframes lightSpeedOut { 0% { opacity: 1 } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0 } } @keyframes lightSpeedOut { 0% { opacity: 1 } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0 } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; -o-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } 0%,to { -webkit-transform-origin: center } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1 } } @-o-keyframes rotateIn { 0% { -o-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } 0%,to { -webkit-transform-origin: center } to { -o-transform-origin: center; transform-origin: center; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1 } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; -o-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } 0%,to { -webkit-transform-origin: center } to { -webkit-transform-origin: center; -o-transform-origin: center; transform-origin: center; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1 } } .rotateIn { -webkit-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } 0%,to { -webkit-transform-origin: left bottom } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @-o-keyframes rotateInDownLeft { 0% { -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } 0%,to { -webkit-transform-origin: left bottom } to { -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1 } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } 0%,to { -webkit-transform-origin: left bottom } to { -webkit-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1 } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -o-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } 0%,to { -webkit-transform-origin: right bottom } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @-o-keyframes rotateInDownRight { 0% { -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } 0%,to { -webkit-transform-origin: right bottom } to { -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1 } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } 0%,to { -webkit-transform-origin: right bottom } to { -webkit-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1 } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; -o-animation-name: rotateInDownRight; animation-name: rotateInDownRight } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } 0%,to { -webkit-transform-origin: left bottom } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @-o-keyframes rotateInUpLeft { 0% { -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } 0%,to { -webkit-transform-origin: left bottom } to { -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1 } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } 0%,to { -webkit-transform-origin: left bottom } to { -webkit-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1 } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; -o-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 0%,to { -webkit-transform-origin: right bottom } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @-o-keyframes rotateInUpRight { 0% { -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 0%,to { -webkit-transform-origin: right bottom } to { -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1 } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 0%,to { -webkit-transform-origin: right bottom } to { -webkit-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1 } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; -o-animation-name: rotateInUpRight; animation-name: rotateInUpRight } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } 0%,to { -webkit-transform-origin: center } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } @-o-keyframes rotateOut { 0% { -o-transform-origin: center; transform-origin: center; opacity: 1 } 0%,to { -webkit-transform-origin: center } to { -o-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; -o-transform-origin: center; transform-origin: center; opacity: 1 } 0%,to { -webkit-transform-origin: center } to { -webkit-transform-origin: center; -o-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } .rotateOut { -webkit-animation-name: rotateOut; -o-animation-name: rotateOut; animation-name: rotateOut } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 0%,to { -webkit-transform-origin: left bottom } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } } @-o-keyframes rotateOutDownLeft { 0% { -o-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 0%,to { -webkit-transform-origin: left bottom } to { -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 0%,to { -webkit-transform-origin: left bottom } to { -webkit-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; -o-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 0%,to { -webkit-transform-origin: right bottom } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @-o-keyframes rotateOutDownRight { 0% { -o-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 0%,to { -webkit-transform-origin: right bottom } to { -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 0%,to { -webkit-transform-origin: right bottom } to { -webkit-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; -o-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 0%,to { -webkit-transform-origin: left bottom } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @-o-keyframes rotateOutUpLeft { 0% { -o-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 0%,to { -webkit-transform-origin: left bottom } to { -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 0%,to { -webkit-transform-origin: left bottom } to { -webkit-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -o-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 0%,to { -webkit-transform-origin: right bottom } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } @-o-keyframes rotateOutUpRight { 0% { -o-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 0%,to { -webkit-transform-origin: right bottom } to { -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 0%,to { -webkit-transform-origin: right bottom } to { -webkit-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -o-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left } 0%,20%,60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%,60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left } 40%,80% { -webkit-transform: rotate(60deg); transform: rotate(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 } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0 } } @-o-keyframes hinge { 0% { -o-transform-origin: top left; transform-origin: top left } 0%,20%,60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%,60% { -webkit-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -o-transform-origin: top left; transform-origin: top left } 40%,80% { -webkit-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0 } } @keyframes hinge { 0% { -webkit-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left } 0%,20%,60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%,60% { -webkit-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left } 40%,80% { -webkit-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0 } } .hinge { -webkit-animation-name: hinge; -o-animation-name: hinge; animation-name: hinge } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg) } to { opacity: 1; -webkit-transform: none; transform: none } } @-o-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } .rollIn { -webkit-animation-name: rollIn; -o-animation-name: rollIn; animation-name: rollIn } @-webkit-keyframes rollOut { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg) } } @-o-keyframes rollOut { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg) } } @keyframes rollOut { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg) } } .rollOut { -webkit-animation-name: rollOut; -o-animation-name: rollOut; animation-name: rollOut } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 50% { opacity: 1 } } @-o-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 50% { opacity: 1 } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 50% { opacity: 1 } } .zoomIn { -webkit-animation-name: zoomIn; -o-animation-name: zoomIn; animation-name: zoomIn } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @-o-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInDown { -webkit-animation-name: zoomInDown; -o-animation-name: zoomInDown; animation-name: zoomInDown } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @-o-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInLeft { -webkit-animation-name: zoomInLeft; -o-animation-name: zoomInLeft; animation-name: zoomInLeft } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @-o-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInRight { -webkit-animation-name: zoomInRight; -o-animation-name: zoomInRight; animation-name: zoomInRight } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @-o-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInUp { -webkit-animation-name: zoomInUp; -o-animation-name: zoomInUp; animation-name: zoomInUp } @-webkit-keyframes zoomOut { 0% { opacity: 1 } 50% { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 50%,to { opacity: 0 } } @-o-keyframes zoomOut { 0% { opacity: 1 } 50% { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 50%,to { opacity: 0 } } @keyframes zoomOut { 0% { opacity: 1 } 50% { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 50%,to { opacity: 0 } } .zoomOut { -webkit-animation-name: zoomOut; -o-animation-name: zoomOut; animation-name: zoomOut } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.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.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @-o-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomOutDown { -webkit-animation-name: zoomOutDown; -o-animation-name: zoomOutDown; animation-name: zoomOutDown } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center } } @-o-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; -o-animation-name: zoomOutLeft; animation-name: zoomOutLeft } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center } } @-o-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center } } .zoomOutRight { -webkit-animation-name: zoomOutRight; -o-animation-name: zoomOutRight; animation-name: zoomOutRight } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.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.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @-o-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomOutUp { -webkit-animation-name: zoomOutUp; -o-animation-name: zoomOutUp; animation-name: zoomOutUp } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-o-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInDown { -webkit-animation-name: slideInDown; -o-animation-name: slideInDown; animation-name: slideInDown } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-o-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInLeft { -webkit-animation-name: slideInLeft; -o-animation-name: slideInLeft; animation-name: slideInLeft } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-o-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInRight { -webkit-animation-name: slideInRight; -o-animation-name: slideInRight; animation-name: slideInRight } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-o-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInUp { -webkit-animation-name: slideInUp; -o-animation-name: slideInUp; animation-name: slideInUp } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } @-o-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } @keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } .slideOutDown { -webkit-animation-name: slideOutDown; -o-animation-name: slideOutDown; animation-name: slideOutDown } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @-o-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } .slideOutLeft { -webkit-animation-name: slideOutLeft; -o-animation-name: slideOutLeft; animation-name: slideOutLeft } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @-o-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } .slideOutRight { -webkit-animation-name: slideOutRight; -o-animation-name: slideOutRight; animation-name: slideOutRight } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @-o-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } .slideOutUp { -webkit-animation-name: slideOutUp; -o-animation-name: slideOutUp; animation-name: slideOutUp } img.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top } .PopupVideoBox { position: fixed; z-index: 9999; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none } .PopupVideo { position: absolute; left: 50%; width: 100%; top: 50%; max-width: 920px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 0px 25px } .PopupVideo video { width: 100% } .PopupVideo iframe { width: 100%; height: 460px } .closeVideo { position: absolute; right: 25px; top: -25px; width: 22px; height: 22px; cursor: pointer; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg) } .closeVideo::after { content: ''; display: block; position: absolute; width: 2px; height: 100%; background: #fff; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%) } .closeVideo::before { content: ''; display: block; position: absolute; width: 100%; height: 2px; background: #fff; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%) } .commonTitleLocation { padding: 10px 0; border-bottom: 1px solid #ebebeb } .commonTitleLocation h3 { float: left; font-size: 16px; position: relative } .commonTitleLocation p { float: right } .commonTitleLocation p a { font-size: 12px; vertical-align: middle; display: inline-block; color: #999; margin-left: 10px; padding-left: 15px; position: relative } .commonTitleLocation p a::after { content: ''; position: absolute; left: 0px; top: 50%; width: 8px; height: 8px; border: 1px solid #999; border-left: none; border-top: none; -webkit-transform: rotate(-45deg) translateY(-50%); -ms-transform: rotate(-45deg) translateY(-50%); -o-transform: rotate(-45deg) translateY(-50%); transform: rotate(-45deg) translateY(-50%) } .commonTitleLocation p a:first-child { padding-left: 0px; margin: 0px; line-height: 11px } .commonTitleLocation p a:first-child::after { display: none } .commonTitleLocation p a.current { color: #333 } .commonTitleLocation p img { display: inline-block; vertical-align: middle } .commonLocation { padding: 10px 0; border-bottom: 1px solid #ebebeb } .commonLocation a { font-size: 12px; vertical-align: middle; display: inline-block; color: #999; margin-left: 10px; padding-left: 15px; position: relative } .commonLocation a::after { content: ''; position: absolute; left: 0px; top: 50%; width: 8px; height: 8px; border: 1px solid #999; border-left: none; border-top: none; -webkit-transform: rotate(-45deg) translateY(-50%); -ms-transform: rotate(-45deg) translateY(-50%); -o-transform: rotate(-45deg) translateY(-50%); transform: rotate(-45deg) translateY(-50%) } .commonLocation a:first-child { padding-left: 0px; margin: 0px; line-height: 11px } .commonLocation a:first-child::after { display: none } .commonLocation a.current { color: #333 } .commonLocation img { display: inline-block; vertical-align: middle } .select2-container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle } .select2-container .select2-selection--single { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; height: 28px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none } .select2-container .select2-selection--single .select2-selection__rendered { display: block; padding-left: 8px; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .select2-container .select2-selection--single .select2-selection__clear { position: relative } .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px } .select2-container .select2-selection--multiple { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none } .select2-container .select2-selection--multiple .select2-selection__rendered { display: inline-block; overflow: hidden; padding-left: 8px; text-overflow: ellipsis; white-space: nowrap } .select2-container .select2-search--inline { float: left } .select2-container .select2-search--inline .select2-search__field { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: none; font-size: 100%; margin-top: 5px; padding: 0 } .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none } .select2-dropdown { background-color: white; border: 1px solid #aaa; border-radius: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051 } .select2-results { display: block } .select2-results__options { list-style: none; margin: 0; padding: 0 } .select2-results__option { padding: 6px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none } .select2-results__option[aria-selected] { cursor: pointer } .select2-container--open .select2-dropdown { left: 0 } .select2-container--open .select2-dropdown--above { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .select2-container--open .select2-dropdown--below { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0 } .select2-search--dropdown { display: block; padding: 4px } .select2-search--dropdown .select2-search__field { padding: 4px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none } .select2-search--dropdown.select2-search--hide { display: none } .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 99; background-color: #fff; filter: alpha(opacity=0) } .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important } .select2-container--default .select2-selection--single { background-color: #fff; border: 1px solid #aaa; border-radius: 4px } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px } .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999 } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px; position: absolute; top: 1px; right: 1px; width: 20px } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0 } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow { left: 1px; right: auto } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #eee; cursor: default } .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { display: none } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px } .select2-container--default .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text } .select2-container--default .select2-selection--multiple .select2-selection__rendered { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; list-style: none; margin: 0; padding: 0 5px; width: 100% } .select2-container--default .select2-selection--multiple .select2-selection__rendered li { list-style: none } .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: #999; margin-top: 5px; float: left } .select2-container--default .select2-selection--multiple .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-top: 5px; margin-right: 10px } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #999; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #333 } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline { float: right } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto } .select2-container--default.select2-container--focus .select2-selection--multiple { border: solid black 1px; outline: 0 } .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #eee; cursor: default } .select2-container--default.select2-container--disabled .select2-selection__choice__remove { display: none } .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { border-top-left-radius: 0; border-top-right-radius: 0 } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa } .select2-container--default .select2-search--inline .select2-search__field { background: transparent; border: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: textfield } .select2-container--default .select2-results>.select2-results__options { max-height: 200px; overflow-y: auto } .select2-container--default .select2-results__option[role=group] { padding: 0 } .select2-container--default .select2-results__option[aria-disabled=true] { color: #999 } .select2-container--default .select2-results__option[aria-selected=true] { background-color: #ddd } .select2-container--default .select2-results__option .select2-results__option { padding-left: 1em } .select2-container--default .select2-results__option .select2-results__option .select2-results__group { padding-left: 0 } .select2-container--default .select2-results__option .select2-results__option .select2-results__option { margin-left: -1em; padding-left: 2em } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -2em; padding-left: 3em } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -3em; padding-left: 4em } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -4em; padding-left: 5em } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -5em; padding-left: 6em } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #5897fb; color: white } .select2-container--default .select2-results__group { cursor: default; display: block; padding: 6px } .select2-container--classic .select2-selection--single { background-color: #f7f7f7; border: 1px solid #aaa; border-radius: 4px; outline: 0; background-image: -webkit-linear-gradient(top, #fff 50%, #eee 100%); background-image: -o-linear-gradient(top, #fff 50%, #eee 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), to(#eee)); background-image: linear-gradient(to bottom, #fff 50%, #eee 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0) } .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb } .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px } .select2-container--classic .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-right: 10px } .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999 } .select2-container--classic .select2-selection--single .select2-selection__arrow { background-color: #ddd; border: none; border-left: 1px solid #aaa; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%); background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #eee), to(#ccc)); background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0) } .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0 } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { border: none; border-right: 1px solid #aaa; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; left: 1px; right: auto } .select2-container--classic.select2-container--open .select2-selection--single { border: 1px solid #5897fb } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { background: transparent; border: none } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; background-image: -webkit-linear-gradient(top, #fff 0%, #eee 50%); background-image: -o-linear-gradient(top, #fff 0%, #eee 50%); background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(50%, #eee)); background-image: linear-gradient(to bottom, #fff 0%, #eee 50%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0) } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-image: -webkit-linear-gradient(top, #eee 50%, #fff 100%); background-image: -o-linear-gradient(top, #eee 50%, #fff 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #eee), to(#fff)); background-image: linear-gradient(to bottom, #eee 50%, #fff 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0) } .select2-container--classic .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; outline: 0 } .select2-container--classic .select2-selection--multiple:focus { border: 1px solid #5897fb } .select2-container--classic .select2-selection--multiple .select2-selection__rendered { list-style: none; margin: 0; padding: 0 5px } .select2-container--classic .select2-selection--multiple .select2-selection__clear { display: none } .select2-container--classic .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { color: #888; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #555 } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { float: right } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto } .select2-container--classic.select2-container--open .select2-selection--multiple { border: 1px solid #5897fb } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0 } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .select2-container--classic .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: 0 } .select2-container--classic .select2-search--inline .select2-search__field { outline: 0; -webkit-box-shadow: none; box-shadow: none } .select2-container--classic .select2-dropdown { background-color: #fff; border: 1px solid transparent } .select2-container--classic .select2-dropdown--above { border-bottom: none } .select2-container--classic .select2-dropdown--below { border-top: none } .select2-container--classic .select2-results>.select2-results__options { max-height: 200px; overflow-y: auto } .select2-container--classic .select2-results__option[role=group] { padding: 0 } .select2-container--classic .select2-results__option[aria-disabled=true] { color: grey } .select2-container--classic .select2-results__option--highlighted[aria-selected] { background-color: #3875d7; color: #fff } .select2-container--classic .select2-results__group { cursor: default; display: block; padding: 6px } .select2-container--classic.select2-container--open .select2-dropdown { border-color: #5897fb } .DefaultSelector { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } .DefaultSelector>span { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1 } .DefaultSelector>span:nth-child(2) { margin-right: 10px } .DefaultSelector>span:nth-child(4) { margin-right: 10px } .DefaultSelector .select2-container--default .select2-selection--single { border-radius: 0px; height: 35px } .DefaultSelector .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 35px } .DefaultSelector .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0px } .defaSearchList { padding: 50px 0px } .defaSearchList dl { border-bottom: 1px solid #eee; padding-bottom: 10px } .defaSearchList dl dt { float: left; font-size: 16px } .defaSearchList dl dd { float: right; font-size: 14px } .defaSearchList li { padding: 10px 20px 15px; margin-top: 15px; border-bottom: 1px solid #eee; background: #f6f6f6 } .defaSearchList li h3 { font-size: 16px; color: #1a1a1a; line-height: 26px; padding-bottom: 5px } .defaSearchList li .defaDesc { font-size: 12px; color: #adadad; padding-top: 5px; line-height: 20px } .defaWebMap { background-color: #fff } .defaWebMap dl { border: 1px solid #e6e6e6; margin-top: 30px } .defaWebMap dl h3 { padding-left: 20px; padding-bottom: 5px } .defaWebMap dl h3 span { font-size: 20px; color: #2f318c; position: relative; top: -12px; background-color: #fff; padding: 0px 13px } .defaWebMap dl h3 span a { color: #2f318c } .defaWebMap dl dd { padding-left: 33px; padding-bottom: 15px } .defaWebMap dl dd a { font-size: 14px; padding-right: 20px; display: inline-block; padding-bottom: 8px } .defaWebMap dl dd a em { display: inline-block; margin-right: 8px; width: 3px; height: 3px; background-color: #2f318c; vertical-align: middle } .defaContent { font-size: 14px; line-height: 24px } .defaContent p { margin-bottom: 10px } .defaContent img { display: block; max-width: 100%; margin: 0px auto } .defaPrevNextpage { margin-top: 40px; border-top: 1px solid #3d3f48; border-bottom: 1px solid #3d3f48 } .defaPrevNextpage p { border-bottom: 1px solid #dddddd; position: relative; padding: 0px 90px 0px 90px; font-size: 14px; line-height: 50px; white-space: nowrap; height: 50px } .defaPrevNextpage p span { position: absolute; left: 0px; padding-left: 10px; top: 0px; display: block; width: 75px } .defaPrevNextpage p span:after { content: ''; border-left: 5px solid transparent; border-bottom: 5px solid #000000; border-right: 5px solid transparent; position: absolute; right: 0%; width: 0px; height: 0px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%) } .defaPrevNextpage p em { position: absolute; right: 0px; font-style: normal; top: 0px; padding-right: 0px; width: 80px; display: block } .defaPrevNextpage p a { display: block; text-overflow: ellipsis; overflow: hidden } .defaPrevNextpage p:nth-child(2) { border: none } .defaPrevNextpage p:nth-child(2) span:after { border-bottom: none; border-top: 5px solid #000000 } .background_img { -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center } .picture_container { position: relative; overflow: hidden; background: none } .picture_container img { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; -webkit-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear } [class*=animate_] { -webkit-animation-duration: 1.2s; -o-animation-duration: 1.2s; animation-duration: 1.2s; opacity: 0; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards } .bgcolor { background-color: #999 } .oneText { text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } .flex_column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .flex_wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .flex_row_center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .flex_row_start { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start } .flex_row_end { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end } .flex_row_justify { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .flex_column_center { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .flex_column_start { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } .flex_column_end { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end } .flex1 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1 } .flex_rank_1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } .flex_rank_2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2 } .picture_scale { position: relative; overflow: hidden } .picture_scale:hover img { -o-transform: translate3d(0, 0, 0) scale(1.1); -webkit-transform: translate3d(0, 0, 0) scale(1.1); transform: translate3d(0, 0, 0) scale(1.1) } .center1200 { width: 1200px; margin: 0 auto } .center1300 { width: 1300px; margin: 0 auto } .center1400 { width: 1400px; margin: 0 auto } .center1500 { width: 1500px; margin: 0 auto } .center1680 { width: 1680px; margin: 0 auto } .center1600 { width: 1600px; margin: 0 auto } @media (max-width: 1600px) { .center1600 { width:100%; padding: 0 15px } } @media (max-width: 1500px) { .center1500 { width:100%; padding: 0 15px } } @media (max-width: 1400px) { .center1400 { width:100%; padding: 0 15px } } @media (max-width: 1300px) { .center1300 { width:100%; padding: 0 15px } } @media (max-width: 1200px) { .center1200 { width:100%; padding: 0 15px } } @media (min-width: 768px) { .defaWebMap dl { margin-top:50px } .defaWebMap dl dd a { padding-right: 50px } } @media (min-width: 992px) { .commonTitleLocation { padding:20px 0 } .commonTitleLocation h3 { font-size: 24px } .commonTitleLocation p { padding-top: 5px } .commonTitleLocation p a { font-size: 14px } .commonLocation { padding: 20px 0 } .commonLocation a { font-size: 14px } .defaSearchList li { padding: 15px 35px 25px; margin-top: 25px } .defaSearchList li h3 { font-size: 20px; line-height: 36px; padding-bottom: 5px } .defaSearchList li .defaDesc { font-size: 13px; padding-top: 10px; line-height: 24px } .defaPrevNextpage p span { position: absolute; left: 0px; padding-left: 40px; top: 0px; display: block; width: 15% } .defaPrevNextpage p span:after { content: ''; border-left: 5px solid transparent; border-bottom: 5px solid #000000; border-right: 5px solid transparent; position: absolute; right: 0%; width: 0px; height: 0px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%) } .defaPrevNextpage p em { position: absolute; right: 0px; font-style: normal; top: 0px; padding-right: 30px; width: 120px; display: block } .defaPrevNextpage p { border-bottom: 1px solid #dddddd; position: relative; padding: 0px 130px 0px 20%; font-size: 18px; line-height: 70px; white-space: nowrap; height: 70px } } @-webkit-keyframes fadeInLeft200 { from { opacity: 0; -webkit-transform: translate3d(-200px, 0, 0); transform: translate3d(-200px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInLeft200 { from { opacity: 0; -webkit-transform: translate3d(-200px, 0, 0); transform: translate3d(-200px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInLeft200 { from { opacity: 0; -webkit-transform: translate3d(-200px, 0, 0); transform: translate3d(-200px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInLeft200 { -webkit-animation-name: fadeInLeft200; -o-animation-name: fadeInLeft200; animation-name: fadeInLeft200 } @-webkit-keyframes fadeInLeft150 { from { opacity: 0; -webkit-transform: translate3d(-150px, 0, 0); transform: translate3d(-150px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInLeft150 { from { opacity: 0; -webkit-transform: translate3d(-150px, 0, 0); transform: translate3d(-150px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInLeft150 { from { opacity: 0; -webkit-transform: translate3d(-150px, 0, 0); transform: translate3d(-150px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInLeft150 { -webkit-animation-name: fadeInLeft150; -o-animation-name: fadeInLeft150; animation-name: fadeInLeft150 } @-webkit-keyframes fadeInLeft100 { from { opacity: 0; -webkit-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInLeft100 { from { opacity: 0; -webkit-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInLeft100 { from { opacity: 0; -webkit-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInLeft100 { -webkit-animation-name: fadeInLeft100; -o-animation-name: fadeInLeft100; animation-name: fadeInLeft100 } @-webkit-keyframes fadeInLeft80 { from { opacity: 0; -webkit-transform: translate3d(-80px, 0, 0); transform: translate3d(-80px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInLeft80 { from { opacity: 0; -webkit-transform: translate3d(-80px, 0, 0); transform: translate3d(-80px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInLeft80 { from { opacity: 0; -webkit-transform: translate3d(-80px, 0, 0); transform: translate3d(-80px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInLeft80 { -webkit-animation-name: fadeInLeft80; -o-animation-name: fadeInLeft80; animation-name: fadeInLeft80 } @-webkit-keyframes fadeInLeft50 { from { opacity: 0; -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInLeft50 { from { opacity: 0; -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInLeft50 { from { opacity: 0; -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInLeft50 { -webkit-animation-name: fadeInLeft50; -o-animation-name: fadeInLeft50; animation-name: fadeInLeft50 } @-webkit-keyframes fadeInLeft30 { from { opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInLeft30 { from { opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInLeft30 { from { opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInLeft30 { -webkit-animation-name: fadeInLeft30; -o-animation-name: fadeInLeft30; animation-name: fadeInLeft30 } @-webkit-keyframes fadeInLeft20 { from { opacity: 0; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInLeft20 { from { opacity: 0; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInLeft20 { from { opacity: 0; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInLeft20 { -webkit-animation-name: fadeInLeft20; -o-animation-name: fadeInLeft20; animation-name: fadeInLeft20 } @-webkit-keyframes fadeInLeft10 { from { opacity: 0; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInLeft10 { from { opacity: 0; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInLeft10 { from { opacity: 0; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInLeft10 { -webkit-animation-name: fadeInLeft10; -o-animation-name: fadeInLeft10; animation-name: fadeInLeft10 } @-webkit-keyframes fadeInRight200 { from { opacity: 0; -webkit-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInRight200 { from { opacity: 0; -webkit-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInRight200 { from { opacity: 0; -webkit-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInRight200 { -webkit-animation-name: fadeInRight200; -o-animation-name: fadeInRight200; animation-name: fadeInRight200 } @-webkit-keyframes fadeInRight150 { from { opacity: 0; -webkit-transform: translate3d(150px, 0, 0); transform: translate3d(150px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInRight150 { from { opacity: 0; -webkit-transform: translate3d(150px, 0, 0); transform: translate3d(150px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInRight150 { from { opacity: 0; -webkit-transform: translate3d(150px, 0, 0); transform: translate3d(150px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInRight150 { -webkit-animation-name: fadeInRight150; -o-animation-name: fadeInRight150; animation-name: fadeInRight150 } @-webkit-keyframes fadeInRight100 { from { opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInRight100 { from { opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInRight100 { from { opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInRight100 { -webkit-animation-name: fadeInRight100; -o-animation-name: fadeInRight100; animation-name: fadeInRight100 } @-webkit-keyframes fadeInRight80 { from { opacity: 0; -webkit-transform: translate3d(80px, 0, 0); transform: translate3d(80px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInRight80 { from { opacity: 0; -webkit-transform: translate3d(80px, 0, 0); transform: translate3d(80px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInRight80 { from { opacity: 0; -webkit-transform: translate3d(80px, 0, 0); transform: translate3d(80px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInRight80 { -webkit-animation-name: fadeInRight80; -o-animation-name: fadeInRight80; animation-name: fadeInRight80 } @-webkit-keyframes fadeInRight50 { from { opacity: 0; -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInRight50 { from { opacity: 0; -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInRight50 { from { opacity: 0; -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInRight50 { -webkit-animation-name: fadeInRight50; -o-animation-name: fadeInRight50; animation-name: fadeInRight50 } @-webkit-keyframes fadeInRight30 { from { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInRight30 { from { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInRight30 { from { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInRight30 { -webkit-animation-name: fadeInRight30; -o-animation-name: fadeInRight30; animation-name: fadeInRight30 } @-webkit-keyframes fadeInRight20 { from { opacity: 0; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInRight20 { from { opacity: 0; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInRight20 { from { opacity: 0; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInRight20 { -webkit-animation-name: fadeInRight20; -o-animation-name: fadeInRight20; animation-name: fadeInRight20 } @-webkit-keyframes fadeInRight10 { from { opacity: 0; -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInRight10 { from { opacity: 0; -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInRight10 { from { opacity: 0; -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInRight10 { -webkit-animation-name: fadeInRight10; -o-animation-name: fadeInRight10; animation-name: fadeInRight10 } @-webkit-keyframes fadeInUp200 { from { opacity: 0; -webkit-transform: translate3d(0, 200px, 0); transform: translate3d(0, 200px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInUp200 { from { opacity: 0; -webkit-transform: translate3d(0, 200px, 0); transform: translate3d(0, 200px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInUp200 { from { opacity: 0; -webkit-transform: translate3d(0, 200px, 0); transform: translate3d(0, 200px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInUp200 { -webkit-animation-name: fadeInUp200; -o-animation-name: fadeInUp200; animation-name: fadeInUp200 } @-webkit-keyframes fadeInUp150 { from { opacity: 0; -webkit-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInUp150 { from { opacity: 0; -webkit-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInUp150 { from { opacity: 0; -webkit-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInUp150 { -webkit-animation-name: fadeInUp150; -o-animation-name: fadeInUp150; animation-name: fadeInUp150 } @-webkit-keyframes fadeInUp100 { from { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInUp100 { from { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInUp100 { from { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInUp100 { -webkit-animation-name: fadeInUp100; -o-animation-name: fadeInUp100; animation-name: fadeInUp100 } @-webkit-keyframes fadeInUp80 { from { opacity: 0; -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInUp80 { from { opacity: 0; -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInUp80 { from { opacity: 0; -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInUp80 { -webkit-animation-name: fadeInUp80; -o-animation-name: fadeInUp80; animation-name: fadeInUp80 } @-webkit-keyframes fadeInUp50 { from { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInUp50 { from { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInUp50 { from { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInUp50 { -webkit-animation-name: fadeInUp50; -o-animation-name: fadeInUp50; animation-name: fadeInUp50 } @-webkit-keyframes fadeInUp30 { from { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInUp30 { from { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInUp30 { from { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInUp30 { -webkit-animation-name: fadeInUp30; -o-animation-name: fadeInUp30; animation-name: fadeInUp30 } @-webkit-keyframes fadeInUp20 { from { opacity: 0; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInUp20 { from { opacity: 0; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInUp20 { from { opacity: 0; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInUp20 { -webkit-animation-name: fadeInUp20; -o-animation-name: fadeInUp20; animation-name: fadeInUp20 } @-webkit-keyframes fadeInUp10 { from { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInUp10 { from { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInUp10 { from { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInUp10 { -webkit-animation-name: fadeInUp10; -o-animation-name: fadeInUp10; animation-name: fadeInUp10 } @-webkit-keyframes fadeInDown200 { from { opacity: 0; -webkit-transform: translate3d(0, -200px, 0); transform: translate3d(0, -200px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInDown200 { from { opacity: 0; -webkit-transform: translate3d(0, -200px, 0); transform: translate3d(0, -200px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInDown200 { from { opacity: 0; -webkit-transform: translate3d(0, -200px, 0); transform: translate3d(0, -200px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInDown200 { -webkit-animation-name: fadeInDown200; -o-animation-name: fadeInDown200; animation-name: fadeInDown200 } @-webkit-keyframes fadeInDown150 { from { opacity: 0; -webkit-transform: translate3d(0, -150px, 0); transform: translate3d(0, -150px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInDown150 { from { opacity: 0; -webkit-transform: translate3d(0, -150px, 0); transform: translate3d(0, -150px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInDown150 { from { opacity: 0; -webkit-transform: translate3d(0, -150px, 0); transform: translate3d(0, -150px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInDown150 { -webkit-animation-name: fadeInDown150; -o-animation-name: fadeInDown150; animation-name: fadeInDown150 } @-webkit-keyframes fadeInDown100 { from { opacity: 0; -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInDown100 { from { opacity: 0; -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInDown100 { from { opacity: 0; -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInDown100 { -webkit-animation-name: fadeInDown100; -o-animation-name: fadeInDown100; animation-name: fadeInDown100 } @-webkit-keyframes fadeInDown80 { from { opacity: 0; -webkit-transform: translate3d(0, -80px, 0); transform: translate3d(0, -80px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInDown80 { from { opacity: 0; -webkit-transform: translate3d(0, -80px, 0); transform: translate3d(0, -80px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInDown80 { from { opacity: 0; -webkit-transform: translate3d(0, -80px, 0); transform: translate3d(0, -80px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInDown80 { -webkit-animation-name: fadeInDown80; -o-animation-name: fadeInDown80; animation-name: fadeInDown80 } @-webkit-keyframes fadeInDown50 { from { opacity: 0; -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInDown50 { from { opacity: 0; -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInDown50 { from { opacity: 0; -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInDown50 { -webkit-animation-name: fadeInDown50; -o-animation-name: fadeInDown50; animation-name: fadeInDown50 } @-webkit-keyframes fadeInDown30 { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInDown30 { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInDown30 { from { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInDown30 { -webkit-animation-name: fadeInDown30; -o-animation-name: fadeInDown30; animation-name: fadeInDown30 } @-webkit-keyframes fadeInDown20 { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInDown20 { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInDown20 { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInDown20 { -webkit-animation-name: fadeInDown20; -o-animation-name: fadeInDown20; animation-name: fadeInDown20 } @-webkit-keyframes fadeInDown10 { from { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-o-keyframes fadeInDown10 { from { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInDown10 { from { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInDown10 { -webkit-animation-name: fadeInDown10; -o-animation-name: fadeInDown10; animation-name: fadeInDown10 } @-webkit-keyframes fadeInWidth100 { from { width: 0; opacity: 1 } to { width: 100%; opacity: 1 } } @-o-keyframes fadeInWidth100 { from { width: 0; opacity: 1 } to { width: 100%; opacity: 1 } } @keyframes fadeInWidth100 { from { width: 0; opacity: 1 } to { width: 100%; opacity: 1 } } .fadeInWidth100 { -webkit-animation-name: fadeInWidth100; -o-animation-name: fadeInWidth100; animation-name: fadeInWidth100 } @-webkit-keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } .fadeIn { -webkit-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn } .head_mobile_btn { width: 17px; height: 37px; cursor: pointer; padding: 12px 0 } .head_mobile_btn .btn1 { height: 100% } .head_mobile_btn .btn1 .line { height: 2px; width: 100%; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; background-color: rgba(162,203,196,0.58) } .head_mobile_btn.active .btn1 .line:nth-child(1) { -webkit-transform: translateY(6px) rotate(45deg); -ms-transform: translateY(6px) rotate(45deg); -o-transform: translateY(6px) rotate(45deg); transform: translateY(6px) rotate(45deg) } .head_mobile_btn.active .btn1 .line:nth-child(2) { opacity: 0 } .head_mobile_btn.active .btn1 .line:nth-child(3) { -webkit-transform: translateY(-5px) rotate(-45deg); -ms-transform: translateY(-5px) rotate(-45deg); -o-transform: translateY(-5px) rotate(-45deg); transform: translateY(-5px) rotate(-45deg) } .head_dropdown { border-top: 1px solid #eeeeee; display: none; z-index: 99; position: fixed; top: 75px; bottom: 0; left: 0; right: 0; margin: auto; overflow: hidden } .head_dropdown .head_dropdown1 { display: none } .head_dropdown .head_dropdown1 .pc_down { width: 100%; height: 100%; background-color: #fff } .head_dropdown .head_dropdown1 .pc_down .swiper-container { height: 100% } .head_dropdown .head_dropdown1 .pc_down .swiper-container .swiper-slide:nth-child(1) .block { -o-animation-delay: 0s; -webkit-animation-delay: 0s; animation-delay: 0s } .head_dropdown .head_dropdown1 .pc_down .swiper-container .swiper-slide:nth-child(2) .block { -o-animation-delay: .1s; -webkit-animation-delay: .1s; animation-delay: .1s } .head_dropdown .head_dropdown1 .pc_down .swiper-container .swiper-slide:nth-child(3) .block { -o-animation-delay: .2s; -webkit-animation-delay: .2s; animation-delay: .2s } .head_dropdown .head_dropdown1 .pc_down .swiper-container .swiper-slide:nth-child(4) .block { -o-animation-delay: .3s; -webkit-animation-delay: .3s; animation-delay: .3s } .head_dropdown .head_dropdown1 .pc_down .swiper-container .swiper-slide:nth-child(5) .block { -o-animation-delay: .4s; -webkit-animation-delay: .4s; animation-delay: .4s } .head_dropdown .head_dropdown1 .pc_down .swiper-container .swiper-slide:nth-child(6) .block { -o-animation-delay: .5s; -webkit-animation-delay: .5s; animation-delay: .5s } .head_dropdown .head_dropdown1 .pc_down .swiper-container .block_box { padding-top: 50%; background-color: #fff; height: 100%; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s } .head_dropdown .head_dropdown1 .pc_down .swiper-container .block_box:hover { background-color: transparent } .head_dropdown .head_dropdown1 .pc_down .swiper-container .block_box:hover .block { top: -30px; color: #fff } .head_dropdown .head_dropdown1 .pc_down .swiper-container .block { position: relative; top: 0; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; text-align: center } .head_dropdown .head_dropdown1 .pc_down .swiper-container .block .icon { margin: 0 auto; margin-bottom: 20px; width: 1px; height: 50px; background-color: #2f318c } .head_dropdown .head_dropdown1 .pc_down .swiper-container .block .number { font-size: 46px; margin-bottom: 30px } .head_dropdown .head_dropdown1 .pc_down .swiper-container .block .title { font-size: 22px } .head_dropdown .head_dropdown1 .pc_down .swiper-container .block .title:hover { color: #2f318c; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s } .head_dropdown .head_dropdown1 .pc_down .swiper-container .block .second_nav { font-size: 16px; margin-top: 30px; line-height: 36px } .head_dropdown .head_dropdown1 .pc_down .swiper-container .block .second_nav .line { display: block } .head_dropdown .head_dropdown1 .pc_down .swiper-container .block .second_nav .line:hover { color: #2f318c; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s } .head_dropdown .head_dropdown1 .mobile_down { width: 100%; height: 100%; background-color: #fff; overflow-y: auto; display: none } .head_dropdown .head_dropdown1 .mobile_down .mobile_search { width: 96%; margin-bottom: 10px; border-radius: 35px; border: 1px solid #999999; padding: 0 15px } .head_dropdown .head_dropdown1 .mobile_down .mobile_search input { line-height: 46px; padding: 0 5px; color: #999999 } .head_dropdown .head_dropdown1 .mobile_down .mobile_search .iconfont { color: #999999; font-size: 26px; cursor: pointer } .head_dropdown .head_dropdown1 .mobile_down .block { color: #333333; border-bottom: 1px solid #f4f4f4 } .head_dropdown .head_dropdown1 .mobile_down .block .title_box { line-height: 32px; font-size: 16px; padding-left: 15px } .head_dropdown .head_dropdown1 .mobile_down .block .title_box .iconfont { font-size: 14px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s } .head_dropdown .head_dropdown1 .mobile_down .block .title_box .icon { width: 100px; text-align: right; padding-right: 15px } .head_dropdown .head_dropdown1 .mobile_down .block .mobile_nav_down { background-color: #fafafa; display: none; padding: 10px 15px } .head_dropdown .head_dropdown1 .mobile_down .block .mobile_nav_down .line { line-height: 24px; display: block } .head_dropdown .head_dropdown1 .mobile_down .block .mobile_nav_down .line:hover { color: #2f318c } .head_dropdown .head_dropdown1 .mobile_down .block.active .title,.head_dropdown .head_dropdown1 .mobile_down .block:hover .title { color: #2f318c } .head_dropdown .head_dropdown1 .mobile_down .block.active .title_box .iconfont { -webkit-transform: rotateZ(90deg); -ms-transform: rotate(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg) } .head_dropdown .head_dropdown2 .pc_down { position: relative } .head_dropdown .head_dropdown2 .pc_down .back_color { position: absolute; right: 0; top: 0; border-radius: 50%; width: 0; height: 0; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; background-color: #0d7c0d } .head_dropdown .head_dropdown2 .pc_down.bg_on .back_color { width: 200vw; height: 200vw; right: -50vw; top: -50vw } .head_dropdown .head_dropdown2 .mobile_down { width: 100%; height: 100%; background-color: #fff; overflow-y: auto; display: none } .head_dropdown .head_dropdown2 .mobile_down .mobile_search { width: 96%; margin-bottom: 10px; border-radius: 35px; border: 1px solid #999999; padding: 0 15px } .head_dropdown .head_dropdown2 .mobile_down .mobile_search input { line-height: 46px; padding: 0 5px; color: #999999 } .head_dropdown .head_dropdown2 .mobile_down .mobile_search .iconfont { color: #999999; font-size: 26px; cursor: pointer } .head_dropdown .head_dropdown2 .mobile_down .block { color: #333333; border-bottom: 1px solid #f4f4f4 } .head_dropdown .head_dropdown2 .mobile_down .block .title_box { line-height: 32px; font-size: 16px; padding-left: 15px } .head_dropdown .head_dropdown2 .mobile_down .block .title_box .iconfont { font-size: 14px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s } .head_dropdown .head_dropdown2 .mobile_down .block .title_box .icon { width: 100px; text-align: right; padding-right: 15px } .head_dropdown .head_dropdown2 .mobile_down .block .mobile_nav_down { background-color: #fafafa; display: none; padding: 10px 15px } .head_dropdown .head_dropdown2 .mobile_down .block .mobile_nav_down .line { line-height: 24px; display: block } .head_dropdown .head_dropdown2 .mobile_down .block .mobile_nav_down .line:hover { color: #2f318c } .head_dropdown .head_dropdown2 .mobile_down .block.active .title,.head_dropdown .head_dropdown2 .mobile_down .block:hover .title { color: #2f318c } .head_dropdown .head_dropdown2 .mobile_down .block.active .title_box .iconfont { -webkit-transform: rotateZ(90deg); -ms-transform: rotate(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg) } @media (max-width: 768px) { .pc_down { display:none } .mobile_down { display: block } } .social-share { font-size: inherit; font-style: inherit; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale } .social-share .social-share-icon { position: relative; display: block; font-size: 27px; line-height: 27px; color: #b3b3b3; text-align: center; top: 10px; opacity: 0; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s } .social-share .social-share-icon:not(:first-child) { margin-top: 15px } .social-share .social-share-icon:nth-child(2) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s } .social-share .social-share-icon:nth-child(3) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s } .social-share .icon-weibo { color: #b3b3b3 } .social-share .icon-weibo:hover { color: #ff763b } .social-share .icon-tencent { color: #56b6e7; border-color: #56b6e7 } .social-share .icon-tencent:hover { background: #56b6e7 } .social-share .icon-qq { color: #b3b3b3 } .social-share .icon-qq:hover { color: #56b6e7 } .social-share .icon-qzone { color: #FDBE3D; border-color: #FDBE3D } .social-share .icon-qzone:hover { background: #FDBE3D } .social-share .icon-douban { color: #33b045; border-color: #33b045 } .social-share .icon-douban:hover { background: #33b045 } .social-share .icon-linkedin { color: #0077B5; border-color: #0077B5 } .social-share .icon-linkedin:hover { background: #0077B5 } .social-share .icon-facebook { color: #44619D; border-color: #44619D } .social-share .icon-facebook:hover { background: #44619D } .social-share .icon-google { color: #db4437; border-color: #db4437 } .social-share .icon-google:hover { background: #db4437 } .social-share .icon-twitter { color: #55acee; border-color: #55acee } .social-share .icon-twitter:hover { background: #55acee } .social-share .icon-diandian { color: #307DCA; border-color: #307DCA } .social-share .icon-diandian:hover { background: #307DCA } .social-share .icon-wechat { position: unset; color: #b3b3b3 } .social-share .icon-wechat:hover { color: #7bc549 } .social-share a { position: relative; text-decoration: none; outline: none } .social-share .icon-wechat .wechat-qrcode { display: none; border: 1px solid #eee; position: fixed; z-index: 20; top: 50%; left: 50%; width: 250px; color: #666; font-size: 12px; text-align: center; background-color: #fff; -webkit-box-shadow: 0 2px 10px #aaa; box-shadow: 0 2px 10px #aaa; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .social-share .icon-wechat .wechat-qrcode.bottom { top: 40px; left: -84px } .social-share .icon-wechat .wechat-qrcode.bottom:after { display: none } .social-share .icon-wechat .wechat-qrcode h4 { font-weight: normal; height: 26px; line-height: 26px; font-size: 12px; background-color: #f3f3f3; margin: 0; padding: 0; color: #777 } .social-share .icon-wechat .wechat-qrcode .qrcode { width: 200px; margin: 20px auto; text-align: center } .social-share .icon-wechat .wechat-qrcode .qrcode img { width: 150px; height: 150px; margin: 0 auto } .social-share .icon-wechat .wechat-qrcode .qrcode table { margin: 0 !important } .social-share .icon-wechat .wechat-qrcode .help p { font-weight: normal; line-height: 16px; padding: 0; margin: 0 } .social-share .icon-wechat:hover .wechat-qrcode { display: block } .inner_crumbs { position: relative } .inner_crumbs .item { position: relative; line-height: 1.1; font-size: 14px; margin-bottom: 50px } .inner_crumbs .item a { z-index: 10; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; font-weight: lighter; -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; position: relative; color: #ffffff; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s } .inner_crumbs .item .iconfont { color: #fff; font-size: 12px } .inner_crumbs .icon-triangle-right { display: block; width: 0; height: 0; border: 5px solid; border-color: transparent transparent transparent #fff; margin: 0 10px } .inner_crumbs.fixed { position: fixed; top: 170px; width: 100%; left: 0; right: 0; margin: auto; z-index: 100; -webkit-box-shadow: 0,15px,15px rgba(0,0,0,0.018); box-shadow: 0,15px,15px rgba(0,0,0,0.018) } .crumbs { position: relative; border-bottom: 1px solid #dcdcdc } .crumbs .monu { position: relative } .crumbs .monu .line { color: #323232; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s } .crumbs .monu .line:not(:last-child) { padding-right: 20px } .crumbs .monu .line:not(:first-child) { padding-left: 20px } .crumbs .monu .line.active,.crumbs .monu .line:hover { color: #2f318c } .crumbs .monu .line.active a::after,.crumbs .monu .line:hover a::after { width: 100%; left: 0 } .crumbs .monu a { position: relative; line-height: 64px; font-size: 14px; text-align: center; display: block; color: inherit; font-weight: bold } .crumbs .monu a::after { content: ' '; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background-color: #2f318c; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s } .crumbs .monu .line_icon { position: absolute; bottom: 0; left: 0; height: 3px; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; background-color: #ffffff } .crumbs .item { position: relative; line-height: 74px; font-size: 14px } .crumbs .item a { z-index: 10; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; font-weight: bold; -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; position: relative; color: #ffffff; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s } .crumbs .item .iconfont { color: #fff; font-size: 12px } .crumbs .icon-triangle-right { display: block; width: 0; height: 0; border: 5px solid; border-color: transparent transparent transparent #fff; margin: 0 10px } .crumbs.fixed { position: fixed; top: 170px; width: 100%; left: 0; right: 0; margin: auto; z-index: 100; -webkit-box-shadow: 0,15px,15px rgba(0,0,0,0.018); box-shadow: 0,15px,15px rgba(0,0,0,0.018) } .layui-box { margin-top: 95px; text-align: center; 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 } .layui-box em { font-style: normal } .layui-box a,.layui-box .layui-laypage-curr { width: 48px; height: 48px; display: block; line-height: 48px; text-align: center; font-size: 13px; color: #353535; margin: 0 8px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; font-weight: bold; background-color: #ffffff; border-radius: 8px; border: 1px solid transparent } .layui-box a:hover,.layui-box .layui-laypage-curr:hover { color: #fff; background-color: #2f318c; border: solid 1px #2f318c } .layui-box .layui-laypage-curr { font-size: 17px } .layui-box .layui-laypage-curr { color: #fff; border: solid 1px #2f318c; background-color: #2f318c } .layui-box .layui-laypage-prev,.layui-box .layui-laypage-next,.layui-box .layui-laypage-last,.layui-box .layui-laypage-first { line-height: 48px; margin: 0 10px } .layui-box .layui-laypage-next { margin-left: 8px } .layui-box .layui-laypage-prev { margin-right: 8px } .switch .line { padding: 30px 40px; font-size: 18px; font-family: 'MicrosoftYaHei'; color: #333333; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s } .switch .line .tag { padding-right: 35px; position: relative } .switch .line .tag::after { content: ' '; position: absolute; right: 0; width: 0; height: 0; border: 5px solid; -o-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s } .switch .line.prev { border-top: 1px solid #141d29; border-bottom: 1px solid #dddddd } .switch .line.prev .tag::after { top: -webkit-calc(50% - 2px); top: calc(50% - 2px); border-color: transparent transparent #333333 transparent } .switch .line.next { border-bottom: 1px solid #141d29 } .switch .line.next .tag::after { top: -webkit-calc(50% + 2px); top: calc(50% + 2px); border-color: #333333 transparent transparent transparent } .switch .line .name { width: 72.72727%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .switch .line .time { color: #333333 } .switch .line:hover { color: #2f318c } .switch .line:hover .time { color: #2f318c } .switch .line:hover.prev .tag::after { border-color: transparent transparent #2f318c transparent } .switch .line:hover.next .tag::after { border-color: #2f318c transparent transparent transparent } .search .main1 { padding: 80px 0 } .search .main1 .search_title { text-align: center; font-size: 32px; font-weight: bold } .search .main1 .search_box { width: 60%; margin: 30px auto 30px; border: 1px solid #2f318c; border-radius: 25px; overflow: hidden } .search .main1 .search_box input { padding: 0 20px; line-height: 48px } .search .main1 .search_box .btn { background-color: #2f318c; width: 80px; cursor: pointer; font-size: 28px; color: #fff } .search .main1 .content { border-top: 1px solid #dddddd } .search .main1 .content .length { padding: 10px 0 } .search .main1 .content .block_box .block { padding: 20px 0 } .search .main1 .content .block_box .block:not(:first-child) { border-top: 1px solid #dddddd } .search .main1 .content .block_box .block .img { width: 23.33333% } .search .main1 .content .block_box .block .img .picture_container { padding-top: 60.71429% } .search .main1 .content .block_box .block .txt { width: 70%; padding-left: 20px } .search .main1 .content .block_box .block .txt .name { font-size: 20px; margin-bottom: 10px; font-weight: bold; max-height: 48px; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s } .search .main1 .content .block_box .block .txt .abstract { overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 26px } .search .main1 .content .block_box .block:hover .txt .name { color: #2f318c } .often_btn1 { width: 150px; line-height: 40px; text-align: center; font-size: 16px } @font-face { font-family: "aileron"; src: url(../fonts/Aileron-Regular.otf) } @font-face { font-family: "aileronBold"; src: url(../fonts/Aileron-Bold.otf) } body.active { overflow: hidden } .navmenu_box { display: none } .con1440 { max-width: 1380px; margin: 0 auto } header { position: fixed; width: 100%; top: 0; left: 0; z-index: 999; padding-top: 30px } header .con1440 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } header .con1440 .logo { display: block; width: 340px; -webkit-transform: translateY(-20%); -ms-transform: translateY(-20%); -o-transform: translateY(-20%); transform: translateY(-20%) } header .con1440 .logo img { width: 100% } header .con1440 .logo img.Lhide { display: none } header .con1440 .logo1 { width: 124px } header .con1440 .right .top { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; position: relative; z-index: 5 } header .con1440 .right .top .xian { position: relative } header .con1440 .right .top .xian::before { content: ""; width: 1px; height: 16px; background-color: rgba(255,255,255,0.4); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%) rotate(18deg); -ms-transform: translateY(-50%) rotate(18deg); -o-transform: translateY(-50%) rotate(18deg); transform: translateY(-50%) rotate(18deg) } header .con1440 .right .top .list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 21px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } header .con1440 .right .top .list .icon { width: 13px; height: 13px; margin-right: 6px; opacity: 0.4; font-size: 0; line-height: 1 } header .con1440 .right .top .list .icon img { width: 100% } header .con1440 .right .top .list .icon img.Lhide { display: none } header .con1440 .right .top .list .t { font-size: 14px; color: rgba(255,255,255,0.7) } header .con1440 .right .top .search.noShift { padding: 0 21px; cursor: pointer } header .con1440 .right .top .search.noShift .icon i { font-size: 22px; color: #fff; opacity: 0.4 } header .con1440 .right .top .search.noShift form { position: absolute; display: none; top: 41px; right: 0; background-color: #fff; border-radius: 10px; -webkit-box-shadow: 0 0 5px #adaaaa; box-shadow: 0 0 5px #adaaaa } header .con1440 .right .top .search.noShift form .con { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } header .con1440 .right .top .search.noShift form .con input { padding-left: 15px; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1 } header .con1440 .right .top .search.noShift form .con button { position: relative; border: none } header .con1440 .right .top .search.noShift form .con button i { color: #333; font-size: 28px; line-height: 1; line-height: 38px } header .con1440 .right .top .language { padding: 0 3px 0 21px; cursor: pointer } header .con1440 .right .top .language .on { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } header .con1440 .right .top .language .on .icon { width: 20px; margin-right: 12px; border-radius: 50%; overflow: hidden } header .con1440 .right .top .language .on .icon img { width: 100% } header .con1440 .right .top .language .on .lang { font-size: 14px; color: #fff; padding-right: 14px; white-space: nowrap; position: relative } header .con1440 .right .top .language .on .lang a { color: #fff } header .con1440 .right .top .language .on .t::before { content: ""; border: 6px solid transparent; border-top-color: #fff; position: absolute; right: 0; top: 8px } header .con1440 .right .top .language .Lhide { -webkit-box-shadow: 0 0 5px #adaaaa; box-shadow: 0 0 5px #adaaaa; position: absolute; right: -13px; top: 35px; background-color: #fff; border-radius: 10px; display: none; overflow: hidden } header .con1440 .right .top .language .Lhide a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 23px 28px 23px 30px } header .con1440 .right .top .language .Lhide a:not(:first-child) { border-top: 1px solid #eeeeee } header .con1440 .right .top .language .Lhide a .icon { border-radius: 50%; overflow: hidden; width: 20px; margin-right: 10px } header .con1440 .right .top .language .Lhide a .icon img { width: 100% } header .con1440 .right .top .language .Lhide a .t { font-size: 15px; color: #212121; line-height: 1; white-space: nowrap } header .con1440 .right .header_nav { margin-top: 10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end } header .con1440 .right .header_nav .li .link { padding: 0 28px 30px 28px; font-size: 16px; color: #fff; display: block; font-weight: bold } header .con1440 .right .header_nav .li:last-child a { padding-right: 0 } header .con1440 .right .header_nav .li:first-child a { padding-left: 0 } header .con1440 .right .header_nav .li .navDown { -webkit-box-shadow: 0 39px 17px -40px #adaaaa; box-shadow: 0 39px 17px -40px #adaaaa; position: fixed; text-overflow: clip; top: 127px; left: 0; width: 100%; background-color: #fff; background-image: url(../images/bj6.jpg); -webkit-background-size: cover; background-size: cover; display: none } header .con1440 .right .header_nav .li .navDown .flexBox { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } header .con1440 .right .header_nav .li .navDown .leftImg { width: 25%; padding: 50px 50px 50px 0; border-right: 1px solid #ebebeb; position: relative } header .con1440 .right .header_nav .li .navDown .leftImg img { width: 100% } header .con1440 .right .header_nav .li .navDown .list { padding: 50px 0 50px 50px; 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 } header .con1440 .right .header_nav .li .navDown .list .nav2 .link2 { font-size: 16px; color: #44456b } header .con1440 .right .header_nav .li .navDown .list .nav2 .nav3 { margin-top: 25px } header .con1440 .right .header_nav .li .navDown .list .nav2 .nav3 a { font-size: 14px; color: #000; opacity: 0.6; line-height: 24px; display: block } header .con1440 .right .header_nav .li .navDown .list .nav2:not(:first-child) { margin-left: 50px } header.active,header.active2 { background-color: #fff; -webkit-box-shadow: 0 0 5px #adaaaa; box-shadow: 0 0 5px #adaaaa } header.active .con1440 .logo img.Lhide,header.active2 .con1440 .logo img.Lhide { display: block } header.active .con1440 .logo img.Lshow,header.active2 .con1440 .logo img.Lshow { display: none } header.active .con1440 .right .top .xian::before,header.active2 .con1440 .right .top .xian::before { background-color: #333; opacity: 0.5 } header.active .con1440 .right .top .list .icon,header.active2 .con1440 .right .top .list .icon { opacity: 1 } header.active .con1440 .right .top .list .icon img.Lshow,header.active2 .con1440 .right .top .list .icon img.Lshow { display: none } header.active .con1440 .right .top .list .icon img.Lhide,header.active2 .con1440 .right .top .list .icon img.Lhide { display: block } header.active .con1440 .right .top .list .t,header.active2 .con1440 .right .top .list .t { color: #3f3f3f } header.active .con1440 .right .top .search .icon i,header.active2 .con1440 .right .top .search .icon i { color: #1e2188; opacity: 1 } header.active .con1440 .right .top .language .on .lang,header.active2 .con1440 .right .top .language .on .lang { color: #333 } header.active .con1440 .right .top .language .on .lang a,header.active2 .con1440 .right .top .language .on .lang a { color: #333 } header.active .con1440 .right .top .language .on .t::before,header.active2 .con1440 .right .top .language .on .t::before { border-top-color: #1e2188 } header.active .con1440 .right .top .navmenu_box span,header.active2 .con1440 .right .top .navmenu_box span { background-color: #333 } header.active .con1440 .right .header_nav .li .link,header.active2 .con1440 .right .header_nav .li .link { color: #000 } .home1 { overflow: hidden; position: relative } .home1 .bannerImgBox .img { display: none } .home1 .bannerImgBox .img.active { display: block } .home1 .bannerImgBox .img img { width: 100% } .home1 .home1_swiper { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .home1 .home1_swiper .swiper-slide { padding-top: 14.9%; text-align: center; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } .home1 .home1_swiper .swiper-slide:not(:first-child) { border-left: 1px solid rgba(255,255,255,0.1) } .home1 .home1_swiper .swiper-slide h5 { font-size: 30px; color: #fff; line-height: 1.3; font-weight: 600; opacity: 0.7; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } .home1 .home1_swiper .swiper-slide .t { font-size: 14px; line-height: 24px; color: #fff; opacity: 0.8; font-family: "aileron"; max-width: 240px; margin: 50px auto 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px) } .home1 .home1_swiper .swiper-slide a { width: 140px; line-height: 52px; text-align: center; border-radius: 30px; background-color: #1e2188; font-size: 14px; color: #fff; display: block; margin: 205px auto 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px) } .home2 { padding: 58px 15px 87px; background-image: url(../images/bj3.jpg); -webkit-background-size: cover; background-size: cover; overflow: hidden } .home2 .top { width: 1500px; margin: 0 auto; background-color: #fff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 100% } .home2 .top .box { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 152px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; padding: 0 20px } .home2 .top .box .icon { width: 75px; padding-right: 10px } .home2 .top .box .icon img { -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } .home2 .top .box .icon img.Lhide { display: none } .home2 .top .box .t { font-size: 16px; color: #2e2e2e; line-height: 18px; font-family: "aileron"; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } .home2 .top .box:not(:first-child) { border-left: 1px solid #f8f8f8 } .home2 .con { padding-top: 90px } .home2 .con .tit { text-align: center } .home2 .con .tit h5 { font-size: 30px; line-height: 1.4; color: #2f318c; font-weight: bold } .home2 .con .tit .t { max-width: 1105px; font-size: 16px; line-height: 24px; color: #37383a; margin: 25px auto 0; font-family: "aileron"; max-height: 72px; overflow: hidden; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s } .home2 .con .tit .t.active { max-height: initial } .home2 .con .tit .more { margin-top: 15px; cursor: pointer; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s } .home2 .con .tit .more i { font-size: 20px; color: #2f318c; -webkit-animation: wo 1.5s linear infinite alternate; -o-animation: wo 1.5s linear infinite alternate; animation: wo 1.5s linear infinite alternate } .home2 .con .tit .more.active { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg) } .home2 .con .video { max-width: 1380px; margin: 40px auto 0; border-radius: 20px; overflow: hidden; position: relative } .home2 .con .video .off { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer } .home2 .con .video .off .icon { width: 64px; height: 64px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .home2 .con .video .off .icon img { width: 100% } .home2 .con .video .off.active .icon { display: none } .home2 .con .video video { width: 100% } @-webkit-keyframes wo { from { -webkit-transform: translateY(15px); transform: translateY(15px) } to { -webkit-transform: translateY(0); transform: translateY(0) } } @-o-keyframes wo { from { -o-transform: translateY(15px); transform: translateY(15px) } to { -o-transform: translateY(0); transform: translateY(0) } } @keyframes wo { from { -webkit-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px) } to { -webkit-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } } footer { padding-top: 85px; background-color: #222; overflow: hidden } footer .top { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 60px } footer .top .left .logo { width: 240px } footer .top .left .logo img { width: 100% } footer .top .left .t { font-size: 15px; color: #757575; line-height: 1.5; margin-top: 35px; font-family: "aileron" } footer .top .footNav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } footer .top .footNav .li .link { font-size: 20px; color: #ff0000; line-height: 1 } footer .top .footNav .li .nav2 { margin-top: 30px } footer .top .footNav .li .nav2 a { font-size: 15px; color: #757575; line-height: 36px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; white-space: nowrap; display: block } footer .top .footNav .li .nav2 a:hover { color: #ff0000 } footer .top .footNav .li:not(:first-child) { margin-left: 30px } footer .middle { border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 18px 0; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } footer .middle .left { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } footer .middle .left .tit { font-size: 14px; color: #757575 } footer .middle .left .list { margin-left: 10px } footer .middle .left .list a { font-size: 14px; color: #757575; display: inline-block; white-space: nowrap; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } footer .middle .left .list a:hover { color: #ff0000 } footer .middle .left .list a:not(:first-child) { margin-left: 25px } footer .middle .right .list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } footer .middle .right .list a { display: block; width: 32px; height: 32px; background-color: #3f3f3f; border-radius: 50%; text-align: center; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; position: relative } footer .middle .right .list a i { line-height: 32px; color: #fff; font-size: 18px } footer .middle .right .list a:not(:first-child) { margin-left: 9px } footer .middle .right .list a:nth-child(1):hover { background-color: #4197e7 } footer .middle .right .list a:nth-child(2):hover { background-color: #40599a } footer .middle .right .list a:nth-child(3):hover { background-color: #287ab5 } footer .middle .right .list a p.noShift { position: absolute; bottom: 40px; width: 120px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); display: none } footer .middle .right .list a:hover p.noShift { display: block } footer .bot { padding: 30px 0 40px } footer .bot .num { 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; font-size: 20px; color: #fff; font-family: "aileronBold" } footer .bot .num img { width: 17px; height: 17px; margin-right: 9px } footer .bot .t { font-size: 14px; color: #666; margin-top: 5px; 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 } footer .bot .t a { display: block; font-size: 14px; color: #666; margin-left: 30px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } footer .bot .t a:hover { color: #ff0000 } .indexBanner { position: relative } .indexBanner .link { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none } .indexBanner .link .li { position: absolute; top: 0; width: 1px; height: 100%; background-color: rgba(255,255,255,0.15) } .indexBanner .link .li::before { content: ""; width: 3px; height: 3px; background-color: rgba(255,255,255,0.5); position: absolute; left: -1px; top: 20.2% } .indexBanner .link .li:nth-child(1) { left: 13.1% } .indexBanner .link .li:nth-child(1)::after { top: 50% } .indexBanner .link .li:nth-child(2) { left: 37.941% } .indexBanner .link .li:nth-child(2)::after { top: 10% } .indexBanner .link .li:nth-child(3) { right: 37.941% } .indexBanner .link .li:nth-child(3)::after { top: 20% } .indexBanner .link .li:nth-child(4) { right: 13.1% } .indexBanner .link .li:nth-child(4)::after { top: 60% } .indexBanner .link .li::after { content: ""; width: 3px; height: 82px; background-image: url(../images/icon14.png); position: absolute; left: -1px; bottom: 100%; display: none } .indexBanner .indexBanner_swiper .swiper-slide { position: relative } .indexBanner .indexBanner_swiper .swiper-slide .img img { width: 100% } .indexBanner .indexBanner_swiper .swiper-slide .img video { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .indexBanner .indexBanner_swiper .swiper-slide .text { position: absolute; width: 100%; text-align: center; left: 0; top: 42.25%; opacity: 0; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; margin-top: 100px; z-index: 2 ; max-width: 1380px; transform: translateX(-50%); left: 50%; } @media(max-width:992px){ .indexBanner .indexBanner_swiper .swiper-slide .text{ max-width: 98vw; padding:0 15px; left: unset; } } .indexBanner .indexBanner_swiper .swiper-slide .text h5 { font-size: 40px; font-weight: bold; line-height: 1.4; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(rgba(255,255,255,0.8))); background-image: -webkit-linear-gradient(left, #fff, rgba(255,255,255,0.8)); background-image: -o-linear-gradient(left, #fff, rgba(255,255,255,0.8)); background-image: linear-gradient(to right, #fff, rgba(255,255,255,0.8)) } .indexBanner .indexBanner_swiper .swiper-slide .text .t { font-size: 40px; line-height: 1.4; margin-top: 10px; color: #fff } .indexBanner .indexBanner_swiper .swiper-slide .text a { width: 110px; line-height: 40px; text-align: center; color: #fff; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; border: 2px solid #fff; border-radius: 30px; font-size: 14px; margin-top: 20px; display: inline-block } .indexBanner .indexBanner_swiper .swiper-slide .text a:hover { background-color: #2f318c; border-color: #2f318c } .indexBanner .indexBanner_swiper .swiper-slide .leftText { width: 40%; left: 14.0625%; text-align: left; transform: unset; } .indexBanner .indexBanner_swiper .swiper-slide .rightText { right: 14.0625%; left: auto; width: 40%; text-align: right; transform: unset; } .indexBanner .indexBanner_swiper .swiper-slide .topText { top: 180px !important; text-align: center } .indexBanner .indexBanner_swiper .swiper-slide.swiper-slide-active .text { opacity: 1; margin-top: 0px; -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s } .indexBanner .indexBanner_swiper .indexBanner_pagination { font-size: 0; bottom: 42px; height: 5px } .indexBanner .indexBanner_swiper .indexBanner_pagination .swiper-pagination-bullet { width: 12px; height: 5px; border-radius: 5px; background-color: #fff; opacity: 0.5; -webkit-box-shadow: 0 1px 3px #686868; box-shadow: 0 1px 3px #686868 } .indexBanner .indexBanner_swiper .indexBanner_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 23px; opacity: 0.8 } .index1 { background-image: url(../images/bj1.jpg); padding: 100px 0 120px; -webkit-background-size: cover; background-size: cover } .index1 .con { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .index1 .con .box { width: 23.19444%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 55px 45px 50px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; background-color: #fff } .index1 .con .box .icon img.Lhide { display: none } .index1 .con .box .text h5 { font-size: 24px; color: #2e2e2e; margin-top: 85px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; line-height: 1; white-space: nowrap; font-weight: 700 } .index1 .con .box .text .t { font-size: 14px; line-height: 20px; margin-top: 20px; color: #888; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 7; -webkit-box-orient: vertical; line-height: 24px } .index1 .con .box:nth-child(even) { -webkit-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px) } .index1 .con .box:nth-child(even) .icon { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2 } .index1 .con .box:nth-child(even) .text { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } .index1 .con .box:nth-child(even) .text h5 { margin-top: 0 } .index2 { background-color: #fff; position: relative; padding: 160px 0 118px } .index2 .text { width: 82.15278%; padding-right: 13%; max-width: 100%; position: relative; z-index: 5 } .index2 .text h5 { font-size: 30px; color: #2f318c; font-weight: bold; line-height: 1 } .index2 .text .t { font-size: 14px; line-height: 24px; color: #37383a; margin-top: 25px; font-family: "aileron" } .index2::before { content: ""; width: 372px; height: 465px; position: absolute; top: 0; left: 0; background-image: url(../images/bj2.png) } .index2 .con { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-image: url(../images/bj4.jpg); -webkit-background-size: cover; background-size: cover; padding: 58px 50px 60px; margin-top: 105px; position: relative; z-index: 5 } .index2 .con .box { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; padding: 0 20px } .index2 .con .box .icon { height: 49px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .index2 .con .box .num { font-size: 42px; color: #fff; font-family: "aileronBold"; line-height: 1; margin-top: 20px } .index2 .con .box .t { font-size: 14px; line-height: 17px; color: #fff; opacity: 0.5; margin-top: 10px } .index2 .rightImg { width: 25.83333%; height: 100%; position: absolute; top: 0; right: 0; overflow: hidden } .index2 .rightImg img { height: 100%; min-width: 100%; max-width: none; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -o-object-fit: cover; object-fit: cover } .index3 { background-image: url(../images/bj5.jpg); -webkit-background-size: cover; background-size: cover; padding: 105px 0 102px } .index3 .con { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .index3 .con .tit { font-size: 30px; line-height: 1; color: #2f318c; font-family: "aileronBold" } .index3 .con .LBo { padding: 0 12px; line-height: 24px; border: 1px solid #bdbdbd; font-family: "aileron"; font-size: 12px; display: inline-block; color: rgba(0,0,0,0.7); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } .index3 .con .LBo.B { color: rgba(0,0,0,0.7); border-color: #bdbdbd } .index3 .con .dataBox { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .index3 .con .dataBox .icon { width: 15px; margin-right: 5px; font-size: 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } .index3 .con .dataBox .icon img { width: 100% } .index3 .con .dataBox .icon img.Lhide { display: none } .index3 .con .dataBox .data { font-size: 12px; color: #fff; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } .index3 .con .dataBox.Brown .data { color: #524444 } .index3 .con .dataBox.B .data { color: #2d2d2d } .index3 .con .left { width: 63.40278% } .index3 .con .left .top { margin-top: 25px; position: relative; display: block } .index3 .con .left .top .img .picture_container { padding-top: 42.5% } .index3 .con .left .top .img .picture_container img { min-width: 100%; max-height: none } .index3 .con .left .top .text { width: 100%; background-color: #fff; padding: 20px 44px } .index3 .con .left .top .text h5 { font-size: 18px; color: #333; margin-top: 10px; height: 56px; font-family: "aileron"; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 28px } .index3 .con .left .top .text .dataBox { margin-top: 5px } .index3 .con .left .top:hover .text { background-color: #2f318c } .index3 .con .left .top:hover .text h5 { color: #fff } .index3 .con .left .top:hover .text .LBo { color: #fff; border-color: #fff } .index3 .con .left .top:hover .text .dataBox.B .icon img.Lshow { display: none } .index3 .con .left .top:hover .text .dataBox.B .icon img.Lhide { display: block } .index3 .con .left .top:hover .text .dataBox.B .data { color: #fff } .index3 .con .left .top:hover .img .picture_container img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1) } .index3 .con .left .bot { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 30px; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .index3 .con .left .bot .box { background-color: #fff; padding: 27px 44px; width: 48.74042% } .index3 .con .left .bot .box h5 { font-size: 18px; color: #000; font-family: "aileron"; height: 52px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 26px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } .index3 .con .left .bot .box .conn { margin-top: 40px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .index3 .con .left .bot .box:hover { background-color: #2f318c } .index3 .con .left .bot .box:hover h5 { color: #fff } .index3 .con .left .bot .box:hover .dataBox .icon .Lhide { display: block } .index3 .con .left .bot .box:hover .dataBox .icon .Lshow { display: none } .index3 .con .left .bot .box:hover .dataBox .data { color: #fff !important } .index3 .con .left .bot .box:hover .LBo { color: #fff; border-color: #fff } .index3 .con .right { width: 32.29167% } .index3 .con .right .Lcon { margin-top: 25px } .index3 .con .right .Lcon .box { display: block } .index3 .con .right .Lcon .box .img .picture_container { padding-top: 55.05376% } .index3 .con .right .Lcon .box .img .picture_container img { min-width: 100%; max-height: none } .index3 .con .right .Lcon .box .text { background-color: #fff; padding: 30px 35px 40px } .index3 .con .right .Lcon .box .text h5 { font-size: 18px; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "aileron"; line-height: 1.3 } .index3 .con .right .Lcon .box .text .dataBox { margin-top: 5px } .index3 .con .right .Lcon .box:nth-child(2) { margin-top: 20px } .index3 .con .right .Lcon .box:hover .img .picture_container img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1) } .index3 .con .right .Lcon .box:hover .text { background-color: #2f318c } .index3 .con .right .Lcon .box:hover .text h5 { color: #fff } .index3 .con .right .Lcon .box:hover .text .dataBox .icon .Lhide { display: block } .index3 .con .right .Lcon .box:hover .text .dataBox .icon .Lshow { display: none } .index3 .con .right .Lcon .box:hover .text .dataBox .data { color: #fff } @-webkit-keyframes donhua1 { from { bottom: 100% } to { bottom: 0% } } @-o-keyframes donhua1 { from { bottom: 100% } to { bottom: 0% } } @keyframes donhua1 { from { bottom: 100% } to { bottom: 0% } } @media (max-width: 1700px) { .home1 .home1_swiper .swiper-slide a { margin:120px auto 0; font-size: 14px } .index3 .con .dataBox .icon { width: 15px } .index3 .con .right .Lcon .box .text .dataBox { margin-top: 10px } .index3 .con .LBo { padding: 0 12px; line-height: 24px; font-size: 12px } } @media (min-width: 992px) { .index1 .con .box:nth-child(even):hover { -webkit-transform:translateY(40px) scale(1.03); -ms-transform: translateY(40px) scale(1.03); -o-transform: translateY(40px) scale(1.03); transform: translateY(40px) scale(1.03) } .index1 .con .box:hover { background-color: #22247b; -webkit-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03) } .index1 .con .box:hover .text h5 { color: #fff } .index1 .con .box:hover .text .t { color: #fff; opacity: 0.8 } .index1 .con .box:hover .icon img.Lhide { display: block } .index1 .con .box:hover .icon img.Lshow { display: none } .home1 .home1_swiper .swiper-slide:hover { padding-top: 12.5%; background-color: rgba(0,0,0,0.2) } .home1 .home1_swiper .swiper-slide:hover h5 { opacity: 1 } .home1 .home1_swiper .swiper-slide:hover .t { opacity: 0.8; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .home1 .home1_swiper .swiper-slide:hover a { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .home2 .top .box:hover { background-color: #2f318c; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); position: relative; z-index: 2 } .home2 .top .box:hover .icon img.Lhide { display: block } .home2 .top .box:hover .icon img.Lshow { display: none } .home2 .top .box:hover .t { color: #fff } } @media (max-width: 1440px) { .con1440 { padding:0 15px; width: 100% } footer .top .footNav .li:not(:first-child) { margin-left: 20px } .indexBanner .indexBanner_swiper .swiper-slide .text { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%) } .indexBanner .indexBanner_swiper .swiper-slide .text h5 { font-size: 46px; line-height: 1.1 } .indexBanner .indexBanner_swiper .swiper-slide .topText { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%) } } div[contenteditable=false] { display: none !important } @media (max-width: 1260px) { header .con1440 .logo { width:300px } } @media (max-width: 1200px) { header { padding-top:20px } header .con1440 .logo { width: 200px } header .con1440 .right .header_nav .li .navDown { top: 99px } header .con1440 .right .top .list,header .con1440 .right .top .search { padding: 0 10px } header .con1440 .right .top .language { padding-left: 10px } header .con1440 .right .header_nav .li .link { padding: 0 8px 20px } header .con1440 .right .header_nav .li .navDown .leftImg { padding-right: 20px } header .con1440 .right .header_nav .li .navDown .list { padding-left: 20px } header .con1440 .right .top .language .Lhide { top: 30px } header .con1440 .right .top .language .Lhide a { padding: 15px 15px } header .con1440 .right .top .language .Lhide a .icon { width: 15px } .home1 .bannerImgBox .img { height: 550px; display: none } .home1 .bannerImgBox .img.active { display: block } .home1 .bannerImgBox .img img { position: absolute; height: 100%; min-width: 100%; max-width: none; width: auto; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: 0 } .home1 .home1_swiper .swiper-slide { padding-top: 12% } .home1 .home1_swiper .swiper-slide h5 { font-size: 22px } .home1 .home1_swiper .swiper-slide .t { font-size: 13px; line-height: 20px; margin: 25px auto 0 } .home1 .home1_swiper .swiper-slide a { width: 120px; line-height: 40px; margin: 100px auto 0 } .home1 .home1_swiper .swiper-slide:hover { padding-top: 10% } .indexBanner .indexBanner_swiper .indexBanner_pagination .swiper-pagination-bullet { width: 12px; height: 5px; margin: 0px 4px; border-radius: 4px } .indexBanner .indexBanner_swiper .indexBanner_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 23px; height: 5px } .home2 .top .box .icon { width: 50px } footer { padding-top: 50px } footer .top { padding-bottom: 40px; display: block } footer .top .left { width: 100%; text-align: center } footer .top .left .logo { margin: 0 auto } footer .top .left .t { margin-top: 20px } footer .top .footNav { width: 100%; margin-top: 20px; display: block } footer .top .footNav .li { border-bottom: 1px solid #999; position: relative } footer .top .footNav .li .link { font-size: 16px; line-height: 50px } footer .top .footNav .li .nav2 { display: none; margin-top: 0; padding-bottom: 10px } footer .top .footNav .li .nav2 a { font-size: 14px; line-height: 30px } footer .top .footNav .li i { width: 50%; height: 50px; position: absolute; top: 0; right: 0; cursor: pointer } footer .top .footNav .li i::before { content: ''; width: 8px; height: 8px; border-top: 2px solid #ff0000; border-right: 2px solid #ff0000; position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } footer .top .footNav .li i.active::before { -webkit-transform: translateY(-50%) rotate(135deg); -ms-transform: translateY(-50%) rotate(135deg); -o-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg) } footer .top .footNav .li:not(:first-child) { margin-left: 0 } footer .middle { border-top: none } .indexBanner .indexBanner_swiper .swiper-slide .text h5 { font-size: 36px } .indexBanner .indexBanner_swiper .swiper-slide .text h5 .t { font-size: 22px } .index1 .con .box { padding: 40px 20px } .index1 .con .box .text h5 { margin-top: 40px; font-size: 22px } .index1 .con .box .text .t { font-size: 14px; margin-top: 15px; font-size: 14px; line-height: 20px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 5; -webkit-box-orient: vertical; line-height: 22px } .index2 .con .box { padding: 0 10px } .index2 .con .box .t { font-size: 16px; line-height: 24px } header .con1440 .right .header_nav .li .navDown { top: 87px } header .con1440 .right .header_nav .li .navDown .list .nav2:not(:first-child) { margin-left: 20px } } @media (max-width: 992px) { header { padding-top:15px } .navmenu_box { display: block; width: 20px; height: 30px; position: relative; cursor: pointer; z-index: 1003; margin-left: 10px } .navmenu_box span { display: block; height: 2px; background: #fff; position: absolute; width: 20px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; left: 0 } .navmenu_box span:nth-child(1) { top: 8px } .navmenu_box span:nth-child(2) { top: 50% } .navmenu_box span:nth-child(3) { bottom: 6px } .closeNavbtn span:nth-child(1) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 15px } .closeNavbtn span:nth-child(2) { display: none } .closeNavbtn span:nth-child(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 15px } .navmenu_box.closeNavbtn span { background-color: #333 } header { padding: 15px } header .con1440 .logo { width: 140px; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px) } header .con1440 .logo1 { width: 80px } header .con1440 .right .top .list { display: none } header .con1440 .right .top .xian::before { width: 1px; height: 16px; -webkit-transform: translateY(-50%) rotate(0); -ms-transform: translateY(-50%) rotate(0); -o-transform: translateY(-50%) rotate(0); transform: translateY(-50%) rotate(0) } header .con1440 .right .top .search { font-size: 0; height: 21px } header .con1440 .right .top .search .icon { line-height: 21px } header .con1440 .right .top .search .icon i { font-size: 22px } header .con1440 .right .top .search form { top: 35px } header .con1440 .right .top .search form .con input { padding-left: 10px } header .con1440 .right .top .search form .con button i { font-size: 24px } header .con1440 .right .top .search::before { display: none } header .con1440 .right .top .language .on .icon { width: 18px; margin-right: 5px; -webkit-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px) } header .con1440 .right .top .language .on .t { font-size: 14px; padding-right: 15px } header .con1440 .right .top .language .on .t::before { border: 4px solid transparent; border-top-color: #fff; top: 8px } header .con1440 .right .header_nav { margin-top: 0; display: none; position: fixed; top: 60px; left: 0; width: 100%; height: 100vh; background-color: #fff } header .con1440 .right .header_nav .li { display: block; border-bottom: 1px solid #f7f7f7; position: relative } header .con1440 .right .header_nav .li .link { padding: 0 15px !important; font-size: 16px; color: #333; line-height: 55px } header .con1440 .right .header_nav .li span { width: 50%; height: 55px; position: absolute; top: 0; right: 0; cursor: pointer } header .con1440 .right .header_nav .li span::before { content: ''; width: 8px; height: 8px; border-top: 2px solid #666; border-right: 2px solid #666; position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } header .con1440 .right .header_nav .li span.active::before { -webkit-transform: translateY(-50%) rotate(135deg); -ms-transform: translateY(-50%) rotate(135deg); -o-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg) } header .con1440 .right .header_nav .li .navDown { position: static; background-color: #fff; border: none; -webkit-box-shadow: none; box-shadow: none } header .con1440 .right .header_nav .li .navDown .flexBox { width: 100% } header .con1440 .right .header_nav .li .navDown .leftImg { display: none } header .con1440 .right .header_nav .li .navDown .list { padding: 0; display: block; width: 100% } header .con1440 .right .header_nav .li .navDown .list .nav2 { padding: 0 35px; line-height: 40px; position: relative } header .con1440 .right .header_nav .li .navDown .list .nav2 .link2 { font-size: 14px; line-height: 35px } header .con1440 .right .header_nav .li .navDown .list .nav2 i { width: 50%; height: 35px; position: absolute; top: 0; right: 0; cursor: pointer } header .con1440 .right .header_nav .li .navDown .list .nav2 i::before { content: ''; width: 8px; height: 8px; border-top: 2px solid #666; border-right: 2px solid #666; position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } header .con1440 .right .header_nav .li .navDown .list .nav2 i.active::before { -webkit-transform: translateY(-50%) rotate(135deg); -ms-transform: translateY(-50%) rotate(135deg); -o-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg) } header .con1440 .right .header_nav .li .navDown .list .nav2 .nav3 { margin-top: 0; display: none } header .con1440 .right .header_nav .li .navDown .list .nav2 .nav3 a { font-size: 14px; line-height: 30px; padding: 0 10px } header .con1440 .right .header_nav .li .navDown .list .nav2:not(:first-child) { margin-left: 0 } .home1 .home1_swiper .swiper-slide .t { display: none } .home1 .home1_swiper .swiper-slide a { opacity: 1 } .home2 { padding: 30px 15px } .home2 .top { width: 100% } .home2 .top .box { height: auto; padding: 20px 0; display: block } .home2 .top .box .icon { width: auto; height: 50px; margin: 0 auto; padding: 0; text-align: center } .home2 .top .box .t { width: 100%; margin-top: 10px; font-size: 14px; line-height: 18px; text-align: center } .home2 .con { padding-top: 30px } .home2 .con .tit h5 { font-size: 30px } .home2 .con .tit .t { max-width: 100%; font-size: 16px; line-height: 22px; margin: 15px auto 0; max-height: 66px } .home2 .con .tit .more i { font-size: 20px } .home2 .con .video { max-width: 100%; margin: 20px auto 0 } .home2 .con .video .off .icon { width: 50px; height: 50px } footer { padding-top: 30px } footer .top { padding-bottom: 20px } footer .top .left { width: 100%; text-align: center } footer .top .left .logo { margin: 0 auto; width: 150px } footer .top .left .t { margin-top: 15px } footer .top .footNav { margin-top: 10px } footer .top .footNav .li .link { font-size: 16px; line-height: 45px } footer .top .footNav .li i { height: 45px } footer .middle { display: block; padding: 10px 0 } footer .middle .left { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } footer .middle .left .tit { white-space: nowrap; font-size: 14px } footer .middle .left .list { margin-left: 0 } footer .middle .left .list a { margin-left: 10px; font-size: 14px } footer .middle .left .list a:not(:first-child) { margin-left: 10px } footer .middle .right .list { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-top: 15px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } footer .middle .right .list a { width: 30px; height: 30px } footer .middle .right .list a i { line-height: 30px; font-size: 16px } footer .middle .right .list a:not(:first-child) { margin-left: 5px } footer .bot { padding: 20px 0 30px } footer .bot .num { font-size: 16px } footer .bot .num img { width: 15px; height: 15px } footer .bot .t { font-size: 14px; color: #666; margin-top: 5px; 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-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; text-align: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } footer .bot .t a { margin-left: 20px } .indexBanner .indexBanner_swiper .swiper-slide .text h5 { font-size: 30px } .indexBanner .indexBanner_swiper .swiper-slide .text .t { font-size: 20px } .indexBanner .indexBanner_swiper .swiper-slide .text a { width: 100px; line-height: 40px; font-size: 14px; margin-top: 15px } .indexBanner .indexBanner_swiper .indexBanner_pagination { bottom: 20px } .index1 { padding: 30px 0 50px } .index1 .con .box { padding: 20px } .index1 .con .box .text h5 { font-size: 18px; margin-top: 30px } .index1 .con .box:nth-child(even) { -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px) } .index2 { padding: 30px 0 } .index2 .text { padding-right: 5%; width: 75% } .index2 .text h5 { font-size: 30px } .index2 .text .t { font-size: 16px; line-height: 22px; margin-top: 30px } .index2 .con { padding: 30px 10px; margin-top: 60px } .index2 .con .box { padding: 0 10px } .index2 .con .box .icon { height: 40px } .index2 .con .box .num { font-size: 28px; margin-top: 10px } .index2 .con .box .t { margin-top: 5px } .index3 { padding: 30px 0 } .index3 .con { display: block } .index3 .con .tit { font-size: 30px } .index3 .con .left { width: 100%; margin-top: 20px } .index3 .con .left .top { margin-top: 20px } .index3 .con .left .top .text { padding: 20px } .index3 .con .left .top .text h5 { font-size: 20px; height: 48px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 24px } .index3 .con .left .bot { margin-top: 20px } .index3 .con .left .bot .box { padding: 20px 10px; width: 49% } .index3 .con .left .bot .box h5 { font-size: 18px; height: 48px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 24px } .index3 .con .left .bot .box .conn { margin-top: 20px } .index3 .con .right { width: 100% } .index3 .con .right .Lcon { margin-top: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .index3 .con .right .Lcon .box { width: 49% } .index3 .con .right .Lcon .box .text { padding: 20px 10px } .index3 .con .right .Lcon .box .text h5 { font-size: 18px } .index3 .con .right .Lcon .box:nth-child(2) { margin-top: 0 } .indexBanner .indexBanner_swiper .swiper-slide .text h5 { font-size: 26px } .indexBanner .indexBanner_swiper .swiper-slide .text .t { font-size: 18px } } .PhoneShow { display: none !important } @media (max-width: 765px) { .PhoneShow { display:block !important } .Pcshow { display: none !important } .con1440 { max-width: 98vw } .home1 .home1_swiper .swiper-slide { padding-top: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .home2 .top { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .home2 .top .box { -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; width: 33.33%; padding: 15px 0 } .home2 .top .box:nth-child(4) { border: none } .home2 .con .tit h5 { font-size: 20px } .home2 .con .tit .t { font-size: 14px } .home2 .con .video .off .icon { width: 40px; height: 40px } .indexBanner .indexBanner_swiper .swiper-slide .text a { width: 110px; border-width: 1px; line-height: 35px; font-size: 14px; margin-top: 15px } .index1 { padding: 30px 0 20px } .index1 .con { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .index1 .con .box { padding: 20px 10px; width: 49%; margin-bottom: 10px; display: block } .index1 .con .box .icon { height: 45px } .index1 .con .box .text h5 { font-size: 16px; margin-top: 20px } .index1 .con .box:nth-child(even) { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .index1 .con .box:nth-child(even) .icon { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } .index1 .con .box:nth-child(even) .text { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2 } .index1 .con .box:nth-child(even) .text h5 { margin-top: 20px } .index2 .text { padding-right: 0; width: 100% } .index2 .text h5 { font-size: 20px } .index2 .text .t { font-size: 14px; line-height: 20px; margin-top: 20px } .index2 .con { padding: 30px 10px; margin-top: 30px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .index2 .con .box { width: 33.33%; -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; padding: 10px } .index2 .con .box .num { font-size: 24px } .index2 .rightImg { display: none } .index3 .con .tit { font-size: 20px } .index3 .con .left .top { margin-top: 15px } .index3 .con .left .top .text h5 { font-size: 16px; height: 44px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 22px } .index3 .con .left .bot { margin-top: 15px } .index3 .con .left .bot .box { padding: 20px 10px; width: 49% } .index3 .con .left .bot .box h5 { font-size: 16px; height: 44px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 22px } .index3 .con .left .bot .box .conn { margin-top: 15px } .index3 .con .right { margin-top: 15px } .index3 .con .right .Lcon { margin-top: 15px } .index3 .con .right .Lcon .box .text { padding: 20px 10px } .index3 .con .right .Lcon .box .text h5 { font-size: 16px } .index2 .con .box .t { font-size: 14px; line-height: 22px } header .con1440 .right .top .search form { position: fixed !important; right: 10px !important; left: 10px; width: auto !important; top: 90px !important } .indexBanner .indexBanner_swiper .swiper-slide .topText { top: 75px !important } .indexBanner .indexBanner_swiper .swiper-slide .leftText { left: 5%; width: 75% } .indexBanner .indexBanner_swiper .swiper-slide .rightText { right: 5%; width: 75% } footer .bot .num { font-size: 14px } } @media (max-width: 465px) { header { padding:10px 15px } header .con1440 .logo { width: 140px } header .con1440 .logo1 { width: 60px } header .con1440 .right .header_nav { top: 50px } .home1 .bannerImgBox { height: 350px } .home1 .bannerImgBox .img { height: 100% } .home1 .home1_swiper { height: 350px } .home1 .home1_swiper .swiper-slide { padding-top: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -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 } .home1 .home1_swiper .swiper-slide:not(:first-child) { border-left: none } .home1 .home1_swiper .swiper-slide h5 { font-size: 20px; opacity: 1; line-height: 1.3 } .home1 .home1_swiper .swiper-slide .t { display: none } .home1 .home1_swiper .swiper-slide a { width: 120px; line-height: 40px; margin: 50px auto 0; opacity: 1 } .home1 .home1_swiper .swiper-slide:hover { padding-top: 0 } .home2 .top .box { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1 } .home2 .top .box .icon { height: 40px } .home2 .con .tit h5 { font-size: 20px; line-height: 1.3 } .home2 .con .tit .t { font-size: 14px; text-align: left } .home2 .con .video .off .icon { width: 40px; height: 40px } footer .top .left .t { font-size: 14px; line-height: 20px } footer .top { padding-bottom: 0 } footer .bot .num { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } footer .bot .num span { display: block; width: 100%; text-align: center } .indexBanner .indexBanner_swiper .swiper-slide { overflow: hidden } .indexBanner .indexBanner_swiper .swiper-slide .img { height: 220px } .indexBanner .indexBanner_swiper .swiper-slide .img img { height: 100%; width: auto; max-width: none; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%) } .indexBanner .indexBanner_swiper .swiper-slide .text h5 { font-size: 18px } .indexBanner .indexBanner_swiper .swiper-slide .text .t { font-size: 14px; margin-top: 7px } .indexBanner .indexBanner_swiper .swiper-slide .text a { width: 110px; line-height: 30px; font-size: 12px; margin-top: 10px } .indexBanner .indexBanner_swiper .indexBanner_pagination { bottom: 10px } .index1 .con .box { padding: 20px 10px; width: 100%; text-align: center } .index1 .con .box .icon { height: 40px; text-align: center } .index1 .con .box .icon img { margin: 0 auto } .index1 .con .box .text h5 { margin-top: 15px } .index1 .con .box .text .t { font-size: 14px; line-height: 18px; margin-top: 10px } .index1 .con .box:nth-child(even) .text h5 { margin-top: 15px } .index2 .text h5 { font-size: 18px } .index2 .text .t { margin-top: 10px } .index2 .con { padding: 20px 0; margin-top: 20px } .index2 .con .box { width: 50% } .index2 .con .box .num { font-size: 20px } .index3 .con .tit { font-size: 18px } .index3 .con .left .top .text { padding: 10px } .index3 .con .left .top .text h5 { height: 22px } .index3 .con .left .bot { margin-top: 15px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .index3 .con .left .bot .box { padding: 20px 10px; width: 100% } .index3 .con .left .bot .box h5 { font-size: 14px; line-height: 20px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 20px } .index3 .con .left .bot .box .conn { margin-top: 15px } .index3 .con .left .bot .box:nth-child(2) { margin-top: 10px } .index3 .con .right { margin-top: 15px } .index3 .con .right .Lcon { margin-top: 15px; display: block } .index3 .con .right .Lcon .box { width: 100% } .index3 .con .right .Lcon .box .text { padding: 20px 10px } .index3 .con .right .Lcon .box .text h5 { font-size: 14px } .index3 .con .right .Lcon .box:nth-child(2) { margin-top: 10px } .index3 .con .LBo { line-height: 24px } header .con1440 .right .top .search form { top: 68px !important } .indexBanner .indexBanner_swiper .swiper-slide .topText { top: 55px !important } } .commonBanner { padding-top: 29.428%; background-position: center; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; position: relative } .commonBannerText { position: absolute; color: #fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 0px; top: 50%; width: 100%; text-align: center } .commonBannerText h3 { font-size: 40px; line-height: 1.4; font-weight: 600; text-transform: uppercase } .commonBannerText p { font-size: 18px; line-height: 1.4; color: rgba(255,255,255,0.7) } .commonBanner:nth-child() { background-image: url(../images/solution_01.jpg) } .commonBanner:nth-child() { background-image: url(../images/product_01.jpg) } .commonBanner:nth-child() { background-image: url(../images/technicalStrength_01.jpg) } .commonClass { background: #f6f6f6 } .commonClass ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } .commonClass ul li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .commonClass ul li h3 a { display: block; line-height: 72px; font-size: 16px; color: #3f3f3f; padding: 0px 30px } .commonClass ul li.cur { background: #2a2c89 } .commonClass ul li.cur h3 a { color: #fff } .solutionList { padding-top: 25px } .solutionList dl { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; background: #f6f6f6; margin: 50px 0px 0px } .solutionList dl dt { padding-top: 33.334%; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; position: relative; overflow: hidden } .solutionList dl dt video{position:absolute; left:0px; top:0px; width:100%; height:100%; object-fit:cover} .solutionList dl dt p { left: 0px; top: 0px; width: 100%; height: 100%; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: .6s; -o-transition: .6s; transition: .6s; position: absolute; background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover } .solutionList dl dd { width: 790px; padding: 60px 60px 20px } .solutionList dl dd h3 { font-size: 34px; color: #2f318c; padding-bottom: 10px; font-weight: 700; line-height: 1 } .solutionList dl dd .desc { padding-bottom: 60px; font-size: 15px; color: #7b7b7b } .solutionList dl dd h4 { font-size: 20px; color: #3d3d3d; border-bottom: 1px solid #2f318c; padding-bottom: 15px; font-weight: 600 } .solutionList dl dd .list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 15px } .solutionList dl dd .list p { width: 50%; font-size: 16px; color: #3d3d3d; position: relative; padding: 0px 0px 0px 10px; margin-top: 12px } .solutionList dl dd .list p::after { background: #505050; width: 4.05px; height: 4.05px; position: absolute; left: 0px; top: 10px; content: '' } .solutionList dl:nth-child() dt { background-image: url(../images/solution_02.jpg) } .solutionList dl:nth-child() dt { background-image: url(../images/solution_03.jpg) } .solutionList dl:nth-child() dt { background-image: url(../images/solution_04.jpg) } .solutionList dl:hover dt p { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1) } .solutionList dl:nth-child(2n) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-flow: row-reverse; -ms-flex-flow: row-reverse; flex-flow: row-reverse } .relatedCasesBox { padding: 130px 0px } .relatedCasesBox dl { margin: 0px; padding: 0px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .relatedCasesBox dl dt { font-size: 42px; color: #2f318c; font-weight: 600; text-transform: uppercase; line-height: 1 } .relatedCasesBox dl dd { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } .relatedCasesBox dl dd.noShift span { display: block; width: 36px; height: 36px; cursor: pointer; border-radius: 100%; border: 2px solid #678daa; margin-left: 7px; position: relative; -webkit-transition: .6s; -o-transition: .6s; transition: .6s } .relatedCasesBox dl dd.noShift span::after { width: 8px; height: 8px; left: 58%; top: 53%; content: ''; border-left: 2px solid #678daa; border-bottom: 2px solid #678daa; -webkit-transition: .6s; -o-transition: .6s; transition: .6s; -webkit-transform: rotate(45deg) translate(-50%, -50%); -ms-transform: rotate(45deg) translate(-50%, -50%); -o-transform: rotate(45deg) translate(-50%, -50%); transform: rotate(45deg) translate(-50%, -50%); position: absolute } .relatedCasesBox dl dd.noShift span:nth-child(2)::after { border: none; left: 34%; border-right: 2px solid #678daa; border-top: 2px solid #678daa } .relatedCasesBox dl dd.noShift span:hover { background-color: #2f318c; border-color: #2f318c } .relatedCasesBox dl dd.noShift span:hover::after { border-color: #fff } .relatedCasesBigImg { overflow: hidden; width: 100%; position: relative; margin-top: 65px } .relatedCasesBigImg .swiper-slide { -webkit-transform: translate3d(1px, 0, 0); transform: translate3d(1px, 0, 0) } .relatedCasesBigImgContent { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .relatedCasesBigImgContent .imgBox { padding-top: 35.834%; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; position: relative } .relatedCasesBigImgContent .imgBox video{position:absolute; left:0px; top:0px; width:100%; height:100%; object-fit:cover} .relatedCasesBigImgContent .imgBox p { position: absolute; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: .6s; -o-transition: .6s; transition: .6s; left: 0px; top: 0px; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover } .relatedCasesBigImgContent .imgBox:nth-child() { background-image: url(../images/solution_05.jpg) } .relatedCasesBigImgContent .line { border-bottom: 1px solid #7072ae; margin-top: 40px } .relatedCasesBigImgContent .content { width: 590px; padding: 65px 55px; background-image: url(../images/solution_06.jpg); background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover } .relatedCasesBigImgContent .content h3 { font-size: 26px; color: #2e2e2e; font-weight: 600; display: -webkit-box; height: 70px; line-height: 35px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .relatedCasesBigImgContent .content .desc { font-size: 18px; color: #37383a; display: -webkit-box; height: 168px; line-height: 28px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; margin-top: 45px } .relatedCasesBigImgContent:hover p { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1) } .relatedCasesSmallImg { overflow: hidden; position: relative; width: 100%; margin-top: 30px } .relatedCasesSmallImg ul li { position: relative; overflow: hidden; cursor: pointer } .relatedCasesSmallImg ul li img { width: 100%; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: .6s; -o-transition: .6s; transition: .6s } .relatedCasesSmallImg ul li h3 { padding: 0px 35px; font-size: 16px; line-height: 1.1; font-weight: 700; text-align: center; z-index: 10; color: #fff; position: absolute; left: 0px; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); top: 50%; visibility: visible; opacity: 1; -webkit-transition: .6s; -o-transition: .6s; transition: .6s } .relatedCasesSmallImg ul li::after { background: rgba(0,0,0,0.4); left: 0px; top: 0px; width: 100%; height: 100%; content: ''; position: absolute; -webkit-transition: .6s; -o-transition: .6s; transition: .6s } .relatedCasesSmallImg ul li span { display: none; width: 28px; height: 28px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 20; opacity: 0; visibility: hidden; -webkit-transition: .6s; -o-transition: .6s; transition: .6s } .relatedCasesSmallImg ul li span::after { content: ''; width: 2px; height: 100%; margin-left: -1px; left: 50%; top: 0px; position: absolute; background: #fff } .relatedCasesSmallImg ul li span::before { content: ''; width: 100%; height: 2px; margin-top: -1px; top: 50%; left: 0px; position: absolute; background: #fff } .relatedCasesSmallImg ul li.cur::after { background: rgba(46,48,144,0.9) } .relatedCasesSmallImg ul li.cur span { visibility: visible; opacity: 0 } .relatedCasesSmallImg ul li.cur h3 { opacity: 0; visibility: hidden } .Feedback { padding: 115px 0px; background-image: url(../images/solution_12.jpg); background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover } .FeedbackForm { background: #fff; padding: 65px 0px } .FeedbackForm .title { font-size: 42px; line-height: 1; color: #2f318c; font-weight: 600; text-transform: uppercase; text-align: center } .FeedbackForm .form { max-width: 59%; margin: 0px auto; padding-top: 50px } .FeedbackForm .form ul { margin: 0px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .FeedbackForm .form ul li { width: 50%; padding: 0px 10px 20px; position: relative } .FeedbackForm .form ul li.textarea { width: 100% } .FeedbackForm .form ul li.email { width: 100% } .FeedbackForm .form label { border: 1px solid #e1e1e1; background: #fcfcfc; border-radius: 5px; display: block; padding: 17.03px 25px; position: relative } .FeedbackForm .form label input { width: 100%; vertical-align: middle; background: none; outline: none; font-size: 16px; color: #000000 } .FeedbackForm .form label i { position: absolute; left: 17px; top: 20px; font-size: 16px; color: #ff0000; font-weight: 700 } .FeedbackForm .form label textarea { width: 100%; height: 100px; outline: none; resize: none; font-size: 16px; color: #000000 } .FeedbackForm .form dl { margin: 0px; padding: 0px 10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .FeedbackForm .form dl dt { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; position: relative } .FeedbackForm .form dl dt img { display: block; position: absolute; right: 10px; cursor: pointer; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 100px; height: 43px } .FeedbackForm .form dl dd { padding-left: 45px } .FeedbackForm .form dl dd input { width: 250px; font-size: 15px; border: none; font-weight: 600; outline: none; background: #22247c; text-transform: uppercase; border-radius: 62px; line-height: 60px; color: #fff } .productBox { background: #eee; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f6f6f6)); background-image: -webkit-linear-gradient(#eee, #f6f6f6); background-image: -o-linear-gradient(#eee, #f6f6f6); background-image: linear-gradient(#eee, #f6f6f6); padding: 70px 0px 140px } .productSearch { max-width: 640px; margin: 0px auto; position: relative } .productSearch label { padding: 16px 185px 16px 25px; display: block; background: #fff } .productSearch label input { font-size: 16px; color: #000; width: 100% } .productSearch label input::-webkit-input-placeholder { color: #c8c8c8 } .productSearch label input:-moz-placeholder { color: #c8c8c8 } .productSearch label input::-moz-placeholder { color: #c8c8c8 } .productSearch label input:-ms-input-placeholder { color: #c8c8c8 } .productSearch .btn { width: 160px; font-size: 16px; font-weight: 700; right: 0px; top: 0px; padding-left: 40px; position: absolute; height: 100%; background: #2a2c89 url(../images/product_02.png) no-repeat 40px center; color: #fff } .productList { position: relative; overflow: hidden; padding-top: 40px } .productList ul { margin: 0px -13px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .productList ul li { width: -webkit-calc(25% - 26px); width: calc(25% - 26px); margin: 26px 13px 0px; padding-bottom: 25px; background: #fff } .productList ul li .imgBox { padding-top: 100%; overflow: hidden; position: relative } .productList ul li .imgBox p { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: .6s; -o-transition: .6s; transition: .6s; background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; left: 0px; top: 0px; width: 100%; height: 100%; position: absolute } .productList ul li h3 { padding: 0px 30px; margin-top: 20px; font-size: 16px; color: #2e2e2e; display: -webkit-box; height: 40px; line-height: 20px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-align: center; font-weight: 600 } .productList ul li:hover .imgBox p { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2) } .productList ul li:nth-child() { background-image: url(../images/product_03.jpg) } .productList ul li:nth-child() { background-image: url(../images/product_04.jpg) } .productList ul li:nth-child() { background-image: url(../images/product_05.jpg) } .productList ul li:nth-child() { background-image: url(../images/product_06.jpg) } .productList ul li:nth-child() { background-image: url(../images/product_07.jpg) } .productList ul li:nth-child() { background-image: url(../images/product_08.jpg) } .productList ul li:nth-child() { background-image: url(../images/product_09.jpg) } .productList ul li:nth-child() { background-image: url(../images/product_10.jpg) } .productDetailMain { background: #eee; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #eee), to(#fff)); background-image: -webkit-linear-gradient(#eee 50%, #fff); background-image: -o-linear-gradient(#eee 50%, #fff); background-image: linear-gradient(#eee 50%, #fff); padding: 50px 0px 140px } .productDetailBox { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 65px 72.5px; background: #fff } .productDetailBox .productDetailListImg { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; position: relative; border: 1px solid #f2f2f2 } .productDetailBox .productDetailImg { padding-top: 39.23%; position: relative; overflow: hidden } .productDetailBox .productDetailImg img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 89% } .productDetailBox .productDetailListImg .productDetailListImgPage.noShift { position: absolute; left: 10px; bottom: 15px !important; width: 100%; text-align: center; z-index: 20 } .productDetailBox .productDetailListImg .productDetailListImgPage.noShift span { background: #2f318c; width: 8px; height: 8px; opacity: 0.5; margin: 0px 3px } .productDetailBox .productDetailListImg .productDetailListImgPage span.swiper-pagination-bullet-active { opacity: 1 } .productDetailBox .productDetail { width: 630px; padding-left: 50px; padding-top: 15px } .productDetailBox .productDetail h3 { font-size: 28px; padding-left: 20px; color: #000000; font-weight: 700; line-height: 1; position: relative } .productDetailBox .productDetail h3::after { content: ''; position: absolute; left: 0px; top: 0px; width: 5px; height: 100%; background: #3739a0; background-image: -webkit-gradient(linear, left top, left bottom, from(#3739a0), to(#22247b)); background-image: -webkit-linear-gradient(#3739a0, #22247b); background-image: -o-linear-gradient(#3739a0, #22247b); background-image: linear-gradient(#3739a0, #22247b) } .productDetailBox .productDetail .productDetailTab { border-top: 1px solid #e9e9e9; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; white-space: nowrap; margin-top: 40px } .productDetailBox .productDetail .productDetailTab p { margin-right: 30px; font-size: 16px; line-height: 53px; color: #000000; cursor: pointer; font-weight: 700; border-bottom: 1px solid transparent } .productDetailBox .productDetail .productDetailTab p.cur { border-color: #2a2c89 } .productDetailBox .productDetail .productDetailTab p:last-child { margin-right: 0px } .productDetailBox .productDetail .productDetailTabDesc { display: none; margin-top: 45px; font-size: 16px; color: #393d45; height: 270px; line-height: 1.69; overflow-y: auto; overflow-x: hidden } .productDetailTableBox { padding-top: 70px } .productDetailTableClass { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } .productDetailTableClass a { width: 205px; line-height: 57px; border-radius: 57px; font-size: 16px; margin-right: 20px; display: block; background: #fff; text-align: center; color: rgba(0,0,0,0.5); font-weight: 600 } .productDetailTableClass a.cur { background: #2a2c89; color: #fff } .productDetailTableClass a:last-child { margin: 0px } .productDetailTable { overflow-x: auto; overflow-y: hidden; display: none; font-size: 16px; line-height: 1.9; color: #393d45; padding-top: 45px } .productDetailTable table { border-collapse: collapse; width: 100% } .productDetailTable table th { font-size: 16px; padding: 20px 10px; border: 1px solid #e5e5e5; color: #393d45; text-align: center; background-color: #fff; min-width: 160px } .productDetailTable table td { font-size: 16px; padding: 16px 10px; border: 1px solid #e5e5e5; color: #393d45; text-align: center; background: #fff } .productDetailTable table td .downLoad { display: inline-block; width: 16px; height: 16px; background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; display: none } .productDetailTable table td .downLoad:hover { background-image: url(../images/product_13.png) } .productDetailTable table td:last-child a { font-size: 0 !important; display: block; width: 100%; height: 100% } .Applic-list li { float: left; width: 50% } .technicalStrengthTitle { padding: 70px 0px 60px } .technicalStrengthTitle h3 { font-size: 34px; font-weight: 600; line-height: 1; color: #2f318c; text-transform: uppercase } .technicalStrengthBox { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .technicalStrengthImg { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; position: relative } .technicalStrengthImg ul li { overflow: hidden; position: relative; padding-top: 72.5% } .technicalStrengthImg ul li .imgBox { border-radius: 20px; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover } .technicalStrengthImg ul li .imgBox:nth-child() { background-image: url(../images/technicalStrength_02.jpg) } .technicalStrengthImgPage { position: absolute; z-index: 20; width: 100%; bottom: 20px; text-align: center } .technicalStrengthImgPage span { background: #fff; width: 10px; height: 10px } .technicalStrength { width: 760px; padding-left: 85px } .technicalStrength ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0px -20px } .technicalStrength ul li.noShift { width: -webkit-calc(33.333% - 40px); width: calc(33.333% - 40px); margin: 0px 20px; padding: 80px 0px; border-bottom: 1px solid #c2c2c2; position: relative } .technicalStrength ul li .numBox { font-size: 46px; line-height: 1; color: #000000; font-weight: 600 } .technicalStrength ul li .desc { font-size: 16px; color: #393d45; line-height: 1.06; padding-top: 15px } .technicalStrength ul li::after { content: ''; width: 82px; height: 3px; position: absolute; left: 0px; bottom: -2px; background: #2a2c89 } .technicalStrength ul li .Academician { font-size: 32px } .technicalStrength ul li .AdvancedTechnology { font-size: 30px } .technicalStrength ul li:nth-child(-n+3) { padding-top: 0px } .technicalStrength ul li:nth-child(n+4) .numBox { min-height: 65px } .productionEquipmentBox { background: #f4f3f3; margin-top: 80px; padding: 20px 0px 100px } .productionEquipment { overflow: hidden; position: relative } .productionEquipment ul li .imgBox { padding-top: 70.8%; position: relative; border-radius: 20px 20px 0px 0px; width: 100%; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover } .productionEquipment ul li h3 { font-size: 18px; color: #383838; border-radius: 0px 0px 20px 20px; background: #fff; display: -webkit-box; height: 100px; line-height: 100px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-align: center } .productionEquipment ul li .imgBox:nth-child() { background-image: url(../images/technicalStrength_03.jpg) } .productionEquipment ul li .imgBox:nth-child() { background-image: url(../images/technicalStrength_04.jpg) } .productionEquipment ul li .imgBox:nth-child() { background-image: url(../images/technicalStrength_05.jpg) } .productionEquipmentPage.noShift { text-align: center; padding-top: 15px } .productionEquipmentPage.noShift span { background: #fff; width: 8px; height: 8px; opacity: 1; margin: 0px 3px } .productionEquipmentPage span.swiper-pagination-bullet-active { background: #2f318c } .productionEquipment_swiperBox { position: relative } .productionEquipment_prev,.productionEquipment_next { background-image: none; width: 30px; height: 30px; margin-top: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: block; background-color: rgba(255,255,255,0.4); border-radius: 50%; opacity: 1 } .productionEquipment_prev::before,.productionEquipment_next::before { content: ""; width: 13px; height: 13px; border: 2px solid transparent; position: absolute; top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg) } .productionEquipment_prev { left: -40px } .productionEquipment_next { right: -40px } .productionEquipment_prev::before { border-left-color: #2f318c; border-bottom-color: #2f318c; left: 12px } .productionEquipment_next::before { border-right-color: #2f318c; border-top-color: #2f318c; right: 12px } .technicalStrengthLogo_swiperBox { position: relative } .technicalStrengthLogo_prev,.technicalStrengthLogo_next { background-image: none; width: 30px; height: 30px; margin-top: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: block; background-color: #f4f4f4; border-radius: 50%; opacity: 1 } .technicalStrengthLogo_prev::before,.technicalStrengthLogo_next::before { content: ""; width: 13px; height: 13px; border: 2px solid transparent; position: absolute; top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg) } .technicalStrengthLogo_prev { left: -40px } .technicalStrengthLogo_next { right: -40px } .technicalStrengthLogo_prev::before { border-left-color: #2f318c; border-bottom-color: #2f318c; left: 12px } .technicalStrengthLogo_next::before { border-right-color: #2f318c; border-top-color: #2f318c; right: 12px } .technicalStrengthLogoBox { padding: 100px 0px; position: relative } .technicalStrengthLogo { position: relative; overflow: hidden } .technicalStrengthLogo img { width: 100%; display: block; border-radius: 20px; background: #f4f4f4 } .technicalStrengthLogoPage.noShift { text-align: center; padding-top: 15px } .technicalStrengthLogoPage.noShift span { background: #2f318c; width: 8px; height: 8px; opacity: 0.5; margin: 0px 3px } .technicalStrengthLogoPage span.swiper-pagination-bullet-active { opacity: 1 } .DownloadListBox { padding: 0px 0px 90px } .DownloadList { background: #f9f9f9; border-radius: 20px; padding: 30px 70px 45px } .DownloadList ul li { padding: 30px 0px; border-bottom: 1px solid #e8ebed } .DownloadList ul li a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .DownloadList ul li .icon { min-width: 36px; min-height: 36px; background-image: url(../images/download_01.png); background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover } .DownloadList ul li h3 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 0px 20px; font-size: 18px; display: -webkit-box; height: 24px; line-height: 24px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-weight: 700 } .DownloadList ul li .downloadIcon { min-width: 90px; min-height: 46px; border-radius: 46px; background-color: #2f318c; background-image: url(../images/download_02.png); background-position: center; background-repeat: no-repeat } .contactBox { padding: 20px 0px 90px } .contact ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0px -15px } .contact ul li { width: -webkit-calc(50% - 30px); width: calc(50% - 30px); margin: 0px 15px; padding-top: 22.32%; border-radius: 20px; position: relative; background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover } .contact ul li:nth-child() { background-image: url(../images/Contact_01.jpg) } .contact ul li:nth-child() { background-image: url(../images/Contact_02.jpg) } .contact ul li .content { position: absolute; left: 0px; width: 100%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); text-align: center } .contact ul li .content .icon img { width: 45px } .contact ul li .content h3 { font-size: 24px; line-height: 1; padding: 20px 0px 10px; font-weight: 600; color: #ffffff } .contact ul li .content .title { font-size: 14px; color: rgba(255,255,255,0.5) } .contactService { background: #f6f6f6; border-radius: 20px; margin-top: 30px; padding: 70px 0px 100px } .contactService h3 { font-size: 34px; line-height: 1; color: #2f318c; font-weight: 600; text-align: center; text-transform: uppercase } .contactService ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 1100px; margin: 0px auto } .contactService ul li { margin-top: 80px; width: 33.3333%; border-right: 1px solid #e7e7e7; text-align: center } .contactService ul li p { padding-bottom: 20px } .contactService ul li p img { width: 52px } .contactService ul li h4 { font-size: 20px; color: #344455; line-height: 1.2; max-width: 220px; margin: 0px auto } .contactService ul li:nth-child(3n) { border-right: none } @media (min-width: 992px) { .relatedCasesSmallImg ul li:hover::after { background:rgba(46,48,144,0.9) } .relatedCasesSmallImg ul li:hover span { visibility: visible; opacity: 1 } .relatedCasesSmallImg ul li:hover h3 { opacity: 0; visibility: hidden } .relatedCasesSmallImg ul li:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1) } .defaWebMap { padding: 30px 0px 100px } .defaWebMap dl h3 span { font-size: 20px; top: -12px; padding: 0px 13px } .defaWebMap dl dd { padding-left: 33px; padding-bottom: 15px } .defaWebMap dl dd a { font-size: 14px; padding-right: 20px; padding-bottom: 8px } .defaWebMap dl dd a em { margin-right: 8px; width: 3px; height: 3px } } @media (max-width: 1440px) { .productDetailBox .productDetail .productDetailTab p { margin-right:15px } .productionEquipment_prev { left: 0 } .productionEquipment_next { right: 0 } .technicalStrengthLogo_prev { left: 0 } .technicalStrengthLogo_next { right: 0 } } @media (max-width: 1260px) { .productDetailBox .productDetail .productDetailTab p { margin-right:15px } .technicalStrength ul { margin: 0px -10px } .technicalStrength ul li.noShift { width: -webkit-calc(33.333% - 20px); width: calc(33.333% - 20px); margin: 0px 10px; padding: 40px 0px } .technicalStrength ul li:nth-child(-n+3) { padding-top: 0px } .technicalStrength { width: 650px } } @media (max-width: 992px) { .commonBanner { padding-top:39.428% } .commonBannerText { padding: 0px 20px } .commonBannerText h3 { font-size: 24px } .commonBannerText p { font-size: 16px } .commonClass ul li h3 a { line-height: 50px; font-size: 14px; padding: 0px 15px } .solutionList dl { margin-top: 30px } .solutionList dl dd { padding: 30px 30px 20px } .solutionList dl dd h3 { font-size: 20px; padding-bottom: 10px } .solutionList dl dd .desc { padding-bottom: 15px; font-size: 14px } .solutionList dl dd h4 { font-size: 16px; padding-bottom: 10px } .solutionList dl dd .list p { width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; margin-top: 8px } .solutionList dl dd .list p::after { width: 3px; height: 3px; top: 8px } .relatedCasesBox dl dt { font-size: 24px } .relatedCasesBigImgContent .content { width: 300px } .relatedCasesBigImgContent .content h3 { font-size: 18px; display: -webkit-box; height: 48px; line-height: 24px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .relatedCasesBigImgContent .content .desc { font-size: 14px; display: -webkit-box; height: 132px; line-height: 22px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; margin-top: 25px } .relatedCasesSmallImg ul li h3 { padding: 0px 15px; font-size: 14px } .relatedCasesSmallImg { margin-top: 20px } .relatedCasesSmallImg ul li span { width: 20px; height: 20px } .Feedback { padding: 60px 0px } .FeedbackForm { padding: 35px 0px } .FeedbackForm .form { max-width: 79%; padding-top: 20px } .FeedbackForm .form ul li { padding: 0px 5px 10px } .FeedbackForm .title { font-size: 24px } .FeedbackForm .form label { padding: 10px 15px } .FeedbackForm .form label input { font-size: 14px } .FeedbackForm .form label i { left: 7px; top: 11px; font-size: 14px } .FeedbackForm .form label textarea { font-size: 14px; height: 100px } .FeedbackForm .form dl dt img { width: 100px; height: 34px } .FeedbackForm .form dl dd { padding-left: 25px } .FeedbackForm .form dl dd input { width: 130px; font-size: 14px; border-radius: 43px; line-height: 43px } footer .top .left .t { font-size: 14px } .productDetailMain { padding: 40px 0px 80px } .productDetailBox { padding: 35px 40px } .productDetailBox .productDetail h3 { font-size: 18px; padding-left: 15px } .productDetailBox .productDetail h3::after { width: 5px } .productDetailBox .productDetailImg { -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; width: 100%; padding-top: 59.23% } .productDetailBox .productDetail { width: 100%; padding-top: 25px; padding-left: 0px } .productDetailBox .productDetail .productDetailTab { margin-top: 20px; overflow-x: auto; overflow-y: hidden } .productDetailBox .productDetail .productDetailTab p { margin-right: 25px; font-size: 14px; line-height: 45px } .productDetailBox .productDetail .productDetailTabDesc { margin-top: 25px; font-size: 14px; line-height: 1.4; height: 200px } .productDetailTableBox { padding-top: 40px } .productDetailTableClass { overflow-x: auto; overflow-y: hidden } .productDetailTableClass a { width: 160px; line-height: 45px; border-radius: 45px; font-size: 14px; margin-right: 15px } .productDetailTable { font-size: 14px; padding-top: 30px } .productDetailTable table { min-width: 800px; border-collapse: collapse; width: 100% } .productDetailTable table th { font-size: 12px; padding: 20px 10px } .productDetailTable table td { font-size: 12px; padding: 16px 10px } .productDetailTable table td .downLoad { width: 16px; height: 16px } .productBox { padding: 50px 0px 80px } .productSearch { max-width: 450px } .productSearch label { padding: 10px 120px 10px 15px } .productSearch label input { font-size: 14px } .productSearch .btn { width: 100px; font-size: 14px; padding-left: 25px; background: #2a2c89 url(../images/product_02.png) no-repeat 15px center } .productList { padding-top: 30px } .productList ul { margin: 0px -10px } .productList ul li { width: -webkit-calc(33.333% - 20px); width: calc(33.333% - 20px); margin: 20px 10px 0px; padding-bottom: 20px } .productList ul li h3 { padding: 0px 20px; margin-top: 10px; font-size: 14px; display: -webkit-box; height: 40px; line-height: 20px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .layui-box { margin-top: 45px } .layui-box a,.layui-box .layui-laypage-curr { width: 35px; height: 35px; display: block; line-height: 35px; text-align: center; font-size: 12px; color: #353535; margin: 0 4px; border-radius: 8px } .layui-box .layui-laypage-curr { font-size: 14px } .layui-box .layui-laypage-curr { color: #fff; border: solid 1px #2f318c; background-color: #2f318c } .layui-box .layui-laypage-prev,.layui-box .layui-laypage-next,.layui-box .layui-laypage-last,.layui-box .layui-laypage-first { line-height: 35px; margin: 0 4px } .layui-box .layui-laypage-next { margin-left: 4px } .layui-box .layui-laypage-prev { margin-right: 4px } .productionEquipmentBox { margin-top: 40px; padding: 20px 0px 60px } .technicalStrengthTitle h3 { font-size: 22px } .productionEquipment ul li h3 { font-size: 16px; display: -webkit-box; height: 60px; line-height: 60px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1 } .technicalStrengthLogoBox { padding: 40px 0px } .technicalStrengthTitle { padding: 40px 0px } .technicalStrengthTitle h3 { font-size: 22px } .technicalStrengthImg { width: 100%; -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none } .technicalStrength { width: 100%; padding-top: 30px; padding-left: 0px } .technicalStrength ul { margin: 0px -10px } .technicalStrength ul li.noShift { width: -webkit-calc(33.333% - 20px); width: calc(33.333% - 20px); margin: 0px 10px; padding: 20px 0px } .technicalStrength ul li:nth-child(-n+3) { padding-top: 0px } .technicalStrength ul li .numBox { font-size: 24px } .technicalStrength ul li .desc { font-size: 14px; padding-top: 10px } .technicalStrength ul li::after { width: 42px; height: 3px; bottom: -2px } .technicalStrength ul li .Academician { font-size: 18px } .technicalStrength ul li .AdvancedTechnology { font-size: 18px } .contact ul li .content .icon img { width: 35px } .contact ul li .content h3 { font-size: 16px; padding: 10px 0px 5px } .contact ul li .content .title { font-size: 14px } .contactService { margin-top: 20px; padding: 45px 0px 65px } .contactService h3 { font-size: 22px } .contactService ul { max-width: 1100px; padding: 0px 30px } .contactService ul li { margin-top: 40px; width: 33.3333% } .contactService ul li p { padding-bottom: 20px } .contactService ul li p img { width: 35px } .contactService ul li h4 { font-size: 14px; max-width: 220px } .DownloadListBox { padding: 0px 0px 50px } .DownloadList { padding: 20px 40px 25px } .DownloadList ul li { padding: 15px 0px } .DownloadList ul li .icon { min-width: 26px; min-height: 26px } .DownloadList ul li h3 { padding: 0px 15px; font-size: 16px; display: -webkit-box; height: 20px; line-height: 20px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1 } .DownloadList ul li .downloadIcon { min-width: 70px; min-height: 36px; border-radius: 36px } .defaWebMap { padding: 10px 0px 60px } .defaWebMap dl h3 span { font-size: 18px; top: -12px; padding: 0px 13px } .defaWebMap dl dd { padding-left: 33px; padding-bottom: 15px } .defaWebMap dl dd a { font-size: 14px; padding-right: 20px; padding-bottom: 8px } .defaWebMap dl dd a em { margin-right: 8px; width: 3px; height: 3px } } @media (max-width: 768px) { .commonBanner { padding-top:52.428% } .commonBannerText h3 { font-size: 18px } .commonBannerText p { font-size: 14px } .commonClass { overflow-y: hidden; overflow-x: auto } .commonClass ul li h3 a { line-height: 40px; white-space: nowrap; font-size: 14px; padding: 0px 10px } .solutionList dl:nth-child(2n) { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column } .solutionList dl dt { width: 100%; -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; padding-top: 53.334% } .solutionList dl dd { width: 100%; padding: 15px } .solutionList dl dd h3 { font-size: 18px; padding-bottom: 10px } .solutionList dl dd h4 { font-size: 14px; padding-bottom: 10px } .solutionList dl dd .list p { width: 100%; margin-top: 5px; font-size: 12px } .relatedCasesBigImgContent .imgBox { width: 100%; -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; padding-top: 55.834% } .relatedCasesBigImgContent .content { width: 100% } .relatedCasesBigImgContent .content h3 { font-size: 16px; display: -webkit-box; height: 48px; line-height: 24px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .relatedCasesBigImgContent .content .desc { font-size: 12px; display: -webkit-box; height: 88px; line-height: 22px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; margin-top: 10px } .relatedCasesSmallImg { margin-top: 15px } .relatedCasesBox dl dt { font-size: 18px } .Feedback { padding: 30px 0px } .FeedbackForm .form { max-width: 90% } .FeedbackForm .form ul li { width: 100%; padding: 0px 0px 10px } .FeedbackForm .form dl dt { width: 100%; -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none } .FeedbackForm .form dl dd { width: 100%; padding: 20px 0px 0px; text-align: center } .productDetailBox { padding: 20px 15px } .productDetailBox .productDetail .productDetailTab p { margin-right: 15px; line-height: 40px } .productDetailMain { padding: 25px 0px 50px } .productDetailTableBox { padding-top: 25px } .productDetailTableClass a { width: 90px; line-height: 40px; border-radius: 40px; font-size: 12px; margin-right: 10px } .productDetailTable { padding-top: 20px } .productBox { padding: 30px 0px 40px } .technicalStrengthLogoBox { padding: 30px 0px } .productionEquipmentBox { margin-top: 30px; padding: 20px 0px 30px } .technicalStrengthTitle h3 { font-size: 18px } .productionEquipment ul li h3 { font-size: 14px; display: -webkit-box; height: 40px; line-height: 40px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1 } .technicalStrengthTitle { padding: 25px 0px } .technicalStrengthTitle h3 { font-size: 18px } .technicalStrength { padding-top: 20px } .technicalStrength ul { margin: 0px -5px } .technicalStrength ul li.noShift { width: -webkit-calc(50% - 10px); width: calc(50% - 10px); margin: 0px 5px; padding: 15px 0px } .technicalStrength ul li:nth-child(-n+2) { padding-top: 0px } .technicalStrength ul li .numBox { font-size: 18px } .technicalStrength ul li .desc { font-size: 12px; padding-top: 10px } .technicalStrength ul li::after { width: 32px; height: 3px; bottom: -2px } .technicalStrength ul li .Academician { font-size: 16px } .technicalStrength ul li .AdvancedTechnology { font-size: 16px } .technicalStrength ul li:nth-child(n+5) .numBox { min-height: 30px } .contact ul li .content .icon img { width: 30px } .contact ul li .content h3 { font-size: 14px; padding: 5px 0px 5px } .contact ul li .content .title { font-size: 12px } .contactService h3 { font-size: 18px } .contactService { margin-top: 15px; padding: 30px 0px } .contactService ul { padding: 0px 15px } .contactService ul li { margin-top: 25px } .contactService ul li p { padding-bottom: 15px } .contactService ul li p img { width: 30px } .contactService ul li h4 { font-size: 12px; max-width: 220px } .DownloadListBox { padding: 0px 0px 35px } .DownloadList { padding: 15px 20px 25px } .layui-box { margin-top: 25px } .defaWebMap { padding: 10px 0px 40px } .defaWebMap dl { margin-top: 30px } .defaWebMap dl h3 span { font-size: 16px; top: -12px; padding: 0px 13px } .defaWebMap dl dd a { font-size: 12px; padding-right: 20px } .defaWebMap dl dd a em { margin-right: 8px; width: 3px; height: 3px } .Applic-list li { float: none; width: 100% } } @media (max-width: 520px) { .productDetailTable table th { min-width:130px } .commonBanner { padding-top: 69.428% } .commonBannerText { top: -webkit-calc(50% + 20px); top: calc(50% + 20px) } .commonBannerText h3 { font-size: 16px } .productList { padding-top: 20px } .productList ul { margin: 0px -5px } .productList ul li { width: -webkit-calc(50% - 10px); width: calc(50% - 10px); margin: 10px 5px 0px; padding-bottom: 20px } .contact ul { margin: 0px } .contact ul li { width: 100%; margin: 15px 0px 0px; padding-top: 35.32% } .contact ul li .content .icon img { width: 25px } .contactService h3 { padding-bottom: 15px } .contactService ul li { margin-top: 20px; width: 50%; border-right: 1px solid #e7e7e7 !important } .contactService ul li:nth-child(2n) { border-right: none !important } .DownloadList ul li { padding: 10px 0px } .DownloadList ul li .icon { min-width: 22px; min-height: 22px } .DownloadList ul li h3 { padding: 0px 10px; font-size: 14px; display: -webkit-box; height: 20px; line-height: 20px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1 } .DownloadList ul li .downloadIcon { min-width: 50px; min-height: 30px; border-radius: 30px; -webkit-background-size: 13px 13px; background-size: 13px } }