/* 弹出 */
#pop{
width:100%;height:100%;
display: nono;
position:fixed;top:0;left:0;z-index:998;
background:rgba(0,0,0,.86);
justify-content:center;align-items:center;
}

#pop .box{
position:relative;display:flex;
width:38%;height:auto;
border-radius:6px;background:#fff;box-shadow:0 5px 25px rgba(0,0,0,.2);
padding: 50px;
overflow: hidden;
z-index: 999;
justify-content:center;align-items:center;
}

#pop .box .close{position:absolute;top:20px;right:20px;cursor:pointer;}
#pop .box .close i{
display:block;
font-size:24px;line-height:40px;
width:40px;height:40px;
border:1px solid #e8edf2;border-radius:100%;
text-align:center;
}
#pop .box .title{text-align: center; font-size:28px;font-weight:700;color:#515151;line-height:32px;}
#pop .box .wx_qr{text-align: center; }
#pop .box .wx_qr img{width: 100%}
#pop .box .tel{font-size:60px;font-weight:700;color:#183153;padding: 0px 0 0 0;position:relative;}
#pop .box .tel span{font-size:18px;font-weight:700;color:#183153; }
#pop .box .tel i{position: absolute;left:5px;top:10px;font-size: 30px;color: #f52328}
#pop .box .mob{font-size:40px;font-weight:700;color:#183153;padding: 0px 0 0 0;position:relative;}
#pop .box .mob i{font-size: 40px;color: #183153;}






/* 大于1000px  */
@media only screen and (min-width: 1000px) {	
#pop .box .tel{font-size:40px;;}
#pop .box .tel span{font-size:18px}
#pop .box .tel i{position: absolute;left:5px;top:10px;font-size: 15px;color: #f52328}
#pop .box .mob{font-size:30px;}
#pop .box .mob i{font-size: 20px;}
}

/* 大于1200px  */
@media only screen and (min-width: 1200px) {		
#pop .box .tel{font-size:45px;;}
#pop .box .tel span{font-size:18px}
#pop .box .tel i{position: absolute;left:5px;top:10px;font-size: 20px;color: #f52328}
#pop .box .mob{font-size:30px;}
#pop .box .mob i{font-size: 30px;}
}

/* 大于1400px  */
@media only screen and (min-width: 1400px) {		
	
#pop .box .tel{font-size:60px;font-weight:700;color:#183153;padding: 0px 0 0 0;position:relative;}
#pop .box .tel span{font-size:18px;font-weight:700;color:#183153; }
#pop .box .tel i{position: absolute;left:5px;top:10px;font-size: 30px;color: #f52328}
#pop .box .mob{font-size:40px;font-weight:700;color:#183153;padding: 0px 0 0 0;position:relative;}
#pop .box .mob i{font-size: 40px;color: #183153;}
}
/* 大于1600px  */
@media only screen and (min-width: 1600px) {		
#pop .box .tel{font-size:60px;font-weight:700;color:#183153;padding: 0px 0 0 0;position:relative;padding-top: 30px;padding-left: 10px}
#pop .box .tel span{font-size:18px;font-weight:700;color:#183153; }
#pop .box .tel i{position: absolute;left:5px;top:20px;font-size: 30px;color: #f52328}
#pop .box .mob{font-size:40px;font-weight:700;color:#183153;padding: 0px 0 0 0;position:relative;}
#pop .box .mob i{font-size: 40px;color: #183153;}			
}

/* 小于1000px  */
@media only screen and (max-width: 1000px) {	

#pop .box .wx_qr img{width: 80%}
#pop .box .tel{font-size:18px;padding-left: 20px;padding-top: 30px}
#pop .box .tel span{font-size:18px}
#pop .box .tel i{position: absolute;left:0px;top:30px;font-size: 15px;color: #f52328}
#pop .box .mob{font-size:18px;}
#pop .box .mob i{font-size: 18px;}
}






#pop .yuan1{
background-color: #1fc8db;
    background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);

position: absolute;left:-30px;top:-30px;
width: 100px; height:100px; border-radius: 50%; }

#pop .yuan2{
background-color: #1fc8db;
background-image: linear-gradient(140deg, #ffffff 20%, #1fc8db 51%, #2cb5e8 75%);

position: absolute;right:-200px;top:100px; z-index: -1;


width: 500px;height:500px; border-radius: 50%; 
}


.line {
            /* 结合外层元素的相对定位 */
            position: absolute;
        }
        .line:nth-child(1) {
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            /* 加上渐变效果，方可形成拖尾效果 */
            background: linear-gradient(90deg, transparent, orange);
            animation: animate1 8s linear infinite;
        }
        /* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */
        @keyframes animate1 {
            0% {
                left: -100%;
            }
            50%,
            100% {
                left: 100%;
            }
        }
        .line:nth-child(2) {
            top: -100%;
            right: 0;
            width: 3px;
            height: 100%;
            background: linear-gradient(180deg, transparent, red);
            animation: animate2 8s linear infinite;
            /* 注意要加上延时触发动画效果，这样线条才会依次触发 */
            animation-delay: 2s;
        }
        @keyframes animate2 {
            0% {
                top: -100%;
            }
            50%,
            100% {
                top: 100%;
            }
        }
        .line:nth-child(3) {
            bottom: 0;
            right: 0;
            width: 100%;
            background: linear-gradient(270deg, transparent, green);
            animation: animate3 8s linear infinite;
            animation-delay: 4s;
        }
        @keyframes animate3 {
            0% {
                right: -100%;
                height: 3px;
            }
            50%,
            100% {
                height: 2px;
                right: 100%;
            }
        }
        .line:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 3px;
            height: 100%;
            background: linear-gradient(360deg, transparent, #3a86ff);
            animation: animate4 8s linear infinite;
            animation-delay: 6s;
        }
        @keyframes animate4 {
            0% {
                bottom: -100%;
            }
            50%,
            100% {
                bottom: 100%;
            }
        }