@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean');


body {width:100%;word-wrap:break-word;word-break:break-all;}
*{margin:0;padding:0;box-sizing:border-box;}

/* Type Selector */
body {
	font-family: 'Noto Sans KR', "Apple SD Gothic Neo",AppleGothic,"맑은 고딕","Malgun Gothic", Dotum, sans-serif; color: #333; font-size: 15px; font-weight:400;
	/*font-family: "Helvetica","Apple SD Gothic Neo",AppleGothic,"맑은 고딕","Malgun Gothic","돋움",Dotum,"굴림",Gulim,Helvetica,sans-serif;*/ -webkit-text-size-adjust:none;
	background:#f3f3f3;}
ul, ol, li {list-style: outside none none; box-sizing:border-box; /* 박스사이즈 세팅*/}
a {color: #000; text-decoration: none; box-sizing:border-box; /* 박스사이즈 세팅*/ }
a:focus {outline:none; /*-webkit-tap-highlight-color:transparent; -webkit-tap-highlight: rgba(0,0,0,0);*/}
img, fieldset, button, input {border: 0 none;}
img, input, select, textarea {vertical-align: middle;}
address, em {font-style: normal;}
legend {display: none;}
input:focus {outline: 0 none;}
button{overflow:hidden;background-color:transparent;border:none;cursor:pointer;text-align:center; font-family: 'Noto Sans KR', "Apple SD Gothic Neo",AppleGothic,"맑은 고딕","Malgun Gothic", Dotum, sans-serif; color: #333; font-size: 15px; font-weight:400;}
hr {overflow: hidden; border: 0 none; clear: both;  height: 0; }
.bordernone {border:none !important;}

/* html5 ie9 else */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block; padding:0; margin:0}
/* 모바일 */
html {-webkit-touch-callout:none; -webkit-user-select:none;}
body {line-height: 1; -webkit-text-size-adjust:none;  overflow-y: visible !important; }

/* 폰트 */
@font-face {
     font-family: 'S-CoreDream-5Medium';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

/* common */
/*.clear{ *zoom:1; }*/
.clear:after {content:""; clear:both; display:block; }
.left{float:left;}
.right{float:right;}
.center{text-align:center;}
.veT {vertical-align:top;}

/* clearfix */
.clearfix {*zoom:1;}
.clearfix:before, .clearfix:after {display:block; content: ''; line-height: 0;}
.clearfix:after {clear: both;}
.clear:after {content:""; clear:both; display:block; }

/* 숨김(처리) */
.blind {position:absolute;left:-9999px;width:0;height:0;overflow:hidden;font-size:0;line-height:0;z-index:-1;}
.hide {position:absolute;left:-9999px;width:0;height:0;overflow:hidden;font-size:0;line-height:0;z-index:-1;}
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;}

/* 글자 공통 스타일 */
.text1 {color:#333; line-height:1.5em;}

/*  글자 색상 */
.color1 {color:#ffe400;}
.color2 {color:#9e0000;}

/* 폰트 사이즈 */


/* 폰트 정렬  */
.txtright {text-align:right !important;}
.txtleft {text-align:left !important;}

/* 마진 */
.mar15 {margin:15px;}
.marT0 {margin-top:0px !important;}
.marT10 {margin-top:10px;}
.marT20 {margin-top:20px;}
.marT30 {margin-top:30px;}
.marT60 {margin-top:60px;}
.marB10 {margin-bottom:10px;}
.marB0 {margin-bottom:0px !important;}
.marB30 {margin-bottom:30px !important;}

/* 패딩 */
.paLR10 {padding:0 10px 0 0px;}
.paR10 {padding-right:10px;}
.paR5 {padding-right:5px;}

/* 퍼센트 크기 */
.w100p {width:100%;}


/* 블릿  */


/* 버튼 */
.button {display:inline-block;}
.button.download_btn {display:block; margin-bottom:10px; font-size:1.13em; font-weight:500; color:#000; line-height:50px; text-align:center; border:1px solid #888; border-radius:50px; background:#fff;}
.button.download_btn:before {content:""; display:inline-block; width:19px; height:16px; margin-right:10px; background:url('../../img/contents/down_pic.png') no-repeat center center; background-size:19px auto;vertical-align:middle;}

.button.basic_btn {padding:0 25px; line-height:50px; font-size:1.06em; font-weight:400; border-radius:50px;}
.button.basic_btn.green {color:#fff; background-color:#035328;}
.button.basic_btn.blue {color:#fff; background-color:#0f60ca;}
.button.basic_btn.grey {color:#fff; background-color:#666;}
.button.basic_btn.red {color:#fff; background-color:#cc0d0d;}
.button.basic_btn.black {color:#fff; background-color:#000;}
.button.basic_btn.grey_line {line-height:48px; color:#444; font-weight:500; border:1px solid #000; background:#fff; }
.button.basic_btn.blue_line {line-height:48px; color:#0f60ca; font-weight:500; border:1px solid #0f60ca; background:#fff; }

.button.basic_btn.small {padding:0 15px; line-height:35px;} 
.button.basic_btn.small2 {padding:0 25px; line-height:40px;} 
.button.basic_btn.middle {width:300px;}
.button.basic_btn.wide {width:100%; text-align:center;}


.btcolor1 {background-color:#17254a; }

/* 라디오 버튼 */
.radio_ico {display:block; float:left; margin-left:-22px; width:19px; height:18px; background-image:url('../../img/contents/radio_img.png'); background-size:19px auto;}

input[type=radio].css-radio {position: absolute; overflow: hidden;  clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;}
input[type=radio].css-radio.lrg + label.css-label.lrg {padding-left:22px; /*height:20px;*/ display:inline-block; line-height:16px; background-repeat:no-repeat;	background-position: 0 0; font-size:1.0em; vertical-align:middle; cursor:pointer; letter-spacing:-1px;}
input[type=radio].css-radio.lrg:checked + label.css-label.lrg .radio_ico {background-position: 0 -23px;}


/* 박스 */
.box1 {padding:20px 10px;background-color:#fff;}

legend,caption{text-indent:-100000px;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}

/* 테이블 */
div.table {position:relative; margin:20px 0;}
div.table.type1 table {width:100%;border-spacing:0;border-collapse:collapse;border-top:2px solid #000;table-layout:fixed;}
div.table.type1 table thead th {padding:13px 5px;font-size:0.93em; line-height:1.3em; color:#000;font-weight:500;text-align:center; border-left:1px solid #ccc; border-bottom:1px solid #ccc;}
div.table.type1 table thead th.th_bar_ohter {border-bottom-color:#ccc;}
div.table.type1 table tbody td {padding:10px 5px;font-size:0.93em; line-height:1.4em; color:#3d3d3d; text-align:center; border-left:1px solid #ccc; border-bottom:1px solid #ccc;}
div.table.type1 table thead th:first-child,
div.table.type1 table tbody td:first-child {border-left:none;}
div.table.type1 table tbody td.td_left {text-align:left;}
div.table.type1 table thead th.borderL,
div.table.type1 table tbody td.borderL {border-left:1px solid #ccc;}
div.table.type1 table strong {display:inline-block; width:19px; height:19px; line-height:19px; font-size:0.8em; color:#fff; text-align:center; background:#e5005a; border-radius:100%;}
div.table.type1 table span.etc {display:none;}
div.table.type1 table tbody tr.point td {border-top:2px solid #e5005a; border-bottom:2px solid #e5005a;}
div.table.type1 table tbody tr.point td:first-child {border-left:2px solid #e5005a;}
div.table.type1 table tbody tr.point td:last-child {border-right:2px solid #e5005a;}
div.table.type1 table tbody tr td.point_start {border:2px solid #e5005a; border-right:none;}
div.table.type1 table tbody tr td.point_center {border-top:2px solid #e5005a; border-bottom:2px solid #e5005a; }
div.table.type1 table tbody tr td.point_end {border:2px solid #e5005a; border-left:none;}
div.table.type1 table tbody tr td .stat:before {content:""; display:block; width:10px; height:10px; margin:0 auto 5px auto; border-radius:100%;}
div.table.type1 table tbody tr td .stat.normal:before {background:#000;}
div.table.type1 table tbody tr td .stat.error:before {background:#e10000;}
div.table.type1 table tbody tr td.date {font-size:0.86em; letter-spacing:-0.05em;}
div.table.type1 table tbody tr.error td {color:#e10000;}
div.table.type1 table tbody tr td .battery:before {content:""; display:inline-block; width:17px; height:8px; margin-right:10px; vertical-align:middle;}
div.table.type1 table tbody tr td .battery.full:before {background:url("../../img/contents/battery_3.png") no-repeat center center; background-size:auto 8px; }
div.table.type1 table tbody tr td .battery.middle:before {background:url("../../img/contents/battery_2.png") no-repeat center center; background-size:auto 8px; }
div.table.type1 table tbody tr td .battery.low:before {background:url("../../img/contents/battery_1.png") no-repeat center center; background-size:auto 8px; }
div.table.type1 table tbody tr td .battery.empty:before {background:url("../../img/contents/battery_0.png") no-repeat center center; background-size:auto 8px; }

/* input */
textarea {-webkit-appearance: none; outline-style: none; border: 1px solid #fff;  font-size: 13px;  color: #888;}

#content input[type="date"]  {
	background-color:#f7f7f7;
	border:1px solid #bebebe;
	padding:5px 3px;
	text-align:center;
	-webkit-appearance: none;
	font-size:15px;
	border-radius: 2px;
	height:25px;
}

/* 공통 */
#Wrap {overflow:hidden; width:100%; min-height:400px;}
#contents {position:relative;}

.black_bg {position:fixed;top:0;right:0;/*left:0;*/bottom:0px;width:100%;height:100%;background:#000;filter:alpha(opacity=70);opacity: 0.7;-moz-opacity:0.7; z-index:9999;}


/* 아이콘 이미지 */
.app_icons {overflow: hidden; width: auto; height: 40px; display: inline-block; vertical-align: top; line-height: 999px; background-image: url("../../img/common/app_icons.png"); background-size:300px auto;}


/* 상단 */
.m_top_area {position:fixed; top:0; left:0; width:100%; height:60px; background:#3367d6;}
.m_top_area .pageTit {position:absolute; top:22px; left:0px; width:100%; font-size:1.13em; font-weight:500; color:#fff;  text-align:center;}
.m_top_area .backBtn {overflow:hidden; position:absolute; top: 14px; left: 10px; display:block; width:30px; height:30px; background: url("../../img/common/back_btn.png") no-repeat center center; background-size:11px auto; text-indent:-9999em;}

#container { position:fixed;top:60px;left:0;width:100%;bottom:0;overflow-y:auto; }

/* 애니메이션 버튼 */
.top-animate {background: #000 !important;  top: 13px !important;  -webkit-transform: rotate(45deg);  /* Chrome, Safari, Opera */  transform: rotate(45deg);}
.mid-animate {opacity: 0;}
.bottom-animate {background: #000 !important;  top: 13px !important;  -webkit-transform: rotate(-225deg);  /* Chrome, Safari, Opera */  transform: rotate(-225deg);}
.top-menu,
.mid-menu,
.bottom-menu {width: 20px;  height: 2px; left:5px; /*border-radius: 10px;*/  background-color: #000;}
.top-menu {top: 7px;}
.mid-menu {top: 14px;}
.bottom-menu {top: 21px;}

.menu-trigger {
  z-index: 999;
  position: absolute;
  display: block;
  padding:0px 0px;
  height: 30px;
  width: 30px;
  margin: 0px;
  top: 14px;
  right: 10px;
  background:none;
  border:none;
  cursor:pointer;
}

.navbar-toggle {}
.icon-bar {
	background: #fff;
	transition: 0.6s ease;
	transition-timing-function: cubic-bezier(0.75, 0, 0.29, 1.01);
	/*margin-top: 10px;*/
	position: absolute;
}

/* 펼침메뉴 */
#sidebar-main {position: fixed; top: 0px; bottom: 0; left:0px; right:0px; width:100%; height:100%; max-width:480px;  background-color: #3367d6;}

.sidebar {opacity:0; visibility:hidden; transition: -webkit-transform 0.8s ease 0s, transform 0.8s ease 0s, opacity 0.5s ease 0s, visibility 0.5s ease 0s; z-index:-1;}
.sidebar.active {opacity:1; visibility:visible; z-index:999;}

/* 
.sidebar.right {right: -300px; text-align: right;}
.sidebar.left {left: -300px;}
*/

.sidebar a {text-decoration: none;  display: block;}
.sidebar .wrapper {position: relative; height: 100%; width: 100%;  overflow-y: auto;
  -webkit-box-sizig: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.sidebar .wrapper h2 {padding:20px; font-family: 'S-CoreDream-3Light'; font-size:1.66em;  color:#fff; font-weight:normal; }
.sidebar .wrapper h2 strong {font-family: 'S-CoreDream-5Medium';font-weight:normal; }
.sidebar .wrapper .nav_close {overflow:hidden; position:absolute; top:17px; right:13px;width:30px; height:30px; background:url("../../img/common/close_btn.png") no-repeat center center; background-size:20px auto; text-indent:-9999em;}

.sidebar .nav-btns {overflow:hidden; padding:0px 20px;}
.sidebar .nav-btns ul {padding:20px 0; border-bottom:1px solid #5880db;}
.sidebar .nav-btns ul li a {display:block; font-size:1.66em; line-height:50px; font-weight:300; color:#fff; }
.sidebar .nav-btns ul li .menu_pic {display:inline-block; width:24px; height:24px; margin-right:5px; vertical-align:middle;}
.sidebar .nav-btns ul li .menu_pic.pic1 {background:url("../../img/common/menu_pic1.png") no-repeat center center; background-size:100% auto; }
.sidebar .nav-btns ul li .menu_pic.pic2 {background:url("../../img/common/menu_pic2.png") no-repeat center center; background-size:100% auto; }
.sidebar .nav-btns ul li .menu_pic.pic3 {background:url("../../img/common/menu_pic3.png") no-repeat center center; background-size:100% auto; }
.sidebar .nav-btns ul li .menu_pic.pic4 {background:url("../../img/common/menu_pic4.png") no-repeat center center; background-size:100% auto; }
.sidebar .nav-btns ul li .menu_pic.pic5 {background:url("../../img/common/menu_pic5.png") no-repeat center center; background-size:100% auto; }
.sidebar .nav-btns ul li span {display:inline-block; vertical-align:middle;}

.sidebar .member-btns {position:absolute; left:0px; bottom:45px; width:100%; padding:0 20px;}
.sidebar .member-btns ul li a {display:block; font-size:1.33em; line-height:35px; font-weight:300; color:#fff; }
.sidebar .member-btns ul li .menu_pic {display:inline-block; width:24px; height:24px; margin-right:5px; vertical-align:middle;}
.sidebar .member-btns ul li .menu_pic.pic6 {background:url("../../img/common/menu_pic6.png") no-repeat center center; background-size:100% auto; }
.sidebar .member-btns ul li .menu_pic.pic7 {background:url("../../img/common/menu_pic7.png") no-repeat center center; background-size:100% auto; }
.sidebar .member-btns ul li span {display:inline-block; vertical-align:middle;}


.none { display:none; }

.red  { color:red; }
.blue { color:blue; }

.mt-1 { margin-top:3px; }
.mt-2 { margin-top:6px; }
.mt-3 { margin-top:9px; }
.mt-4 { margin-top:12px; }
.mt-5 { margin-top:15px; }
.mt-6 { margin-top:25px; }
.mt-7 { margin-top:35px; }

.mt-n1 { margin-top:-3px; }
.mt-n2 { margin-top:-6px; }
.mt-n3 { margin-top:-9px; }
.mt-n4 { margin-top:-12px; }
.mt-n5 { margin-top:-15px; }