
.md33666.i-main{width: 100%;position: relative;font-family: Montserrat-Regular;}
.md33666.i-main .i-box{width: 100%;padding-top: 37.5%;position: relative;}
.md33666.i-main .i-box:before{content: "";display: block;width: 100%;height: calc(100% - 1rem);top: 1rem;background-image: url(../images/banner-mask.png);background-size: auto 100%;background-repeat: no-repeat;background-position: left top;pointer-events: none;position: absolute;left: 0;z-index: 2;}
.md33666.i-main .i-img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;z-index: 1;}
.md33666.i-main .i-text{width: 16rem;position: absolute;left: 50%;margin-left: -8rem;top: calc(50% + 0.5rem);transform: translate(0,-50%);z-index: 12;}
.md33666.i-main .i-title{color: #fff;line-height: 1;font-weight: bold;font-family: Montserrat-SemiBold;}
.md33666.i-main .i-tit{color: #fff;line-height: 1.333;font-family: Montserrat-Medium;}
.md33666.i-main .i-des{color: #fff;line-height: 1.5;margin-top: .4rem;max-width: 61em;}
@media(max-width: 1200px){
    .md33666.i-main .i-text{top: 50%;}
    .md33666.i-main .i-box:before{height: 100%;top: 0;}
}
@media(max-width: 778px){
    .md33666.i-main .i-text{width: 100%;left: 0;margin-left: 0;padding: 0 0.3rem;}
    .md33666.i-main .i-des{margin-top: .2rem;line-height: 1.333;}
}
@media(max-width: 500px){
    .md33666.i-main .i-title{font-size: 0.5rem;}
    .md33666.i-main .i-tit{font-size: .28rem;}
    .md33666.i-main .i-des{font-size: .24rem;}
    .md33666.i-main .i-box{padding-top: 56.25%;}
}

.md33668.k-main{width: 100%;font-family: Montserrat-Regular;padding: 1rem .3rem;}
.md33668.k-main .layout{width: 100%;max-width: 16rem;margin: 0 auto;}
.md33668.k-main .k-list{width: 100%;display: flex;flex-wrap: wrap;}
.md33668.k-main .k-item{width: calc(50% - 0.2rem);margin-right: 0.4rem;margin-bottom: .3rem;}
.md33668.k-main .k-item:nth-child(2n){margin-right: 0;}
.md33668.k-main .k-box{width: 100%;padding-top: 61.538%;position: relative;border-radius: .2rem;overflow: hidden;}
.md33668.k-main .k-bg{width: 100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;}
.md33668.k-main .k-img{max-width: 90%;height: 1.5rem;position: absolute;left: 50%;transform: translate(-50%,-50%);top: 57%;z-index: 2;object-fit: contain;transition: all 0.5s ease 0s;}
.md33668.k-main .k-text{width: 100%;padding-right: .6rem;position: relative;padding: .22rem 0.6rem .22rem 0;}
.md33668.k-main .k-tit{color: #333;line-height: 1.333;font-family: Montserrat-Medium;}
.md33668.k-main .k-des{color: #999;line-height: 1.5;margin-top: .18rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.md33668.k-main .k-arrow{width: .6rem;height: .6rem;border-radius: 50%;background-color: #f5f5f5;border-radius: 50%;position: absolute;right: 0;top: 50%;margin-top: -0.3rem;}
.md33668.k-main .k-arrow:before{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1;background: var(--active);background: linear-gradient(to right, var(--active), var(--theme));border-radius: 50%;opacity: 0;transition: opacity .3s;}
.md33668.k-main .k-arrow:after{content: "";display: inline-block;border-left: 0.09rem solid #999;border-top: .06rem solid transparent;border-bottom: .06rem solid transparent;position: absolute;left: 50%;margin-left: -0.05rem;top: 50%;margin-top: -0.06rem;z-index: 2;transition: all .3s;}
.md33668.k-main .k-item:hover .k-arrow:before{opacity: 1;}
.md33668.k-main .k-item:hover .k-arrow:after{border-left-color: #fff;}
.md33668.k-main .k-item:hover .k-img{transform: translate(-50%,-50%) scale(1.07);}
@media(max-width: 750px){
    .md33668.k-main{padding: .6rem .3rem;}
    .md33668.k-main .k-item{width: calc(50% - 0.15rem);margin-right: 0.3rem;}
}
@media(max-width: 500px){
    .md33668.k-main .k-tit{font-size: .28rem;}
    .md33668.k-main .k-des{font-size: .24rem;margin-top: .1rem;}
}

.pg-main{text-align: center;font-size: 0;font-family: Montserrat-Regular;}
.pg-main .pg-arrow{width: .5rem;height: .5rem;border-radius: 50%;background-color: #f2f3f5;margin: 0 0.05rem;cursor: pointer;position: relative;display: inline-block;vertical-align: top;}
.pg-main .pg-one{min-width: .5rem;height: .5rem;line-height: .5rem;border-radius: 0.25rem;background-color: #f2f3f5;margin: 0 0.05rem;padding: 0 0.1rem;cursor: pointer;position: relative;display: inline-block;vertical-align: top;color: #333;transition: color .3s;}
.pg-main .pg-prev:after{content: "";display: inline-block;border-right: 0.09rem solid #333;border-top: .06rem solid transparent;border-bottom: .06rem solid transparent;position: absolute;left: 50%;margin-left: -0.05rem;top: 50%;margin-top: -0.06rem;z-index: 2;transition: all .3s;}
.pg-main .pg-next:after{content: "";display: inline-block;border-left: 0.09rem solid #333;border-top: .06rem solid transparent;border-bottom: .06rem solid transparent;position: absolute;left: 50%;margin-left: -0.04rem;top: 50%;margin-top: -0.06rem;z-index: 2;transition: all .3s;}
.pg-main .pg-one span{display: inline-block;position: relative;z-index: 2;}
.pg-main .pg-arrow:before,
.pg-main .pg-one:before{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1;background: var(--active);background: linear-gradient(to right, var(--active), var(--theme));border-radius: .25rem;opacity: 0;transition: opacity .3s;}
.pg-main .pg-arrow:hover:before,
.pg-main .pg-one:hover:before{opacity: 1;}
.pg-main .pg-arrow:hover:after{border-left-color: #fff;border-right-color: #fff;}
.pg-main .pg-one:hover:before{opacity: 1;}
.pg-main .pg-one:hover{color: #fff;}
.pg-main .pg-one.active{color: #fff;}
.pg-main .pg-one.active:before{opacity: 1;}
@media(max-width: 500px){
    .pg-main .pg-one{font-size: .24rem;}
}
