@charset "utf-8";
/* 카카오맵 기본설정 */
.root_daum_roughmap .wrap_controllers.hide,
.root_daum_roughmap .wrap_map .wrap_btn_zoom,
.root_daum_roughmap .cont{
    display: none;
}
.root_daum_roughmap .wrap_map .border1,
.root_daum_roughmap .wrap_map .border2,
.root_daum_roughmap .wrap_map .border3,
.root_daum_roughmap .wrap_map .border4{
    border: none;
    background-color: transparent;
}
.root_daum_roughmap_landing.root_daum_roughmap{
    width: 100%;
    height: 100%;
}
.root_daum_roughmap_landing.root_daum_roughmap .wrap_map {
	height: 100%;
}





img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
	border: 0;
}
a {
	cursor: pointer;
}
.material-icons {
    line-height: 1;
}
.sub_page {
	line-height: 1.6;
}


/* flex grid */
.flex { display: flex; }
.fw_w { flex-wrap: wrap; }
.jc_sb {justify-content: space-between;}
.jc_c { justify-content: center; }
.ai_s { align-items: start; }
.ai_c { align-items: center; }
.ai_st { align-items: stretch; }

.grid { display: grid; }
.cols_2 { grid-template-columns: repeat(2, 1fr); }
.cols_3 { grid-template-columns: repeat(3, 1fr); }
.cols_4 { grid-template-columns: repeat(4, 1fr); }
.cols_5 { grid-template-columns: repeat(5, 1fr); }
.cols_6 { grid-template-columns: repeat(6, 1fr); }

@media( max-width: 1400px ) {
    .cols_5 { grid-template-columns: repeat(4, 1fr); }
    .cols_6 { grid-template-columns: repeat(4, 1fr); }
}
@media( max-width: 1024px ) {
	.cols_3 { grid-template-columns: repeat(2, 1fr); }
    .cols_4 { grid-template-columns: repeat(2, 1fr); }
    .cols_5 { grid-template-columns: repeat(3, 1fr); }
    .cols_6 { grid-template-columns: repeat(3, 1fr); }
}
@media( max-width: 768px ) {
    .cols_2 { grid-template-columns: repeat(1, 1fr); }
    .cols_3 { grid-template-columns: repeat(1, 1fr); }
    .cols_4 { grid-template-columns: repeat(1, 1fr); }
    .cols_5 { grid-template-columns: repeat(2, 1fr); }
    .cols_6 { grid-template-columns: repeat(2, 1fr); }
}

/* gap */
.gap_24 { gap: 2.4rem; }
.gap_32 { gap: 3.2rem; }
.gap_40 { gap: 4rem; }
.gap_56 { gap: 5.6rem; }
.gap_62 { gap: 6.2rem; }
@media( max-width: 1400px ) {
    .gap_24 { gap: 2rem; }
    .gap_32 { gap: 2.8rem; }
    .gap_40 { gap: 2.8rem; }
    .gap_56 { gap: 4.4rem; }
    .gap_62 { gap: 4.4rem; }
}
@media( max-width: 1024px ) {
    .gap_24 { gap: 1.8rem; }
    .gap_32 { gap: 2.6rem; }
    .gap_40 { gap: 2.6rem; }
    .gap_56 { gap: 3.2rem; }
    .gap_62 { gap: 3.2rem; }
}
@media( max-width: 768px ) {
    .gap_24 { gap: 1.6rem; }
    .gap_32 { gap: 2.4rem; }
    .gap_40 { gap: 2.4rem; }
    .gap_56 { gap: 3rem; }
    .gap_62 { gap: 3rem; }
}



/* 테이블 표 */
.table_wrap {
    width: 100%;
}
.table {
    display: grid;
    word-break: break-all;
    font-size: 1.6rem;
    text-align: center;
    border-top: 1px solid #000;
    border-left: 1px solid #ddd;
}
.table .th {
    background: var(--background-grey);
    font-weight: 600;
	font-size: 1.8rem;
	justify-content: center;
}
.table .th_label {
    background: #fff;
    font-weight: 600;
    text-align: left;
}
.table .td {
    text-align: left;
}
.table > div {
    padding: 2.0rem;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    display: flex;
    align-items: center;
}
.table_cols_2 {
    grid-template-columns: 1fr 1fr;
}
.table_cols_3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.table_cols_4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.table_cols_5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 4fr;
}
@media screen and (max-width: 768px){
	.table_cols_3 {
		grid-template-columns: .7fr 1fr 1fr;
	}
}
/* 세로 병합 */
.merge_row2 {
    grid-row: span 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}
.merge_row3 {
    grid-row: span 3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}
.merge_row4 {
    grid-row: span 4;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}
/* 가로 병합 */
.merge_col2 {
    grid-column: span 2;
}
.merge_col3 {
    grid-column: span 3;
}
.merge_col4 { 
    grid-column: span 4; 
}
/* 모바일 반응형 */
@media(max-width: 768px) {
    .table_wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table > div {
        padding: 1.2rem;
        font-size: 1.4rem;
    }
}





/* 섹션 */
/* 섹션 */
.sec_title1{ font-size: 3.6rem; font-weight: 700; }
.sec_title2{ font-size: 2.6rem; font-weight: 700; }
@media( max-width: 1200px ) {
	.sec_title1{ font-size: 3.2rem; }
	.sec_title2{ font-size: 2.4rem; }
}
@media( max-width: 768px ) {
}

.mb_l{margin-bottom: 6rem}
.mb_m{margin-bottom: 4rem}
.mb_s{margin-bottom: 2.8rem}
@media( max-width: 1200px ) {
	.mb_l{margin-bottom: 4rem}
	.mb_m{margin-bottom: 3rem}
	.mb_s{margin-bottom: 2rem}
}
@media( max-width: 768px ) {
}


.br_t{border-top: 1px solid #222;}
.br_b{border-bottom: 1px solid #222;}

@media screen and (max-width: 1600px){

}
@media screen and (max-width: 1400px){

}
@media screen and (max-width: 1024px){

}
@media screen and (max-width: 768px){

}

/* 6rem
4rem
3.2rem
2.8rem
2.4rem
1.6rem
1.2rem
*/

.sub_page {
	font-weight: 300;
}
.sub_page .hashtag {
	display: inline-block;
	font-size: 1.6rem;
	border-radius: 999px;
	padding: 1rem 1.8rem;
	border: 1px solid #222;
	color: #222;
	margin-bottom: 2.8rem;
}
.sub_page .tag {
	width: 58px;
    aspect-ratio: 1 / 1;
	border-radius: 99px;
	background-color: #000;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width: 1400px){}
@media screen and (max-width: 1024px){}
@media screen and (max-width: 768px){
	.sub_page .hashtag {
		font-size: 1.4rem;
		padding: .8rem 1.2rem;
		margin-bottom: 2rem;
	}
	.sub_page .tag {
		width: 44px;
		font-size: 1.4rem;
	}
}



/* 공연 */
.performances .filter_wrap {
	display: flex;
	justify-content: start;
	gap: 1.6rem;
	margin-bottom: 6rem;
}
.performances .filter_btn {
	font-size: 1.8rem;
	font-weight: normal;
	padding: 1.2rem 2.4rem;
	border-radius: 999px;
	border: 1px solid #ccc;
	background-color: #fff;
	color: #000;
}
.performances .filter_btn.active {
	font-weight: 500;
	border: 1px solid #000;
	background-color: #000;
	color: #fff;
}
.performances .box {
	padding-top: 6rem;
	border-top: 1px solid #222;
}
.performances .box.hidden {
    display: none;
}
.performances .box a {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.performances .box .header {
	margin-bottom: 6rem;
	flex: 1;
}
.performances .box .header .tit1 {
	margin-bottom: 1.6rem;
	color: #666;
}
.performances .box .info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2.4rem;
}
.performances .box .info .date {
	font-size: 3.6rem;
	font-weight: 700;
}

.performances .box .thumb {
	position: relative;
	height: 30rem;
	overflow: hidden;
}
.performances .box .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.performances .box .more {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 320px;
    aspect-ratio: 1 / 1;
	clip-path: circle(0px at 100% 100%);
	transition: clip-path 0.4s ease;
	z-index: 2;
}
.performances .box:hover .more {
	clip-path: circle(160px at 100% 100%);
}
.performances .box .more img {
	position: absolute;
	right: -1px;
	bottom: 0;
	width: 137px;
	height: auto;
}
@media screen and (max-width: 1400px){
	.performances .box {
		padding-top: 4.4rem;
		border-top: 1px solid #222;
	}
	.performances .box .thumb {
		height: 24rem;
	}
}
@media screen and (max-width: 768px){
	.performances .box .header {
		margin-bottom: 3.6rem;
	}
	.performances .box .header .tit1 {
		margin-bottom: 1.2rem;
	}
	.performances .box .thumb {
		height: 27rem;
	}
	.performances .box .more {
		width: 200px;
	}
}


/* 교육 */
.education .sec1 .box > a {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	bottom: 0;
	transition: bottom 0.6s ease;
}
.education .sec1 .box:hover a{
	bottom: 32px;
}
.education .sec1 .box .thumb {
	margin-bottom: 4.8rem;
	height: 34rem;
	overflow: hidden;
}
.education .sec1 .box .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	scale: 1;
	transition: scale 0.6s ease;
}
.education .sec1 .box:hover .thumb img {
	scale: 1.05;
}
.education .sec1 .box .header {
	margin-bottom: 2.4rem;
}
.education .sec1 .box .header .tit2 {
	color: #000;
	transition: color 0.6s ease;
}
.education .sec1 .box:hover .header .tit2 {
	color: var(--main-color);
}
.education .sec1 .box .hashtag {
	margin-bottom: 2.4rem;
	align-self: flex-start;
}
.education .sec1 .box .info {
	flex: 1;
}
.education .sec1 .box .info li {
	display: flex;
	justify-content: start;
	gap: 2rem;
	margin-bottom: 1.2rem;
	font-size: 1.8rem;
}
.education .sec1 .box .info li .label {
	min-width: 4rem;
	font-size: 2rem;
	font-weight: 600;
}
.education .sec1 .box .more {
	display: flex;
	justify-content: end;
	gap: 1.6rem;
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 2.4rem;
	color: #000;
	transition: color 0.6s ease;
}
.education .sec1 .box:hover .more {
	color: var(--main-color);
}
.education .sec1 .box .more span {
    display: block;
    width: 2.5rem;
    aspect-ratio: calc(25 / 24);
    position: relative;
}
.education .sec1 .box .more span::before,
.education .sec1 .box .more span::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: opacity 0.6s ease;
}
.education .sec1 .box .more span::before {
    background-image: url(../../pages/images/ico_arrow_10.png);
    opacity: 1;
}
.education .sec1 .box .more span::after {
    background-image: url(../../pages/images//ico_arrow_10_red.png);
    opacity: 0;
}
.education .sec1 .box:hover .more span::before {
    opacity: 0;
}
.education .sec1 .box:hover .more span::after {
    opacity: 1;
}
@media screen and (max-width: 1024px){
	.education .sec1 .box .thumb {
		margin-bottom: 4rem;
		height: 24rem;
	}
	.education .sec1 .box .info li {
		gap: 1.6rem;
		margin-bottom: .4rem;
	}
}
@media screen and (max-width: 768px){
	.education .sec1 .box:hover a{
		bottom: 0;
	}
}




/* 상세페이지 */
/* 상세페이지 */
.performances_detail {
	display: flex;
	justify-content: space-between;
	align-items: start;
}
.performances_detail > div {
	width: 50%;
}
.performances_detail .sec1 .header {
	display: flex;
	justify-content: space-between;
	align-items: start;
}
.performances_detail .sec1 .header .hd1 .tit1 {
	margin-bottom: 1.2rem;
	color: #666;
}
.performances_detail .sec1 .header .hd1 .tit2 {
	margin-bottom: 6rem;
}
/* 아이콘/라벨 가로정렬 */
.performances_detail .sec1 ul li {
	display: flex;
	justify-content: start;
	gap: 2rem;
	margin-bottom: 1.4rem;
	font-size: 1.8rem;
}
/* 아이콘 크기 */
.performances_detail .sec1 .info li .icon,
.performances_detail .sec1 .content li .icon {
	min-width: 2.2rem;
	line-height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	max-height: 2.9rem;
}
/* 라벨   일시, 장소, 공연내용 */
.performances_detail .sec1 .info li .label,
.performances_detail .sec1 .content li .label {
	min-width: 12rem;
	font-size: 2rem;
	font-weight: 600;
}
.performances_detail .sec1 .info li .value.link a {
	color: #000;
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 4px;
}
.performances_detail .sec1 .info li .value.link a:hover {
	color: var(--main-color);
}
/* 공연내용/세부프로그램  */
.performances_detail .sec1 .content li .text {
	margin-top: 1rem;
}
.performances_detail .sec1 .content li .text .b {
	margin-bottom: 0.8rem;
	font-weight: 600;
}
.performances_detail .sec1 .content li .text .r {
	margin-bottom: 2rem;
}
.performances_detail .sec1 .content li .text .r:last-of-type {
	margin-bottom: 0;
}
.performances_detail .sec1 .content li .text .note {
	color: #999;
}


/* 슬라이드 */
.performances_detail .sec2 {
	position: sticky;
	top: 9.6rem;
	align-self: flex-start;
}
.performances_detail .sec2_slider {
	width: 100%;
	max-height: 53rem;
	overflow: hidden;
}
.performances_detail .sec2_slider .swiper-slide {
	height: 53rem;
}
.performances_detail .sec2_slider img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.performances_detail .sec2_controls {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	/* gap: 2rem; */
}
.performances_detail .sec2_pagination {
	font-size: 1.6rem;
	font-weight: 700;
	color: #222;
	width: auto;
	margin-top: 1.6rem;
	margin-right: 2.4rem;
}
.performances_detail .sec2_nav {
	display: flex;
	gap: 1.2rem;
	margin-top: 1.6rem;
}
.performances_detail .sec2_nav button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-size: 2.4rem;
	color: #222;
}
.performances_detail .sec2_nav button:hover {
	color: var(--main-color);
}
.performances_detail .sec2_nav button img {
	width: 2.4rem;
	height: 2.4rem;
}

@media screen and (max-width: 1024px){
	.performances_detail .sec1 .header .hd1 .tit2 {
		margin-bottom: 4rem;
	}
	.performances_detail .sec1 ul li {
		gap: 1.6rem;
		font-size: 1.6rem;
	}
	.performances_detail .sec1 .info li .label, .performances_detail .sec1 .content li .label {
		font-size: 1.7rem;
	}
	.performances_detail .sec2_slider {
		max-height: 34rem;
	}
	.performances_detail .sec2_slider .swiper-slide {
		height: 34rem;
	}
	.performances_detail .sec2_pagination,
	.performances_detail .sec2_nav {
		margin-top: 1rem;
	}
}
@media screen and (max-width: 768px){
	.performances_detail {
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}
	.performances_detail > div {
		width: 100%;
	}

	.performances_detail .sec1 .br_t:first-of-type {
		display: none;
	}
	.performances_detail .sec1 .info li .label, .performances_detail .sec1 .content li .label {
		min-width: 8rem;
	}
	
	.performances_detail .sec1 ul li {
        gap: 1rem;
		margin-bottom: 1rem;
    }
	.performances_detail .sec1 .info li .icon,
	.performances_detail .sec1 .content li .icon {
		min-width: 2.6rem;
		max-height: 2.6rem;
	}
	.performances_detail .sec1 .info li .icon img,
	.performances_detail .sec1 .content li .icon img {
		width: 85%;
	}
	.performances_detail .sec2 {
		position: relative;
		top: 0rem;
	}
	.performances_detail .sec2_slider {
		max-height: 28rem;
	}
	.performances_detail .sec2_slider .swiper-slide {
		height: 28rem;
	}
}




/* 1:3 레이아웃 layout_aside*/
.layout_aside > div {
	display: flex;
	justify-content: space-between;
	gap: 6.2rem;
}
.layout_aside > div > .left {
	width: 30%;
}
.layout_aside > div > .right {
	flex: 1;
}

@media screen and (max-width: 1024px){
	.layout_aside > div > .left {
		width: 20%;
	}
}
@media screen and (max-width: 768px){
	.layout_aside > div {
		display: block;
	}
	.layout_aside > div > .left {
		width: 100%;
		margin-bottom: 3.2rem;
	}
	.layout_aside .sec1 {
		margin-bottom: 8rem;
	}
}


/* 연구 */
/* 연구 */
.research .right .box .header {
	margin-bottom: 3.2rem;
}
.research .right .box .info li {
	display: flex;
	justify-content: start;
	gap: 2rem;
	margin-bottom: 1.2rem;
	font-size: 1.8rem;
}
.research .right .box .info li .label {
	min-width: 9rem;
	font-size: 2rem;
	font-weight: 600;
}
.research .right .box .info li.image {
	margin-top: 4rem;
}

@media screen and (max-width: 768px){
	
}




/* 관람권 */
.membership .sec1 .box .text {
	/* line-height: 1.5; */
	font-size: 1.8rem;
}
.membership .sec1 .box .btn {
	display: inline-block;
	/* line-height: 1.5; */
    height: auto;
    padding: 0;
    border-radius: none;
}
.membership .sec1 .box .btn a  {
	background-color: var(--main-color);
	color: #fff;
	padding: 1rem 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.2rem;
	transition: background-color .3s ease ;
}
.membership .sec1 .box .btn:hover a  {
	background-color: #000;
}
.membership .sec1 .box .image {
	text-align: center;
}

.membership .sec2 .box {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 3.2rem;
}
.membership .sec2 .box .box_p {
	background-color: var(--background-grey);
	padding: 2.4rem;
	border-radius: 2.4rem;
	display: flex;
	flex-wrap: wrap;
}
.membership .sec2 .box .box_p > div {
	width: 100%;
}
.membership .sec2 .box .box_p .title {
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 1.2rem;
	font-size: 2.2rem;
	font-weight: 700;
	margin-bottom: 1.2rem;
}
.membership .sec2 .box .box_p .title .num {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--main-color);
	border-radius: 999px;
	width: 3.2rem;
    aspect-ratio: 1 / 1;
	color: #fff;
	font-size: 1.8rem;
}
.membership .sec2 .box .box_p .cont {
	flex: 1;
	margin-bottom: 3.2rem;
	font-size: 1.8rem;
	padding-left: 4.4rem;
}
.membership .sec2 .box .box_p .icon {
	text-align: right;
}
.membership .sec2 .box .box_a {
	font-size: 1.8rem;
}

@media screen and (max-width: 768px){
	.membership .sec1 .box .text {
		font-size: 1.7rem;
	}
	
	
	.membership .sec2 .box {
		display: block;
	}
	.membership .sec2 .box .box_p {
		margin-bottom: 2.4rem;
	}
}




/* 예매안내 */
.reservation .sec1 .box .cont {
	font-size: 1.8rem;
}
.reservation .sec1 .box .cont .txt {
	margin-bottom: .4rem;
}
.reservation .sec1 .box .cont .txt_b { 
	margin-bottom: 1.2rem;
}
.reservation .sec1 .box .cont .txt_red {
	color: var(--main-color);
}
.reservation .sec1 .box .cont .txt_g {
	color: #666;
}
.reservation .sec1 .box .call {
	justify-content: start;
	gap: 1.2rem;
}
.reservation .sec1 .box:nth-child(3) {
    grid-row: span 2;
}
.reservation .table_cols_3.reserv_table {
	grid-template-columns: 1.5fr 3fr 2fr;
}

@media screen and (max-width: 768px) {
    .reservation .sec1 {
        grid-template-columns: 1fr;
    }
    .reservation .sec1 .box:nth-child(3) {
        grid-row: span 1;
    }
	.reservation .sec1 .box .icon {
		max-width: 4.4rem;
	}
	.reservation .sec1 .box .cont .txt {
		margin-bottom: .2rem;
	}
	.reservation .sec1 .box .cont .txt_b { 
		margin-bottom: 1rem;
	}
	.reservation .sec1 .box .call div {
		margin-bottom: .2rem;
	}
}




/* 객석나눔 */
.seat_sharing .box .txt_b {
	font-weight: 500;
}
.seat_sharing .box .txt_warning {
	color: rgb(196, 0, 0);
}
.seat_sharing .sec1 .box {
	width: 50%;
    display: flex;
    flex-direction: column;
	/* line-height: 1.6; */
}
.seat_sharing .sec1 .box .txt {
    /* flex: 1; */
	font-size: 1.8rem;
	margin-bottom: 2.4rem;
	min-height: 26rem;
}
.seat_sharing .sec1 .box .txt a {
	color: #000;
	transition: color .5s ease;
}
.seat_sharing .sec1 .box .txt a:hover {
	color: var(--main-color);
}
.seat_sharing .sec1 .box .txt .text_list {
	display: flex;
    justify-content: start;
    gap: 12px;
	margin-bottom: 6px;
}
.seat_sharing .sec1 .box .txt .text_list div:first-child {
	min-width: 12%;
}
.seat_sharing .sec1 .box .note {
	background-color: var(--background-grey);
	padding: 2.4rem;
	border-radius: 1.6rem;
	color: #333;
}
.seat_sharing .sec1 .box .image {
	/* height: 32rem; */
}
.seat_sharing .sec1 .box .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media screen and (max-width: 768px) {
	.seat_sharing .sec1 {
		display: block;
	}
	.seat_sharing .sec1 .box {
		width: 100%;
	}
	.seat_sharing .sec1 .box:first-child {
		margin-bottom: 4rem;
	}
	.seat_sharing .sec1 .box .image {
		height: 24rem;
	}
}




/* 소개  국립부산국악원 */
.guide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.guide .sec1 {
	position: relative;
	margin-bottom: 30rem;
}
.guide .sec1 .video {
	width: 75%;
	max-width: 109rem;
	height: 62rem;
	overflow: hidden;
}
.guide .sec1 .video iframe {
	transform: scale(1.04);
	width: 100%;
	height: 100%;
	display: block;
}
.guide .sec1 .cont {
	width: calc(100%/2);
	max-width: 78rem;
	background-color: #fff;
	position: absolute;
	right: 0;
	bottom: -30%;
	padding: 4rem;
}
.guide .sec1 .cont .logo {
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 3.2rem;
	font-size: 3.7rem;
}
.guide .sec1 .cont .txt {
	font-size: 1.8rem;
	/* line-height: 1.6; */
}
.guide .sec2 {
    text-align: center;
}
.guide .sec2 .image {
    width: 50%;
    max-width: 78rem;
    margin-left: 35%;
}

@media screen and (max-width: 1400px) {
	.guide .sec1 .video {
		height: 50rem;
	}
	.guide .sec1 .cont {
		width: 60%;
		max-width: 78rem;
		right: 0;
		bottom: -50%;
	}
	.guide .sec2 .image {
		width: 60%;
		max-width: 78rem;
		margin-left: 35%;
	}
}
@media screen and (max-width: 1024px) {
	.guide .sec1 {
		position: relative;
		margin-bottom: 43rem;
	}
	.guide .sec1 .video {
		width: 100%;
		max-width: 80%;
		height: 40rem;
	}
	.guide .sec1 .cont {
		width: 70%;
		max-width: 78rem;
		top: 85%;
		bottom: unset;
	}
	.guide .sec1 .cont .logo {
		gap: 3.2rem;
		font-size: 3rem;
	}
}
@media screen and (max-width: 768px) {
	.guide .sec1 {
		margin-bottom: 4rem;
	}
	.guide .sec1 .video {
		width: 100%;
		max-width: 100%;
		height: 24rem;
	}
	.guide .sec1 .cont {
		width: 100%;
		max-width: 78rem;
		position: relative;
		padding: 5rem 1rem;
	}
	.guide .sec1 .cont .logo {
		gap: 1rem;
		font-size: 2.4rem;
	}
	.guide .sec1 .cont .logo img {
		max-width: 3.2rem;
	}
	.guide .sec2 .image {
		width: 80%;
		max-width: 78rem;
		margin-left: auto;
	}
}




/* 소개 국악연주단 */
.guide_orchestra .box .txt {
	font-size: 1.8rem;
}



/* 소개 국악체험관 */
.guide_experience .left {
    position: sticky;
    top: 10rem;
    align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 1.2rem;
}
.guide_experience .left.sec_title1 {
	margin-bottom: 10rem;
}
.guide_experience .right .text {
	font-size: 1.8rem;
	color: #666;
}
.guide_experience .right .info li {
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 2rem;
	font-size: 1.8rem;
	margin-bottom: .6rem;
}
.guide_experience .right .info li .label {
	min-width: 8rem;
	font-size: 2rem;
	font-weight: 600;
}
.guide_experience .right .header2 {
	font-size: 2rem;
}
.guide_experience .right .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.guide_experience .sec2_title {
	margin: 20rem 0 12rem;
	font-size: 3.6rem;
	text-align: center;
}
@media screen and (max-width: 1024px) {
    .guide_experience .right .text {
        font-size: 1.6rem;
    }
    .guide_experience .right .info li {
        gap: 1.6rem;
        font-size: 1.6rem;
    }
    .guide_experience .right .info li .label {
        font-size: 1.7rem;
    }
    .guide_experience .right .header2 {
        font-size: 1.8rem;
    }
    .guide_experience .sec2_title {
        margin: 14rem 0 8rem;
        font-size: 3rem;
    }
}

@media screen and (max-width: 768px) {
	.guide_experience > div {
		margin-bottom: 10rem;
	}
    .guide_experience .left {
        position: relative;
        top: 0;
    }
    .guide_experience .left.sec_title1 {
		font-size: 2.6rem;
        margin-bottom: 2rem;
    }
	.guide_experience .right .br_t.mb_l {
		margin-bottom: 2rem;
	}
    .guide_experience .right .info li {
        gap: 1rem;
        margin-bottom: .4rem;
    }
    .guide_experience .right .info li .label {
        min-width: 7rem;
    }
    .guide_experience .sec2_title {
        margin: 12rem 0 8rem;
        font-size: 3.2rem;
    }
}


/* 소개 편의시설 */
.guide_facilities .right .text {
    font-size: 1.8rem;
}
.guide_facilities .right .info li {
    display: flex;
    justify-content: start;
	align-items: center;
    gap: 2rem;
    font-size: 1.8rem;
    margin-bottom: .6rem;
}
.guide_facilities .right .info li .label {
    min-width: 8rem;
    font-size: 2rem;
    font-weight: 600;
}
.guide_facilities .right .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1024px) {
    .guide_facilities .right .text {
        font-size: 1.6rem;
    }
    .guide_facilities .right .info li {
        gap: 1.6rem;
        font-size: 1.6rem;
    }
    .guide_facilities .right .info li .label {
        font-size: 1.7rem;
    }
}

@media screen and (max-width: 768px) {
    .guide_facilities .right .info li {
        gap: 1rem;
        margin-bottom: .4rem;
    }
    .guide_facilities .right .info li .label {
        min-width: 7rem;
    }
}


/* 소개 소셜미디어 */
/* SNS */
.guide_social .box {
    border: 1px solid #e0e0e0;
    border-radius: 1.6rem;
    padding: 4rem;
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
.guide_social .box.kakao {
    grid-row: span 2;
    display: block;
}
.guide_social .box.kakao .title {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-bottom: 4rem;
}
.guide_social .box.kakao .desc {
    font-size: 1.8rem;
	line-height: 1.8;
    padding-left: 6rem;
}
.guide_social .box .icon {
    min-width: 4.4rem;
    max-width: 4.4rem;
}
.guide_social .box .icon img {
    width: 100%;
}
.guide_social .box .txt {
    font-size: 2.2rem;
    font-weight: 600;
}
.guide_social .box.link {
    transition: background-color .3s ease;
    text-decoration: none;
    color: inherit;
}
.guide_social .box.link:hover {
    background-color: var(--background-grey);
}

@media screen and (max-width: 1024px) {
	.guide_social .box {
		padding: 3.2rem;
	}
    .guide_social .box.kakao .desc {
        padding-left: 0;
    }
}

@media screen and (max-width: 768px) {
	.guide_social .box {
		padding: 2.4rem;
	}
    .guide_social .box.kakao {
        grid-row: span 1;
    }
}



/* 소개 오시는 길 */
.directions .map_wrap {
    width: 100%;
    height: 50rem;
}
.directions .map_wrap {
    position: relative;
}
.directions .map_wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.directions .box .cont {
    font-size: 1.8rem;
}
.directions .box .cont .txt {
    margin-bottom: .4rem;
}
.directions .box .cont .txt_b {
    margin-bottom: 1.2rem;
}
.directions .box .cont .note {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.directions .box .cont .note .note_card {
    background-color: var(--background-grey);
    padding: 3.2rem;
    border-radius: 1.6rem;
}
.directions .box .cont .note .note_title {
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
}
.directions .box .cont .note .note_list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.directions .box .cont .note .note_list li {
	display: flex;
	justify-content: start;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    color: #333;
}
.directions .box .cont .note .note_list li:last-child {
    margin-bottom: 0;
}
.directions .box .cont .note .note_list li .from {
	min-width: 11rem;
}
.directions .box .cont .note .note_list li .arrow {
	min-width: 4rem;
    font-size: 1.8rem;
    color: #999;
    text-align: center;
}

@media screen and (max-width: 1024px) {
    .directions .map_wrap {
        height: 40rem;
    }
}

@media screen and (max-width: 768px) {
    .directions .map_wrap {
        height: 30rem;
    }
    .directions .sec2 {
        grid-template-columns: 1fr;
    }
	.directions .box_left {
        display: flex;
        flex-direction: column;
    }
    .directions .box_left .box:last-child {
        order: -1;
		margin-bottom: 4rem;
    }
	.directions .box_left .box.mb_l {
		margin-bottom: 0;
	}

    .directions .box .icon {
        max-width: 4.4rem;
    }
    .directions .box .cont .txt {
        margin-bottom: .2rem;
    }
    .directions .box .cont .txt_b {
        margin-bottom: 1rem;
    }
	.directions .box .cont .note .note_card {
        padding: 2.4rem;
    }
    .directions .box .cont .note .note_list li {
        gap: .8rem;
    }
}