@-webkit-keyframes rotateLoop {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotateLoop {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.advantage-img-container {
    top: 174px;
}
.ln {
    width: 1000px;
    margin: auto;
}
.ln-title {
    text-align: center;
    font-size: 24px;
    color: rgb(255, 0, 101);
    margin-top: 40px;margin-bottom: 20px;
}
.ln-p {
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    color: hsl(0, 0%, 70%);
    line-height: 12px;
    margin-bottom: 20px;
    font-family: Arial;
}
.ln-small {
    text-align: center;
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 40px;
    margin-top: 20px;
    margin-bottom:30px;
}
.ln-box {
    width:1000px;
    height:650px;
    color: #fff;
}
.ln-box .pullleft {
    width:25%;
    float:left;
}
.bolderfont {
    margin: 30px 0;
}
.middle {
    width: 50%;
    float: left;
    height: 480px;
    box-sizing: border-box;
}
circle {
    fill:none;stroke:hsl(38, 33%, 68%);
    stroke-dasharray:60,20,55,10,40,15;
}
.circle-box {
    fill:hsl(38, 33%, 68%);
}
.text-num {
    font-size:30px;
    text-anchor:middle;
}
.text-line {
    stroke:hsl(38, 33%, 68%);
    stroke-dasharray:3,3;
    stroke-width:2
}
.pullright {
    width:25%;
    float:right;
    margin-top:70px;
}

.home-banner .slick-slide {
    position: relative
}

.home-banner .slick-dots {
    width: 1260px;
    left: 50%;
    bottom: 35px;
    margin-left: -630px;
    text-align: right
}

.home-banner .slick-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #bdbdbd;
    background-color: transparent
}

.home-banner .slick-dots .slick-active button {
    background-color: #bdbdbd
}

.home-banner .banner-container {
    position: relative;
    width: 1260px;
    margin: auto;
    height: 674px;
}
.pc-home-box {
    padding-top: 50px;
    padding-bottom: 100px;
    height: auto;
}

.banner-container-1 .demo-link {
    position: absolute;
    right: 0;
    bottom: 75px;
    color: #f86e01;
    padding: 5px 36px;
    border: 1px solid #f86e01;
    transition: All .2s ease-in-out;
    -webkit-transition: All .2s ease-in-out;
    -moz-transition: All .2s ease-in-out;
    -o-transition: All .2s ease-in-out
}

.banner-container-1 .demo-link:hover {
    color: #fff;
    background-color: #f86e01;
    box-shadow: 0 0 20px #f86e01
}

.banner-container-1 .block-1 {
    left: 0;
    top: 0;
    width: 100%;
    color: #333333;
    font-size: 41px;
    font-weight: 700;
    text-align: center;
    position: absolute;
    line-height: 1
}

.banner-container-1 .block-2 {
    position: absolute;
    left: 0;
    top: 210px
}

.banner-container-1 .block-3 {
    position: absolute;
    left: 80px;
    top: 224px
}

.banner-container-1 .block-4 {
    z-index: 2;
    position: absolute;
    left: 174px;
    top: 150px
}

.banner-container-1 .block-5 {
    position: absolute;
    left: 254px;
    top: 194px
}

.banner-container-1 .block-6 {
    position: absolute;
    left: 356px;
    top: 230px
}

.banner-container-1 .block-7 {
    position: absolute;
    left: 422px;
    top: 206px
}

.banner-container-1 .block-8 {
    z-index: 2;
    position: absolute;
    left: 510px;
    top: 228px
}

.banner-container-1 .block-9 {
    width: 194px;
    height: 194px;
    position: absolute;
    left: 572px;
    top: 150px
}

.banner-container-1 .block-9 .icos {
    position: absolute;
    left: 0;
    top: 0
}

.banner-container-1 .block-9 .icos.icos-1 {
    -webkit-animation: rotateLoop 10s linear infinite;
    animation: rotateLoop 10s linear infinite
}

.banner-container-1 .block-9 .icos.icos-2 {
    -webkit-animation: rotateLoop 9s linear infinite;
    animation: rotateLoop 9s linear infinite
}

.banner-container-1 .block-9 .icos.icos-3 {
    -webkit-animation: rotateLoop 8s linear infinite;
    animation: rotateLoop 8s linear infinite
}

.banner-container-1 .block-9 .icos.icos-4 {
    -webkit-animation: rotateLoop 7s linear infinite;
    animation: rotateLoop 7s linear infinite
}

.banner-container-1 .block-9 .icos.icos-5 {
    -webkit-animation: rotateLoop 6s linear infinite;
    animation: rotateLoop 6s linear infinite
}

.banner-container-1 .block-9 .icos.icos-6 {
    -webkit-animation: rotateLoop 5s linear infinite;
    animation: rotateLoop 5s linear infinite
}

.banner-container-1 .block-10 {
    z-index: 2;
    position: absolute;
    left: 760px;
    top: 226px
}

.banner-container-1 .block-11 {
    position: absolute;
    left: 880px;
    top: 226px
}

.banner-container-1 .block-12 {
    z-index: 2;
    position: absolute;
    right: 232px;
    top: 243px
}

.banner-container-1 .block-13 {
    position: absolute;
    right: 172px;
    top: 207px;
    width: 64px;
    height: 79px
}

.banner-container-1 .block-13 .icos {
    position: absolute
}

.banner-container-1 .block-13 .icos.icos-1 {
    left: 0;
    top: 0
}

.banner-container-1 .block-13 .icos.icos-2 {
    left: 0px;
    top: -50px;
}

.banner-container-1 .block-13 .rounds {
    width: 54px;
    height: 54px;
    top: -75px;
    border-radius: 50%;
    position: absolute
}

.banner-container-1 .block-13 .rounds:before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: #eb6c13;
    border-bottom-color: #eb6c13;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: rotateLoop 4s linear infinite;
    animation: rotateLoop 4s linear infinite
}

.banner-container-1 .block-13 .rounds.rounds-1 {
    left: -40px
}

.banner-container-1 .block-13 .rounds.rounds-2 {
    right: -40px
}

.banner-container-1 .block-14 {
    position: absolute;
    right: 78px;
    top: 242px
}

.banner-container-1 .block-15 {
    position: absolute;
    right: 6px;
    top: 224px
}

.banner-container-1 .block-16 {
    position: absolute;
    left: 58px;
    top: 100px
}

.banner-container-1 .block-colors-lines {
    width: 584px;
    height: 24px;
    position: absolute;
    left: 378px;
    bottom: 314px;
    background: url(img/banner1-colors-lines.png) no-repeat center
}

.banner-container-1 .block-colors {
    width: 725px;
    height: 136px;
    position: absolute;
    left: 310px;
    bottom: 188px
}

.banner-container-1 .block-colors .colors {
    width: 136px;
    height: 136px;
    z-index: 3;
    position: absolute;
    top: 0
}

.banner-container-1 .block-colors .colors:before {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    border-radius: 50%;
    opacity: .35;
    -webkit-animation: bgOpcity 5s ease-in infinite;
    animation: bgOpcity 5s ease-in infinite
}

.banner-container-1 .block-colors .colors:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(img/banner-1-colors-line.png) no-repeat center;
    -webkit-animation: rotateLoop 8s linear infinite;
    animation: rotateLoop 8s linear infinite
}

.banner-container-1 .block-colors .colors .ico {
    -webkit-animation: colorsScale 3s ease infinite;
    animation: colorsScale 3s ease infinite;
    width: 66px;
    height: 66px;
    display: block;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.banner-container-1 .block-colors .colors .arrow {
    position: absolute;
    top: 8px;
    left: 50%;
    margin-left: -5.5px;
    width: 11px;
    height: 13px;
    background: url(img/banner-1-colors-arrow.png) no-repeat content-box
}
.banner-container-1 .block-colors .colors-0 {
    left: -100px
}

.banner-container-1 .block-colors .colors-0:before {
    background-color: #c62b49;
    -webkit-animation-duration: 5s;
    animation-duration: 5s
}

.banner-container-1 .block-colors .colors-0 .ico {
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}
.banner-container-1 .block-colors .colors-1 {
    left: 0
}

.banner-container-1 .block-colors .colors-1:before {
    background-color: #c62b49;
    -webkit-animation-duration: 6s;
    animation-duration: 6s
}

.banner-container-1 .block-colors .colors-1 .ico {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.banner-container-1 .block-colors .colors-2 {
    left: 100px
}

.banner-container-1 .block-colors .colors-2:before {
    background-color: #a72c24;
    -webkit-animation-duration: 7s;
    animation-duration: 7s
}

.banner-container-1 .block-colors .colors-2 .ico {
    -webkit-animation-duration: 3s;
    animation-duration: 3s
}

.banner-container-1 .block-colors .colors-3 {
    left: 200px
}

.banner-container-1 .block-colors .colors-3:before {
    background-color: #743788;
    -webkit-animation-duration: 8s;
    animation-duration: 8s
}

.banner-container-1 .block-colors .colors-3 .ico {
    -webkit-animation-duration: 3s;
    animation-duration: 3s
}

.banner-container-1 .block-colors .colors-4 {
    right: 200px
}

.banner-container-1 .block-colors .colors-4:before {
    background-color: #5f9034;
    -webkit-animation-duration: 9s;
    animation-duration: 9s
}

.banner-container-1 .block-colors .colors-4 .ico {
    -webkit-animation-duration: 4s;
    animation-duration: 4s
}

.banner-container-1 .block-colors .colors-5 {
    z-index: 2;
    right: 100px
}

.banner-container-1 .block-colors .colors-5:before {
    background-color: #1f7397;
    -webkit-animation-duration: 10s;
    animation-duration: 10s
}

.banner-container-1 .block-colors .colors-5 .ico {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.banner-container-1 .block-colors .colors-6 {
    z-index: 1;
    right: 0
}

.banner-container-1 .block-colors .colors-6:before {
    background-color: #642875;
    -webkit-animation-duration: 11s;
    animation-duration: 11s
}

.banner-container-1 .block-colors .colors-6 .ico {
    -webkit-animation-duration: 5s;
    animation-duration: 5s
}
.banner-container-1 .block-colors .colors-7 {
    z-index: 1;
    right: -100px;
}