@charset "UTF-8";

*{margin: 0;padding: 0;font-family: "Microsoft YaHei UI"}
ul,li{list-style-type: none;margin:0;padding: 0}
a{text-decoration: none}

.clear:after{content:'';display: table;clear: both}
.center{text-align: center}

.logo{position: absolute;top:45px;left: 55px;z-index: 99}
.content{
    background-image: url(../images/bg1.jpg);
    background-position: center 0;
    background-repeat: no-repeat;
    background-color: #e4eaf2;}

.banner{height: 525px;/*background-image: url(../images/theme-title.png);background-size: auto auto;background-position: center center;background-repeat: no-repeat;*/position: relative;cursor: pointer;display: table;width: 100%;text-align: center;overflow: hidden}
.banner-item{display: table-cell;}
.banner img{vertical-align: middle;max-width: 100%;margin-top: 125px;}
/*.banner .btn{display:block;width: 192px;height: 53px;background-image: url(../images/btn.png);position: absolute;bottom: 0;left: 50%;margin-left: -96px}*/
.wrapper{width: 1095px;margin: 0 auto}

.sec00 ul{text-align: center;margin-bottom: 60px;font-size: 0}
.sec00 li{display:inline-block;width:314px;height:143px;padding: 35px 0 0 30px;background-image: url(../images/sec00-block-bg.png);background-repeat: no-repeat;color: #fff;text-align: left;position: relative;box-sizing: border-box;background-size: 100% 100%;margin: 0 25px;}
.sec00 li h3{font-size: 24px;margin: 10px 0}
.sec00 li p{font-size: 16px;}
.sec00 li:after{color: #c2030a;position: absolute;right: 16px;top: 12px;transform: skewX(-15deg);font-size: 14px;font-weight: bold;}
.sec00 li:nth-child(1):after{content:'上云礼一'}
.sec00 li:nth-child(2):after{content:'上云礼二'}
.sec00 li:nth-child(3):after{content:'上云礼三'}

.sec{padding-bottom: 100px;position: relative;}
.sec01{margin-top: 70px}
.sec-title{height: 39px;background-repeat: no-repeat;background-position: center center;margin-bottom: 55px;background-size: auto 100%}
.sec-title01{background-image: url(../images/sec-title01.png)}
.sec-title02{background-image: url(../images/sec-title02.png)}
.sec-title03{background-image: url(../images/sec-title03.png)}

.sec-recommd{margin:35px -10px}
.sec-recommd li{display: inline-block;width: 353px;height:246px;text-align: center;background-image: url(../images/sec01-block-bg.png);background-repeat:no-repeat;background-size:100% 100%;margin-right: 23px;padding: 75px 25px 25px 25px;box-sizing: border-box;position: relative;transition: all .3s;}
.sec-recommd li:hover{transform: scale(1.1)}
.sec-recommd li a{display: block;}
.sec-recommd li:after{content:'';display:block;margin: 0 auto;border-radius:100%;width: 70%;height: 0;box-shadow: 0 0 60px 20px rgba(0,0,0,.35);position: absolute;bottom: -27px;left: 15%;}
.sec-recommd li:last-child{margin-right: 0}
.sec-recommd li h2{font-size: 46px;color: #252b39;font-weight: normal;}
.sec-recommd li p{font-size: 18px;color: #252b39;margin: 5px 0 10px;font-weight: 700;}
.sec-recommd li .btn{display:block;margin:0 auto;width: 112px;line-height: 28px;color:#fff;
    background-image: -moz-linear-gradient( 90deg, rgb(238,215,131) 0%, rgb(238,146,113) 22%, rgb(237,77,95) 50%, rgb(221,62,134) 79%, rgb(205,46,173) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(238,215,131) 0%, rgb(238,146,113) 22%, rgb(237,77,95) 50%, rgb(221,62,134) 79%, rgb(205,46,173) 100%);
    background-image: -o-linear-gradient( 90deg, rgb(238,215,131) 0%, rgb(238,146,113) 22%, rgb(237,77,95) 50%, rgb(221,62,134) 79%, rgb(205,46,173) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(238,215,131) 0%, rgb(238,146,113) 22%, rgb(237,77,95) 50%, rgb(221,62,134) 79%, rgb(205,46,173) 100%);
    background-image: linear-gradient( 90deg, rgb(238,215,131) 0%, rgb(238,146,113) 22%, rgb(237,77,95) 50%, rgb(221,62,134) 79%, rgb(205,46,173) 100%);
    font-size: 14px;border-radius: 15px}


.sec-discount{background-image: url(../images/sec02-block-bg.png);background-repeat:no-repeat;background-size:100% 100%;padding: 53px 60px;border-radius: 15px;position: relative;box-shadow: 0 7px 50px rgba(0,0,0,0.5);display: block;width: 100%;box-sizing: border-box}
.sec-discount:before{content:'';display:block;width: 137px;height: 131px;background-image: url(../images/mark.png);position: absolute;left: -11px;top:-11px;background-size: 100% 100%}

.discount-item{​background: -moz-linear-gradient(top, #d021f1 0%, #6517d8 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d021f1), color-stop(100%,#6517d8));background: -webkit-linear-gradient(top, #d021f1 0%,#6517d8 100%);background: -o-linear-gradient(top, #d021f1 0%,#6517d8 100%);background: -ms-linear-gradient(top, #d021f1 0%,#6517d8 100%);background: linear-gradient(to bottom, #d021f1 0%,#6517d8 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d021f1', endColorstr='#6517d8',GradientType=0 );border-radius: 5px;border:1px solid #9f6cf1;padding: 20px 0;box-shadow: 0 0 15px rgba(0,0,0,0.3);}
.discount-item li{float:left;width: 33.3333333333%;padding-left: 50px;box-sizing: border-box;border-right: 1px dashed #ffffff}
.discount-item li:last-child{border: 0}
.discount-item li>*{vertical-align: middle}
.discount-item li>span{display:inline-block;width: 77px;height: 85px;background-repeat: no-repeat;background-size: 100% 100%}
.discount-item li .no1{background-image: url(../images/sec02-content-no1.png)}
.discount-item li .no2{background-image: url(../images/sec02-content-no2.png)}
.discount-item li .no3{background-image: url(../images/sec02-content-no3.png)}
.discount-item li .item{display: inline-block;width: calc(100% - 105px);text-align: center}
.discount-item li .title{font-size: 19px;color:#fff;margin-bottom: 10px}
.discount-item li .price{font-size: 31px;color:#ffcbb6}

.sec-discount-detail{background-position: center center;background-repeat: no-repeat;margin-top: 30px;}
.sec-discount-detail .btn{display:block;margin: 0 auto;width: 150px;line-height: 32px;border:1px solid #fff;border-radius: 10px;text-align: center;color:#fff;font-size: 18px;position: relative}
.sec-discount-detail .btn:after{content:'';display:block;width: 385px;height: 19px;position: absolute;top: 50%;left: 50%;margin: -9px 0 0 -193px;background-image: url(../images/arrow.png);}
.sec-discount:hover .btn{border:1px solid #00ffff;;color:#00ffff}
.sec-discount:hover .btn:after{background-image: url(../images/arrow-hover.png)}

.sec-activity{background-image: url(../images/sec03-block-bg.png);background-size:100% 100%;padding: 45px;font-size: 0;box-shadow: 0 10px 20px rgba(125,125,125,0.3);border-radius: 18px;}
.sec-activity li{width: 490px;height: 165px;display: table;margin-right: 25px;margin-bottom: 25px;transition: all .3s;float: left;}
.sec-activity li:hover{box-shadow: 0 15px 20px rgba(0,0,0,0.2);}
.sec-activity li:nth-child(2n){margin-right: 0}
.sec-activity li:nth-last-child(2),.sec-activity li:last-child{margin-bottom: 0}
.sec-activity li a{display: table-cell;height: 100%;background-size: 100% 100%;background-image: url(../images/sec03-content-bg3.png);text-align: center;padding-right: 95px;padding-left: 30px;vertical-align: middle}
.sec-activity li a h2{font-size: 24px;color:#010001;border-bottom: 1px solid #010001;padding:15px 0}
.sec-activity li a p{font-size: 16px;color:#010001;margin-top: 15px;margin-bottom: 10px;margin-left: -10px;margin-right: -10px;}
.sec-activity li a .red{color:#c8000b}
.sec-activity li a .bold{font-weight: bold}
@media screen and (max-width: 1200px) {
    /* .banner{height: 0;padding-bottom: 50%;position: relative} */
    .banner{height: 0;padding-bottom: 57%;position: relative}
    .banner img{position: absolute;left: 30px;top: 120px;margin-top: 0}
    .wrapper{width: 92%;}
    .logo{width: 150px}
    .sec-recommd li{width: 30%;margin-right: 4%;padding-top: 72px}
    .sec-recommd li h2{font-size: 46px;}
    .sec-activity li{width: 48%;margin-right: 4%;}

	.sec00 li{width: 30%;margin: 0 1.66666666%}
    .sec-activity li a p{margin-left: 0;margin-right: 0;}
}

@media screen and (max-width: 1024px) {

    .content{background-position: center 0;background-size: 150% auto}
    .banner img{max-width: 60%;}
    .sec{padding-bottom: 75px;}
    .sec-title{height: 30px;margin-bottom: 25px}
    .sec-recommd li{height: auto;padding-bottom: 45px}
    .sec-recommd li h2{font-size: 26px;}
    .sec-recommd li p{font-size: 14px}
    .discount-item{padding: 20px 0}
    .discount-item li{padding-left: 30px}
    .discount-item li .price{font-size: 20px}
    .discount-item li>span{width: 67px;height: 75px}
    .sec-discount{padding: 40px}
    .sec-activity{padding: 40px}

    .sec-activity li a h2{font-size: 18px;}
    .sec-activity li a p{font-size: 14px;}
    .sec-activity li a .red{font-size: 16px;}

    .sec00 li{height: 125px}
    .sec00 li h3{font-size: 16px;}
    .sec00 li p{font-size: 14px}
}

@media screen and (max-width: 640px) {
    .logo{width: 80px;left: 20px;top:10px}
    /* .banner{padding-bottom: 60%;} */
    .banner{padding-bottom: 70%;}
    .banner img{max-width: 75%;margin-left:0%;left: 15px;top: 60px}
    /*.content{padding-top: 70px;}*/
    /*.banner{margin-bottom: 30px;padding-bottom: 53%}*/
    .content{background-size: 150% auto}
    .sec00 ul{margin-bottom: 30px}
    .sec00 li{width: 100%;top: 0 !important;left: 0 !important;right: 0;background-image: url(../images/sec00-block-mobile-bg.png);height: 80px;padding-top: 6px;margin-bottom: 5px;margin: 0}
	.sec00 li:after{top: 2px;right: 14px}
    .sec{padding-bottom: 50px}
    .sec01{margin-top: 30px}
    .sec-title{height: 20px;}
    .sec-recommd{margin: 0}
    .sec-recommd li{width: 100%;background-image: none;background-color: #b9d3ea;padding: 15px 20px;margin: 0 0 10px 0;border-radius: 10px;}
    .sec-recommd li:after{display: none}
    .mb-left{float: left;text-align: left}
    .sec-recommd li .btn{float: right;line-height: 35px;margin: 15px 0}
    .discount-item{padding: 0 20px}
    .discount-item li{width: 100%;border-right: 0;padding-top: 20px;padding-bottom: 20px;border-bottom: 1px dashed rgba(255,255,255,.3)}
    .discount-item li>span{width: 48px;height: 54px;}
    .sec-discount:before{width: 65px;height: 67px;}
    .sec-discount,.sec-activity{background-image: none;padding:15px}
    .sec-activity{border: 3px solid #b6cfe4;background-color: #b9d3ea;border-radius: 10px;}
    .sec-activity li{width: 100%;height:auto;margin: 0 0 15px 0}
    .sec-activity li:nth-last-child(2){margin-bottom: 15px}
    .sec-activity li a{padding: 10px 55px 10px 15px}
    .sec-activity li a h2{padding: 10px 0}
    .sec-activity li a p{margin-top: 10px}

}