/*-----------------[初始化]--------------*/ /*-----------------[初始化]--------------*/ @font-face { font-family: 'scRegular'; src:url('../font/sc-regular.OTF') format('opentype'); /* 最后加载 TTF */ font-weight: normal; font-style: normal; } @font-face { font-family: 'scBold'; src:url('../font/sc-bold.OTF') format('opentype'); /* 最后加载 TTF */ font-weight: normal; font-style: normal; } @font-face { font-family: 'scHeavy'; src:url('../font/sc-heavy.OTF') format('opentype'); /* 最后加载 TTF */ font-weight: normal; font-style: normal; } .scRegular{font-family: 'scRegular';} .scBold{font-family: 'scBold';} .scHeavy{ font-family: 'scHeavy'; /* font-family: 'scRegular'; */ /* font-family: 'scBold' */ } *{ outline:none;word-wrap:break-word;} body{color: #333;font-size: 0.22rem;font-family:Arial, Helvetica, sans-serif; line-height: 1.6;} a{color: #333; outline:none; text-decoration:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s} h1,h2,h3,h4,h5,h6,i.cutline,i.require{ font-weight:normal; font-style: normal;} a:hover{ text-decoration:none;} img{max-width: 100%; vertical-align: middle; display: inline-block;} img,.ani{ transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } input,textarea,select,button{font-size: 0.22rem;font-family:"微软雅黑","Microsoft Yahei",Arial, Helvetica, sans-serif; outline: 0; background: none; border: none;-o-box-sizing: border-box;box-sizing: border-box; } input[type='text']:focus,textarea:focus,select:focus{ border-color: #090 !important;} input[type='submit'],input[type='reset'],input[type='button'],button{cursor: pointer;-moz-appearance: none; appearance: none; -webkit-appearance: none;} input[type='radio'],input[type='checkbox']{ display: inline-block; vertical-align: middle;} input[type='radio'],input[type='checkbox']{ width: 0.18rem; height: 0.18rem; border: 1px solid #666; background-color: #fff; -o-background-size: 100% 100%; background-size: 100% 100%; -moz-appearance: none; appearance: none; -webkit-appearance: none; outline: 0; -moz-box-sizing: border-box; box-sizing: border-box;} input[type='radio']{ border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; } input[type='checkbox']{ border-radius:0.04rem ; -webkit-border-radius:0.04rem ; -moz-border-radius:0.04rem ; -ms-border-radius:0.04rem ; -o-border-radius:0.04rem ; } input[type='radio']:checked{ border-color: #090; background-color: #fff;background-image: url(../images/icon/checked_radio.png);} input[type='checkbox']:checked{ background-image: url(../images/icon/checked.png); background-color: #090; border-color: #090;} .tc{text-align:center;} .tl{text-align:left} .tr{text-align:right} .fl{float: left;} .fr{float: right;} /*布局*/ /* 清理浮动 */ .cle:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} .cle:after{zoom:1;} .clear{clear: both;} .rd2{ border-radius:0.02rem; -webkit-border-radius:0.02rem; -moz-border-radius:0.02rem; -ms-border-radius:0.02rem; -o-border-radius:0.02rem; }.rd3{ border-radius:0.03rem; -webkit-border-radius:0.03rem; -moz-border-radius:0.03rem; -ms-border-radius:0.03rem; -o-border-radius:0.03rem; }.rd4{ border-radius:0.04rem; -webkit-border-radius:0.04rem; -moz-border-radius:0.04rem; -ms-border-radius:0.04rem; -o-border-radius:0.04rem; }.rd5{ border-radius:0.05rem; -webkit-border-radius:0.05rem; -moz-border-radius:0.05rem; -ms-border-radius:0.05rem; -o-border-radius:0.05rem; }.rd6{ border-radius:0.06rem; -webkit-border-radius:0.06rem; -moz-border-radius:0.06rem; -ms-border-radius:0.06rem; -o-border-radius:0.06rem; }.rd7{ border-radius:0.07rem; -webkit-border-radius:0.07rem; -moz-border-radius:0.07rem; -ms-border-radius:0.07rem; -o-border-radius:0.07rem; }.rd8{ border-radius:0.08rem; -webkit-border-radius:0.08rem; -moz-border-radius:0.08rem; -ms-border-radius:0.08rem; -o-border-radius:0.08rem; }.rd9{ border-radius:0.09rem; -webkit-border-radius:0.09rem; -moz-border-radius:0.09rem; -ms-border-radius:0.09rem; -o-border-radius:0.09rem; }.rd10{ border-radius:0.1rem; -webkit-border-radius:0.1rem; -moz-border-radius:0.1rem; -ms-border-radius:0.1rem; -o-border-radius:0.1rem; }.rd11{ border-radius:0.11rem; -webkit-border-radius:0.11rem; -moz-border-radius:0.11rem; -ms-border-radius:0.11rem; -o-border-radius:0.11rem; }.rd12{ border-radius:0.12rem; -webkit-border-radius:0.12rem; -moz-border-radius:0.12rem; -ms-border-radius:0.12rem; -o-border-radius:0.12rem; }.rd13{ border-radius:0.13rem; -webkit-border-radius:0.13rem; -moz-border-radius:0.13rem; -ms-border-radius:0.13rem; -o-border-radius:0.13rem; }.rd14{ border-radius:0.14rem; -webkit-border-radius:0.14rem; -moz-border-radius:0.14rem; -ms-border-radius:0.14rem; -o-border-radius:0.14rem; }.rd15{ border-radius:0.15rem; -webkit-border-radius:0.15rem; -moz-border-radius:0.15rem; -ms-border-radius:0.15rem; -o-border-radius:0.15rem; }.rd20{ border-radius:0.2rem; -webkit-border-radius:0.2rem; -moz-border-radius:0.2rem; -ms-border-radius:0.2rem; -o-border-radius:0.2rem; }.rd24{ border-radius:0.24rem; -webkit-border-radius:0.24rem; -moz-border-radius:0.24rem; -ms-border-radius:0.24rem; -o-border-radius:0.24rem; }.rd28{ border-radius:0.28rem; -webkit-border-radius:0.28rem; -moz-border-radius:0.28rem; -ms-border-radius:0.28rem; -o-border-radius:0.28rem; }.rd30{ border-radius:0.3rem; -webkit-border-radius:0.3rem; -moz-border-radius:0.3rem; -ms-border-radius:0.3rem; -o-border-radius:0.3rem; }.rd40{ border-radius:0.4rem; -webkit-border-radius:0.4rem; -moz-border-radius:0.4rem; -ms-border-radius:0.4rem; -o-border-radius:0.4rem; }.rd50{ border-radius:0.5rem; -webkit-border-radius:0.5rem; -moz-border-radius:0.5rem; -ms-border-radius:0.5rem; -o-border-radius:0.5rem; }.rd60{ border-radius:0.6rem; -webkit-border-radius:0.6rem; -moz-border-radius:0.6rem; -ms-border-radius:0.6rem; -o-border-radius:0.6rem; }.rd70{ border-radius:0.7rem; -webkit-border-radius:0.7rem; -moz-border-radius:0.7rem; -ms-border-radius:0.7rem; -o-border-radius:0.7rem; }.rd80{border-radius:80px;}.rd90{border-radius:90px;} .rdhalf{ border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; }.rdwhole{ /* Firefox */ /* Safari 和 Chrome */border-radius: 100%; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */} .mt5{ margin-top: 0.05rem;}.mt10{ margin-top: 0.1rem;}.mt15{ margin-top: 0.15rem;}.mt18{ margin-top: 0.18rem;}.mt20{ margin-top: 0.2rem;}.mt25{ margin-top: 0.25rem;}.mt30{ margin-top: .3rem;}.mt35{ margin-top: .35rem;}.mt40{ margin-top: .4rem;}.mt45{ margin-top: .45rem;}.mt50{ margin-top: .5rem;}.mt60{ margin-top: .6rem;}.mt70{ margin-top: .7rem;}.mt80{ margin-top: .8rem;}.mt90{ margin-top: .9rem;}.mt100{ margin-top:1rem;}.mt150{ margin-top:1.5rem;}.mt180{ margin-top:1.8rem;}.mt200{ margin-top:2rem;}.mt-10{ margin-top: -0.1rem;}.mt-20{ margin-top: -0.2rem;}.mt-30{ margin-top: -0.3rem;}.mt-40{ margin-top: -0.4rem;}.mt-50{ margin-top: -0.5rem;}.mt-60{ margin-top: -0.6rem;} .mb0{ margin-bottom: 0px;} .mb5{ margin-bottom: .05rem;}.mb10{ margin-bottom: .1rem;}.mb15{ margin-bottom: .15rem;}.mb20{ margin-bottom: .2rem;}.mb25{ margin-bottom: .25rem;}.mb30{ margin-bottom: .3rem;}.mb40{ margin-bottom: .4rem;}.mb50{ margin-bottom: .5rem;}.mb60{ margin-bottom: .6rem;}.mb80{ margin-bottom: .8rem;} .mr5{ margin-right: .05rem;}.mr10{ margin-right: .1rem;}.mr15{ margin-right: .15rem;}.mr20{ margin-right: .2rem;}.mr25{ margin-right: .25rem;}.mr30{ margin-right: .3rem;}.mr40{ margin-right: .4rem;}.mr60{ margin-right: .6rem;}.mr80{ margin-right: .8rem;}.mr100{ margin-right: 1rem;} .pl10{ padding-left: .1rem;}.pl20{ padding-left: .2rem;}.pl25{ padding-left: .25rem;}.pl30{ padding-left: .3rem;}.pl40{ padding-left: .4rem;}.pl50{ padding-left: .5rem;}.pl60{ padding-left: .6rem;}.pl80{ padding-left: .8rem;}.pl100{ padding-left: 1rem;} .pr10{ padding-right: .1rem;}.pr20{ padding-right: .2rem;}.pr25{ padding-right: .25rem;}.pr30{ padding-right: .3rem;}.pr40{ padding-right: .4rem;}.pr50{ padding-right: .5rem;}.pr60{ padding-right: .6rem;}.pr80{ padding-right: .8rem;}.pr100{ padding-right: 1rem;} .pb10{ padding-bottom: 0.10rem;}.pb20{ padding-bottom: 0.20rem;}.pb25{ padding-bottom: 0.25rem;}.pb30{ padding-bottom: 0.30rem;}.pb40{ padding-bottom: 0.40rem;}.pb50{ padding-bottom: 0.50rem;}.pb60{ padding-bottom: 0.60rem;}.pb100{ padding-bottom: 1rem;} .pt10{ padding-top: 0.10rem;}.pt20{ padding-top: 0.20rem;}.pt25{ padding-top: 0.25rem;}.pt30{ padding-top: 0.30rem;}.pt40{ padding-top: 0.40rem;}.pt50{ padding-top: 0.50rem;}.pt100{ padding-top: 1rem;} .plr{ padding-left: 0.30rem; padding-right: 0.30rem;}.plr10{ padding-left: 0.10rem; padding-right: 0.10rem;}.plr20{ padding-left: 0.20rem; padding-right: 0.20rem;}.plr25{ padding-left: 0.25rem; padding-right: 0.25rem;}.plr30{ padding-left: 0.30rem; padding-right: 0.30rem;}.plr40{ padding-left: 0.40rem; padding-right: 0.40rem;}.plr50{ padding-left: 0.50rem; padding-right: 0.50rem;}.plr60{ padding-left: 0.60rem; padding-right: 0.60rem;} .ptb5{padding-bottom: 0.05rem; padding-top: 0.05rem;} .ptb10{padding-bottom: 0.10rem; padding-top: 0.10rem;} .ptb12{padding-bottom: 0.12rem; padding-top: 0.12rem;} .ptb15{padding-bottom: 0.15rem; padding-top: 0.15rem;} .ptb20{padding-bottom: 0.20rem; padding-top: 0.20rem;}.ptb25{padding-bottom: 0.25rem; padding-top: 0.25rem;}.ptb30{padding-bottom: 0.30rem; padding-top: 0.30rem;}.ptb35{padding-bottom: 0.35rem; padding-top: 0.35rem;}.ptb40{padding-bottom: 0.40rem; padding-top: 0.40rem;}.ptb50{padding-bottom: 0.50rem; padding-top: 0.50rem;}.ptb60{padding-bottom: 0.60rem; padding-top: 0.60rem;}.ptb80{padding-bottom: 0.80rem; padding-top: 0.80rem;}.ptb100{padding-bottom: 0.100rem; padding-top: 0.100rem;}.ptb150{padding-bottom: 0.150rem; padding-top: 0.150rem;}.ptb200{padding-bottom: 0.200rem; padding-top: 0.200rem;} .p5{ padding:0.05rem}.p10{ padding:0.10rem} .p20{ padding:0.20rem}.p30{ padding:0.30rem}.p2030{ padding:0.20rem 0.30rem}.p40{ padding:0.40rem}.p3040{ padding:0.30rem 0.40rem} .f0{ font-size: 0px;}.f20{ font-size: 0.20rem;}.f22{ font-size: 0.22rem;}.f24{ font-size: 0.24rem;}.f26{ font-size: 0.26rem;}.f28{ font-size: 0.28rem;}.f30{ font-size: 0.30rem;}.f32{ font-size: 0.32rem;}.f34{ font-size: 0.34rem;}.f36{ font-size: 0.36rem;} .f38{ font-size: 0.38rem;}.f40{ font-size: 0.40rem;} .f42{ font-size: 0.42rem;}.f44{ font-size: 0.44rem;}.f48{ font-size: 0.48rem;}.f50{ font-size: 0.50rem;}.f52{ font-size: 0.52rem;}.f60{ font-size: 0.60rem;}.f64{ font-size: 0.64rem;}.f70{ font-size: 0.70rem;}.f80{ font-size: 0.80rem;}.f90{ font-size: 0.90rem;}.f100{ font-size: 11rem;} .img10{ width: 0.10rem; height: 0.10rem;} .img12{ width: 0.12rem; height: 0.12rem;} .img14{ width: 0.14rem; height: 0.14rem;} .img16{ width: 0.16rem; height: 0.16rem;} .img18{ width: 0.18rem; height: 0.18rem;} .img20{ width: 0.20rem; height: 0.20rem;} .img24{ width: 0.24rem; height: 0.24rem;} .img26{ width: 0.26rem; height: 0.26rem;} .img28{ width: 0.28rem; height: 0.28rem;} .img30{ width: 0.30rem; height: 0.30rem;} .img32{ width: 0.32rem; height: 0.32rem;} .img36{ width: 0.36rem; height: 0.36rem;} .img40{ width: 0.40rem; height: 0.40rem;} .img44{ width: 0.44rem; height: 0.44rem;} .img48{ width: 0.48rem; height: 0.48rem;} .img50{ width: 0.50rem; height: 0.50rem;} .img52{ width: 0.52rem; height: 0.52rem;} .img55{ width: 0.55rem; height: 0.55rem;} .img56{ width: 0.56rem; height: 0.56rem;} .img60{ width: 0.60rem; height: 0.60rem;} .img64{ width: 0.64rem; height: 0.64rem;} .img66{ width: 0.66rem; height: 0.66rem;} .img80{ width: 0.80rem; height: 0.80rem;} .img86{ width: 0.86rem; height: 0.86rem;} .img90{ width: 0.90rem; height: 0.90rem;} .img100{ width: 0.100rem; height: 0.100rem;} .img110{ width: 0.110rem; height: 0.110rem;} .img120{ width: 0.120rem; height: 0.120rem;} .img150{ width: 0.150rem; height: 0.150rem;} .img180{ width: 0.180rem; height: 0.180rem;} .img200{ width: 0.200rem; height: 0.200rem;} .imgfull{ width: 100%;} .bcf{ color: #fff;} .bc3{ color: #333;} .bcc{ color: #ccc;} .bc9{ color: #999;} .bc6{ color: #666;} .b{ font-weight: bold;} .bg_fa{ background-color: #fafafa;} .bg_f2{ background-color: #f2f2f2;} .bg_f1{ background-color: #f1f1f1;} .bg_f5{ background-color: #f5f5f5;} .bg_f6{ background-color: #f6f6f6;} .bg_f7{ background-color: #f7f7f7;} .bg_f8{ background-color: #f8f8f8;} .bg_f9{ background-color: #f9f9f9;} .bg_e{ background-color: #eee;} .bg_d{ background-color: #ddd;} .bg_w{ background-color: #fff;} .elli{display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .elli2,.elli3,.elli4{display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} .elli2{-webkit-line-clamp: 2;} .elli3{-webkit-line-clamp: 3;} .elli4{-webkit-line-clamp: 4;} .bcover{ -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat;} .pcshow{ display:block;} .wapshow{ display:none;} /* .wp{width: 89.6%; margin: 0 auto; } */ .wp{margin: 0 120px; } .btn{ display: inline-block;} /* .btn .icon,.btn .iconfont,.btn .val,.btn .mc{ display: inline-block; vertical-align: middle;} .iconfont::before,.iconfont::before{ display: inline-block; line-height: 1; vertical-align: middle;} */ .ibm{ display: inline-block; vertical-align: middle;} @-webkit-keyframes zoomin_out{ 0%{-webkit-transform:scale(1);} 50%{-webkit-transform:scale(1.1);} 100%{-webkit-transform:scale(1);} } @keyframes zoomin_out{ 0%{-webkit-transform:scale(1);transform:scale(1);} 50%{-webkit-transform:scale(1.1);transform:scale(1.1);} 100%{-webkit-transform:scale(1);transform:scale(1);} } /* .banner .swiper-slide-active .banimg{-webkit-animation: zoomin_out 20s infinite ease-in-out;-moz-animation: zoomin_out 20s infinite ease-in-out;-ms-animation: zoomin_out 20s infinite ease-in-out;-o-animation: zoomin_out 20s infinite ease-in-out;} */ .footer_wap{background:#333; display:none;} .footerWapul{ margin-bottom:0;} .footerWapul li{ width:25%; float:left; text-align:center;color:#fff; border-right:1px solid #f9c7ce; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; padding:4px 0;} .footerWapul li a{color:#fff;} .footerWapul li img{ width:24px; height:auto} .footerWapul li .tit{ width:100%; text-align:center; font-size:14px; } .act_footerWap a{ color: #090 !important;} .sbtn{font-size:0.22rem; display: inline-block; padding: 0.4em 0.18em; border: 1px solid transparent; box-sizing: border-box; text-align: center;} .sbtn_w100{ width: 100%; padding-left: 0; padding-right: 0;} .sbtn_green{ color: #fff; background:#09554C; } .sbtn_green:hover{ background:#065e53;} .sbtn_green_rim{ border: 1px solid #09554C; color: #09554C; } .sbtn_green_rim:hover{ background-color: #09554C; color: #fff;} .sbtn_green2{ color: #fff; background:#34912C; } .sbtn_green2:hover{ background:#2ec520;} .sbtn_gray_rim{ border: 1px solid rgba(255,255,255,.5); color: #fff;} .sbtn_gray_rim:hover{ border-color: #22942B; background-color: #22942B; color: #fff;} .sbtn_white_rim{ border: 1px solid rgba(255,255,255,1); color: #fff;} .sbtn_white_rim:hover{ border-color: #22942B; background-color: #22942B; color: #fff;} .green{ color: #09554C;} /* 表单 */ .perInfoForm{ width: 3.8rem; max-width: 100%; margin-top: 0.20rem; } .perInfoForm .item{ display: flex; margin-bottom: 0.28rem;} .perInfoForm .item .attrmc{ width:0.88rem; text-align: right; line-height: 0.36rem; margin-right: 0.10rem; display: inline-block;} .perInfoForm .item .attrval{ flex: 1;} .perInfoForm .text{ display: block; width: 100%; padding-left: 0.15rem; border: 1px solid #D3D3D3; height: 0.36rem; line-height: 0.36rem; font-size: 0.14rem; background-color: #fff; } .perInfoForm .select{display: block; width: 100%; border:1px solid #C6C6C6; height: 0.36rem; line-height: 0.36rem; font-size: 0.14rem; background-color: #fff;} .perInfoForm .msg{ color: #999; line-height: 1.8; margin-top: 0.10rem;} .perInfoForm .tj{ padding-top: 0.20rem; padding-left: 0.98rem;} .perInfoForm .tj .sbtn{ font-size: 0.18rem;} /* 上传fileBtn */ .filebtn{width: 1.2rem; border: 1px solid #C6C6C6; height: 0.36rem; line-height: 0.36rem; font-size: 0.14rem; background-color: #fff; position: relative; text-align: center; cursor: pointer;} .filebtn .file{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0;} .filebtn:hover{ border-color: #62B6CB; color: #62B6CB;} /* 弹窗 */ .pupbg{ background-color: rgba(0, 0, 0, .6); width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 200;} .pup{position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); width: 85%; z-index: 205;} .resumePup{ width: 5rem;} .closePup{ position: absolute; right:0.15rem; top: 0.15rem; line-height: 1;cursor: pointer; font-size: 0.16rem; color: #999; display: inline-block; width: 0.4rem; height: 0.4rem; text-align: center; line-height: 0.4rem; } .closePup:hover{ color: #333;} .resumeMain{ padding: 0.1rem 0.6rem 0.36rem;} /* 列表 */ .bnews{ padding: 1rem 0;} .bnewsul{ padding-bottom: 0.6rem;} .bnewsul li{ width: 31.33%; float: left; margin:0 3% 3% 0 ;} .bnewsul li:nth-child(3n){ margin-right: 0;} .bnewsItem{} .bnewsItem a{ display: block;} .bnewsItem .tparea{ font-size: 0; overflow: hidden;} .bnewsItem .tparea .tp{ width: 100%;} .bnewsItem .des{ padding: 0.15rem 0.25rem 0; border: 1px solid #ddd; border-width: 0 1px 1px; } .bnewsItem .des .tit{ font-size:0.24rem;white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; } .bnewsItem .des .nr{ font-size: 0.16rem; color: #666; line-height: 1.8; margin-top: 0.05rem;} .bnewsItem a:hover .des{box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.07);} .bnewsItem a:hover .des .tit{ color: #036eb8;} .bnewsItem a:hover .tparea .tp{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); } .bnewsItem .des .info{ margin-top: 0.15rem; padding: 0.15rem 0; color: #999; border-top: 1px solid #F1F1F1;} .bnewsItem .des .info .time{ font-size: 0.16rem;} .bnewsItem .des .info .time::before{ font-size: 0.18rem; margin-right: 0.05rem;} .bnewsItem .des .info .morea{font-size: 0.16rem; cursor: pointer; float: right;} .bnewsItem .des .info .morea .val{} .bnewsItem .des .info .morea .iconfont{ font-size: 0.14rem;margin-left: 0.05rem; width: 0.16rem; height: 0.16rem; border: 1px solid #999 ; text-align: center; line-height: 0.16rem; } .bnewsItem .des .info .morea:hover{ color: #036eb8;} .bnewsItem .des .info .morea:hover .iconfont{ border-color: #036eb8;} /* 大图 */ .bigimgw100,.bigimgMain{ font-size:0 ; overflow: hidden;} .bigimgw100 .tp{ width: 100%;} .bigimgMain .tp{ width: 100%;} /* flex */ .flex{ display: flex; flex-wrap: wrap; justify-content: space-between;} .centerXY{ display: flex; align-items: center;justify-content: center;} .centerY{ display: flex; align-items: center;} .centerX{justify-content: center} .rowW{ display: flex; flex-wrap: wrap;} .betweenX{ display: flex; flex-direction: row; justify-content: space-between;} .betweenY{ display: flex; flex-direction:column; justify-content: space-between;} .centerAXY{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} @-webkit-keyframes fadeInUp3 { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0) ; transform: translate3d(0, 100%, 0) rotate(-90deg); } to { opacity: 1; -webkit-transform: rotate(-90deg); transform:rotate(-90deg); } } @-moz-keyframes fadeInUp3 { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0) rotate(-90deg); -moz-transform: translate3d(0, 100%, 0) rotate(-90deg); transform: translate3d(0, 100%, 0) rotate(-90deg); } to { opacity: 1; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); } } @-o-keyframes fadeInUp3 { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0) rotate(-90deg); transform: translate3d(0, 100%, 0) rotate(-90deg); } to { opacity: 1; -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } } @keyframes fadeInUp3 { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0) rotate(-90deg); -moz-transform: translate3d(0, 100%, 0) rotate(-90deg); transform: translate3d(0, 100%, 0) rotate(-90deg); } to { opacity: 1; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } } .fadeInUp3 { -webkit-animation-name: fadeInUp3; -moz-animation-name: fadeInUp3; -o-animation-name: fadeInUp3; animation-name: fadeInUp3 } @-webkit-keyframes fadeInUp2 { 0% { opacity: 0; -webkit-transform: translate3d(0,10%, 0); transform: translate3d(0, 10%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-moz-keyframes fadeInUp2 { 0% { opacity: 0; -webkit-transform: translate3d(0,10%, 0); -moz-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0) } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none } } @-o-keyframes fadeInUp2 { 0% { opacity: 0; -webkit-transform: translate3d(0,10%, 0); transform: translate3d(0, 10%, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } @keyframes fadeInUp2 { 0% { opacity: 0; -webkit-transform: translate3d(0,10%, 0); -moz-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0) } to { opacity: 1; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none } } .fadeInUp2 { -webkit-animation-name: fadeInUp2; -moz-animation-name: fadeInUp2; -o-animation-name: fadeInUp2; animation-name: fadeInUp2 } @-webkit-keyframes zoombig { 0%{-webkit-transform: scale(1.2,1.2);transform: scale(1.2,1.2);} 100%{-webkit-transform: scale(1,1);transform: scale(1,1);} } @-moz-keyframes zoombig { 0%{-moz-transform: scale(1.2,1.2);transform: scale(1.2,1.2);} 100%{-moz-transform: scale(1,1);transform: scale(1,1);} } @-o-keyframes zoombig { 0%{-o-transform: scale(1.2,1.2);transform: scale(1.2,1.2);} 100%{-o-transform: scale(1,1);transform: scale(1,1);} } @keyframes zoombig { 0%{-webkit-transform: scale(1.2,1.2);-moz-transform: scale(1.2,1.2);-o-transform: scale(1.2,1.2);transform: scale(1.2,1.2);} 100%{-webkit-transform: scale(1,1);-moz-transform: scale(1,1);-o-transform: scale(1,1);transform: scale(1,1);} } @-webkit-keyframes moves { 0%{-webkit-transform: translateY(0px);transform: translateY(0px);} 50%{-webkit-transform: translateY(-20px);transform: translateY(-20px);} 100%{-webkit-transform: translateY(0px);transform: translateY(0px);} } @-moz-keyframes moves { 0%{-moz-transform: translateY(0px);transform: translateY(0px);} 50%{-moz-transform: translateY(-20px);transform: translateY(-20px);} 100%{-moz-transform: translateY(0px);transform: translateY(0px);} } @-o-keyframes moves { 0%{-o-transform: translateY(0px);transform: translateY(0px);} 50%{-o-transform: translateY(-20px);transform: translateY(-20px);} 100%{-o-transform: translateY(0px);transform: translateY(0px);} } @keyframes moves { 0%{-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);} 50%{-webkit-transform: translateY(-20px);-moz-transform: translateY(-20px);-o-transform: translateY(-20px);transform: translateY(-20px);} 100%{-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);} } @-webkit-keyframes zoomin_out{ 0%{-webkit-transform:scale(1);} 50%{-webkit-transform:scale(1.1);} 100%{-webkit-transform:scale(1);} } @-moz-keyframes zoomin_out{ 0%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);} 50%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);transform:scale(1.1);} 100%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);} } @-o-keyframes zoomin_out{ 0%{-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1);} 50%{-webkit-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);} 100%{-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1);} } @keyframes zoomin_out{ 0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);} 50%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);} 100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);} } @keyframes moves { 0%{-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);} 50%{-webkit-transform: translateY(-20px);-moz-transform: translateY(-20px);-o-transform: translateY(-20px);transform: translateY(-20px);} 100%{-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);transform: translateY(0px);} }