/* 기본 사항 - 게시판 */
#bbs_container.bbs_container {
	font-size:1.7rem;
}


/* 공통 게시판형태 */
.TableBoardList {
	width:100%;
	margin-top:1rem;
	border-top:2px solid #000;
}
.TableBoardList > LI {
	border-bottom:1px solid #ccc;
}
.TableBoardList > LI::after {
	content:'';
	clear:both;
	display:block;
}
.TableBoardList > LI.null {
	padding: 10rem;
    text-align: center;
    font-size: 2rem;
    color: #aaa;
}
.TableBoardList DL {
	float:left;
	width: calc((100% - 10%) / 5 );

	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
	align-content: space-between;
}
.TableBoardList DL > DT {
	width:100%;
	height:5rem;
	border-bottom:1px solid #ddd;
	background-color:#f5f5f5;
	font-family:'Noto Sans KR','Malgun Gothic',dotum,Sans-serif,AppleGothic;
	font-weight:500;

	display: flex;
	justify-content: center;
	align-items: center;
}
.TableBoardList DL > DD {
	padding:2rem 1rem;
	min-height:7.5rem;
	font-size:1.5rem;
	text-align:Center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.TableBoardList DL > DD STRONG {
	font-size:1.8rem;
}
.TableBoardList DL > DD P {
	text-align:left
}



/* PC 테이블 */
@media all and (min-width: 767px) {
	.TableBoardList DL:nth-of-type(1) ,
	.TableBoardList DL:nth-of-type(2) {
		width: calc(((100% - 10%) / 5) - 5%) ;
	}
	.TableBoardList DL:nth-of-type(3) {
		width: calc(((100% - 10%) / 5) + 10%) ;
	}
	.TableBoardList DL:nth-of-type(4)  {
		width: calc(((100% - 10%) / 5) + 10%);
		align-items: flex-start;
	}
	/* 리스트의 두번째 TH 지우기 */
	.TableBoardList > LI ~ LI DT {
		display:none;
	}
}

/* MO 테이블 */
@media all and (max-width:767px) {

	.TableBoardList LI {
		border: 1px solid #555;
		margin: 4rem 0.5rem;
		padding: 0;
		box-shadow: 0 0 0 5px rgba(0,0,0,.15);
		border-radius: 0.5rem;
		overflow:hidden;
	}
	.TableBoardList DL > DT ,
	.TableBoardList DL > DD ,
	.TableBoardList DL > DD H4 ,
	.TableBoardList DL > DD H5 ,
	.TableBoardList DL > DD STRONG {
		font-size:1.7rem;
	}

	.TableBoardList BUTTON {

	}
	.TableBoardList BUTTON:active DL > DT ,
	.TableBoardList BUTTON:hover DL > DT {
		background-color: #f5f5e6;

	}

	.TableBoardList DL {
		display:table;
		width:100%;
		height:auto;
		margin:auto;
		padding:0;
		border-spacing:0;
		border-collapse:collapse;
		table-layout:fixed;

		float: none;
		border:0;
		border-bottom:1px solid #ccc;
	}
	.TableBoardList DL > DT ,
	.TableBoardList DL > DD {
		display:table-cell;

		vertical-align: middle;
		float: none;
		height:100%;
		min-height:auto;
		padding:1rem;
		margin:0;
		border:0;

	}

	.TableBoardList DL > DT {
		width:30%;
		text-align:center;
		border-right:1px solid #ddd;
	}
	.TableBoardList DL > DD {
		width:70%;
		text-align:left;
		padding:1rem 1.5rem;
	}
	.TableBoardList DL > DD > * {
		display:inline-block;
	}
	.TableBoardList DL > DD > * ~ * {
		display:inline-block;
		padding:0 1rem;
	}
	.TableBoardList DL.app_code > DD > DIV {
		display:none;
	}


	.TableBoardList DL.app_rooms > DD > DIV {
		width:auto !important;
		border:0 !important;
		margin:0 !important;
		padding:0 !important;
	}
	.TableBoardList DL.app_rooms > DD > DIV ~ DIV::before {
		display:inline-block;
		content:'/';
		padding:0 1rem;
		color:#aaa;
	}
	.TableBoardList DL.app_rooms DIV > H4 {
		display:inline-block;

	}
	.TableBoardList DL.app_rooms DIV > SPAN {
		display:none;
	}

	.TableBoardList DL.app_state > DT {
		display:none;
	}
	.TableBoardList DL.app_state > DD {
		width:100%;
		padding:1rem;
	}
	.TableBoardList DL.app_state .AppProgBox {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align:center;
		padding: 0.5rem 0;
		height:100%;

	}

}

/* 3단계 탭메뉴 */
.third_tab ul {
	display:flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: center;
	justify-content: flex-start;
	align-items: center;

}
.third_tab ul > li {
	position: relative;
	width: calc(100% / 5);
	height:6rem;
	border:1px solid #ccc;
	border-right-width:0;
	transition: all .25s;
}


.third_tab ul > li > a {
	display:flex;
	align-items: center;
	justify-content: center;
	width:100%;
	height:100%;
	color: #252525;

    padding: 0 2rem;
    line-height: 100%;
}

.third_tab ul > li:hover ,
.third_tab ul > li.active {
	z-index:1;
	background-color:#6680bb;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
	transition: color 0.25s linear;

}
.third_tab ul > li:hover > a ,
.third_tab ul > li.active > a {
	color:#eee;
}
.third_tab ul > li.active::before {
	content:'';
	display:block; position:absolute; bottom:-1px; left:calc(50% - 1rem); width:0; height:0; border-left:1rem solid transparent; border-right:1rem solid transparent; border-bottom:1rem solid #fff;
}
/* PC 테이블 */
@media all and (min-width: 767px) {
	.third_tab ul > li:last-of-type ,
	.third_tab ul > li:nth-of-type(5n+0) {
		border-right-width:1px;
	}
	.third_tab ul > li:nth-of-type(n+6) {
		border-top-width:0;
	}
}
/* MO 테이블 */
@media all and (max-width:767px) {
	.third_tab ul > li {
		width: calc(100% / 2);
	}
	.third_tab ul > li:last-of-type ,
	.third_tab ul > li:nth-of-type(2n+0) {
		border-right-width:1px;

	}
	.third_tab ul > li:nth-of-type(n+3) {
		border-top-width:0;
	}
}

/* 리본 */
.ribbon2box {
  position: relative;
}
.ribbon2box .ribbon2 {
  width: 15rem;
  height: 15rem;
  overflow: hidden;
  position: absolute;
  z-index: 5;
}
.ribbon2box .ribbon2::before,
.ribbon2box .ribbon2::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #435883;
  border: 5px solid #a34d12;
}
.ribbon2box .ribbon2 span {
  position: absolute;
  display: block;
  width: 22.5rem;
  padding: 1.5rem 0;
  background-color: #6680b8;
  background-color: #e9633f;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.2);
  color: #fff;
  font: 700 2rem/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
  text-transform: uppercase;
  text-align: center;
}

.ribbon2box .ribbon2 {
  top: -1rem;
  left: -1rem;
}
.ribbon2box .ribbon2::before,
.ribbon2box .ribbon2::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon2box .ribbon2::before {
  top: 0;
  right: 0;
}
.ribbon2box .ribbon2::after {
  bottom: 0;
  left: 0;
}
.ribbon2box .ribbon2 span {
  right: -2.5rem;
  top: 3rem;
  transform: rotate(-45deg);
}

/* 소개 */
.intro_content::after {
	content:'';
	display:block;
	clear:both;
}
.intro_content .intro_side_01 {
	position: relative;
	float:left;
	width:40%;
	height:70rem;
	background-image:url("/dzSmart/upfiles/2021December/51/1640318562_aa062742755092126c377240faaa858b.jpg");
	background-size:cover;
	background-position:center;
}

.intro_content .intro_side_01::before ,
.intro_content .intro_side_01::after {
	content: "";
	display:block;
	position: absolute;
	background: transparent;
	border-style:solid;

	left: auto;
	top: auto;
	right:auto;
	bottom:auto;
	opacity:0;
	transition: all ease .2s 0s;

	opacity:.75;

	width:5rem;
	height:5rem;
	border-width: 1rem;

}
.intro_content .intro_side_01::before {
	border-color:#4068a4;
	border-right: 0;
	border-bottom: 0;

	left: -0.2rem;
	top: -0.2rem;

}
.intro_content .intro_side_01::after {
	border-color:#2c9f8c;
	border-top: 0;
	border-left: 0;

	right: -0.2rem;
	bottom: -0.2rem;
}


.intro_content .intro_side_02 {
	float:left;
	width:60%;
	padding-left:5%;
}
.intro_content .intro_side_02::after {
	content:'';
	display:block;
	clear:both;
}

.intro_content .intro_side_02 p {
	padding-top:2rem;
}
@media all and (max-width: 767px) {

	.intro_content .intro_side_01,
	.intro_content .intro_side_02 {
		position: relative;
		float:none;
		padding:0;
	}
	.intro_content .intro_side_01 {
		width:100%;
		height:30rem;
		overflow: hidden;
	}
	.intro_content .intro_side_02 {
		width: 90%;
		margin:-15rem auto 0;
		background-color:#fff;
		border-radius:1rem;
		padding:2.5rem;
		text-align:center;
	}
	.intro_content .intro_side_02 P {
		text-align:left;
		margin: 0 -2.5rem;

	}

}




/* 시설안내 */
.intro_map {
    margin-top:3rem;
    border:2px solid #aaa;
    padding:1.5rem;
}
.intro_map::after {
    content:'';
    display:block;
    clear:both;
}
.intro_map > div {
    float:left;
}





/* 2단 갤러리 */ 
.img_covers {
	margin:5rem 0;
}
.img_covers::after {
	content:'';
	display:block;
	clear:both;
}
.img_covers > LI {
	position: relative;
	float:left;
	width:49%;
	margin-right:2%;
	margin-bottom:2%;
	max-height:50rem;
	border:1px solid #aaa;
	padding:1rem;

	box-shadow:inset 0 0 0 5px #fff;
	background-size:cover;
	background-position:center;
}
.img_covers > LI:nth-child(2n+0) {
	margin-right:0;
}
.img_covers > LI IMG {
	max-width:100%;
}
.img_covers > LI .tip_guide {
	position: absolute;
	bottom:1rem;
	right:1rem;
	padding:1rem 3rem;
	background:rgba(0,0,0,.5);
	color:#fff;
	text-shadow:1px 1px 0 rgba(0,0,0,.5);
	font-weight:600;
}
/* 모바일 */
@media all and (max-width: 767px) {
	.img_covers > LI {
		float:none;
		width:100%;
		margin-bottom:3rem;
	}
}




/* 기본 테이블 */
.dztbl4 {
	width:100%;
	margin:auto;
	padding:0;
	border-spacing:0;
	border:0;
	border-top:3px solid #6680bb;
	border-bottom:2px solid #222;
	border-collapse:collapse;
	table-layout:fixed;
}
.dztbl4 TD ,
.dztbl4 TH {
	padding:1rem 1.5rem;
	border:1px solid #ccc;
	line-height:2.5rem;
	font-size:1.4rem;
}
.dztbl4 TH {
	background:#f1f2f3;
}
.dztbl4.padding-5 td ,
.dztbl4.padding-5 th {
	padding:0.7rem 1.5rem;
}



/* 요금 테이블 */
.ReservPayTable {
	width:100%;
	margin:auto;
	padding:0;
	border-spacing:0;
	border:0;
	border-top:3px solid #4b4e5a;
	border-bottom:2px solid #4b4e5a;
	border-collapse:collapse;
	table-layout:fixed;
}
.ReservPayTable TD ,
.ReservPayTable TH {
	padding:1rem 1.5rem;
	border:1px solid #d6d5dd;
	line-height:2.5rem;
	font-size:1.4rem;
	text-align:center;
}
.ReservPayTable TH {
	background:#ebeef1;
	border:1px solid #cfcdd7;
}

.ReservPayTable > TBODY > TR:last-of-type > * ,
.ReservPayTable > THEAD > TR:last-of-type > * ,
.ReservPayTable > TBODY > TR > TH[rowspan] {
	border-bottom:1px solid #4b4e5a;
}
.ReservPayTable .br1 ,
.ReservPayTable > TBODY > TR > TH {
	border-right:1px solid #4b4e5a;
}
.ReservPayTable TH > DIV {
	font-weight:normal;
	font-size:1.3rem;
}
.ReservPayTable TH > SPAN {
	font-weight:normal;
	font-size:1.3rem;
	margin-left:1rem;
}
.ReservPayTable TH.th-title ,
.ReservPayTable TH.td-title {
	border:0;
	padding: 1.7rem 0;
	background-color:#3B3F4F;
	color:#F5B025;
	font-size:1.8rem;
}
.ReservPayTable TH.td-title > DIV ,
.ReservPayTable TH.th-title > DIV {
	color:#ddd;
}
.ReservPayTable TH.td-title {
	border:0;
	padding: 1.7rem 0;
	font-size:1.8rem;
}

.ReservPayTable TH.tb-rl {
	writing-mode: tb-rl;
	letter-spacing: 1.5rem;
	padding:0;

}
.ReservPayTable + .ReservPayTable {
	display:none;
}
/* 모바일 */
@media all and (max-width: 767px) {
	.ReservPayTable {
		display:none;
	}
	.ReservPayTable + .ReservPayTable {
		display:table;
	}
}