/* 유량제어 style */
dd  {margin: 0; margin-inline-start: 0;}
.netfunnel-wrap{ position: fixed; left: 0; top: 0; z-index: 99999999999; font-size: 1.5rem; }
.control-modal-wrap{ position: fixed; top: 0; left:0; width: 100%; height: 100vh;
    font-family: 'Noto Sans Korean', sans-serif}
.control-modal-wrap::after{ content: ""; position: absolute; top: 0; left:0; z-index: -1; display: block; width: 100%; height: 100%; background: #333; opacity: .2; }
.control-modal-wrap .control-modal{ position: relative; height: 100vh; }
.control-modal-wrap .control-modal .control-modal-box{ 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    width: calc( 100% - 30px );
    max-width: 767px;
    background: #fff;
    border-radius: 1rem;
    text-align: center;
    font-size: 1.4rem;
}
.control-modal-wrap .control-modal .control-modal-box .img-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 80px; */
    text-align: center;
    width: 35%;
    margin: 0 auto;
    padding: 2rem 0 1rem;
}
.control-modal-wrap .control-modal .control-modal-box .img-wrap img{ width: 100%; }
.control-modal-wrap .control-modal .control-modal-box .contents{
    display: block;
    height: calc( 100% - 140px );
    padding: 0 1.6rem;
}
.control-modal-wrap .control-modal .control-modal-box .contents .tit{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0.4rem 0 2rem;
    color: #7f8793;
}
.control-modal-wrap .control-modal .control-modal-box .contents .now-info{
    height: calc( 100% - 130px );
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0 0;
    border-radius: 1.4rem;
}
.control-modal-wrap .control-modal .control-modal-box .contents .now-info dl{ width: 100%; }
.control-modal-wrap .control-modal .control-modal-box .contents .now-info .num-tit{ padding-bottom: 1rem; font-size: 1.6rem; font-weight: bold;}
.control-modal-wrap .control-modal .control-modal-box .contents .now-info .num{ display: block; font-size: 2.8rem; font-weight: 700; color: #0e126a; }
.control-modal-wrap .control-modal .control-modal-box .contents .now-info .num span{ font-weight: 700; color: #0e126a; }
.control-modal-wrap .control-modal .control-modal-box .contents .now-info .time{ padding: 1rem 0; font-size: 1.4rem; }
.control-modal-wrap .control-modal .control-modal-box .contents .now-info .time .point{ font-weight: 700; color: #0e126a; }
.control-modal-wrap .control-modal .control-modal-box .contents .progress-bar-wrap{ position: relative; margin: 0 auto; width: 90%; max-width: 600px; height: 60px; }
.control-modal-wrap .control-modal .control-modal-box .contents .progress-bar-wrap .progress-bar{ position: absolute; top: 50%; left: 0; transform: translate(0%, -50%); width: 0; height: 8px; background: #0e126a; border-radius: 10px; transition: .5s; }

.control-modal-wrap .control-modal .control-modal-box .contents .progress-bar-wrap .progress-bar > div > div{ border-radius: 100rem; background:#0e126a !important; }
.control-modal-wrap .control-modal .control-modal-box .contents .progress-bar-wrap .progress-bar-back{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc( 100% + 7px ); height: 15px; background: #ccc; border-radius: 15px; }
.control-modal-wrap .control-modal .control-modal-box .contents .progress-bar-wrap .icon-box {
    top: 50%;
    left: 3%;
    position: absolute;
    transition: .5s;
    width: 74px;
    height: 104px;
    transform: translate(-50%, -50%);
    background: url(../img/poyoung_net.png) no-repeat top center;
    background-size: 70px;
    animation: poyong 2s infinite;
  }
.control-modal-wrap .control-modal .control-modal-box .contents .txt{ display: flex; align-items: center; justify-content: center; font-weight: 500; height: 80px; line-height: 1.4; padding: 1rem;}
.control-modal-wrap .control-modal .control-modal-box .attention-info{ display: flex; justify-content: center; height: 60px; }
.control-modal-wrap .control-modal .control-modal-box .contents .txt,
.control-modal-wrap .control-modal .control-modal-box .attention-info   {color: #7f8793;}



@keyframes poyong {
    0% {
      background: url("../img/poyoung_net.png") no-repeat top center;
      background-size: 70px;
    }

    25% {
      background: url("../img/poyoung_net.png") no-repeat top center;
      background-size: 70px;
    }

    50% {
      background: url("../img/poyoung_net.png") no-repeat top center;
      background-size: 70px;
      top: 30%;
    }

    75% {
      background: url("../img/poyoung_net.png") no-repeat top center;
      background-size: 70px;
    }
  }
