/*# sourceURL=/assets/css/kosmes.css?v=202404112 */
/*@ sourceURL=/assets/css/kosmes.css?v=202404112 */
@charset "utf-8";

/* reset */
*{ padding:0; margin:0; border:0; outline:0; vertical-align:top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
article, aside, figcaption, figure, footer, header, nav, section{ display:block; }
body{ background:#fff; overflow-x:hidden; -webkit-text-size-adjust:none; font-family:'NanumGothicWeb', sans-serif; color:#666; line-height:1.4; min-width: 280px;}
ul, ol, dl{ list-style:none; }
html, body, input, select, textarea, button, header, footer{ font-family:'NanumGothicWeb', sans-serif; font-size:13px; }
table{ border-collapse:collapse; border-spacing:0 }
td{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
input, select, textarea{ vertical-align:middle; border:0; }
label{ cursor:pointer; }
a, input, select, textarea{ text-decoration:none; }
textarea{ -webkit-overflow-scrolling:touch; }
input[type='checkbox']{ appearance:checkbox; }
input[type='text'], input[type='tel'], input[type='password'], textarea{ appearance:none; color:#666; }
input[type='text'], input[type='tel'], input[type='password']{ width:100%; }
input::placeholder{ color:#ccc; }
a:hover{ text-decoration:none; }
img{ max-width:100%; line-height:0; font-size:0; -ms-interpolation-mode:bicubic; }


/* common */
.hide-mobile{ display:none; }
.hide-pc{ display:block; }
.form_control{
    display:block;
    width:100%;
    height:40px;
	letter-spacing:-0.5px;
    padding:6px 10px;
    font-size:14px;
    line-height:1.42857143;
    color:#555;
    background-color:#fff;
    background-image:none;
    border:1px solid #ccc;
    border-radius:5px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form_control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

/* 기본 layout 설정 */
html, body{
	height:100%;
	}
#wrapper{
	min-height:100%;
	overflow:hidden;
	position:relative;
	}
header{
	}

#content{
	padding-top:20px;
	padding-bottom:30px;
	margin:0 15px;
	}
#footer{

	}


/* tablet 설정 ============== */
@media (min-width:768px){


}

/* desktop 설정 ============== */
@media (min-width:1025px){


}
/*버튼설정*/
.btn{
	font-size:13px;
	padding: 7px 10px;
    border-radius: 5px;
}
.btn.btn-download{
	color:#fff !important;
    background-color:#696969;
    border-color:#696969;
}
.btn.btn-download:active, .btn.btn-download:focus, .btn.btn-download:hover{
	color:#fff !important;
    background-color:#585858;
    border-color:#585858;
}
.btn.btn-confirm{/* 다시보기 버튼 */
	color:#fff !important;
    background-color:#033896;
    border-color:#033896;
}
.btn.btn-confirm:active, .btn.btn-confirm:focus, .btn.btn-confirm:hover{
    color:#fff !important;
    background-color:#092960;
    border-color:#092960;
}

/* header 설정 */
header{}

/* content 설정 */
#content #content_vod{}
#content .content_con{
	margin-top: 60px;
    border: 1px solid #ccc;
    padding: 0 0 120px 0px;
    box-shadow: 0 0 11px rgba(0,0,0,0.2);
	}

/* 메인 - 로그인 설정 */
#wrapper_main{}

/* 메인 - 로그인 header 설정 */
#wrapper_main header{
	height:80px;
	border-bottom:1px solid #ccc;
}
header #header_inner{
	margin:0 auto;
	max-width:1100px;
	padding: 15px 15px;
	overflow: hidden;
}
#logo{
	float:left;
}
#logo img{
	width:204px; height:51px;
}
#logo2{
	float:right;
}
#logo2 img{
	width:244px; height:51px;
}


/* 메인 - 로그인 컨텐츠 설정 */
#wrapper_main #content_con{
	overflow:hidden;
	margin:0 auto;
	padding: 90px 0 0;
	max-width:450px;
}
#login_form{
	width:450px;
}
#login_form .login_area{}
#login_form .login_area h3{
	font-size:35px;
	font-weight:bold;
	letter-spacing: -1px;
	color:#666666;
}
#login_form .login_guide{
	margin-bottom: 8px;
    font-size: 16px;
}
#login_form .form_control{
	margin-bottom:5px;
	height:55px;
	padding: 6px 10px;
	font-size:15px;
}
#login_form .btn{
	margin-bottom:5px;
	text-align:center;
	width:100%;
	height:55px;
	padding: 6px 10px;
	font-size:18px;
	border-radius:5px;
	cursor:pointer;
	line-height:42px;
	border:1px solid #004182;
	background-color:#00509F;
	color:#fff;
}
#login_form .btn:hover{
	background-color:#004182;
}
#login_customer {
	margin-top:15px;
	text-align:center;
	color:#919191;
	font-size:14px;
}

/* desktop 설정 ============== */
@media (min-width:1025px){

}


/* mobile 설정 ============== */
@media (max-width:768px){

#wrapper_main header{
	height:50px;
}
header #header_inner {
    width: 100%;
	padding:10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#logo{
}
#logo img{
	width:130px; height:33px;
}
#logo2{
}
#logo2 img{
	width:158px; height:33px;
}


/* 메인 - 로그인 컨텐츠 설정 */
#wrapper_main #content_con{
	padding: 10px 0 0;
	width:100%
}
#login_form{
    width: 100%;
}
#login_form .login_area{}
#login_form .login_area h3{
	font-size:25px;
}
#login_form .login_guide{
	margin-bottom: 8px;
    font-size: 13px;
}
#login_form .form_control {
	height: 45px;
	padding: 3px 8px;
	font-size: 14px;
}
#login_form .btn{
margin-bottom:5px;
height: 45px;
padding: 5px 8px;
font-size:16px;
border-radius:5px;
cursor:pointer;
line-height:34px;
}
#login_customer {
    margin-top: 12px;
    font-size: 13px;
}

}

@media (max-width:560px){
    .replay-button-content{
    text-align: center !important;
}
    .replay-button-content > div:first-child{
    width: 100%;
    text-align: center;
}
}
@media (max-width:320px){
    body{overflow-x: auto;}
    #wrapper_main header{display: flex; align-items: center;}
    header #header_inner{padding: 0 0 0 5px;}
    #logo, #logo2{float:none; width: 46%;}
	#logo img, #logo2 img{display: block; width:100%; height:auto; vertical-align: middle;}

    .vod_header{display: flex; align-items: center; justify-content: space-between;}
    .replay-button-content{text-align: center;}
    .replay-button-content .btn{max-width: 100%;}
}
/* Live 페이지 *******************************************/

#wrapper_room{
    min-height: 600px;
	overflow: hidden;
	position: relative;
	}
#wrapper_room header{
    padding:0 15px;
    background-color:#f5f5f5;
}
#wrapper_room header #header_inner{
	width:100%;
	padding:10px 15px;
}

/* 사용자 정보 설정 */
.user_info{
	float:right;
}
.user_info .user_name{
	font-weight:bold;
	font-size:12px;
}
.user_info .user_email{
	color:#7a7a7a;
	font-size:12px;
}
.user_info .btn_logout{
	background: #6F6F6F;
    border: 1px solid #575757;
    color: #ffffff;
    font-size: 12px;
    padding: 2px 6px;
	margin-left:5px;
    letter-spacing: -0.5px;
}

/* content 설정 */
 #content_vod{
	margin-top:25px;
	padding:0 15px;
 }

/* vod 영상 상단 설정 */
.vod_header{
	overflow:hidden;
	margin-bottom:10px;
}
.vod_header h1{
	width:200px; height:35px;
}
.vod_header .header_lang{
	float:right;
	margin-top: 5px;
}

/* vod 영상 컨텐츠 설정 */
.vod_mov{
}
.vod_mov .mov_content{
	position:relative;
	height:0;
	padding-bottom:56.25%;
}
.vod_mov .mov_content video{
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}

/* vod 가이드 설정 */
#content_vod .vod_guide{
	overflow:hidden;
}
.vod_guide ul.guide_list{
}
.vod_guide ul.guide_list li{
	font-size:12px;
	line-height:20px;
    position:relative;
    padding:0 0 0 10px;
}
.vod_guide ul.guide_list li::after{
	content:'- ';
    position:absolute;
    left:0; top:1px;
}
.vod_guide ul.guide_list li a{
	text-decoration:underline;
	font-weight:bold;
	color:#0054a6;
}
.vod_guide ul.guide_btn{
	float : left;
}
.vod_guide ul.guide_btn li{
	float:left;
}

.vod_guide ul.guide_btn li:first-child{
	margin-right:20px;
}
.vod_guide ul.guide_btn li a{
	display:inline-block;
	text-align:center;
	color:#474747;
}
.vod_guide ul.guide_btn li a:hover{
	text-decoration:underline;
}
.vod_guide ul.guide_btn li a img{
	width:32px; height:32px;
	margin-bottom:3px;
}

.vod_guide ul.guide_btn li a img:first-child{
	width:33px; height:33px;
	margin-bottom:3px;
}
.vod_guide ul.guide_btn li a span{
	font-weight:bold;
}
.vod_guide .button-area{
	float:right;
}
.vod_guide .button-area button{
	cursor:pointer;
}
/* vod 커뮤니티 설정 */
 .vod_community{
    margin-bottom:20px;
    clear:both;
}
.vod_community .community_title{
    padding-bottom:5px;
    margin-bottom:3px;
    font-size:18px;
    font-weight:bold;
    color:#282828;
}
.vod_community .community_list{
    border-top:2px solid #282828;
}

/* vod 커뮤니티 - qna 설정 */
.vod_community #community_qna{}

/* qna - 글쓰기 설정 */
#community_qna .qna_write{
    position:relative;
    padding:15px 0 10px;
}
#community_qna .qna_write .write_comment{
    margin: 0 80px 0 0;
}
#community_qna .qna_write .write_comment .write_textarea{
    padding: 5px 10px;
    background: #ffffff;
    border-radius: 5px;
    border: 1px solid #d5d5d5;
}
#community_qna .qna_write .write_comment .write_textarea > textarea{
    resize: none;
    width: 100%; height: 45px;
    background: transparent;
    font-size:12px;
    line-height: 20px;
}
#community_qna .qna_write .write_comment .write_count{
    text-align:right;
    padding:2px 0;
    color:#afafaf;
}
#community_qna .qna_write .write_btn_submit{
    position: absolute;
    top: 15px; right: 0px;
    width: 70px;
}
#community_qna .qna_write .write_btn_submit > a{
    display:inline-block;
    width:100%;
    padding:18px 0;
    font-size: 15px;
    border-radius:3px;
    text-align: center;
    color:#fff;
    background-color:#262626;
}

/* qna - 리스트 설정 */
#community_qna .qna_list{}
#community_qna .qna_list li{
    border-bottom: 1px solid #e5e5e5;
}
#community_qna .qna_list li:last-child{
    padding-bottom:0;
    border-bottom:0 none;
}
#community_qna .qna_list li dl{}
#community_qna .qna_list li dt.qna_q,
#community_qna .qna_list li dd.qna_a{
    padding:12px 20px;
}
#community_qna .qna_list li dt.qna_q .qna_date,
#community_qna .qna_list li dd.qna_a .qna_date{
    font-size: 12px;
    font-weight:normal;
    color:#b4b4b4;
    display: block;
}
#community_qna .qna_list li dt.qna_q .qna_text,
#community_qna .qna_list li dd.qna_a .qna_text{
    margin: 0;
}
#community_qna .qna_list li dt.qna_q{
    line-height: 18px;
    font-size:12px;
    color:#0d0d0d;
    background:#f6f6f6;
}
#community_qna .qna_list li dt.qna_q a i.fa{
    vertical-align:0;
    color:#C3C3C3;
}
#community_qna .qna_list li dd.qna_a{
    line-height: 20px;
    font-size:13px;
    font-weight:bold;
    color:#0054a6;
    background:#e5e5e5;
    word-break:break-all;
}
#community_qna .qna_list li dd.qna_a .qna_label_admin{
    display:inline-block;
    margin-right:3px;
    padding:0px 5px;
    background-color:#0054a6;
    color:#fff;
    font-size:11px;
    border-radius: 3px;
}

/* [개별] 다시보기 페이지 설정  *************************************************/
#replay-content {
    padding:15px 0;
}
/* vod 상단 버튼 설정 */
.replay-button-content{
    margin-bottom:15px;
    text-align:right;
}
.replay-button-content a{}
.replay-button-content .btn{
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 2px;
    margin: 5px;
    text-align:center;
    max-width: 234px;
    cursor:pointer;
    width: 100%;
}

/* vod 리스트 설정 */
#replay-content .vod-list{}
.vod-list ul{}
.vod-list ul li{
	position:relative;
	padding:10px 15px 10px 15px;
	margin-bottom:10px;
	border:1px solid #d6d6d6;
	border-radius:5px;
}
/* vod 정보 설정 */
.vod-list ul li .vod-info{
	cursor:pointer;
}
.vod-list ul li .vod-info .vod-title{
	margin-bottom:3px;
	padding-right:25px;
	font-size:14px; font-weight:600;
}
.vod-list ul li .btn-confirm{
	cursor:pointer;
    padding: 4px 6px;
    border-radius: 2px;
    font-size: 12px;
    margin-left:5px;
    margin-top:2px;
}
.vod-list ul li .vod-info .vod-lecturer{
	margin-bottom:5px;
	font-size:12px;
	color:#848484;
}
.vod-list ul li .vod-info .vod-date{
	padding-right:25px;
	font-size:12px;
	color:#bdbdbd;
}
.vod-list ul li .vod-info .vod-date .vod-count{
	padding-left:5px;
	margin-left:5px;
	background:url("https://kosmes.nownnow.com/new-images/aspservice/images/wow/division-line.gif") no-repeat left 4px;
}

/* vod 자세히 설정 */
.vod-list ul li .vod-more{
	position:absolute;
	right:15px; top:10px;
	font-size:15px;
	color:#ccc;
}

/* vod 영상 설정 */
#replay-content .vod-mov-review{
	display:none;
	margin-top:10px;
	background-color:#000;
}
.vod-mov-review .mov-content{
	position:relative;
	height:0;
	padding-bottom:56.25%;
}
.vod-mov-review .mov-content video{
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
}


/* tablet 설정 ============== */
@media (min-width:768px){

    /* content 설정 */
     #content_vod{
        max-width: 1100px;
        margin:25px auto 0;
     }

    /* Live 페이지 *******************************************/

    #wrapper_room{
        min-height:800px;
        position: static;
        margin: auto;
	}

    /* 사용자 정보 설정 */
    .user_info{
    	float:right;
    }
    .user_info .user_name{
    	font-size:13px;
    }
    .user_info .user_email{
    	font-size:13px;
    }
    .user_info .btn_logout{
    }

    /* vod 영상 상단 설정 */
    .vod_header{
    	overflow:hidden;
    	margin-bottom:10px;
    }
    .vod_header h1{
    	float:left;
    	width:306px; height:54px;
    }
    .vod_header .header_lang{
    	float:right;
    	margin-top: 16px;
    }

    /* vod 영상 설정 */
    #content_vod .vod_mov{
    }

    /* vod 가이드 설정 */
    #content_vod .vod_guide{
    }
    .vod_guide ul.guide_list{}
    .vod_guide ul.guide_list li{
    	font-size:13px;
    	line-height:22px;
    }
    .vod_guide ul.guide_btn{}
    .vod_guide ul.guide_btn li{}

    /* vod 커뮤니티 설정 */
    #content_vod .vod_community{
        margin-bottom:20px;
    }
    .vod_community .community_title{
        font-size:20px;
        margin-bottom:5px;
    }

    /*  qna - 글쓰기 설정 */
    #community_qna .qna_write{
    }
    #community_qna .qna_write .write_comment{
    	margin: 0 100px 0 0;
    }
    #community_qna .qna_write .write_comment .write_textarea{
    	padding: 10px;
    }
    #community_qna .qna_write .write_comment .write_textarea > textarea{
    	width: 100%; height: 50px;
    	line-height: 20px;
    }
    #community_qna .qna_write .write_btn_submit{
    	width: 90px;
    }
    #community_qna .qna_write .write_btn_submit > a{
    	padding:25px 0;
    }

    /* qna - 리스트 설정 */
    #community_qna .qna_list{
    }
    #community_qna .qna_list li{
    }
    #community_qna .qna_list li:last-child{
    }
    #community_qna .qna_list li dl{}
    #community_qna .qna_list li dt.qna_q,
    #community_qna .qna_list li dd.qna_a{
    position:relative;
    }
    #community_qna .qna_list li dt.qna_q .qna_date,
    #community_qna .qna_list li dd.qna_a .qna_date{
    display:inline-block;
    position:absolute;
    right:20px;
    top:12px;
    font-size: 12px;
    }
    #community_qna .qna_list li dt.qna_q .qna_text,
    #community_qna .qna_list li dd.qna_a .qna_text{
    margin: 0 80px 0 0;
    }

    /* [개별] 다시보기 페이지 설정  *********************************************/
    #replay-content{
        padding:20px 0;
    }

    /* vod 상단 버튼 설정 */
    .replay-button-content{
        margin-bottom:15px;
        text-align:right;
    }
    .replay-button-content .btn{
        font-size: 13px;
        padding: 7px 10px;
        border-radius: 4px;
    }

    /* vod 리스트 설정 */
    #replay-content .vod-list{}
    .vod-list ul{}
    .vod-list ul li{
    	padding:15px 20px 15px 20px;
    	margin-bottom:10px;
    }

    /* vod 정보 설정 */
    .vod-list ul li .vod-info{
    }
    .vod-list ul li .vod-info .vod-title{
    	margin-bottom:5px;
    	padding-right:35px;
    	font-size:18px;
    }
    .vod-list ul li .btn-confirm{
        position: absolute;
        left: 360px;
        top: 14px;
        padding:5px 8px;
        border-radius: 3px;
        font-size: 13px;
    }
    .vod-list ul li .vod-info .vod-lecturer{
    	margin-bottom:10px;
    	font-size:13px;
    }
    .vod-list ul li .vod-info .vod-date{
    	padding-right:35px;
    	font-size:12px;
    }
    /* vod 자세히 설정 */
    .vod-list ul li .vod-more{
    	right:20px; top:15px;
    }


}