section .card{
    position: relative;
    width: 260px;
    height: 220px;
    margin: 20px;
    transform-style: preserve-3d;
    perspective: 1000px;
}

section .card .box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: 1s ease;
}
section .card:hover .box{
    transform: rotateY(180deg);
}
section .card .box .imgBx{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
section .card .box .imgBx img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
}
section .card .box .contentBx{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 100%;*/
    background: #b6b6b7;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
}
section .card .box .contentBx div{
    transform-style: preserve-3d;
    padding: 20px;
    /* background: linear-gradient(45deg,#fe0061,#ffeb3b)024683; */
    background: #024683;
    transform: translateZ(100px);
	width:100%;
	height:174px;
}
section .card .box .contentBx div h2{
    color: #fff;
    font-size: 20px;
    letter-spacing: 1px;
}
section .card .box .contentBx div p{
    color: #fff;
    font-size: 16px;
	word-break: break-all;
}



section .card1{
    position: relative;
    width: 240px;
    height: 220px;
    margin: 20px;
    transform-style: preserve-3d;
    perspective: 1000px;
}

section .card1 .box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: 1s ease;
}
section .card1:hover .box{
    transform: rotateY(180deg);
}
section .card1 .box .imgBx{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
section .card1 .box .imgBx img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
}
section .card1 .box .contentBx{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 100%;*/
    background: #b6b6b7;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
}
section .card1 .box .contentBx div{
    transform-style: preserve-3d;
    padding: 20px;
    /* background: linear-gradient(45deg,#fe0061,#ffeb3b)024683; */
    background: #024683;
    transform: translateZ(100px);
	width:100%;
	height:174px;
}
section .card1 .box .contentBx div h2{
    color: #fff;
    font-size: 20px;
    letter-spacing: 1px;
}
section .card1 .box .contentBx div p{
    color: #fff;
    font-size: 16px;
	word-break: break-all;
}

.carousel{
    position: relative;
    margin: 0 auto;
    top: 1rem;
    border: 0.01rem solid #000;
}
/*子元素样式*/
/*.slider-main-img img{*/
/*/!*手动设定图片的宽高度*!/*/
/*}*/
.slider-main-img{
    position: absolute;
    top: 0;
    left: 0;
}
.slider-ctrl {
    position: absolute;
    bottom: 0.05rem;                        /*圆圈位置*/
    left: 50%;
    transform: translate(-50%);
}
.slider-ctrl-con{
    display: inline-block;
    width: 0.2rem;                        /*圆圈大小*/
    height: 0.2rem;
    border-radius: 50%;
    background-color: #fff;              /*圆圈开始颜色*/
    margin-right: 0.1rem;                 /*圆圈间距*/
    cursor: pointer;                    /*圆圈手势*/
}
.slider-ctrl .slider-ctrl-con-active {
    background-color: #000;             /*圆圈变更颜色*/
}