.section .wrapper {
    width: 1190px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
	overflow:hidden;
}

.sectionBox {
    position: relative;
}

.sectionBox .circlesList {
    position: absolute;
    right: 260px;
    top: calc(50% - 70px);
    z-index: 9;
}

.sectionBox .circlesList .circlesItem {
    width: 16px;
    height: 16px;
    background: #333;
    border-radius: 50%;
    cursor: pointer;
    margin: 10px;
    text-align: center;
    color: #fff;
    font-size: 12px;
}

.sectionBox .circlesList .circlesItemActive {
    background: #417fee;
}

.sectionBox .section {
    display: none;
}

.sectionBox .section1 .section1img {
    width: 100%;
    height: 744px;
    position: relative;
    /*background: url('/base/plugins/html-blocks/pc/caseService/images/bg01.png') no-repeat;*/
}

.sectionBox .section2 .section2img {
    width: 100%;
    height: 744px;
    position: relative;
    /*background: url('/base/plugins/html-blocks/pc/caseService/images/bg02.png') no-repeat;*/
}

.sectionBox .section1-left-area,
.sectionBox .section2-right-area {
    width: 44%;
    float: left;
    font-family: "黑体";
}

.sectionBox .section1-left-area .learnMore,
.sectionBox .section2-right-area .learnMore {
    width: 118px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: #fff;
    background: #81bcfc;
    display: inline-block;
    font-size: 20px;
    margin-top: 72px;
    text-decoration: none;
}

.sectionBox .section1-left-area .learnMore:hover,
.sectionBox .section2-right-area .learnMore:hover {
    text-decoration: none;
}

.sectionBox .section1-left-area .desc-p,
.sectionBox .section2-right-area .desc-p {
    font-size: 56px;
    color: #333333;
}

.sectionBox .section1-left-area .desc,
.sectionBox .section2-right-area .desc {
    font-size: 16px;
    line-height: 28px;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.sectionBox .section1-left-area .tip,
.sectionBox .section2-right-area .tip {
    display: inline-block;
    margin-top: 36px;
    margin-bottom: 46px;
    color: #888;
    font-size: 28px;
}

.sectionBox .section1-right-area,
.sectionBox .section2-left-area {
    width: 56%;
    position: relative;
    height: 744px;
}

.sectionBox .section1-right-area .mac,
.sectionBox .section2-left-area .mac {
    width: 636px;
    height: 528px;
    z-index: 1;
    position: absolute;
    top: 30%;
    left: -10%;
    opacity: 0.5;
    transition: all 0.8s ease-in;
}

.sectionBox .section1-right-area .iphone,
.sectionBox .section2-left-area .iphone {
    width: 268px;
    height: 544px;
    position: absolute;
    z-index: 2;
    right: -13%;
    top: 31%;
    opacity: 0.5;
    transition: all 0.8s ease-in;
}

.sectionBox .section2-right-area {
    float: right;
    text-align: right;
}

.sectionBox .section2-left-area {
    float: left;
    margin-left: 0;
}

.sectionBox .section2-left-area .mac {
    top: 22%;
}


/* 动画 */

.sectionBox .active .section1-right-area .mac,
.sectionBox .active .section2-left-area .mac {
    left: 3%;
    opacity: 1;
    transition: all 0.8s;
}

.sectionBox .active .section1-right-area .iphone,
.sectionBox .active .section2-left-area .iphone {
    right: 0;
    opacity: 1;
    transition: all 0.8s;
}