@charset 'UTf-8';


/*navbar*/
nav{
	/*position:fixed;*/
	top:0;
	width:100%;
	height:80px;
	background:#607d8b;
	padding:0 50px;
	box-sizing:border-box;
	display:flex;
	justify-content:space-between;
	align-items:center;
	transition: 0.5s;
}

nav ul{
	margin:0;
	padding:0;
	display:flex;
}

nav ul li{
	list-style:none;
}

nav ul li a{
	color:#fff;
	padding: 0 20px;
	font-size:1.1em;
	text-decoration:none;
	font-weight:bold;
}

.brand{
	font-size:1.8em;
	color:#fff;
	font-weight:bold;
	text-decoration:none;
}







/*테이블 서식*/
table {

	border-top: 1px solid #444444;
	
	border-collapse: collapse;

	margin:1px;
}
th {
	background-color:palegoldenrod;
	padding: 1px;
}
td {
	border-bottom: 1px solid #444444;
	padding: 1px;
	height: 30px;
}
 


/* 수정 중

.progress
{	margin:100px auto;}


.progress img
{	width:40px;		height:40px;	margin-bottom:20px;

}

.progress ul
{	text-align:center;}

.progress ul li
{	display:inline-block;	width:150px;	position:relative;
}

.progress ul li .fa
{	background:#ccc;	width:16px;		height:16px;	color:#fff;		border-radius:50%;	padding:5px;}

.progress ul li .fa::after
{
	content:'';
	background:#ccc;
	height:5px;
	width:205px;
	display:block;
	position:absolute;
	left:0;
	top:110px;
	z-index:-1;
}

.progress ul li:nth-child(3) .fa
{
	background:#148e14;
}
.progress ul li:nth-child(3) .fa::after
{
	background:#148e14;
}

.progress ul li:nth-child(1) .fa,
.progress ul li:nth-child(2) .fa
{
	background:#60aa97;
}

.progress ul li:nth-child(1) .fa::after,
.progress ul li:nth-child(2) .fa::after
{
	background:#60aa97;
}

.progress ul li:first-child .fa::after
{
	width:90px;
	left:80px;
}

.progress ul li:last-child .fa::after
{
	width:70px;
}


.progress ul li i
{
	font-weight:bold;

}

.progress ul li p
{
	font-weight:bold;
	font-size:2em;
}

*/












/*녹화 기능*/
.wrapper{
	/*height: 100%;*/
	border:3px solid red;
	background:#FFC3FA
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}




.video-container{
	display:flex;
	width:550px;
	padding:1rem;
	justify-content:space-around;
}

.video-item > h2{
	text-align:center;
}

.video-item > video{
	border:3px solid white;
	width: 450px;
	height:800px;

}









/*당일 학원 내 체크 상세 그래프 (세로 막대그래프)*/
.bar_chart
{
	width:100%;
	position:relative;
	height:200px;
	padding:0px;
	background:#333;
	box-sizing:border-box;
	box-shadow:0 10px 15px rgba(0,0,0,.5);
}

.chart_wrapper
{

	box-sizing:border-box;

	width:20px;
	height:200px;
	margin:0px 5px;
}

.chart_wrapper p
{
	margin:0px 0px;
	left:2px;
}


.chart_box
{
	position:relative; float:left;
	background:#262626;
	margin:10px;
	padding:2px;
	box-sizing:border-box;
	border:1px solid #0fffb7;
	border-radius:2px;
	width:32px;
}

.chart_box p
{
	position:absolute;
	bottom:-20px;
	right:0px;
}

.chart_box i
{
	position:absolute;
	bottom:-40px;
	left:5px;
}

.chart_level
{
	position:absolute;
	bottom:2px;
	background:#0fffb7;
	width:80%;
}






















/*button서식*/
button[id*='mark']{width:80%; height:90%;}

button {height:50px;}


/*답안입력 체크박스에 숫자 들어있는 원문자*/
input[id*='chk']{position:absolute; left:-3000%;}
input[id*='chk'] + label{position:relative; padding:2px; margin:5px 10px 5px 0; width:30px; height:30px; line-height:30px; background:#1EA4FF; border-radius:20px; display:inline-block; color:#FFF; font-weight:bold; cursor:pointer;}

input[id*='chk']:checked + label{background:#FFD700; font-weight:bold;}




input[id*='chk']+label:after {content:''; position:absolute; left:0; top:0px; background:url(./img/icon_check_red.png) no-repeat center; width:22px; height:22px; background-size:0 auto; transition: all 0.5s 0.3s;}
input[id*='chk']:checked+label:after {background-size:12px auto;}






/*아코디언 (교재 스캔)*/

input[id='text_scan_div_checkbox'] {display:none;}
input[id='text_scan_div_checkbox'] + label {display:block; background:#FAFAD2; padding:0px; border:1px solid #232188; border-radius:5px; border-bottom:0; font-size:1em; margin-bottom:3px; cursor:pointer; position:relative;}
input[id='text_scan_div_checkbox'] + label + div {max-height:0px; width:100%; transition:all .35s; overflow:hidden; background:#ebf8ff;}
input[id='text_scan_div_checkbox']:checked + label + div {max-height:3000px; overflow:auto;}





/*아코디언 (수업 확인 시험)*/

input[id*='class_teach_print_check'] {display:none;}
input[id*='class_teach_print_check'] + label {display:block; padding:0px; border:1px solid #232188; border-bottom:0; cursor:pointer; position:relative;}
input[id*='class_teach_print_check'] + label + div {max-height:0px; width:100%; transition:all .35s; overflow:hidden; background:#ebf8ff;}
input[id*='class_teach_print_check']:checked + label + div {max-height:3000px; overflow:auto;}



/*아코디언 (오답문항 코멘트)*/

input[id='student_textComment_list_checkbox'] {display:none;}
input[id='student_textComment_list_checkbox'] + label {display:block; background:#263343; padding:0px; border:1px solid #232188; border-bottom:0; cursor:pointer; position:relative;}
input[id='student_textComment_list_checkbox'] + label + div {max-height:0px; width:100%; transition:all .35s; overflow:hidden; background:#ebf8ff;}
input[id='student_textComment_list_checkbox']:checked + label + div {max-height:3000px;}



/*아코디언 (오답문항 코멘트 작성 버튼)*/
input[id*='student_text_pic'] {display:none;}
input[id*='student_text_pic'] + label {display:inline-block; background:#787878; border:1px solid #006400; border-radius:5px; width:150px; height:20px; text-align:center; margin-right:10px; color:#FFFFFF; font-weight:bold; font-size:12px; font-style:italic;}
input[id*='student_text_pic']:checked + label{background:#FF8200}



/*아코디언 재채점일 때, 개념 상세*/
input[id*='QUESTION_detail'] {display:none;}
input[id*='QUESTION_detail'] + label {display:block; padding:10px; height:40px; font-size:30px; color:#FFFFFF; background:#263343; border:1px solid #232188; border-bottom:0; align-items:center; cursor:pointer; position:relative;}

input[id*='QUESTION_detail'] + label + div {max-height:0px; width:100%; transition:all .35s; overflow:hidden; background:#ebf8ff;}

input[id*='QUESTION_detail']:checked + label + div {max-height:3000px;}






/*아코디언 재채점일 때, 개념 상세*/
input[id*='concept_detail'] {display:none;}
input[id*='concept_detail'] + label {display:block; padding:10px; height:40px; font-size:30px; color:#FFFFFF; background:#505050; border:1px solid #232188; border-bottom:0; align-items:center; cursor:pointer; position:relative;}

input[id*='concept_detail'] + label + div {max-height:0px; width:100%; transition:all .35s; overflow:hidden; background:#ebf8ff;}

input[id*='concept_detail']:checked + label + div {max-height:3000px;}







/*아코디언 재채점일 때, 질문 사진첨부 및 내용제출*/
input[id*='question_ask'] {display:none;}
input[id*='question_ask'] + label {display:block; padding:10px; height:40px; font-size:30px; color:#FFFFFF; background:#505050; border:1px solid #232188; border-bottom:0; align-items:center; cursor:pointer; position:relative;}

input[id*='question_ask'] + label + div {max-height:0px; width:100%; transition:all .35s; overflow:hidden; background:#ebf8ff;}

input[id*='question_ask']:checked + label + div {max-height:2000px;}




/*아코디언 채점 삭제 요청*/
input[id*='marking_del'] {display:none;}
input[id*='marking_del'] + label {display:block; padding:10px; height:40px; width:100%; font-size:30px; color:#FFFFFF; background:#505050; border:1px solid #232188; border-bottom:0; align-items:center; cursor:pointer; position:relative;}

input[id*='marking_del'] + label + div {max-height:0px; width:100%; transition:all .35s; overflow:hidden; background:#ebf8ff;}

input[id*='marking_del']:checked + label + div {max-height:800px;}






/*선생님 답안리스트 아코디언 메뉴*/
input[id*='teacher_question_list'] {display:none;}
input[id*='teacher_question_list'] + label {display:block; padding:10px; height:40px; font-size:30px; color:#FFFFFF; background:#505050; border:1px solid #232188; border-bottom:0; align-items:center; cursor:pointer; position:relative;}

input[id*='teacher_question_list'] + label + div {max-height:0px; width:100%; transition:all .35s; overflow:hidden; background:#ebf8ff;}

input[id*='teacher_question_list']:checked + label + div {max-height:2000px;}



/*답안리스트 아코디언 메뉴*/

input[id*='answer_mark'] {display:none;}
input[id*='answer_mark'] + label {display:block; padding:20px; height:30px; border:1px solid #232188; border-bottom:0; color:#fff; font-weight:900; background:#3634a5; cursor:pointer; position:relative;}

input[id*='answer'] + label em {position:absolute; top:45%; left:10px; width:40px; height:40px; margin-top:-15px; display:inline-block; background:url('../../img/problem.png') 0px 0px no-repeat;}








/*아코디언 (채점 완료 해설 파일)*/

input[id*='marked_sol_files'] {display:none;}

input[id*='marked_sol_files'] + label {display:block; padding:0px; background:#263343; color:#FFFFFF; font-size:2em; font-weight:bold; border:1px solid #232188; border-bottom:0; cursor:pointer; position:relative; margin-top:5px;}

input[id*='marked_sol_files'] + label + div {max-height:0px; width:100%; transition:all .35s; overflow:hidden; background:#787878;}

input[id*='marked_sol_files']:checked + label + div {max-height:3000px; overflow:auto;}












/*아코디언 (수업 확인 시험)*/

input[id*='class_teach_print_check'] {display:none;}

input[id*='class_teach_print_check'] + label {display:block; padding:0px; border:1px solid #232188; border-bottom:0; cursor:pointer; position:relative;}

input[id*='class_teach_print_check'] + label + div {max-height:0px; width:100%; transition:all .35s; overflow:hidden; background:#ebf8ff;}

input[id*='class_teach_print_check']:checked + label + div {max-height:3000px; overflow:auto;}









/*
input[id*='answer'] + label progress[id*='progress_total']{position:absolute; top:30%; left:95px; width:150px; height:20px; margin-top:-8px; display:inline-block;}

input[id*='answer'] + label progress[id*='progress_total']:before{position:absolute; content:'채점'; display:inline-block; left:-40px; width:40px; height:18px;	border:1px solid #228B22; font-weight:bold; 
																font-size:12px;	background-color:#228B22;}


input[id*='answer'] + label progress[id*='progress_wrong']{position:absolute; top:65%; left:95px; width:150px; height:20px;	margin-top:-8px; display:inline-block;}

input[id*='answer'] + label progress[id*='progress_wrong']:before{position:absolute; content:'오답'; display:inline-block; left:-40px; width:40px; height:18px;	border:1px solid #FF0000; font-weight:bold;
																font-size:12px;	background-color:#FF0000;}
*/
input[id*='answer'] + label tt {position:absolute; top:50%;  right:5px; width:300px; height:30px; margin-top:-15px;}

input[id*='answer_mark'] + label + div {height:0px; width:100%; transition:all .35s; overflow:hidden; background:#ebf8ff; font-size:11px;}

input[id*='answer_mark'] + label + div p {display:inline-block; width:100%; padding:5px;}

input[id*='answer_mark']:checked + label + div {height:3000px;}

input[id*='answer']:checked + label em {background-position:0px -40px;}


input[id*='answer_mark'] + label strong
{

	position:absolute;
	top:5px;
	left:30%;
	padding:10px 0 10px;
	margin-bottom:5px;
	font-size:25px;
}

input[id*='answer_mark'] + label .progress
{
	position:absolute;
	top:10px; 
	left:90px; 
	width:10%; 
	height:50px; 
}


.markBox
{
	box-sizing:border-box;
	width:100%;
	margin:5px auto 5px;
}


/*
.skillBox p
{
	color:#fff;
	text-transform:uppercase;
	margin:0 0 10px;
	padding:0;
	font-weight:bold;
	letter-spacing:1px;
}

.skillBox p:nth-child(1)
{
	float:left;
	position:relative;
	top:-10px;
}
.skillBox p:nth-child(2)
{
	float:left;
	position:relative;
	top:-10px;
}
*/

.marked:before
{
	position:absolute; 
	content:'채점'; 
	display:inline-block; 
	left:-35px; 
	top:-2px;
	width:25px; 
	height:18px;
	padding-left:5px;	
	border:1px solid #228B22; 
	font-weight:bold;
	font-size:12px;	
	background-color:#228B22;
}

.marked_wrong:before
{
	position:absolute; 
	content:'오답'; 
	display:inline-block; 
	left:-35px; 
	top:-2px;
	width:25px; 
	height:18px;
	padding-left:5px;
	border:1px solid #ff0000; 
	font-weight:bold;
	font-size:12px;	
	background-color:#ff0000;
}



.marked
{
	display:inline-block;
	width:100%;
	background:#262626;
	padding:4px;
	box-sizing:border-box;
	border:1px solid #0fffb7;
	border-radius:2px;
	height:20px;
	position:relative;
	text-align:left;
}

.marked_wrong
{
	display:inline-block;
	width:100%;
	background:#262626;
	padding:4px;
	box-sizing:border-box;
	border:1px solid #ff0000;
	border-radius:2px;
	height:20px;
	position:relative;
	text-align:left;
}

.marked p
{
	float:right;
	position:absolute;
	top:-5px;
	right:-70px;
	color:#fff;
	text-transform:uppercase;
	margin:0 0 10px;
	padding:0;
	font-weight:bold;
	letter-spacing:1px;
}

.marked_wrong p
{
	float:right;
	position:absolute;
	top:-5px;
	right:-70px;
	color:#ff8200;
	text-transform:uppercase;
	margin:0 0 10px;
	padding:0;
	font-weight:bold;
	letter-spacing:1px;
}

.marked_level
{
	background:#0fffb7;
	display:inline-block;
	
	padding-left:0px;
	padding-top:0px;
	padding-bottom:0px;
	width:100%;
	height:10px;
}

.marked_wrong_level
{
	background:#ff0000;
	display:inline-block;
	
	padding-left:0px;
	padding-top:0px;
	padding-bottom:0px;
	width:100%;
	height:10px;
}













input[id*='mark_del_id']:checked + label {background:#FF8200}




















/*탭메뉴1*/

input[type='radio']{display:none;}
input[type='radio'][id*='tab'] + label {display:inline-block; padding:10px;	background:#ccc; color:#999; width:150px; font-size:15px; cursor:pointer; margin:0 auto; text-align:center;}
input[type='radio'][id*='tab']:checked + label {background:#aaa; color:#000; margin:0 auto;}


.conbox1 {width:100%; height:5000px; background:#aaa; margin:0 auto;}





input[id='tab01']:checked ~ .con11 {display:block;}
input[id='tab02']:checked ~ .con12 {display:block;}
input[id='tab03']:checked ~ .con13 {display:block;}




/*Swiper*/


.swiper-container 
{
  border: 5px solid #ff0000;
  width: 98%;
  height: 1300px;
  padding-top: 20px;
  padding-bottom: 80px;
}

.swiper-slide 
{
  background-position: center;
  background-size: cover;
  width: 450px;
  height: 750px;
  background: #fff;
}

.swiper-slide .imgBx 
{
	width:100%;
	height: 650px;
	overflow:hidden;
}

.swiper-slide .imgBx h2
{
	margin:0;
	padding:0;
	font-size: 16px;
	text-align: center;
	line-height: 20px;
	color: #f44336;
}




.swiper-slide .imgBx img 
{
	width:100%;
}

.swiper-slide .details
{
	box-sizing: border-box;
	padding: 10px;
}

.swiper-slide .details h3
{
	margin:0;
	padding:0;
	font-size: 14px;
	text-align: center;
	line-height: 16px;

}

.swiper-slide .details h3 span
{
	font-size: 12px;
	color: #f44336;
}


.swiper-pagination-bullet {
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  color:#000;
  opacity: 1;
  background: rgba(0,0,0,0.2);
}
.swiper-pagination-bullet-active {
  color:#fff;
  background: #007aff;
}






/*파일선택 버튼형 디자인*/


.filebox label {
display: inline-block; 
padding: .5em .75em; 
color: #FFF; 
font-size: inherit; 
line-height: normal; 
vertical-align: middle; 
background-color: #006400; 
cursor: pointer; 
border: 1px solid #ebebeb; 
border-bottom-color: #e2e2e2; 
border-radius: .25em; 
z-index:100;
} 

.filebox input[type="file"] {
/* 파일 필드 숨기기 */ 
position: relative; 
top: 5px;
left:0px;
width: 200px; 
height: 30px; 
padding: 0; 
margin: -1px; 
overflow: hidden; 
clip:rect(0,0,0,0); 
border: 0; 
}





/***********채점 삭제 요청**********/
input[id*='marked_del_text_auth_id'] {}
input[id*='marked_del_text_auth_id'] + label {display:block; width:100%; padding:0px; border:1px solid #232188; border-bottom:0; cursor:pointer; position:relative; background:#263343; color:#FFFFFF;}
input[id*='marked_del_text_auth_id']:checked + label {background:#FF8200; color:#0000CD;}







@keyframes blink-effect {
	50% {
		opacity:0;
	}
}

.blink {
	animation:blink-effect 3s step-end infinite;
}





/* 깜빡이는 애니메이션 정의 */
@keyframes blink {
    0% { border-color: #263343; }
    50% { border-color: #ff0000; } /* 깜빡일 때 변할 색상 */
    100% { border-color: #263343; }
}


/* 기본 컨테이너 스타일 */
.radio-container {
    border: 3px solid #263343;
    margin: 5px;
	border-radius:5px;
    transition: all 0.3s ease; /* 배경색, 테두리 변화를 부드럽게 함 */
}

/* 클래스가 추가되었을 때 적용 */
.active-border {
    animation: blink 1s infinite;

}

/* 2. 배경색 변경 추가 */
.active-border {
    background-color: #FAEBD7;
}

/* 기본 이미지 크기 (25vw) */
.wat-card-voice-img {
    width: 25vw;
    transition: width 0.3s ease; /* 부드러운 변화를 위해 추가 */
}




/* 체크된 상태의 이미지 크기 (30vw) */
.active-border .wat-card-voice-img {
    width: 40vw;
}


/*아코디언 (구술시험 리스트)*/

input[id='WAT_TEST_LIST_WAIT'] {display:none;}

input[id='WAT_TEST_LIST_WAIT'] + label {display:block; padding:0px; font-size:2em; font-weight:bold; cursor:pointer; position:relative; margin-top:5px;}

input[id='WAT_TEST_LIST_WAIT'] + label + div {max-height:0px; width:100%; transition:all .35s; overflow:hidden; background:#787878;}

input[id='WAT_TEST_LIST_WAIT']:checked + label + div {max-height:3000px; overflow:auto;}



/*아코디언 (음성 텍스트 리스트)*/

input[id='Smart_Teacher_Voice_checkbox'] {display:none;}

input[id='Smart_Teacher_Voice_checkbox'] + label {display:block; padding:0px; font-size:2em; font-weight:bold; cursor:pointer; position:relative; margin-top:5px;}

input[id='Smart_Teacher_Voice_checkbox'] + label + div {max-height:0px; width:100%; transition:all .35s; overflow:hidden; background:#787878;}

input[id='Smart_Teacher_Voice_checkbox']:checked + label + div {max-height:3000px; overflow:auto;}









/*날짜별 질문 리스트*/
/* 상단/하단 전체 컨테이너 패딩 및 간격 */
.board-container {
    display: flex;
    gap: 12px;
    padding: 0;
    overflow-x: auto;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
}

/* 요청하신 너비 190px 고정 및 규격 일치 */
.date-card {
    width: 190px;             /* 190px로 너비 변경 */
    min-width: 190px;
    max-width: 190px;
    background: #ffffff;
    border: 2px solid #a8c7f0;
    border-radius: 12px;
    padding: 0 0 8px 0;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0;
}

/* 날짜 헤더 */
.date-header {
    text-align: center;
    font-weight: bold;
    color: #1b427a;
    font-size: 13px;
    background-color: #eef4fb;
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid #d0e1f7;
}

/* 내부 카드 리스트 */
.card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 410px;
    overflow-y: auto;
    padding: 0 6px;
}

/* 개별 질문 카드 (높이 고정을 해제하고 flex-start로 유연하게 처리) */
.item-box {
    min-height: 140px;        /* 기본 최소 높이 지정 */
    height: auto;             /* 3줄 이상 시 카드 전체 높이가 자연스럽게 늘어남 */
    background: #f0f4f9;
    border: 1px solid #c5d7ed;
    border-radius: 8px;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
}

.item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

/* 분류 태그 */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding: 0 5px;
    height: 19px;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
}

.badge-concept { background-color: #4b82e6; }
.badge-answer  { background-color: #e69d00; }
.badge-test    { background-color: #e74c3c; }
.badge-repeat  { background-color: #2ecc71; }

/* 확인 업로드 대기 버튼 */
.status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffcc00;
    color: #333;
    border: none;
    border-radius: 4px;
    padding: 0 7px;
    height: 19px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

/* 확인 완료 태그 (날짜 데이터가 있을 경우) */
.checked-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #d4edda;  /* 옅은 연두/초록 배경 */
    color: #155724;             /* 짙은 녹색 글자 */
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    padding: 0 6px;
    height: 19px;
    font-size: 11px;
    font-weight: bold;
    box-sizing: border-box;
}

/* 단원명 */
.item-content {
    font-size: 12px;
    color: #222;
    text-align: center;
    line-height: 1.3;
    font-weight: bold;
}

/* 동영상 질문 시각 */
.study-time {
    font-size: 10px;
    color: #6688b3;
    text-align: center;
    margin: 3px 0;
}

/* 질문 내용 박스 (기본 2줄 높이 + 세로 가운데 정렬 + 3줄 이상 자동 확장) */
.ask-detail-box {
    margin-top: 2px;
    padding: 4px 6px;
    background-color: #eef7ff;
    border: 1px dashed #a0c4e8;
    border-radius: 4px;
    color: #1b4f8a;
    font-size: 11px;
    text-align: center;
    line-height: 1.35;
    
    /* 2줄 기본 높이 확보 및 Flex 세로 가운데 정렬 설정 */
    min-height: calc(11px * 1.35 * 2 + 8px); /* 폰트크기 * 줄간격 * 2줄 + 패딩 = 약 38px */
    display: flex;
    align-items: center;      /* 1줄~2줄일 때 세로 가운데 정렬 */
    justify-content: center;  /* 가로 가운데 정렬 */
    box-sizing: border-box;
    
    white-space: normal;
    word-break: break-all;    /* 긴 단어도 자연스럽게 줄바꿈 */
}