@charset "utf-8";


@media screen and (min-width: 1200px) {
}

@media screen and (max-width: 992px) {
}

@media screen and (max-width: 768px) {
   
    .wrap.login { justify-content: space-between; }
    .wrap.login main { margin-top: 6rem;}
    .wrap.login main .main-wrap h1 { font-size: 1.8rem; }
    .wrap.completion .main-wrap h1 { font-size: 1.8rem; }

    .header-wrap, .main-wrap { width: calc(100% - 3.2rem); margin:0 auto; margin-bottom: 1rem; }
    .footer-wrap { width: 100%; margin:0 auto; max-width: unset;}

    .header-wrap > p { font-size: 0.7rem; }

    .main-wrap > h1 { font-size: 1.0rem; }
    .main-wrap > p { font-size: 0.7rem; }
    .bottom-btn-wrap { display: flex; width: calc(100% + 3.2rem); margin-left: -1.6rem; justify-content: center; gap:0; }
    .bottom-btn-wrap button { flex:1; }

    header.control-room { background: transparent; margin-bottom: 1rem; }
    header.control-room h1 { display: none;}
    main.control-room .main-wrap h1 { display: block;}
    main.control-room .main-wrap time {  font-size: 0.8rem; color: rgba(0, 0, 10, 0.4); font-weight: 600; text-align: left; }
    main.control-room .main-wrap time:before { display: none; }
    
    main.control-room .main-wrap { width: calc(100% - 3.2rem); max-width: 30rem; }
    .header-title-moblie { display: flex; justify-content: space-between; align-items: center; width:100%; background: #7a66fc; padding: 0.8rem 1rem;}
    .table-wrap.control-room { min-width: unset; }
    .table-wrap.control-room .header-title-moblie span { color:#fff; font-size: 0.8rem; font-weight: 600; }
    .table-wrap.control-room .header-title-moblie time { width:auto; color:#fff; font-size: 0.7rem; font-weight: 500; }
    .table-wrap.control-room .header-title-moblie time:after { content: ''; display: inline-block; width:1rem; height: 1rem; 
        background: url('../images/visit/ico-calendar.png') no-repeat center / 100% auto; vertical-align: text-bottom; margin-left: 0.3rem; filter: invert();}

    .table-wrap.control-room .header-tr { background: #fff; padding: 0.65rem 1rem; border-bottom: 1px solid #ccc; }
    .table-wrap.control-room .header-tr .header-th { flex:1; font-size: 0.7rem; color:rgba(0, 0, 10, 0.6); }
    .table-wrap.control-room .header-tr .header-th.mobile-hide { display: none;}
    .table-wrap.control-room .body-tr { padding: 0 1rem; border-bottom: 0; align-items: stretch; }
    .table-wrap.control-room .body-tr .body-td { font-size:0.65rem; padding-top:1.5rem; display: flex; align-items: flex-start; justify-content: center; }

    .table-wrap.control-room .header-tr .header-th:nth-of-type(5),
    .table-wrap.control-room .header-tr .header-th:nth-of-type(7),
    .table-wrap.control-room .header-tr .header-th:nth-of-type(8),
    .table-wrap.control-room .header-tr .header-th:nth-of-type(9) { display: none;}

    .table-wrap.control-room .body-tr .body-td:nth-of-type(5),
    .table-wrap.control-room .body-tr .body-td:nth-of-type(7),
    .table-wrap.control-room .body-tr .body-td:nth-of-type(8),
    .table-wrap.control-room .body-tr .body-td:nth-of-type(9) { display: none;}

    .table-wrap.control-room .header-tr .header-th .tablet-only { display: inline-block; }
    .table-wrap.control-room .body-tr .body-td .tablet-only { display:  inline-block; }
    .table-wrap.control-room .header-tr .header-th .pc-only { display: none; }
    .table-wrap.control-room .body-tr .body-td .pc-only { display: none; }

    .table-wrap.control-room .header-tr .header-th.mobile-only { display: inline-block; flex:0.3; }
    .table-wrap.control-room .body-tr .body-td.mobile-only { flex:0.3; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; }
    .table-wrap.control-room .body-tr .body-td .td-data span.v-time { padding:0.4rem 0.5rem; margin-top: -0.2rem;}

    .table-wrap.control-room .body-tr .body-td.mobile-only .dot-circle { display: inline-block; width:1rem; height: 1rem; border-radius: 1rem; background: #7a66fc; border:5px solid #cac1ff; position: relative; }
    .table-wrap.control-room .body-tr .body-td.mobile-only .dot-circle:after { display: block; content: ''; width:1px; height: 100vh; background: #cac1ff; position: absolute; top:0.7rem; left:50%; transform: translateX(-50%); }
    .table-wrap.control-room .body-tr .body-td.mobile-only .dot-circle:before { display: block; content: ''; width:1px; height: 100vh; background: #cac1ff; position: absolute; bottom:0.7rem; left:50%; transform: translateX(-50%); }
    .table-wrap.control-room .body-tr:first-of-type > .body-td:first-of-type > .dot-circle:before { display: none;}

    section.tablet-parking { display: block;}
    section.tablet-parking .table-wrap { margin:0; border:0; }
    .header-title-parking { width:100%; background: #00000a; padding: 0.8rem 1rem; display: flex; justify-content: space-between; color:#fff; align-items: center; }
    .header-title-parking > span { color: #fff; font-size: 0.8rem; font-weight: 600; }
    
    .t-paging { font-size: 0.7rem; display: flex; align-items: center; gap:0.3rem; color:#aaa; }
    .t-paging .on { color:#fff; font-weight: 700;} 
    .t-paging .m-prev { display: inline-block; width:1rem; height: 1rem; background: url('../images/visit/icon-arrow.png') no-repeat center / 100% auto; cursor: pointer; }
    .t-paging .m-next { display: inline-block; width:1rem; height: 1rem; background: url('../images/visit/icon-arrow.png') no-repeat center / 100% auto; cursor: pointer; transform: rotate(180deg); }

    .parking-wrap { display: flex; flex-wrap: wrap; padding:1rem 0; }
    .parking-wrap .p-item { width:50%; display: flex; padding: 1rem; }
    .parking-wrap .p-item:nth-child(odd) { border-right: 1px solid #ccc; }
    .parking-wrap .p-item .p-left { display: flex; flex-direction: column; width:50%; }
    .parking-wrap .p-item .p-left span:nth-of-type(1) { font-size: 0.6rem; font-weight: 700; color: rgba(0, 0, 10, 0.3); padding:0.2rem; } 
    .parking-wrap .p-item .p-left span:nth-of-type(2) { font-size: 0.7rem; font-weight: 800; color: #00000a; padding:0.2rem; } 
    .parking-wrap .p-item .p-right { display: flex; flex-direction: column; width:50%; text-align: right; align-items: flex-end;}
    .parking-wrap .p-item .p-right span:nth-of-type(1) { font-size: 0.6rem; font-weight: 700; color: rgba(0, 0, 10, 0.3); padding:0.2rem; } 
    .parking-wrap .p-item .p-right span:nth-of-type(2) { font-size: 0.7rem; font-weight: 700; color: #00000a; padding:0.2rem; } 

    .body-wrap { height: 25rem; overflow: auto; }
    .footer-btn-wrap { gap:0; }
}

@media screen and (max-width: 576px) {
    html, body{
        font-size: 18px;
    }

    .wrap.login main { margin-top: 1.5rem;}
    .wrap.login main .main-wrap p span { display: block; }
    .wrap.login main .main-wrap h1 { font-size: 1.2rem;}

    .wrap.completion .main-wrap p span { display: block; }
    .wrap.completion .main-wrap h1 { font-size: 1.2rem; }
    .comp-icon { display: block; width: 3rem; height: 3rem; }
    
    .main-wrap > h1 { font-size: 1.2rem;}
    .main-wrap > div > h1 { font-size: 1.2rem; }

    header.control-room .header-wrap { width: calc(100% - 3.2rem); }
    
    .header-wrap .top-back { display: inline-block; width:1rem; height: 1rem; background: url('../images/visit/btn-back.png') no-repeat center / 70% auto; }
    .bottom-btn-wrap { display: flex; width: calc(100% + 3.2rem); margin-left: -1.6rem; }
    .form-wrap { flex-direction: column; }
    .input-form.date-pick { width:100%; }
    .header-tr { display: none;}
    .header-tr.a1 { display: none;}

    .body-tr { display: block; padding: 1rem 0; }
    .body-tr .body-td { display: flex; justify-content: space-between; padding:0.3rem 0; font-size: 0.7rem;}
    .body-tr .body-td .th-title { display: flex; align-items: center; font-size: 0.7rem; font-weight: 600; color:rgba(0, 0, 10, 0.6); text-align: left;}
    .body-tr .body-td.data-none { padding:0.3rem 0; display: flex; justify-content: center; }

    .table-wrap.control-room .body-tr { display: flex;}
    .table-wrap.control-room .body-tr .body-td:nth-of-type(3),
    .table-wrap.control-room .body-tr .body-td:nth-of-type(4),
    .table-wrap.control-room .body-tr .body-td:nth-of-type(6) { display: none;}
    .table-wrap.control-room .body-tr .body-td { justify-content: flex-start; }
    .table-wrap.control-room .body-tr .body-td .td-data { display: flex; justify-content: flex-start; align-items: flex-start; }
    .table-wrap.control-room .body-tr .body-td .td-data .mobile-only { text-align: left; display: flex; flex-direction: column; gap:0.3rem;  margin-top:0.5rem; margin-left: 0.5rem; }
    .table-wrap.control-room .body-tr .body-td .td-data .mobile-only .m-person { font-weight: 800; font-size: 0.8rem; margin-bottom: 0.2rem;}
    .table-wrap.control-room .body-tr .body-td .td-data .mobile-only .m-com { font-weight: 600; font-size: 0.7rem; }
    .table-wrap.control-room .body-tr .body-td .td-data .mobile-only .m-com .sl{ padding:0 0.5rem;}
    .table-wrap.control-room .body-tr .body-td .td-data .mobile-only .m-phone { font-weight: 600; font-size: 0.7rem; margin-bottom: 0.7rem; }

    .table-wrap.control-room .body-tr .body-td .td-data .v-time { margin-top: -0.2rem; }
    .table-wrap.control-room .body-tr .body-td.mobile-only { align-items: flex-start; flex:0.3; }

    .table-wrap.control-room .body-tr.disabled .body-td:nth-of-type(2) .mobile-only .m-com,
    .table-wrap.control-room .body-tr.disabled .body-td:nth-of-type(2) .mobile-only {  color:#ccc; pointer-events: none;  } 

    .parking-wrap .p-item { width:100%; border-bottom: 1px dashed #ddd; }
    .parking-wrap .p-item:nth-child(odd) { border-right: 0; }

    .pop { maX-width: auto; min-height: auto; background: #f5f5f8; 
        position: relative; z-index: 5001; padding:1.5rem; display: flex; flex-direction: column; justify-content: space-between; 
        /* width:calc(100% - 2rem); height:calc(100% - 2rem);  */
        width:100%; height: 100%; }
    .labtop-box-wrap { display: block; }
    .labtop-box-wrap .labtop-item { width:100%; margin-bottom: 1rem;}
    .labtop-box-scroll { max-height: 12.5rem; overflow: auto; }

    video { width: calc(100% + 3rem); margin-left: -1.5rem;  }
    input.n-input.m-size { width: 6rem; margin:0; }
    .td-data input[type="checkbox"].checkbox-btn + label:before { margin:0; }

}
@media screen and (max-width: 500px) {
    .main-wrap.mobile{
        font-size: 18px;
    }
    .main-wrap.mobile > h1 {
        font-size: 1.3rem;
    }
    .main-wrap.mobile > p {
        font-size: 1em;
    }
    .main-wrap.mobile .section > h2 {
        font-size: 1.4em;
    }
    .main-wrap.mobile .section-body > h3 {
        font-size: 1em;
    }
    .main-wrap.mobile .section-body > h4 {
        font-size: 1em;
    }
    .main-wrap.mobile .section-body > p {
        font-size: 0.9em;
    }
    .main-wrap.mobile .check-box-long-w .chkbox-text {
        font-size: 1em;
    }
    .main-wrap.mobile .label-text-01 {
        font-size: 0.8em;
    }
    .main-wrap.mobile .footer-btn-wrap {
        height: 60px;
    }
    .footer-btn-wrap{
        max-height: 60px;
        min-height: 42px;
        height: 12vw;
    }
    .footer-btn-wrap .btn-01{
        font-size: 1rem;
    }
}
@media screen and (max-width: 420px) {
    .main-wrap.mobile{
        font-size: 17px;
    }
    .footer-btn-wrap .btn-01{
        font-size: .8rem;
    }
}
@media screen and (max-width: 390px) {
    .main-wrap.mobile{
        font-size: 16px;
    }
}
@media screen and (max-width: 360px) {
    .main-wrap.mobile{
        font-size: 14px;
    }
}