body{
	background: #3B3B3B;
	color:#fff;
	font-size:14px;
	font: 15px/24px "Noto Sans KR", sans-serif;
}

/*상영관 json 파일 css*/
.list_location{
	display:flex;
}
.list_location a.active{
	color:red;
}
.main_container{
	display: flex;
	width: 1280px;
	margin: 144px auto 76px;
	position: relative;
}

/* 좌측 탭 */
.booking_step{
	position: absolute;
	left: 0;
	top: 60px;
}
.booking_tab {
	/* flex: 1; */
	text-align: center;
	padding: 76px 0;
	width: 80px;
	height: 200px;
	background-color: #323232;
	cursor: pointer;
	position: relative;
	border-top: 1px solid #434343;
}
.booking_tab.active {
	background-color: #FF243E;
}
/* 좌측 탭 끝 */

/* 극장 영역 */
.list_location{
	height: 34px;
}
.list_location a{
	padding-left: 16px;
	line-height: 34px;
	font-size: 14px;
}
.list_location span:last-child{
	color: #666666;
}
.cinema_section{
	position: relative;
	background-color: #1B1B1B;
	width: 430px;
	height: 860px;
}
.header{
	text-align: center;
	font-size: 18px;
  line-height: 60px;
	background-color: #121212;
}
.cinema_section .header{
	width: 430px;
	height: 60px;
}
.tab_btn{
	background-color: #1B1B1B;
	border: 1px solid #434343;
	text-align: center;
	line-height: 60px;
}
.cinema_tab{
	position: absolute;
	left: 80px;
	width: 351px;
	height: 60px;
}
.cinema_list{
	position: absolute;
	left: 80px;
	top: 120px;
}

.cinema_area_list > ul {
	width: 350px;
}
.cinema_area_list li{
	display: flex;
	height: 34px;
	font-size: 14px;
	line-height: 34px;
}
.cinema_area_list a{
	width: 175px;
	padding-left: 20px;
}
.list_location a.active {
	background-color: #262525;
	color: var(--primary_color);
}
.cinema_area_list a span:nth-of-type(2){
	color: #767575;
}
.area_cinema_list a{
	padding-left: 16px;
	background-color: transparent;
}
.area_cinema_list a.active{
	color: var(--primary_color);
}
.area_cinema_list .content{
	width: 175px;
	height: 740px;
	overflow: scroll;
	background-color: #262525;
	border-top: 8px solid #262525;
  border-right: 6px solid #262525;
  border-bottom: 8px solid #262525;
  border-left: none;
}
.area_cinema_list .content.scroll_y{
	overflow-x: hidden;
}

/* 스크롤 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: #868686;
  border-radius: 10px;
}
/* 극장 영역 끝 */

/* 영화 영역 */
.movie_section{
	background-color: #1B1B1B;
	width: 351px;
	height: 860px;
}
.movie_section .header{
	width: 350px;
	height: 60px;
	border-left: 1px solid #434343;
}
.tab_button{
	display: flex;
	gap: 0;
}
.tab_movie{
	border: none;
	background-color: #262525;
	width: 176px;
	height: 60px;
	color: #767575;
	border: 1px solid #434343;
}
.tab_movie.active{
	background-color: #1B1B1B;
	color: var(--white);
}
.area_cinema_list .content{
	position: absolute;
	top: 0;
}
.content li{
	display: flex;
}
.rating_icon{
  width: var(--icon_s_w);
  height: var(--icon_s_h);
  color: var(--white);
  font: var(--rating_number);
  border-radius: var(--icon_radius);
  text-align: center;
  padding-top: 6px;
	margin-top: 5px;
	margin-left: 10px;
}
.rating_icon19{
  content: '19';
  background-color: var(--rating19);
}
.rating_icon15{
  content: '15';
  background-color: var(--rating15);
}
.rating_icon12{
  content: '12';
  background-color: var(--rating12);
}
.rating_iconall{
  content: 'All';
  background-color: var(--ratingAll);
}
.movie_list a {
  display: block;
  height: 34px;
  padding-left: 12px;
  background-color: #1B1B1B;
	line-height: 34px;
}
.movie_list li.active {
  border: 2px solid #fff;
	box-sizing: border-box;
}
.movie_list .content{
	width: 350px;
	height: 740px;
	overflow: scroll;
	background-color: #1B1B1B;
	border-top: 8px solid #1B1B1B;
  border-right: 6px solid #1B1B1B;
  border-bottom: 8px solid #1B1B1B;
}
.movie_list .content.scroll-y{
	overflow-x: hidden;
}
/* 영화 영역 끝 */


/* 날짜 영역 */
.calendar_container{
	
}
.date{
	position: absolute;
	width: 500px;
	height: 800px;
	background-color: #262525;
}
.month_title{
	padding: 10px 0 6px 65px;
	font-size: 12px;
	color: var(--light_white);
}
.slide_container{
	display: flex;
	padding: 0 18px;
}

.slider_content{
	width: 382px;
	overflow: hidden;
	
}
.slider_wrapper{
	display: flex;
	justify-content: space-between;
	gap: 18px;
	
}
.slid{

}
.slide a{
	display: flex;
  flex-direction: column;
	text-align: center;

}
.slide a span{
	color: var(--light_white);
	font-size: 15px;
	font-weight: bold;
	width: 32px;
	height: 32px;
	padding-top: 2px;
}
.slide a span:first-child.active{
	background-color: #121212;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	top: 0px;
}
.slide a span:last-child{
	color: var(--light_white);
	font-size: 14px;
	font-weight: 400;
}


.nav_btn {
  width: 40px;
  height: 40px;
  background: transparent;
	border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
  color: var(--disable_color);
  font-size: 16px;
	line-height: 16px;
	padding: 25px 10px 0 10px;
}
.nav_btn:hover {
  color: #B5B5B5;
}
.line{
	width: 450px;
	height: 1px;
	background-color: #5E5E5E;
	align-items: center;
	margin-top: 10px;
	margin-left: 20px;
}
/* 시간 선택 */
.time_section{
	position: absolute;
	left: 800px;
	top: 175px;
	padding: 20px 0 0 0;
}
.movie_title{
	display: flex;
	gap: 12px;
	padding-bottom: 20px;
	font-size: 15px;
	font-weight: bold;
}
.movie_title .rating_icon{
	top: 25px;
	left: 0;
	margin-left: 0;
}
.time_container{
	display: flex;
  flex-wrap: wrap;
	gap: 12px;
	width: 460px;
	padding-bottom: 20px;
}	
.time_select{
	border-radius: 5px;
	background-color: #DFDFDF;
	border: none;
}
.time_select.active {
  background-color: #FFD9D9;
  border: 2px solid red;
	box-sizing: border-box;
	height: 50px;
}
.time{
	font-size: 15px;
	line-height: 24px;
	font-weight: bold;
}
.theater_data{
	display: flex;
	gap: 	12px;
	padding: 0 12px;
	font-size: 12px;
	color: var(--black);
}
h2{
	margin-top: 5px;
	line-height: 24px;
}
h3{
	font-size: 13px;
	line-height: 24px;
	padding-bottom: 5px;
	color: var(--light_white);
}
.header_3{
	width: 500px;
	border-left: 1px solid #434343;
}

.slide_group{
	display: flex;
	gap: 18px;
}
/* 날짜 영역 끝 */

/* 다음 페이지 버튼 */
.next_page{
	position: absolute;
	width: 104px;
	height: 48px;
	left: 1160px;
	bottom: 24px;
	background-color: var(--primary_color);
	font-size: 20px;
	line-height: 24px;
	padding: 12px 30px;
	border-radius: 5px;
	border: none;
	color: var(--white);
	transition: 0.3s;
}
.next_page:hover{
	background-color: var(--fill_hover_color);
}
/* 다음 페이지 버튼  끝 */
/* display */



.time_section {
  display: none;
}
.time_section.active {
  display: block;
}





/* 태블릿 이하 (1024px 이하) */
@media screen and (max-width:1280px) {
	body{
		width:100%;
	}
	.tab_movie{
		width:100%;
		padding:0 20px
	}
	.date_section{
		width: 100%;
		display: none;
	}
	.next_page{
		position: absolute;
		bottom: -72px;
		left: 676px;
	}

}
/* 모바일 (768px 이하) */
@media screen and (max-width: 725px) {

}