.template{padding-bottom: 80px;}
.template .banner img{ width: 100%}

.template .template-main{ height: 100%;min-height: 900px;}
.template .template-main .template-style{width: 100%;background-color: #FFFFFF;margin: 40px 0; box-sizing: border-box;border-bottom: 1px solid #DCDCDC}
.template .template-main .template-style *{box-sizing: border-box;}
.template .template-main .template-style>div{display: flex;flex-wrap: wrap;align-items: center;}
.template .template-main .template-style>div:nth-of-type(1){margin-bottom: 40px;}
.template .template-main .template-style>div>span{color: #333333;font-size: 16px;align-self: flex-start;line-height: 30px;}
.template .template-main .template-style>div>div{display: flex;flex-wrap: wrap;align-items: center;max-width: calc(100% - 50px);}
.template .template-main .template-style>div>div>a{color: #666666;margin: 0 10px;font-size: 16px;height: 30px;line-height: 30px;transition: all .4s;}
.template .template-main .template-style>div>div>a:hover{color: #006ee6;}
.template .template-main .template-style>div>div>a.active{color: #FFFFFF;background-color: #006ee6;padding: 0px 20px;border-radius: 15px;}
.template .template-main .template-list{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
.template .template-main .template-list .template-box{ border: 1px solid #DCDCDC;width:calc(100% / 3 - 60px);margin-bottom: 80px;text-align: center;border-radius: 10px;cursor: pointer;overflow: hidden;}
.template .template-main .template-list .template-box .template-con{position: relative;}
.template .template-main .template-list .template-box .template-con img{width: 100%; max-height: 465px;display: block;background-size: cover;background-position: center top;transition: ease-out 3s;-moz-transition: ease-out 3s;-o-transition: ease-out 3s;-webkit-transition: ease-out 3s;border-radius: 10px;}
.template .template-main .template-list .template-box:hover img {background-position: center bottom;}
.template .template-main .template-list .template-box .template-cover{border-radius: 10px;position: absolute;left: 0px;top: -120%;width: 100%;height: 100%;background: url(../images/sypcover.png);}
.template .template-main .template-list .template-box .template-cover a{display: block;position: absolute;width: 120px;height: 36px;line-height: 36px;text-align: center;border-radius: 36px;    background: linear-gradient(0deg, #FF7E0E 0%, #FFB473 100%);font-size:16px;color: #FFFFFF;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.template .template-main .template-list .template-box:hover .template-cover{top: 0;}
.template .template-main .template-list .no_margin{margin: 0!important;}
.tipsmassage{color: #999999;text-align: center;font-size: 16px}
.template .template-main .template-list .template-box .num{color: #333333;margin: 20px 0 0 0 ;}
@media screen and (min-width: 960px) and (max-width: 1219px) {
    .template .template-main .template-list .template-box{width: 260px;}
}

@media screen and (min-width: 768px) and (max-width: 959px) {
    .template .template-main .template-list .template-box{width: 220px;margin-bottom: 60px;}
}

@media screen and (max-width: 767px) {
    .template .template-main .template-style>div:nth-of-type(1){margin-bottom: 10px;}
    .template .template-main .template-style{margin: 20px 0;padding: 10px;}
    .template .template-main .template-list .template-box{width: 250px;margin-bottom: 20px;}
    .template .template-main .template-style>div>span{font-size: 14px}
    .template .template-main .template-style>div>div>a{font-size: 14px}
    .template .template-main .template-style>div>div>a.active{padding: 0 15px;line-height: 25px;height: 25px;}
}
@media screen and (max-width: 530px) {
    .template .template-main .template-list .template-box{ display: flex;justify-content: center;flex-direction: column;align-items: center;margin: 0 auto;margin-bottom: 20px}
    .template .template-main .template-list .template-box .num{margin-top: 10px;}
}
.index-btn { display: block; text-align: center; width: 220px; height: 60px; line-height: 60px; background: -webkit-gradient(linear, left bottom, left top, from(#FF7E0E), to(#FFB473)); background: -webkit-linear-gradient(bottom, #FF7E0E 0%, #FFB473 100%); background: -moz-linear-gradient(bottom, #FF7E0E 0%, #FFB473 100%); background: linear-gradient(0deg, #FF7E0E 0%, #FFB473 100%); background-color: #ff7e0e \9; -webkit-border-radius: 30px; border-radius: 30px; margin: 0 auto; color: #fff; font-size: 24px; font-size: 2.4rem; font-weight: 400; }
.index-btn:hover{color: #fff}
@media screen and (max-width: 1419px) { .index-btn { font-size: 20px; font-size: 2rem; height: 54px; line-height: 54px; } }

@media screen and (max-width: 1219px) { .index-btn { font-size: 18px; font-size: 1.8rem; width: 200px; height: 44px; line-height: 44px; } }

@media screen and (max-width: 991px) { .index-btn { font-size: 16px; font-size: 1.6rem; width: 160px; height: 38px; line-height: 38px; } }

@media screen and (max-width: 767px) { .index-btn { font-size: 12px; font-size: 1.2rem; width: 110px; height: 30px; line-height: 30px; } }