game-box/public/common/home/style.css

@charset "utf-8";
@import url('../base/base.css');
@import url('../base/grid.css');
@import url('../base/ui.css');
html,body{overflow: inherit;font-family:sans-serif,Arial,"Microsoft YaHei","Segoe UI","Lucida Grande";color: #646a73;font-weight: 400;}
/* 按钮 */
.comm-btn{white-space: nowrap;display: inline-block;height:30px;line-height:30px;padding: 0 10px;background: #fff; border-radius:3px; letter-spacing: .025em; color: #242526; text-decoration: none; border: 1px solid rgba(0,0,0,0.1); cursor: pointer;}
.comm-btn:hover{text-decoration: none;background: #f2f2f2}
.comm-btn.primary{ background: #00d084; color: #fff;}
.comm-btn.primary:hover{ background: #03b976; color: #fff;}
.comm-btn.warn{ background: #ff5d34; color: #fff;}
.comm-btn.warn:hover{ background: #eb6966;color: #fff;}
/*头部*/
#header{padding:10px 0px;z-index:20;background: #FFF;position: absolute;box-shadow: 0 4px 8px 0 rgba(0,0,0,.06);top: 0!important;z-index:1;height: 80px;}
#header .logo{width:178px;height:50px;margin-top: 5px;}
#header .logo img{width: 100%;}
#header .nav{display: block;line-height:30px;padding: 10px 0px}
#header .nav > li {position: relative;float: left;padding:3px 15px;}
#header .nav > li.active,header .nav > li:hover {color: #ee591f !important;border-radius: 3px;}
#header .nav > li.active > a,header .nav > li:hover > a {color: #ee591f;}
#header .nav > li >a {font-size: 15px;color: #777;}
#header .btn{padding: 10px 0px;font-size: 14px;}
#header .reg{position: relative;display: inline-block;}
#header .btn .comm-btn:first-child{margin-left:0px;}
#header .btn i {animation:tips 0.6s ease infinite;}
@keyframes tips {0% { -webkit-transform: translateY(0);}50%{ -webkit-transform: translateY(2px);}100%{ -webkit-transform: translateY(0);}}
#header .btn i{z-index:100;background: #fff;color: #00d084;border: 1px solid #00d084;position: absolute;font-size: 13px;font-style: normal;left: 50%;margin-left: -114px;top:40px;line-height: 22px;padding: 0 8px;border-radius: 3px;white-space: nowrap;}
#header .btn i:after,header .btn i:before {content: "";display: block;position: absolute;left: 106px;border: 8px solid;border-color: transparent transparent #00d084 transparent;top: -16px;}
#header .btn i:before{border-bottom-color: #fff;top: -15px;z-index: 1;}
/* 幻灯片 */
.banner{width: 100%;color: #3E4652;text-align: center;background:#F4F8FF url(wave.png) no-repeat center bottom;height: 180px;margin-top: 80px;}
.banner .banner-text {padding-top:50px;line-height: 40px;font-size:18px;font-weight: 300;}
.banner .banner-text h2{font-size:28px;font-weight:400;}
/* 内容区 */
.mtitle{text-align: center;font-size: 36px;line-height:60px;font-weight: lighter; color: #434A54;margin:30px 0px;}
.text{padding:20px 0px;background:#F4F8FF;}
.text .mtitle{margin:0px 0px;}
p.inabout{width: 688px;margin:auto;font-size: 16px;text-align: center;line-height: 28px;color: #82939e;text-shadow: 0 1px #fff;position: relative;font-weight: 300;}
p.inabout::before {left: -100px;top: 20px;content: url(yw-db-arr.png);width: 52px;height: 44px;position: absolute;overflow: hidden;}
p.inabout::after {right: -100px;top: 20px;background: url(yw-db-arr.png);width: 52px;height: 44px;position: absolute;overflow: hidden;content: '';background-position: -52px 0;}
/*应用中心*/
.app{margin: 20px 0px 20px 20px;padding:10px;background-color: #fff;border-radius: 8px;box-shadow: 0 5px 20px 0 rgba(14,31,102,.08);transition: all .2s;}
.app:hover{box-shadow:0 15px 40px 0 rgba(17,31,51,.2);transform:scale(1.02);}
.app .applogo{width:100%;border-radius:15px;padding:5px;}
.app .title{display: flex;display: -webkit-box; display: -moz-box;  display: -ms-flexbox;display: -webkit-flex; display: flex;line-height: 30px;}
.app .title h4{flex: 1;padding:5px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;font-size: 16px;font-weight:500;color: #333;line-height: 18px;}
.app .title h4:hover{color: #ee591f;}
.app .title span {margin: 0px 5px;padding:0px 5px;line-height: 25px;font-size: 12px;color: #404040;border: 1px solid #f4f4f4;text-align: center;border-radius: 5px;display: inline-block;position: relative;}
.app .title span:hover .qrcode{display: block;width: 160px;overflow: hidden;background: #FFFFFF;box-shadow: 0 0 1px #d6d6d6;text-align: center;font-size: 14px;color: #303030;position: absolute;right:0px;top:30px;z-index: 99;padding: 10px;line-height: 25px;}
.app .title span:hover .qrcode img{width: 100%;}
.app .miniapp-footer{width: 100%;height:80px;padding: 5px;left: 0;bottom: 0;color: #808080;overflow: hidden;}
.app .describe{font-size: 14px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient: vertical;}
.app span.go{font-size:14px;background: #fff;border: 1px solid #0db252;color: #0db252;text-align: center;}
/* 版权所有 */
#footer{clear: both;color: #3E4652;text-align: center;font-size: 14px;border-top: solid 1px #f5f6f7;background-color: #FFF;}
#footer a{color: #354152;}
#footer .copyright{padding:40px 0px;line-height:30px;}
#footer .icp{padding-left:10px;}
/* 应用预览 */
.review{padding:20px 0px;border-radius: 5px;margin-top: 80px;}
.review h4{font-weight: 600; font-size: 1.4rem; color: #3d464d;font-size: 14px;border-left: 2px #ee591f solid;padding-left: 10px;line-height:22px;margin-bottom: 10px;}
.review .detail{border: 1px solid #eaeef1;padding:20px;}
.review .detail .applogo{width:100%;border-radius:15px;padding:5px;}
.review .detail .miniapp-title{line-height: 30px;font-size:30px;color: #3d464d;padding: 10px 20px;position: relative;}
.review .detail .miniapp-title .tags{position: absolute;top: 0px;right:0px;}
.review .detail .miniapp-footer{padding-left:20px;font-size: 14px;color: #47525d;overflow: hidden;}
.review .appinfo{border: 1px solid #eaeef1;padding: 20px 30px;border-width: 0px 1px 0px 1px;line-height:25px;}
.review .appinfo .infobar{line-height:28px;margin: 10px 0px;font-size: 14px;}
.review .appinfo label{display: inline-block;color: #7d8994;}
.review .appinfo span{display: inline-block;line-height: 30px;}
.review .appinfo span.sell_price{font-size: 20px;}
.review .detail-qrcode{float:right;text-align: center;padding: 10px 40px;color: #7d8994;line-height: 30px;font-size: 14px;    width: 100%;}
.review .detail-qrcode img{width:140px;}
.review .apppic{border: 1px solid #eaeef1;padding:10px 30px;border-width: 0px 1px 0px 1px;line-height:25px;}
.review .apppic .app_pic{padding:5px;border: 1px solid #eaeef1;margin:5px;}
.review .apppic .app_pic img{width:100%;}
.review .apptext{border: 1px solid #eaeef1;padding:10px 30px;border-width: 0px 1px 1px 1px;}
.review .app_content{font-size: 14px;line-height:25px;color: #47525d;}
.review .app_content img{width: 100%;}
/* 布局 */
@media screen and (min-width:759px){
    .mtitle{font-size:1.5rem;}
    .text{padding:20px 0px}
    .apps{margin:20px 0px 20px -20px;}
}
@media screen and (max-width:760px){
    /* 预览 */
    header {padding:5px 0px;}
    header .logo img {width:80%;}
    header .btn {font-size: 14px;}
    header .btn i{display: none}
    /* 文字介绍 */
    .banner{height: auto;}
    .banner .banner-text{padding: 20px;font-size: 14px;line-height:25px}
    .banner .banner-text h2{font-size: 20px;}
    .text {padding: 10px 0px;}
    .text  .mtitle{font-size:28px;}
    p.inabout{width:100%;font-size: 14px;padding: 0px 60px;}
    p.inabout::before {left: 0px;}
    p.inabout::after {right: 0px;}
    .review .appinfo,.review .apppic,.review .apptext{padding:10px}
    /* 版权 */
    #footer{min-width:100%;padding:0px;height: 110px;text-align: center;}
    .comm-btn{padding: 0 5px;line-height:30px;height:30px;}
    .app{margin:10px 10px 5px 10px;}
    .review{padding:0px;margin: 5px;margin-top:90px;}
}