.gp-bd{overflow-y: auto; overflow-x: hidden;}
/**
* banner
*/
.gp-bd .banner{ position: relative; width: 100vw; overflow: hidden;}
.gp-bd .banner .bg{ display: flex; justify-content: center; align-items: center; }
.gp-bd .banner .ban-box{position: absolute; width: 950px; left: 0; right: 0; margin: auto; color: #fff; display: flex; justify-content: center; align-items: center; top: 60px; flex-direction: column;}
.gp-bd .banner .ban-box .t1{font-size: 68px; font-weight: bold;font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, "WenQuanYi Micro Hei", Verdana, sans-serif, "\5B8B\4F53";}
.gp-bd .banner .ban-box .t2{font-size: 14px; text-align: center; margin: 35px 20px; opacity: 0.7;}
.gp-bd .banner .item-li span{ display: inline-block; padding: 8px 50px; font-size: 16px; border: 1px solid rgba(255,255,255,0.5); border-radius: 20px; margin: 0 15px; cursor: pointer; transition: all 100ms ease 0ms;}
.gp-bd .banner .item-li span a{text-decoration: none; color: #fff;}
.gp-bd .banner .item-li span:hover{background: #fff; font-weight: bold;}
.gp-bd .banner .item-li span:hover a{color: #7a00ff;}
.mao-dong{ animation: mao-dong 800ms ease-in-out infinite alternate; }
@keyframes mao-dong { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(20px) scale(0.85); } }
.bg-dong{ animation: bg-dong 1800ms ease-in-out infinite alternate; }
@keyframes bg-dong { 0% { transform: translateX(10px); } 100% { transform: translateX(-10px); } }


/**
* 工具介绍-meal
*/
.gp-bd  .meal{ display: flex; height: 200px; margin-bottom: 30px;}
.gp-bd  .meal .dp{color: #fff; display: flex; position: relative; cursor: pointer; width: 100%; margin: 30px 10px 20px 10px; flex-wrap: wrap; box-sizing: border-box; padding: 10px; border-radius: 20px; }
.gp-bd  .meal .dp-1{ background-color: #3c90ff; background-image: linear-gradient(to bottom right, #3c90ff,#8abeff); }
.gp-bd  .meal .dp-3{ background-color: #38d4aa; background-image: linear-gradient(to bottom right, #38d4aa, #11c6c4); }
.gp-bd  .meal .card-body{ display: flex; flex-shrink:0; flex-grow:0; width: 100%; }
.gp-bd  .dp div.morey{ font-size: 20px; padding-top: 28px; margin-left: 10px;}
.gp-bd  .dp div.qian{ font-size: 50px; padding-top: 17px; font-weight: 100; display: inline-table; padding-bottom: 10px; }
.gp-bd  .dp div.mknrs { font-size: 18px; margin-left: 10px; margin-top: 25px; }
.gp-bd  .dp div.mknrs .scdv{font-size: 16px;}
.gp-bd  .meal .card-buy{ color: #fff; font-size: 14px; text-align: center; line-height: 50px; border-top: 1px solid rgba(255,255,255,0.2); }
.gp-bd  .meal .tjzs{ position: absolute; transition: all 100ms ease 0ms; right: 30px; top: 40px; text-align: center; color: #ffffff; width: 140px; line-height: 40px; border-radius: 20px; font-size: 16px;  border: 1px solid #fff;}
.gp-bd  .meal .tjzs:hover{background: #fff; color: #7a00ff; font-weight: bold;}
.gp-bd  .meal .dp a{ color: #fff; text-decoration: none; width: 100%; height: 100%;}

/**
*title
*/
.p-title p{display: flex; align-items: center; flex-direction: column;margin: 40px 0;}
.p-title p .t1{font-size: 46px;}
.p-title p .t2{font-size: 16px; color: #999; margin: 10px;}
.p-title p .t2 a{text-decoration: none; color: #7a00ff; font-weight: bold;}

/**
*案例库
*/
.gp-bd .list .li{max-width: 290px; background: #fff; margin: 30px; cursor: pointer;overflow: hidden; font-size: 13px; text-align: center;}
.gp-bd .list .li img{max-width: 280px; border-radius: 16px;}
.gp-bd .list .li .pic{position: relative;width: 280px; height: 480px; display: flex; align-items: center; border:5px solid #eee;; border-radius: 16px;}
.gp-bd .list .li video{width: 280px; display: none; border-radius: 16px;
}
.gp-bd .list .li .info{height: 70px; margin-top: 15px;}
.gp-bd .list .li .set{line-height: 32px; margin: 0 30px; margin-top: 15px;background: #005cf9; color: #fff; border-radius: 16px;}
.gp-bd .list .li:hover .set{background: #f94f00;color: #fff; margin: 15px 30px; line-height: 32px; border-radius: 16px;}