/* color name 
@langcan_darkred: #6a1501;
@langcan_lightblue: #5d5bbc;
@langcan_darkblue: #2c2a8b;
@langcan_lightgreen: #2a972a;
@langcan_darkgreen: #1b571b;
@langcan_lightorange: #ffb017;
@langcan_darkorange: #e39515;
*/

* {
box-sizing: border-box;
-webkit-text-size-adjust:none;	/* 2022.4.29 */
}

*:focus {
	outline: none;
}

@media (max-width:360px){html{font-size:10px;}}
@media (min-width:361px) and (max-width:399px){html{font-size:11px;}}
@media (min-width:400px) and (max-width:439px){html{font-size:12px;}}
@media (min-width:440px) and (max-width:479px){html{font-size:13px;}}
@media (min-width:480px) and (max-width:519px){html{font-size:14px;}}
@media (min-width:520px) and (max-width:559px){html{font-size:15px;}}
@media (min-width:560px) and (max-width:599px){html{font-size:16px;}}
@media (min-width:600px) and (max-width:639px){html{font-size:17px;}}
@media (min-width:640px) and (max-width:679px){html{font-size:18px;}}
@media (min-width:680px) and (max-width:719px){html{font-size:19px;}}
@media (min-width:720px) and (max-width:759px){html{font-size:20px;}}
@media (min-width:760px) and (max-width:799px){html{font-size:21px;}}
@media (min-width:800px) and (max-width:839px){html{font-size:22px;}}
@media (min-width:840px) and (max-width:879px){html{font-size:23px;}}
@media (min-width:880px){html{font-size:24px;}}

body {
	font-family: Arial;
	font-size: 1em;
	background-color: #2663a3; 
	margin: 0px;
	padding: 0px;
}
/* 2022.6.8 */
div{
	-ms-user-select: none;    
	-moz-user-select: -moz-none;   
	-khtml-user-select: none;   
	-webkit-user-select: none;   
	user-select: none;
}
/* 2022.5.7 
#wrap{
	display: block;
    width: 100%;
	height: 100%;
}
@media only screen and (orientation:portrait){
  #wrap {  
    width: 100%;
	height: 100%;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
*/
@media only screen and (orientation:landscape){
  #wrap {  
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}

video::-webkit-media-controls-fullscreen-button{ display:none !important; }
video::-webkit-media-controls-play-button{ display:none !important; }
video::-webkit-media-controls-timeline{ display:none !important; }
video::-webkit-media-controls-current-time-display{ display:none !important; }
video::-webkit-media-controls-time-remaining-display{ display:none !important; }
video::-webkit-media-controls-mute-button{ display:none !important; }
video::-webkit-media-controls-volume-slider{ display:none !important; }
/* Let's get this party started */

::-webkit-scrollbar {
    width: 7px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: rgba(255,100,0,0.8); 
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,100,0,0.4); 
} 

        
#wrapperDiv {
    /* display:none;    2019.2.19 */
	width: 100%;
	height: 700px;
	margin: 0px auto;
    position:absolute;
	background-color: #2663a3;
}

.quiz_header {
	height: 50px;  	
	width: 100%;
	background-color: #1d1d1d;/*3c3f41; 2021.11.23*/
	font: 15px "Impact";
	color: white;
	margin: 0 auto;
	font-family: arial, verdana, Sans-serif;
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 7px;
	padding-left: 15px;
    /* 2021.11.23 */
    background: linear-gradient(to bottom, #3c3f41, #1d1d1d);
    /*border: 1px solid #2d2d2d;*/

}

.quiz_view {
	height: 30px;  	
	width: 100%;
	background-color: #5caedd;
	font: 0.7em "Impact";
	color: #2663a3;
	margin: 0;
	font-family: arial, verdana, Sans-serif;
			
	padding-left: 20px;
	text-align: left;
	line-height:30px;
} 	
		

#container {
    position:relative;
	text-align: center;

	height:400px;  	
	width: 100%;
	background-color: black;/*#2e2e2e;*/
    overflow: hidden;
}
div #s_main {
    display:inline-block;
	position: relative;
	width:450px;
	height:70px;
	background-color: white;
	float:left;
	text-align:center;
	font: 14px/1 "Impact";
	color:white;
            
	margin: 10px 0px 10px 10px;
	padding: 0px 0px 0px 0px;
	border: 2px solid #80c566; /*white;*/
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
	
    /* 2018.8.23 */
    -webkit-transition: All .2s;    
    transition: All .2s;    
	overflow-y:hidden;
}
.question{
	position:relative;	
/*	height:150px;  	*/
/*	width: 80%;*/
	height:75%;  	
	width:100%;
	background-color: black;/*white;*/
	top:0;
	left:0;
	right:0;
	bottom:0;
    margin: 0 auto;
	text-align:center;
	vertical-align:middle;
/* 2020.2.11	float:center;*/
	overflow-y: hidden;
    
    /* 2018.8.23 */
    -webkit-transition: All .2s;        
    transition: All .2s;        
}

/* video �꾩껜�붾㈃�쇰줈 */
.video_fullscreen { 
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover; 
}

.answer{
	height:25%;  	
	width:100%;
	border: 0px solid #e7b90f; /* some kind of blue border */
	text-align: center;
/*	color:#2663a3;*/
	display: block;
	margin: 0px auto 0px auto;
	font: 15px 'trebuchet MS', 'lucida sans';
	padding: 0px 0px 0px 0px;
	background-color: #80c566; /*white;*/
	overflow-y:scroll;
    
    /* 2018.8.23 */
    -webkit-transition: All .2s;  
    transition: All .2s;  
}    	

/* 鍮꾨뵒��而⑦듃濡�蹂대뱶 */
#control_board{
	display:table-cell;	/* 理쒖큹 �④� */
    height:30px;
	width:100%; 
	position:absolute; 
	left:0;
	bottom:0; 
	padding: 0px;
	text-align: center;
    font: 12px 'trebuchet MS', 'lucida sans';
    font-family: arial, verdana, Sans-serif;
	background-color:rgba(0, 0, 0, 0.8);/*black;*/
}

/* �쒓� �먮쭑 �쒖떆 div */
/*#track_subtitle */
.subtitle_han_div{
	display: table;/*inline-block; */
    height:60px;
	width:100%; 
	position:absolute; 
	top:0px; 
	left:0;
	
    font: 24px 'Impact';
    font-weight:900;
    color: yellow; /* #e7b90f; */
    font-family: arial, verdana, Sans-serif;
/*    background-image: url("subtitle_back.png");
    background-repeat: repeat;    */
	background-color: transparent;/*rgba(0, 0, 0, 0.5);*/
	padding:0px;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    text-align:center;
}

/* 영어 자막 div */
/*#track2_subtitle */
.subtitle_eng_div{
	display: table;/*table-cell;  */
  
  vertical-align: bottom;    
/*    height:60px;
    height:50%;*/
	width:100%; 
	position:absolute; 
	bottom:30px; 
	left:0;

/*    font: 24px 'Impact';*/
    font: 20px 'Impact';/* 2020.8.27 */
    font-weight:700;
    color: deepskyblue;
    font-family: arial, verdana, Sans-serif;
/*    background-image: url("subtitle_back.png");
    background-repeat: repeat;    */
	background-color: rgba(0, 0, 0, 0.5);
	padding:10px;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    text-align:center;
}
/* 영어 자막부 동영상 없을 때 */
.subtitle_eng_div_novideo{
	display: table;	
    vertical-align: middle;    
    height:50%;
	width:100%; 
	position:absolute; 
	top:49%; 
	left:0;

    font: 24px 'Impact';
    font-weight:700;
    color: deepskyblue;
    font-family: arial, verdana, Sans-serif;
	background-color: black;
	padding:30px 10px 10px 10px;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    text-align:center;
    border-top:0.1em solid midnightblue;
}
/* 한글 자막부 동영상 없을 때 */
.subtitle_han_div_novideo{
	display: table; 
	position:absolute; 
    height:50%;
	width:100%; 
	top:0; 
	left:0;
	
    font: 24px 'Impact';
    font-weight:900;
    color: yellow; /* #e7b90f; */
    font-family: arial, verdana, Sans-serif;
	background-color: black;
	padding:10px 10px 30px 10px;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    text-align:center;
}
div .subtitleView{
    display: table-cell; 
    vertical-align: top;
    text-align:center;
	background-color: transparent;/*rgba(0, 0, 0, 0.5);*/
}  

div .subtitleViewTop{
    display: table-cell; 
    vertical-align: top;
    text-align:center;
	background-color: transparent;/*rgba(0, 0, 0, 0.5);*/
}  
div .subtitleViewBottom{
    display: table-cell; 
    vertical-align: bottom;
    text-align:center;
	background-color: transparent;/*rgba(0, 0, 0, 0.5);*/
}  

/* 2020.3.11 video를*/
#video_player{
    position: relative; 
    display: inline-block;
    
    height:100%;
	width:100%; 
}



div #s_right {
    display:inline-block;
	position: relative;
	width: 300px;	
	height: 70px;
	background-color: #2e2e2e;/*#47484b;*/
	text-align:left;
	float:right;
	font-family: Arial;
	color: black;			
            
	margin:10px 10px 10px 0px;
	padding:10px;
	border:0px solid #80c566;
/*	border-radius: 15px;*/
    -webkit-transition: All .2s;    /* 2018.8.23 */
    transition: All .2s;    /* 2018.8.23 */
    
    /* 2020.8.28 
    resize: horizontal;
    min-width: 300px;
    max-width: 70%;
    */

}
		
#keyboard {
    position: relative;/*2022.5.31 fixed;*/
/*    bottom: 0;	*//*2022.5.31 fixed;*/
	height: 135px;
	width: 100%;
	background-color: white;
    padding:5px;
    background-color: lightgray;
    bottom: env(safe-area-inset-bottom);	/* 2022.5.27 safari 대응 */
}
	
.keyboard_table{
    width: 80%;
    height: 60px;
    text-align: center;
	background-color: lightgray;
}

.keyboard_table td{
    text-align: center;
    width: 60px;
    font: 22px 'Impact';
    font-weight:800;
    color: black;
    font-family: arial, verdana, Sans-serif;
    border: 3px solid lightgray;
    border-radius: 10px;
	background-color: white;
}
	
		
h1 {
	background: white;
	text-align: center;
	color:#000;
	font: 30px/1 "Impact";   
	display: block;
	margin: 5% auto 5%;
			
	font-family: arial, verdana, Sans-serif;
	font-weight: bold;
}

/* count �쒖떆 span*/
.info {	
	background: #f6d306;
/*	text-align: center;*/
	color: #2663a3;
	font: 50px "Impact";   
	display: block;
/*	margin: 5% auto 5%;*/
			
	font-family: arial, verdana, Sans-serif;
	font-weight: bold;
}
		
/* �뺣떟 �낅젰 input */		
input[type="text"].ans{
    border: 5px solid #398aba; /* some kind of blue border */
	
	text-align: center;
	color:#2663a3;
	font: 30px/1 "Impact";	
	display: block;
	margin: 5% auto 5%;
	width:70%;
			
	font-family: arial, verdana, Sans-serif;
	font-weight: bold;
	
	padding: 10px 0;
	background-color: #ffeac6;
}

/* �뺣떟 �낅젰 input */		
textarea.ans{
    border: 5px solid #398aba; /* some kind of blue border */
	
	text-align: center;
	color:#2663a3;
	display: block;
	margin: 0% auto 5%;
	width:90%;
			
	font: 18px 'trebuchet MS', 'lucida sans';
	
	padding: 10px 10px 10px 10px;
	background-color: #ffeac6;
/*	overflow:hidden;*/
	overflow-y:auto;

}
textarea.ans_tmp{
/*	display:none;*/

	display: block;
    border: 1px solid #e7b90f; /* some kind of blue border */
	text-align: center;
	color:black;
	margin: 0% auto 5%;
	width:90%;
			
	font: 18px 'trebuchet MS', 'lucida sans';
	
	padding: 10px 0;
	background-color: white;
	overflow:hidden;
}
div.ans{
	
	border: 5px solid #398aba; /* some kind of blue border */
    
	text-align: center;
	color:#2663a3;
	display: block;
	margin: 15px auto 0px auto;
	width:90%;

	font: 18px 'trebuchet MS', 'lucida sans';
	
	padding: 10px 10px 10px 10px;
	background-color: #ffeac6;
	
	overflow-y:auto;
}    		      

div.ans_word{
	
	border: 2px solid #e7b90f; /* some kind of blue border */
    
	text-align: center;
/*	color:#2663a3;*/
	display: block;
	margin: 15px auto 0px auto;
	width:90%;

	font: 15px 'trebuchet MS', 'lucida sans';
	
	padding: 10px 10px 10px 10px;
	background-color: yellowgreen; /*white;*/
	
		
	overflow-y:auto;
}    		      
    		      
		
#head_doc {
	font: 24px;
	color:white;	
	font-family: arial, verdana, Sans-serif;
}  

#pop{
	display:none;	/* 理쒖큹 �④� */
	width:500px; 
	height:250px;
	position:absolute; 
	top:50%; 
	left:50%; 
/*	
	border:2px solid black;
*/	
	border-radius: 0px;
	margin:-115px 0 0 -395px;
/*	padding: 15px 15px 15px 15px;*/
	padding: 0px;
/*	box-shadow: 0 0 10px 5px red;*/
	
    font: 0.7em 'Impact';
    font-family: arial, verdana, Sans-serif;
	background-color:white;
	 
    border: 5px solid darkred; /* some kind of blue border */
}

#pop_sentence{
	display:none;	/* 理쒖큹 �④� */
	width:700px; 
	height:350px;
	position:absolute; 
	top:50%; 
	left:50%; 
/*	
	border:2px solid black;
*/	
	border-radius: 0px;
	margin:-165px 0 0 -495px;
/*	padding: 15px 15px 15px 15px;*/
	padding: 0px;
/*	box-shadow: 0 0 10px 5px red;*/
	
    font: 0.7em 'Impact';
    font-family: arial, verdana, Sans-serif;
	background-color:white;
	 
    border: 5px solid darkred; /* some kind of blue border */
}

#pop_done{
	display:none;	/* 理쒖큹 �④� */
	width:500px; 
	height:250px;
	position:absolute; 
	top:50%; 
	left:50%; 
/*	
	border:2px solid black;
*/	
	border-radius: 0px;
	margin:-115px 0 0 -395px;
/*	padding: 15px 15px 15px 15px;*/
	padding: 0px;
/*	box-shadow: 0 0 10px 5px red;*/
	
    font: 0.7em 'Impact';
    font-family: arial, verdana, Sans-serif;
	background-color:white; 
	
    border: 5px solid #2663a3; /* some kind of blue border */
}

#pop_head{
    width: 100%;
    height: 60px;
    background-color:darkred; 
    text-align:left; 
}
#pop_content{
    width: 100%;
    background-color:white;
    overflow: auto; 
    text-align:left; 
    color:black;
    padding:10px 20px 10px 20px;
}

#pop_footer{
    width: 100%;
    height: 60px;
    background-color:white; 
    text-align:center; 
    
    position: absolute;
	bottom: 0;
}

#pop_start{
	display:none;	/* 理쒖큹 �④� */
/*	display:inline;	 理쒖큹 蹂댁엫 */
	width:500px; 
	height:250px;
	position:absolute; 
	top:50%; 
	left:50%; 
/*	
	border:2px solid black;
*/	
	border-radius: 0px;
	margin:-115px 0 0 -395px;
/*	padding: 15px 15px 15px 15px;*/
	padding: 0px;
/*	box-shadow: 0 0 10px 5px #398aba;*/
	
    font: 0.7em 'Impact';
    font-family: arial, verdana, Sans-serif;
	background-color:white; 

    border: 5px solid #2663a3; /* some kind of blue border */
}

#pop_starthead{
    width: 100%;
    height: 60px;
    background-color:#2663a3; 
    text-align:left; 
}
#pop_startcontent{
    width: 100%;
    background-color:white;
    overflow: auto; 
    text-align:center; 
    color:black;
    padding:10px 20px 10px 20px;
}

/* �뺣떟����popup 
#pop_o{
	display:none;	
	width:150px; 
	height:150px; 
	background:rgba(255,255,255, 0); 
	position:absolute; 
	top:10%; 
	left:50%; 
	text-align:center; 
	margin:-65px 0 0 -225px;
}
#pop_x{
	display:none;	
	width:150px; 
	height:150px; 
	background:rgba(255,255,255, 0); 
	position:absolute; 
	top:75%; 
	left:50%; 
	text-align:center; 
	margin:-65px 0 0 -225px;
}
*/


#popup-open{
	width:100%;
	margin: 0 auto;
    color: #e7b90f;
    font-size: 12px;
    font-weight: bold;
/* 2020.2.11   float: center;*/
    letter-spacing: 1px;
    text-align:center;
	cursor:pointer;
}

.rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ffeac6;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    -webkit-transition: all .3s ease-out;   
    transition: all .3s ease-out;   
}

.rounded-list a:hover{
    background: #f6d306;
}

.rounded-list a:hover:before{
    -webkit-transform: rotate(360deg);	
    transform: rotate(360deg);	
}

.rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute; 
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #5caedd;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

/*
.btn {
	border: 2px solid transparent;
	background: #2663a3;
	color: #ffffff;
	font-size: 1em;
	line-height: 25px;
	padding: 10px 0;
	text-decoration: none;
	text-shadow: none;
	border-radius: 7px;
	box-shadow: none;
	transition: 0.25s;
	display: block;
	width: 200px;
	margin: 0 auto;
	text-align: center;
	cursor:pointer;
}

.btn:hover {
	background-color: #398aba;
}
*/
/* Bule Button */ 

.btn_blue {
    background-color: transparent;
    background-repeat: no-repeat;
    cursor: pointer;
    overflow: hidden;
    outline: none;
  	font-size: 14px;
  	height: 30px;
    border: 2px solid orange;
	border-radius: 25px;
    display: inline-block;
    float: none;
    text-align: center;
    /* 2020.7.22 */
/*    width: 120px;*/
    width: 80px;
    color:  #fff;
 }
.btn_blue:hover  {
     color:  #fff;
     background-color: darkorange;
 }


/* yellow Button */ 

.btn_yellow {
    background-color: transparent;
    background-repeat: no-repeat;
    cursor: pointer;
    overflow: hidden;
    outline: none;
  	font-size: 14px;
  	height: 30px;
    border: 2px solid #337ab7;
	border-radius: 25px;
    display: inline-block;
    float: none;
    text-align: center;
    /* 2020.7.22 */
/*    width: 120px;*/
    width: 80px;
    color:  #fff;
 }
.btn_yellow:hover  {
     color:  #fff;
     background:  #286090;
 }
 
.mini_btn {
    background-color: #80c566;
    border-width: 0;
    color: black;
    font-size: 10px;
    letter-spacing: 0.1em;
    line-height: 1.8em;
    top:0; 
    padding: 0em 0;
    width: 45px;
    text-align: center;
	border-radius: 25px;
}
.mini_btn:hover {
    background-color: green;
}
/*yellow; 2024.5.15*/
.mini_btn2 {
    background-color: #e7b90f;/*yellow;*/
    border-width: 2px;
    color: black;
    font-size: 13px;
    letter-spacing: 0.1em;
    line-height: 2.0em;/*1.3em;*/
    top:0; 
    padding: 0em 0;
    width: 120px;/*45px;*/
    text-align: center;
	border-radius: 20px;
	border-color: #2e2e2e;/*bisque;*/
}
.mini_btn2:hover {
    background-color: lightyellow;
}
.small_btn {
    background-color: #80c566;
    border-width: 0;
    color: black;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 1.8em;
    top:0; 
    padding: 0em 0;
    width: 90px;
    text-align: center;
	border-radius: 25px;
}
.small_btn:hover {
    background-color: green;
}
.circle_btn {
    background-color: #f6d306;
    border-width: 0;
    color: black;
    font-size: 24px;
    letter-spacing: 0em;
    line-height: 1.1em;
    top:0; 
    padding: 0em 0;
    width: 26px;
    text-align: center;
	border-radius: 24px;
}
.circle_btn:hover {
    background-color: #ffeac6;
} 
/* Button end*/
video::-webkit-media-controls-panel {
    display: none;
/*    display: flex !important;*/
    opacity: 1 !important;
}

video::-webkit-media-text-track-display {
    font-size: 12pt;
}

/* */
/* �곷Ц �먮쭑 Table */
table.table_subtitle	{ width:100%; height: 45%; margin-bottom:5px;
			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif", "�뗭쓬";
			font-size:11pt;
			color:white;}
table.table_subtitle th { text-align:right; background:#f9f9f9;}
table.table_subtitle th, table.table_subtitle td { padding:2px 5px; border-bottom:1px solid #ddd;}
.table_subtitle td.last { text-align:right; background:#f9f9f9;}

/* */
.highlight { color:black; font-weight:bold;   font-size:11pt;}
.normal    { color:white;  font-weight:normal; font-size:11pt;}




table#control_tbl{
    border: 0;
    text-align: center;
    margin: 0 auto;
    font-size: 10px;
    width:98%;
    text-align:center;
}
table#dictation_tbl{
    border: 0;
    text-align: center;
    margin: 0 auto;
    font-size: 14px;
    width:98%;
    text-align:center;
}


button.img_btn{
    height:100%;
    background-color: Transparent; 
    background-repeat:no-repeat; 
    border: none; 
    cursor:pointer; 
    overflow: hidden; 
    outline:none; 
}

#volume-bar{
    -webkit-appearance: none;
    width: 70px;
    height: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 5px;
}
#dictation-bar{
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background: #80c566;
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 0px;
}

/* 2020.2.11 한글 자막 자동 표시를 막아준다 */
::cue {
    opacity: 0;
}

/* 2019.3.21 */
#speed-bar{
    -webkit-appearance: none;
    width: 100px;
    height: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 5px;
}

table.setup_tbl	{ 
    width: 100%; 
    margin: auto;
    padding: 10px 10px 10px 10px;
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif", "�뗭쓬";
	font-size:10pt;
	color: #80c566;
}
.setup_tbl td { 
    padding: 3px;
}

#manual_Page{
	height:100%;  	
	width:100%;
	border: 0px solid #e7b90f; /* some kind of blue border */
	text-align: left;
/*	color:#2663a3;*/
	display: block;
	margin: 0px auto 0px auto;
	font: 15px 'trebuchet MS', 'lucida sans';
	padding: 0px 0px 0px 0px;
	background-color: #2e2e2e; 
/*	overflow-y:scroll;*/
}
table#manual_table_subtitle	{ 
    width:100%; height: 45%; 
    margin-bottom:5px;
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif", "�뗭쓬";
	font-size:11pt;  /* 2019.3.21 11->16*/
    color:white;    /* 2019.3.21 lightslategray; */
} 
table#manual_table_subtitle th, table#manual_table_subtitle td { 
    padding:2px 5px; 
    border-bottom:1px solid gray;
}

#manual_Dic_Page{
	height:25%;  	
	width:100%;
	border: 0px solid #e7b90f; /* some kind of blue border */
	text-align: center;
	margin: 0px auto 0px auto;
	font: 15px 'trebuchet MS', 'lucida sans';
	padding: 0px 0px 0px 0px;
	background-color: #e7b90f; /*white;*/
	overflow-y:scroll;
}    

#dictation_Page{
	height:25%;  	
	width:100%;
	border: 0px solid white; /* some kind of blue border */
	text-align: center;
	margin: 0px auto 0px auto;
	font: 15px 'trebuchet MS', 'lucida sans';
	padding: 0px 0px 0px 0px;
	background-color: transparent;
	overflow-y:scroll;
}    
.dictation_inner{
	height:25%;  	
	width:100%;
	border: 0px solid white; /* some kind of blue border */
	text-align: center;
	margin: 0px auto 0px auto;
	font: 15px 'trebuchet MS', 'lucida sans';
	padding: 0px 0px 0px 0px;
    overflow-x:hidden;
}    
/* 
display:none �댁���Div瑜�inline-block�섎㈃ 以묒븰�뺤뿴���덈맂��
$("#dictation_start")��css �띿꽦��吏곸젒 top怨�margin 0 auto瑜�以섏빞�쒕떎.
*/
#dictation_start {
    top: 40%;
    position: relative;
    vertical-align: middle;
    text-align: center;
    color: white;
    font-size: 14px;
    width: 50%;
	padding: 5px 15px 5px 15px;
	border-radius: 19px;
    background-color: #e7b90f;
    border: 2px solid #e7b90f; /* some kind of blue border */
    cursor: pointer;
}
#dictation_start:hover {
    background-color: darkorange;
}



table#header{
	height:100%;  	
	width:100%;
	border: 5px solid transparent; /*3c3f41; 2021.11.23*/
    vertical-align: bottom;
}

table#header tr{
    vertical-align: bottom;
}

table#header p{
	margin: 0px 3px 0px 3px;
}

div #manual_select {
	position: relative;
	width: 100%;	
	background-color: #2e2e2e;/*#47484b;*/
	text-align:left;
/*	2020.2.11 font-family: 15px, 'trebuchet MS', 'lucida sans';*/
	font-family: 'trebuchet MS', 'lucida sans';
	color: #80c566;			
            
	margin:0 auto;
	padding:10px;
	border:0px solid #80c566;
/*	border-radius: 15px;*/
}


    /* Custom Check box */
input[type="checkbox"] .check_bok{
    visibility: hidden;
}
.check_bok {
width: 24px;
height: 24px;
background: -webkit-linear-gradient(top, #fff 0%, #dfe5d7 40%, #dfdfdf 100%);
-webkit-border-radius: 5px;
position: relative;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
/*�닿굔 �꾩껜 踰좎씠�ㅺ� ��諛곌껐 遺�텇.*/
.check_bok label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
background: -webkit-linear-gradient(top, #56a0ed 0%, #4889cb 40%, #1f67b0 100%);
-webkit-border-radius: 4px;
left: 2px;
top: 2px;
}
/*�닿굔 �덉そ���ㅼ뼱媛�遺�텇.*/
.check_bok label:after {
opacity: 1;
content: '';
position: absolute;
width: 16px;
height: 16px;
left: 2px;
top: 2px;
background: -webkit-linear-gradient(top, #fff 0%, #dfe5d7 40%, #dfdfdf 100%);
-webkit-border-radius: 3px;
}
.check_bok label:hover::after {
opacity: 0.5;
}
/*�대윭硫�留덉슦���ㅻ쾭 �ъ쓣��諛섑닾紐��댁�寃좎짛..*/
.check_bok input[type=checkbox]:checked + label:after {
opacity: 1;
content: 'Ⅹ';
height: 16px;    
background: -webkit-linear-gradient(top, #56a0ed 0%, #4889cb 40%, #1f67b0 100%);
-webkit-box-shadow: inset 0px 0px 0px white, 0px 1px 3px rgba(0,0,0,0.5);
}    


/* */

input[type="file"]{
    background-color: transparent;
    background-repeat: no-repeat;
    cursor: pointer;
    overflow: hidden;
    font-family: Arial;
  	font-size: 12px;
  	height: 30px;
    border: 1px solid #e7b90f;
	border-radius: 0px;
    display: inline-block;
    float: none;
    text-align: center;
    width: 250px;
    color: white;
}
input[type="number"]{
    background-color: transparent;
    background-repeat: no-repeat;
    cursor: pointer;
    font-family: Arial;
  	font-size: 12px;
  	height: 25px;
    border: 1px solid #e7b90f;
	border-radius: 0px;
    display: inline-block;
    float: none;
    text-align: center;
    width: 50px;
    color: white;
}
select {
    width: 100px; /* �먰븯���덈퉬�ㅼ젙 */
    padding: .2em .8em; /* �щ갚�쇰줈 �믪씠 �ㅼ젙 */
    font-family: inherit;  /* �고듃 �곸냽 */
    background: url('images/select.png') no-repeat 95% 50%; /* �ㅼ씠�곕툕 �붿궡�쒕� 而ㅼ뒪���붿궡�쒕줈 ��껜 */
    border: 1px solid #e7b90f;
    border-radius: 0px; /* iOS �κ렐紐⑥꽌由��쒓굅 */
    -webkit-appearance: none; /* �ㅼ씠�곕툕 �명삎 媛먯텛湲�*/
    -moz-appearance: none;
    appearance: none;
}
/* IE 10, 11���ㅼ씠�곕툕 �붿궡���④린湲�*/
select::-ms-expand {
    display: none;
}

/* login */    
#loginPage {
    top:0;
    left: 0;
    z-index: 101;
    width:100%;
    height:100%;
    display:table;	/* inline-block;理쒖큹 �④� */
    position:absolute;
    background: #2663a3;
    vertical-align: middle;    
    text-align: center;
}
    
.login_header {
	height:45px;  	
	width: 100%;
	background-color: #2663a3;
	font: 0.7em "Impact";
	color: white;
/*	margin: 0 auto;*/
	font-family: arial, verdana, Sans-serif;
	padding-top: 8px;
	padding-right: 15px;
	padding-bottom: 7px;
	padding-left: 15px;
    
    position: absolute;
} 
#login_content{
	width:100%; 
	height:400px;
/*	display: inline-block;*/
/*    vertical-align: middle;    */
    text-align:center;
	padding: 0px;
    
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;    
}
    
.login  {
margin: 20px auto;
width: 300px;
box-shadow: 0px 0px 25px  #000000;

}

.login-logo {
padding: 20px;
}

.login-screen {
width:300px;	
background-color: #FFF;
padding: 20px;
border-radius: 7px;
}

.app-title {
text-align: center;
color: #000;
}

.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}

.login-field {
text-align: center;
background-color: #ffeac6;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
-webkit-transition: border .2s;
transition: border .2s;
}

.login-field:focus {
border: 2px solid #e7b90f;
box-shadow: none;
}

.login-link {
  	font-size: 12px;
  	color: #e7b90f;
  	display: block;
	margin-top: 12px;
}

img {
    border: 0;
}

.copyright {
	width:90%;
	margin: 20px auto;
    color: white;
    font-size: 12px;
    padding: 6px 0;
/* 2020.2.11   float: center;*/
    letter-spacing: 1px;
    text-align:center;
}
/* 2019.4.20 */
div #containerEdit {
    z-index: 100;
    display:inline-block;
	top:50px;
	left:0;	
    position: absolute;
	width: 100%;	
	height: 100px;
	background-color: #2e2e2e;/* 2021.11.23 #ffeac6;*/
	text-align:left;
	font-family: Arial;
	color: black;			
    vertical-align: middle;    
    overflow-y: scroll;
}
#editMode_header{
	background-color: white;

}
div #editMain {
    display:inline-block;
	position: relative;
	width:70%;
	height:70px;
	background-color: white;
	float:left;
	font-family: Arial;
	text-align:center;
/*	font: 14px/1 "Impact";   */
	color:white;
            
	margin: 20px 0px 20px 20px;
	padding: 10px 10px 10px 10px;
/*  2021.11.23  
	border: 2px solid #80c566;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
*/	
	border: 0px solid black;
    
    /* 2018.8.23 */
    -webkit-transition: All .2s;    
    transition: All .2s;    
	overflow-y:hidden;
}
div #editRight {
    display:inline-block;
	position: relative;
	width: 25%;	
	height: 70px;
	background-color: white;/*#47484b;*/
	text-align:left;
	float:right;
	font-family: Arial;
	color: black;			
            
	margin:20px 20px 20px 0px;
	padding:10px;
/*  2021.11.23  
	border:2px solid #80c566;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
*/    
	border: 0px solid black;
    
    -webkit-transition: All .2s;    /* 2018.8.23 */
    transition: All .2s;    /* 2018.8.23 */
}

/* �곷Ц �먮쭑 Table */
table.editTable	{ 
    width:100%; 
/*    height: 100%; */
    margin-top:5px;
	font-family: arial, verdana, Sans-serif;
	font-size:11pt;
	color:black;
    text-align:left;
    overflow-y:scroll;
    background-color: #f5f5f5;
}
table.editTable td { 
    padding:0px 5px 0px 5px; 
    border-bottom:1px solid darkgray;
}
table#edit{
    color:black;
}
table#edit p{
	margin: 0px 3px 0px 3px;
}

/* 2019.5.15 s_card 추가 */
.e_card{
	float: left;
	margin: .1em;
    padding: .01em .01em .01em .01em;
    color: black;   /* 2019.3.21 lightslategray; */
    text-align: center;
    background: transparent;
    font-family: arial, verdana, Sans-serif;
	font-size:14pt;    /* 2019.3.21 11->16 */
	cursor:pointer;
    
    /* select  */
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none;

    
    -o-user-select: none;
    user-select: none;        
    
}

/* 2021.12.7 .s_card, .s_card_sel 별도 처리 */
 .s_card, .s_card_sel{
	float: left;
	margin: .1em;
    padding: .01em .01em .01em .01em;
    color: black;   /* 2019.3.21 lightslategray; */
    text-align: center;
    background: transparent;
    font-family: arial, verdana, Sans-serif;
	font-size:16pt;    /* 2019.3.21 11->16 */
	cursor:pointer;
    
    /* select  */
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none;

    
    -o-user-select: none;
    user-select: none;        
    
}

.e_card:hover{
    color: black;
    background-color: #e7b90f;
}
    
.e_card:active {
    color: black;
    background-color: white;
}    

.s_card, .s_card_sel:hover{
    color: black;
    background-color: #e7b90f;
}
.s_card, .s_card_sel:active {
    color: black;
    background-color: #80c566;
}    

/* 2021.11.23 */
.han_card{
    display:block;
    width:100%;
	float: left;
	margin: .1em;
    padding: .01em .01em .01em .01em;
    color: #5d5bbc;    /* 2019.3.21 darkgreen; lightslategray; */
    text-align: left;
    background: transparent;
    font-family: arial, verdana, Sans-serif;
	font-size:12pt;    /* 2019.3.21 11->16 */
	cursor:default;
}

#drawCanvas {
    top:0;
    left: 0;
    z-index: 102;
    width:100%;
    height:100%;
    display:none;	/* 최초 숨김 */
    position:absolute;
    background:rgba(0, 0, 0, 0.0);
	border: 5px solid darkgreen; /*white;*/

    /* 2019.6.10 영역 지정을 막는다 */
   -ms-user-select: none; 
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;

}
#canvasTools {
    top:0;
    left: 0;
    z-index: 103;
    width:100%;
    height:50px;
    position:absolute;
    background: darkgreen;
}

/* 2021.11.10 형식 변경
.mainMenu {
    width:110px;
    cursor:pointer;
    background-color:#e7b90f;
    border-radius: 15px; 
}
.mainMenu:hover {
    color: black;
    background-color: yellowgreen;    
}
*/
.mainMenu {
  width:80px;
  cursor:pointer;    
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
    
  list-style: none;
  float: right;
  line-height: 10px;
  margin: 0;
  padding: 0px;
    
  color: white;
   
  text-decoration: none;
  font-size: 13px;
  -webkit-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  text-transform: uppercase;
}

.mainMenu:hover {
  color: #f5d601; /* 7ebcb9; */

  padding-bottom: 0px;  /* under line의 위치 */
  border-top: 2px solid transparent;    
  border-bottom: 2px solid #f6a901; /* 7ebcb9; */
}






.resultMenu {
    width:80px;
    cursor:pointer;
    background-color:rgb(255,100,0);
    border-radius: 15px; 
    font-size: 15px;
}
.resultMenu:hover {
    color: black;
    background-color: #e7b90f;    
}
/* 정답일 때 popup */
/* 2021.5.15
#s_pop_o, #s_pop_x{
*/
#s_pop_o, #s_pop_x, #s_Ingangpop_o, #s_Ingangpop_x{
    z-index:106;
	display:none;	/* 최초 숨김 */
	background:rgba(255,255,255, 0); 
	position:absolute; 
	top:50%; 
	left:50%; 
	text-align:center; 
    vertical-align: middle;
/*	margin:-65px 0 0 -225px;*/
    margin:-100px 0 0 -100px;
}

.overlay{
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
}

/* Manual Game */
.manual_game {
    display:table;
	left:0;	
    position: absolute;
	width: 100%;	
    height: 500px;
    background-image: url(images/cardback.png);
	background-color: #ffb400;
	text-align:center;
    font-family: "Georgia", "돋음";
/*    font-family: "Comic Sans MS", "돋음";*/
	font-size:14pt;
    font-weight: bold;
    color: black;
    vertical-align: middle;
	overflow-y:hidden;	/* 2022.4.14 */
    z-index: 101;
}  
#bestplayer{
    position: absolute;
	width: 300px;	
    height: 300px;
    top:50%;
    left:50%;
    margin: -150px 0 0 -150px;
    background-image: url(images/bestplayer.png);    
    background-color: #ffb400;
    box-shadow: 0px 0px 30px #000;    
    z-index: 102;
}
.bestplayerdiv{
	position: relative;
    display:table;
	width: 250px;	
    height: 40px;
    top:50px;
    left:25px;
    margin: 5px 0 0 0;
    vertical-align: middle;
    background-color: rgba(255, 255, 255, 0.3);
}   
#playerlist{
    width:100%;
    font-family: arial, verdana, Sans-serif;
    color:#09387a;
    display:table-cell; 
    text-align:center; 
    vertical-align:middle;
    box-shadow: 4px 4px 3px #999;
    border-top-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}

div #game1Main {
    display:inline-block;
	position: relative;
	width:50%;
	height:70px;
	background-color: rgba(255, 255, 255, 0.3);
	float:left;
	text-align:center;
            
	margin: 0px 0px 15px 15px;
	padding: 10px 10px 10px 10px;
/*	border:10px solid green;
    
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
*/	
    /* 2018.8.23 */
    -webkit-transition: All .2s;    
    transition: All .2s;    
	overflow-y:hidden;
        

}
div #game1Right {
    display:inline-block;
	position: relative;
	width: 50%;	
	height: 70px;
	background-color: rgba(255, 255, 255, 0.3);
	text-align:left;
	float:right;
	font-family: Arial;
	color: black;			
            
	margin: 0px 15px 15px 0px;
	padding:10px;
/*	border:10px solid green;
    
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
*/    
    -webkit-transition: All .2s;    /* 2018.8.23 */
    transition: All .2s;    /* 2018.8.23 */

}

table.game1Table	{ 
    width:95%; 
    margin:5px;
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif", "돋음";
	font-size:16pt;    /* 2019.3.21 11->16 */
	color:black;
    text-align:left;
    overflow-y:scroll;
}
table.game1Table td { 
    padding:3px 5px 3px 5px; 
    border-bottom:1px solid gray;

}
table#game1{
    color:black;
}
table#game1 p{
	margin: 0px 3px 0px 3px;
}    
    
/* 카드 뒤집기 */    
.gamecard {
    margin: 5px;
    position: relative;
    width: 47%; 
    height: 50px;
    perspective: 50rem;
    float:left;
    box-shadow: 4px 4px 3px #999;
    background-color: transparent;
    cursor: pointer;
}
    
.front, .back {
    position: absolute;
    width: 100%; 
    height: 50px;
    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);	/*2022.5.30*/
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    backface-visibility:hidden;
    display:table;
    font-family: "Georgia", "돋음";
/*    font-family: "Comic Sans MS", "돋음";*/
	font-size:20pt;
    font-weight: bold;
	color:black;

    border:2px solid #ac7939;
    cursor: pointer;
}
#gamecardP {
    display:table-cell; 
    text-align:center; 
    vertical-align:middle;
}    
.front { 
    background-image: url(images/cardback2.png);
    cursor: pointer;
}
.back { 
    background-image: url(images/cardback3.png);
/* 2022.7.15    
    -webkit-transform: rotateX(-180deg); 
    transform: rotateX(-180deg);
*/     
    cursor: pointer;
}
/*      
.gamecard:hover .front{ transform: rotateX(360deg); }
.gamecard:hover .back { transform: rotateX(360deg); }    
*/    
.gameword, .gameword_normal {
	float: left;
	margin: 0px 3px 0px 3px;
    padding: 0px 1px 2px 1px;
    text-align: center;
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif", "돋음";
	font-size:16pt;    /* 2019.3.21 11->16 */
    
    /* select 되는 것을 방지 */
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Not implemented yet */
    -o-user-select: none;
    user-select: none;        
}
.gameword {
    width: 50px;
    color: #8c0c09;
    background-image: url(images/wordback.png);
    background-size: cover;
    cursor:pointer;
}
.gameword_normal {
    color: black;
    background: transparent;
	cursor:default;
}

/* 마우스 포인트가 위치할 때 */
.gameword:hover{ 
    -webkit-transition: -webkit-transform 0.1s;
    transition: transform 0.1s;
    -webkit-transform: rotateZ(10deg);     
    transform: rotateZ(10deg);     
}
    
.gameword:active {  /* 클릭된 상태일 때 */
    color: black;
    background-color: #80c566;
}  

/* 로딩중 */
.wrap-loading{ /*화면 전체를 어둡게 합니다.*/
    position: fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: rgba(0,0,0,0.5); /*not in ie */
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000',endColorstr='#20000000');    /* ie */
    z-index: 250;
}
.wrap-loading div{ /*로딩 이미지*/
    position: fixed;
    top:50%;
    left:50%;
    margin-left: -150px;
    margin-top: -50px;
}
.display-none{ /*감추기*/
    display:none;
}
    
.videoOn, .videoOff {
    position:absolute;
	top:10px;
    left:10px;
	width:50px;
	height:50px;
    z-index: 10; 
}    

/* 2020.2.16 */
/*
    #listeningOMR {
        display:inline-block;
        right:0;	
        position: absolute;
        width: 300px;	
        height: 100%;	
        background-color: #ffb400;
        font-size:12pt;
        color: black;			
        overflow-y: scroll;
        text-align: center;
        padding: 0px 0px 0px 0px;
    }    
*/
    table.OMRtable{
        text-align: center;
        padding: 0px 0px 0px 0px;
        border:1px solid black;
    }
    table.OMRtable th, table.OMRtable td{
        height:30px;
        text-align: center;
        color: black;
        font-family: arial, verdana, Sans-serif;
        border-bottom: 0px solid black;
        border-left: 1px solid black;
        padding: 7px 0px 0px 0px;
    }
    table.OMRtable th{
        background-color: #398aba;
        color: white;
    }
    table.OMRtable td{
/*        background-color: white;*/
        color: black;
    }

#quizScrambleA {
    padding:5px;
    overflow-y:scroll;
    width:700px; 
    height:150px;
    background:white;    
    color:black;
    
}



#studentResult{
    z-index:105;
    display:table;
    position:absolute;
    width:100%;
    text-align: center; 
    background:rgba(0, 0, 0, 0.8);
    padding: 30px 0px 30px 0px;
}
#studentResultdiv{
    overflow-y:scroll;
    width:100%;
    height:450px;
    text-align:center;
    display:table-cell;
    position:absolute;
    vertical-align: middle;
    background:rgba(0, 0, 0, 0.0);
}

/* 2021.11.15 포스트잇 모듈 (마크1) 시작 
div.postIt {
    z-index:100;
    position:absolute;
    left:0px;
    top:0px;

    padding: 7px 40px 0px 10px;
    margin: 5px 5px;
    border: 1px solid #f8f861;
    border-left: 20px solid #f8f861;
    border-bottom-right-radius: 15px 15px;
    font-family: 'Nanum Pen Script';
    font-size: 15px;
    color: #555;
    
    background: #ffff88; 

}

div.postIt > p {
    padding: 0px 0 !important;
}

 포스트잇 모듈 (마크1) 끝 */
div.postIt {
    font-family: 'Nanum Pen Script';
    font-size: 12px;
    margin: 0px 0px;

    color: white;
    height:32px;
    overflow-y: hidden;
    overflow-x: hidden;
    word-break: break-all;
}
/* 2020.10.26 2020.3.28 camRecording 
#camRecording{
    z-index:105;
    position: absolute; 
    width:300px;
    height:250px;
    right: 0px; 
    bottom: 0px;
    background:white;    
}

video #camvideo{
    position: relative; 
    display: inline-block;
    width:200px;
    height:150px;
    margin-top: 2px;
    border: 1px solid black;
}
*/

/* 2022.6.22 */
.select_option_dic{
	background:black;
}

/* 2022.7.28 */
span.blank {
	border-bottom: 2px solid yellow;
}