@charset "utf-8";


#supply{margin: 0 auto; padding: 100px 0;}

#supply .show{margin: 0 auto; position: relative;}
#supply .show>.floating{position: absolute;z-index: 90; width: 100%; height: 100%;}
#supply .show>.floating>ul>li{position: absolute; display: flex;align-items: center; align-show: center; height: 60px;}
#supply .show>.floating>ul>li .item{display: flex; align-items: center ;align-show: center; cursor: pointer;}
#supply .show>.floating>ul>li .item>.dot{ display: inline-block; float: left;width: 36px;height: 36px; line-height: 36px; color: #fff;text-align: center; position: relative;background: url(../img/supply_dot.png) no-repeat center;background-size: 100% 100%;z-index: 1;cursor: pointer;flex-shrink:0}
#supply .show>.floating>ul>li .item>.dot i{width: 100%;height: 100%;border-radius: 50%;-webkit-animation: myfirst 2s linear infinite;-moz-animation: myfirst 1.5s linear infinite;-o-animation: myfirst 1.5s linear infinite;animation: myfirst 1.5s linear infinite;background: linear-gradient(60deg, #88cfff 0%, #ffffff 100%);position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
#supply .show>.floating>ul>li .item>.dot::before{content: "+";color: #fff; font-size: 2rem; position: absolute;left: 50%;top: 50%;z-index: 2;transform: translate(-50%, -50%);}
#supply .show>.floating>ul>li .item>.title{ display: inline-flex; float: right; margin:4px; min-width: 100px; font-size: 1.6rem; padding:0 25px; height: 32px; color:#fff; justify-show:center; justify-content: center; align-items:center; background: rgba(147,209,255,.9); border-radius: 20px; transition: all .35s;}
#supply .show>.floating>ul>li .info{ display: none; position: absolute;z-index: -1;bottom: 60px;left:-13.2%;padding:20px 35px 10px 35px; background: rgba(255,255,255,.95); box-shadow: 0 3px 16px rgba(0,0,0,.1); border-radius: 20px; width: 19.2vw;min-width: 320px;opacity:0;transition: all ease .3s; animation: ani_bottom_opacity 0.5s ease backwards;}
#supply .show>.floating>ul>li .info>.title{display: flex; align-items: center; align-show: center;}
#supply .show>.floating>ul>li .info>.title>h3{ display: inline-block; font-size: 2.6rem; color: #444;}
#supply .show>.floating>ul>li .info>.title>i{width: 60px;height: 60px;overflow: hidden; border-radius: 100%;border: 1px solid #ccc;margin-right: 15px;display:inline-flex;align-items:center;justify-show:center;}
#supply .show>.floating>ul>li .info>.title>i>img{ width: 100%; }
#supply .show>.floating>ul>li .info>.box{ margin: 20px auto; padding: 0 10px;}
#supply .show>.floating>ul>li .info>.box>.row{display: flex;align-items: center; align-show: center;font-size: 1.5rem; color: #666; padding: 3px 0;}
#supply .show>.floating>ul>li .info>.box>.row>i{  display: inline-block; font-size: 2rem; color: #999;}
#supply .show>.floating>ul>li .info>.box>.row>a{display: inline-block; margin-left: 5px; transition: all .35s;}
#supply .show>.floating>ul>li .info>.box>.row>a:hover{color: #88cfff; text-decoration: underline;}
#supply .show>.floating>ul>li:hover .info{ display: block; z-index: 22;opacity: 1;}
#supply .show>.floating>ul>li .item:hover .title{background:#88cfff;}
#supply .show>.map{margin: 0 auto; width: 100%;}
#supply .show>.map>img{width: 100%;height: auto;}

#supply .lists{ display: none; width: 90%; margin: 30px auto; padding: 30px 50px; box-sizing: border-box; border-radius: 20px; box-shadow: 0 0 16px rgba(0,0,0,.1); }
#supply .lists>ul{display: block;}
#supply .lists>ul>li{display: flex;align-content: center;align-items: center; border-bottom: 1px solid #eee; padding: 30px 0;}
#supply .lists>ul>li:last-child{border-bottom: 0;}
#supply .lists>ul>li>.ico{ width: 50px;height: 50px; display: inline-block; flex: 0 0 50px;}
#supply .lists>ul>li>.box{display: inline-block; flex: 1; box-sizing: border-box;padding-left: 20px;}
#supply .lists>ul>li>.box>.title{font-weight: bold; font-size: 1.8rem;}
#supply .lists>ul>li>.box>.text{ padding-top: 5px; display: flex; align-items: center;align-content: center;}
#supply .lists>ul>li>.box>.text>a{display: inline-flex; align-content: center;align-items: center; margin-right: 20px;}
#supply .lists>ul>li>.box>.text>a>i{display: inline-block; margin-right: 5px;}
#supply .lists>ul>li>.box>.text>a>span{display: inline-block; font-size: 1.2rem;}

@keyframes myfirst{
    0% {transform: translate(-50%,-50%) scale(0.1);opacity: 1;}
    50% {transform: translate(-50%,-50%) scale(0.7);opacity: 0.5;}
    100% {transform: translate(-50%,-50%) scale(1.4);opacity: 0;}
}
@-webkit-keyframes ani_bottom_opacity {
    0% { bottom: 80px; opacity: 0; }
    100% { bottom: 60px; opacity: 1; }
}







@media only screen and (max-width: 1280px){

    #supply .show>.floating>ul>li .item{ transform: scale(.8) translateY(-10px) translateX(-12px);}
    #supply .show>.floating>ul>li .item>.title{ font-size: 1.4rem; padding:0 15px; min-width: auto;}
    #supply .show>.floating>ul>li .info{  min-width: 260px;}

    #supply .show>.floating>ul>li .info>.title>h3{font-size: 2rem; }
    #supply .show>.floating>ul>li .info>.title>i{width: 46px;height: 46px;}
    #supply .show>.floating>ul>li .info>.box>.row{;font-size: 1.3rem;}


}


@media only screen and (max-width: 1080px){

    #supply .lists{display: block;}

}

@media only screen and (max-width: 860px){

    #supply .show>.floating>ul>li .item{ transform: scale(.8) translateY(-20px) translateX(-6px);}
    #supply .show>.floating>ul>li .item>.dot{ width: 20px;height: 20px; line-height: 20px;}
    #supply .show>.floating>ul>li .item>.dot::before{font-size: 1.4rem;}
    #supply .show>.floating>ul>li .item>.title{display: none;}

    #supply .lists>ul>li>.ico{ width: 40px;height: 40px; flex: 0 0 40px;}

}




@media only screen and (max-width: 640px){


    #supply{ padding: 50px 0 100px 0;}

    #supply .lists>ul>li{align-items: self-start;}
    #supply .lists>ul>li>.ico{ width: 32px;height: 32px; flex: 0 0 32px;}
    #supply .lists>ul>li>.box>.title{font-size: 1.6rem;}
    #supply .lists>ul>li>.box>.text{ display: block;}



}


@media only screen and (max-width: 520px){




}