/*鼠标触发动画================================================*/
.animate-box {
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
.animate-box:hover, .animate-box:focus, .animate-box:active {
	-webkit-transform: translateY(-8px);
	transform: translateY(-8px);
}

/*粒子圆球================================================*/
.canvas-xing {
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
	overflow: hidden;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
	background: url('../static/culture/ball.png') no-repeat;
	background-size: cover;
}
.canvas-xing canvas {
    position: inherit !important;
    /* width: 6.73rem !important; */
    /* height: 6.73rem !important; */
    z-index: 2 !important;
}

@media (max-width: 1199px) {
    .canvas-xing {
        width: 8.73rem;
        height: 8.73rem;
    }    

}

/*宜荆荆城市群================================================*/
.city-one-inner {
    position: absolute;
    text-align: center;
	top: 26%;
	left: 48%;
    z-index: 2;
}
.city-one-inner .title {
	font-size: 1.8rem;
	font-weight: bold;
	color: #FFF;
	margin-bottom: 10px;
	transform: translateX(-45%);
}
.city-one-inner .sub-title {
	font-size: 0.8rem;
	color: #FFF;
	margin-top: 10px;
	transform: translateX(-45%);
}
.city-one-inner .inner__city-icon {
    position: relative;
    width: 1rem;
    height: 1rem;
    background-color: #FDD100;
    border-radius: 50%;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.city-one-inner .ripple,
.city-one-inner .inner__city-icon .ripple:before,
.city-one-inner .inner__city-icon .ripple:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    height: 260px;
	background: rgba(26, 90, 160, 0.8);
    border-radius: 50%;
    -ms-border-radius: 50%;
    transform: translate(-50%, -50%);
    -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    -webkit-animation: ripple 3s infinite;
    animation: ripple 3s infinite;
	z-index: -1;
}
.city-one-inner .inner__city-icon .ripple:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    content: "";
    position: absolute;
}
.city-one-inner .inner__city-icon .ripple:after {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
    content: "";
    position: absolute;
}
@-webkit-keyframes ripple {
    70% {
        box-shadow: 0 0 0 260px rgba(10, 165, 205, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(10, 165, 205, 0);
    }
}
@keyframes ripple {
    70% {
        box-shadow: 0 0 0 260px rgba(10, 165, 205, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(10, 165, 205, 0);
    }
}

/*荆门-----------------------------------------*/
.city-two-inner {
    position: absolute;
    text-align: center;
	top: 18%;
	right: 22%;
    z-index: 2;
}
.city-two-inner .title {
	font-size: 1.8rem;
	font-weight: bold;
	color: #FFF;
	margin-bottom: 10px;
	transform: translateX(-45%);
}
.city-two-inner .sub-title {
	font-size: 0.8rem;
	color: #FFF;
	margin-top: 10px;
	transform: translateX(-45%);
}
.city-two-inner .inner__city-icon {
    position: relative;
    width: 1rem;
    height: 1rem;
    background-color: #FFF;
    border-radius: 50%;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.city-two-inner .ripple_two,
.city-two-inner .inner__city-icon .ripple_two:before,
.city-two-inner .inner__city-icon .ripple_two:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
	background: rgba(26, 90, 160, 0.8);
    border-radius: 50%;
    -ms-border-radius: 50%;
    transform: translate(-50%, -50%);
    -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    -webkit-animation: ripple_two 4s infinite;
    animation: ripple_two 4s infinite;
	z-index: -1;
}
.city-two-inner .inner__city-icon .ripple_two:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    content: "";
    position: absolute;
}
.city-two-inner .inner__city-icon .ripple_two:after {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
    content: "";
    position: absolute;
}
@-webkit-keyframes ripple_two {
    70% {
        box-shadow: 0 0 0 50px rgba(10, 165, 205, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(10, 165, 205, 0);
    }
}
@keyframes ripple_two {
    70% {
        box-shadow: 0 0 0 50px rgba(10, 165, 205, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(10, 165, 205, 0);
    }
}

/*荆州-----------------------------------------*/
.city-three-inner {
    position: absolute;
    text-align: center;
	bottom: 30%;
	right: 25%;
    z-index: 2;
}
.city-three-inner .title {
	font-size: 1.8rem;
	font-weight: bold;
	color: #FFF;
	margin-top: 10px;
	transform: translateX(-45%);
}
.city-three-inner .sub-title {
	font-size: 0.8rem;
	color: #FFF;
	margin-top: 10px;
	transform: translateX(-45%);
}
.city-three-inner .inner__city-icon {
    position: relative;
    width: 1rem;
    height: 1rem;
    background-color: #FFF;
    border-radius: 50%;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.city-three-inner .ripple_three,
.city-three-inner .inner__city-icon .ripple_three:before,
.city-three-inner .inner__city-icon .ripple_three:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
	background: rgba(26, 90, 160, 0.8);
    border-radius: 50%;
    -ms-border-radius: 50%;
    transform: translate(-50%, -50%);
    -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    -webkit-animation: ripple_three 3.5s infinite;
    animation: ripple_three 3.5s infinite;
	z-index: -1;
}
.city-three-inner .inner__city-icon .ripple_three:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    content: "";
    position: absolute;
}
.city-three-inner .inner__city-icon .ripple_three:after {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
    content: "";
    position: absolute;
}
@-webkit-keyframes ripple_three {
    70% {
        box-shadow: 0 0 0 40px rgba(10, 165, 205, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(10, 165, 205, 0);
    }
}
@keyframes ripple_three {
    70% {
        box-shadow: 0 0 0 40px rgba(10, 165, 205, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(10, 165, 205, 0);
    }
}
/*恩施-----------------------------------------*/
.city-four-inner {
    position: absolute;
    text-align: center;
	bottom: 37%;
	left: 4%;
    z-index: 2;
}

@media screen and (max-width: 414px) {
	.city-one-inner .title, .city-two-inner .title, .city-three-inner .title, .city-four-inner .title {
		font-size: 1.4rem;
		margin-bottom: 0;
		margin-top: 0;
	}
	.city-one-inner{
		top: 13%;
	}
	.city-four-inner{
		bottom: 32%;
	}
}
/*=====================================================*/

.circle-breath {
	background: pink;
	box-shadow: 0 0 0 0 rgb(204, 73, 152);
	height: 36px;
	width: 36px;
	border-radius: 50%;
	animation: donghua 2.4s infinite;
}

@keyframes donghua {
	0% {
		transform: scale(0.60);
		/* 注意rgba中的a的设置 */
		box-shadow: 0 0 0 0 rgba(204, 73, 152, 60%);
	}
	60% {
		transform: scale(1);
		box-shadow: 0 0 0 36px rgba(204, 73, 152, 0%);
	}
	100% {
		transform: scale(0.60);
		box-shadow: 0 0 0 0 rgba(204, 73, 152, 0%);
	}
}

/*企业文化=======================================*/
.culture-spinner {
    width: 45px;
    height: 45px;
    background-color: #C1D8CD;
    border-radius: 100%;
    -webkit-animation: scaleout 1s infinite ease-in-out;
    animation: scaleout 1s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
    0% {
        -webkit-transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}
@keyframes scaleout {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0;
    }
}

/*放大的球=======================================*/
.spinner {
    width: 200px;
    height: 200px;
    background-color: #C1D8CD;
    border-radius: 100%;
    -webkit-animation: scaleout 1s infinite ease-in-out;
    animation: scaleout 1s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
    0% {
        -webkit-transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}
@keyframes scaleout {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0;
    }
}
.spinner.ones {
    width: 350px;
    height: 350px;
    background-color: #C1D8CD;
    border-radius: 100%;
    -webkit-animation: scaleout 1s infinite ease-in-out;
    animation: scaleout 1s infinite ease-in-out;
}
.spinner.two {
    width: 120px;
    height: 120px;
    background-color: #C1D8CD;
    border-radius: 100%;
    -webkit-animation: scaleout 1s infinite ease-in-out;
    animation: scaleout 1s infinite ease-in-out;
}

.spinner.three {
    width: 150px;
    height: 150px;
    background-color: #C1D8CD;
    border-radius: 100%;
    -webkit-animation: scaleout 1s infinite ease-in-out;
    animation: scaleout 1s infinite ease-in-out;
}
.spinner.threes {
    width: 250px;
    height: 250px;
    background-color: #C1D8CD;
    border-radius: 100%;
    -webkit-animation: scaleout 1s infinite ease-in-out;
    animation: scaleout 1s infinite ease-in-out;
}