@charset "utf-8";

/* Common */
body,p,hr,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,div {margin:0;padding:0}
body,textarea,table {font-family:'Nanum-Gothic','Noto Sans KR', Gulim, AppleGothic, sans-serif}
img,fieldset{border:0;}
ul,ol{list-style:none;}
em,address {font-style:normal}
a {color:black;text-decoration:none}
a:hover,a:active,a:focus {text-decoration:underline}
.blind {position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;font-size:0;line-height:0}

*{box-sizing:border-box}

.clearfix:before, .clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
.clearfix {*zoom:1;}

.tbl-list,
.tbl-list th,
.tbl-list td{border:0}
.tbl-list{width:100%;margin-bottom:30px;border-collapse:collapse;table-layout:fixed;border-top:2px solid #444}
.tbl-list caption{padding:8px;text-align:left;font-weight:bold}
.tbl-list th,
.tbl-list td{padding:10px 8px;border-bottom:1px solid #e5e5e5}
.tbl-list thead th{;}
.tbl-list tbody td{white-space:nowrap;overflow:hidden}
.tbl-list tbody td .count{color:red;font-size:11px;margin-left:5px}
.tbl-list tbody .finish{opacity:.35}
.tbl-list tbody .item{cursor:pointer}
.tbl-list tbody .active{background-color:#efefef}
.tbl-list .i_text{position:relative;max-width:100%;margin:2px;margin-right:14px;padding:6px 8px;border:1px solid #ddd;outline:none;box-sizing:border-box;}
.tbl-list .i_check,
.tbl-list .i_radio{width:13px;height:13px;margin:2px 5px 2px 0;padding:0;vertical-align:middle}
.tbl-list a{;}
.tbl-list .btn{margin:0 2px}
.tbl-list .btn-detail{cursor:pointer}
.tbl-list .btn-detail:hover{background-color:#f0f0f0}

.tbl-info, .tbl-info th, .tbl-info td{border:0}
.tbl-info{width:100%;border-collapse:collapse;table-layout:fixed;}
.tbl-info caption{padding:8px;text-align:left;font-weight:bold}
.tbl-info th, .tbl-info td{padding:8px;border-bottom:1px solid #e5e5e5}
.tbl-info th{background-color:#f0f0f0;color:#444}

.form-table{;}
.form-table em{color:#f33;font-weight:bold;}
.form-table dl{}
.form-table dl dt{position:relative;margin-bottom:12px;padding:8px 15px;font-size:17px;font-weight:bold;background-color:#efefef;border-left:8px solid #01a0e0;border-radius:5px;}
.form-table dl dt em{position:absolute;top:8px;right:15px;font-size:21px;}
.form-table dl dd{margin-bottom:9px}
.form-table .item{position:relative;}
.form-table .item .i_text{position:relative;margin:2px;padding:12px;border:1px solid #ddd;border-radius:5px;outline:none;box-sizing:border-box;font-size:17px;}
.form-table .item .full{width:100%}

.btn{display:inline-block;padding:8px 12px;border:0;cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1.2em;}
.btn:hover{text-decoration:none}
.btn-small{padding:4px}
.btn-default{background-color:#777;color:#fff;border-radius:3px;}
.btn-default:hover{background-color:#555}
.btn-primary{background-color:#444;color:#fff;border-radius:3px}
.btn-primary:hover{background-color:#222}
.btn-full{width:100%}
.btn-large{padding:12px;font-size:17px;font-weight:bold;border-radius:8px}
.btn-xlarge{padding:15px;font-size:21px;font-weight:bold;border-radius:12px}

.btn-right{padding:6px 0;text-align:right}

.btn-both{padding:8px 0;}
.btn-both:after{display:block;clear:both;content:''}
.btn-both .fl{float:left;}
.btn-both .fr{float:right}

body{position:relative;max-width:720px;margin:0 auto;}
body .mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.6);z-index:100}

.mw{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:1000}
.mw h1{padding:12px;text-align:center;}

.container{;}
.container .page-title{text-align:center}

body{padding-top:46px}
/* // Common */

#header{padding:12px 0;text-align:center}
#header-sub{position:fixed;top:0;left:0;right:0;background-color:#000;z-index:100}
#header-sub h1{padding:6px;color:#ccc;font-size:21px;text-align:center}
#header-sub a{position:absolute;top:8px;left:12px;color:#fff;}

#footer{text-align:center}

#page-main{padding:12px;}
#page-main .nav{;}
#page-main .nav a{display:block;margin-bottom:12px;padding:12px;background-color:#fff;color:#000;text-align:center;font-size:17px;font-weight:bold;box-shadow:0 0 1px #ccc;text-decoration:none}

/* 마이페이지 */
#page-mypage{;}
#page-mypage .container{padding:12px}

/* 로그인 */
#page-login{}
#page-login nav.nav{margin-bottom:30px;}
#page-login nav.nav:after{display:block;clear:both;content:''}
#page-login nav.nav a{display:inline-block;float:left;width:50%;padding:12px;background-color:#777;color:#fff;text-decoration:none;text-align:center}
#page-login nav.nav a.active,
#page-login nav.nav a:hover{background-color:#444;color:#fff}

#page-login .container{padding:8px}
#page-login form{display:block;margin-bottom:30px;padding:20px;background-color:#efefef;border:1px solid #999}
#page-login form h1{margin-bottom:30px;text-align:center;font-weight:bold;}
#page-login form .item{margin-bottom:12px;}
#page-login form .item label{display:block;margin-bottom:6px;font-weight:bold;}
#page-login form .item .i_text{position:relative;padding:6px 8px;border:0;outline:1px solid #ddd;box-sizing:border-box;font-size:15px;}
#page-login form .item .i_text.full{width:100%}
#page-login form .item .i_check{position:relative;top:1px;margin-right:5px;}
#page-login form .btn{}
#page-login .addinfo {padding: 5px 0;}
#page-login .addinfo p{margin-bottom:12px;font-size:15px}
#page-login .addinfo .btn-join{width:100%}

#page-member-join{}
#page-member-join .container{padding:8px}

#page-reserve-study{;}
#page-reserve-study .container{padding:8px}

/* 독서실 신청현황 */
#page-study-status{background-color:#efefef;}
#page-study-status .hx{margin-bottom:12px;text-align:center;background:#037cc3;color:#fff;}
#page-study-status .wrapper{margin-bottom:12px;overflow:auto}
#page-study-status .wrapper .list{width:500px}
#page-study-status .wrapper .list .item{float:left;width:40px;margin:1px;line-height:40px;text-align:center;border:1px solid #ccc}
#page-study-status .wrapper .list .item.empty{border-color:transparent}
#page-study-status .wrapper .list .item.reserved{background-color:#ddd}
#page-study-status .wrapper .list .line{height:16px}

#page-visit{padding:12px}

#page-parking .container{padding:8px}
#page-parking .form-table{margin-bottom:30px}
#page-parking .form-table .i_text{padding:12px;font-size:25px;text-align:center;border-radius:10px}
#page-parking .list-parking{;}
#page-parking .list-parking .item{position:relative;margin-bottom:10px;padding:20px;border:1px solid #ccc;background-color:#f0f0f0;border-radius:10px}
#page-parking .list-parking .item strong{display:block;font-size:17px;}
#page-parking .list-parking .item em{position:absolute;top:20px;right:20px;}
#page-parking .list-parking .item .date{}
#page-parking .list-parking .item.parking-type-R{background-color:#61b43e;color:#fff}
#page-parking .list-parking .item.parking-type-V{background-color:#3e9db4;color:#fff}

#page-training-class-list .container{padding:8px}
#page-training-class-list .form-table{margin-bottom:30px}
#page-training-class-list .form-table .i_text{padding:12px;font-size:25px;text-align:center;border-radius:10px}
#page-training-class-list .list-training-class{;}
#page-training-class-list .list-training-class .item{position:relative;margin-bottom:10px;padding:20px;border:1px solid #ccc;background-color:#f0f0f0;border-radius:10px}
#page-training-class-list .list-training-class .item strong{display:block;font-size:17px;}
#page-training-class-list .list-training-class .item em{position:absolute;top:20px;right:20px;}
#page-training-class-list .list-training-class .item .date{}
#page-training-class-list .list-training-class .item.parking-type-R{background-color:#61b43e;color:#fff}
#page-training-class-list .list-training-class .item.parking-type-V{background-color:#3e9db4;color:#fff}

#page-training-class-info{}
#page-training-class-info .container{padding:8px}
#page-training-class-info .box-sign{padding:12px;border:1px solid #999;border-radius:5px;background-color:#efefef}
#page-training-class-info .box-sign img{max-width:100%}

/* 서명페이지 */
#page-signpad{}
#page-signpad .container{padding:8px}
#page-signpad .signature-pad{position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;font-size: 10px;width:100%;height:100%;max-height: 460px;margin-bottom:15px;border: 1px solid #e8e8e8;background-color: #fff;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;border-radius: 4px;padding: 16px;}
#page-signpad .signature-pad--body {position: relative;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;border: 1px solid #f4f4f4;}
#page-signpad .signature-pad--body canvas {position: relative;left: 0;top: 0;width: 100%;height: 320px;border-radius: 4px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;}

/* GX 출석부  */
#page-attend-gx{;}
#page-attend-gx .form-select-day{}
#page-attend-gx .form-select-day .i_text{position:relative;width:calc(100% - 12px);margin:6px;padding:12px;border:1px solid #ddd;border-radius:5px;outline:none;box-sizing:border-box;font-size:17px;text-align:center}
#page-attend-gx .list-class{max-height:999px;padding:12px;overflow:hidden;transition:.3s}
#page-attend-gx .list-class.hide{max-height:0}
#page-attend-gx .list-class .item{position:relative;margin-bottom:12px;padding:12px;box-shadow:0 0 3px #ccc;background-color:#fff}
#page-attend-gx .list-class .item h1{}
#page-attend-gx .list-class .item .txt-teacher{}
#page-attend-gx .list-class .item .btn-select{position:absolute;top:12px;right:12px}
#page-attend-gx .list-student{display:none;position:fixed;top:0;left:0;right:0;bottom:0;padding-top:30px;background-color:#fff;overflow:auto;z-index:1000}
#page-attend-gx .list-student .btn-close{position:absolute;top:12px;right:12px;}
#page-attend-gx .list-student .list{padding:12px;}
#page-attend-gx .list-student .item{position:relative;margin-bottom:12px;padding:12px;padding-left:30px;box-shadow:0 0 3px #ccc;background-color:#fff}
#page-attend-gx .list-student .item.unlimit{background-color:#efefef}
#page-attend-gx .list-student .item.attend{border-left:3px solid #33f}
#page-attend-gx .list-student .item.attend:after{position:absolute;top:10px;left:9px;display:block;content:'V';font-weight:bold}
#page-attend-gx .list-student .item h2{font-size:15px;}
#page-attend-gx .list-student .item .btn-attend{position:absolute;top:12px;right:12px;padding:6px;font-size:13px;}