@charset "UTF-8";

/** 컨텐츠 페이지 공통 */
.content_wrap{margin: auto;}
.tabtitle{font-size: 40px; text-align: center; font-weight: 700; padding-bottom: 25px;}

/******축제개요*/

/** 인사말*/
.eng_title{font-size: 18px;}
.con_title{font-size: 36px;	padding-top: 10px; padding-bottom: 20px; font-family: 'yg-jalnan';}
.con1_img_wrap{display: inline-block; vertical-align: top; margin-right: 60px; width: 45%;}
.con1_img_wrap img:last-child{display: none;}
.con1_text_wrap{display: inline-block; vertical-align: top;	width: 45%;}
.con1_main{padding-bottom: 40px;}
.con1_from{text-align: right;	font-size: 16px;}
.con1_from strong{padding-left: 20px;	letter-spacing: 1.2rem;	font-size: 20px;}

/*김제지평선축제유래*/
.content-title{font-size:36px; color:#1F1F1F; text-align:center; z-index:10; margin-top:30px; font-family: 'yg-yg-jalnan';}
.content-title img{width:221px;	height:68px; z-index:9;	margin-left:-20px; position:relative; margin-left:-27px; margin-top:-28px;}
.ft-explanation p{font-size:18px;color:#1F1F1F;	text-align:center;	margin-bottom:56px;}

.img-box{}
.imgarr1, .imgarr2, .imgarr3, .imgarr4{width:23%; height:360px; display:inline-block; vertical-align:middle; margin-right:15px;}
.imgarr1{background-image: url('/images/sub/img_origin01.png'); background-repeat: no-repeat; background-size: cover;}
.imgarr2{background-image: url('/images/sub/img_origin02.png'); background-repeat: no-repeat; background-size: cover;}
.imgarr3{background-image: url('/images/sub/img_origin03.png'); background-repeat: no-repeat; background-size: cover;}
.imgarr4{background-image: url('/images/sub/img_origin04.png'); margin-right:0 !important; background-repeat: no-repeat; background-size: cover;}

.imgarr1 span, .imgarr2 span, .imgarr3 span, .imgarr4 span{font-size:16px; color:#fff; display: block; line-height: 1.3rem;}
.imgarr1-text, .imgarr2-text{margin-top:263px; margin-left:18px; text-align:left;}
.imgarr3-text, .imgarr4-text{margin-top:263px;	margin-right:12px; text-align:right;}
.center-logo{display: none;width:200px; height:200px;	position:relative; border-radius:50%; background-image: url('/images/main/logo_u.png'); background-size: 147px 125px;
	background-position: center; margin-top: -315px; margin-left:479px; background-color: white;  background-repeat:no-repeat; float: left;}

/** 연혁 */
.tab_wrap{width: 100%; margin: auto;}
.tab_wrap ul{width: 100%; display: flex; justify-content: center;}
.tab_wrap ul li {width: 25%; height: 50px; line-height: 50px; border: solid 1px #ccc; text-align: center; font-size: 18px; color: #666666; box-sizing: border-box;}
.tab_wrap ul li:hover{font-weight: 500; cursor: pointer;	text-decoration: underline;}
.tab_wrap ul li:last-child {border-right: solid 1px #ccc;}
.tab_wrap ul li > a{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;}
.tab_wrap ul .active {background-color: #2e4156; font-weight: 600; font-size: 18px; color: #ffffff; text-decoration: unset !important;}
.his_table{	width: 70%; margin: auto; margin-top: 50px;}
.his_table tr td{padding: 25px; width: 50%; vertical-align: middle;}
.his_table td + td{border-left: solid 1px #ccc;}
.his_table tr:first-child td{position: relative;}
.his_table tr:first-child td:first-child::after {content: ""; width: 16px; height: 16px; display: inline-block; background-color: #ccc; position: absolute; right: -8px; top: -16px;
    transform: rotate(45deg);}
.his_table tr + tr{border-top: unset;}
.img_td{text-align: center !important;}
.year_l{font-size: 36px; font-weight: bold; color: #5b2f07; position: relative; text-align: left; overflow: visible;}
.year_l:before {content: ""; display: inline-block; width: 10px; height: 10px; background-color: #5b2f07; border-radius: 10px; position: absolute; left: -32px; top: 25px;}
.year_r{font-size: 36px;  font-weight: bold; color: #5b2f07; position: relative; text-align: right; overflow: visible;}
.year_r:after {content: ""; display: inline-block; width: 10px; height: 10px; background-color: #5b2f07; border-radius: 10px; position: absolute; right: -32px; top: 25px;}
.his_title_l{font-size: 18px; font-weight: bold; text-align: left; padding: 20px 0; }
.his_title_r{font-size: 18px; font-weight: bold; text-align: right; padding: 20px 0;}
.his_content_l{font-size: 16px; padding-bottom: 15px; text-align: left;}
.his_content_r{font-size: 16px;	padding-bottom: 15px;	text-align: right;}
.his_info{background-color: #fff; border-radius: 10px;  padding: 24px;  text-align: left;}
.hispeople {font-weight: 600; font-size: 15px; color: #5b2f07; padding-bottom: 15px;}
.hispeople:before {content: ""; background-image: url(/images/sub/i_history01.png); background-size: cover; background-repeat: no-repeat; width: 20px; height: 16px; display: inline-block;
    vertical-align: middle; margin-right: 8px;}
.hisfinan{font-weight: 600; font-size: 15px; color: #4c7e55;}
.hisfinan:before{content: ""; background-image: url('/images/sub/i_history02.png');	background-size: cover; background-repeat: no-repeat; width: 15px; height: 20px; display: inline-block;
    vertical-align: middle; margin-right: 8px;}
    

/*홍보영상*/
.video_wrap{position: relative; height: 0; overflow: hidden; padding-bottom: 36.25%; width: 65%; margin: 0 auto;}
.video_wrap iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/*오시는길*/    
.map{width:100%; height:450px;}
.map-cover{position:relative; width:100%; height:180px;	background-color:#5b2f07; border-top-right-radius: 30px; margin-top:-180px;}
.area-info>p{font-size:24px; color:#fff; margin-top:40px; margin-left:50px;	margin-bottom:20px;	padding-top:20px;}
.area-info span{font-size:16px;	color:#fff;}
.addr-img, .call-img  {width:24px; height:24px; background-color:#fff;	border-radius:50px;	margin-right:10px; margin-left:50px; background-repeat:no-repeat; background-position:center;
	display:inline-block; margin-bottom:14px;}
.addr-img {background-image: url('/images/sub/waytocome/i_place.png');}
.call-img {background-image: url('/images/sub/waytocome/i_call.png');}
.btn-map>div{background-color: #fff; border-radius: 50%; width: 100px; height: 100px; margin: auto; margin-top: 10px; opacity: 1;}
.btn-map{position: absolute; width: 120px; height: 120px; background-color: rgba(255,255,255,.2); border-radius:50%; top: 25px; right: 50px;}
.btn-map:hover{border: 1px solid #fff; box-sizing: border-box; background: transparent;}
.btn-map img{margin-top:20px; margin-left: 33%;}
.btn-map p{margin-left: 30%;}

.traffic-info{width:100%; display:block; margin-bottom:20px; margin-top: 60px;}
.traffic-info.rel{margin-top: 50px;}
.traffic-info.rel .recdoo{position: relative;}
.traffic-info.rel .recd{position: absolute;left: -15px;top: -40px;transform: translateY(-50%);}
.traffic-info .info-text{font-weight:bold; font-size:24px; margin-bottom:20px;}
.traffic-info .traffic_wrap{display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 20px;}
.traffic-info .seohae p, .honam p, .train p, .srt p, .ktx p{font-weight: 600;	font-size:20px;	margin-bottom:8px; padding: 20px 0 0 30px;}
.info-text>div>span{font-size:16px;	margin-bottom:15px;}
.loca{margin-left:30px;	margin-right:10px;}
.seohae, .honam, .train, .srt, .ktx{width:49%; background-color:#fff; padding-bottom: 20px;}
.shuttle{width: 100%;background: #fff;	padding: 20px 0;}
.shuttle span{}
.place-card, .place-card-large{	display:none !important;}

/* 오시는길_철도_탭박스 */
.train_tabBox{}
.train_tabBox h1{font-weight: bold;font-size: 24px;margin-bottom: 20px;}
.tabs { margin-top: 8px;/*max-width: 1200px;*/padding: 0 20px;}
.tabs * { box-sizing: border-box; }
.tabs > ul { list-style: none; display: flex; gap: 5px;padding: 0; margin: 0; }

.tabs > ul li{flex: 1;}

.tabs > ul li a {
  display: block;
  padding: 10px 18px;
  background: #e0e0e0;
  color: #444;
  text-decoration: none;
  border: 1px solid #d0d0d0;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  padding: 5%;
}

.tabs > ul li a:not(.active):hover {background: #ecd28a;border-color: #e2c05a;color: #2b2b2b;transform: translateY(-1px);}

.tabs > ul li a.active {background: #d4a017;color: #fff;border-color: #d4a017;cursor: default;font-weight: 700;}

.tabs .tab_content {
  background: #f9f9f9;
  border: 1px solid #ddd;
  color: #333;
  padding: 20px;
  border-radius: 0 0 8px 8px;
  margin-top: -1px;
  min-height: 160px;
  width: 100%;
  box-sizing: border-box;
}

.tabs .tab_content > div { display: none; }
.tabs .tab_content > div:target { display: block; }

.timetable {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 8px;
  margin: 8px 0 0;
  padding-left: 18px;
  list-style: disc;
}
.timetable li {margin: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

@media (max-width: 1024px) { .timetable { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .timetable { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .timetable { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

/*축제일정*/
.alltable tr td.border_td{
	border-left: 2px solid #aaa;
}

.table{width: 100%; border-spacing: 200px 30px; background-color: #fff; border-top: 2px solid #58300a;}
.tabtitle{font-weight: bold;  font-size: 30px;  text-align:center;  margin-bottom: 10px;}
.tabtext{font-size: 16px; text-align:center;   margin-bottom: 30px;}

.table .city{/*    width: 270px; */
   height:50px; background-color: #e7e0da; font-size: 16px; font-weight: bold; color: #58300a; /* text-align: center; */}
.table .center{/*    width: 270px; */
   height:50px; background-color: #e4ece6; font-size: 16px; font-weight: bold; color: #4c7e55; text-align: center;}

.table .ssang{/*    width: 270px; */
   height:50px; background-color: #fdeedf; font-size: 16px; font-weight: bold; color: #f08d25; text-align: center;}
.table .etc{/*    width: 270px; */
   height:50px; background-color: #dbeef2; font-size: 16px; font-weight: bold; color: #0c8ca6; text-align: center;}

.table thead th{border-bottom: solid 1px #ccc;}
.table th{text-align: center; width: 140px; margin-bottom: 10px; vertical-align: middle; font-weight: 500;}
.table tbody th{border-right: solid 1px #ccc; border-bottom: solid 1px #ccc;}
.table td{height: 80px; padding: 10px 25px; vertical-align: middle; border: solid 1px #ccc; text-align: left; background: #fff;}
.table td > a{width: 100%; display: table;}
.table td > a:hover{text-decoration: underline; text-decaraion-color: currentColor;}
.table td.reserve_td{background: #fdeaea;}
.table td > a .reserve_text{font-size: 14px; font-weight: 600; margin-top: 15px; color: #bc1d1d;}
.table tr td:last-child{border-right: unset;}
.time{  font-size: 15px;}
.circle { background-color:#2e4156; width: 35px; height: 35px; border-radius:75px; position: relative; float: right; top: -50px; 
/*   text-align:center; */
/*    margin:0 auto; */
/*    font-size:12px; */
/*    vertical-align:middle; */
/*    line-height:150px; */
}

.detail{width: 190px;}
.conscoll_wrap{ overflow: auto;}

/** 프로그램 */
.program_wrap {
    padding: 40px;
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 10px;
}
/* 프로그램 하나의 div끝 */
/* 프로그램 이미지 시작 */
.program_img{    
	display: inline-block;
    vertical-align: top;
    width: 31%;
    margin-right: 40px;
    box-sizing: border-box;
}
.program_img img{
	border-radius: 20px;
}
.program_img .reserv_btn{
	display: inline-block;
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #2e4156;
    border: solid 1px #2e4156;
    border-radius: 10px;
    margin-top: 25px;
}
.program_img .reserv_btn:hover{
	text-decoration: underline;
}
.reserv_btn img{
	margin-left: 15px;
	width: 18px;
	border-radius: unset;
}
/* 프로그램 이미지 끝 */
/* 오른쪽 텍스트 */
.program_info {
    display: inline-block;
    vertical-align: top;
    width: 60%;
    box-sizing: border-box;
}
.program_info .program_title{
	font-family: 'yg-jalnan';
    font-size: 30px;
}
.program_info p:nth-child(2){
	font-size: 18PX;
	padding-bottom: 30px;
}
.program_table{
	width: 100%;
}
.program_table tr + tr{
	border-top: unset;
}
.program_table tr th {
    width: 120px;
    text-align: left;
    background-color: #fff;
    padding: 0;
    height: unset;
    padding-bottom: 25px;
    color: #4c7e55;
    font-size: 18px;
    font-weight: bold;
    vertical-align: top;
}
.program_table tr td {
    border-left: unset;
    padding: unset;
    padding-bottom: 25px;
    height: unset;
    text-align: left;
    word-break: keep-all;
    font-size: 16px;
}
.program_table tr th:before {
    content: "";
    display: inline-block;
    background-image: url(/images/sub/waytocome/i_title_loca.png);
    width: 14px;
    height: 8px;
    padding-right: 10px;
    background-repeat: no-repeat;
}

/* 아래쪽 엑스트라 영역*/
.etc_th{
	vertical-align: top;
}
.program_table .etc_title{
	font-size: 16px;
	color: #1f1f1f;
	font-weight: bold;
}
.program_table .program_etc img:first-child{
	margin-right: 15px;
}
.program_table .program_etc ul{
	margin-bottom: 25px;
}
.program_etc table{
	width: 100%;
}
.program_etc table th:before{
	content: "";
	background-image: unset;
	width: unset;
	height: unset;
}
.program_etc table th{
	font-size: 14px;
	height: 35px;
	color: #fff;
	background-color: #2e4156;
	font-weight: bold;
	line-height: 35px;
	text-align: center;
	padding: unset;
}
.program_etc table tr td{
	height: 35px;
	text-align: center;
	font-size: 14px;
	vertical-align: middle;
	border-right: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
	padding: unset;
}
.program_etc table tr td:last-child{
	border-right: unset;
	text-align: left;
	padding: 10px 5px;
}
/** 프로그램 끝 */

/** 버스노선표 */
.bus_title{font-size: 30px; font-weight: bold; padding: 20px 0;}
.red_text{color: red;}
.blue_text{color: blue;}

.bus_table{border: solid 2px #333; width: 100%;}
.bus_table thead tr:first-child td, .bus_table thead tr:first-child td span{font-size: 24px; font-weight: bold;}
.bus_table thead tr td {background-color: #E0F4F6; border: solid 1px #333; text-align: center; vertical-align: middle; padding: 10px 0;}
.bus_table thead tr:first-child td:first-child,
.bus_table thead tr:last-child td{border-bottom: double #333;;}
.bus_table tbody tr th,
.bus_table tbody tr td {border: solid 1px #333; text-align: center; padding: 10px;}
.bus_table tbody tr th{background-color: #CCFFCC; vertical-align: middle;}

.bus_tabwrap ul{display: flex; text-align: center;}
.bus_tabwrap ul li {width: 33.33333%; height: 50px; border: solid 1px #ccc; box-sizing: border-box; text-align: center; line-height: 50px; color: #666; 
		cursor: pointer; margin: auto; background: #fff;}
.bus_tabwrap ul li:hover{text-decoration: underline; color: #333;}
.bus_tabwrap ul .active{background-color: #2e4156; color: #fff !important; font-size: 18px; font-weight: 600;}

.bus_tabwrap2{width: 50%; margin: auto; margin-top: 20px;}
.bus_tabwrap2 ul{display: flex; text-align: center; gap: 20px;}
.bus_tabwrap2 ul li {width: 33.33333%; height: 50px; border: solid 1px #ccc; box-sizing: border-box; text-align: center; line-height: 50px; color: #666; 
		cursor: pointer; margin: auto; background: #fff; border-radius: 50px;}
.bus_tabwrap2 ul li:hover{text-decoration: underline; color: #333;}
.bus_tabwrap2 ul .active{background-color: #0FA3B1; color: #fff !important; font-size: 18px; font-weight: 600;}
/** 버스노션표 끝 */

/** comming soon */
.content-wrap.comming{width:100%;height:100%;padding:20px;text-align:center;background: #fff;border-radius: 20px;margin-top: 20px;box-sizing: border-box;}
.content-wrap.comming .content{display:inline-block;vertical-align: middle;}
.content-wrap.comming .content img{display:inline-block;margin-right:20px;width:240px;height:240px;}
.content-wrap.comming .text-box{display:inline-block;vertical-align: middle;}
.content-wrap.comming .text-box p{font-size:48px;color:#5B2F07;font-weight: 700;font-family: 'yg-jalnan';}
.content-wrap.comming .text-box span{font-size:18px;color:#1F1F1F;}

/*
.tabtitle{
	 font-weight: bold;
	 font-size: 30px;
	 text-align:center;
	 margin-bottom: 10px;
}
.bus_tabwrap ul{
	 display: flex;
}
.bus_tabwrap ul li {
		width: 33.33333%;
		height: 50px;
		border: solid 1px #ccc;
		box-sizing: border-box;
		text-align: center;
		line-height: 50px;
		color: #666;
		cursor: pointer;
		margin: auto;
} 
*/
/** //comming soon */

/* 오시는길_반응형 */
/* 큰 화면 (와이드 모니터) */
@media (min-width: 1201px) {
.content_wrap div div{width: 100%;}
}

/* 데스크탑 (보통 PC 화면) */
@media (max-width: 1200px) and (min-width: 993px) {

}

/* 태블릿 (가로) */
@media (max-width: 992px) and (min-width: 769px) {
.tabs > ul li a {height: 50px;}
}

/* 태블릿 (세로) */
@media (max-width: 768px) and (min-width: 577px) {
.tabs > ul li a {height: 50px;}
}

/* 모바일 (일반 스마트폰) */
@media (max-width: 576px) and (min-width: 481px) {
.tabs > ul li a {height: 50px;font-size: 15px;}
.tabs > ul li a.active {font-weight: 500;}
	
}

/* 모바일 (작은 스마트폰) */
@media (max-width: 480px) {
.tabs > ul li a {height: 50px;font-size: 15px;}
.tabs > ul li a.active {font-weight: 500;}
}
