/**********************************************************************************************
 * 파일명: play.css
 * 저작권:
 *     NOWC-2026-SWAYEDUNET-A7D4C9
 *     © 나우컴퍼니(NOWCOMPANY) | https://nowcompany.kr
 *     All rights reserved.
 **********************************************************************************************/

@media screen and (min-width: 1281px) {
    /* min-width: 1001px -> 1281px 변경 */
    .time_sub_container {
        background-color: #f7f7f7;
    }
    .time_sub_container .time_sub_menu {
        padding: 0 30px 0 60px;
        height: 55px;
        line-height: 55px;
        white-space: nowrap;overflow: hidden;
        text-overflow: ellipsis;cursor:pointer
    }

    .time_sub_container .time_sub_menu.time_item_menu.status1{
        background-image: url('ico_attd_2.png');  background-repeat:no-repeat; background-position:  23px 17px;
    }
    .time_sub_container .time_sub_menu.time_item_menu.status2{
        background-image: url('ico_img_2.png');  background-repeat:no-repeat; background-position:  23px 17px;
    }
    .time_sub_container .time_sub_menu.time_item_menu.status3{
        background-image: url('ico_none_2.png'); background-repeat:no-repeat; background-position:  23px 17px;
    }
    .time_sub_container .time_sub_menu.time_item_menu.status4{
        background-image: url('ico_late_2.png'); background-repeat:no-repeat; background-position:  23px 17px;
    }
    .time_sub_container .time_sub_menu.time_sub_item_menu.status1{
        background-image: url('ico_attd_2.png');  background-repeat:no-repeat; background-position: 29px 19px; background-size:16px 16px;
    }
    .time_sub_container .time_sub_menu.time_sub_item_menu.status2{
        background-image: url('ico_img_2.png'); background-repeat:no-repeat; background-position: 29px 19px; background-size:16px 16px;
    }
    .time_sub_container .time_sub_menu.time_sub_item_menu.status3{
        background-image: url('ico_none_2.png'); background-repeat:no-repeat; background-position: 29px 19px; background-size:16px 16px;
    }
    .time_sub_container .time_sub_menu.time_sub_item_menu.status4{
        background-image: url('ico_late_2.png'); background-repeat:no-repeat; background-position: 29px 19px; background-size:16px 16px;
    }
    .time_sub_container .time_sub_menu.on {
        background-color: #e8e8e8;
    }
    .time_sub_container .time_sub_menu.time_sub_item_menu.on {
        background-color: #eeeeee;
    }
    .time_sub_container .time_sub_menu span {
        line-height: 55px;
        float: right;
    }

    .play_nav {height: 55px;border: 1px solid #303030;background-color: #303030;border-radius: 0px 0px 4px 4px;}
    .play_nav .play_name {line-height: 55px}
    .play_nav .nav_btn_group {position: relative;padding: 0 30px;height: 20px;text-align: center;margin: 18px 0;}
    .play_nav .nav_btn_group img {margin-top:4px;vertical-align: middle}
    .play_nav .nav_btn_group span {display: inline-block;height: 100%;line-height: 20px;}
    .play_nav .nav_btn_group span.left {font-size:18px; color: #fff;margin-left: 10px;padding-right:30px;border-right: 1px solid #6f6f6f;cursor:pointer;display: inline-flex; align-items: center;}
    .play_nav .nav_btn_group span.left .svg-icon.left{background-color: #ddd;}
    .play_nav .nav_btn_group span.right {font-size:18px; color: #fff;margin-right: 10px;padding-left:30px;border-left: 1px solid #6f6f6f;cursor:pointer;display: inline-flex; align-items: center;}
    .play_nav .nav_btn_group span.right .svg-icon.right{background-color: #ddd;}
    .play_nav .nav_btn_group .current_point {font-size:18px; display: inline-block;color: #ddd}

    .location {
        height: 55px;
        line-height: 55px;
        background-color: #ffffff;
        padding: 0 20px;
        
        border-bottom: 1px solid #dadada;
        font-size: 15px;
    }

}

@media screen and (min-width: 768px) and (max-width: 1280px) {

    .play_nav {height: 55px;background-color: #303030; border: 1px solid #303030; position: relative; text-align: center;border-radius: 0px 0px 4px 4px;}
    .play_nav .play_name { line-height: 55px;}
    .play_nav .nav_btn_group {position: relative;padding: 0 30px;height: 20px;text-align: center;margin: 18px 0;}
    .play_nav .nav_btn_group img {margin-top:4px;vertical-align: middle}
    .play_nav .nav_btn_group span {display: inline-block;height: 100%;line-height: 20px;}
    .play_nav .nav_btn_group span.left {font-size: 18px;color: #fff;margin-left: 10px; padding-right: 30px;border-right: 1px solid #6f6f6f;cursor: pointer;display: inline-flex;align-items: center;}
    .play_nav .nav_btn_group span.left .svg-icon.left{background-color: #ddd;}
    .play_nav .nav_btn_group span.right {font-size: 18px;color: #fff; margin-right: 10px;padding-left: 30px;border-left: 1px solid #6f6f6f; cursor: pointer;display: inline-flex;align-items: center;}
    .play_nav .nav_btn_group span.right .svg-icon.right{background-color: #ddd;}
    .play_nav .nav_btn_group .current_point {display: inline-block; color: #ddd;}
   
    .location {
        height: 55px;
        line-height: 55px;
        background-color: #ffffff;
        padding: 0 20px;
        
        border-bottom: 1px solid #dadada;
        font-size: 15px;
    }
    
    .time_sub_container {background-color: #ededed}
    .time_sub_container .time_sub_menu {overflow: hidden;padding: 10px 30px 10px 57px;line-height: 24px;cursor: pointer;white-space: nowrap;text-overflow: ellipsis;}
    .time_sub_container .time_sub_menu span {float: right;line-height: 55px;}
    .time_sub_container .time_sub_menu .during_time {height: 12px;margin-top:5px;font-size: 12px;color: #b0b0b0;line-height: 12px;}
    .time_sub_container .time_sub_menu.time_item_menu.status1{
        background-image: url('ico_attd_2.png');  background-repeat:no-repeat; background-position:  23px 14px;
    }
    .time_sub_container .time_sub_menu.time_item_menu.status2{
        background-image: url('ico_img_2.png');  background-repeat:no-repeat; background-position:  23px 14px;
    }
    .time_sub_container .time_sub_menu.time_item_menu.status3{
        background-image: url('ico_none_2.png'); background-repeat:no-repeat; background-position:  23px 14px;
    }
    .time_sub_container .time_sub_menu.time_item_menu.status4{
        background-image: url('ico_late_2.png'); background-repeat:no-repeat; background-position:  23px 14px;
    }
    .time_sub_container .time_sub_menu.time_sub_item_menu.status1{
        background-image: url('ico_attd_2.png');  background-repeat:no-repeat; background-position:33px 15px; background-size:16px 16px;
    }
    .time_sub_container .time_sub_menu.time_sub_item_menu.status2{
        background-image: url('ico_img_2.png'); background-repeat:no-repeat; background-position:33px 15px;background-size:16px 16px;
    }
    .time_sub_container .time_sub_menu.time_sub_item_menu.status3{
        background-image: url('ico_none_2.png'); background-repeat:no-repeat; background-position:33px 15px;background-size:16px 16px;
    }
    .time_sub_container .time_sub_menu.time_sub_item_menu.status4{
        background-image: url('ico_late_2.png'); background-repeat:no-repeat; background-position:33px 15px;background-size:16px 16px;
    }
}

@media screen and (max-width: 767px) {

    .play_nav {height: 55px;background-color: #303030; border: 1px solid #303030; position: relative; text-align: center;border-radius: 0px 0px 4px 4px;}
    .play_nav .play_name { line-height: 55px;}
    .play_nav .nav_btn_group {position: relative;padding: 0 30px;height: 20px;text-align: center;margin: 18px 0;}
    .play_nav .nav_btn_group img {margin-top:4px;vertical-align: middle}
    .play_nav .nav_btn_group span {display: inline-block;height: 100%;line-height: 20px;}
    .play_nav .nav_btn_group span.left {font-size: 18px;color: #fff;margin-left: 10px; padding-right: 30px;border-right: 1px solid #6f6f6f;cursor: pointer;display: inline-flex;align-items: center;}
    .play_nav .nav_btn_group span.left .svg-icon.left{background-color: #ddd;}
    .play_nav .nav_btn_group span.right {font-size: 18px;color: #fff; margin-right: 10px;padding-left: 30px;border-left: 1px solid #6f6f6f; cursor: pointer;display: inline-flex;align-items: center;}
    .play_nav .nav_btn_group span.right .svg-icon.right{background-color: #ddd;}
    .play_nav .nav_btn_group .current_point {display: inline-block; color: #ddd;}
    
    .location {
        height: 55px;
        line-height: 55px;
        background-color: #ffffff;
        padding: 0 20px;
        border-bottom: 1px solid #dadada;
    }

    .time_sub_container {
        background-color: #e8e8e8;
    }
    .time_sub_container .time_sub_menu {
        padding: 10px 30px 10px 65px;
        font-size:13px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .time_sub_container .time_sub_menu span {
        line-height: 55px;
        float: right;
    }
    .time_sub_container .time_sub_menu .during_time {
        margin-top:5px;
        font-size: 12px;
        color: #b0b0b0;
        height: 12px;
        line-height: 12px;
    }


    .time_sub_container .time_sub_menu.time_item_menu.status1{
        background-image: url('ico_attd_2.png');  background-repeat:no-repeat; background-position:  23px center;
    }
    .time_sub_container .time_sub_menu.time_item_menu.status2{
        background-image: url('ico_img_2.png');  background-repeat:no-repeat; background-position:  23px center;
    }
    .time_sub_container .time_sub_menu.time_item_menu.status3{
        background-image: url('ico_none_2.png'); background-repeat:no-repeat; background-position:  23px center;
    }
    .time_sub_container .time_sub_menu.time_item_menu.status4{
        background-image: url('ico_late_2.png'); background-repeat:no-repeat; background-position:  23px center;
    }

    .time_sub_container .time_sub_menu.time_sub_item_menu.status1{
        background-image: url('ico_attd_2.png');  background-repeat:no-repeat; background-position: 29px center; background-size:16px 16px;
    }
    .time_sub_container .time_sub_menu.time_sub_item_menu.status2{
        background-image: url('ico_img_2.png'); background-repeat:no-repeat; background-position: 29px center; background-size:16px 16px;
    }
    .time_sub_container .time_sub_menu.time_sub_item_menu.status3{
        background-image: url('ico_none_2.png'); background-repeat:no-repeat; background-position: 29px center; background-size:16px 16px;
    }
    .time_sub_container .time_sub_menu.time_sub_item_menu.status4{
        background-image: url('ico_late_2.png'); background-repeat:no-repeat; background-position: 29px center; background-size:16px 16px;
    }
}

@media screen and (max-width:1364px){
    
	.player {
    	width:100% !important;max-width:1024px !important
    }
    .player > div {
    	width:100% !important;max-width:1024px !important;
    }
}

@media screen and (min-width: 1281px) {

    .player .answer_list {
        border: 1px solid #003679;
        padding: 20px;
        margin-top: 15px;
        display: none;
    }

    .player .answer_list p {
        line-height: 24px;
    }

}

@media screen and (min-width: 768px) and (max-width: 1280px) {

    .player .answer_list {
        display: none;
        margin: 20px 0 20px;
        padding: 20px;
        border: 1px solid #003679;
    }

    .player .answer_list p {
        line-height: 24px;
    }

}

@media screen and (max-width: 767px) {

    .player .answer_list {
        display: none;
        margin: 20px 0 20px;
        padding: 20px;
        border: 1px solid #003679;
    }

    .player .answer_list p {
        line-height: 24px
    }
}
