body {
    min-width: 1240px;
    max-width: 2500px;
    margin: 0 auto;
    background-image: linear-gradient(120deg, #6fc9b7, #093637);
}
.about2_img{width:460px;height:488px; float:left;border:solid 1px #ddd;position:relative;box-sizing:border-box}
.about2_img .img{position:absolute;left:25px;top:25px}
.about2_img .img img{max-width:93%;display:block;}
.about_txt{width:calc(100% - 530px);float:right;}
.about_txt h3{font-size:25px;margin-bottom:20px}
.about_txt p{line-height:28px;text-align:justify;margin-bottom:15px;color:#555}
.about_txt b{color:#1D60E6;}

.num{display: -webkit-flex;display: flex;justify-content:space-between;flex-wrap: nowrap;align-items:center; height:160px; font-size:15px; color:#000; text-align:center; }
.num span,.num i{ display:inline-block; vertical-align:top;}
.num li { width:25%; display:inline-block;}
/*.num li:nth-child(2){ width:210px; display:inline-block;}
.num li:nth-child(4){ width:150px; display:inline-block;}*/
.num li span{ width:100%; border-right:1px solid #ddd;text-align:center; }
.num li:nth-child(4) span{ width:90%; border-right:0px solid #ddd;}
.num span{ font-size:60px; color:#1D60E6; font-family:impact; position:relative; z-index:3;}
.num span em{ font-size:22px; font-family:impact; line-height:30px; color:#1D60E6;}
.num p+p{ margin-top:30px;text-align:center; }

.scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 100, 100, .4) transparent;
}

.scrollbar::-webkit-scrollbar {
    width: .6rem;
}

.scrollbar::-webkit-scrollbar-thumb {
    border-radius: .6rem;
    background-color: rgba(100, 100, 100, .4)
}


.site {
    overflow: hidden;
}




.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
   /* height: 100vh;
    min-height: 600px;
    max-height: 800px;*/
	overflow: hidden;
}


.wrapper h3 {
    position: absolute;
    left: 4rem;
    top: 4rem;
    z-index: 1000;
    padding: 0 1rem;
    background-color: #fff;
    font-size: 1.4rem;
    font-weight: 400;
    color: #222;
    border-radius: 1.4rem;
}

.wrapper .container {
    position: relative;
    margin: 0 auto;
}

.horizontal .container {
    width: 300px;
    height: 500px;
	min-width:300px;
}

.vertical .container {
    width: 300px;
    height: 500px;
}

.container .cards-list {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    background-color: #f4f4f4;
    border-radius: 0.3125rem;
    transition: 330ms;
}

.demo4 .cards-list {
    transition: 440ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
 

.horizontal .cards-list {
    width: 100%;
}

.horizontal .img {
    height: 408px;
}




.vertical .cards-list {
    display: flex;
    height: 100%;
}

.vertical .img,
.vertical .main-con {
    height: 100%;
}

.vertical .img {
    width: 18rem;
}

.vertical .main-con {
    width: 19rem;
}


.img>img {

    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    -moz-user-select: none;
    user-select: none;

}

.main-con {
    padding: 0 1rem;
    box-sizing: border-box;
}

.main-con .name {
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #424242;
	text-align:center;
}

.main-con .content {
    padding-top: 1rem;
    height: 4.5rem;
    font-size: 0.9rem;
    color: #777;
    text-align: justify;
    line-height: 1.4rem;
}

.main-con .label {
    font-size: 0.9rem;
    color: #555;
    padding: 1rem 0;
}





.btn-direct {
    position: absolute;
    top: 50%;
    z-index: 100000;
    width: 4rem;
    height: 4rem;
    transform: translateY(-50%);
    cursor: pointer;
    transition: .2s;
}


.btn-direct.btn-left {
    left: 0rem;
}

.btn-direct.btn-right {
    right: 0rem;
}

.btn-direct>span {
    position: absolute;
    left: calc(50% - .6rem);
    top: calc(50% - .6rem);
    width: 1.2rem;
    height: 1.2rem;
    border-top: 0.2rem solid #4c5493;
    border-left: 0.2rem solid #4c5493;
}

.horizontal .shift-left {
    transform: translateX(25%) rotate(-45deg);
}

.horizontal .shift-right {
    transform: translateX(-25%) rotate(135deg);
}

.vertical .shift-left {
    transform: translateY(25%) rotate(45deg);
}

.vertical .shift-right {
    transform: translateY(-25%) rotate(-135deg);
}



.demo7 .container {
    width: 18rem;
    height: 24rem;
    overflow: hidden;
}

.navigation {
    position: absolute;
	background:#333;
    bottom: 0;
    top: 500px;
    transform: translate(80%);
}

.navigation .dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin: .5rem;
    border: .125rem solid #000;
    background-color: #000;
    border-radius: 100%;
    cursor: pointer;
}
.navigation .dot.active {
    background-color: transparent;
}