html { font-family: 'Roboto'; }

body { width: 100%; height: 100%; border: 0px; margin: 0; display: block; overflow: hidden; background-color:#d8d8d8;}
img { vertical-align: middle; }

/* section top */
section { position: absolute; display: block; margin: 0; padding: 0;}
section.top { float: left; width:100%; text-align:center;z-index:10}
section.top p { margin:0; text-align:left }
div.top_1px_bar { width:100%; height:3px; background-color:#FE6522; }
div.top_100_base { display:block; margin:auto; width:729px; text-align:center;padding:0;}
div.box_b1_t, div.box_b2_t, div.box_b3_t { position:relative;display:inline-block; float:left; width:241px; height:64px; background-color:#000000; color:#808080; margin-right:2px;z-index:9999; }
div.box_b1_t.active, div.box_b2_t.active, div.box_b3_t.active { background-color:#fe6522;color:#fff; }
div.box_b1, div.box_b2, div.box_b3 { position:relative; background-color:rgba(243,243,243,0.9); padding: 0px; box-sizing:border-box;display:none;float:left; z-index:99999;}
div.box_b1 span, div.box_b2 span, div.box_b3 span { color:#000; font-size: 15px; text-align:left; padding:5px 5px 5px 19px !important; }


div.orange_top {display:block; background-color:#fe6522; width:100%; height:8px;}
div.light_orange { display:block; background-color:#de511a; width:100%; height:7px;}
div.gray_bar { display:block; background-color:#e6e6e6; width:100%; height:1px;}
p.menu_title { font-size:18px;font-weight:bold;cursor:pointer;color:white; }
p.menu_sub_title { font-size:12px; margin-top:4px !important;cursor:pointer;}
div.box_b1_t span, div.box_b2_t span, div.box_b3_t span { display:inline-block; padding: 12px 12px 8px 12px; width: 100%; box-sizing: border-box;cursor:pointer; }
span.menu_content:hover { color:#fe6522; }
div.top_right { float: right; width: 58%; }
div.top_right p { margin: 8px; padding-left: 100px; font-size: 12px; }

section.body { position: absolute; display: block; float: left; top: 119px; z-index: 99; }
span.menu_show { 
	text-indent:5px;
	display: block; 
	float: right; 
	height: 25px; 
	width: 98px; 
	line-height: 25px; 
	border-top: 1px solid #fff; 
	border-bottom: 1px solid #fff; 
	font-size: 12px; 
	font-weight: bold; 
	box-sizing:border-box;
	/*background-color:white*/ 
	color:white;
}
span.menu_show img { cursor: pointer; margin-bottom:2px;margin-left:6px; }


/* pop up section */
div.pop_up1 { display:none; border:1px solid #ACACAC; background-color:rgba(250,250,250,0.9); width:354px; /*height:251px*/;float:left;position:absolute;top:20%;left:50%; }
div.pop_head_title { 
	display:block; 
	border-style: hidden hidden solid hidden; 
	border-width: 0px 0px 1px 0px; 
	border-color:#ACACAC; 
	width:100%; 
	height:35px;
	padding:8px 17px; 
	box-sizing:border-box; 
	font-size:14px;
	font-weight:bold;
	
}
div.pop_body_content {
	display:block;
	width:100%;
	/* height:100%; */
	padding:8px 17px;
	box-sizing:border-box;
	font-size:14px;
}
span.pop_body_content_title { font-size:12px; margin-top:10px;display:block;}
div.content_gray_title {
	display:block;
	width:100%;
	height:100%;
	padding:8px 12px;
	box-sizing:border-box;
	font-size:14px;
	color:#fff;
	background-color:#959595;	
}
div.content_dark_title {
	display:block;
	width:100%;
	height:100%;
	padding:8px 12px;
	box-sizing:border-box;
	font-size:14px;
	color:#fff;
	background-color:#363636;
}

div.video {
	height:297px;
}
div.video_area {
	margin-top: 5px;
	width:317px;
	height:198px;
	border:1px solid red;
}

div.export {
	height:145px;
}
#mp1 { height:266px !important; }
#picker { height:169px; }
div.message_box {
	/*display:none;*/
	/*float:left;*/
	position:absolute;
	top:20%;
	left:50%;
	width:307px;
	/*height:198px;*/
	box-sizing:border-box;
	font-size:14px;
	color:#fff;
	background-color:rgba(250,250,250,0.9);
	border-style: solid hidden hidden hidden; 
	border-width: 2px 0px 0px 0px; 
	border-color:#959595; 
}

#chart {
	position: absolute;
	top: 10%;
	left: 20%;
	width: 426px;
	height: 311px;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.9);
	border-style: solid hidden hidden hidden;
	border-width: 2px 0px 0px 0px;
	border-color: #959595;
	cursor: pointer;
	display: none;
}

div.chart_close { display: block; float: left; position: relative; left: 411px; cursor: pointer; }

#chart_mobile {
	position: absolute;
	top: 15%;
	left: 20%;
	width: 266px;
	height: 191px;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.9);
	border-style: solid hidden hidden hidden;
	border-width: 2px 0px 0px 0px;
	border-color: #959595;
	cursor: pointer;
	display: none;
}

div.chart_close_mobile { display: block; float: left; position: relative; left: 251px; cursor: pointer; }

#mb1 { display:none; }
#mb2 { display:none; }
#mb3 { display:none; }
#mb4 { display:none; }
#mb5 { display:none; }
#mb6 { display:none; }
#mb7 { display:none; }
#mb8 { display:none; }
#mb9 { display:none; }
#mb10 { display:none; }

div.message_box_title { display:block; float:left;}
div.message_box_title span { color:#000;font-weight:600;font-size:16px;margin-top: 16px;display: block;float: left;text-indent:10px;}
div.message_box_block_gray {display:block; float:left; background-color:#959595; width:6px; height:33px; margin-left:18px; }
div.message_box_content { color:#000; font-size:12px; padding:18px; width:100%;/*height:164px*/;overflow:auto;box-sizing:border-box;}
div.message_box_content span.message_desc1 { line-height:17px; }
div.close { display:block;float:left;position:relative;left:333px;top:4px;cursor:pointer; }
div.close2 { display:block;float:left;position:relative;left:287px;top:4px;cursor:pointer; }

/* color picker */
div.col_picker { display: block; float: left; width: 153px; height: 147px; box-sizing: border-box; font-size: 13px; line-height: 16px;margin-right:3px;margin-left:3px;margin-top: 10px;border:1px solid #BABABA; }
div.col_picker span.c_title { font-size: 13px; line-height: 27px; display: block; text-indent: 12px;background-color:#959595 }
div.col_picker span.c_content { font-size: 13px; line-height: 16px; display: block; padding: 9px; }
div.col_picker span.c_content2 { font-size: 13px; line-height: 16px;display: block; padding-left: 9px; padding-top: 5px; cursor: pointer; }
div.col_picker span.c_content2 img { margin-right: 2px; }
div.col_picker span.c_content3 { font-size: 13px; line-height: 16px;display: block; /*padding-left: 9px; padding-top: 5px;*/padding:2px 12px 2px 12px; cursor: pointer; color:#fff;margin:3px;}
span.picker_button { background-color:#959595; display:block; float:left;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; }
div.button { display:block;float:left;margin-top:10px; }
div.button span.c_content3 { font-size: 13px; line-height: 16px;display: block; /*padding-left: 9px; padding-top: 5px;*/padding:2px 7px 2px 7px; cursor: pointer; color:#fff;margin:3px;}
span.c_content3:hover { background-color:#3e3e3e !important; }
div.button2 { display:block;float:left;margin-top:10px;margin-bottom:6px;text-align:right;width:100% }
div.button2 span.c_content3 { font-size: 13px; line-height: 16px;display: block; /*padding-left: 9px; padding-top: 5px;*/padding:2px 8px 2px 8px; cursor: pointer; color:#fff;margin:3px;float:right}
span.c_content3:hover { background-color:#3e3e3e !important; }
div.write_form { display:block;float:left; width:100%; margin-top:10px;}
div.write_form span { display: inline-block; margin-right:10px;margin-top:5px;font-weight:bold; }
div.write_form input { width:318px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; border:1px solid #959595; opacity:1; margin-bottom:5px; }
div.write_form textarea { width:318px; height:60px; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; border:1px solid #959595;float:right;margin-top:5px; }

/*
div.export { display: block; float: left; width: 127px; height: 132px; box-sizing: border-box; font-size: 13px; line-height: 16px; }
div.export a { cursor: pointer; }
*/
section.footer { position: absolute; display: block; float: left; width: 50%; left: 50%; top: 97%; z-index: 98; }
section.footer p { display: block; text-align: right; padding-right: 20px; margin: 0; font-size: 12px; padding-bottom: 5px; }
section.footer div { display:block; float:right; }


div.box_shadow {
	-moz-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2);
}
section.GNB { position:relative;top:70px; }
div.lang { display:none;width:48px;float:right }
div.lang img { margin-bottom:3px; }
div.lang span.GNB_btn { display:block; float:right; width:98px; height:21px; color:#fff;background-color:black;text-align:center;padding:padding:2px 8px 2px 8px;box-sizing:border-box;font-size:12px;margin-bottom:4px; line-height:21px;}
#S_lang { width:98px; height:21px; }
#lang2 img { cursor:pointer; }
#lang2 img.sall { /*margin-right:34px;*/ }

section.guide { top:100px; width: 100%; z-index:0 }
section.guide div.description { margin-left: 35%; }

/* Progress bar */
.progress {
  overflow: hidden;
  margin: 100px auto;
  padding: 0 15px;
  width: 220px;
  height: 34px;
  background: #d3d5d9;
  border-radius: 17px;
  background-image: -webkit-linear-gradient(top, #ebecef, #bfc3c7);
  background-image: -moz-linear-gradient(top, #ebecef, #bfc3c7);
  background-image: -o-linear-gradient(top, #ebecef, #bfc3c7);
  background-image: linear-gradient(to bottom, #ebecef, #bfc3c7);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);
}

.progress-val {
  float: right;
  margin-left: 15px;
  font: bold 15px/34px Helvetica, Arial, sans-serif;
  color: #333;
  text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}

.progress-bar {
  display: block;
  overflow: hidden;
  height: 8px;
  margin: 13px 0;
  background: #b8b8b8;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 60%);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
}

.progress-in {
  display: block;
  min-width: 8px;
  height: 8px;
  background: #1997e6;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #147cd6, #24c1fc);
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -moz-linear-gradient(left, #147cd6, #24c1fc);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -o-linear-gradient(left, #147cd6, #24c1fc);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #147cd6, #24c1fc);
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

div.wrapper_full {
/*	display:none; */
	position:absolute;
	width:100%;
	height:100%;
	background-image:url('../images/K-003.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	background-color:white;
	z-index:9999;
}

div.wrapper_full_bar {
	position:absolute;
	width:100%;
	background-color:rgba(0, 0, 0, 0.6);
	padding:40px;
	top:33%;
	box-sizing:border-box;
}

div.connect_x {
	position:absolute;
	width:34px;
	height:34px;
	background-image:url('../images/connect2.png');
	background-size: 34px 34px;
	top:20%;
	left:20%;
	cursor:pointer;
}
#lang2 { display:block; position:absolute; top:90%; left:0px;width:100%;text-align:center; }
/* pad */

@media only screen and (max-width: 820px) { /*767px*/
	div.top_100_base { display:block; margin:auto; width:100%; text-align:center;padding:0;}
	div.box_b1_t, div.box_b2_t, div.box_b3_t { display:inline-block; float:left; width:33%; /*height:64px*/; background-color:#000000; color:#808080; margin-right:1px; }
	p.menu_title { font-size:13px;font-weight:bold;color:white; }
	p.menu_sub_title { font-size:7px; margin-top:4px !important;}
	div.box_b1 span, div.box_b2 span, div.box_b3 span { color:#000; font-size: 8px; text-align:left; padding:3px 5px 3px 19px !important; }
	div.lang { display:none; }
	#lang2 { display:block;width:100;top:80% }
	#lang2 p { font-size:7px; margin-top:10px;text-align:right; }
	section.footer { top:93%; }
	section.footer p { font-size:7px; }
	div.message_box { left:5px; }
	div.pop_up1  { left:0px; }
	section.footer { display:none; }
	div.wrapper_full { background-repeat: repeat; }
	section.guide { top: 89%; }
	section.guide div.description { margin-left: 10px; font-size: 12px; }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
	div.wrapper_full { background-repeat: repeat; }
	div.wrapper_full_bar { top: 25%; }
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
	div.wrapper_full { background-repeat: repeat; }
	div.wrapper_full_bar { top: 0%; }
	section.guide div.description { display: none; }
}