.login-box {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.login_bg {
    width: 100%;
    height: 100%;
    background: url(/client/images/ydy-bg.jpg) no-repeat center center;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    -webkit-animation-name: scaleDraw;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 20s;
}

@keyframes scaleDraw {

    /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        /*开始为原始大小*/
    }

    50% {
        -webkit-transform: scale(1.3, 1.3);
        transform: scale(1.3, 1.3);
        /*开始为原始大小*/
    }

    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}

.ydy-content {
    width: 12.7rem;
    margin: 0 auto;
    padding-top: 1.3rem;
    position: relative;
    z-index: 10;
}

.ydy-content .logo {
    width: 100%;
    margin-bottom: 0.45rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ydy-content .logo .img {
    width: 4.14rem;
}


.login-ewm {
    width: 0.57rem;
    height: 0.57rem;
    border-radius: 0.1rem;
    border: 0.03rem solid #fff;
    margin-left: 0.2rem;
    position: relative;
    z-index: 10;
    cursor: pointer;
    transition-duration: 0.5s;
}

.login-ewm:hover {
    border: 0.03rem solid #21896e;
    background: #21896e;
}

.login-ewm-icon {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
}

.login-ewm-icon .iconfont {
    font-size: 0.34rem;
    color: #fff;
}

.xzZi {
    font-size: 0.18rem;
    text-align: center
}

.ewm-icon-g {
    display: block;
    width: 0.44rem;
    position: relative;
    opacity: 1;
    visibility: visible;
    transition-duration: 0.5s;
}

.login-ewm:hover .ewm-icon-g {
    opacity: 0;
    visibility: hidden;
}

.login-ewm:hover .xzZi {
    color: #fff
}

.ewm-icon-w {
    display: block;
    width: 0.44rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition-duration: 0.5s;
}

.login-ewm:hover .ewm-icon-w {
    opacity: 1;
    visibility: visible;
}

.login-ewm-icon span {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.18rem;
    color: #fff;
    line-height: 1.4;
    text-align: center;
    font-family: 'syhtB';
    opacity: 0;
    visibility: hidden;
    transition-duration: 0.5s;
}

.login-ewm:hover .login-ewm-icon span {
    opacity: 1;
    visibility: visible;
}

.login-ewm-down {
    width: 1.44rem;
    background: #fff;
    padding: 0.1rem 0.1rem 0.05rem;
    position: absolute;
    top: 0.7rem;
    left: 50%;
    margin-left: -0.72rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition-duration: 0.5s;
}

.login-ewm:hover .login-ewm-down {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.login-ewm-down:before {
    display: block;
    content: '';
    width: 0.12rem;
    height: 0.07rem;
    background: url(/client/images/login-jt.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -0.07rem;
    left: 50%;
    margin-left: -0.06rem;
}

.login-ewm-img {
    width: 1.18rem;
    max-width: 100%;
    margin: 0 auto;
}

.login-ewm-img img {
    display: block;
    width: 100%;
}

.login-ewm-down p {
    font-size: 0.16rem;
    color: #555555;
    line-height: 1.6;
    text-align: center;
    margin-top: 0.05rem;
}

.linkContent {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.linkContent .left {
    width: 3.95rem;
    height: 5.05rem;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    padding-bottom: 10px;
}

.linkContent .right {
    width: calc(100% - 3.95rem);
    padding-left: 0.1rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 5.05rem;
	
}

.linkContent .right li {
    width: 32.8%;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    color: #fff;
    overflow: hidden;
    position: relative;
}
.linkContent .right li .picbox{
		width: 1.44rem;
		    background: #fff;
		    padding: 0.1rem 0.1rem 0.05rem;
		    position: absolute;
		    top: 0.35rem;
		    left: 50%;
		    margin-left: -0.72rem;
		    opacity: 0;
		    visibility: hidden;
		    transform: translateY(-20px);
		    transition-duration: 0.5s;
			z-index: 9999;
			border-radius: 0.15rem;
			text-align: center;
}
.linkContent .right li:hover .picbox{
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}
.linkContent .right li:after {
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    z-index: 1;
    left: -50%;
    top: -50%;
    border-radius: 100%;
    background: rgba(4, 127, 97, 0.75);
    transition-duration: .5s;
}

.linkContent .right li:hover:after {
    width: 200%;
    height: 200%
}

.linkContent .right li .iconfontBox {
    position: relative;
    z-index: 2;
    text-align: center;
}

.linkContent .right li a {
    color: #fff;
}

.linkContent .right li .iconfontBox .icon {
    width: 1.2rem;
    height: 1rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: .5s;
}

.linkContent .right li:hover .iconfontBox .icon {
    transform: rotateY(180deg);
}

.linkContent .right li .iconfontBox .iconfont {
    font-size: 1rem;
}

.linkContent .right li:nth-child(2) .iconfontBox .iconfont {
    font-size: 0.86rem;
}

.linkContent .right li:nth-child(3) .iconfontBox .iconfont {
    font-size: 0.8rem;
}

.linkContent .right li .iconfontBox p {
    text-align: center;
    font-size: 0.29rem;
    line-height: 0.29rem;
}

.linkContent .right li .iconfontBox p span {
    display: inline-block;
    width: 100%;
    line-height: 0.2rem;
    font-size: 0.14rem;
    text-transform: uppercase;
}

.leftLink {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.leftLink dl {
    width: 46%;
    background: #21896e;
    cursor: pointer;
    color: #fff;
    min-height: 1.1rem;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leftLink dl a {
    color: #fff;
}

.leftLink dl:nth-child(1) {
    width: 100%;
    border-radius: 0;
    min-height: 1.85rem;
}

.leftLink dl dt .iconfont {
    line-height: 0.4rem;
    text-align: center;
}

.leftLink dl dt p {
    text-align: center;
    line-height: 0.4rem;
    font-size: 0.22rem;
    font-weight: bold;
}

.leftLink dl:nth-child(1) p {
    font-size: 0.26rem;
}

.leftAdd {
    width: 100%;
    padding: 10px 15px;
}

.leftAdd li {
    width: 100%;
    list-style: none;
    line-height: 0.32rem;
    font-size: 0.17rem;
}

.leftAdd li .iconfont {
    width: 0.33rem;
    font-size: 0.18rem;
}

.leftAdd li:nth-child(1) .iconfont,
.leftAdd li:nth-child(4) .iconfont {
    font-size: 0.2rem;
}

.leftLink dl dt .picSvg {
    width: 0.55rem;
    height: 0.55rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leftLink dl:nth-child(1) dt .picSvg {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leftLink dl:nth-child(2) dt .picSvg svg {
    width: 86%;
}

.leftLink dl dt .picSvg svg {
    width: 100%;
}

@keyframes line-anm {

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fill-anm {
    from {
        fill: transparent;
    }

    to {
        fill: #fff;
    }
}

@keyframes line-anm2 {

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes fill-anm2 {
    0% {
        fill: transparent;
    }

    100% {
        fill: #fff;
    }
}

.icon1 {
    animation: fill-anm 4s ease forwards 1000ms;
}

.icon1 path {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: line-anm 4s ease forwards;
}

.leftLink dl:hover dt .picSvg .icon1 {
    animation: fill-anm2 2s ease forwards 300ms;
}

.leftLink dl:hover dt .picSvg .icon1 path {
    animation: line-anm2 2s ease forwards;
}

@media only screen and (max-width: 760px) {
    .linkContent .left {
        display: none;
    }

    .linkContent .right {
        width: 100%;
    }

    .ydy-content {
        width: 90%;
        margin: 0 auto;
    }

    .linkContent .right li {
        width: 100%;
        margin-bottom: 10px;
        padding: 20px 0;
    }

    .linkContent .right li .iconfontBox p {
        text-align: center;
        font-size: 20px;
        line-height: 24px;
    }
}