@font-face {
    font-family: 'IBMPlexSansKR-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
*{
    margin:0px;padding:0px; 
    word-break:keep-all;
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
}
body{
    background-color:#EEE;
    text-align:center;
}
.loginBox{
    border:1px solid #BBB;
    border-radius: 5px;;
    max-width:600px;
    margin:0 auto;
    padding:30px 15px;
    font:400 14px IBMPlexSansKR-Regular;
    color:#555;
}
.loginBox input{
    padding:10px;
    width:calc(100% - 100px);
    border:1px solid #BBB;
    margin-top:-1px;
}
.loginBox button{
    width:calc(100% - 40px);
    border:0px;
    background:#396;
    color:white;
    font:900 20px IBMPlexSansKR-Regular;
    padding:10px 0px;
    margin:20px 0 0 0;
    border-radius: 10px;
}
#bodyWrap{
    max-width:1280px;
    margin:0 auto;
}
.interactiveBlcok{
}
.pageTitle{
    color:#396;
    font:800 30px 'IBMPlexSansKR-Regular';
    line-height: 100%;
    
}
.txtBtn{
    background:#EEE;
    border-radius:25px;
    border:0;
    padding:12px 20px;
    box-shadow:2px 2px 2px 2px #CCC,-2px -2px 2px 2px #FFF;
    color:#555;
    font:800 20px 'IBMPlexSansKR-Regular';
    margin:0 0 10px 0;
}
#videoWindow{
    position:relative;
    background:#000;
    width:100%;
    max-width:704px;
    height:54vw;
    margin:0 auto;
    border-radius:25px;
    overflow:hidden;
    box-shadow:-2px -2px 1px 1px #FFF,2px 2px 1px 1px #777;
}
#playBtn{
    color:white;
    position:absolute;
    background:#396;
    border-radius:5px;
    padding:5px 20px;
    transform:translate(-50%,-50%);
    top:50%;
    left:50%;
}
#blind{
    background:rgba(0,0,0,0.7);
    position:absolute;
    width:100%;
    height:calc(100% - 10px);  /*재생버튼의 폰트크기에 따라 마이너스 처리 필요*/
}
#lockTime{
    border:1px solid #BBB;
    border-radius:5px;
    padding:5px;
}
#userInfo{
    width:300px;
    margin:0 auto;
    font:400 14px 'IBMPlexSansKR-Regular';
}
#userInfo > div{
    width:100px;
    float:left;
    text-align:right;
}
#userInfo > input{
    width:160px;
    padding:4px;
    margin:0 0 10px 0;
    border:1px solid #CCC;
    border-radius:5px;
}
table{
    font-family: 'IBMPlexSansKR-Regular';
    border-collapse: collapse;
    margin:0 auto;
    border:1px solid #CCC;
    width:100%;
}
th,td{
    border-bottom:1px solid #DDD;
    padding:8px;
    font-size:13px;
}
th{
    background:#E5E5E5;
}
tr:nth-child(even){
    background:#F7F9FC;
}
@media(min-width:480px){

    
}
@media(min-width:720px){
    #videoWindow{
        max-height: 390px;
    } 
}
@media(min-width:960px){
    .interactiveBlock{
        width:50%;
        float:left;
    }
    #videoWindow{
        height:28vw;
    }
}
@media(min-width:1280px){
    #videoWindow{
        max-height: 360px;
    } 
}