.wrap { width:100%;height:auto;min-height:100%;position:relative;background:#fff;padding:0px;margin:0px;padding-top:43px;padding-bottom:0px; }
header { width:300px;height:43px;position:fixed;top:0px;left:0px;border-bottom:1px solid #dadada;background:white; }
header .logo { width:83px;height:28px;background:url('./img/logo.png') no-repeat;background-size:100% 100%;position:absolute;left:16px;top:7px;display:block; }

.header_nav { width:300px;height:43px;float:left;border-right:1px solid #dadada;position:relative; }
.header_nav .book { width:16px;height:18px;background:url('./img/book.svg') no-repeat;background-size:100% 100%;cursor:pointer;border:none;position:Absolute;right:17px;top:12px; }

header.vod { width:100%;height:43px;position:fixed;top:0;left:0;border-bottom:1px solid #dadada;background:white; }
header.vod .options { width:auto;display:inline-block;height:43px;float:left; }
/*
header .option_button { width:50px;height:43px;border:none;border-right:1px solid #dadada;cursor:pointer;float:left;background:url('./img/toggle_icon.png') no-repeat;background-position:center center; }
header .option_button2.ac { width:50px;height:43px;border:none;border-right:1px solid #dadada;cursor:pointer;float:left;background:url('./img/icon.png') no-repeat;background-position:center center; }
header .option_button2 { width:50px;height:43px;border:none;border-right:1px solid #dadada;cursor:pointer;float:left;background:url('./img/icon_dimed.png') no-repeat;background-position:center center; }
header .option_button3 { width:50px;height:43px;border:none;border-right:0px solid #dadada;cursor:pointer;float:left;background:url('./img/disk.png') no-repeat;background-position:center center; }
header .option_button4 { width:50px;height:43px;border:none;border-right:0px solid #dadada;cursor:pointer;float:left;background:url('./img/print.png') no-repeat;background-position:center center; }
*/

nav { background:white;width:300px;height:calc( 100% - 43px - 32px);top:43px;left:0px;position:fixed;border-right:1px solid #dadada; }
nav.ac { background:white;width:300px;height:calc( 100% - 43px - 32px);top:43px;left:0px;position:fixed;border-right:1px solid #dadada; }
nav .meta { height:59px;border-bottom:1px solid #dadada;line-height:58px;padding-left:17px;font-size:16px;font-weight:700;color:#363636;position:relative; }
nav .meta .x { width:45px;height:30px;border:1px solid #dadada;position:absolute;right:12px;top:14px;cursor:pointer;background:white url('./img/x.png') no-repeat;background-position:center center; }
nav .title { width:100%;height:43px;border-bottom:1px solid #dadada;padding-left:16px;font-size:14px;font-weight:700;color:#363636;line-height:41px;background:#f4f4f4; }
nav .content { width:100%;background:white;border-bottom:1px solid #dadada;font-size:14px;font-weight:400;color:#363636;line-height:25px;position:relative; overflow-wrap: break-word; word-break: break-all;  padding: 8px 70px 8px 16px; /* line-height:41px; height:43px; padding-left:16px; */ }
nav .content a { display:block;width:59px;height:20px;line-height:18px;border:1px solid #dadada;text-align:center;font-size:11px;font-weight:500;color:#363636;position:absolute;right:7px;top:50%;margin-top:-10px; }
nav .nav_ovf { width:100%;height:calc( 100% - 59px );overflow:auto;position:relative; }
nav .content_click { width:100%;background:white;border-bottom:1px solid #dadada;font-size:14px;font-weight:400;color:#363636;position:relative; overflow-wrap: break-word; word-break: break-all; line-height:25px; padding: 8px 70px 8px 16px; /*height:43px; line-height:41px; padding-left:16px; cursor:pointer;*/ }
nav .content_click a { display:block;width:59px;height:20px;line-height:18px;border:1px solid #dadada;text-align:center;font-size:11px;font-weight:500;color:#363636;position:absolute;right:7px;top:50%;margin-top:-10px; }
nav .content_click b { font-size:14px;font-weight:700;color:#363636;margin-right:10px; }
nav .content_click.ac { background: #DEEBF7; }
nav .pagination { width:100%;height:76px;text-align:center;padding-top:15px; }
nav .pagination a { background: #FFFFFF;border: 1px solid #DADADA;border-radius: 2px;width:30px;height:30px;text-align:Center;line-height:28px;font-size:14px;font-weight:500;color:#363636;margin-left:1px;margin-right:1px;display:inline-block;vertical-align:top; }
nav .pagination a.left { background:white url('./img/left.png') no-repeat;background-position:center center; }
nav .pagination a.right { background:white url('./img/right.png') no-repeat;background-position:center center; }
nav .pagination a.ac { border-color:#f79f1a;background:#f79f1a;color:White; }

.vod_contents { width:calc( 100% - 300px );right:0px;height:calc( 100% - 43px - 32px - 282px );bottom:calc( 282px + 32px );background:#e9eaed;overflow:auto;position:fixed; display: flex; justify-content: center; align-items: center; }
.vod_caption { height:282px;width:calc( 100% - 300px );right:0px;bottom:32px;background:white;padding:19px;overflow:Auto;font-size:15px;font-weight:400;line-height:18px;text-align:left;position:fixed;border-top:1px solid #dadada; }
.img_contents { top:0; right:0; width:calc( 100% - 300px ); height:calc( 100% - 32px); bottom:calc( 32px ); background:#e9eaed;overflow:auto;position:fixed;  }

footer { width:100%;height:32px;text-align:center;color:white;background:#333;position:fixed;bottom:0px;left:0px;font-size:11px;font-weight:400;line-height:32px; }

.not_mobile { display:block; }
.on_mobile { display:none; }

@media all and (max-width: 700px) {
    body { overflow:hidden; }

    .wrap { width:100%;height:auto;min-height:100%;position:relative;background:#fff;padding:0px;margin:0px;padding-top:43px;padding-bottom:0px; }
    header { width:100%;height:43px;position:fixed;top:0px;left:0px;border-bottom:1px solid #dadada;background:white;z-index:999; }
    header .logo { width:83px;height:28px;background:url('./img/logo.png') no-repeat;background-size:100% 100%;position:absolute;left:16px;top:7px;display:block; }
    header .options { width:100%;display:inline-block;height:43px;float:left;background:white;border-bottom:1px solid #d4d4d4;border-top:1px solid #d4d4d4; }

    /*
    header .option_button { width:50px;height:43px;border:none;border-right:1px solid #dadada;cursor:pointer;float:left;background:url('./img/toggle_icon.png') no-repeat;background-position:center center; }
    header .option_button2.ac { width:50px;height:43px;border:none;border-right:0px solid #dadada;cursor:pointer;float:left;background:url('./img/icon.png') no-repeat;background-position:center center; }
    header .option_button2 { width:50px;height:43px;border:none;border-right:0px solid #dadada;cursor:pointer;float:left;background:url('./img/icon_dimed.png') no-repeat;background-position:center center; }
    header .option_button3 { width:50px;height:43px;border:none;border-right:0px solid #dadada;cursor:pointer;float:left;background:url('./img/disk.png') no-repeat;background-position:center center; }
    header .option_button4 { width:50px;height:43px;border:none;border-right:0px solid #dadada;cursor:pointer;float:left;background:url('./img/print.png') no-repeat;background-position:center center; }
    header .option_select { width:78px;height:30px;border-radius:2px;border:1px solid #dadada;padding-left:11px;font-size:12px;font-weight:bold;background:white url('./img/sl.png') no-repeat;background-position:right center;vertical-align:middle;margin-top:4px;float:left; }
    header .option_button5 { width:50px;height:43px;border:none;border-right:0px solid #dadada;cursor:pointer;float:left;background:url('./img/icon_mob_01.png') no-repeat;background-position:center center; }
    header .option_button6 { width:50px;height:43px;border:none;border-right:0px solid #dadada;cursor:pointer;float:left;background:url('./img/icon_mob_02.png') no-repeat;background-position:center center; }
    header .option_button7 { width:50px;height:43px;border:none;border-right:0px solid #dadada;cursor:pointer;float:left;background:url('./img/icon_mob_03.png') no-repeat;background-position:center center; }
    header .option_button8 { width:50px;height:43px;border:none;border-right:0px solid #dadada;cursor:pointer;float:left;background:url('./img/icon_mob_04.png') no-repeat;background-position:center center; }
    */

    .header_nav .book { width:16px;height:18px;background:url('./img/book.svg') no-repeat;background-size:100% 100%;cursor:pointer;border:none;position:Absolute;right:17px;top:12px; }
    .header_nav { width:100%;height:43px;float:left;border-right:1px solid #dadada;position:relative;background:white; }

    nav { background:white;width:100%;height:calc( 100% - 43px );top:44px;left:-100%;position:fixed;border-right:1px solid #dadada;z-index:9999 }
    nav.ac { background:white;width:100%;height:calc( 100% - 43px );top:44px;left:0px;position:fixed;border-right:1px solid #dadada;z-index:9999; }
    nav .meta { height:59px;border-bottom:1px solid #dadada;line-height:58px;padding-left:17px;font-size:16px;font-weight:700;color:#363636;position:relative; }
    nav .meta .x { width:45px;height:30px;border:1px solid #dadada;position:absolute;right:12px;top:14px;cursor:pointer;background:white url('./img/x.png') no-repeat;background-position:center center; }
    nav .title { width:100%;height:43px;border-bottom:1px solid #dadada;padding-left:16px;font-size:14px;font-weight:700;color:#363636;line-height:41px;background:#f4f4f4; }
    nav .content { width:100%;background:white;border-bottom:1px solid #dadada;font-size:14px;font-weight:400;color:#363636;line-height:25px;position:relative; overflow-wrap: break-word; word-break: break-all;  padding: 8px 70px 8px 16px; /* line-height:41px; height:43px; padding-left:16px; */ }
    nav .content a { display:block;width:59px;height:20px;line-height:18px;border:1px solid #dadada;text-align:center;font-size:11px;font-weight:500;color:#363636;position:absolute;right:17px;top:50%;margin-top:-10px; }
    nav .nav_ovf { width:100%;height:calc( 100% - 59px );overflow:auto;position:relative; }
    nav .content_click { width:100%;background:white;border-bottom:1px solid #dadada;font-size:14px;font-weight:400;color:#363636;position:relative; overflow-wrap: break-word; word-break: break-all; line-height:25px; padding: 8px 70px 8px 16px; /*height:43px; line-height:41px; padding-left:16px; cursor:pointer;*/}
    nav .content_click b { font-size:14px;font-weight:700;color:#363636;margin-right:10px; }
    nav .content_click.ac { background: #DEEBF7; }
    nav .pagination { width:100%;height:76px;text-align:center;padding-top:15px; }
    nav .pagination a { background: #FFFFFF;border: 1px solid #DADADA;border-radius: 2px;width:30px;height:30px;text-align:Center;line-height:28px;font-size:14px;font-weight:500;color:#363636;margin-left:1px;margin-right:1px;display:inline-block;vertical-align:top; }
    nav .pagination a.left { background:white url('./img/left.png') no-repeat;background-position:center center; }
    nav .pagination a.right { background:white url('./img/right.png') no-repeat;background-position:center center; }
    nav .pagination a.ac { border-color:#f79f1a;background:#f79f1a;color:White; }

    .vod_contents { width:calc( 100% - 0px );right:0px;height:calc( 100% - 43px - 32px - 282px );bottom:calc( 282px + 32px );background:#e9eaed;overflow:auto;position:fixed; display: flex; justify-content: center; align-items: center; }
    .vod_caption { height:282px;width:calc( 100% - 0px );right:0px;bottom:32px;background:white;padding:19px;overflow:Auto;font-size:15px;font-weight:400;line-height:18px;text-align:left;position:fixed;border-top:1px solid #dadada; }
    .img_contents { top:43px; right:0; width:calc( 100% - 0px ); height:calc( 100% - 43px - 32px ); bottom:calc( 32px );background:#e9eaed;overflow:auto;position:fixed;  }

    .not_mobile { display:none; }
    .on_mobile { display:block; }
    footer { width:100%;height:32px;text-align:center;color:white;background:#333;position:fixed;bottom:0px;left:0px;font-size:11px;font-weight:400;line-height:32px; }
}

.hide {display:none !important;}

/* streamdocs restapi 호출 시 로딩화면 */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; }
.loading-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; padding: 20px; background: white; border-radius: 10px; display: flex; justify-content: center; align-items: center; }
.main-loading-spinner { width: 40px; height: 40px; position: relative; text-align: center; animation: sk-rotate 2s infinite linear; }
.dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #ff6100; border-radius: 100%; animation: sk-bounce 2s infinite ease-in-out;}
.dot2 { top: auto; bottom: 0; background-color: #f79f1a; animation-delay: -1s; }
@keyframes sk-rotate {
    100% { transform: rotate(360deg); }
}
@keyframes sk-bounce {
    0%, 100% { transform: scale(0.0); }
    50% { transform: scale(1.0); }
}