
* ================== */
.plx-el { transition: all .3s ease-out; }
.plx-el.fadeUp { opacity: 0; -webkit-transform: translate(0, 40px); transform: translate(0, 40px); }
.plx.in .plx-el.fadeUp { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.plx-el.fadeUp-mini { transition: all .2s ease-out; opacity: 0; -webkit-transform: translate(0, 20px); transform: translate(0, 20px); }
.plx.in .plx-el.fadeUp-mini { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); }


* ================== */
.buttom_arrow svg { width: 76px; height: 61px; display: block; margin: auto; }
.buttom_arrow .c, .buttom_arrow .c-h, .buttom_arrow .ar { opacity: 0.5; fill-rule: evenodd; clip-rule: evenodd; fill: none; stroke: #fff; }
.buttom_arrow .ar { stroke-width: 2; }
.buttom_arrow span { width: auto; font-size: 12px; font-weight: bold; letter-spacing: .05em; display: inline-block; text-align: right; white-space: nowrap; margin-top: 10px; }
.buttom_arrow.red .c, .buttom_arrow.red .c-h, .buttom_arrow.red .ar { stroke: #e4002b; }
.buttom_arrow .red span { color: #e4002b; }

/* in */
.plx .buttom_arrow .ar { transition: all .3s ease-in-out .3s; -webkit-transform: translate(-30px, 0); transform: translate(-30px, 0); opacity: 0; }
.plx.in .buttom_arrow .ar { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }

/* hover */
.buttom_arrow .c-h { transition: all .2s ease-in-out; stroke-dasharray: 188; stroke-dashoffset: 100; opacity: 0; }
.buttom_arrow:hover .c-h { stroke-dashoffset: 0; opacity: 1; }
.plx.in .buttom_arrow:hover .ar, .plx.in a:hover .buttom_arrow .ar { -webkit-animation: buttonArrow .3s ease-in 1; animation: buttonArrow .3s ease-in 1; }
@-webkit-keyframes buttonArrow {
	0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
	39% { -webkit-transform: translate(26px, 0); transform: translate(26px, 0); opacity: 0; }
	59% { -webkit-transform: translate(26px, 0); transform: translate(26px, 0); opacity: 0; }
	60% { -webkit-transform: translate(-26px, 0); transform: translate(-26px, 0); opacity: 0; }
	100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }
}
@keyframes buttonArrow {
	0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
	39% { -webkit-transform: translate(26px, 0); transform: translate(26px, 0); opacity: 0; }
	59% { -webkit-transform: translate(26px, 0); transform: translate(26px, 0); opacity: 0; }
	60% { -webkit-transform: translate(-26px, 0); transform: translate(-26px, 0); opacity: 0; }
	100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }
}
.border_in span {
    background-image:url(../images/icon_movie5.png);
}

.button_border { width: 46px; height: 46px; position: relative; margin: auto; }

/*.button_border .border_in {
    width: 46px;
    height: 46px;
    background: #FFF;
    border-radius: 50%;
    position: absolute;
    left: 36.4%;
    top: 36.5%;
    margin-left: -30px;
    margin-top: -30px;
    display: block;
    }*/
.button_border .border_in {
    width: 46px;
    height: 46px;
    background: #FFF;
    border-radius: 50%;
    position: absolute;
    left: 70.4%;
    top: 69.5%;
    margin-left: -30px;
    margin-top: -30px;
    display: block;
    }
	
	
.button_border .border_out svg { width: 50px; height: 50px; position: absolute; top: 0; left: 0; }
.button_border .border_in span { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 14px 14px; display: block; }

/* animation */
.button_border .border_out { position: absolute; left: 0; top: 0; width: 50px; height: 50px; -webkit-animation: borderCircle 3s linear infinite; animation: borderCircle 3s linear infinite; }
.button_border .border_out path { stroke-dasharray: 58; stroke-dashoffset: 59; stroke-linecap: square; stroke-width: 1px; opacity: 1; }

/* hover */
a:hover .border_out { -webkit-animation: borderCircle 2s linear infinite; animation: borderCircle 2s linear infinite; }
@-webkit-keyframes borderCircle {
	0% { -webkit-transform: rotate(0); transform: rotate(0); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes borderCircle {
	0% { -webkit-transform: rotate(0); transform: rotate(0); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}






@media (max-width:1660px) and (min-width:1440px) {
.ysys {
left: 15%;
}
.sizhuang {
    left: 34%;
}
.wuzhuang {
    left: 22%;
}
.yizhuang {
    left: 64.5%;
}
.wuzhuang_pic {
    right: 150%;
}


}
@media (max-width:1440px) and (min-width:1300px) {
.ysys {
left: 10%;
}
.yizhuang {
    left: 65.5%;
}
.wuzhuang {
    left: 20%;
}


}
@media (max-width:1440px) and (min-width:1180px) {
.ysys {
left: 13%;
}
.wuzhuang {
    left: 20%;
}
.yizhuang {
    left: 63.5%;
}
.sizhuang {
    left: 35%;
}
.erzhuang {
    left: 54%;
}
.shegnhuoqu{    right: 8.5%;}


}
@media (max-width:1220px) and (min-width:960px) {
.ysys {
    left: 13%;
}
.wuzhuang {
    left: 23%;
}
.yizhuang {
    left: 62.5%;
}
.sizhuang {
    left: 35%;
}
.mus {
    left: 47%;
}
.erzhuang {
    left: 55%;
}





}




