@charset "UTF-8";

body { position: relative; }
#wrap { min-width: 728px; max-width: 1500px; padding: 0 20px 40px 20px; }

/*
font-family: NanumGothic;
font-family: NanumBold;
font-family: NanumExBold;
font-family: GothamBook;
*/


/* LOGIN */

#login { display: table; width: 100%; height: 100%; position: relative; }
#login > article { display: table-cell; vertical-align: middle; padding: 100px 0 200px 0; }
#login h1 { width: 189px;  height: 60px; overflow: hidden; background: url("../../img/logo.png") no-repeat center 0; margin: 0 auto; text-indent: -9999em; margin-bottom: 20px;} 
#login .box { border: #333333 5px solid; padding: 40px 30px 30px 30px; max-width: 530px; margin: 0 auto; }
#login .box .tit { width: 122px; height: 44px; background: url("../../img/adminLogin.png") no-repeat 0 0; text-indent: -9999em; margin-bottom: 57px; }
#login .box .login_input { padding-right: 80px; text-align: right; position: relative; }
#login .box .login_input li { padding-bottom: 10px; }
#login .box .login_input label.idSave { display: inline-block; width: 200px; text-align: left; color: #555555; font-size: 12px; }
#login .box .login_input label.idSave input[type="checkbox"] { width: 13px; height: 13px; }
#login .box .login_input label span { display: inline-block; font-family: GothamBook; font-size: 13px; width: 90px; color: #333333; text-align: left;  }
#login .box .login_input label input[type="text"],
#login .box .login_input label input[type="password"] { border: #bbbbbb 1px solid; width: 178px; }
#login .box .login_input .loginBtn { position: absolute; top: 0; right: 0; display: block; text-indent: -9999em; width: 70px; height: 70px; background: url("../../img/loginBtn.png") no-repeat 0 0; text-align: left; }
#login #footer { position: absolute; bottom: 0; left: 0; width: 100%; }




/* ADMIN 공통 */

#header { position: relative; overflow: hidden; padding-top: 75px; padding-bottom: 30px; }
#header h1 { position: absolute; top: 29px; left: 0; width: 189px; height: 60px; overflow: hidden; text-indent: -9999em; background: url("../../img/logo.png") no-repeat 0 0; }
#header .topLink { text-align: right; padding-bottom: 20px; }
#header .topLink li { display: inline-block; font-weight: bold; padding: 0 14px 0 10px; background: url("../../img/line.png") no-repeat right 50%; }
#header .topLink li:last-child { background: none; padding-right: 0; }
#header .topLink li a { color: #323232; }
#header .menu { }
#header .menu li { width: 25%; float: left; }
#header .menu li a { color: #fff; font-size: 16px; font-weight: bold; display: block; border-right: #444444 1px solid; background-color: #252525; height: 50px; line-height: 50px; text-align: center; }
#header .menu li a.on { color: #fff; background-color: #c00808; }


.container { clear: both; }
.contents { }


/* 피팅예약관리_내스케줄관리 */


#mySchedule { position: relative; border-top: #666666 1px solid; border-bottom: #aeaeae 1px solid; border-left: #666666 1px solid; border-right: #666666 1px solid; }
#mySchedule .date { width: 100%; text-align: center; border-bottom: #aaaaaa 1px solid; }
#mySchedule .date th {  }
#mySchedule .date td { }
#mySchedule .date tbody tr td { /*border-right: #aaaaaa 1px solid;*/ }
#mySchedule .date > tbody tr td table { width: 100%; }
#mySchedule .date > tbody tr td table td:last-child { border-right: none; }	

#mySchedule .date > tbody tr td.first { font-size: 12px; }
#mySchedule .date > tbody tr td.first > p:first-child { font-weight: normal; background: #666666 url("../../img/fittingBg.png") repeat-y right 0; }
#mySchedule .date > tbody tr td.first > p:last-child { height: 93px; line-height: 90px; background: #f4f4f4 url("../../img/fittingBg.png") repeat-y right 0;  }
#mySchedule .date > tbody tr td.left { /* border-left: #aaaaaa 1px solid; border-right: #aaaaaa 1px solid;*/ background: url("../../img/fittingBg.png") repeat-y right 0; }
#mySchedule .date > tbody tr td.left img { width: 90%;  }
#mySchedule .date > tbody tr td.right { border-right: none; }
#mySchedule .date > tbody tr td.right img { width: 90%;  }


#mySchedule .date > tbody tr td > p {}
#mySchedule .date > tbody tr td > p:first-child { background: #666666 url("../../img/fittingBg.png") repeat-y right 0; color: #fff; height: 40px; line-height: 40px; font-weight: bold; }

#mySchedule .date > tbody tr td > p:last-child { background: #f4f4f4 url("../../img/fittingBg.png") repeat-y right 0;  }
#mySchedule .date > tbody tr td > p span { display: block; padding: 5px 0 6px 0; line-height: 1.6; height: 35px; border-bottom: #dddddd 1px solid; font-size: 12px; word-break: break-all; overflow: hidden; }
#mySchedule .date > tbody tr td > p span:last-child { border-bottom: none;}


#mySchedule div.time { /*overflow-y: scroll;*/ height: 560px; position: relative; }
#mySchedule div.time .mCSB_inside > .mCSB_container { margin-right: 17px !important; }
#mySchedule div.time .mCSB_scrollTools { width: 17px; }
#mySchedule div.time .mCSB_scrollTools .mCSB_draggerRail { width: 13px; }
#mySchedule div.time .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 13px; }



#mySchedule div.time table.timeTable {  }
#mySchedule div.time table.timeTable tr:nth-child(odd) td { border-bottom: #e7e7e7 1px dashed; }
#mySchedule div.time table.timeTable tr:nth-child(even) td { border-bottom: #e7e7e7 1px solid; }
#mySchedule div.time table.timeTable td { font-size: 12px; text-align: center; height: 30px; background: url("../../img/fittingBg.png") repeat-y right 0; }

#mySchedule div.time table.layout { width: 100%; }
#mySchedule div.time table.layout .line { /*border-right: #aaaaaa 1px solid;*/ vertical-align: top; }

#mySchedule div.time div.relative { width: 100%; position: relative;  }


#mySchedule div.time table.dayList { width: 100%; text-align: center; }
#mySchedule div.time table.dayList th { }
#mySchedule div.time table.dayList td { height: 30px; /*border-right: #aaaaaa 1px solid;*/ background: url("../../img/fittingBg.png") repeat-y right 0; position: relative; }
#mySchedule div.time table.dayList td:last-child { }
#mySchedule div.time table.dayList tr:nth-child(odd) td { border-bottom: #e7e7e7 1px dashed; }
#mySchedule div.time table.dayList tr:nth-child(even) td { border-bottom: #e7e7e7 1px solid; }

#mySchedule div.time table.dayList td > div { position: absolute; width: 96%; left: 0; background-color: #fff; margin: 0 1.5%; font-size: 12px; height: 28px; line-height: 1.2; z-index: 10; display: table; line-height: 1.1; }
#mySchedule div.time table.dayList td > div a { display: table-cell; vertical-align: middle; color: #333333; letter-spacing: -1px; word-spacing: -2px;  font-weight: bold; vertical-align: middle; border: #aaaaaa 1px solid; }
#mySchedule div.time table.dayList td > div a.insert { border: #c00808 1px solid; background-color: #c00808; color: #fff; letter-spacing: 0; }

@media all and (max-width: 850px) {
	#mySchedule div.time table.dayList td > div { font-size: 11px; }
	#mySchedule div.time table.dayList td > div a { word-spacing: -1px; }
}

#mySchedule div.time table.dayList td > div.s00 { top: 0; }
#mySchedule div.time table.dayList td > div.s10 { top: 10px; }
#mySchedule div.time table.dayList td > div.s20 { top: 20px; }


#mySchedule div.time table.today { position: absolute; top: 0; left: 0; width: 100%; border-right: none; height: 1488px; z-index: -10;  }
#mySchedule div.time table.today td { border: none; }
#mySchedule div.time table.today td.here { height: 100%; background-color: #f4f4f4; }



#calendar { }

#calendar .month { position: relative; width: 200px; height: 25px; line-height: 25px; margin: 0 auto; margin-bottom: 10px; }
#calendar .month { text-align: center; overflow: hidden;   }
#calendar .month p { font-size: 18px; font-weight: bold; }
#calendar .month a.prevMonth { width: 25px; height: 25px; display: block; background: url("../../img/prevMonth.png") no-repeat 0 0; text-indent: -9999em; position: absolute; top: 0; left: 0; }
#calendar .month a.nextMonth { width: 25px; height: 25px; display: block; background: url("../../img/nextMonth.png") no-repeat 0 0; text-indent: -9999em; position: absolute; top: 0; right: 0; }

#calendar .calTable { }
#calendar .calTable table { width: 100%;  border: #666666 1px solid; }
#calendar .calTable table th { background-color: #666666; padding: 10px 0; color: #fff; font-size: 14px; font-weight: bold; border-right: #aeaeae 1px solid;}
#calendar .calTable table th:last-child { border-right: nonr; }
#calendar .calTable table td { border-right: #aeaeae 1px solid; border-bottom: #dddddd 1px solid; vertical-align: top; }
#calendar .calTable table td:last-child { border-right: none; }
#calendar .calTable table tr:last-child td { border-bottom: none; }
#calendar .calTable table td:first-child p { color: #d11a1a; }
#calendar .calTable table td:last-child p { color: #888888; }
#calendar .calTable table td.here { background-color: #f4f4f4; }

#calendar .calTable table td p { text-align: right; padding: 5px; font-weight: bold; }
#calendar .calTable table td > div { height: 213px; }
#calendar .calTable table td > div.scrollBox { /*overflow-y: scroll;*/ height: 212px;}
#calendar .calTable table td > div.scrollBox ul { padding: 0 0 0 5px; }
#calendar .calTable table td > div.scrollBox ul li { padding-bottom: 2px; font-size: 12px; letter-spacing: -1px; padding-left: 32px; text-indent: -32px; }
#calendar .calTable table td > div.scrollBox ul li span { color: #fff; font-weight: bold; margin-right: 1px; padding: 1px 4px;   }
#calendar .calTable table td > div.scrollBox ul li span.succ { background-color: #c00808; }
#calendar .calTable table td > div.scrollBox ul li span.reser { background-color: #434343; }
#calendar .calTable table td > div.scrollBox ul li mark { display: inline; }





.session { padding-bottom: 30px; }

.possibility { }
.possibility dt {  font-size: 16px; padding-bottom: 12px; font-weight: bold; }
.possibility dd { }

.dataCols table td.sms { padding-top: 12px; padding-bottom: 12px;   }
.dataCols table td.sms p { padding-bottom: 10px; }
.dataCols table td.sms div.textBox { display: table; width: 100%; height: 100%; }
.dataCols table td.sms div.textBox  > div { display: table-cell; padding-right: 10px; }
.dataCols table td.sms div.textBox  > a { display: table-cell; width: 124px; height: 100% !important; text-align: center; line-height: auto !important; padding: 0 !important;  }


.mw80 { min-width: 80px !important; }
.w500 { width: 500px;  }
.w60 { width: 60px;  }
.w80 { width: 80px;  }


select { height: 30px; line-height: 30px; border: #777777 1px solid; padding-left: 5px; min-width: 120px; font-family: NanumGothic; font-size: 14px; }
input { height: 28px; line-height: 28px; border: #777777 1px solid; padding: 0 10px; font-family: NanumGothic; font-size: 14px; }
input[type="checkbox"], 
input[type="radio"] { width: 18px; height: 18px; -moz-appearance: none; }
textarea { width: 98%; height: 80px; border: #777777 1px solid; padding: 10px 1%; font-family: NanumGothic; font-size: 14px; }
label { white-space: nowrap; }
button { font-family: NanumGothic; font-size: 14px; }


/* 탭 스타일 */
.tab { width: 100%; background: url("../../img/tabBg.png") repeat-x 0 0; margin-bottom: 20px; position: relative; }
.tab ul { }
.tab ul li { display: inline-block; background-color: #fff;  }
.tab ul li a { display: block; height: 33px; line-height: 33px; border: #555555 1px solid; border-bottom: #c00808 1px solid;; font-weight: bold; color: #555555; padding: 0 18px; }
.tab ul li a.on { color: #c00808; border: #c00808 1px solid; border-bottom: #fff 1px solid; }
.tab > select { position: absolute; top: 0; right: 0;  }


a.calBtn { display: inline-block; width: 30px; height: 30px; background: url("../../img/calBtn.png") no-repeat 0 0; text-indent: -9999em; vertical-align: top; }



.search { width: 100%; display: table; margin-bottom: 30px; }
.search > div { display: table-cell; padding-right: 10px; }
.search table { width: 100%; border-top: #252525 1px solid; border-bottom: #252525 1px solid; }
.search table th { background-color: #f4f4f4; border-bottom: #aeaeae 1px solid; padding: 10px; text-align: left; }
.search table td { border-bottom: #aeaeae 1px solid; padding: 5px 10px; }
.search table tr:last-child th,
.search table tr:last-child td { border-bottom: #252525 1px solid; }
.search table td label { margin-right: 15px; }

.search > a { display: table-cell; text-align: right; font-size: 18px; width: 124px; height: 100%; background-color: #c00808; color: #fff; font-weight: bold; text-align: center; vertical-align: middle; }


.topBtn { position: relative; min-height: 30px; padding-bottom: 10px; }
.topBtn > a { display: inline-block; height: 30px; line-height: 30px; background-color: #c00808; color: #fff; font-weight: bold; padding: 0 10px; vertical-align: middle; margin-left: 5px; }
.topBtn p { position: absolute; top: 0; right: 0; }
.topBtn p > a { display: inline-block; font-weight: bold; height: 28px; line-height: 28px; border: #c00808 1px solid; color: #c00808; padding: 0 20px; }

.dataRows { margin-bottom: 30px; }
.dataRows table { width: 100%; }
.dataRows table th { background-color: #666666; color: #fff; padding: 10px 0; text-align: center; border-right: #aeaeae 1px solid; }
.dataRows table td { padding: 10px 0; border-right: #aeaeae 1px solid; border-bottom: #dddddd 1px solid; text-align: center; }
.dataRows table td.left { text-align: left;  }
.dataRows table th:last-child, 
.dataRows table td:last-child { border-right: none; }
.dataRows table tr:last-child td { border-bottom: #666666 1px solid; }
.dataRows table td a { text-decoration: underline;  }
.dataRows table td a.resultBtn { text-decoration: none; display: inline-block; height: 24px; line-height: 24px; background-color: #c00808; color: #fff; font-weight: bold; padding: 0 15px; vertical-align: middle; font-size: 12px; }
.dataRows table td a.liveBtn { width: 52px; text-decoration: none; display: inline-block; height: 24px; line-height: 24px; background-color: #c00808; color: #fff; font-weight: bold; padding: 0 10px; vertical-align: middle; font-size: 12px; text-align: center; }
.dataRows table td a.liveCenBtn { width: 50px; text-decoration: none; display: inline-block; height: 22px; line-height: 22px; border: #c00808 1px solid; color: #c00808; font-weight: bold; padding: 0 10px; vertical-align: middle; font-size: 12px; text-align: center; }
.dataRows table td a.modBtn { width: 52px; text-decoration: none; display: inline-block; height: 24px; line-height: 24px; background-color: #888888; color: #fff; font-weight: bold; padding: 0 10px; vertical-align: middle; font-size: 12px; text-align: center;  }
.dataRows table th.unLine { border-bottom: #aeaeae 1px solid; }

.dataCols { width: 100%; margin-bottom: 30px; }
.dataCols table { width: 100%; border-top: #252525 1px solid; border-bottom: #252525 1px solid; }
.dataCols table th { background-color: #f4f4f4; border-bottom: #aeaeae 1px solid; padding: 10px; text-align: left; }
.dataCols table th span { color: #c00808; }
.dataCols table td { border-bottom: #aeaeae 1px solid; padding: 5px 10px; }
.dataCols table tr:last-child th,
.dataCols table tr:last-child td { border-bottom: #252525 1px solid !important; }
.dataCols table td label { margin-right: 15px; }

.dataCols table .fChoice { padding: 2px 10px; }
.dataCols table .fName { display: inline; line-height: 2.3;}
.dataCols table .fName select { margin-bottom: 2px;  }
.dataCols table .fName span { margin-right: 4px;  }
.dataCols table .fitterAdd { margin-bottom: 2px; }


.dataCols table .timeBubble { position: relative; display: inline-block; z-index: 10; }
.dataCols table .timeBubble button { width: 120px; height: 30px; display: inline-block; border: #c00808 1px solid; color: #c00808; font-size: 12px; background-color: #fff; vertical-align: middle; font-weight: bold;  }
.dataCols table .timeBubble .bubble { display: none; position: absolute; width: 150px; top: -10px; right: -160px;   background: url("../../img/bubble.png") no-repeat 0 19px; padding-left: 6px; }
.dataCols table .timeBubble .bubble ul { border: #c00808 1px solid; padding: 7px 12px; border-radius: 5px; background-color: #fff; }
.dataCols table .timeBubble .bubble ul li { height: 24px; line-height: 24px; border-bottom: #aaaaaa 1px dashed; padding: 0 3px; font-size: 13px; }
.dataCols table .timeBubble .bubble ul li:last-child { border-bottom: none; }

@media all and (max-width: 1024px) {
	.dataCols table .timeBubble .bubble { top: 34px; left: -12px; background: url("../../img/bubble2.png") no-repeat 32% 0; padding-left: 0; padding-top: 6px; }
}





.dataCols table td a { display: inline-block; height: 30px; line-height: 30px; background-color: #c00808; color: #fff; font-weight: bold; padding: 0 10px; vertical-align: middle; }
.dataCols table td a.calBtn { padding: 0; }

.dataCols table td > span { color: #c00808; font-size: 12px; padding-left: 10px; }
.dataCols table td.textMax { padding-top: 12px; padding-bottom: 12px; }
.dataCols table td.textMax > p { color: #c00808; text-align: right; font-size: 12px; padding-bottom: 5px;  } 

.dataCols table .exc { border-bottom: #252525 1px solid; }
.dataCols table th.rLine { border-right: #aeaeae 1px solid; }




h2 { color: #222222; font-size: 20px; padding-bottom: 20px; }
h3 { font-size: 16px; padding-bottom: 12px; position: relative; }
h3 select { position: absolute; top: -5px; right: 0; }


.btn { text-align: center; font-weight: bold; position: relative; }
.rBtn { height: 40px; line-height: 40px; display: inline-block; background-color: #c00808; color: #fff; font-size: 18px; padding: 0 35px; }
.gBtn { height: 40px; line-height: 40px; display: inline-block; background-color: #666666; color: #fff; font-size: 18px; padding: 0 35px; }
.btn > p { position: absolute; top: 0; right: 0;  }
.btn > p a { height: 38px; line-height: 38px; display: inline-block; border: #c00808 1px solid; color: #c00808; font-size: 18px; padding: 0 35px; }
/*
.btn > p a { display: inline-block; font-weight: bold; height: 28px; line-height: 28px; border: #c00808 1px solid; color: #c00808; padding: 0 20px; }*/



.bototmPaging { position: relative; min-height: 30px; padding: 0 0 25px 0;  }
.bototmPaging .paging { text-align: center; }
.bototmPaging .paging ul { display: inline; padding: 0 10px; }
.bototmPaging .paging li { display: inline; padding: 0 3px; font-weight: bold; }
.bototmPaging .paging li a { color: #343434; }
.bototmPaging .paging li.on a { color: #c0080a; }
.bototmPaging > a { position: absolute; top: -3px; right: 0; height: 30px; line-height: 30px; font-weight: bold; background-color: #666666; color: #fff; text-align: center; width: 92px; }





#footer { border-top: #aaaaaa 1px solid; padding: 20px 0 40px 0; }
#footer p { font-family: GothamBook; font-size: 12px; color: #555555; padding: 0 20px; }






.dim { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: .6; z-index: 999;  }
.popup { display: none; position: fixed; top: 150px; left: 0; width: 100%; z-index: 1000; }
.popup > div { width: 60%; min-width: 400px; max-width: 550px; margin: 0 auto; background-color: #fff; padding: 30px 20px; border: #333333 1px solid; border-top: #c00808 5px solid; position: relative; }
.popup > div h1 { color: #222222; font-size: 20px; padding-bottom: 17px; }
.popup > div .dataRows { margin-bottom: 20px; }


.popBtn { text-align: center; font-weight: bold; position: relative; }
popBtn .rBtn { height: 40px; line-height: 40px; display: inline-block; background-color: #c00808; color: #fff; font-size: 18px; padding: 0 35px; }
popBtn .gBtn { height: 40px; line-height: 40px; display: inline-block; background-color: #666666; color: #fff; font-size: 18px; padding: 0 35px; }

.popup a.closeX { width: 20px; height: 20px; background: url("../../img/closeX.png") no-repeat 0 0; overflow: hidden; text-indent: -9999em; position: absolute; top: 10px; right: 10px; }

.popup .scrollY { overflow-y: scroll; max-height: 245px; }