﻿.erm {
    min-width: 1200px;
    padding-top: 80px;
}

    .erm .banner {
        width: 100%;
        height: 500px;
        position: relative;
        overflow: hidden;
        background: #3567fa;
    }

        .erm .banner .banner-bg {
            height: 500px;
            margin: 0 auto;
            background: url(../images/erm/banner.png) no-repeat top center;
        }

        .erm .banner .banner-content {
            width: 1200px;
            height: 500px;
            margin: 0 auto;
            position: relative;
        }

        .erm .banner .banner-button {
            width: 224px;
            height: 64px;
            position: absolute;
            left: 0;
            bottom: 115px;
        }

            .erm .banner .banner-button img {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                cursor: pointer;
            }

            .erm .banner .banner-button .img-hover {
                display: none;
            }

            .erm .banner .banner-button:hover .img-hover {
                display: block;
            }

            .erm .banner .banner-button:hover .img {
                display: none;
            }


    .erm .erm-advantage {
        width: 1200px;
        margin: 60px auto;
        justify-content: space-between;
    }

        .erm .erm-advantage .advantage {
            width: 240px;
        }

            .erm .erm-advantage .advantage .advantage-imgs {
                width: 70px;
                height: 70px;
                margin: 0 auto 24px;
                background: url(../images/erm/adv-1.png);
                background-size: 100% 100%;
            }

            .erm .erm-advantage .advantage .advantage-text {
                font-size: 18px;
                color: #181818;
                text-align: center;
            }

            .erm .erm-advantage .advantage:nth-child(2) .advantage-imgs {
                background: url(../images/erm/adv-2.png);
                background-size: 100% 100%;
            }

            .erm .erm-advantage .advantage:nth-child(3) .advantage-imgs {
                background: url(../images/erm/adv-3.png);
                background-size: 100% 100%;
            }

            .erm .erm-advantage .advantage:nth-child(4) .advantage-imgs {
                background: url(../images/erm/adv-4.png);
                background-size: 100% 100%;
            }

            .erm .erm-advantage .advantage:nth-child(5) .advantage-imgs {
                background: url(../images/erm/adv-5.png);
                background-size: 100% 100%;
            }


    .erm .erm-product-intro {
        width: 1140px;
        height: 200px;
        margin: 30px auto;
        padding: 30px;
        background-color: #f7f7f7;
        background-image: url(../images/erm/erm-product-intro.png);
        background-repeat: no-repeat;
        background-position: 966px 50px;
    }

        .erm .erm-product-intro .product-name {
            font-size: 24px;
            color: #181818;
            margin-bottom: 20px;
        }

        .erm .erm-product-intro p {
            width: 908px;
            font-size: 14px;
            color: #999;
            margin-bottom: 0;
        }

            .erm .erm-product-intro p {
                line-height: 1.8;
                margin-bottom: 15px;
            }

    .erm .erm-point-intro {
        width: 1200px;
        margin: 0 auto;
    }

        .erm .erm-point-intro.plate {
            margin: 0 auto;
            padding-top: 25px;
        }

            .erm .erm-point-intro.plate .plate-name {
                color: #0a75ea;
                font-size: 24px;
                margin-bottom: 15px;
            }

            .erm .erm-point-intro.plate .plate-name-intro {
                margin-bottom: 28px;
            }

        .erm .erm-point-intro .use-point-box {
            height: 600px;
            border-bottom: 1px solid #ededed;
            overflow: hidden;
        }

            .erm .erm-point-intro .use-point-box .show-image {
                width: 600px;
                height: 600px;
                margin: 0 auto;
                position: relative;
                opacity: 0;
            }

                .erm .erm-point-intro .use-point-box .show-image.scroll-left {
                    -webkit-animation: scrollLeft linear 1.5s;
                    animation: scrollLeft linear 1.5s;
                    -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
                }

                .erm .erm-point-intro .use-point-box .show-image.scroll-right {
                    -webkit-animation: scrollRight linear 1.3s;
                    animation: scrollRight linear 1.3s;
                    -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
                }

            .erm .erm-point-intro .use-point-box .use-method {
                flex: 1;
                padding-left: 95px;
                margin: auto 0;
                position: relative;
                opacity: 0;
            }

                .erm .erm-point-intro .use-point-box .use-method.scroll-left {
                    -webkit-animation: scrollLeft linear 1.3s;
                    animation: scrollLeft linear 1.3s;
                    -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
                }

                .erm .erm-point-intro .use-point-box .use-method.scroll-right {
                    -webkit-animation: scrollRight linear 1.3s;
                    animation: scrollRight linear 1.3s;
                    -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
                }

                .erm .erm-point-intro .use-point-box .use-method .use-method-name {
                    font-size: 30px;
                    color: #181818;
                    margin-bottom: 20px;
                }

                .erm .erm-point-intro .use-point-box .use-method .use-method-intro {
                    font-size: 18px;
                    color: #999;
                }

                .erm .erm-point-intro .use-point-box .use-method .section-line {
                    width: 60px;
                    height: 4px;
                    background: linear-gradient(to right, #0a75ea, #66b0ff);
                    background: -webkit-linear-gradient(to right, #0a75ea, #66b0ff);
                    margin: 26px 0;
                }

                .erm .erm-point-intro .use-point-box .use-method .use-method-item-name {
                    font-size: 18px;
                    color: #181818;
                    margin-top: 16px;
                    margin-bottom: 8px;
                }

                .erm .erm-point-intro .use-point-box .use-method .use-method-item-name-intro {
                    font-size: 16px;
                    line-height: 1.5;
                    color: #999;
                    margin-bottom: 0;
                }

                .erm .erm-point-intro .use-point-box .use-method .experience {
                    display: block;
                    width: 94px;
                    text-align: center;
                    font-size: 12px;
                    background: #0a75ea;
                    padding: 11px 0;
                    margin-top: 30px;
                    cursor: pointer;
                    color: #fff;
                }

            .erm .erm-point-intro .use-point-box:last-child {
                border-bottom: 0;
            }

@keyframes scrollLeft {
    0% {
        left: -200px;
        opacity: 0;
    }

    50% {
        opacity: 0.1;
    }

    100% {
        left: 0;
        opacity: 1;
    }
}

@-webkit-keyframes scrollLeft {
    0% {
        left: -200px;
        opacity: 0;
    }

    50% {
        opacity: 0.1;
    }

    100% {
        left: 0;
        opacity: 1;
    }
}

@keyframes scrollRight {
    0% {
        right: -200px;
        opacity: 0;
    }

    50% {
        opacity: 0.1;
    }

    100% {
        right: 0;
        opacity: 1;
    }
}

@-webkit-keyframes scrollRight {
    0% {
        right: -200px;
        opacity: 0;
    }

    50% {
        opacity: 0.1;
    }

    100% {
        right: 0;
        opacity: 1;
    }
}




        .erm .server-title {
            color: #181818;
            font-size: 24px;
            text-align: center;
        }

.erm .download {
  width: 1200px;	
  margin: 80px auto;
  border-bottom: 0;
}
.erm .download .section-line {
  margin: 30px auto 50px;
  border-color: #0a75ea;
}
.erm .download .download-bg {
  width: 210px;
  height: 422px;
  margin: auto 90px auto 150px;
}
.erm .download .down-content {
  height: 445px;
}
.erm .download .download-address {
  flex: 1;
}
.erm .download .download-address .download-address-title {
  font-size: 18px;
  color: #181818;
  margin-bottom: 60px;
  margin-top: 20px;
}
.erm .download .download-address .download-address-title:nth-child(3) {
  margin-top: 30px;
}
.erm .download .download-method .download-method-item {
  display: block;
  width: 150px;
  height: 150px;
  margin-right: 10px;
  border: 1px solid #ededed;
  font-size: 18px;
  text-align: center;
  padding: 26px 12px;
  color: #999;
}
.erm .download .download-method .download-method-item.win,
.erm .download .download-method .download-method-item.link {
  cursor: pointer;
}
.erm .download .download-method .download-method-item.win .download-icon img,
.erm .download .download-method .download-method-item.link .download-icon img {
  cursor: pointer;
}
.erm .download .download-method .download-method-item .download-name {
  font-size: 16px;
}
.erm .download .download-method .download-method-item .download-icon {
  width: 86px;
  height: 86px;
  margin: 0 auto;
  position: relative;
}
.erm .download .download-method .download-method-item .download-icon img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
}
.erm .download .download-method .download-method-item .download-icon .img-hover {
  display: none;
}
.erm .download .download-method .download-method-item .clock-download {
  display: none;
  font-size: 18px;
  color: #181818;
  cursor: pointer;
}
.erm .download .download-method .download-method-item:hover {
  background: #f7f7f7;
  color: #181818;
}
.erm .download .download-method .download-method-item:hover.rq-code {
  padding: 12px;
}
.erm .download .download-method .download-method-item:hover .download-icon {
  margin: 0 auto;
}
.erm .download .download-method .download-method-item:hover .download-icon.android,
.erm .download .download-method .download-method-item:hover .download-icon.apple,
.erm .download .download-method .download-method-item:hover .download-icon.apple_android {
  width: 100%;
  height: 100%;
}
.erm .download .download-method .download-method-item:hover .download-icon img.img-hover {
  display: block;
}
.erm .download .download-method .download-method-item:hover .download-icon img.img {
  display: none;
}
.erm .download .download-method .download-method-item:hover .clock-download {
  display: block;
  cursor: pointer;
}
.erm .download .download-method .download-method-item:hover .download-name {
  display: none;
}