@charset "utf-8";
/* CSS Document basic*/

body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,pre,input,textarea,button,select,span{margin:0;padding:0;font-family:'Noto Sans KR', sans-serif;}
html {-webkit-touch-callout:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    -webkit-text-size-adjust:none;}
-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; } 
-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment  {display: block; height: 10px; background: #efefef} 
-webkit-scrollbar-track  { 
    background: #efefef; -webkit-border-radius: 10px; border-radius:10px;  
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2);
} 
:-webkit-scrollbar-thumb  {
    height: 50px; width: 50px; background: rgba(0,0,0,.2);  
    -webkit-border-radius: 8px; border-radius: 8px;  
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)
}



    
div { display:block;}
body {}
#wrap, #wrap_header, #wrap_top, #wrap_search { width:100%; height:auto; float:left; z-index:0; background-color:#fff;}
#wrap_top { height:28px;  background-color:#efefef;}
#wrap_header { height:50px; background-color:#ff9242; margin-bottom:30px;}
#wrap_body { width:960px; height:auto; min-height:800px; position:relative; margin:0px auto; z-index:0; clear:both; margin-bottom:40px;}
#wrap_footer { width:100%; height:auto; min-height:150px; background-color:#f7f7f7; clear:both; position:relative; border-top:1px solid #ddd; }
#wrap_list{margin-top:5px;}
#searchForm a { display:inline-block; margin-top:15px;}
#searchForm input { padding:5px; width:400px; border:2px solid #ff9242; margin-bottom:15px; margin-top:-30px; margin-left:10px;}
#searchForm span { margin-top:-40px;}

ul,li,ol { list-style: none; padding: 0; margin: 0;}
a { text-decoration: none; }

/* GTB class */
#wrap_top > div { max-width:960px; position:relative; margin:0px auto;}
#wrap_top ul {}
#wrap_top li { width:auto; height:25px; line-height:25px; float:left; display:inline-block; margin-right:10px;}
#wrap_top li:first-child {background:url(/skin/image/main/top/top_line.gif) no-repeat right; padding-right:10px;}
#wrap_top li a{ font-size:11px; overflow:hidden; height:20px; line-height:20px; display:block; padding-top:2px; width:auto;}
#wrap_top li a.icons { background:url(/skin/image/icon/icon_tops.png) no-repeat 0 4px; padding-left:18px !important;}
#wrap_top li a.icons.home { background-position:0px -16px;}
#wrap_top li a.icons.login{ background-position:0px -35px;}
#wrap_top li a.icons.logout{ background-position:0px -60px;}
#wrap_top li a.icons.remote{ background-position:0px -75px;}
#wrap_top_right { width:auto; height:25px; display:block;}
#wrap_top_right li { float:left; display:inline; background:url(/skin/image/main/top/top_line.gif) no-repeat right; padding-right:10px;}
#wrap_top_right li:last-child { background:none;}
/* GNB class */
#wrap_gnb { position:relative; width:960px; height:95px; clear:both; margin:0px auto;}
#gnb_logo { margin-top:4px; width:150px; float:left; overflow: hidden; display: inline-block;}
#gnb_left { width:380px; height:auto; z-index:1;}
#gnb_right { width:380px; height:auto;z-index:1;}

/*footer class*/
#wrap_copy { width:960px; position:relative; margin:0px auto; height:auto;}
#wrap_footer_inner { width:960px; position:relative; margin:0px auto; height:auto; clear:both; padding-top:20px;}
#wrap_footer_inner .footer_menu { width:auto; height:auto; margin-bottom:10px; display:inline;}
#wrap_footer_inner .footer_menu li,#wrap_footer_inner .footer_copy li { float:left; width:auto; height:auto; margin-right:15px;background:url(/skin/image/bullet/bullet_pipe.gif) no-repeat right; padding-right:15px;}
#wrap_footer_inner .footer_menu li a {color:#333; display:block;}
#wrap_footer_inner .footer_menu li:last-child { background:none;}
#wrap_footer_inner .footer_copy { margin-top:10px;}
#wrap_footer_inner .footer_copy li { color:#999; font-size:11px; height:20px; background-image:url(/skin/image/bullet/bullet_pipe_small.gif); line-height:20px;}
#wrap_footer_inner .footer_copy li.last { background:none;}
#wrap_footer_inner .copyright { color:#999; font-size:12px; font-family:Arial, Helvetica, sans-serif;}

#loading { display:none;}

/* Button Reset */
.button,.button a,.button button,.button input { position:relative; margin:0; display:-moz-inline-stack; display:inline-block; text-decoration:none !important; border:0; font-size:11px; white-space:nowrap; background:url(/skin/image/btn/buttonWhite.gif) no-repeat; overflow:visible; color:#333;}
.button { height:23px; padding:0 !important; vertical-align:middle; margin-right:2px; background-position:left top;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.button a,.button button,.button input{ left:2px; vertical-align:top; cursor:pointer; z-index:998; display:inline-table; float:left;}

/* Button Size */
.button.large { height:29px !important; background-position:left -30px; }
.button.xLarge { height:35px !important; background-position:left -65px; }
.button.small { height:18px !important; background-position:left -107px; }
.button.normal {height:23px !important; }
.button a,.button button,.button input { height:23px; padding:0 10px 0 8px; font-size:12px; line-height:23px; background-position:right top;}
.button.large a,.button.large button,.button.large input { height:29px; padding:0 10px 0 8px !important; font-size:14px; line-height:25px !important; background-position:right -30px !important;}
.button.xLarge a,.button.xLarge button,.button.xLarge input { height:35px; padding:0px 10px 0px 8px !important; font-size:20px !important; line-height:35px !important; background-position:right -65px !important;}
.button.small a,.button.small button,.button.small input { height:18px; padding:0px 6px 0px 4px !important; font-size:11px; line-height:18px !important; background-position:right -107px !important;}
.button.normal a,.button.normal button,.button.normal input { height:23px !important; padding:0 10px 0 8px !important; font-size:12px !important; line-height:23px !important; background-position:right top;}

/* Button Text Color */
.button *:hover, .button *:active, .button *:focus{ color:#690;}
.button.green, .button.green a,.button.green button,.button.green input { background-image:url(/skin/image/btn/buttonGreen.gif); color:#fff;}
.button.green *:hover,.button.green *:active,.button.green *:focus{ color:#ff0 !important; }
.button.black,.button.black a,.button.black button,.button.black input { background-image:url(/skin/image/btn/buttonBlack.gif); color:#fff !important;}
.button.black *:hover,.button.black *:active,.button.black *:focus{ color:#ff0 !important;}
.button.red,.button.red a,.button.red button,.button.red input { background-image:url(/skin/image/btn/buttonRed.gif); color:#fff !important;}
.button.red *:hover,.button.red *:active,.button.red *:focus{ color:#ff0 !important;}
.button.blue,.button.blue a,.button.blue button,.button.blue input { background-image:url(/skin/image/btn/buttonBlue.gif); color:#fff !important;}
.button.blue *:hover,.button.blue *:active,.button.blue *:focus{ color:#ff0 !important;}

/* Button Text Strong */
.button.strong * { font-weight:600 !important;}
.BallonLayer {	position:absolute; border:1px solid #000; background-color:#eee; display:none; margin-top:5px; width:120px;	height:100px;overflow:auto;}
.button .icons { margin-top:2px; margin-left:10px; margin-right:-10px; float:left; position:relative; z-index:999;}
.button.large .icons { margin-top:5px;}
.icons { background:url(/skin/image/icon/icons.png?date=20150630) no-repeat; width:20px; height:18px; display:block;}
.icons { margin:0px; padding:0px; background-position:-2px 0px;}
.icons.confirm { background-position:-2px 0px;}
.icons.delete { background-position:-22px 0px;}
.icons.print { background-position:-42px 0px;}
.icons.table { background-position:-62px 0px;}
.icons.cal { background-position:-82px 0px;}
.icons.excel { background-position:-102px 0px;}
.icons.search {background-position:-122px 0px;}
.icons.document {background-position:-142px 0px;}
.icons.list {background-position:-162px 0px;}
.icons.add {background-position:-182px 0px;}
.icons.top {background-position:-202px 0px;}
.icons.graph {background-position:-220px 0px;}
.icons.chk {background-position:-240px 0px;}


/*basic table design*/
.tbl_normal { border-top:2px solid #a83338; border-collapse: collapse;}
.tbl_normal th { border-bottom:1px solid #dadcdc; border-right:1px solid #dadcdc; background-color:#f2f2f2; padding:3px;}
.tbl_normal td { border-bottom:1px solid #dadcdc; border-right:1px solid #dadcdc; background-color:#fff; padding:3px;}
.tbl_normal th:last-child { border-right:none;}
.tbl_normal td:last-child { border-right:none;}

.tbl_search { margin-top:10px; border-top:2px solid #ff9242;}
.tbl_search th { border-bottom:1px solid #dadcdc; border-right:1px solid #dadcdc; background-color:#f2f2f2; }
.tbl_search td { border-bottom:1px solid #dadcdc; border-right:1px solid #dadcdc; background-color:#fff; padding:3px;}
.tbl_search th:last-child { border-right:none;}
.tbl_search td:last-child { border-right:none;}

/*input ����*/
.input_full { width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.input_big { width:350px;}
.input_large { width:280px;}
.input_medium { width:200px;}
.input_normal { width:100px;}
.input_small {width:50px !important; min-width:50px !important;}
.d_form.input_small { width:60px !important; min-width:60px !important;}
.input_etc{width:480px; height:200px;}

#tooltip{text-align: center;color: #fff;background: #111;position:absolute;z-index:1000;padding:10px; font-size:11px; max-width:200px;} 
#tooltip:after /* triangle decoration */
{	width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #111;content: '';position: absolute;left: 50%;
	bottom: -10px;margin-left: -10px;}
#tooltip.top:after{	border-top-color: transparent;	border-bottom: 10px solid #111;	top: -20px;	bottom: auto;}
#tooltip.left:after{	left: 10px;margin: 0;}
#tooltip.right:after{	right: 10px;	left: auto;	margin: 0;}

.tooltip{text-align: center;color: #fff;background: #111;position:absolute;z-index:1000;padding:10px; font-size:11px; font-family:"Nanum Gothic";} 
.tooltip:after /* triangle decoration */
{	width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #111;content: '';position: absolute;left: 50%;
	bottom: -10px;margin-left: -10px;}
.tooltip.top:after{	border-top-color: transparent;	border-bottom: 10px solid #111;	top: -20px;	bottom: auto;}
.tooltip.left:after{	left: 10px;margin: 0;}
.tooltip.right:after{	right: 10px;	left: auto;	margin: 0;}

.tbl_normal td > .bid_bidname { font-size:14px;}
.cancel { text-decoration:line-through; color:#aaa;}
.tr_over td { background-color:#fffff3;}
.tr_normal {}

/*basic style*/
.p10 { font-size:10px !important;}
.p11 { font-size:11px !important;}
.p12 { font-size:12px !important;}
.p13 { font-size:13px !important;}
.p14 { font-size:14px !important;}
.pd5 { padding:5px !important;}

/*badge style*/
.tab_bar span.badge { background: #FA623F linear-gradient(to bottom, #FC9F8A, #FA623F) repeat scroll 0% 0%;border-color: #FA5A35;}
.tab_bar span.badge { display: block; position: absolute;top: 9px;right:5px;line-height: 16px;height: 16px;padding: 0px 5px;font-family: Arial,sans-serif;color: #FFF;
text-shadow: 0px 1px rgba(0, 0, 0, 0.25);border: 1px solid;border-radius: 10px;box-shadow: 0px 1px rgba(255, 255, 255, 0.3) inset, 0px 1px 1px rgba(0, 0, 0, 0.08);}

.refreshBtn, .searchBtn{height:40px; line-height: 40px; border: 1px solid #eee; border-radius: 5px; width: 45%;}
.refreshBtn{background: #F4F4F4}
.searchBtn{background: #1F3A7B; color:#fff}
.tab-bar-btn{font-weight: bold;}

.align_left {text-align:left !important;}
.align_center {text-align:center !important;}
.align_right {text-align:right !important;}

/* 
** grid 
*/

.grid_5 {width:5%;}
.grid_10 {width:10%;}
.grid_15 {width:15%;}
.grid_20 {width:20%;}
.grid_25 {width:25%;}
.grid_30 {width:30%;}
.grid_35 {width:35%;}
.grid_40 {width:40%;}
.grid_45 {width:45%;}
.grid_50 {width:50%;}
.grid_55 {width:55%;}
.grid_60 {width:60%;}
.grid_65 {width:65%;}
.grid_70 {width:70%;}
.grid_75 {width:75%;}
.grid_80 {width:80%;}
.grid_85 {width:85%;}
.grid_90 {width:90%;}
.grid_95 {width:95%;}
.grid_100 {width:100%;}

/* 
	kica m css
 */
 
.d_wrap {display:block;*width:100%;clear:both;}
.d_wrap:after {display:block;height:0;content:".";font-size:0;visibility:hidden;clear:both;}

.d_box { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
 
.mdl-subtitle {
    background-color: #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 0 2px;
	
}


.mdl-subtitle span {
    font-size: 16px;
    line-height: 14px;
    color: #333;
    font-weight: bold;}

.mdl-layout__drawer { border-right: none;}
.mdl-navigation__link { font-size: 16px !important; color: #fff !important;}
.mdl-navigation__link:hover,.mdl-navigation__link.on { background:#1F3A7B !important; color: #fff !important; font-weight: 700; padding: 17px 16px !important;}
.mdl-navigation__link .material-icons{ transform: rotate(-90deg); }
.mdl-layout__drawer > .mdl-layout-title { height: 65px !important; }
.mdl-layout__drawer > .mdl-layout-title .logo-image { position: absolute; bottom: 15px;}
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:first-child { border-top: 1px solid #555; }
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link { padding: 13px; border-bottom: 1px solid #555 }
.mdl-layout__header { background-color: #fff;}
.mdl-layout__header .mdl-layout__drawer-button { color: #666; }
.mdl-layout__drawer.is-visible { background: #343434; border-right: 1px solid #555; }
 
table.d_table {table-layout:fixed;width:100%;margin:1em 0 1.5em;border:1px solid #e2e2e2;border-width:1px 0 0 1px;border-spacing:0px; border-collapse:collapse;}
table.d_table caption {font-weight:bold;margin:0 0 1em;text-align:left;}
table.d_table th, 
table.d_table td {padding:20px 8px;border:1px solid #e2e2e2;border-width:0 1px 1px 0;text-align:left;word-break:break-all; background-color: #fff;}
table.d_table th {background:#f7f7f7;}
table.d_table tr.on td {background:#ffffff;}
table.d_table tr.\blue td { background-color: #fdf9f9;}
table.d_table tr.bg_red td { background-color: #fdf9f9;}
table.d_table tr.bg_gray td { background-color: #f4f4f4;}
table.d_table tr.bg_orange td { background-color: #fffbf4;}
table.d_table tr.bg_green td { background-color: #f8fff9;}
table.d_table tr.bg_ivory td { background-color: #fffcf0;}
table.d_table tr.bg_yellow td { background-color: #fffff0;}

table.d_table th.font_small{ font-size: smaller}
table.d_table td.font_small{ font-size: smaller}
table.d_table th.font_xmall{ font-size: x-small}
table.d_table td.font_xmall{ font-size: x-small}

.d_table.type_board {border:none;}
.d_table.type_board th {border:none;border-top:1px solid #dadcdc;border-bottom:1px solid #e3e3e3}
.d_table.type_board th:first-child {border-radius:0.5em 0 0 0.5em}
.d_table.type_board th:last-child {border-radius:0 0.5em 0.5em 0}
.d_table.type_board td {border-width:0 0 1px 0; word-break:break-all;}
.d_table.type_board tr:hover td {background:#fffff4;}

.d_table th, d_table td > span { font-size: 15px; }
input[type="text"],input[type="date"],input[type="password"] { 
	ont-family: inherit; padding: .8em .5em; font-size: 14px;border-radius: 0px; 

	border: 1px solid #999;}

.inp_bx { margin: 0 auto; margin-bottom: 10px; width: 157px;}
.inp_bx input { height: 10px; width: 140px;}
.btn_login {
	top: 50px;
	width: 50px;
	background: #f1f1f1;
	border: 1px solid #c1c1c1;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: rgb(193, 193, 193);
	border-left: 0;
	color: #1b1b1b;
	font-size: 12px;
	line-height: 50px;
	text-align: center;
	float: left !important;
}

select { padding: .8em .5em;  font-family: inherit; border: 1px solid #999; border-radius: 0px;  -webkit-appearance: none; -moz-appearance: none; appearance: auto; font-size: 14px;} 

select::-ms-expand { display: none; }
input[type="text"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    font-size:14px;
}



/* 
	smpp.go.kr menu
 */
 
.m_menu_bx .cbp-spmenu-vertical{
	width: 300px;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.m_menu_bx .cbp-spmenu {
	background: #343434;
	border-left: 1px solid #555;
}

.m_menu_bx .cbp-spmenu-vertical {
	z-index: 1500;
}

.cbp-spmenu-vertical {
	width: 240px;
	height: 100%;
	top: 0;
	z-index: 1000;
}

.cbp-spmenu {
	position: fixed;
}

.m_menu_bx .btn_clse{
	position: absolute;
	top: 0;
	left: 0;
	padding: 14px 16px 12px;
	border-right: 1px solid #555;
}

.m_menu_bx .tx_num {
	position: absolute;
	top: 16px;
	right: 20px;
	padding: 0;
	border: 0;
	font-size: 11px;
	color: #fff;
	line-height: 22px;
	vertical-align: top;
}

.m_menu_bx .m_menu_inner{
	margin-top: 54px;
	padding-bottom: 30px;
	border-top: 1px solid #555;
}

/* 
	smpp.go.kr �޴� ��ư	
 */

@media only screen and (max-device-width:568px) {
    input[type="text"]:focus,
    textarea:focus,
    select:focus {
        font-size:14px;
    }
    
}

/**** Mobile layout ****/
@media (max-width: 900px) {
  .mobile-navigation-container {
    display: none;
  }

  .mobile-title {
    display: none !important;
  }

  .mobile-mobile-title {
    display: block !important;
    position: absolute;
        left: 50%;
        transform: translate(-50%);
    top: 12px;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10 break
     consecutive "+" operators in some cases. Therefore, we need to use both
     here to cover all the bases. */
  .mobile.mobile-search-box.is-focused ~ .mobile-mobile-title,
  .mobile-search-box.is-focused + .mobile-navigation-container + .mobile-mobile-title {
    opacity: 0;
  }

  .mobile-more-button {
    display: none;
  }

  .mobile-search-box.is-focused {
    width: calc(100% - 48px);
  }

  .mobile-search-box .mdl-textfield__expandable-holder {
    width: 100%;
  }

  .mobile-be-together-section {
    height: 350px;
  }

  .mobile-slogan {
    font-size: 26px;
    margin: 0 16px;
    padding-top: 24px;
  }

  .mobile-sub-slogan {
    font-size: 16px;
    margin: 0 16px;
    padding-top: 8px;
  }

  .mobile-create-character {
    padding-top: 200px;
    font-size: 16px;
  }

  .mobile-create-character img {
    height: 12px;
  }

  .mobile-fab {
    display: none;
  }

  .mobile-wear-band-text {
    margin-left: 0;
    padding: 16px;
  }

  .mobile-footer .mdl-mega-footer--bottom-section {
    display: none;
  }
}
 .small { font-size: 11px !important;}
 
 .mdl-notice { float: left; width: 100%;line-height: 35px; background-color:#efefef; color: #666; min-height: 35px; padding-bottom: 10px; text-align: center; padding-top: 5px; position: relative; z-index: 100;margin-top: 5px;}
 .mdl-notice i { vertical-align: middle; font-size: 15px;}
 a:hover { color: #aaa;}
 
 .mdl-subtitle { width: 100%; clear: both; 
    height: 50px;
    line-height: 50px;
    text-align: center;}
 .mdl-subtitle .mdl-subtitle_right { float: right; width: auto; margin-right: 5px;}
 .mdl-subtitle .mdl-subtitle_left { float: left; width: auto;}
 
 .mdl-tabs__tab { font-weight: bold;
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    margin-right: 10px;
    color: #666;}