/*内容区*/
.jc-wrapper {
    width: 100%;
    background-image: url("../images/image_ec/background01.png");
    background-repeat: no-repeat;
    background-position: 0 758px;
}

.banner-wrap {
    height: 600px;
    margin-bottom: 90px;
}
.banner-wrap img{
    height: 600px;
    min-width: 1920px;
}

.jc-content01,
.jc-content03,
.jc-content04
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1318px;
    margin: 0 auto 109px;
}
.jc-content-left {
    width: 760px;
    height: 515px;
}
.jc-content h2 {
    font: bold 42px MicrosoftYaHei;
    color: #5569F4;
    margin-bottom: 22px;
}
.jc-content h3 {
    width: 488px;
    font: 20px MicrosoftYaHei;
    color: #000;
    margin-bottom: 38px;
}
.jc-content h5 {
    width: 522px;
    font: 18px/2 MicrosoftYaHei;
    color: #666;
}

.jc-content02 {
    overflow: hidden;
    background-image: url("../images/image_ec/background02.png");
    background-repeat: no-repeat;
    background-position: 629px 0;
}

.card-list {
    display: flex;
    justify-content: space-between;
    width: 1142px;
    margin: 140px auto 164px;

}
.card-item {
    width: 363px;
    height: 465px;
    padding-top: 40px;
    box-sizing: border-box;
    border-radius: 10px;
}
.card-list > .card-item > h2 {
    font: bold 24px MicrosoftYaHei;
    color: white;
    text-align: center;
    margin-bottom: 12px;
}
.card-item:nth-of-type(1) {
    background: rgba(90,122,255,1);
    box-shadow: -4px 10px 35px 0px rgba(23,27,176,0.23), -2px 6px 9px 0px rgba(23,27,176,0.44);
}
.card-item:nth-of-type(2) {
    margin-top: 40px;
    padding-top: 84px;
    background:rgba(255,190,64,1);
    box-shadow:-4px 10px 35px 0px rgba(218,155,32,0.23), -2px 6px 9px 0px rgba(228,155,13,0.44);
}
.card-item:nth-of-type(3) {
    background:rgba(90,122,255,1);
    box-shadow:-4px 10px 35px 0px rgba(23,27,176,0.23), -2px 6px 9px 0px rgba(23,27,176,0.44);
}
.icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 106px;
    height: 106px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.91);
    border: 7px solid rgba(255, 255, 255, 0.17);
    background-clip: padding-box;
    border-radius: 50%;
    margin: 0 auto 27px;
}
.word-of-card {
    width: 226px;
    margin: 0 auto;
    font: 18px/1.5 MicrosoftYaHei;
    color:rgba(255,255,255,1);
    text-align: center;
}

/*一些动效*/
.card-item:hover img {
    animation: shake 0.6s infinite;
}
.card-item:hover  {
    animation: shakeY 2s linear;
}

@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake {
    0%, 100% {-moz-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@-webkit-keyframes shakeY {
    0%, 100% {-webkit-transform: translateY(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateY(10px);}
}
@-moz-keyframes shakeY {
    0%, 100% {-moz-transform: translateY(0);}
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateY(-10px);}
    20%, 40%, 60%, 80% {-moz-transform: translateY(10px);}
}