@charset "utf-8";
@import url("normalize.css");
@font-face {
    font-family: 'GMK';
    src: url(../font/GmarketSansTTFMedium.woff) format('woff');
}
/* CSS Document */
html,body{
	height:100%;
	/*overflow:hidden;*/
	font-size:13px; line-height:1.5em;
	padding: 0; margin:0;
	color: #555;
}
* html #container{height:100%;} /* IE7 hack*/
/* IE3pixel 버그를 위한것*/
* html #contents{height:1%;}
*{box-sizing: border-box}

#wrap{width: 100%; height: 100%; overflow-y: auto}
/** login **/
.login{display: block; width:400px; overflow: hidden; margin: 8% auto;}
.login span.login_title{display: block; font-size: 22px; text-align: center; letter-spacing: -0.03em; line-height: 1.5em; font-weight: bold; color: #333; padding-bottom: 6px}
.login span.login_set{display: flex; flex-direction: column; padding:20px 20px 0}
.login span.login_set input{flex-basis: 40px; width:320px; border:1px solid #ddd; margin-bottom: 10px; align-self: center; background-color: #eee; border-radius: 3px; padding:0 15px}
.login span.btn a{display: block; width:320px; font-size: 14px; font-weight: bold; color: #fff; line-height: 3em; text-align: center; margin:0 auto; background-color: #2893fb; border-radius: 3px}

/** main **/

.header{position: fixed; top:0; width: 100%; background-color: #2893fb; z-index: 10}
.header h1{font-family: 'GMK'; font-weight: normal; font-size: 24px; text-align: center; color: #fff; margin:10px 0}

#container{padding-top: 150px; overflow: hidden}

.search_area{background-color: #f7f7f7; border-bottom: 1px solid #ddd}
.search_set{position: relative; display: flex; align-items: center;width: 100%; height: 32px; vertical-align: bottom; }
.search_set span.stit{flex: 1;font-size: 15px; font-weight: bold; text-align: center; margin-left:20px;}
.search_set span.stit:first-child{margin-left:0;}
/*.search_set input{}*/
span.input_date input{width: 135px; height: 32px; padding:0 10px; background: url(../../images/main/icon_calendar.png) right 5px center no-repeat; background-color: #fff; border:1px solid #767676; border-radius: 3px}
span.input_select select{width: 150px; height: 32px; padding:0 10px; background: url(../../images/main/icon_select.png) right center no-repeat; background-color: #fff; border:1px solid #767676; border-radius: 3px;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;}
span.input_select select::-ms-expand{display: none}

.search_set a.btn_search{width: 100px; height: 32px; color: #fff; font-weight: ; line-height: 1.3em; text-align: center; padding:8px 0; background-color:#4f4f4f; border-radius: 3px; margin-left:10px; }

.section{display: block; max-width:1024px; padding:20px; margin:0 auto}

.contents{}
.list{}
.list_top{position: relative; display: block; height: 36px; margin-bottom: 10px}
.list_top span.paging_info{position: absolute; left:6px; top:12px; color: #777}
.list_top a.btn_print{position: absolute; right:0; top:0; display: block; width: 140px; height: 32px; line-height: 2.3em; text-align: center; color: #666; border: 2px solid #ddd; border-radius: 3px; background-color: #fff }

.list table{width: 100%; border-collapse: collapse; vertical-align: middle}
.list table tr{border-bottom: 1px solid #ddd}
.list table tr:hover{background-color: #f7f7f7; cursor: pointer}

.list table th{text-align: center; color: #fff; padding:8px 0; background-color: #888}
.list table td{text-align: center; color: #555; padding:10px; }
.list table td.t_left{text-align: left; max-width: 480px;  white-space: nowrap; text-overflow: ellipsis;overflow: hidden;}

@media all and (min-width:412px) and (max-width:1024px){
    .search_set span.stit{flex-grow: 0; white-space: nowrap; padding:0 5px; font-size: 13px; margin-left:5px; text-align: left;}
    .search_set span.stit:first-child{margin-left:0;}
    /*.search_set input{}*/
    span.input_date input{width: 105px;padding-left:5px;}
    span.input_select select{width: 130px; padding-left:5px;}
    .search_set a.btn_search{width: 50px; margin-left:5px; }

    .list table td.t_left{max-width: 360px;}
}


.paging{display: block; text-align:center; margin-top:25px; margin-bottom:80px}
.paging a{display:inline-block; min-width: 23px; height:23px; font-size:11px; line-height:23px; color:#777; background-color: #fff; border:1px solid #e4e4e4; padding:0 2px; margin:0 2px; vertical-align: middle; box-sizing: border-box}
.paging a.on{font-weight: bold; color: #fff; background-color: #757575; border:0}
.paging a.first{width:23px; height:23px; background: url(../../images/left/paging_first.png) center no-repeat; border:1px solid #e4e4e4; padding:0}
.paging a.last{width:23px; height:23px; background: url(../../images/left/paging_last.png) center no-repeat; border:1px solid #e4e4e4; padding:0}

.popup_view{position: fixed; left:0; top:0; width: 100%; height: 100%; z-index: 100}
.view_area{position: absolute; width: 100%; padding:10%; z-index: 2}
.view_box{display: block; width: 720px; height: auto; margin: 0 auto; background-color: #fff; padding-bottom: 30px}
.view_box span.tit{display: block; font-size: 15px; font-weight: bold; color: #fff; text-align: center; background-color:#2893fb; padding:20px 30px}
.view_box span.date{display: block; padding:20px 30px}
.view_box span.note{display: block; height: 320px; padding:10px; border:1px solid #b0b0b0; margin:0 30px 20px; overflow-y: auto}
.view_box a.btn_ok{display: block; width: 240px; height: 42px; font-weight: bold; line-height: 3em; text-align: center; color: #666; border: 2px solid #ddd; border-radius: 3px; background-color: #fff; margin: 0 auto}

.bg_gray{position: absolute;width:100%;height:100%; background:url(../../images/class/map/bg_dark_strong.png) repeat;overflow-y:auto; z-index:1; }