.section {
    position: relative
}
.chart{display: none;}
.section--padding {
    padding: 60px 0; 
}

.arrow-ju{background: #3168fc; border-radius:100%; width:100px; line-height: 100px; overflow: hidden; height:100px; text-align: center; }
.ju-ys{background: #3168fc; border-radius:100%; width: 120px; height:120px; font-size: 30px; color: #fff; text-align: center; line-height: 120px;}
.arrow-ju img{display: inline-block;}




.abstracting {
    position: relative;
    padding:40px 0 100px; width: 100%;float: left; background: #f1f3f9
}




.hurdles {
    margin-top: 40px;
    min-height: 450px;
    position: relative;
    overflow: hidden
}



.hurdles-stakeholder {
    width: 120px;
    height:120px;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: calc(50% - 45px);
    left: calc(50% - 45px)
}

@media(min-width: 670px) {
    .hurdles-stakeholder {
        width:120px;
        height: 120px;
        top: calc(50% - 60px);
        left: calc(50% - 60px)
    }
	.ju-ys{ border-radius:100%; width: 100px; height:100px; font-size: 26px; line-height: 100px;}
}

.hurdles-stakeholder-label {
    width: 100px; text-align: center;
    display: block;
    color: #2a51d8;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%,100%) translateY(5px);
    transform: translate(-50%,100%) translateY(5px);
    text-transform: uppercase;
	  font-size:20px; font-weight: 600;
    opacity: 0;
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out
}



.hurdles-stakeholder--merchant svg {
    width: 100%;
    height: 100%
}

.hurdles-stakeholder--merchant.moved .hurdles-stakeholder-label {
    opacity: 1;
font-family:"Microsoft Yahei";
	font-size:20px;
}

@-webkit-keyframes move-arrows {
    to {
        -webkit-mask-position: 11px 0;
        mask-position: 11px 0
    }
}

@keyframes move-arrows {
    to {
        -webkit-mask-position: 11px 0;
        mask-position: 11px 0
    }
}

@-webkit-keyframes move-gradient {
    0% {
        background-position-x: 0
    }

    to {
        background-position-x: 100%
    }
}

@keyframes move-gradient {
    0% {
        background-position-x: 0
    }

    to {
        background-position-x: 100%
    }
}

.hurdles-stakeholder-glow {
    content: "";
    width: 250px;
    height: 250px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAiIGhlaWdodD0iMjUwIiB2aWV3Qm94PSIwIDAgMjUwIDI1MCI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJidXNpbmVzcy1zaGFkb3ctdjEtYSIgZng9IjUwJSIgZnk9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0ZGRiIvPjxzdG9wIG9mZnNldD0iNDEuMzQxJSIgc3RvcC1jb2xvcj0iI0ZGRiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0ZGRiIgc3RvcC1vcGFjaXR5PSIwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PGNpcmNsZSBjeD0iMTI1IiBjeT0iMTI1IiByPSIxMjUiIGZpbGw9InVybCgjYnVzaW5lc3Mtc2hhZG93LXYxLWEpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii43NSIvPjwvc3ZnPg==);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute;
    z-index: -1;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

.hurdles-stakeholder.mask-out .hurdles-stakeholder-glow {
    opacity: 0
}

.hurdles-stakeholder-arrows {
    position: absolute;
    height: 40px;
    width: 25px;
    will-change: opacity;
    left: calc(100% + 12px);
    opacity: 0;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    z-index: -1
}

@media only screen and (min-width: 600px) {
    .hurdles-stakeholder-arrows {
        left:calc(100% + 40px);
        left: calc(100% + 25px);
        width: 90px;
        -webkit-transform: none;
        transform: none
    }
}

.hurdles-stakeholder-arrows .arrow {
    width: 40px;
    height: 18px;
    position: absolute;
    top: calc(50% - 9px);
    left: calc(50% - 20px);
    opacity: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; 
}

.hurdles-stakeholder-arrows .arrow svg {
    width: auto;
    height: 100%;
    display: block;
}

.hurdles-stakeholder-arrows .arrow:first-child {
    top: calc(50% - 19px)
}

.hurdles-stakeholder-arrows .arrow:last-child {
    top: calc(50% + 1px)
}

.hurdles-stakeholder-arrows .arrow:last-child svg {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.hurdles-stakeholder--merchant.animating .hurdles-stakeholder-arrows {
    opacity: 1
}

.hurdles-stakeholder--stripe {
    -webkit-transform: scale(.75);
    transform: scale(.75);
    opacity: 0;
    z-index: 2
}

.hurdles-stakeholder--stripe>svg {
    fill: #fff
}

@media(min-width: 880px) {
    .hurdles-stakeholder--stripe>svg {
        -webkit-transform:scale(1.2);
        transform: scale(1.2)
    }
}

.hurdles-bubbles {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.hurdles-node {
    position: absolute;
    font-size: 14px;
    padding: 0 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 9999px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 30px
}

@media(min-width: 880px) {
    .hurdles-node {
        font-size:16px;
        height: 40px
    }
}

.hurdles-node--blue {
    background-color: #c4f0ff;
    color: #217ab7
}

.hurdles-node--pink {
    background-color: #ffe0f5;
    color: #9251ac
}

.hurdles-node--yellow {
    background-color: #fdeebe;
    color: #c85d42
}

.hurdles-node--green {
    background-color: #d6facf;
    color: #159570
}

.hurdles-mask {
    width: 50%;
    height: 500px;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #f1f3f9;
    opacity: 0;
    pointer-events: none
}

.hurdles-mask:after {
    content: "";
    position: absolute;
    width: 250px;
    height: 91%;
    right: 0;
    top: 50%;
    -webkit-transform: translateX(100%) translateY(-50%);
    transform: translateX(100%) translateY(-50%);
	  background-image:url(../img/advan.svg?cbh=028e39f8e48db002e46743aa1c605ad8);
    background-repeat: no-repeat;
    background-position: 0;
    background-size: auto 100%
}

@media screen and (max-width: 768px){
	
	.ju-ys{ width: 100px; height:100px; font-size:26px;line-height: 100px; margin-right: -30px;}
	.hurdles-stakeholder {


    left: calc(50% - 65px)
}
	
	
}