@charset "UTF-8";
.cases-banner { width: 100%; height: 85.333vw; overflow: hidden; text-align: center; background: url('../images/cases_banner_bg.jpg') center/cover no-repeat; }
.cases-banner .banner-title-box { padding-top: 10.4vw; }
.cases-banner .banner-title-box h2 { font-family: "SourceHanSansCN-Bold"; font-size: 5.867vw; font-weight: bold; color: #fff; }
.cases-banner .banner-title-box h2 br { display: none; }
.cases-banner .banner-title-box a { display: inline-block; width: 22.533vw; margin-top: 5.333vw; margin-bottom: 7.733vw; font-size: 3.2vw; line-height: 7.733vw; color: #fff; border: 2px solid #fff; border-radius: 3.9vw; transition: all .3s; }
.cases-banner .banner-title-box a:hover {
    color: #8b59fc; background-color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent;
    -webkit-transform: translateY(-4px);
       -moz-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
         -o-transform: translateY(-4px);
            transform: translateY(-4px);
}
.cases-banner img { width: 78.667vw; }
.cases-section { padding-top: 8vw; padding-bottom: 8vw; background-color: #f3f3f3; }
.cases-section .cases-first-box .cases-txt { height: 47vw; padding-top: 5.867vw; padding-left: 5.867vw; background-color: #fff; }
.cases-section .cases-first-box .cases-txt h2 { font-size: 4.8vw; font-weight: bold; color: #4c4c4c; }
.cases-section .cases-first-box .cases-txt ul { padding-top: 5.333vw; padding-bottom: 7.467vw; }
.cases-section .cases-first-box .cases-txt ul li { float: left; }
.cases-section .cases-first-box .cases-txt ul li+li { margin-left: 4vw; padding-left: 4vw; border-left: 1px solid #808080; }
.cases-section .cases-first-box .cases-txt ul li span { display: block; font-size: 4.267vw; color: #4d4d4d; }
.cases-section .cases-first-box .cases-txt ul li label { font-size: 3.2vw; color: #808080; }
.cases-section .cases-first-box .cases-txt a { display: inline-block; padding: 2vw 4vw; font-size: 3.733vw; color: #4d4d4d; border: 2px solid #4d4d4d; border-radius: 48px; }
.cases-section .cases-first-box .cases-txt a:last-child { margin-left: 2vw; color: #fff; background-color: #4d4d4d; }
.cases-section .cases-first-box .cases-txt a:nth-of-type(1):hover {
    color: #8b59fc; border: 2px solid #8b59fc; text-decoration: none; -webkit-tap-highlight-color: transparent;
    -webkit-transform: translateY(-4px);
       -moz-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
         -o-transform: translateY(-4px);
            transform: translateY(-4px);
}
.cases-section .cases-first-box .cases-txt a:last-child:hover {
    background-color: #8b59fc; border: 2px solid #8b59fc; text-decoration: none; -webkit-tap-highlight-color: transparent;
    -webkit-transform: translateY(-4px);
       -moz-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
         -o-transform: translateY(-4px);
            transform: translateY(-4px);
}
.cases-section ul.cases-list-box>li { float: left; width: calc((100% - 1.333vw) / 2); margin-top: 1.333vw; }
.cases-section ul.cases-list-box>li:nth-child(even) { margin-left: 1.333vw; }
.cases-section ul.cases-list-box>li .cases-img { position: relative; overflow: hidden; }
.cases-section ul.cases-list-box>li .cases-img img.icon { position: absolute; right: 2vw; bottom: 2vw; width: 4vw; transition: all .45s; }
.cases-section ul.cases-list-box>li .cases-img .interaction-block { position: absolute; top: 0; right: -100%; width: 100%; height: 100%; text-align: center; background-color: rgba(97,39,228,.9); transition: all .45s; }
.cases-section ul.cases-list-box>li .cases-img .interaction-block img { display: block; width: 50%; margin-top: 25%; margin-right: auto; margin-left: auto; }
.cases-section ul.cases-list-box>li .cases-img .interaction-block span { display: block; margin: 1.067vw auto 4vw; font-size: 3.2vw; color: #fff; }
.cases-section ul.cases-list-box>li .cases-img .interaction-block a:nth-of-type(1) { display: inline-block; padding: 2vw; font-size: 3.2vw; color: #fff; border: 1px solid #fff; border-radius: 48px; }
.cases-section ul.cases-list-box>li .cases-img .interaction-block a:nth-of-type(2) { display: inline-block; padding: 2vw; font-size: 3.2vw; color: #8b59fc; background-color: #fff; border: 1px solid #fff; border-radius: 48px; }
.cases-section ul.cases-list-box>li:hover .cases-img img.icon { right: -100%; }
.cases-section ul.cases-list-box>li:hover .cases-img .interaction-block { right: 0; }
.cases-section ul.cases-list-box>li .cases-txt { padding-top: 4.267vw; padding-left: 4.267vw; background-color: #fff; }
.cases-section ul.cases-list-box>li .cases-txt h3 { font-size: 3.733vw; font-weight: bold; color: #4c4c4c; }
.cases-section ul.cases-list-box>li .cases-txt ul {  padding-top: 5.333vw; padding-bottom: 5.333vw; }
.cases-section ul.cases-list-box>li .cases-txt ul li { float: left; }
.cases-section ul.cases-list-box>li .cases-txt ul li+li { margin-left: 4vw; padding-left: 4vw; border-left: 1px solid #808080; }
.cases-section ul.cases-list-box>li .cases-txt ul li:last-child { display: none; }
.cases-section ul.cases-list-box>li .cases-txt ul li span { display: block; font-size: 4.267vw; color: #4d4d4d; }
.cases-section ul.cases-list-box>li .cases-txt ul li label { font-size: 3.2vw; color: #808080; }
@media (max-width: 320px) {
    .cases-section ul.cases-list-box>li .cases-txt ul li+li { margin-left: 3vw; padding-left: 3vw; }
}
@media (min-width: 768px) {
    .cases-banner { height: 500px; }
    .cases-banner .banner-title-box { padding-top: 72px; }
    .cases-banner .banner-title-box h2 { font-size: 44px; }
    .cases-banner .banner-title-box a { width: 128px; margin-top: 24px; margin-bottom: 24px; font-size: 20px; line-height: 48px; border-radius: 28px; }
    .cases-banner img { width: 470px; }
    .cases-section { padding-top: 60px; padding-bottom: 60px; }
    .cases-section .cases-first-box { max-width: 756px; margin-right: auto; margin-left: auto; }
    .cases-section .cases-first-box .cases-txt { height: 300px; padding-top: 40px; padding-left: 40px; }
    .cases-section .cases-first-box .cases-txt h2 { font-size: 40px; }
    .cases-section .cases-first-box .cases-txt ul { padding-top: 30px; padding-bottom: 40px; }
    .cases-section .cases-first-box .cases-txt ul li+li { margin-left: 20px; padding-left: 20px; }
    .cases-section .cases-first-box .cases-txt ul li span { font-size: 32px; }
    .cases-section .cases-first-box .cases-txt ul li label { padding-top: 6px; font-size: 16px; }
    .cases-section .cases-first-box .cases-txt a { padding: 14px 20px; font-size: 20px; }
    .cases-section .cases-list-box { max-width: 756px; margin-right: auto; margin-left: auto; }
    .cases-section ul.cases-list-box>li { width: calc((100% - 10px) / 2); margin-top: 10px; }
    .cases-section ul.cases-list-box>li:nth-child(even) { margin-left: 10px; }
    .cases-section ul.cases-list-box>li .cases-img img.icon { right: 15px; bottom: 15px; width: 30px; }
    .cases-section ul.cases-list-box>li .cases-img .interaction-block span { margin: 6px auto 48px; font-size: 20px; }
    .cases-section ul.cases-list-box>li .cases-img .interaction-block a:nth-of-type(1) { padding: 14px 20px; font-size: 20px; border: 2px solid #fff; border-radius: 48px; }
    .cases-section ul.cases-list-box>li .cases-img .interaction-block a:nth-of-type(2) { margin-left: 10px; padding: 14px 20px; font-size: 20px; border: 2px solid #fff; border-radius: 48px; }
    .cases-section ul.cases-list-box>li .cases-txt { padding-top: 30px; padding-left: 30px; }
    .cases-section ul.cases-list-box>li .cases-txt h3 { font-size: 20px; }
    .cases-section ul.cases-list-box>li .cases-txt ul {  padding-top: 20px; padding-bottom: 30px; }
    .cases-section ul.cases-list-box>li .cases-txt ul li+li { margin-left: 20px; padding-left: 20px; }
    .cases-section ul.cases-list-box>li .cases-txt ul li span { font-size: 28px; }
    .cases-section ul.cases-list-box>li .cases-txt ul li label { padding-top: 6px; font-size: 16px; }
}
@media (min-width: 1024px) {
    .cases-banner { text-align: left; }
    .cases-banner .container-custom { position: relative; }
    .cases-banner .banner-title-box { padding-top: 155px; padding-left: 90px; }
    .cases-banner .banner-title-box h2 { line-height: 1.4; }
    .cases-banner .banner-title-box h2 br { display: block; }
    .cases-banner .banner-title-box a { margin-top: 30px; text-align: center; }
    .cases-banner img { position: absolute; top: 111px; right: 30px; }
    .cases-section .cases-first-box { position: relative; max-width: 100%; }
    .cases-section .cases-first-box .cases-img { width: 63.49%; }
    .cases-section .cases-first-box .cases-txt { position: absolute; top: 0; right: 0; width: 36.51%; height: 100%; padding-top: 45px; padding-left: 20px; }
    .cases-section .cases-list-box { max-width: 100%; }
    .cases-section ul.cases-list-box>li { width: calc((100% - 20px) / 3); }
    .cases-section ul.cases-list-box>li:nth-child(2n+3) { margin-left: 10px; }
    .cases-section ul.cases-list-box>li:nth-child(3n+1) { margin-left: 0; }
}
@media (min-width: 1200px) {
    .cases-banner .banner-title-box { padding-top: 123px; padding-left: 80px; }
    .cases-banner .banner-title-box h2 { font-size: 48px; }
    .cases-banner .banner-title-box a { margin-top: 42px; }
    .cases-banner img { top: 83px; right: 0; width: 570px; }
    .cases-section .cases-first-box .cases-img { width: 755px; }
    .cases-section .cases-first-box .cases-txt { width: 385px; padding-top: 70px; padding-left: 40px; }
    .cases-section .cases-first-box .cases-txt h2 { font-size: 44px; }
    .cases-section .cases-first-box .cases-txt ul { padding-top: 50px; }
    .cases-section ul.cases-list-box>li { width: calc((100% - 24px) / 3); margin-top: 12px; }
    .cases-section ul.cases-list-box>li .cases-txt { padding-top: 38px; padding-left: 15px; }
    .cases-section ul.cases-list-box>li .cases-txt ul { padding-top: 24px; padding-bottom: 38px; }
    .cases-section ul.cases-list-box>li .cases-txt ul li:last-child { display: block; }
}
@media (min-width: 1920px) {
    .cases-banner { height: 650px; }
    .cases-banner .banner-title-box { padding-top: 210px; }
    .cases-banner .banner-title-box h2 { font-size: 54px; }
    .cases-banner img { top: 116px; right: -70px; width: 708px; }
}