@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

body, h1, h2, h3, h4, h5, h6, input, select, textarea, button, a, div, span, p{font-family: 'Noto Sans KR', sans-serif !important; padding:0; margin:0;}

.live-container{display:flex; flex-direction:column; height:100vh;}
.live-container .params,
#bufVideo,
#mjpegCanvas{display:none;}

.live-container .videoContainer{flex:1 0 0; width:100%; min-height:0; background-color:skyblue; position:relative;}
.live-container #subVideo,.live-container #pubVideo {width: 100%; height: 100%;}

.btn-live-group{display:flex; align-items: center; padding:15px; position:absolute; right:10px; z-index: 10;;}
.btn-switch{text-align:center;}
.btn-switch .switch { position: relative; display: inline-block; width: 55px; height: 25px; }
.btn-switch .switch input { opacity: 0; width: 0; height: 0; }
.btn-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.btn-switch .slider:before { position: absolute; content: ""; height: 7px; width: 7px; left: 4px; bottom: 4px; border:5px solid #fff; background-color: #8E8E8E; -webkit-transition: .4s; transition: .4s; }
.btn-switch input:checked + .slider { background-color: #F8444E; }
.btn-switch input:focus + .slider { box-shadow: 0 0 1px #F8444E; }
.btn-switch input:checked + .slider:before { background-color:transparent; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); }
.btn-switch .slider.round { border-radius: 34px; }
.btn-switch .slider.round:before { border-radius: 50%; }
.btn-switch .slider.round .switch-txt{font-size:12px; color:#fff; position:absolute; top:5px; -webkit-transition: .4s; transition: .4s;}
.btn-switch .slider.round .switch-txt.on{left:10px; opacity: 0;}
.btn-switch input:checked + .slider.round .switch-txt.on{opacity: 1;}
.btn-switch .slider.round .switch-txt.off{right:8px; opacity: 1;}
.btn-switch input:checked + .slider.round .switch-txt.off{opacity: 0;}
.btn-switch .txt{font-size:14px; color:#fff; margin-top:5px;}
.btn-toggle{width:110px; height:40px; line-height:38px; font-size:15px; background-color:#DC0000; color:#fff; border:1px solid #C70000; border-radius:3px; margin-left:20px; cursor:pointer;}
.btn-toggle:before{content:'';  display:inline-block; width:19px; height:14px; background:url(../img/ico_boardcast.svg) no-repeat center / 100% auto; margin-right:5px; position:relative; top:2px;}
.btn-toggle.active{background-color:#585858; border:1px solid #373A36;}
.btn-toggle:focus{outline:none;}

.live-container .coming{width:100%; height:100%; background-color:#000; position:absolute; z-index: 1;}
.live-container .coming .wrap{text-align:center; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.live-container .coming .wrap .clock,
.live-container .coming .wrap .coming-txt{font-size:24px; color:#fff;}
.live-container .coming .wrap .coming-txt{margin-top:.25em;}
.live-container .coming .wrap .btn-view{width:200px; height:50px; font-size:16px; background-color:#3FA9F5; color:#fff; border:none; margin-top:30px; cursor:pointer;}
.live-container .coming .wrap .btn-view:focus{outline:none;}
.live-container .coming .wrap .subscribe{display:inline-block; color:#fff; margin-top:10px; cursor:pointer;}
.live-container .coming .wrap .subscribe input{margin-right:10px;}