@charset "UTF-8";

/* 전체 */
*{
  margin:0;padding:0;border:0;
}

#libmate_header{
	height:50px;
	position:relative;
	background-color:white;
	width:100%;
}
#libmate_header .fl-l{
	float:left;
}

#libmate_header .fl-r{
	z-index:999;
	position:absolute;
	right:0;
}

#libmate_header .fl-c{
	width:100%;
	position:absolute;
	text-align:center;
	padding-top:2px;
	font-size:1.7em;
	font-weight:bold;
}

#libmate_content{
	position:relative;
	height:100px;
}

select {
  -webkit-appearance: none;  /* 네이티브 외형 감추기 */
  -moz-appearance: none;
  appearance: none;
  background: url(이미지 경로) no-repeat 95% 50%;  /* 화살표 모양의 이미지 */ 
}
select::-ms-expand { /* IE 10, 11의 네이티브 화살표 숨기기 */
  display: none;
}
.button_on{
  background-color: #fff;
  color: #5D5D5D;
}
.button_off{
  background-color: #5D5D5D;
  color: #fff;
}
.on{
  display: block;
}
.off{
  display: none;
}
.sky_blue{
  background-color: #e9f3ff;
}
.white{
  background-color: #fff;
}

body{
  max-width: 1200px;
  margin: 0 auto;
}
header{
  background-color: beige;
  height: 35px;
  width: 100%;
}
header #undo_button{
  float: right;
  width: 50px;
  height: 100%;
}
header #undo_button img{
  width: 100%;
  height: 100%;
}
#top_section{
  position: fixed;
  background: linear-gradient(to bottom,#5954ED,#231EB7);
  padding: 0;
  height: 150px;
  width: 100%;
  max-width: 1200px;
  z-index: 2;
}
#top_section #top_buttons{
    position: absolute;
    width: 155px;
    height: 30px;
    right: 0px;
    bottom: 35px;
}
#top_section #top_buttons button{
  width: 70px;
  height: 100%;
  background: linear-gradient(to bottom,#f1f1f1,#eaeaea);
  box-shadow: 0px 0px 2px 0px silver;
  border-radius: 3px;
  font-size: 14px;
  color: #4c4c4c;
  font-weight: bold;
}
#top_section #top_title{
  position: absolute;
  font-size: 25px;
  font-weight: 600;
  top:10px;
  left: 13px;
  color: #fff;
}
#top_section #top_section_wrap{
  position: absolute;
  bottom: 0;
  height: 30px;
}
#top_section #top_section_wrap .section_top_box{
  float: left;
  margin-right: 3px;
  min-width: 30px;
  height: 30px;
}
#top_section #top_section_wrap .section_top_box .section_top_button{
  width: 100%;
  height: 100%;
  font-weight: bold;
  padding-left:5px;
  padding-right:5px;
}
#bottom_section{
  background-color: bisque;
  padding-top: 150px;
  width: 100%;
}

#bottom_section #bottom_pc_box{
  overflow-y: scroll;
  float: left;
  height: 100%;
  width: 15vh;
  background-color: #fff;
  padding-top:30px;
}
#bottom_section #bottom_pc_box #unique_1{
 /* margin-top: 30px;*/
}
#bottom_section #bottom_pc_box .bottom_pc{
  width: calc(100% - 12px);
  height: 50px;
  line-height: 15px;
  padding-left: 12px;
  color: darkblue;
  font-size:0.7em !important;
}
#bottom_section #bottom_pc_box .bottom_pc img{
 vertical-align: sub;
  margin-right: 10px;
}
#bottom_section #bottom_seat_box{
  overflow-x: scroll;
  overflow-y: hidden;
  float: left;
  height: 100%;
  width: calc( 100% - 17vh );
  background-color: #fff;
}
#bottom_section #bottom_seat_box #bottom_seat_time_box{
  height: 30px;
}
#bottom_section #bottom_seat_box #bottom_seat_time_box .bottom_seat_time{
  display: inline-block;
  color: #5D5D5D;
  width: 45px;
  height: 100%;
  line-height: 35px;
  font-weight: bold;
}
#bottom_section #bottom_seat_box .bottom_seat{
  /*min-width: 590px;*/
  height: 45px;
  padding-top: 5px;
}
#bottom_section #bottom_seat_box .bottom_seat .bottom_seat_img_box{
  width: 100%;
  height: 30px;
}
#bottom_section #bottom_seat_box .bottom_seat .bottom_seat_img_box .bottom_img_box{
  width: 45px;
  height: 30px; 
  display: inline-block;
}
#bottom_section #bottom_seat_box .bottom_seat .bottom_seat_img_box .bottom_img_box img{
  width: 7px;
  height: 25px;
}
#bottom_section #bottom_seat_box .bottom_seat_time_box{
  width: 100%;
  height: 50%; 
}
#bottom_section #bottom_seat_box .bottom_seat_time_box .bottom_time_box{
  display: inline-block;
  width: 96px;
  line-height: 27px;
  height: 100%;
}
  
@media all and (min-width: 0px) and (max-width: 400px) {
  #top_section #top_title{
    top: 10px;
    left: 5px;
  }
  #top_section #top_buttons{
    bottom: 35px;
  }
}

/* 세로 디바이스 
@media all and (min-height: 0px) and (max-height: 480px) {
  #bottom_section{
    height: 236px;
  }
}

@media all and (min-height: 481px) and (max-height: 580px) {
  #bottom_section{
    height: 336px;
  }
}

@media all and (min-height: 581px) and (max-height:680px) {
  #bottom_section{
    height: 436px;
  }
}

@media all and (min-height:681px) and (max-height:780px) {
  #bottom_section{
    height: 536px;
  }
}

@media all and (min-height:781px) and (max-height:880px) {
  #bottom_section{
    width: 100%;
    height: 636px;
    background-color: bisque;
  }
}

@media all and (min-height:881px) and (max-height:980px) {
  #bottom_section{
    width: 100%;
    height: 736px;
    background-color: bisque;
  }
}

@media all and (min-height:981px){
  #bottom_section{
    width: 100%;
    height: 826px;
    background-color: bisque;
  }
}
*/
.bottom_img_box::after {
	content: attr(data-time) "시";
	position: relative;
	bottom: 6px;
	left: 1px;
	font-size: 0.7em;
	color: #3d3d3d;
	z-index: 1;
}
.button {
    width: 70px;
    height: 100%;
    background: linear-gradient(to bottom,#f1f1f1,#eaeaea);
    box-shadow: 0px 0px 2px 0px silver;
    border-radius: 3px;
    font-size: 14px;
    color: #4c4c4c;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    line-height: 30px;
}