@charset "utf-8";

/* CSS Document */ 

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} 

input,button,textarea{outline: none;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 

ul,li{list-style:none; margin:0; padding:0;}

a img{border:0;display: block;}

html, body{height: auto; }

em,i{font-style: normal;}

img{-webkit-transition: all 320ms ease-out 0s;-moz-transition: all 320ms ease-out 0s;

  -o-transition: all 320ms ease-out 0s;transition: all 320ms ease-out 0s;}

/*颜色字体设置-start-*/

a{color:#333;text-decoration:none;cursor: pointer;}

p{color:#333;line-height:24px;}

body{background:#f4f4f4;overflow-x:hidden;font-size:14px;color:#333;

  font-family: Arial, "微软雅黑",'Microsoft yahei', "华文细黑", SimSun, "宋体", Heiti, "黑体", sans-serif;}

/*颜色字体设置-end-*/

/******bk*******/ 

.bk10,.bk20,.bk30,.bk40,.bk50,.bk60,.bk70,.bk80,.bk90,.bk100{width:100%;overflow: hidden;clear: both;display: block;}

.bk10{height:10px;}

.bk20{height:20px;}

.bk30{height:30px;}

.bk40{height:40px;}

.bk50{height:50px;}

.bk60{height:60px;}

.bk70{height:70px;}

.bk80{height:80px;}

.bk90{height:90px;}

.bk100{height:100px;}

/******other*******/ 

.fl{float:left;display: inline-block;}

.fr{float:right;display: inline-block;}

/******clear float*******/ 

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 

.clearfix {display: inline-table;} 

/* Hides from IE-mac \*/ 

* html .clearfix {height: 1%;} 

.clearfix {display: block;} 

/*通用*/

.w1200{width: 1200px;margin: 0 auto;height: auto;}

/*img_center*/

.img_center{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;}

.img_center img{max-width: 100%;max-height: 100%;display: block;vertical-align: middle;}



.hvr-float{display: inline-block;vertical-align: middle;

  -webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

  -webkit-transition-duration: 0.3s;transition-duration: 0.3s;

  -webkit-transition-property: transform;transition-property: transform;

  -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}

.hvr-float:hover, .hvr-float:focus, .hvr-float:active {

  -webkit-transform: translateY(-8px);transform: translateY(-8px);}

  

.swiper-button-next:active,.swiper-button-prev:active,

.swiper-button-next:hover,.swiper-button-prev:hover,

.swiper-button-next:focus,.swiper-button-prev:focus,

.swiper-button-next:visited,.swiper-button-prev:visited{border: none;outline: none;}



input:active,input:hover,input:focus,input:visited,

button:active,butto:hover,butto:focus,button:visited,

select:active,select:hover,select:focus,select:visited,

textarea:active,textarea:hover,textarea:focus,textarea:visited{outline: none;}

/*pagejump*/

.pageJump .pagination{text-align: center;padding:20px 0 30px;width: 100%;overflow: hidden;height: auto;}

.pageJump .pagination li{display: inline-block;}

.pageJump .pagination li{padding:10px 15px;display: inline-block;margin: 0 2px;

  border: 1px solid #e5e5e5;border-radius: 5px;background: #fff;}

.pageJump .pagination li span,.pageJump .pagination li a{color: #666;}

.pageJump .pagination li.active,.pageJump .pagination li:hover{background:#4dcd70;border: 1px solid #4dcd70;}

.pageJump .pagination li.active a,.pageJump .pagination li.active span,

.pageJump .pagination li:hover a,.pageJump .pagination li:hover span{color: #fff;}



/*首页*/

.header{border-bottom: 20px solid #121212;}

.header .top{width: 100%;height: 40px;background: #121212;}

.header .top .s1{color: #999;line-height: 40px;}

.header .navs{background: #2a2a2b;width: 100%;height: 100px;}

.header .logo{width: 200px;height: 60px;display: inline-block;margin: 20px 0 0;

  background: url(../images/logo.png) left center no-repeat;}

.header .list{margin: 30px 0 0;}

.header .list li{float: left;background: url(../images/xline.png) right center no-repeat;

  padding: 0 25px 0 0;margin: 0 0 0 5px;line-height: 40px;}

.header .list li:last-child{background: none;padding: 0;}

.header .list li a{color: #d0d0d0;font-size:18px;padding: 0 0 0 34px;line-height: 40px;display: inline-block;}

.header .list li:nth-child(1) a{background: url(../images/nav_1.png) 0 0 no-repeat;}

.header .list li:nth-child(2) a{background: url(../images/nav_2.png) 0 0 no-repeat;}

.header .list li:nth-child(3) a{background: url(../images/nav_3.png) 0 0 no-repeat;}

.header .list li:nth-child(4) a{background: url(../images/nav_4.png) 0 0 no-repeat;}

.header .list li:nth-child(5) a{background: url(../images/nav_5.png) 0 0 no-repeat;}

.header .list li:nth-child(6) a{background: url(../images/nav_6.png) 0 0 no-repeat;}

.header .list li:nth-child(7) a{background: url(../images/nav_7.png) 0 0 no-repeat;}

.header .list li:hover a,.header .list li.on a{background-position: 0 -40px;

  transition: all 0.8s ease-out 0s;color: #fff;}



/*hotgame*/

.hotgame{margin: 30px 0 0;background: #fff;}

.hotgame .topbox{background: #39393d;height: 36px;padding: 12px 20px;}

.hotgame .sear button{width: 36px;height: 36px;border: none;

  background: #4dcd70 url(../images/search.png) center no-repeat;background-size: 20px;}

.hotgame .sear input{background: #2a2a2b;border: none;width: 200px;padding: 0 10px;

  line-height: 36px;}

.hotgame .hot a{color: #999;float: right;margin: 0 10px 0 0;line-height:36px;}

.hotgame .hot a:hover{color: #fff;}

.hotgame .hot span{color: #999;line-height: 36px;}

.hotgame .tit{background: url(../images/hot.png) left center no-repeat;

  padding: 0 0 0 30px;line-height: 36px;font-size:18px;color: #fff;}



.hotgame .botbox{padding: 20px 0;}

.hotgame .list{width: 1100px;}

.hotgame .list li{float: left;display: inline-block;width: 70px;margin: 0 0 0 20px;}

.hotgame .list li img{width: 70px;height: 70px;display: inline-block;border-radius:20px;}

.hotgame .list li:hover img{transition: all 0.8s ease-out 0s;opacity: 0.7;}

.hotgame .list li p{color: #666;text-align: center;line-height: 30px;font-size:12px;

  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.hotgame .list li:hover p{color: #4dcd70;}

.hotgame .btns{background: url(../images/icons_hyp.png) center 13px no-repeat;line-height: 30px;

  padding: 70px 0 0;text-align: center;width: 80px;margin: 0 20px 0 0;color: #999;font-size:12px;}



/*recommend*/

.recommend{background: #fff;padding: 20px;border-top: 2px solid #4dcd70;margin: 20px 0 0;}



.reco_box_1{width: 420px;height: 320px;display: inline-block;overflow: hidden;position: relative;}

.reco_box_1 .box{width: 100%;height:320px;display: block;position: relative;overflow: hidden;

  border-top-left-radius: 10px;border-top-right-radius: 10px;}

.reco_box_1 .box img{width: 100%;height: 320px;}

.reco_box_1 .box:hover img{transition: all 0.8s ease-out 0s;transform: scale(1.05);}

.reco_box_1 .box p{position: absolute;left: 0;bottom:0;background: rgba(0,0,0,.7);

  width: 320px;height: 50px;line-height: 50px;color: #fff;font-size:15px;

  padding: 0 80px 0 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.recommend .swiper-horizontal>.swiper-pagination-bullets{position: absolute;z-index: 16;

  bottom: 20px;right: 10px;text-align: right;left: unset;}

.recommend .swiper-pagination-bullet{width: 8px;height: 8px;background: #999;border-radius: 0;opacity: 1;}

.recommend .swiper-pagination-bullet-active {background: #4dcd70;}



.reco_box_2{width: 410px;margin: 0 0 0 20px;}

.reco_box_2 .top{border-bottom: 1px dashed #e5e5e5;padding: 0 0 10px;margin: 0 0 10px;}

.reco_box_2 .top .a1,.reco_box_2 .top .a2{overflow: hidden;white-space: nowrap;

  text-overflow: ellipsis;display:block;text-align: center;}

.reco_box_2 .top .a1{font-weight: bold;font-size:20px;color:#4dcd70;line-height: 40px;}

.reco_box_2 .top .a1:hover{color: #39b362;}

.reco_box_2 .top .line{background: url(../images/line.jpg) center no-repeat;}

.reco_box_2 .top .a2{width: 196px;color:#fb612d; }

.reco_box_2 .top .a2:hover{color: #fa3e00;}

.reco_box_2 .list li{background: url(../images/doit.png) left center no-repeat;

  padding: 0 0 0 16px;line-height: 34px;}

.reco_box_2 .list li a{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.reco_box_2 .list li a span{color:#999;margin: 0 0 0 10px;}

.reco_box_2 .list li:hover a{color: #4dcd70;}



.reco_box_3{width: 290px;}

.reco_box_3 .tit{line-height: 50px;}

.reco_box_3 .tit .s1{font-size:24px;}

.reco_box_3 .tit .s2{color: #999;font-size:12px;text-transform: uppercase;

  margin: 0 0 0 10px;}

.reco_box_3 .tit .more{background: url(../images/more.png) left center no-repeat;

  padding: 0 0 0 24px;color: #999;font-size:12px;}



.reco_box_3 .list li{background: #f3f3f4;height: 50px;display: block;margin: 0 0 20px;

  border-top-left-radius: 10px;border-bottom-left-radius: 10px;padding: 0 10px 0 0;}

.reco_box_3 .list li:last-child{margin: 0;}

.reco_box_3 .list li a{display: block;}

.reco_box_3 .list li img{width: 50px;height: 50px;border-radius: 10px;}

.reco_box_3 .list li:hover img{transition: all 0.8s ease-out 0s;opacity: 0.7;}

.reco_box_3 .list li .txt{width: 220px;padding: 8px 0 0;}

.reco_box_3 .list li h2,.reco_box_3 .list li p{font-size:12px;

  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.reco_box_3 .list li h2{color: #666;font-weight: bold;}

.reco_box_3 .list li p{color: #999;}

.reco_box_3 .list li:hover h2{color: #4dcd70;}



/*ho_tit_all*/

.ho_tit_all{width:100%;height: 30px;margin: 0 0 20px;}

.ho_tit_all .s1{font-size:24px;position: relative;padding: 0 0 0 20px;display: inline-block;}

.ho_tit_all .s1:before{content: "";position: absolute;left: 0;top:0;

  width: 8px;height: 30px;background: #4dcd70;border-radius: 10px;display: inline-block;}

.ho_tit_all .s3{background: url(../images/more_2.png) right center no-repeat;

  width: 30px;height: 30px;display: inline-block;}

.ho_tit_all .s2{background: #4dcd70;border-radius: 20px;height: 20px;padding: 0 10px;color: #fff;

  display: inline-block;margin: 10px 0 0 10px;line-height: 20px;}

/*popular*/

.popular{width: 440px;display: inline-block;}

.popular .box{background: #fff;padding:30px 20px 20px;}

.popular .top{padding: 0 0 10px;}

.popular .top a{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;text-align: center;}

.popular .top .a1{font-weight: bold;font-size:20px;line-height: 40px;margin: 0 0 10px;}

.popular .top .a2{width: 190px;color: #666;}

.popular .top a:hover{color: #4dcd70;}

.popular .list li{background: url(../images/doit_2.png) 10px center no-repeat;

  padding: 0 10px 0 26px;line-height: 34px;}

.popular .list li:nth-child(5n+1){background: #f3f3f4 url(../images/doit_2.png) 10px center no-repeat;}

.popular .list li a{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.popular .list li a span{color:#999;margin: 0 0 0 10px;}

.popular .list li:hover a{color: #4dcd70;}



/*flyable*/

.flyable{width: 740px;}

.flyable .list{margin: 0 0 0 -20px;}

.flyable .list li{width: 132px;float: left;display: inline-block;margin: 0 0 20px 20px;}

.flyable .list li a{display: block;background: #fff;padding: 10px 16px;border-radius: 10px;overflow: hidden;}

.flyable .list li img{width: 100px;height: 100px;border-radius: 20px;}

.flyable .list li h2,.flyable .list li p{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.flyable .list li .txt{padding: 5px 0 0;text-align: center;}

.flyable .list li h2{line-height: 24px;}

.flyable .list li p{font-size:12px;color: #999;line-height: 20px;}

.flyable .list li:hover img{transition: all 0.8s ease-out 0s;opacity: 0.7;}

.flyable .list li:hover h2{color: #4dcd70;}



/*topcont*/

.topcont .list{margin: 0 0 0 -20px;}

.topcont .list li{float: left;display: inline-block;width: 285px;margin: 0 0 0 20px;border-radius: 10px;

  overflow: hidden;background: #fff;}

.topcont .list li a{display: block;}

.topcont .list li .pic{width: 100%;height: 190px;display: block;overflow: hidden;position: relative;}

.topcont .list li .pic img{width: 100%;height: 190px;}

.topcont .list li:hover img{transition: all 0.8s ease-out 0s;transform: scale(1.05);}

.topcont .list li .pic span{background: #4dcd70;font-size:12px;color: #fff;display: inline-block;

  position: absolute;left: 15px;top:15px;padding:0 5px;}

.topcont .list li .txt{padding: 0 20px;line-height: 50px;text-align: center;font-size:15px;

  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.topcont .list li .txt:hover{color:#4dcd70; }



/*strategy*/

.mR21{margin: 0 21px 0 0;}

.strategy{width: 386px;}

.strategy .list{background: #fff;padding: 20px;}

.strategy .list li{background: url(../images/doit_2.png) 10px center no-repeat;

  padding: 0 10px 0 26px;line-height: 34px;}

.strategy .list li:nth-child(5n+1){background: #f3f3f4 url(../images/doit_2.png) 10px center no-repeat;}

.strategy .list li a{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.strategy .list li a span{color:#999;margin: 0 0 0 10px;}

.strategy .list li:hover a{color: #4dcd70;}



/*mobile*/

.mobile{width:386px; }

.mobile .list{background: #fff;padding: 20px;}

.mobile .list li:nth-child(1){background:#f3f3f4 url(../images/num1.png) 10px center no-repeat;

  border-radius: 10px;padding: 10px 10px 10px 44px;margin: 0 0 10px;}

.mobile .list li:nth-child(1) img{width: 70px;height: 70px;}

.mobile .list li .txt{width: 210px;padding: 5px 0 0;}

.mobile .list li .txt h2,.mobile .list li .txt .p1{overflow: hidden;

  white-space: nowrap;text-overflow: ellipsis;display:block;}

.mobile .list li .txt h2{font-size:16px;}

.mobile .list li .txt .p1{font-size:12px;color: #999;}

.mobile .list li .txt .p2 span{float: left;display: inline-block;width: 16px;height: 20px;

  background: url(../images/star.png) left center no-repeat;}

.mobile .list li:nth-child(2){background: url(../images/num2.png) 10px center no-repeat;

  padding: 10px 10px 10px 44px;}

.mobile .list li:nth-child(3){background: url(../images/num3.png) 10px center no-repeat;

  padding: 10px 10px 10px 44px;}

.mobile .list li:nth-child(n+2){line-height: 24px;font-size: 16px;}

.mobile .list li:nth-child(n+2) a{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.mobile .list li:hover a,.mobile .list li:nth-child(n+4):hover a{color:  #4dcd70;}

.mobile .list li:nth-child(n+4){padding: 10px 10px 10px 10px;}

.mobile .list li:nth-child(n+4) a{color: #999;}

.mobile .list li:nth-child(n+4) span{border: 1px solid #999;line-height: 16px;text-align: center;

  width: 16px;height: 16px;margin: 4px 14px 0 0;color: #999;font-size:12px;display: inline-block;}



/*footer*/

.footer{background: #141414;border-top: 20px solid #1e1e1f;overflow: hidden;}

.footer,.footer a,.footer p{color: #a0a0a0;}



.footer .link{background: #181818;padding: 40px 0;}

.footer .link .tit{line-height:30px;margin: 0 0 10px;}

.footer .link .tit .s1{font-size:24px;}

.footer .link .tit .s2{font-size:12px;text-transform: uppercase;

  margin: 0 0 0 10px;}

.footer .link a{line-height: 30px;display: inline-block;float: left;margin: 0 20px 0 0;}



.footer .bot{padding: 40px 0;text-align: center;}

.footer .bot .p1 a{display: inline-block;margin: 0 20px;}

.footer .bot p{line-height: 30px;}



.footer a:hover{color: #4dcd70;}



/*内容页*/

.banner{width: 100%;height:190px;padding: 60px 0 0;text-align: center;

  display: block;background: url(../images/inban.jpg) center no-repeat;}

.banner h2{font-weight: bold;font-size:44px;color: #fff;}

.banner p{font-size:22px;color: rgba(255,255,255,.7);}



.w860{width: 860px;}

.w320{width: 320px;}



/*新闻列表*/

.in_tit_1{line-height: 50px;font-size:24px;}



.news_in_box{background: #fff;padding: 30px;}

.news_in_list li{border-bottom: 1px solid #e5e5e5;padding: 0 0 30px;margin: 0 0 30px;}

.news_in_list li a{display: block;}

.news_in_list li .pic,.news_in_list li .pic img{width: 190px;height: 120px;display: inline-block; 

  overflow: hidden;}

.news_in_list li:hover img{transition: all 0.8s ease-out 0s;transform: scale(1.05);}

.news_in_list li .txt{width: 590px;}

.news_in_list li .txt h2{font-size:18px;font-weight: bold;}

.news_in_list li .txt .p1{color: #999;line-height: 24px;height: 48px;margin: 10px 0 15px;

  display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}

.news_in_list li .txt .p2{background: url(../images/time.png) left center no-repeat;

  padding: 0 0 0 20px;color: rgba(57,179,98,.7)}

.news_in_list li:hover .txt h2{color: #4dcd70;}



 /*hotlist*/

.hotlist{background: #fff;padding:20px;}

.hotlist .tit{line-height: 34px;font-size:24px;padding: 0 0 0 36px;

  background: url(../images/tit_1.png) left center no-repeat;}

.hotlist .tit span{color:#4dcd70;}

.hotlist .list{margin: 10px 0 0;}

.hotlist .list li{border-bottom: 1px dotted #e5e5e5;padding: 10px 0 ;}

.hotlist .list li a{display: block;}

.hotlist .list li .txt{width: 245px;}

.hotlist .list li .txt h2{font-size:15px;line-height: 24px;height: 48px;margin: 0 0 10px;

  display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}

.hotlist .list li .txt p{color: #999;}

.hotlist .list li .num{width: 20px;text-align: center;color: #fff;line-height: 20px;height: 26px;

  display: inline-block;font-weight: bold;margin: 5px 0 0;}

.hotlist .list li:nth-child(1) .num{background: url(../images/bt_1.png) center top no-repeat;}

.hotlist .list li:nth-child(2) .num{background: url(../images/bt_2.png) center top no-repeat;}

.hotlist .list li:nth-child(3) .num{background: url(../images/bt_3.png) center top no-repeat;}

.hotlist .list li:nth-child(n+4) .num{background: url(../images/bt_4.png) center top no-repeat;color: #999;}

.hotlist .list li:last-child{border-bottom: none;}

.hotlist .list li:hover .txt h2{color: #4dcd70;}



 /*amway*/

.amway{background: #fff;padding:20px 20px 0;}

.amway .tit{line-height: 34px;font-size:24px;padding: 0 0 0 40px;

  background: url(../images/tit_2.png) left center no-repeat;}

.amway .tit span{color:#4dcd70;}

.amway .list{margin:20px 0 0 -20px;}

.amway .list li{width: 80px;float: left;display: inline-block;margin: 0 0 20px 20px;}

.amway .list li a{display: block;}

.amway .list li img{width: 80px;height:80px;display: inline-block;border-radius: 20px;}

.amway .list li p{text-align: center;font-size:12px;color: #999;margin: 5px 0 0;

  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.amway .list li:hover img{ transition: all 0.8s ease-out 0s;opacity: 0.7;}

.amway .list li:hover p{color:#4dcd70  }



/*新闻内页*/

.greatgame{background: #fff;padding: 20px;}

.greatgame .tit{line-height: 34px;font-size:24px;padding: 0 0 0 40px;

  background: url(../images/tit_1.png) left center no-repeat;}

.greatgame .tits{line-height: 34px;font-size:24px;padding: 0 0 0 40px;

  background: url(../images/tit_5.png) left center no-repeat;}

.greatgame .tit span{color:#4dcd70;}

.greatgame .list{}

.greatgame .list li{border-bottom: 1px solid #e5e5e5;padding: 20px 0;}

.greatgame .list li:last-child{border-bottom: none;}

.greatgame .list li a{display: block;}

.greatgame .list li img{width: 90px;height: 90px;display: inline-block;border-radius: 20px;}

.greatgame .list li .txt{width: 170px;}

.greatgame .list li .txt h2{font-size:18px;}

.greatgame .list li .txt p{color: #666;

  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.greatgame .list li .btns{margin: 10px 0 0;}

.greatgame .list li .btns span{display: inline-block;width: 64px;height: 22px;

  background: #4dcd70;color: #fff;line-height: 22px;border-radius: 30px;text-align: center;}

.greatgame .list li .btns span em{background: url(../images/more_3.png) right center no-repeat;

  padding: 0 10px 0 0;}

.greatgame .list li:hover img{ transition: all 0.8s ease-out 0s;opacity: 0.7;}

.greatgame .list li:hover h2{color:#4dcd70  }

.greatgame .list li .btns:hover span{background: #39b362;}



/*新闻内页*/

.greatsub{background: #fff;padding: 20px;}

.greatsub .tit{line-height: 34px;font-size:24px;padding: 0 0 0 40px;

  background: url(../images/tit_10.png) left center no-repeat;}

.greatsub .tit span{color:#4dcd70;}

.greatsub .list{margin: 20px 0 0;}

.greatsub li{display: block;margin: 0 0 20px;}

.greatsub li:last-child{margin: 0;}

.greatsub li a{display: block;overflow: hidden;height: 140px;position: relative;}

.greatsub li img{width: 100%;height: 140px;}

.greatsub li h2{position: absolute;left: 20px;width: calc(100% - 40px);

  text-align: center;bottom: 0;line-height: 40px;color: #fff;z-index: 12;}

.greatsub li .mask{position: absolute;left: 0;bottom: 0;width: 100%;

  height: 50px;z-index: 10;

  background:-webkit-linear-gradient(bottom,#000,transparent);

  background:-moz-linear-gradient(bottom,#000,transparent);

  background:-o-linear-gradient(bottom,#000,transparent);

  background:linear-gradient(bottom,#000,transparent);}

.greatsub li:hover img{transition: all 0.8s ease-out 0s;transform: scale(1.05);}



  /*bread*/

.bread{line-height: 60px;}

.bread a:nth-child(1){background: url(../images/icon_sy.png) left center no-repeat;

  padding: 0 0 0 20px;}

.bread,.bread a,.bread span{color: #666;}

.bread a:hover{color: #4dcd70;}



  /*newscont*/

.newscont{padding: 40px 30px 10px;background: #fff;}

.newscont .tit{text-align: center;font-size:32px;font-weight: bold;margin: 0 0 20px;}

.newscont .tips{position: relative;font-size: 14px;color: #999;line-height: 30px;padding:0 0 20px;

  margin:0 0  20px;height: 30px;text-align: center;}

.newscont .tips:before{content: "";position: absolute;bottom: 0;left: 0;right: 0;height: 10px;

  width: 100%;display: block;

  background: repeating-linear-gradient( 150deg, #e8e8e8, #e8e8e8 1px, #fefefe 1px, #fefefe 3px );}

.newscont .tips span{margin: 0 20px 0 0;}

.newscont .dis{padding: 0 0 30px;font-size: 15px; line-height: 1.75; overflow: hidden;}

.newscont .dis p{margin-bottom: 10px;}

.newscont .dis img{display: block; margin-left: auto; margin-right: auto;max-width: 85%; height: auto;}



.newscont .shoul{

  background: #f3f3f4 url(../images/icon_xx.png) 20px center no-repeat;background-size: 40px;

  border-radius: 10px;padding: 10px 20px;margin: 10px 0 10px;}

.newscont .shoul span{

  background: url(../images/nav_right.png) right center no-repeat;font-size:18px;

  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;

  padding: 0 40px 0 50px;background-size: 30px;line-height: 40px;}

.newscont .shoul span a{color: #4dcd70;}

.newscont .shoul span a:hover{text-decoration: underline;}

         

.promote{background: #333;}

.promote .pic{width: 200px;height: 180px;position: relative;display: block;overflow: hidden;}

.promote .pic .bg{width: 150%;top: 0;left: 0; right: 0;position: absolute;background: inherit;

  -webkit-filter:blur(15px);filter:blur(15px);top:-20%;right:-15%;left:-15%;margin: auto;}

.promote .pic .mask{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;

  overflow: hidden;*zoom: 1;-webkit-backdrop-filter: blur(15px);backdrop-filter: blur(15px);

  background: -webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.1)),to(rgba(0,0,0,.1))),rgba(114,102,104,.2);

  background: linear-gradient(0deg,rgba(0,0,0,.1),rgba(0,0,0,.1)),rgba(114,102,104,.2);}

.promote .pic .all{position: absolute;left: 0;top:0;z-index: 14;width: 100%;

  text-align: center;margin: 30px 0 0;}

.promote .pic .all img{width: 110px;height: 110px;display: inline-block;border-radius: 20px;}

.promote .pic .all h2{font-size:16px;color: #fff;margin: 10px 0 0;padding: 0 20px;

  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.promote .pic .all span{display: inline-block;margin:12px auto 0; width: 120px;

  height: 32px;background:#4dcd70;border-radius: 5px;font-size: 16px;color: #fff;

  text-align: center;line-height: 32px;}

.promote .pic:hover .all span{background: #39b362 ;}

.promote .box_r{width: 570px;margin: 20px 20px 0 0;}

.promote .info h2 a{color: #fff;line-height: 30px;position: relative;padding: 0 0 0 34px;

  font-size: 14px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.promote .info h2 a:before{content: "";display: inline-block;

  position: absolute;top: 0px;left:0;width: 24px;height: 30px;

  background:url(../images/yhs.png) center no-repeat;}

.promote .info h2 a:hover{color: #4dcd70;}

.promote .info ul{border: 1px solid rgba(255,255,255,.2);

  margin: 10px 0 0;padding: 10px;}

.promote .info ul li{float: left;line-height: 28px;color: #ccc;padding: 0 10px 0 10px;width: calc(50% - 20px);

  background: url(../images/doit_2.png) left center no-repeat;background-size: 4px;

  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.promote .info ul li a{color: #ccc;}

.promote .tags{margin: 20px 0 0;overflow: hidden;height: 30px;}

.promote .tags a{float: left;display: inline-block;padding: 0 20px;

  border: 1px solid rgba(255,255,255,.2);

  border-radius: 5px;color: #999;height: 28px;line-height: 28px;margin:0 10px 0 0;}

.promote .tags a:hover{background: #4dcd70;border: 1px solid #4dcd70;color: #fff;}



.newscont .down{border-top: 1px dotted #e5e5e5;margin: 20px 0 0;line-height: 50px;}

.newscont .down .ss{width: 48%;

  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.newscont .down .ss span{color: #999;}

.newscont .down .ss a:hover{color: #4dcd70;}



  /*allsear*/

.allsear{background: #fff;padding: 30px;}

.allsear .tit{line-height: 34px;font-size:24px;padding: 0 0 0 40px;

  background: url(../images/tit_3.png) left center no-repeat;}

.allsear .tit span{color:#4dcd70;}

.allsear .gengx{font-size:12px;color: #999;}

.allsear .gengx span{background: url(../images/engx.png) right center no-repeat;

  padding: 0 20px 0 0;}

.allsear .list{margin: 0 0 0 -20px;}

.allsear .list a{background: #f3f3f4;width:calc(390px - 40px);line-height: 36px;float: left;

  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;padding: 0 20px;

  margin: 10px 0 0 20px;border-radius: 40px;text-align: center;}

.allsear .list a span{background: url(../images/ser_2.png) left center no-repeat;padding: 0 0 0 26px;}

.allsear .list a:hover{color:#4dcd70; }



  /*relainfo*/

.relainfo{background: #fff;padding: 30px;}

.relainfo .tit{line-height: 34px;font-size:24px;padding: 0 0 0 40px;

  background: url(../images/tit_3.png) left center no-repeat;}

.relainfo .tit span{color:#4dcd70;}

.relainfo .news_in_list{margin: 20px 0 0 ;}

.relainfo .news_in_list li:last-child{border-bottom: none;margin: 0;padding: 0;}



  /*similar*/

.similar{background: #fff;padding: 30px 30px 0;}

.similar .tit{line-height: 34px;font-size:24px;padding: 0 0 0 40px;

  background: url(../images/tit_4.png) left center no-repeat;}

.similar .tit span{color:#4dcd70;}

.similar .list{margin: 20px 0 0 -25px;}

.similar .list li{float: left;display: inline-block;width: 250px;margin: 0 0 25px 25px;}

.similar .list li img{width: 90px;height: 90px;display: inline-block;border-radius: 20px;}

.similar .list li .txt{width: 140px;padding: 10px 0 0;}

.similar .list li .txt h2{font-size:16px;margin: 0 0 5px;

  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.similar .list li .txt p{color: #666;}

.similar .list li:hover img{transition: all 0.8s ease-out 0s;opacity: 0.7;}

.similar .list li:hover h2{color: #4dcd70;}



/*游戏列表*/

.w150{width: 150px;}

.w1030{width: 1030px;}



.broadside{background: #fff;padding: 0 0 20px;}

.broadside .tit{line-height: 60px;font-size:24px;padding: 0 0 0 20px;}

.broadside .tit span{color:#4dcd70;}

.broadside .list li{line-height: 50px;border-left: 5px solid #fff;

  padding: 0 0 0 15px;font-size: 16px;}

.broadside .list li a{padding: 0 0 0 30px;display: inline-block;}

.broadside .list li:nth-child(1) a{background: url(../images/fl_qb.png) left 0 no-repeat;}

.broadside .list li:nth-child(2) a{background: url(../images/fl_js.png) left 0 no-repeat;}

.broadside .list li:nth-child(3) a{background: url(../images/fl_dz.png) left 0 no-repeat;}

.broadside .list li:nth-child(4) a{background: url(../images/fl_xx.png) left 0 no-repeat;}

.broadside .list li:nth-child(5) a{background: url(../images/fl_qz.png) left 0 no-repeat;}

.broadside .list li:nth-child(6) a{background: url(../images/fl_jszz.png) left 0 no-repeat;}

.broadside .list li:nth-child(7) a{background: url(../images/fl_kp.png) left 0 no-repeat;}

.broadside .list li:nth-child(8) a{background: url(../images/fl_yy.png) left 0 no-repeat;}

.broadside .list li:nth-child(9) a{background: url(../images/fl_mn.png) left 0 no-repeat;}

.broadside .list li:nth-child(10) a{background: url(../images/fl_ty.png) left 0 no-repeat;}

.broadside .list li:nth-child(11) a{background: url(../images/fl_mx.png) left 0 no-repeat;}

.broadside .list li:nth-child(12) a{background: url(../images/fl_cq.png) left 0 no-repeat;}

.broadside .list li:nth-child(13) a{background: url(../images/fl_sy.png) left 0 no-repeat;}

.broadside .list li:nth-child(14) a{background: url(../images/fl_xxsy.png) left 0 no-repeat;}

.broadside .list li:nth-child(15) a{background: url(../images/fl_tf.png) left 0 no-repeat;}

.broadside .list li:nth-child(16) a{background: url(../images/fl_ecy.png) left 0 no-repeat;}

.broadside .list li:nth-child(17) a{background: url(../images/fl_sg.png) left 0 no-repeat;}

.broadside .list li:nth-child(18) a{background: url(../images/fl_gd.png) left 0 no-repeat;}

.broadside .list li:hover,.broadside .list li.on{border-left: 5px solid #4dcd70;font-weight: bold;

  background: #ebf7ef;}

.broadside .list li:hover a,.broadside .list li.on a{background-position: 0 -50px;transition: all 0.8s ease-out 0s;}



 /*flygame*/

.flygame .tit{font-size:24px;line-height: 30px;margin: 10px 0;}

.flygame .tit .s2{width: 87%;height: 16px;margin:7px 0 0;

  background: repeating-linear-gradient( 140deg, #e5e1e6, #e5e1e6 .5px, #f9f7fa 3px, #f9f7fa 6px );

  display: inline-block;}

.flygame .tit .s1{display: inline-block;position: relative;padding: 0 0 0 20px;}

.flygame .tit .s1:before{content: "";position: absolute;left: 0;top:0;

  width: 8px;height: 30px;background: #4dcd70;border-radius: 10px;display: inline-block;}

.flygame .all{color: #999;padding: 0 0 0 20px;}

.flygame .all span{color: #4dcd70;}



.flygame .list{margin: 20px 0 0 -20px;}

.flygame .list li{float: left;display: inline-block;width: 330px;margin: 0 0 20px 20px;

  background: #fff url(../images/listlibg.jpg) center top no-repeat;}

.flygame .list li a{display: block;border: 1px solid #fff;padding: 20px;}

.flygame .list li:hover a{border: 1px solid rgba(77,205,112,.3);}

.flygame .list li img{width: 90px;height: 90px;}

.flygame .list li:hover img{transition: all 0.8s ease-out 0s;opacity: 0.7;}

.flygame .list li .txt{width: 180px;padding: 10px 0 0;}

.flygame .list li .txt h2{font-weight: bold;font-size:16px;margin: 0 0 5px;}

.flygame .list li .txt h2,.flygame .list li .txt p{overflow: hidden;white-space: nowrap;

  text-overflow: ellipsis;display:block;}

.flygame .list li .txt p:last-child{color: #999;}

.flygame .list li .btns{width: 100%;height: 36px;line-height: 36px;color: #4dcd70;margin: 10px 0 0;

  font-size:16px;text-align: center;background: #ebf7ef;border-radius: 40px;}

.flygame .list li .btns span{display: inline-block;background: url(../images/more_4.png) right center no-repeat;

  padding: 0 20px 0 0;background-size: 8px;}

.flygame .list li:hover .btns{background: #4dcd70;color: #fff;}

.flygame .list li:hover .btns span{background: url(../images/more_5.png) right center no-repeat;

  background-size: 8px;}



/*游戏内页*/

.gamecont{background: #fff url(../images/loadbg.jpg) center top no-repeat;padding: 0 0 30px;}



.gcon_in_1{padding: 30px 30px 0;}

.gcon_in_1 .top img{width: 160px;height: 160px;display: inline-block;border-radius: 35px;}

.gcon_in_1 .top .txt{width: 610px;padding: 10px 0 0;}

.gcon_in_1 .top .txt h1{font-size:28px;margin-bottom: 10px;}

.gcon_in_1 .top .list li{float: left;display: inline-block;width: calc(32% - 10px);

  padding: 0 10px 0 0;line-height: 30px;color: #999;}

.gcon_in_1 .top .list li a{color: #4dcd70;}

.gcon_in_1 .top .list li a:hover{color: #39b362;}

.gcon_in_1 .top .zt{margin: 10px 0 0;line-height: 28px;color: #999;}

.gcon_in_1 .top .zt a{color:#4dcd70;background:#ebf7ef;display: inline-block;height: 28px;

  padding: 0 10px;margin:0 10px 0 0;border-radius:5px;}

.gcon_in_1 .btns{margin: 30px 0;}

.gcon_in_1 .btns a{display: inline-block;width: 200px;height: 46px;line-height: 46px;

  text-align: center;color: #fff;border-radius: 10px;font-size: 16px;margin:0 30px 0 0;}

.gcon_in_1 .btns a span{padding: 0 0 0 40px;display: inline-block;}

.gcon_in_1 .btns a.a1{background: #4dcd70;}

.gcon_in_1 .btns a.a1 span{background: url(../images/ic_az.png) left center no-repeat;}

.gcon_in_1 .btns a.a1:hover{background: #39b362;}

.gcon_in_1 .btns a.a2{background: #00aff0;}

.gcon_in_1 .btns a.a2:hover{background: #00bbff;}

.gcon_in_1 .btns a.a2 span{background: url(../images/ic_pg.png) left center no-repeat;}

.gcon_in_1 .btns a.a2 span em{font-size:12px;color: rgba(255,255,255,.7)}

.gconline{width:100%;height: 10px;display: block;

  background: repeating-linear-gradient( 150deg, #e8e8e8, #e8e8e8 1px, #fefefe 1px, #fefefe 3px );}



 /*gcon_in_2*/

.gcon_in_2{padding: 30px 30px 0;}

.gcon_in_2 .tit{line-height: 34px;font-size:24px;padding: 0 0 0 40px;

  background: url(../images/tit_6.png) left center no-repeat;}

.gcon_in_2 .tit span{color:#4dcd70;}



.myswitching{width: 100%;position: relative;overflow: hidden;margin: 30px 0;}

.myswitching .swiper{width: 580px;}

.myswitching .swiper-button-prev{left: 0;background: url(../images/btns_l.png) center no-repeat;

  background-size: 50px;}

.myswitching .swiper-button-next{right: 0;background: url(../images/btns_r.png) center no-repeat;

  background-size: 50px;}

.myswitching .swiper-button-next,.myswitching .swiper-button-prev{width: 50px;height: 50px;

  font-size:0;color: transparent;}

.myswitching .swiper .pic{width: 100%;}

.myswitching .swiper .pic img{width: 100%;}



 /*gcon_in_3*/

.gcon_in_3{padding: 30px 30px 0;}

.gcon_in_3 .tit{line-height: 34px;font-size:24px;padding: 0 0 0 40px;

  background: url(../images/tit_8.png) left center no-repeat;}

.gcon_in_3 .tit span{color:#4dcd70;}

.gcon_in_3 .dis{padding: 20px 0 30px;}

.gcon_in_3 .dis p{
  line-height: 1.8;
  font-size: 14px;
  color: #666;
}
.gcon_in_3 .dis strong{
  font-size: 16px;
  color: #666;
  font-weight: normal;
}
.gcon_in_3 .dis img{
  margin: 10px 0;
}

.gcon_in_3 .dis img{max-width: 100%;}



 /*gcon_in_4*/

.gcon_in_4{padding: 30px 30px 0;}

.gcon_in_4 .tit{line-height: 34px;font-size:24px;padding: 0 0 0 40px;

  background: url(../images/tit_7.png) left center no-repeat;}

.gcon_in_4 .tit span{color:#4dcd70;}

.gcon_in_4 .info{margin: 20px 0 0;}

.gcon_in_4 .info a{float: left;display: inline-block;height: 30px;border: 1px solid #e5e5e5;border-radius: 16px;

  line-height: 30px;text-align: center;font-size: 15px;color: #4dcd70;padding: 0 12px;margin:0 10px 10px 0;}

.gcon_in_4 .info a:hover{background:#4dcd70;border: 1px solid #4dcd70;color: #fff;}

.gcon_in_4 .info a:last-child{border: none;padding: 0;border-radius: 0;width: 32px;height: 32px;

  background: url(../images/plus.png) center no-repeat;}

.gcon_in_4 .info a:last-child:hover{transition: all 0.8s ease-out 0s;opacity: 0.7;}



/*游戏专题*/

.w210{width: 210px;}

.w960{width: 960px;}

.subject li{display: block;text-align: center;margin: 0 0 10px;font-size:15px;}

.subject li:last-child{margin: 0;}

.subject li a{display: block;background: #fff;line-height:40px;padding: 0 20px;

  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.subject li:hover a,.subject li.on a{background: #4dcd70;color: #fff;font-weight: bold;}



.topic_in_1{background: #fff;padding: 30px;}

.topic_in_1 .tit{line-height: 34px;font-size:24px;padding: 0 0 0 40px;

  background: url(../images/tit_9.png) left center no-repeat;margin: 0 0 20px;}

.topic_in_1 .tit span{color:#4dcd70;}

.topic_in_1 .pic,.topic_in_1  .pic img{width: 300px;height: 220px;display: block;overflow: hidden;}

.topic_in_1 .pic:hover img{transition: all 0.8s ease-out 0s;transform: scale(1.05);}

.topic_in_1 .txt{width: 570px;}



/**/

.topic_in_2{padding: 40px 30px;background: #fff;margin: 20px 0 0;}

.topic_in_2 .tit{text-align: center;font-size:32px;margin: 0 0 20px;}

.topic_in_2 .tips{position: relative;font-size: 14px;color: #999;line-height: 30px;padding:0 0 20px;

  margin:0 0  20px;height: 30px;text-align: center;}

.topic_in_2 .tips:before{content: "";position: absolute;bottom: 0;left: 0;right: 0;height: 10px;

  width: 100%;display: block;

  background: repeating-linear-gradient( 150deg, #e8e8e8, #e8e8e8 1px, #fefefe 1px, #fefefe 3px );}

.topic_in_2 .tips span{margin: 0 20px 0 0;}

.topic_in_2 .dis{padding: 0 0 30px;}

.topic_in_2 .dis img{max-width: 100%;}

.topic_in_2 .list a{float: left;display: inline-block;height: 30px;border: 1px solid #e5e5e5;border-radius: 16px;

  line-height: 30px;text-align: center;font-size: 15px;color: #4dcd70;padding: 0 12px;margin:0 10px 10px 0;}

.topic_in_2 .list a:hover{background:#4dcd70;border: 1px solid #4dcd70;color: #fff;}



/**/

.topic_in_3{background: #fff;padding: 30px;margin: 20px 0 0;}

  /*导航*/

.network{box-sizing: border-box;width:100%;position: relative;}

.network .tit{position: absolute;left: 0;top:0;line-height: 30px;font-size:24px;}

.network .tit span{display: inline-block;position: relative;padding: 0 0 0 20px;}

.network .tit span:before{content: "";position: absolute;left: 0;top:0;

  width: 8px;height: 30px;background: #4dcd70;border-radius: 10px;display: inline-block;}

.network .swiper-wrapper{padding: 0 0 0 150px;width: calc(100% - 150px);}

.network .swiper-slide{text-align: center;line-height:30px;font-size:15px;

  color: #666;width: 100px;border-radius: 60px;background: #f3f3f4;}

.network .swiper-slide-thumb-active{color: #fff;background:#4dcd70;}

  /*内容*/

.network2{width: 100%;margin: 20px 0 0;overflow: hidden;}

.network2 .list{margin: 0 0 0 -20px;}

.network2 .list li{float: left;display: inline-block;width: 95px;margin: 0 0 0 20px;text-align: center;}

.network2 .list li img{width: 95px;height:95px;display: inline-block;border-radius:20px;}

.network2 .list li:hover img{transition: all 0.8s ease-out 0s;opacity: 0.7;}

.network2 .list li p{color: #666;text-align: center;line-height: 40px;

  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.network2 .list li:hover p{color: #4dcd70;}



/*topic_in_4*/

.topic_in_4{width: calc(470px - 60px);background: #fff;padding:10px 30px 20px;}

.topic_in_4 .tit{line-height: 50px;margin: 0 0 10px;}

.topic_in_4 .tit .s1{font-size:24px;}

.topic_in_4 .tit .s2{color: #999;font-size:12px;text-transform: uppercase;

  margin: 0 0 0 10px;}



.topic_in_4 .top,.topic_in_4 .top img{width: 100%;display: block;height: 260px;overflow: hidden;}

.topic_in_4 .top:hover img{transition: all 0.8s ease-out 0s;transform: scale(1.05);}



.topic_in_4 .list{margin: 10px 0 0;}

.topic_in_4 .list li{line-height: 24px;font-size: 16px;padding: 10px 0;}

.topic_in_4 .list li a{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}

.topic_in_4 .list li span{border: 1px solid #999;line-height: 16px;text-align: center;

  width: 16px;height: 16px;margin: 4px 14px 0 0;color: #999;font-size:12px;display: inline-block;}

.topic_in_4 .list li:hover a{color: #4dcd70;}









/*

颜色  #4dcd70   #39b362     #f3f3f4 

 #666  #999



多行隐藏

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;



行业省略

overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;



视频a+b          

<video controls="" autoplay="autoplay" name="media">

  <source src="http://www.vc520.com/images/lvpai.mp4" type="video/mp4">

</video>

<video autoplay="autoplay" id="videoALL" loop="" playsinline="true" poster="" src="video/wedding.mp4" 

  webkit-playsinline="true" muted="" width="100%" height="500" x-webkit-airplay="allow" 

  x5-video-player-fullscreen="true" x5-video-player-type="h5"></video>



button链接新页面      

onclick="window.open('passwd_xg.html')"



图片懒加载      

<img class="lazy" data-original="images/cp1.jpg">



返回上一页      

<a href="javascript :;" class="fa-angle-left fa" onClick="javascript :history.back(-1);"></a>



消除scroll边框 

.scrollbar-none::-webkit-scrollbar {width: 0px;height: 0;}



定义字体        

@font-face {font-family: fzlej;src: url(../font/fzlej.ttf);}



背景透明        background: rgba(0,0,0,.6);background:transparent;  

清除属性        float:none; position:static;

字体            font-family: "微软雅黑",Verdana, Arial, Helvetica, sans-serif;

两边对齐        text-align:justify;text-justify:inter-ideograph;

空元素          font-size:0;display:none;overflow:hidden;height:0;width: 0;

空格            span style="white-space:pre"; 

轮廓线          outline:#00ff00 dotted thick;

边框阴影        box-shadow:4px 2px 6px 6px #333333 inset;

文本阴影        text-shadow: X-Offset Y-Offset blur color;

分列            columns:100px 3;

选择小于3       nth-child(-n+3)



缓冲     

-ms-transition: all 320ms ease-out 0s;-moz-transition: all 320ms ease-out 0s;

-webkit-transition: all 320ms ease-out 0s;-o-transition: all 320ms ease-out 0s;transition: all 320ms ease-out 0s;



圆角    

-ms-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;-o-border-radius: 5px; border-radius: 5px;

-ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;-o-border-radius: 10px; border-radius: 10px;

-ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;-o-border-radius: 20px; border-radius: 20px;

-ms-border-radius: 60px; -moz-border-radius: 60px; -webkit-border-radius: 60px;-o-border-radius: 60px; border-radius: 60px;

-ms-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;-o-border-radius: 50%; border-radius: 50%; 



旋转      

-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);

-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);

-ms-transform:rotate(180deg);-moz-transform:rotate(180deg);

-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);



缩放    

transform: scale(1);-moz-transform: scale(1);-webkit-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);

transform: scale(1.05);-moz-transform: scale(1.05);-webkit-transform: scale(1.05);-o-transform: scale(1.05);-ms-transform: scale(1.05);

transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);

transform: scale(1.2);-moz-transform: scale(1.2);-webkit-transform: scale(1.2);-o-transform: scale(1.2);-ms-transform: scale(1.2);

transform: scale(0);-moz-transform: scale(0);-webkit-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);



透明度

filter:alpha(opacity=90);-ms-opacity:0.9;-moz-opacity:0.9;-webkit-opacity:0.9;-o-opacity:0.9;opacity: 0.9;

filter:alpha(opacity=80);-ms-opacity:0.8;-moz-opacity:0.8;-webkit-opacity:0.8;-o-opacity:0.8;opacity: 0.8;

filter:alpha(opacity=60);-ms-opacity:0.6;-moz-opacity:0.6;-webkit-opacity:0.6;-o-opacity:0.6;opacity: 0.6;



灰度      

-ms-filter: grayscale(1);-moz-filter:grayscale(1);-webkit-filter:grayscale(1);-o-filter: grayscale(1);filter:grayscale(1);



位移    

-ms-transform:translateY(-20px);-moz-transform:translateY(-20px);-webkit-transform:translateY(-20px);

-o-transform:translateY(-20px);transform:translateY(-20px); 

-ms-transform:translateX(-20px);-moz-transform:translateX(-20px);-webkit-transform:translateX(-20px);

-o-transform:translateX(-20px);transform:translateX(-20px); 



图片居中   

.img_center {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;}

.img_center img{max-width: 100%;max-height: 100%;display: block;vertical-align: middle;} 



三角形写法

width: 0;height:0;

border-left:20px solid transparent;border-right:20px solid transparent;border-top:20px solid #ff5500;



改变单选框样式

<input type="radio" name="Storage" id="model1"/>

<label for="model1">XS</label>

input{display: none}

label{background: #f7f7f7;float: left;font-weight: normal;}

input:checked + label {background: #ff5500;}



文本框文字颜色   

input::-webkit-input-placeholder{color:#666;}

input::-moz-placeholder{color:#666;}

input:-moz-placeholder{color:#666;}

input:-ms-input-placeholder{color:#666;}



渐变背景       

background:#c90900;

background:-webkit-radial-gradient(top, circle cover, #d8140b 0%, #950800 80%);

background:-moz-radial-gradient(top, circle cover, #d8140b 0%, #950800 80%);

background:-o-radial-gradient(top, circle cover, #d8140b 0%, #950800 80%);

background:radial-gradient(top, circle cover, #d8140b 0%, #950800 80%);

线性 -webkit-linear-gradient(left, #00DAEE, #00EA8F);



背景属性     

background: radial-gradient(white, #EEF6F9);   渐变

background-attachment: fixed;    背景固定

background-clip:content-box;     背景裁剪  border-box 背景被裁剪到边框盒。 padding-box 背景被裁剪到内边距框。 content-box 背景被裁剪到内容框。

background-size:80px 60px;       背景大小  length值    percentage百分比    cover完全覆盖    contain完全适应



边框图片

border:15px solid transparent;border-image:url(/i/border.png) 30 30 round;

border-image-source 图片路径。  border-image-slice  图片边框向内偏移。 border-image-width  图片边框的宽度。     

border-image-outset 边框图像区域超出边框的量。                         

border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)



视觉差

wow slideInRight 

data-wow-duration="1s" style="visibility: visible; animation-name: slideInRight; animation-duration: 1s;"



wow slideInLeft 

data-wow-duration="1s" style="visibility: visible; animation-name: slideInLeft; animation-duration: 1s;"



wow fadeInUp

data-wow-duration="1s" style="visibility: visible; animation-name: fadeInUp; animation-duration: 1s;"



*/