@import url("https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@700&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
a{
        text-decoration:none;
        color:inherit;
}
body {
        margin:0 auto;
        max-width:450px;
        min-height: calc(100vh + 100px);
        background-color: #fff;
        background-attachment: fixed;
        font-size: 16px;
        color:#000;
        font-family: "Noto Sans KR", serif;
}

/* 폰트 */
.batang { font-family: "Gowun Batang", serif; }

.bold_100 { font-weight: 100; }
.bold_200 { font-weight: 200; }
.bold_300 { font-weight: 300; }
.bold_400 { font-weight: 400; }
.bold_500 { font-weight: 500; }
.bold_600 { font-weight: 600; }
.bold_700 { font-weight: 700; }
.bold_800 { font-weight: 800; }
.bold_900 { font-weight: 900; }

.nav_container{
        display:flex; 
        justify-content:space-between;
        width: 100%;
        padding:50px 20px;
}

.logo{
        display:block;
        width: 130px;
        height: 25px;
        background-image: url('../img/logo.png');
        background-repeat : no-repeat;
        background-size: contain;
        background-position:left;
    }
    
.edit{
        display:block;
        width: 25px;
        height:25px;
        margin-left:auto;
        background-image: url('../icon/settings.svg');
        background-repeat : no-repeat;
        background-size: contain;
}

.user{
        display:block;
        width: 25px;
        height:25px;
        margin-left:auto;
        background-image: url('../icon/user.svg');
        background-repeat : no-repeat;
        background-size: contain;
}
.parking{
        display:block;
        width: 25px;
        height:25px;
        margin-left:auto;
        background-image: url('../icon/parking.svg');
        background-repeat : no-repeat;
        background-size: contain;
}

.logout{
        display:block;
        width: 25px;
        height:25px;
        margin-left:auto;
        background-image: url('../icon/logout.svg');
        background-repeat : no-repeat;
        background-size: contain;
}
.password{
        display:block;
        width: 25px;
        height:25px;
        margin-left:auto;
        background-image: url('../icon/password.svg');
        background-repeat : no-repeat;
        background-size: contain;
}


.setting_menu{
        display:flex; 
        justify-content:space-between;
        width: 100%;
        padding: 10px 30px;
}
.menu{
        border-bottom: 1px solid;
        width: 50px;
        text-align:center;
}

.active{
        filter: invert(75%) sepia(52%) saturate(6969%) hue-rotate(111deg) brightness(100%) contrast(95%);
}
.body_container{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-pack: center;
        -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
                align-items: left;
        flex-direction:column;
        width: 100%;
        min-height: calc(100vh - 410px);
        padding:50px 50px;
        overflow-y:auto;
}

.short_hr{
        direction: x;
        width: 50px;
        border: 2px solid #06c761;
        margin: 10px 0;
}

.title{
        font-weight: 700;
        font-size: 13px;
}

.msg_section{
        margin: 20px 0;
        white-space: pre-wrap;
        font-size: 30px;
}
.text_white {
        color : white !important;
}
.small_font{
        margin: 10px 0;
        font-size: 13px;
        color:#06c761;
}

.color_button{
        display:block;
        width:80%;
        margin: 10px auto;
        padding: 10px;
        
        background-color:#000000;
        font-size:20px;
        color:white;
        border:none;
        border-radius:25px;

        font-weight:700;
}
.footer_container{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        /* justify-content: center; */
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        flex-direction:column ;

        box-shadow: 0px 0px 5px #444;
        background-color: #000;
        border-radius: 80px 0px 0 00px;
        padding:00px 0;
        border:none;
        color:white;
        width: 100%;
        min-height:400px;
        max-width:450px;
        overflow:hidden;
}

.fail{
        margin-top: 100px;
}
/* 안심번호 타이머  시작*/
.connection_status_div{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        
        -webkit-box-pack: center;
        -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
                align-items: left;
        flex-direction:row ;
        padding: 30px 10px;
        border:none;
        color:white;
        width: 100%;
        max-width:450px;
        overflow:hidden;
}
.connection_timer{
        padding:7px;
        position:relative;
}
.connection_state{
        padding:7px;
}
.e-c-base {
        fill: none;
        stroke: #292929;
        stroke-width: 8px
}

.e-c-progress {
        fill: none;
        stroke: #06c761;
        stroke-width: 28px;
        transition: stroke-dashoffset 0.7s;
}

.e-c-pointer {
        fill: #ffffff;
        stroke: #06c761;
        stroke-width: 10px;
}
.display-remain-time{
        position:absolute;
        top:50px;
        left:45px;
        
}
#e-pointer { transition: transform 0.7s; }

.safe_number{
        font-size: 25px;
        font-weight:900;
}

#offconn{
        padding: 50px 20px;
        text-align:center;
}
#offconn > button{
        width: 200px;
        padding:10px;
        border-radius:20px;
        border:2px solid #fff;
        background:none;
        color:white;
        font-size:20px;
}
/* 안심번호 타이머  종료*/

.connect_button_div{
        height:100px;
        background-color:#000;
        width:100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        flex-direction:row ;
}

.connect{
        padding:10px 20px;
        border-radius:10px;
        background:none;
        border:1px solid;
        font-size: 25px;
        font-weight:700;
        color: #06c761;
        margin: 15px;
}

.tel{
        display:inline-block;
        width: 30px;
        height:30px;
        background-image: url('../icon/phone.png');
        margin-right: 20px;
        background-repeat : no-repeat;
        background-size: contain;
        background-position:center;
        vertical-align: middle;
        
    }
.sms{
        display:inline-block;
        width: 30px;
        height: 30px;
        background-image: url('../icon/sms.png');
        margin-right: 20px;
        background-repeat : no-repeat;
        background-size: contain;
        background-position:center;
        vertical-align: middle;
    }

        
        
.copyright{
        height:111px;
        padding-top:60px;
        padding-left: 30px;
        width:100%;
        
        font-size:11px;
        color:#666;
}


/* 로딩페이지 */
.load_container{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-pack: center;
        -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
                align-items: center;
        flex-direction:column;
        width: 100%;
        height: 100vh;
        padding:50px 50px;
        overflow:hidden;
}


.input_form{
        font-family: "Gowun Batang", serif; 
        width: 100%;
        padding:10px;
        font-size:25px;
        font-weight:700;
        border: 1px solid #4ed590;
        background-color: #fbfffb;
        border-radius: 20px;
        outline:none;
        text-align:center;
        margin: 10px 0;
}
.text_area{
        font-family: "Gowun Batang", serif; 
        width: 100%;
        padding:10px;
        font-size:25px;
        font-weight:700;
        border: 1px solid #4ed590;
        background-color: #fbfffb;
        border-radius: 20px;
        outline:none;
        text-align:center;
        margin: 10px 0;
}
.page_title{
        font-size:25px;
        font-weight: 900;
        margin:10px 0;
}

.page_info {
        font-size: 18px;
        margin: 10px 0;
        padding-bottom:15px;
        border-bottom: 1px dotted #000;
}



/* 라디오 버튼  시작*/

input[type="radio"] {
        display: none;
    }
input[type="radio"] + label {
        font-weight: 400;
        font-size: 16px;
    }
input[type="radio"] + label span {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin: -2px 10px 0 0;
        vertical-align: middle;
        cursor: pointer;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 5px solid #ffffff;
    }
input[type="radio"] + label span {

        background-color: #d3d3d3;
    }
input[type="radio"]:checked + label {
        color: #333;
        font-weight: 700;
    }
    input[type="radio"]:checked + label span {
            
        background-color: #06c660;
        border: 5px solid #ffffff;
            
        box-shadow: 2px 2px 2px rgba(0,0,0,.1);
    }
input[type="radio"] + label span, input[type="radio"]:checked + label span {
        -webkit-transition: background-color 0.24s linear;
        -o-transition: background-color 0.24s linear;
        -moz-transition: background-color 0.24s linear;
        transition: background-color 0.24s linear;
    }

.radio_button_margin{
        margin:8px;
}
/* 라디오 버튼 종료*/

.card_body{
        width:100%;
        background-color: #dfdfdf;
        padding: 20px;
        border-radius:20px;
}
.card_content{
        font-family: "Gowun Batang", serif;
        font-size:18px;
}
.info_title{
        font-size:14px;
        font-weight: 700;
        padding: 10px 0;
        margin-top:10px;
}

.warnig {
        font-size:14px;
        font-family: "Gowun Batang", serif;
}

.card_body > .input_form{
        padding:5px;
        border:1px solid #000;
        font-size: 18px;
}

.disable{
   font-size: 20px;
   white-space: normal;
}

.disable_title{
        margin-top:20px;
        padding:10px;
        background:#eeeeee;
        font-size:16px;
        font-weight:600;
        text-align:center
}
.disable_type{
        padding: 10px 20px;
        background:#f5f5f5;
        font-size:14px;
        font-weight:600;
         text-align:center
}

.cs_about{
        font-family: "Gowun Batang", serif;
        padding: 10px;
        background:#f5f5f5;
        font-size:14px;
        font-weight:600;
         text-align:center
}

.kakao_talk{
        width:150px;
        display:block;
        margin-left:auto;
        margin-top: 20px;
}

.sale_div{

        padding:20px;
}
.sales{
        padding:15px;
        font-size:14px;
}
.store{
        text-align:CENTER;
}
.naver{
        background: #44af36;
        margin : 15px;
        padding: 3px 20px;
        border-radius: 30px;
        display:inline-block;

}

.coupang{
        display:inline-block;
        margin : 15px auto;
        background: #c34433;
        margin : 15px;
        padding: 3px 20px;
        border-radius: 30px;

}