/* font define */
@font-face {
	    font-family: 'notokr-bold';
    src: url('/font/notokr-bold.eot');
    src: url('/font/notokr-bold.eot?#iefix') format('embedded-opentype'),
         url('/font/notokr-bold.woff2') format('woff2'),
         url('/font/notokr-bold.woff') format('woff'),
         url('/font/notokr-bold.ttf') format('truetype'),
         url('/font/notokr-bold.svg#notokr-bold') format('svg');
}

@font-face {
	    font-family: 'notokr-light';
    src: url('/font/notokr-light.eot');
    src: url('/font/notokr-light.eot?#iefix') format('embedded-opentype'),
         url('/font/notokr-light.woff2') format('woff2'),
         url('/font/notokr-light.woff') format('woff'),
         url('/font/notokr-light.ttf') format('truetype'),
         url('/font/notokr-light.svg#notokr-light') format('svg');
}

@font-face {
	    font-family: 'notokr-Regular';
    src: url('/font/notokr-regular.eot');
    src: url('/font/notokr-regular.eot?#iefix') format('embedded-opentype'),
         url('/font/notokr-regular.woff2') format('woff2'),
         url('/font/notokr-regular.woff') format('woff'),
         url('/font/notokr-regular.ttf') format('truetype'),
         url('/font/notokr-regular.svg#notokr-regular') format('svg');
}

@font-face {
    font-family: 'notokr-medium';
    src: url('/font/notokr-medium.eot');
    src: url('/font/notokr-medium.eot?#iefix') format('embedded-opentype'),
         url('/font/notokr-medium.woff2') format('woff2'),
         url('/font/notokr-medium.woff') format('woff'),
         url('/font/notokr-medium.ttf') format('truetype'),
         url('/font/notokr-medium.svg#notokr-medium') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*###############################################################################*/
/* 바탕 크기, 색상을 남색? 으로 */

html {
	width: 1440px;
	height: 897px;
	background-color: #292c3d;
}

body {
	background-color: #292c3d;
}

/* Left 여백 */
.left_td {
	width: 150px;
	background-color: #292c3d;
}

/* 회사 로고 */
.LOGO_Krafton {
	position: absolute;
	top:40px;
	width: 74px;
	height: 58px;
	object-fit: contain;
}

/* Password 로고옆 글자*/

.password_text {
	position: absolute;
	top: 26px;
	left: 228px;
	width: 172px;
	height: 53px;
    font-family: 'notokr-bold';
	font-size: 36px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: #ffffff;
}

/* Paswword 로고옆 글자*/
.Management-Service {
	position: absolute;
	top: 70px;
	left: 228px;
	width: 227px;
	height: 36px;
	font-family: 'notokr-light';
	font-size: 24px;
	font-weight: 300;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: #ffffff;
}

/* 폼 상자 크기 */
.FormRectangle {
  width: 1440px;
  height: 891px;
  vertical-align: top;
  background-color: #292c3d;
}

/* tab 선택 시 네모 상자 */
.tab_container {
  width: 752px;
  height: 756px;
  border: solid 1px #000000;
  background-color: #353849;
}

.active {
  background-color: #4CAF50;
}

/* 상위 tab 메뉴에 대한 그룹 */
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	//position: absolute;
	//top: 170px;
	//left: 228px;
	overflow: hidden;
	background-color: #292c3d;
}

li {
	float: left;
}

li a {
	display: block;
	color: white;
	text-align: center;
	padding: 19px 16px;
	text-decoration: none;
	background-color: #292c3d;
	//  width: 132px;
	height: 24px;
	font-family: 'notokr-Regular';
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: #969696;
}

li a:hover {
	background-color: #292c3d;
	color: #ffffff;
}

/***********************************************/
/* 네모상자 안의 글자중 Help 와 같은부분 */
.Menu_logo {
  width: 56px;
  height: 36px;
  font-family: 'notokr-bold';
  font-size: 24px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #ffffff;
  left: 40px;
  position: relative;
}

/* 저작권 멘트 */
.Copyright {
  width: 290px;
  height: 21px;
  font-family: 'notokr-medium';
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #818181;
  top: 40px;
  left: 240px;
  position: relative;
}

/* 동영상 보는 부분에 대한 상자 위치 */

.button_div {
  left: 40px;
  top: 30px;
  position: relative;
  
}

/* 동영상 버튼에 대한 디자인 */
.help_menu_bt {
  width: 154.7px;
  height: 35px;
  border-radius: 2px;
  border: none;
  background-color: #292c3d;
  color: #838397;
}

/* 버튼에 대해 마우스를 올렸을 때 */
.button_div button:hover {
  color: #ffffff;
  background-color: #398dce;

}

/* 버튼에 대해 활성화가 되었을 때 */
.button_div button:active {
  color: #ffffff;
  background-color: #398dce;

}

/* 상단 메뉴의 밑줄 부분 */
.help_link {
	width : 35px;
	height : 2px;
	position: relative;
	left : -35px;
	top : 12px
}

/* 동영상 보기 */
.video_view {
  width: 662px;
}

/* 상단 메뉴의 선택한 부분의 색상 부분*/
#help_page {
	  color: #ffffff;
}