@charset "UTF-8";

@font-face {
    font-family: 'TmoneyRoundWindExtraBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body {
	box-sizing: border-box;
	position: relative;
	font-family: 'Pretendard-Regular','Malgun Gothic','맑은 고딕',Dotum,'돋움',sans-serif;
	color: #787878;
	word-break: keep-all;
	top: 0px !important;
}

body h1 {
	font-size: 5.4rem;
}
body h2 {
	font-size: 4.2rem;
}
body h3 {
	font-size: 3.6rem;
}
body h4 {
	font-size: 2.7rem;
}
body h5 {
	font-size: 2.4rem;
}
body h6 {
	font-size: 2rem;
}
body p,
body li,
body dt,
body a,
body th,
body td  {
	font-size: 1.8rem;
	line-height: 140%;
	word-break: keep-all;
}
body label,
body span {
	font-size: 1.7rem;
	line-height: 140%;
	word-break: keep-all;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Pretendard-Bold','Malgun Gothic','맑은 고딕',Dotum,'돋움',sans-serif;
	line-height: 150%;
	color: #333;
	font-weight: 700;
}
.bigP {
	font-size: 1.9rem;
}

h5.bigP {
	font-size: 3rem;
}
.smTxt {
	font-size: 1.6rem;
}

.txtCenter {
    text-align: center;
}
.txtRight {
	text-align: right;	
}
.txtLeft {
	text-align: left;	
}
.blockCenter {
	margin: 0rem auto;
}
.lightblueTxt {
	color: #4391ed;
}
.greyTxt {
	color: #999 !important;
}
.lightgreyTxt {
	color: #aaa;	
}
.redTxt {
	color: #ee2323 !important;	
}
.blueTxt {
	color: #0066b3 !important;	
}
.greenTxt {
	color: #10A05C !important;	
}
.greyTxt {
	color: #999 !important;
}
.normalTxt {
	font-family: 'Pretendard-ExtraLight';
	font-weight: 200 !important;
}
.Myeongjo {
	font-family: 'Nanum Myeongjo';
}
.underTxt {
	text-decoration: underline;	
}

.ui.button.green {
	background-color: #149f5c;
}
.ui.button.grey {
	background-color: #999;
}
.img {
	display: block;	
}
.img img {
	width: 100%;	
}
.bgImg {
	background-position: center center;
	background-repeat: no-repeat;	
}
.blind {
	display: none;
}
.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flex-first {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex-align-center {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
ul.num {
	list-style: decimal;
	padding-left: 2rem;
}
.dot li {
	position: relative;
	display: block;
	line-height: 140%;
	margin-bottom: 0.8rem;
	padding-left: 1.8rem;
	word-break: keep-all;
}
.dot.bigP li {
	font-size: 1.9rem;
	color: #333 !important;
}
.dot li:before {
	position: absolute;
	display: block;
	left: 0;
	top: 0;	
}
.dot li:before {
	content: "";
	top: 0.8rem;
	left: 0.4rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: #999;
}
.bar {
	position: relative;
	padding-top: 2rem;
}
.bar:before {
	content: "";
	position: absolute;
	display: block;
	width: 5rem;
	height: 0.4rem;
	top: 0;
	left: 0;
	background-color: #333;
}
.bar li {
	position: relative;
	color: #787878;
	padding-left: 2rem;
	margin-bottom: 0.5rem;
}
.bar li:before {
	content: "";
	position: absolute;
	display: block;
	left: 0.3rem;
	top: 1.3rem;
	width: 0.7rem;
	height: 0.2rem;
	background-color: #999;	
}
.brBox {
	display: block;	
}

.swiper-button-next:after,
.swiper-button-prev:after {
	content: '' !important;
}
.k-checkbox {
	border-radius: 0.3rem;
	vertical-align: bottom;
	border: 0.1rem solid rgba(0, 0, 0, 0.15);
}
.k-radio {
	vertical-align: bottom;
	border: 0.1rem solid rgba(0, 0, 0, 0.15);
}
.k-checkbox:checked,
.k-checkbox.k-checked,
.k-radio:checked,
.k-radio.k-checked {
	border-color:#149f5c;
    color: #fff;
    background-color: #149f5c;
	box-shadow: none;
}
.k-radio:focus,
.k-checkbox:focus {
	outline: none !important;
	box-shadow: 0 0.1rem 0.1rem 0.2rem rgba(20, 159, 92, 0.5) !important;
}
.inner2 {
	max-width: 128rem
}



.page-header {
	position: fixed;
	display: flex;
	justify-content: space-between;
	top: 0;
	width: 100%;
	max-width: 128rem;
	height: 7rem;
	background: #fff;
	
	display: flex;
	align-items: center;
	padding: 2rem 0 0 0;
	/*border-bottom: 0.1rem solid rgba(0, 0, 0, 0.15);
	box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.1);*/
	z-index: 100;
	
	background-image: url(../main/images/museum_logo.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 21rem;
}
.btn-back {
	padding: 0;
	margin: 0;
	font-size: 3rem;
	line-height: 100%;
	font-family: 'GmarketSansMedium';
	background: none;
	border: none;
	cursor: pointer;
}
.btn-after {
	padding: 0;
	margin: 0;
	font-size: 3rem;
	line-height: 100%;
	font-family: 'GmarketSansMedium';
	background: none;
	border: none;
	cursor: pointer;
	
}
.page-title {
	flex: 1;
	text-align: center;
	font-size: 1.1rem;
	margin: 0;
}
#content {
	padding: 6rem 0 10rem 0;
}
#content.mainPage {
	padding: 0;
}

.view { 
	display: none;
}
.view.active { 
	display: block;
}
.nav-link {
	display: block;
	color: #007bff;
	text-decoration: none;
	cursor: pointer;
}
.item-list {
	list-style: none;
	padding: 0;
	gap: 2rem;
}
.item-list li {
	width: calc((100% / 2) - 1rem);
	height: 22rem;
	border-radius: 0.8rem;
	overflow: hidden;
}
.item-list li .nav-link {
	position: relative;
	width: 100%;
	height: 100%;
}
.item-list li .nav-link:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 11;
}
.item-list li .nav-link img {
	position: absolute;
    display: block;
    width: 100%;
	min-width: 57rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transition: all 0.3sease-in-out;
    z-index: 10;
}
.item-list li .nav-link .tit {
	position: absolute;
	width: 100%;
	height: 8rem;
	left: 0;
	bottom: 0;
	color: #fff;
	font-size: 1.7rem;
	line-height: 140%;
	z-index: 12;
}
.item-list li .nav-link .tit b {
	display: block !important;
	width: 100%;
	text-align: center;
	padding: 1rem;
}
.item-list li a .tit .smT {
	display: block;
	font-size: 1.3rem;
	font-family: 'Pretendard-Thin';
}

.item-list li .nav-link {
	display: inline-block;
	transition: transform 0.2s ease-out;
	-webkit-tap-highlight-color: transparent;
}

.item-list li .nav-link:active {
	transform: scale(0.95);
}

#content .bar {
	padding-top: 2rem;
}
.bar:before {
	width: 4.4rem;
	background-color: #369182;
}
#content  p + .item-list,
#content .bar + p {
	margin-top: 2rem;	
}

#content p + p,
#content p + .audioWrap {
	margin-top: 3rem;
}
#content .audioWrap #bg-audio {
	width: 100%;
	margin-bottom: 2rem;
}

#content .audioWrap #bg-audio {
  width: 100%;      /* 컨테이너 폭 최대로 */
  max-width: 100%;  /* 원한다면 px 단위로 제한 가능 (예: 500px) */
  height: 6rem;     /* 기본 높이 */
}

/* WebKit 계열 확대 (모바일 사파리·크롬) */
#content .audioWrap #bg-audio::-webkit-media-controls-panel {
  height: 6ren !important;           /* 패널 높이 */
  transform: scale(1.3);             /* 1.3배 확대 */
  transform-origin: left center;     /* 왼쪽 중간 기준으로 확대 */
}

/* 재생/일시정지 버튼 */
#content .audioWrap #bg-audio::-webkit-media-controls-play-button,
#content .audioWrap #bg-audio::-webkit-media-controls-pause-button {
  width: 5rem !important;
  height: 5rem !important;
}

/* 타임라인 바 */
#content .audioWrap #bg-audio::-webkit-media-controls-timeline {
  height: 0.8rem !important;
  border-radius: 0.4rem;
}

/* 볼륨 슬라이더 */
#content .audioWrap #bg-audio::-webkit-media-controls-volume-slider {
  width: 80px !important;
  height: 40px !important;
}

.mainBg {
	position: relative;
	width: 100%;
	height: 64vh;
	background-image: url('../main/images/mainBg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;  /* 수직: 아래쪽 */
	align-items: flex-start;    /* 수평: 왼쪽 */
	
	padding: 6rem 3rem;
}
.mainBg h1,
.mainBg h2,
.mainBg h6 {
	color: #fff;
	font-family: 'Pretendard-Light';
	line-height: 140%;
}
.mainBg h1 {
	font-family: 'TmoneyRoundWindExtraBold';
	font-weight: normal;
	line-height: 110%;
}
.mainBg + .ui.button.green {
	display: block;
	width: 65%;
	font-size: 2rem;
	line-height: 140%;
	background-color: #007360;
	margin: 4rem auto;
	padding: 2rem;
	border-radius: 4rem;
	box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
  	text-align: center;
}
.mainBg + .ui.button.green:active {
	animation: click-press 0.2s forwards;
}

.footerMenu {
	position: fixed;
    bottom: 0;
    left: 0;
    right: 0;             /* ← 추가 */
    margin: 0 auto;       /* ← 가로 중앙 정렬 */
    width: 100%;
    max-width: 128rem;
    
    list-style: none;
    padding: 10px 0;
    background-color: #e2e7f4;
    z-index: 999;
	
	display: flex;               /* ← 추가 */
    justify-content: center;     /* ← 가로 중앙 정렬 */
    align-items: center;         /* ← 세로 중앙 정렬 (높이가 있으면) */
}

.footerMenu li {
	display: inline-block;
	margin: 0 1.5rem;

}
.footerMenu a {
	display: block;
	padding: 3.6rem 2rem 0;
	background-repeat: no-repeat;
	background-position: center 1rem;
	background-size: 2.4rem;
	color: #333;
	text-decoration: none;
	font-size: 1.5rem;
	font-weight: 500;
}
.footerMenu li:nth-child(1) a {
	background-image: url(../main/images/mainIcon_01.png);
	background-size: 1.8rem;
}
.footerMenu li:nth-child(2) a {
	background-image: url(../main/images/mainIcon_02.png);
}
.footerMenu li:nth-child(3) a {
	background-image: url(../main/images/mainIcon_03.png);
}

.fluorescence {
	display: inline;
	box-shadow: inset 0 -1.8rem 0 #D9FCDB;
	text-decoration: underline;
	text-underline-offset: 0.4rem;
}
h6.subTit {
	margin: 0 0 3rem 0;
	color: #999;
	font-family: 'Pretendard-Light';
}

#bbsView .bbsCon {
    padding: 0 0 3rem 0;
	border: none;
}
#cardNewsWrap .btn,
#bbsView .bbsCon #cardNewsWrap .swiper-button-prev,
#bbsView .bbsCon #cardNewsWrap .swiper-button-next {
	display: none;	
}

#cardNewsWrap .swiper-pagination-bullet-active {
	background-color: #369182;
}

@media (max-width: 1299px) {
	.inner2 {
        padding: 0rem;
    }
	#content {
		padding: 4rem 0 8rem 0;
	}
	#view-list,
	#view-detail {
		padding: 2rem;	
	}
	.page-header {
		padding: 2rem 0 0 2rem;
	}
	#cardNewsWrap {
		margin: 0 auto 3rem auto;
	}
}

@keyframes click-press {
	0% {
		transform: scale(1);
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	}
	50% {
		transform: scale(0.95);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	}
}