.swiper-container {

    width: 100%;

    height: 100%;

}



.wrap {

    display: flex;

    position: relative;

    z-index: 6;

    width: 100%;

    height: 100%;

    padding: 80px 0 0;

}



/* banner */

.banner-wrap {

    position: relative;

    display: block;

    padding: 0 6.25%;

}



.banner-page {

    display: flex;

    justify-content: flex-end;

    position: absolute;

    z-index: 99;

    right: 50px;

    bottom: 50px;

    padding: 0 50px 50px 0;

}



/* banner 百叶窗*/

.banner {

    position: relative;

    width: 100%;

    height: 100%;

}



.banner-icon {

    position: absolute;

    z-index: 50;

    right: 1%;

    top: 30%;

}



.banner-layer {

    position: relative;

    z-index: 1;

}



.banner-layer img {

    width: 100%;

}



.shutter {

    position: absolute;

    z-index: 10;

    overflow: hidden;

    width: 100%;

    height: 100%;

}



.shutter-img {

    z-index: 1;

}



.shutter-img,

.shutter-img a {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.shutter-img a {

    cursor: default;

}



.shutter-img a>img {

    width: 100%;

    height: 100%;

}



.shutter-img .created {

    overflow: hidden;

    position: absolute;

    z-index: 20;

}





.shutter-btn li {

    position: absolute;

    z-index: 2;

    top: 50%;

    width: 40px;

    height: 72px;

    margin-top: -36px;

    cursor: pointer;

}



.shutter-btn li.prev {

    left: 5%;

    background: url(../images/btn_left.png) no-repeat 0 0;

    background-size: 40px;

}



.shutter-btn li.next {

    right: 5%;

    background: url(../images/btn_right.png) no-repeat 0 0;

    background-size: 40px;

}



.banner-logo {

    position: absolute;

    z-index: 55;

    left: 50%;

    bottom: -60px;

    margin: 0 0 0 -59px;

}





/* 第1部分 */



.part1 {

    perspective: 1000px;

    position: relative;

}



.part1-detail {

    padding: 100px 0 50px 20px;

    font: 400 16px/30px '微软雅黑';

    color: #000;

    letter-spacing: 20px;

    text-align: center;

    opacity: 0;

    transform: translate3d(0, 50%, 0);

    transition: 1s 0.3s;

}



.part1-nav {

    display: flex;

    justify-content: center;

    padding: 0 0 100px;

    opacity: 0;

    transform: rotateX(120deg);

    transition: 1s 0.3s;

}



.part1-nav ul {

    position: relative;

    display: flex;

    justify-content: center;

}



.part1-nav ul::before {

    content: '';

    position: absolute;

    z-index: 10;

    left: -3px;

    top: -3px;

    width: 7px;

    height: 7px;

    background: url(../images/plus.png) no-repeat 0 0;

}



.part1-nav ul::after {

    content: '';

    position: absolute;

    z-index: 10;

    right: -3px;

    bottom: -3px;

    width: 7px;

    height: 7px;

    background: url(../images/plus.png) no-repeat 0 0;

}



.part1-nav ul li {

    position: relative;

    width: 320px;

}



.part1-nav ul li::before {

    content: '';

    position: absolute;

    z-index: 10;

    right: -3px;

    top: -3px;

    width: 7px;

    height: 7px;

    background: url(../images/plus.png) no-repeat 0 0;

}



.part1-nav ul li::after {

    content: '';

    position: absolute;

    z-index: 10;

    left: -3px;

    bottom: -3px;

    width: 7px;

    height: 7px;

    background: url(../images/plus.png) no-repeat 0 0;

}



.part1-nav ul a {

    display: block;

    justify-content: space-between;

    position: relative;

    z-index: 5;

    padding: 22px 0;

    font: 400 16px/30px '微软雅黑';

    color: #000;

    text-align: center;

    border: 1px solid #dedede;

    border-left: 0;

}



.part1-nav ul li:nth-child(1) a {

    border-left: 1px solid #dedede;

}



.part1-nav ul a p {

    padding: 0 20px;

    background: url(../images/arrow_next.png) no-repeat -100% center;

    transition: 0.6s;

}



.part1-nav ul a:hover {

    background: #eff2f8;

}



.part1-nav ul a:hover p {

    transform: translate3d(-50px, 0, 0);

    background-position: 280px center;

}



.part1-box {

    display: flex;

    justify-content: space-between;

    padding: 0 6.25%;

}



.part1-left {

    width: 65%;

    padding: 50px;

    background: #edf1f7;

    opacity: 0;

    transform: rotateY(120deg);

    transform-origin: 0 center;

    transition: 1s 0.3s;

}



.part1-left-en {

    font: bold 36px/42px '微软雅黑';

    color: #000;

}



.part1-left-ch {

    padding: 20px 0;

    font: bold 16px/30px '微软雅黑';

    color: #000;

}



.part1-left li {

    display: flex;

    justify-content: space-between;

    padding: 45px 0;

    font: 400 16px/30px '微软雅黑';

    color: #000;

    border-bottom: 1px solid #b7bdcd;

}



.part1-left li p {

    width: 75%;

}



.part1-left li span {

    width: 20%;

    font: bold 16px/30px '微软雅黑';

    color: #000;

    text-align: right;

}



.part1-right {

    width: 32%;

    opacity: 0;

    transform: rotateY(-120deg);

    transform-origin: right center;

    transition: 1s 0.3s;

}



.part1-name {

    padding: 90px 0 0;

    text-align: center;

}



.part1-right-detail {

    font: 400 14px/30px '微软雅黑';

    color: #000;

    text-align: center;

}



.part1-right-since {

    padding: 0 0 80px;

    text-align: center;

}



.part1-buy {

    padding: 45px 60px;

    background: #dae0ee;

}



.part1-buy span {

    font: bold 18px/24px '微软雅黑';

    color: #000;

}



.part1-buy p {

    font: 400 14px/24px '微软雅黑';

    color: #000;

}



.part1-ul {

    margin-top: 20px;

    padding: 45px 60px;

    background: #dae0ee;

}



.part1-li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 0;

}



.part1-li-left {

    width: 115px;

    padding-left: 36px;

    color: #000;

    background: url(../images/part1_yes.png) no-repeat 0 8px;

}



.part1-li-left span {

    font: bold 18px/30px '微软雅黑';

}



.part1-li-left p {

    font: 400 14px/20px '微软雅黑';

}



.part1-li-right {

    width: 105px;

}



/* 动画 */

.part1-detail.animated_visible {

    opacity: 1;

    transform: translate3d(0, 0, 0);

}



.part1-nav.animated_visible {

    opacity: 1;

    transform: translateX(0);

}



.part1-left.animated_visible {

    opacity: 1;

    transform: rotateY(0);

}



.part1-right.animated_visible {

    opacity: 1;

    transform: rotateY(0);

}





/* 第2部分 */



.part2 {

    position: relative;

    padding: 150px 0 100px;

}



.part2-main {

    width: 1200px;

    margin: 0 auto;

}



.part2-name {

    font: 400 30px/42px '微软雅黑';

    text-align: center;

    color: #cdb294;

    opacity: 0;

    transform: translate3d(0, 50%, 0);

    transition: 1s 0.3s;

}



.part2-detail {

    padding: 20px 0 120px;

    font: 400 16px/30px '微软雅黑';

    color: #000;

    text-align: center;

    opacity: 0;

    transform: translate3d(0, 50%, 0);

    transition: 1s 0.3s;

}



.part2-box {

    position: relative;

    display: flex;

    justify-content: space-between;

    height: 230px;

    padding: 80px 70px 0;

    background: url(../images/part2_img1.jpg) no-repeat center center;

    opacity: 0;

    transform: translate3d(0, 50%, 0);

    transition: 1s 0.3s;

}



.part2-left {

    width: 375px;

    font: 400 14px/24px '微软雅黑';

    color: #fff;

    text-align: center;

}



.part2-right {

    width: 375px;

    font: 400 14px/24px '微软雅黑';

    color: #fff;

    text-align: center;

}



.part2-center {

    position: absolute;

    left: 50%;

    top: -60px;

    margin-left: -120px;

}



/* 动画 */

.part2-name.animated_visible {

    opacity: 1;

    transform: translate3d(0, 0, 0);

    transition: 1s 0.3s;

}



.part2-detail.animated_visible {

    opacity: 1;

    transform: translate3d(0, 0, 0);

    transition: 1s 0.3s;

}



.part2-box.animated_visible {

    opacity: 1;

    transform: translate3d(0, 0, 0);

    transition: 1s 0.3s;

}





/* 第三部分 */

.part3 {

    width: 1200px;

    margin: 0 auto;

    border-top: 1px solid #cbcbcb;

    border-bottom: 1px solid #cbcbcb;

}



.part3-main {

    display: flex;

    justify-content: space-between;

    padding: 90px 25px 150px 0;

}



.part3-left {

    opacity: 0;

    transform: translate3d(-50%, 0, 0);

    transition: 1s 0.3s;

}



.part3-center {

    opacity: 0;

    transform: translate3d(0, 50%, 0);

    transition: 1s 0.3s;

}



.part3-right {

    padding-top: 72px;

    opacity: 0;

    transform: translate3d(50%, 0, 0);

    transition: 1s 0.3s;

}



.part3-right a {

    display: block;

    width: 60px;

    height: 180px;

    padding: 30px 0 0;

    border: 3px solid #5f5e5c;

    transition: 0.3s;

}



.part3-right p {

    width: 16px;

    margin: 0 auto;

    font: 400 14px/16px '微软雅黑';

    color: #000;

    text-align: center;

}



.part3-right i {

    display: block;

    padding: 30px 0 0;

    text-align: center;

}



.part3-right a:hover {

    transform: translate3d(0, 20px, 0);

}



/* 动画 */

.part3-left.animated_visible {

    opacity: 1;

    transform: translate3d(0, 0, 0);

}



.part3-center.animated_visible {

    opacity: 1;

    transform: translate3d(0, 0, 0);

}



.part3-right.animated_visible {

    opacity: 1;

    transform: translate3d(0, 0, 0);

}





/* 第4部分 */

.part4 {

    padding: 80px 0 100px;

    background: #edf0f7;

}



.part4-name {

    text-align: center;

    opacity: 0;

    transform: translate3d(0, 50%, 0);

    transition: 1s 0.3s;

}



.part4-detail {

    padding: 20px 0 20px 40px;

    font: 400 16px/30px '微软雅黑';

    color: #cdb294;

    letter-spacing: 40px;

    text-align: center;

    opacity: 0;

    transform: translate3d(0, 50%, 0);

    transition: 1s 0.3s;

}



.part4-alert {

    padding-bottom: 42px;

    font: 400 14px/20px '微软雅黑';

    color: #000;

    text-align: center;

    background: url(../images/part4_line.png) no-repeat center bottom;

    opacity: 0;

    transform: translate3d(0, 50%, 0);

    transition: 1s 0.3s;

}



.part4-box {

    padding: 35px 0 0;

}



.part4-box ul {

    perspective: 1000px;

    display: flex;

    justify-content: center;

}



.part4-box ul li {

    width: 330px;

    padding: 0 30px;

    opacity: 0;

    transform: rotateY(-120deg);

    transition: 1s 0.3s;

}



.part4-box ul li a {

    display: block;

    position: relative;

    transition: 0.3s;

}



.part4-box ul i {

    display: block;

    background: #000;

}



.part4-box ul i img {

    width: 100%;

}



.pic-li-name {

    position: absolute;

    left: 0;

    top: 355px;

    width: 100%;

    font: 400 16px/30px '微软雅黑';

    color: #fff;

    text-align: center;
        background: rgba(33,95,72,0.8);

}



.pic-li-hj {

    position: absolute;

    left: 0;

    top: 380px;

    width: 100%;

    text-align: center;

}



.pic-li-circle {

    position: absolute;

    left: 0;

    top: 396px;

    width: 100%;

    height: 50px;

    text-align: center;

}



.pic-li-weight {

    display: flex;

    justify-content: center;

    margin-top: 30px;

}



.pic-li-kg {

    display: flex;

    align-items: center;

    margin: 0 2px;

    font: 400 12px/20px '微软雅黑';

    color: #000;

    background: #fff;

    border-radius: 20px;

}



.pic-li-kg span {

    width: 30px;

    text-align: center;

}



.pic-li-kg i {

    width: 20px;

    height: 20px;

    /* border-radius: 50%; */

}



.pic-li-kg i img {

    float: left;

}



.part4-box ul li a:hover {

    transform: translate3d(0, -20px, 0);

}



/* 动画 */

.part4-name.animated_visible {

    opacity: 1;

    transform: translate3d(0, 0, 0);

}



.part4-detail.animated_visible {

    opacity: 1;

    transform: translate3d(0, 0, 0);

}



.part4-alert.animated_visible {

    opacity: 1;

    transform: translate3d(0, 0, 0);

}



.part4-box ul li.animated_visible {

    opacity: 1;

    transform: rotateY(0);

}