@charset "utf-8";
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
html,
body { font-size:1em; line-height: 1.5; font-family: 'Nanum Gothic', "나눔고딕", "맑은고딕", "malgun gothic", "AppleGothic", Verdana, sans-serif; }
h1,
h2,
h3,
h4,
h5,
h6,
.slim,
.wide,
.current { font-family: 'notokr-bold', 'Nanum Gothic', "나눔고딕", "맑은고딕", "malgun gothic", "AppleGothic", "Segoe UI", Arial, sans-serif;}
h1 { font-size: 36px }
h2 { font-size: 30px; }
h3 { font-size: 24px }
h4 { font-size: 20px }
h5 { font-size: 18px }
h6 { font-size: 16px }
h1,
h2,
h3,
h4,
h5,
h6 { font-weight: 400; margin: 10px 0 }
.wide { letter-spacing: 4px }
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a { font-weight: inherit }
hr { height: 0; border: 0; border-top: 1px solid #eee; margin: 20px 0 }
img { max-width: 100%;}
a { color: inherit;text-decoration:none }
a:hover, a:focus, a:active{text-decoration: underline;}
em, cite, var, address, dfn{font-style: normal;}


/* table */
.table-all {  }
.bordered{border-left: 1px solid #d8d8d8;border-right: 1px solid #d8d8d8}
table.bordered td, 
table.bordered th{border-right:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8;padding-left:5px;padding-right: 5px;}
.striped tbody tr:nth-child(even) { background-color: #f1f1f1 }
.table-all tr:nth-child(odd) { background-color: #fff }
.table-all tr:nth-child(even) { background-color: #f1f1f1 }
.hoverable tbody tr:hover,
.ul.hoverable li:hover { background-color: #ccc }
.centered tr th,
.centered tr td { text-align: center }

.bdView{border-top:2px solid #222;}
.bdView table{}
.bdView table body tr:first-child th, .bdView table body tr:first-child td{border-top:none;}
.bdView table th{text-align: left; padding-left:20px;}
.bdView table td{text-align: left;}
table { width: 100%; margin-bottom: 20px; border-collapse: separate;}
table th, table td { padding: 8px; text-align: center; vertical-align: middle; word-break: break-all; }
table th { font-weight: normal; background-color: #f9f9f9; }
table thead th { text-align: center;}
table th, table td { border-bottom: 1px solid #d8d8d8;border-right: none; border-left: none; }
table tbody + tbody { border-top: 2px solid #c9c9c9 }
table tfoot tr>* { background-color: #d6d6d6; }
table tr.midfoot>*, table tr.bgcol>* { background-color: #efefef; }
table table { background-color: #ffffff }
table tfoot td, table tfoot th, table .total td, table .total th { background: #3E3E3E; color: #fff; font-weight: bold; border-color: #5D5D5D; }

.bdList { clear: both; border-bottom: 1px solid #e4e4e4; position: relative;overflow: hidden;margin-top: 5px;}
.scrollX{overflow-x:auto}
.bdList table td img{max-height: 48px}
.bdList table { width: 100%; margin-bottom: -1px;margin-left: 1px;}
.bdList table th,
.bdList table td { text-align: center;border-bottom:1px solid #d8d8d8;}
.bdList table th {color: #f5f7fa; padding: 11px 0;background-color: #333;position: relative;
	background: #3f77b2;}
.bdList tbody th:first-child{ background-color: #f5f5f5;}
.bdList table th.l2{padding: 5px 0;line-height: 1.2;}
.bdList table td { padding: 5px 0}
.bdList table td.th { font-weight: bold; color: #3c3c3c; padding: 12px 0 }
.bdList table td.tal { padding-left: 10px }
.bdList table tbody th { font-weight:bold; background:#eee;color:#000;padding-left:5px;padding-right:5px }
.bdList table a{font-weight: normal;display: block;}
.bdList table .total th{background:#d64e5e;color:#fff;font-weight:bold}
.bdList .tag{width:70px;line-height: 26px;margin-right: 2px;}
/* .bdList tbody tr:nth-child(odd) td{background-color: #f6f8fb;}
.noStriped tbody tr:nth-child(odd) td{background-color:transparent;} */

dl dt, dl dd{display: inline-block;}
.tableList{border-top:2px solid #222;}
.tableList dl, .tableList dd{display: inline-block;margin:0;padding:0;}
.tableList dt{background:#eee;padding:0 4px;}
.tableList>li>div{display: inline-block;float:left;margin-bottom: 3px;}
.tableList>li{border-bottom:1px solid #e4e4e4;padding:10px 0;}
.tableList>li:last-child{border: none;}

.tableForm{display:table;width:100%}
.tableForm>div, .tableRow{display: table-row;border-bottom: 1px solid #ddd}
.tableCol{display: table-column}
.tableCell{display:table-cell;margin:3px 0;vertical-align: middle;}
.tableFormBg {background:#eee;padding:4px 6px;}

.tabs{width: 100%;}
.tabs .on a{background:#dee1e7;color:#000;}
.tabs a{display: inline-block;width:99%;margin-right: 1%;border:1px solid #dee1e7;}
.tablink{text-align: center;}
.dotBg{display: inline-block;vertical-align: middle;background: url(/static/img/portal/common/dotBg.png) no-repeat 0 0;width: 24px;height: 24px;line-height: 26px;text-align: center;color:#fff}

.btnSet{text-align: center;margin: 10px 0 30px 0;}
.btn,
.btn-block {border:1px solid transparent; display: inline-block; vertical-align: middle; overflow: hidden;color: #fff; background-color: #0377af; text-align: center; cursor: pointer; white-space: nowrap;padding:6px 16px;
border-radius: 5px;}
.btn.disabled,
.btn-block.disabled,
.btn-floating.disabled,
.btn:disabled,
.btn-floating:disabled,
.btn-floating-large.disabled,
.btn-floating-large:disabled { cursor: not-allowed; opacity: 0.3 }
/*.btn.disabled *,
.btn-block.disabled,
.btn-floating.disabled *,
.btn:disabled *,
.btn-floating:disabled * { pointer-events: none }*/
.btn.disabled:hover,
.btn-block.disabled:hover,
.btn:disabled:hover,
.btn-floating.disabled:hover,
.btn-floating:disabled:hover,
.btn-floating-large.disabled:hover,
.btn-floating-large:disabled:hover { box-shadow: none; }
.btn:hover,
.btn-block:hover,
.btn-floating:hover,
.btn-floating-large:hover,
.btn:focus,
.btn-block:focus,
.btn-floating:focus,
.btn-floating-large:focus,
.btn:active,
.btn-block:active,
.btn-floating:active,
.btn-floating-large:active {border:1px dotted #000; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19) }
.btn-block { width: 100% }
.btnMore{width: 100%;text-align: center;}/* 더보기 */
.btnMore:after { content:url(/static/img/common/arrBtm.png);display: inline-block; margin-left: 30px;}
.btn,
.btn-floating,
.btn-floating-large,
.closenav,
.opennav { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; /* user-select: none  */}
.btn-floating,
.btn-floating-large { display: inline-block; text-align: center; color: #fff; background-color: #000; position: relative; overflow: hidden; z-index: 1; padding: 0; border-radius: 50%; cursor: pointer; font-size: 24px }
.btn-floating { width: 40px; height: 40px; line-height: 40px }
.btn-floating-large { width: 56px; height: 56px; line-height: 56px }
.btn-group .btn { float: left }
.btn.ripple { position: relative }
.ripple:after { content: "";  display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px !important; margin-top: -120%; opacity: 0; transition: all 0.8s }
.ripple:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s }

.btn-group{display: inline-block;}
.btn-group li{display: block;float:left;}
.btn-group > .btn { position: relative; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn, 
.btn-group > .dropdown-menu, 
.btn-group > .popover { font-size: 14px; }
.btn-group > .btn-mini { font-size: 10.5px; }
.btn-group > .btn-small { font-size: 11.9px; }
.btn-group > .btn-large { font-size: 17.5px; }
.btn-group > .btn:first-child { margin-left: 0; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-topleft: 4px; }
.btn-group > .btn:last-child, 
.btn-group > .dropdown-toggle { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; }
.btn-group > .btn.large:first-child { margin-left: 0; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-topleft: 6px; }
.btn-group > .btn.large:last-child, 
.btn-group > .large.dropdown-toggle { -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; }
.btn-group > .btn:hover, 
.btn-group > .btn:focus, 
.btn-group > .btn:active, 
.btn-group > .btn.active { z-index: 2; }


.badge,
.tag,
.sign { background-color: #000; color: #fff; display: inline-block; padding-left: 8px; padding-right: 8px; font-weight: normal; text-align: center }
.badge { border-radius: 50% }
ul, li { padding: 0; margin: 0; list-style-type: none; display: block; }
ul li { display: inline-block; }
.ul{list-style-type:none;padding:0;margin:0}
.ul li, .ulBook li{position: relative;padding-left: 15px;display: block;clear:both;}
.ul li{padding:6px 2px 6px 16px;border-bottom:1px solid #ddd}
.ul li:last-child{border-bottom:none}
.ulBook li:before{content: "\f02d";font-family: FontAwesome;font-weight: normal;text-decoration: inherit;position: absolute;top: 0px;left: 0;}

.formList li{display: block;margin-bottom: 5px;float: left;width: 100%;}
.formList label{display: inline-block;float: left;}
.formList .formsData{display: inline-block;float: left;}
.dotUlList{margin-top: 20px;margin-bottom: 20px;}
.dotUlList li{display: block;margin-bottom: 10px;}
.dotUlList li:last-child{margin-bottom: 0;}
.bull>li{background: url(/static/img/portal/common/bullM1.gif) no-repeat 0 7px;margin-left: 10px;padding-left: 14px;display: block;margin-top: 0;}
.bull>li>ul>li, .bullP>li>p, .bull2>li{background: url(/static/img/portal/common/bullM2.gif) no-repeat 0 8px;margin-left:0;padding-left: 14px;display: block;margin-top: 0;font-size: 14px;}
.bullNo>li{display: block;margin-top: 0;}
.textInfor{position: relative;padding-left:20px;display: inline-block;}
.textInfor:before{content: "※";text-decoration: inherit;position: absolute;top:0px;left:-3px;}


.image,
.tooltip,
.display-container { position: relative }
img.image,
.image img { max-width: 100%; height: auto }
.image .title { position: absolute; bottom: 8px; left: 16px; color: #fff; font-size: 20px }
.fluid { max-width: 100%; height: auto }
.tooltip .text { display: none }
.tooltip:hover .text { display: inline-block }
.navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden }
.navbar li { float: left }
.navbar li a { display: block; padding: 8px 5px }
.navbar li a:hover { color: #000; background-color: #ccc }
.navbar .dropdown-hover,
.navbar .dropdown-click { position: static }
.navbar .dropdown-hover:hover,
.navbar .dropdown-hover:first-child,
.navbar .dropdown-click:hover { background-color: #ccc; color: #000 }
.navbar a,
.topnav a,
.sidenav a,
.dropnav a,
.dropdown-content a,
.accordion-content a { text-decoration: none !important }
.navbar .opennav.right { float: right !important }
.topnav { padding: 8px 8px }
.topnav a { padding: 0 8px; border-bottom: 3px solid transparent }
.topnav a:hover { border-bottom: 3px solid #fff }
.topnav .dropdown-hover a { border-bottom: 0 }
.opennav,
.closenav { color: inherit }
.opennav:hover,
.closenav:hover { cursor: pointer; opacity: 0.8 }
.navbar a,
.topnav a,
.sidenav a,
.dropnav a,
.pagination li a,
.hoverable tbody tr,
.btn,
.btn-floating,
.btn-floating-large,
.hover-opacity,
.hover-shadow,
.accordion-content a,
.dropdown-content a,
.dropdown-click:hover,
.dropdown-hover:hover,
.opennav,
.closenav,
.closebtn,
.hover-amber,
.hover-blue,
.hover-light-blue,
.hover-brown,
.hover-cyan,
.hover-blue-grey,
.hover-green,
.hover-light-green,
.hover-indigo,
.hover-khaki,
.hover-lime,
.hover-orange,
.hover-pink,
.hover-purple,
.hover-deep-purple,
.hover-red,
.hover-sand,
.hover-yellow,
.hover-white,
.hover-black,
.hover-grey,
.hover-light-grey,
.hover-dark-grey,
.hover-text-amber,
.hover-text-blue,
.hover-text-light-blue,
.hover-text-brown,
.hover-text-cyan,
.hover-text-blue-grey,
.hover-text-green,
.hover-text-light-green,
.hover-text-indigo,
.hover-text-khaki,
.hover-text-lime,
.hover-text-orange,
.hover-text-pink,
.hover-text-purple,
.hover-text-deep-purple,
.hover-text-red,
.hover-text-sand,
.hover-text-yellow,
.hover-text-white,
.hover-text-black,
.hover-text-grey,
.hover-text-light-grey,
.hover-text-dark-grey { -webkit-transition: all 0.3s ease; transition: all 0.3s ease }
.sidenav { height: 100%; width: 200px; background-color: #fff; position: fixed !important; z-index: 1; overflow: auto }
.sidenav a { padding: 4px 2px 4px 16px }
.sidenav a:hover { background-color: #ccc }
.sidenav a,
.dropnav a { display: block }
.sidenav .dropdown-hover:hover,
.sidenav .dropdown-hover:first-child,
.sidenav .dropdown-click:hover { background-color: #ccc; color: #000 }
.sidenav .dropdown-hover,
.sidenav .dropdown-click { width: 100% }
.sidenav .dropdown-hover .dropdown-content,
.sidenav .dropdown-click .dropdown-content { min-width: 100% }
.main,
#main { transition: margin-left .4s }
.dropnav { background-color: #fff }
.dropnav a:hover { text-decoration: underline !important }

.modal { clear:both;z-index:3000; display: none; padding-top:30px; position:fixed; left: 0; top: 0; width: 100%; height: 100%; overflow:hidden; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4) }
.modal:before{display: block;width: 100%;height: 100%;}
.modal-content { margin: auto; position: relative; padding: 0; outline: 0; width:100%; max-width:900px }
.closebtn { text-decoration: none; float: right; font-size: 24px; font-weight: bold; color: inherit }
.closebtn:hover,
.closebtn:focus { color: #000; text-decoration: none; cursor: pointer }
.pagination { display: inline-block; padding: 0; margin: 0 }
.pagination li { display: inline }
.pagination li a { text-decoration: none; color: #000; float: left; padding: 8px 16px }
.pagination li a:hover,
.pagination li a:focus { background-color: #ccc }

/* form */
label{vertical-align: middle;}
label + .input{width:100%}
label + .select{width:100%}
.half label{width:200px;padding-left: 10px;}
.half label + .input{width:62%}
.half label + .select{width:62%}
.imeInactive{ime-mode:inactive}
.imeActive{ime-mode:active}
.imeDisabled{ime-mode:disabled}
.inputOnfocus{color:#666;}
.inputOnfocus:focus{color:#000;}

.input-group,
.group { margin-top: 24px; margin-bottom: 24px }
.input { padding: 6px;border: 1px solid #808080; width: 100% }
.label { color: #009688 }
/* .input:not(:valid)~.validate { color: #f44336 } */
.select { padding: 4px 0; width: 100%; color: #000; border: 1px solid #808080 }
.select select:focus { color: #000; border: 1px solid #009688 }
.select option[disabled] { color: #009688 }
.dropdown-click,
.dropdown-hover { position: relative; display: inline-block; cursor: pointer }
.dropdown-hover:hover .dropdown-content { display: block; z-index: 1 }
.dropdown-content { cursor: auto; color: #000; background-color: #fff; display: none; position: absolute; min-width: 160px; margin: 0; padding: 0 }
.dropdown-content a { padding: 6px 16px; display: block }
.dropdown-content a:hover { background-color: #ccc }
.accordion { width: 100%; cursor: pointer }
.accordion>button{margin-bottom: 1px;}
.accordion-content { cursor: auto; display: none; position: relative; width: 100%; margin: 0; padding: 0 }
.accordion-content a { padding: 6px 16px; display: block }
.accordion-content a:hover { background-color: #ccc }
.progress-container { width: 100%; height: 1.5em; position: relative; background-color: #f1f1f1 }
.progressbar { background-color: #757575; height: 100%; position: absolute; line-height: inherit }
input[type=text], input[type=password], 
input[type=email], input[type=number]{height:30px; vertical-align: middle;border:1px solid #a1a1a1;padding-left:5px;padding-right:5px;}
input[type=text], input[type=password]{width: 140px;}
input[type=password]{font-size: 11px;}
input[type=file]{width: 100%;}
input[type=checkbox].check,
input[type=radio].radio { width: 24px; height: 24px; position: relative;top:6px;border:none;}
input[type=checkbox].check:checked+.validate,
input[type=radio].radio:checked+.validate { color: #009688 }
input[type=checkbox].check:disabled+.validate,
input[type=radio].radio:disabled+.validate { color: #aaa }
textarea{min-height:250px}
select{border:1px solid #666; padding:5px 0 4px; line-height: 30px}

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], 
input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], 
input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input 
{-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
select{font-size: 15px;}
select,textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], 
input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], 
input[type="search"], input[type="tel"], input[type="color"], .uneditable-input 
{ background-color: #ffffff; border: 1px solid #cccccc; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; 
  -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;}

select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, 
input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, 
input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, 
.uneditable-input:focus { border-color: rgba(82, 168, 236, 0.8); outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}

.responsive { overflow-x: auto }
.container:after,
.row:after,
.row-padding:after,
.topnav:after,
.clear:after,
.btn-group:before,
.btn-group:after { content: ""; display: table; clear: both }

/* grid */
.col,
.half,
.third,
.twothird,
.quarter { float: left; width: 100% }
.col.s1 { width: 8.33333% }
.col.s2 { width: 16.66666% }
.col.s3 { width: 24.99999% }
.col.s4 { width: 33.33333% }
.col.s5 { width: 41.66666% }
.col.s6 { width: 49.99999% }
.col.s7 { width: 58.33333% }
.col.s8 { width: 66.66666% }
.col.s9 { width: 74.99999% }
.col.s10 { width: 83.33333% }
.col.s11 { width: 91.66666% }
.col.s12,
.half,
.third,
.twothird,
.quarter { width: 99.99999% }

/* colume width */
/* .cols1 { -webkit-column-width:  8.33333%;-moz-column-width:  8.33333%; column-width:  8.33333% !important}
.cols2 { -webkit-column-width: 16.66666%;-moz-column-width: 16.66666%; column-width: 16.66666% !important}
.cols3 { -webkit-column-width: 24.99999%;-moz-column-width: 24.99999%; column-width: 24.99999% !important}
.cols4 { -webkit-column-width: 33.33333%;-moz-column-width: 33.33333%; column-width: 33.33333% !important}
.cols5 { -webkit-column-width: 41.66666%;-moz-column-width: 41.66666%; column-width: 41.66666% !important}
.cols6 { -webkit-column-width: 49.99999%;-moz-column-width: 49.99999%; column-width: 49.99999% !important}
.cols7 { -webkit-column-width: 58.33333%;-moz-column-width: 58.33333%; column-width: 58.33333% !important}
.cols8 { -webkit-column-width: 66.66666%;-moz-column-width: 66.66666%; column-width: 66.66666% !important}
.cols9 { -webkit-column-width: 74.99999%;-moz-column-width: 74.99999%; column-width: 74.99999% !important}
.cols10{ -webkit-column-width: 83.33333%;-moz-column-width: 83.33333%; column-width: 83.33333% !important}
.cols11{ -webkit-column-width: 91.66666%;-moz-column-width: 91.66666%; column-width: 91.66666% !important}
.cols12{ -webkit-column-width: 99.99999%;-moz-column-width: 99.99999%; column-width: 99.99999% !important} */
.content { max-width: 980px; margin: auto }
.rest{overflow:hidden;}
.hide { display: none !important }
.show-block,
.show { display: block !important }
.show-inline-block { display: inline-block !important }
.inputInfor{display: inline-block;padding:3px 10px; text-align: left;}


@media only screen and (min-width:601px) {
	.col.m1 { width: 8.33333% }
	.col.m2 { width: 16.66666% }
	.col.m3,
	.quarter { width: 24.99999% }
	.col.m4,
	.third { width: 33.33333% }
	.col.m5 { width: 41.66666% }
	.col.m6,
	.half { width: 49.99999% }
	.col.m7 { width: 58.33333% }
	.col.m8,
	.twothird { width: 66.66666% }
	.col.m9 { width: 74.99999% }
	.col.m10 { width: 83.33333% }
	.col.m11 { width: 91.66666% }
	.col.m12 { width: 99.99999% }
}
@media only screen and (min-width:999px) {
	.col.l1 { width: 8.33333% }
	.col.l2 { width: 16.66666% }
	.col.l3,
	.quarter { width: 24.99999% }
	.col.l4,
	.third { width: 33.33333% }
	.col.l5 { width: 41.66666% }
	.col.l6,
	.half { width: 49.99999% }
	.col.l7 { width: 58.33333% }
	.col.l8,
	.twothird { width: 66.66666% }
	.col.l9 { width: 74.99999% }
	.col.l10 { width: 83.33333% }
	.col.l11 { width: 91.66666% }
	.col.l12 { width: 99.99999% }
}
@media (max-width:767px) {
	.modal-content { margin: 50px 10px 10px 10px; width: auto !important }
}
@media (max-width:768px) {
	.modal-content { width: 500px }
}
@media (min-width:1000px) {
	.modal-content { width: 900px }
}
@media screen and (max-width:767px) {
	.topnav a { display: block }
	.navbar li { float: none; width: 100% !important }
	.navbar li.right { float: none !important }
}
@media screen and (max-width:767px) {
	.topnav .dropdown-hover .dropdown-content,
	.navbar .dropdown-click .dropdown-content,
	.navbar .dropdown-hover .dropdown-content { position: relative }
}
@media screen and (max-width:767px) {
	.topnav,
	.navbar { text-align: center }
}

@media (max-width:470px) {
	.hide-tiny { display: none !important }
	.tinyBlock, .inputInfor{display: block;clear:both; margin-top: 5px;margin-bottom: 5px;}

}
@media (max-width:767px) {
	.hide-small { display: none !important }
	.smallBlock, .inputInfor{display: block;clear:both; margin-top: 5px;margin-bottom: 5px;}
}
@media (max-width:999px) and (min-width:767px) {
	.hide-medium { display: none !important }
}
@media (min-width:1000px) {
	.hide-large { display: none !important }
}
@media screen and (max-width:999px) {
	.sidenav.collapse { display: none }
	.main { margin-left: 0 !important }
}
@media screen and (min-width:999px) {
	.sidenav.collapse { display: block !important }
}
.top,
.bottom { position: fixed; width: 100%; z-index: 1 }
.top { top: 0 }
.bottom { bottom: 0 }
.overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 2 }
.left { float: left !important }
.right { float: right !important }

.btn.tiny{padding: 3px 5px !important}
.btn.small{padding:5px 7px 4px 7px !important}
.tiny { font-size: 11px !important }
.small { font-size: 13px !important }
.medium { font-size: 16px !important }
.large { font-size: 18px !important }
.xlarge { font-size: 22px !important}
.xxlarge { font-size: 30px !important }
.xxxlarge { font-size: 36px !important }

.contentData.small .small,
.contentData.small .medium,
.contentData.small .large,
.contentData.small .xlarge{font-size: 13px !important;}
.contentData.medium .small,
.contentData.medium .medium,
.contentData.medium .large,
.contentData.medium .xlarge{font-size: 16px !important;}
.contentData.large .small,
.contentData.large .medium,
.contentData.large .large,
.contentData.large .xlarge{font-size: 18px !important;}
.contentData.xlarge .small,
.contentData.xlarge .medium,
.contentData.xlarge .large,
.contentData.xlarge .xlarge{font-size: 22px !important;}

.xlarge .tabs li a{font-size: 19px !important;}

.jumbo { font-size: 64px !important }
.vertical { word-break: break-all; line-height: 1; text-align: center; width: 0.6em }
.left-align { text-align: left !important }
.right-align { text-align: right !important }
.justify { text-align: justify !important }
.center { text-align: center !important }
.display-topleft { position: absolute; left: 0; top: 0 }
.display-topright { position: absolute; right: 0; top: 0 }
.display-bottomleft { position: absolute; left: 0; bottom: 0 }
.display-bottomright { position: absolute; right: 0; bottom: 0 }
.display-middle { position: absolute; left: 0; top: 50%; width: 100%; text-align: center }

.circle { border-radius: 50% !important }
.round-small { border-radius: 2px !important }
.round{ border-radius: 3px !important }
.round-medium { border-radius: 5px !important }
.round-large { border-radius: 8px !important }
.round-xlarge { border-radius: 16px !important }
.round-xxlarge { border-radius: 32px !important }
.round-jumbo { border-radius: 64px !important }
.border { border: 1px solid #ccc !important }

.margin { margin: 16px !important }
.margin-top { margin-top: 16px !important }
.margin-bottom { margin-bottom: 16px !important }
.margin-left { margin-left: 16px !important }
.margin-right { margin-right: 16px !important }
.padding-tiny { padding: 2px 4px !important }
.padding-small { padding: 4px 8px !important }
.padding-medium,
.padding,
.form { padding: 5px 10px !important }
.padding-large { padding: 12px 24px !important }
.padding-xlarge { padding: 16px 32px !important }
.padding-xxlarge { padding: 24px 48px !important }
.padding-jumbo { padding: 32px 64px !important }
/* .padding-top { padding-top: 8px !important }
.padding-bottom { padding-bottom: 8px !important }
.padding-left { padding-left: 16px !important }
.padding-right { padding-right: 16px !important } */


.topbar { border-top: 6px solid #ccc !important }
.bottombar { border-bottom: 6px solid #ccc !important }
.leftbar { border-left: 6px solid #ccc !important }
.rightbar { border-right: 6px solid #ccc !important }
.border-red { border-color: #ff6060 !important }
.border-yellow { border-color: #daa520 !important }
.border-green { border-color: #66aa66 !important }
.border-blue { border-color: #1E90FF !important }

.box{padding:10px;}


.row-padding,
.row-padding>.half,
.row-padding>.third,
.row-padding>.twothird,
.row-padding>.quarter,
.row-padding>.col { padding: 0 5px }
.spin { animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear }
@keyframes spin { 0% {
-webkit-transform:rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform:rotate(359deg);
transform:rotate(359deg)
}
}
.container { padding: 0.01em 16px }
.example { background-color: #f1f1f1; padding: 0.01em 16px }
.section,
.paragraph { margin-top: 16px; margin-bottom: 16px }
.code { font-family: Consolas, "courier new"; font-size: 16px; line-height: 1.4; width: auto; background-color: #fff; padding: 8px 12px; border-left: 4px solid #009688; word-wrap: break-word }
.example,
.code,
.reference { margin: 20px 0 }

/* box shadow */
.card { border: 1px solid #ccc }
.card-2,
.example { box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12) !important }
.card-4,
.hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19) !important }
.card-8 { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19) !important }
.card-12 { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19) !important }
.card-16 { box-shadow: 0 16px 24px 0 rgba(0,0,0,0.22), 0 25px 55px 0 rgba(0,0,0,0.21) !important }
.card-24 { box-shadow: 0 24px 24px 0 rgba(0,0,0,0.2), 0 40px 77px 0 rgba(0,0,0,0.22) !important }
.animate-fading { -webkit-animation: fading 10s infinite; animation: fading 10s infinite }
@keyframes fading { 0% {
opacity:0
}
50% {
opacity:1
}
100% {
opacity:0
}
}
.animate-opacity { -webkit-animation: opac 4s; animation: opac 4s }
@keyframes opac { from {
opacity:0
}
to { opacity: 1 }
}
.animate-top { position: relative; -webkit-animation: animatetop 0.4s; animation: animatetop 0.4s }
@keyframes animatetop { from {
top:-300px;
opacity:0
}
to { top: 0; opacity: 1 }
}
.animate-left { position: relative; -webkit-animation: animateleft 0.4s; animation: animateleft 0.4s }
@keyframes animateleft { from {
left:-300px;
opacity:0
}
to { left: 0; opacity: 1 }
}
.animate-right { position: relative; -webkit-animation: animateright 0.4s; animation: animateright 0.4s }
@keyframes animateright { from {
right:-300px;
opacity:0
}
to { right: 0; opacity: 1 }
}
.animate-bottom { position: relative; -webkit-animation: animatebottom 0.4s; animation: animatebottom 0.4s }
@keyframes animatebottom { from {
bottom:-300px;
opacity:0
}
to { bottom: 0; opacity: 1 }
}
.animate-zoom { -webkit-animation: animatezoom 0.6s;animation: animatezoom 0.6s;}
@keyframes animatezoom { 
  from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
  50% { opacity: 1;}
}


@-webkit-keyframes zoomIn {
	from {opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
 	50% {opacity: 1;}
}


.animate-input { -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out }
.animate-input:focus { width: 100% !important }

/* color Text Bg */
.amber,
.hover-amber:hover { color: #000 !important; background-color: #ffc107 !important }
.blue,
.hover-blue:hover { color: #fff !important; background-color: #1970b6 !important }
.light-blue,
.hover-light-blue:hover { color: #000 !important; background-color: #d8eff9 !important }
.brown,
.hover-brown:hover { color: #fff !important; background-color: #795548 !important }
.cyan,
.hover-cyan:hover { color: #000 !important; background-color: #06B6A9 !important }
.blue-grey,
.hover-blue-grey:hover { color: #fff !important; background-color: #5E696F !important }
.green,
.hover-green:hover { color: #fff !important; background-color: #39833C !important }
.light-green,
.hover-light-green:hover { color: #000 !important; background-color: #8bc34a !important }
.indigo,
.hover-indigo:hover { color: #fff !important; background-color: #3f51b5 !important }
.khaki,
.hover-khaki:hover { color: #000 !important; background-color: #f0e68c !important }
.lime,
.hover-lime:hover { color: #000 !important; background-color: #cddc39 !important }
.orange,
.hover-orange:hover { color: #000 !important; background-color: #ff9800 !important }
.pink,
.hover-pink:hover { color: #fff !important; background-color: #c61a54 !important }
.purple,
.hover-purple:hover { color: #fff !important; background-color: #9c27b0 !important }
.deep-purple,
.hover-deep-purple:hover { color: #fff !important; background-color: #673ab7 !important }

.red,
.hover-red:hover { color: #fff !important; background-color: #c00000 !important }
.sand,
.hover-sand:hover { color: #000 !important; background-color: #fdf5e6 !important }
.yellow,
.hover-yellow:hover { color: #000 !important; background-color: #ffeb3b !important }
.white,
.hover-white:hover { color: #000 !important; background-color: #fff !important }
.black,
.hover-black:hover { color: #fff !important; background-color: #000 !important }
.grey,
.hover-grey:hover { color: #fff !important; background-color: #535353 !important }
.light-grey,
.hover-light-grey:hover { color: #000 !important; background-color: #f1f1f1 !important }
.dark-grey,
.hover-dark-grey:hover { color: #fff !important; background-color: #616161 !important }
.pale-red,
.hover-pale-red:hover { color: #000 !important; background-color: #ffe7e7 !important }
.pale-green,
.hover-pale-green:hover { color: #000 !important; background-color: #e7ffe7 !important }
.pale-yellow,
.hover-pale-yellow:hover { color: #000 !important; background-color: #ffffd7 !important }
.sky,
.hover-sky:hover { color: #fff !important; background-color: #00adef !important }
.text-amber,
.hover-text-amber:hover { color: #ffc107 !important }
.text-blue,
.hover-text-blue:hover { color: #0072bc !important }
.text-light-blue,
.hover-text-light-blue:hover { color: #87CEEB !important }
.text-brown,
.hover-text-brown:hover { color: #795548 !important }
.text-cyan,
.hover-text-cyan:hover { color: #00bcd4 !important }
.text-blue-grey,
.hover-text-blue-grey:hover { color: #5E696F !important }
.text-green,
.hover-text-green:hover { color:#008077  !important }
.text-light-green,
.hover-text-light-green:hover { color: #8bc34a !important }
.text-indigo,
.hover-text-indigo:hover { color: #3f51b5 !important }
.text-khaki,
.hover-text-khaki:hover { color: #b4aa50 !important }
.text-lime,
.hover-text-lime:hover { color: #cddc39 !important }
.text-orange,
.hover-text-orange:hover { color: #A26100 !important }
.text-pink,
.hover-text-pink:hover { color: #e91e63 !important }
.text-purple,
.hover-text-purple:hover { color: #9c27b0 !important }
.text-deep-purple,
.hover-text-deep-purple:hover { color: #673ab7 !important }
.text-red,
.hover-text-red:hover { color: #c00000 !important }
.text-sand,
.hover-text-sand:hover { color: #fdf5e6 !important }
.text-yellow,
.hover-text-yellow:hover { color: #d2be0e !important }
.text-white,
.hover-text-white:hover { color: #fff !important }
.text-black,
.hover-text-black:hover { color: #000 !important }
.text-grey,
.hover-text-grey:hover { color: #757575 !important }
.text-light-grey,
.hover-text-light-grey:hover { color: #f1f1f1 !important }
.text-dark-grey,
.hover-text-dark-grey:hover { color: #3a3a3a !important }
.opacity,
.hover-opacity:hover { opacity: 0.60 }
.text-shadow { text-shadow: 1px 1px 0 #444 }
.text-shadow-white { text-shadow: 1px 1px 0 #ddd }


	@media print{
		 html, body {width: 640px; height: 297mm;}
		 .contentData{padding: 0;margin: 0;max-width:640px;}
		 .hide-print{display:none;}
		 .col.m1 { width: 8.33333% }
		.col.m2 { width: 16.66666% }
		.col.m3,
		.quarter { width: 24.99999% }
		.col.m4,
		.third { width: 33.33333% }
		.col.m5 { width: 41.66666% }
		.col.m6,
		.half { width: 49.99999% }
		.col.m7 { width: 58.33333% }
		.col.m8,
		.twothird { width: 66.66666% }
		.col.m9 { width: 74.99999% }
		.col.m10 { width: 83.33333% }
		.col.m11 { width: 91.66666% }
		.col.m12 { width: 99.99999% }
	}