@charset "euc-kr";
/*

@import url('http://www.enksafety.kr/FONT/NotoSansKR.css');
@import url('http://www.enksafety.kr/FONT/NanumSquare.css');
@import url('http://www.enksafety.kr/FONT/NanumBarunGothic.css');
@import url('http://www.enksafety.kr/FONT/TmoneyRoundWind.css');


font-family: 'NotoSansKR';  - 100, 300, 400, 500, 700, 900
*/


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://webfontworld.github.io/naver/NanumBarunGothic.css');
@import url('https://webfontworld.github.io/tmoney/TmoneyRoundWind.css');

/*

font-family: 'NanumBarunGothic'; - 100, 300, 400, 700

font-family: 'NanumBarunGothic';  - 100 ~ 900
font-family: 'TmoneyRoundWind'; - 400, 800
*/


body
{
	font-family:'NanumBarunGothic';
	font-weight: 400;
	margin:0;
	padding:0;
	font-size: 1.0em; 
	color:#555555; 
	line-height:150%;
	SCROLLBAR-FACE-COLOR:#ffffff; 
	SCROLLBAR-SHADOW-COLOR:#A5A5A5;
	SCROLLBAR-HIGHLIGHT-COLOR:#A5A5A5; 
	SCROLLBAR-3DLIGHT-COLOR: #ffffff; 
	SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
	SCROLLBAR-TRACK-COLOR: #ffffff; 
	SCROLLBAR-ARROW-COLOR: #A5A5A5;
}

a { text-decoration:none;} a:link, a:visited, a:active { text-decoration:none; color:#555555;} 
a:hover { text-decoration:none; color:#999999;} 

table  
{
	font-size: 1.0em; 
	font-family:'NanumBarunGothic';
	font-weight: 400;
	line-height:150%;
	border-collapse:collapse;
}

th, li, ul, ol, b, p, span, div 
{
	font-size: 1.0em;
	font-family:'NanumBarunGothic';
	font-weight: 400;
	margin-left: 0px;
	line-height:150%;
}


ul,li {margin-left:10px; padding:0px;}

select 
{
	font-size: 1.0em;
	font-weight: 400;
	font-family:'NanumBarunGothic';
} 

input 
{
	font-size: 1.0em;
	font-weight: 400;
	font-family:'NanumBarunGothic';
}


td
{
	font-size: 1.0em;
	font-family:'NanumBarunGothic';
	font-weight: 400;
	line-height:150%;
	color:#555555; 
	word-wrap:break-word;
	word-break:break-all;
}

/*ºñµð¿À Àüüȭ¸é¿¡¼­ ÄÁÆ®·ÑÀ» ¸ðµÎ ¼û±ä´Ù.*/
video::-webkit-media-controls {
  display:none !important;
}



.Table_Head_Blue
{
	background: linear-gradient(to top, #0080FF, #0053A6);
	font-size:1.0em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color:#FFFFFF;
	text-align:Center;
}

.Title_Gray_Bar
{
	background: linear-gradient(to top, #8B8D8E, #C4C4C4);
	font-size:1.1em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color:#777777;
	text-align:Center;
}

.Title_Gray_Cercle_Bar
{
	background: radial-gradient(#DDDDDD,#8B8D8E);
	font-size:1.1em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color:#444444;
	text-align:Center;
}



.TOP_Menu_Bar
{
	background: #223A55;
	font-size:1.1em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color:#FFFFFF;
	text-align:Center;
	
	cursor: hand;
}


.TOP_Menu_Bar_Now
{
	background: #52759F;
	font-size:1.1em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color:#FFFFFF;
	text-align:Center;
}


/********** ÆùÆ® *************/
.copy_Right
{
	background:#262729; 
	margin:0 ;
	auto; margin-left;
	font-size:0.6em;
	font-family:'NanumBarunGothic';
	font-weight: 400;
	color:#CCCCCC;
}


.main_Title
{
	font-size:1.4em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color: #444444;
}


.page_main_Title
{
	font-size:1.3em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color: #444444;
}


.page_Sub_Title
{
	font-size:1.1em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color: #444444;
}

.list_Title
{
	font-size:1.0em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color: #444444;
}




.Coment08
{
	font-size:0.8em;
	font-family:'NanumBarunGothic';
	font-weight: 400;
	color: #444444;
}


.cert_Title
{
	background-color: #EEEEEE; 
	font-size:1.0em;
	font-family:'NanumBarunGothic';
	font-weight: 700;
	color:#4C4C4C; 
	text-align:right;
	padding-right: 5px;
}


.main_Title_W
{
	font-size:1.4em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color: #DDDDDD;
}


.page_main_Title_w
{
	font-size:1.3em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color: #FFFFFF;
}


.page_Sub_Title_W
{
	font-size:1.1em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color: #FFFFFF;
}



.list_Title_W
{
	font-size:1.0em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color: #FFFFFF;
}



.menu_Top_Navi
{
	background:#336AFB;
	text-align:center;
	font-size:1.1em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color:#FFFFFF; 
}


.BOOK_RPT_TITLE
{
	background:#336AFB;
	font-size:1.1em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color:#FFFFFF; 
}


/********** In put **************************/

.text_25   
{
	background-color: #ffffff; 
	border: 1px solid #999999; 
	font-family:'NanumBarunGothic';
	font-weight: 400;
	Color:#444444; 
	Font-size:1.0em;
	text-align:left;
	height: 30px; 
	padding-left: 5px;
}


.txtArea
{
	background-color: #ffffff; 
	border: 1px solid #999999; 
	font-family:'NanumBarunGothic';
	font-weight: 400;
	color: #444444;
	font-size: 1.0em;
	margin:0 0 0 0;
	IME-MODE:active;
	vertical-align:middle;
}

.text_25_center   
{
	background-color: #ffffff; 
	border: 1px solid #999999; 
	font-family:'NanumBarunGothic';
	font-weight: 400;
	Color:#444444; 
	Font-size:1.0em;
	text-align:center;
	height: 30px;
}


/******************************* button *******************************/


.button_Gray_w60
{
	height: 25px;
	width: 60px;
	border-width:1px;
	border-style:solid;
	border-color:#999999;
	border-radius:5px; 
	background: linear-gradient(to top, #888888, #AAAAAA);

	cursor: hand;
	color: #FFFFFF;
	font-family: 'NanumBarunGothic';
	font-weight:400;
	font-size:0.9em;
}

.button_Wgreen_60
{
    height: 25px;
	width: 60px;
	border-width:1px;
	border-style:solid;
	border-color:#009B00;
	border-radius:5px; 
	background-color: #FFFFFF;

	cursor: hand;
	color: #009B00;
	font-family: 'NanumBarunGothic';
	font-weight:400;
	font-size:0.9em;
}


.button_WBlue_60
{
    height: 25px;
	width: 60px;
	border-width:1px;
	border-style:solid;
	border-color:#2788FE;
	border-radius:5px; 
	background-color: #FFFFFF;

	cursor: hand;
	color: #2788FE;
	font-family: 'NanumBarunGothic';
	font-weight:400;
	font-size:0.9em;
}



.button_blue_w100
{
	height: 30px;
	width: 100px;
	border-width:1px;
	border-style:solid;
	border-color:#2788FE;
	border-radius:5px; 
	background: linear-gradient(to top, #0080FF, #6FB7FF);

	cursor: hand;
	color: #FFFFFF;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight:400;
	font-size:1.0em;
}


.button_Green_w100
{
	height: 30px;
	width: 100px;
	border-width:1px;
	border-style:solid;
	border-color:#00D900;
	border-radius:5px; 
	background: linear-gradient(to top, #008E00, #00D700);

	cursor: hand;
	color: #FFFFFF;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight:400;
	font-size:1.0em;
}



.button_gray_W100
{
	height: 30px;
	width: 100px;
	border-width:1px;
	border-style:solid;
	border-color:#999999;
	border-radius:5px; 
	background: linear-gradient(to top, #888888, #AAAAAA);

	cursor: hand;
	color: #FFFFFF;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight:400;
	font-size:1.0em;
}




.Main_Menu_Btn
{
	border:0px 
	solid Silver;
	border-radius:10px; 
	background : #0151E4;
	text-align:center;
	font-size:1.0em;
	font-family:'NanumBarunGothic';
	font-weight:700;
	color:#FFFFFF;
	cursor: hand;
}

.mainCenterButton
{
	border-width:1px;
	border-style:solid;
	border-color:#555555;
	border-radius:3px; 
	cursor: hand;
	color: #555555;
	font-family: 'NanumBarunGothic';
	font-weight:700;
	font-size:1.0em;
	text-align:center;
	background-color: #FFFFFF;
	height: 50px;
	width: 200px;
}



/****************Line **************************/

.Silver_shadow_Round_1
{
	border-width:1px;
	border-style:solid;
	border-color:Silver;
	box-shadow: 0px 0px 5px Silver;
}

.line_Round_Silver_1
{
	border-width:1px;
	border-style:solid;
	border-color:Silver;
}

.line_Round_Bllue_1
{
	border-width:1px;
	border-style:solid;
	border-color:509EFE;
}


.line_Round_Sky_1
{
	border-width:1px;
	border-style:solid;
	border-color:6bb4ff;
}


.line_Round_lilac_1
{
	border-width:1px;
	border-style:solid;
	border-color:#a47dab;
}








.line_Left_Silver_1
{
	border-left:1px solid Silver;
}

.line_Top_Silver_1
{
	border-top:1px solid Silver;
}

.line_Right_Silver_1
{
	border-right:1px solid Silver;
}

.line_RTL_1
{
	border-right:1px solid Silver;
	border-top:1px solid Silver;
	border-left:1px solid Silver;
}



.line_TOP2
{
	border-top-style: solid; 
	border-top-width: 2px; 
	border-top-color: #555555;
}


.line_bottom
{
	border-bottom-style: solid; 
	border-bottom-width: 1px; 
	border-bottom-color: #C0C0C0;
}

.line_bottom2
{
	border-bottom-style: solid; 
	border-bottom-width: 2px; 
	border-bottom-color: #555555;
}


.dot_top1
{
	border-top: 1px dotted #AAAAAA;
}

.dot_bottom1
{
	border-bottom: 1px dotted #AAAAAA;
}






/*----- ±×·¡ÇÁ ---------- */

.Progress_Green_1{
	border-color:#00C864;
	border-radius:10px;
	background: linear-gradient(to top, #008040, #0FFF87);
	color: #ffffff;
}

.Progress_Gray_1{
	border-color:#D3D3D3;
	border-radius:10px;
	background-color: #D3D3D3;
	color: #ffffff;
}

.Progress_Chasi{
	border-width:0px;
	border-radius:10px;
	background: linear-gradient(to top, #6078FF, #9FAEFF);
	color: #ffffff;
}


/*******************************  ÀÌ·¯´× È­¸é  *******************************/
.chasi_title
{
	font-size:1.1em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color: #FFFFFF;
}

.chasi_title_B
{
	font-size:1.1em;
	font-family:'Noto Sans KR', sans-serif;
	font-weight: 700;
	color:#555555;
}

.study_Quiz_Title{
	font-size:20px;
	font-family:'NanumBarunGothic';
	font-weight: 700;
	color:#555555
}

.eLearning_StateBar
{
	border-width:0px;
	border-style:solid;
	border-color:#6D6D6D;
	background: #6D6D6D;
	border-radius:5px;
	
	font-size:1.0em;
	font-family:'NanumBarunGothic';
	color:#FFFFFF;
}

.buttom_ICON_play
{
	border-width:0px;
	border-style:solid;
	border-color:#808080;
	border-radius:5px; 
	cursor: hand;
	color: #FFFFFF;
	font-family: 'NanumBarunGothic';
	font-weight:700;
	font-size:1.0em;
	background-color: #9B9B9B;
	height: 20px;
	width: 30px;
}







/********ÇнÀ½Åû °¡¿îµ¥ Æ˾÷*******/
.POPUP_Back_layer{
	width: 100%;
	height: 100%;
	background-color: rgba(200,200,200,0.6);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0;
}


.POPUP_layer{
	width: 500px;
	height: 250px;
	background-color: #FFFFFF;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	border-radius: 5px;
	box-shadow: 0 0 10px -4px;
}


/*******ÇнÀ½Åû °¡¿îµ¥ Æ˾÷*******/


/*ÁøÇà¹Ù 
/***************** ÁøÇà¹Ù ***************************/

input[type=range] {
	width: 100%;
}
.customizing input[type=range] {
	-webkit-appearance: none;
}
.customizing  input[type=range]:focus {
	outline: none;
}
/*webkit (Chrome)ÀÇ °æ¿ì*/
.customizing input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 5px;
	cursor: pointer;
	animate: 0.2s;
	background: #2497E3;
}
.customizing input[type=range]::-webkit-slider-thumb {
	border: 1px solid #2497E3;
	height: 15px;
	width: 10px;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -5px; /*chromeÀÇ °æ¿ì margin-top°ªÀ» ºÎ¿©ÇؾßÇÕ´Ï´Ù.*/
}
.customizing input[type=range]:focus::-webkit-slider-runnable-track {
	background: #2497E3; /*³×¸ð¹öÆ°¿¡ Æ÷Ä¿½º¸¦ ÁáÀ»¶§ µÚ¿¡ ¶óÀÎ(¤Ñ)ÀÇ È¿°ú*/
}
/*FirefoxÀÇ °æ¿ì*/
.customizing input[type=range]::-moz-range-track {
	width: 100%;
	height: 5px;
	cursor: pointer;
	animate: 0.2s;
	background: #2497E3;
}
.customizing input[type=range]::-moz-range-thumb {
	border: 1px solid #2497E3;
	height: 15px;
	width: 10px;
	background: #ffffff;
	cursor: pointer;
}

/* ·¹À̾î Æ˾÷¿ë */
.study_popup{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/* absolute / margin À» ÅëÇÑ È­¸é Á¤Áß¾Ó Á¤·Ä ¹× µðÀÚÀÎ*/
.layer{
	width: 100%;
	height: 100%;
	
	border: 1px solid #e5e5e5;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	border-radius: 5px;
	box-shadow: 0 0 10px -4px;
}


.Player_Button
{
	border-width:1px;
	border-style:solid;
	border-color:#555555;
	border-radius:3px; 
	cursor: hand;
	color: #FFFFFF;
	font-family: 'Nanum Gothic', sans-serif;
	font-weight:400;
	font-size:1.1em;
	background-color: #333333;
	height: 20px;
	width: 40px;
}
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																			

.Player_View_Button
{
	border-width:1px;
	border-style:solid;
	border-color:#888888;
	border-radius:10px; 
	cursor: hand;
	color: #FFFFFF;
	font-family: 'NotoSansKR', sans-serif;
	font-weight:400;
	font-size:1.1em;
	background-color: #444444;
	height: 40px;
	width: 40px;
	
	padding:0px;
	text-align:center;
}


.Player_Fonts
{
	font-size:1.0em;
	font-family:'NotoSansKR', sans-serif;
	font-weight: 400;
	color: #FFFFFF;
}



/******************* Çܹö°Å ¸Þ´º ***********************/
/* Çܹö°Å ¾ÆÀÌÄÜ */ 
#hamburger-menu {
	cursor: pointer;
	width: 50%;
	display: flex;
	justify-content: flex-end;
}

#hamburger-menu span {
	width: 30px;
	height: 2px;
	background-color: #FFFFFF;
	position: absolute;
	margin-right: 10px;
	transition: .4s ease-in-out;
}

/* Çܹö°Å ´ÝÇûÀ» ¶§ */ 
#hamburger-menu span:nth-child(1) {
	top: 10px;
}
#hamburger-menu span:nth-child(2) {
	top: 20px;
}
#hamburger-menu span:nth-child(3) {
	top: 30px;
}

/* Çܹö°Å ¿­·ÈÀ» ¶§ */ 
#hamburger-menu.open span:nth-child(1) {
	top: 20px;
	transform: rotate(135deg);
}
#hamburger-menu.open span:nth-child(2) {
 	opacity: 0;
}
#hamburger-menu.open span:nth-child(3) {
	top: 20px;
	transform: rotate(-135deg);
}


/*¸Þ´º ¾ÈÀÇ ´Ý±â*/

#menu-close span {
	width: 30px;
	height: 2px;
	background-color: #444444;
	position: absolute;
	margin-right: 10px;
	transition: .4s ease-in-out;
}

#menu-close span:nth-child(1) {
	top: 25px;
	transform: rotate(135deg);
}

#menu-close span:nth-child(2) {
	top: 25px;
	transform: rotate(-135deg);
}

/* ¸Þ´º */  
#menu-container{
	padding-top: 0px;
}
  
#menu-container .menu-list {
	padding-top: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
	background:rgba(200,200,200,0.8);
	z-index: 999;
	display: flex;
	flex-direction: column;
	float: right;
}
/**************** Çܹö°Å ¸Þ´© ³¡ ******************/