#CoverSlide-Main::after {
	content:'';
	display:block;
	width:100%;
	height:100%;
	position: absolute;
	z-index: 1;
	top:0;
	left:0;
	background: rgba(0,0,0,.25);
}
.visual_title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 0 5rem;
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    color: #fff;
}
.visual_title > P.h2 {
    color: #fff;
	font-family:var(--base-font-serif);
	font-size:6rem;
}
.visual_title > P.h2:has( + P.h2) {
	margin-left: -10rem;
}
.visual_title > P.h2 + P.h2 {
	margin-left: 10rem;
}




/********************* 테블릿 *********************/
@media all and (max-width: 1024px) {

	#visual_cover {
		overflow: visible;
		height: auto;
	}
	.visual_title {
		height: 50rem;
	}
	.visual_title > P.h2 {
		font-size: 5rem;
	}



	.visual_menu {position: relative; bottom: 0; left: 0; z-index:1; width: 100%; background-color: rgba(0, 0, 0, 0.16); backdrop-filter: blur(20px); }
	.visual_menu > .layout {padding: 0; }
	.visual_menu > UL {display: flex; flex-wrap: wrap; flex-direction: row; }
	.visual_menu > UL > li { position: relative; width: calc(100% / 2); }
	.visual_menu > UL > li > a {display: flex; 
		flex-direction: row-reverse;
		justify-content: flex-end;
		align-items: center;
		position: relative; padding: 2rem 3rem;
		border-left:1px solid rgba(255, 255, 255, .2);color: #fff; 
		transition: all 0.3s ease-in-out;	
	}
	.visual_menu > UL > li:nth-of-type(1) > a {
		background-color: var(--base-color-01); 
	}
	.visual_menu > UL > li:nth-of-type(2) > a {
		background-color: var(--base-color-02); 
	}
	.visual_menu > UL > li:nth-of-type(3) > a {
		background-color: var(--base-color-03); 
	}
	.visual_menu > UL > li:nth-of-type(4) > a {
		background-color: var(--base-color-04); 
	}
	.visual_menu > UL > li:nth-of-type(5) > a {
		background-color: var(--css_theme_3_active_bg); 
	}

	.visual_menu > UL > li > a span {
		margin-left: 2rem;
	}

	.visual_menu > UL > li > a .fa {
		font-size: 2rem;

		width: 4rem;
		height: 4rem;
		border-radius: 100%;
		display:flex;
		align-items: center;
        justify-content: center;

		background-color: #fff;
        box-shadow: none;
        border: 0;
	}

	.visual_menu > UL > li:nth-of-type(1) > a .fa {
		color: var(--base-color-01); 
	}
	.visual_menu > UL > li:nth-of-type(2) > a .fa {
		color: var(--base-color-02); 
	}
	.visual_menu > UL > li:nth-of-type(3) > a .fa {
		color: var(--base-color-03); 
	}
	.visual_menu > UL > li:nth-of-type(4) > a .fa {
		color: var(--base-color-04); 
	}
	.visual_menu > UL > li:nth-of-type(5) > a .fa {
		color: var(--css_theme_3_active_bg); 
	}


}
/********************* 모바일 *********************/
@media all and (max-width: 768px) {
	.visual_title {
		height: 35rem;
	}
	.visual_title > P.h2 {
		font-size: 4rem;
	}

	.visual_menu > UL > li > a {
		flex-direction: column-reverse;
	}
	.visual_menu > UL > li > a SPAN {
		margin: 1rem 0 0;
	}

}

/********************* 모바일 *********************/
@media all and (max-width: 512px) {

	.visual_title > P.h2 {
		font-size: 3rem;
	}


}







/********************* PC *********************/
@media all and (min-width: 1024px) {

	
	BODY.MP #visual_cover {
		height:100vh;
		min-height:50rem;
		overflow:hidden;
	}
	#visual_cover #CoverSlide-Main {
		height: 100%;
	}


	.visual_menu {position: absolute; bottom: 0; left: 0; z-index:1; width: 100%; background-color: rgba(0, 0, 0, 0.16); backdrop-filter: blur(20px); }
	.visual_menu > .layout {padding: 0; }
	.visual_menu > UL {display: flex; }
	.visual_menu > UL > li {flex: 1; position: relative; }
	.visual_menu > UL > li > a {display: flex; flex-direction: column; position: relative; row-gap: .5rem; padding: 3.2rem; height: 100%; border-left:1px solid rgba(255, 255, 255, .2);color: #fff; 
		transition: all 0.3s ease-in-out;	
	}
	.visual_menu > UL > li > a::before {
		content:'';
		display:block;
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		opacity: 0;
		background-image:url('/imgs/hanok_docbg_t.png');
		z-index:1;
		pointer-events: none;

	}

	.visual_menu > UL > li:last-child > a{border-right:1px solid rgba(255, 255, 255, .2)}
	.visual_menu > UL > li > a > span {font-weight: 600; line-height: 1.4; }
	.visual_menu > UL > li > a:hover {

		background-color:#fff;

        width: 100%;
        height: 15rem;
        position: absolute;
        bottom: 0;
        left: 0;

		border-radius: 5rem;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		
	}
	.visual_menu > UL > li > a:hover::before {
			opacity:0.05;
	}
	.visual_menu > UL > li > a:hover > span {font-weight: 700; font-size:2.4rem;}


	.visual_menu > UL > li:nth-of-type(1) > a:hover {
		background-color: var(--base-color-01); 
	}
	.visual_menu > UL > li:nth-of-type(2) > a:hover {
		background-color: var(--base-color-02); 
	}
	.visual_menu > UL > li:nth-of-type(3) > a:hover {
		background-color: var(--base-color-03); 
	}
	.visual_menu > UL > li:nth-of-type(4) > a:hover {
		background-color: var(--base-color-04); 
	}
	.visual_menu > UL > li:nth-of-type(5) > a:hover {
		background-color: var(--css_theme_3_active_bg); 
	}



	.visual_menu > UL > li > a > i.fa { 
		transition: all 0.3s ease-in-out;	

        position: absolute;
		bottom:0;
		right:0;

        bottom: 1.5rem;
        right: 1.5rem;
        font-size: 2.4rem;
		width: 5rem;
		height: 5rem;
		border-radius: 100%;
		display:flex;
		align-items: center;
        justify-content: center;


        border: 1px solid rgba(0,0,0,.25);
        box-shadow: 0.2rem 0.2rem 0.5rem 0 rgba(0,0,0,.25);

	}
	.visual_menu > UL > li > a:hover > i.fa { 
		font-size:5rem;
		border-color: transparent;
        box-shadow: none;
	}

	.visual_menu > UL > li:nth-of-type(1) > a > i.fa {
		background-color: var(--base-color-01); 
	}
	.visual_menu > UL > li:nth-of-type(2) > a > i.fa {
		background-color: var(--base-color-02); 
	}
	.visual_menu > UL > li:nth-of-type(3) > a > i.fa {
		background-color: var(--base-color-03); 
	}
	.visual_menu > UL > li:nth-of-type(4) > a > i.fa {
		background-color: var(--base-color-04); 
	}
	.visual_menu > UL > li:nth-of-type(5) > a > i.fa {
		background-color: var(--css_theme_3_active_bg); 
	}

}



.NoticeFrame {
    display:flex;
    padding: 0 1.5rem;
	margin: 10rem auto;

}

.NoticeFrame .noticebox {
    width:calc(50% - 15rem);
    height:100%;
    padding-right:5rem;
}
.NoticeFrame .mainrow_notice {
    width:calc(55% - 15rem);
}  
.NoticeFrame .mainrow_faq {
    width:calc(45% - 15rem);
}
.NoticeFrame .noticebox h4 {
    position: relative;
    height:5rem;
    padding-bottom:1rem;
}
.NoticeFrame .noticebox h4 > a {
    position: absolute;
    top: .5rem;
    right: 0;
    border: 1px solid #aaa;
    font-size: 1.5rem;
    display: block;
    padding: .3rem 1.5rem;
    font-weight: normal;
    border-radius: 5px;
}

.NoticeFrame .noticebox dl {
    display: flex;
    border: 1px solid #aaa;
    padding: 2.1rem 2rem;
    width: 100%;
    border-radius: 5px;
    background-color:#ebeff3;
}
.NoticeFrame .noticebox dl > dt {
    width:7rem;
    text-align: center;
    font-size: 1.4rem;
    padding-right:1rem;
}
.NoticeFrame .noticebox dl > dt strong {
    display: block;
    font-size: 4rem;
    padding: 0;
    margin-top: -.5rem;
    color: #376aad;
}
.NoticeFrame .noticebox dl > dd {
    width:calc(100% - 7rem);
    padding:0 1rem;
    display: block;
}

.NoticeFrame .noticebox dl > dd strong {
    display: block;
    width:100%;
    font-size: 1.75rem;
    overflow: hidden;
    word-wrap: normal;
    white-space: nowrap;
    text-overflow: ellipsis;    
}
.NoticeFrame .noticebox dl > dd p {
    width: 100%;
    font-size: 1.5rem;
    padding-top: 1rem;
    font-weight: 400;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: all 0.2s ease;
}
.NoticeFrame .noticebox a + ul {
    
    padding:0.5rem 0.5rem 0;
}
.NoticeFrame .noticebox h4 + ul {
    border-top:1px solid #aaa;
    padding-top:2rem;
}
.NoticeFrame .noticebox ul li {
    padding:0.5rem 0;
}
.NoticeFrame .noticebox ul a {
    width: calc(100% - 11rem);
    display: inline-block;
    vertical-align: middle;
	overflow:hidden;

	font-size: 1.7rem;
	word-wrap: normal;
	white-space:nowrap;
	text-overflow:ellipsis;    
}
.NoticeFrame .noticebox ul a::before {
    content:"";
    display:inline-block;
    vertical-align: middle;
    width:.5rem;
    height:.5rem;
    margin-right:1rem;
    border-radius: 100%;
    background-color:#366ab0;
}
.NoticeFrame .noticebox ul a + span {
    display: inline-block;
    width: 11rem;
    text-align: right;
    vertical-align: middle;
}
.NoticeFrame .noticebox ul.bbs_faq a {
    width:100%;
}
.NoticeFrame .noticebox ul.bbs_faq a::before {
    display:none;
}
.NoticeFrame .noticebox ul.bbs_faq a > span {
    display:inline-block;
    vertical-align: middle;
    padding-right:1rem;
    font-weight: bold;
    color: #376aad;
}




.NoticeFrame .campainbox {
    width:30rem;
    height:35rem;
    overflow:hidden;
}
.NoticeFrame .campainbox > div {
    width:30rem;
    height:30rem;
}

.NoticeFrame .campainbox h4 {
    position: relative;
    height:5rem;
    padding-bottom:1rem;
}

@media (max-width: 767px) {
    .NoticeFrame {
        margin-top:5rem;
        height:auto;
        flex-direction: column;
    }
    .NoticeFrame .noticebox {
        padding-right:0;
    }
	.NoticeFrame .mainrow_notice ,
    .NoticeFrame .mainrow_faq {
        width:100%;
	}

    .NoticeFrame .noticebox a + ul {
        padding-bottom:1.5rem;
        border-bottom:1px solid #aaa;
    }
    .NoticeFrame .noticebox h4 + ul {
        padding-bottom: 2rem;
        border-bottom: 1px solid #aaa;
    }
    .NoticeFrame .mainrow_faq {
        margin-top:5rem;
	}

    .NoticeFrame .campainbox {
        margin-top:5rem;
        width:100%;
    }
    .NoticeFrame .campainbox h4 {
        text-align:center;
    }

}


/* 스타일2 */
.NoticeFrame.sty2 {
    justify-content: space-evenly;
}
.NoticeFrame.sty2 .noticebox {
    font-family: 'Noto Sans KR', 'Malgun Gothic', dotum, Sans-serif, AppleGothic;
}
.NoticeFrame.sty2 .noticebox:not(:has(+ .noticebox)) {
    width:calc(100% - 50rem);
}
.NoticeFrame.sty2 .noticebox h2 ,
.NoticeFrame.sty2 .campainbox h2 {
    position: relative;
    height:5rem;
    padding-bottom:1rem;
    font-size:3rem;
    font-weight: 700;
}
.NoticeFrame.sty2 .mainrow_notice:not(:has(> a)) {
    display:none;
}  
.NoticeFrame.sty2 .noticebox h2 > a {
    position: absolute;
    top: .5rem;
    right: 0;
    border: 1px solid #aaa;
    font-size: 1.5rem;
    display: block;
    padding: .3rem 1.5rem;
    font-weight: normal;
    border-radius: 5px;
}

.NoticeFrame.sty2 .noticebox dl {
        border: 2px solid var(--base-color);
        border-left-width:0;
        border-right-width:0;
        border-radius: 0;
        padding: 3rem;        
}
.NoticeFrame.sty2 .noticebox dl > dt {
    font-size:1.7rem;
    border: 1px solid var(--base-color);
    padding: 1.5rem;
    width: 10rem;
    background: #fff;
    line-height: 1.2;    
}
.NoticeFrame.sty2 .noticebox dl > dt strong {
    margin:auto;
}
.NoticeFrame.sty2 .noticebox dl > dd {
    width:calc(100% - 10rem);
    padding:0 2rem 0 3rem;
}
.NoticeFrame.sty2 .noticebox dl > dd strong {
    font-size: 2rem;
}
.NoticeFrame.sty2 .noticebox dl > dd p {
    font-size:1.65rem;
    line-height:1.8;
}

.NoticeFrame.sty2 .noticebox a + ul {
    padding:3rem 1rem;
}

.NoticeFrame.sty2 .campainbox {
    width: auto;
    height: auto;
    overflow: hidden;
    padding: 0;    
}
.NoticeFrame.sty2 .mainrow_notice:not(:has(> a)) ~ .campainbox:has(> div:empty) {
    display:none;
}  

.NoticeFrame.sty2 .campainbox > div {
	/*
    width: 40rem;
    height:40rem;
	aspect-ratio: 1 / 1;
	*/

    width: 57.5rem;
    height:40.3rem;
	
	
    background: #fff;
        margin:auto;
}
.NoticeFrame.sty2 .campainbox > div:empty {
    border:1px solid #bbb;
}


@media (max-width: 1024px) {
    .NoticeFrame.sty2 {
        padding: 0;
    }
    .NoticeFrame.sty2 .noticebox:not(:has(+ .noticebox)) {
        width:calc(100% - 45rem);
        padding-right:2rem;
    }
    .NoticeFrame.sty2 .noticebox dl {
            flex-direction: column;
    }
    .NoticeFrame.sty2 .noticebox dl > dt {
        margin: auto;
        margin-bottom: 2rem;
    }
    .NoticeFrame.sty2 .noticebox dl > dd {
        width: 100%;
        padding: 0 1rem;
    }    
}

@media (max-width: 767px) {

    .NoticeFrame.sty2 .noticebox:not(:has(+ .noticebox)) {
        width:100%;
        padding: 1rem;
    }
    .NoticeFrame.sty2 .noticebox h2 + ul {
        padding-bottom: 2rem;
        border-bottom: 1px solid #aaa;
    }

    .NoticeFrame.sty2 .campainbox h2 {
        text-align:center;
        }
    .NoticeFrame.sty2 .campainbox > div {
        width: 100%;
        max-width: 40rem;
        height:auto;
        aspect-ratio: 1 / 1;
        background: #fff;
    }
}











/* 자료&서적 */
.ContFrame {
	width:100%;
	padding: 10rem;
}
.ContFrame.bg-paper {
	background-image:url(/imgs/bg.jpg);
}

.ContFrame .title {
	font-size: 4.2rem;
	font-weight: 700;
	font-family: var(--base-font-serif);
	color: var(--base-color-04);
}

.ContFrame .content_edge {
	width:100%;
	margin-top:3rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;

}





.ContFrame .content_edge > A {
	width: 35rem;
	height: 25rem;
	padding:1rem;
}

.ContFrame .content_edge > A .tit {
	font-size: 2.2rem;
	font-weight:600;
	margin-top:1rem;

}
.ContFrame .content_edge > A .tit + .txt {
	margin-top:1rem;
}
.ContFrame .content_edge > A .icon {
	margin-top:3rem;

	display: flex;
	align-items: center;
}

.ContFrame .content_edge > A .icon::after {
	font-family: xeicon !important;
	display: inline-block;
	speak: none;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e907";

	font-size: 2.1rem;
	color: var(--base-color-02);

	margin-left: 0.5rem;
}
.ContFrame .content_edge > .content_list {
	position: relative;

	flex:1;
	overflow: hidden;
	padding: 5rem;
	background: #fff;
	border-radius: 2rem;
	border: 1px solid rgba(0, 0, 0, .15);
}
#ContentBooks .swiper-button-prev ,
#ContentBooks .swiper-button-next {
	width: 5rem;
	height: 5rem;
	border-radius: 5rem;
	background: var(--base-color-04);
}



@media (max-width: 1280px) {
	.ContFrame {
		padding: 10rem 5rem;
	}
	.ContFrame .content_edge {
		margin:0;
		flex-direction: column;
	}
	.ContFrame .content_edge > A {
		position: relative;
		width: 100%;
		height:auto;
		display: flex;
		justify-content: flex-start;
	}
	.ContFrame .content_edge > A .title {
		margin-right: 3rem;
	}
	.ContFrame .content_edge > A .link {
		display: flex;
		flex-direction: column;
	}
	.ContFrame .content_edge > A .tit + .txt ,
	.ContFrame .content_edge > A .link > P {
		padding:0;
		margin:0;
	}
	.ContFrame .content_edge > A .link > P BR {
		display:none;
	}

	.ContFrame .content_edge > A .icon {
	    position: absolute;
	    right: 0;
	    bottom: 2rem;
	}
	.ContFrame .content_edge > .content_list {
		padding: 4rem;
	}

}


@media (max-width: 1024px) {

    .ContFrame {
        padding: 8rem 5rem;
    }
	.ContFrame .title {
		font-size: 3.8rem;
	}

	.ContFrame .content_edge > A {
		flex-wrap: wrap;
	}
	.ContFrame .content_edge > A .title {
		width: 100%;
	}
	.ContFrame .content_edge > A .link {
		width: 100%;
	}

	#ContentBooks.DZSMART_CoverSlide {
		height:auto;
	}

	.ContFrame .content_edge > .content_list {
		padding: 3rem;
	}

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

    .ContFrame {
        padding: 5rem 2.5rem;
    }
	.ContFrame .title {
		font-size: 3.2rem;
	}

	.ContFrame .content_edge > .content_list {
		padding: 2rem;
	}

}


.cardbox {
	width:30rem;
	display: flex;
	flex-direction: column;
}
.cardbox .pic {
	width:100%;
	height:30rem;
	border-radius: 2rem;
	overflow:hidden;
}
.cardbox .pic IMG {
	width:100%;
	height:100%;
	object-fit:cover;
}
.cardbox .tit {
	font-size: 2.2rem;
	font-weight:600;
	margin-top:2rem;
	text-align: left;
}

.cardbox .tit + .cont {
	margin-top:1rem;
	white-space: normal;
	text-align: left;
}
.cardbox .more {
	margin-top:3rem;

	display: flex;
	align-items: center;
}

.cardbox .more::after {
	font-family: xeicon !important;
	display: inline-block;
	speak: none;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e907";

	font-size: 2.1rem;
	color: var(--base-color-02);

	margin-left: 0.5rem;
}







/* 공연목록 */
#ContentGallery {
	position: relative;	
}
#ContentGallery::before,
#ContentGallery::after {
    content: '';
    position: absolute;
    top: 0;
    width: 7.5rem;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
#ContentGallery::before {
    left: 0;
    background: linear-gradient(to left, transparent, #ffffff);
}
#ContentGallery::after {
    right: 0;
    background: linear-gradient(to right, transparent, #ffffff);
}


.ContFrame:has(#ContentGallery):not(.article_gallery > li) {
	display:none;
}
.ContFrame .article_gallery {
	margin-top:3rem;
}
.article_gallery {
	height:calc(100% - 65rem);
	height:auto;

    display: flex;
    justify-content: space-evenly;
}
.article_gallery::after {
	content:'';
	display:block;
	clear:both;
}
.article_gallery > li {
	position: relative;
	transition: all ease .5s 0s;

	width: calc(100% / 4 );

	margin:1em .75% 2em;
	float:left;

	width:18.75%;
	height:100%;

}
.article_gallery > li:first-child ,
.article_gallery > li:nth-child(5n+1) {
	margin-left:0;
}
.article_gallery > li:nth-child(5n) {
	margin-right:0;
}
.article_gallery > li > a {
	display:block;
	width:100%;
	height:100%;
}
.article_gallery .item_section {
	position: relative;
	float: none;
	width: 100%;
	height:100%;

	border:1px solid #bbb;
	background-color:#fff;
	box-shadow:3px 3px 0 0 rgba(0,0,0,.1);
	border-radius: 1rem;

	padding:1.5rem;
	overflow:hidden;
}
.article_gallery .item_section:hover {
	box-shadow:inset 0 0 0 3px #000;
	border-color:#000;
}

.article_gallery .item_section .item_photo {
	float:none;
	width:100%;
	height:32rem;
	overflow:hidden;

}
.article_gallery .item_section .item_photo > img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition: all ease .5s 0s;
	border-radius: 1rem;

}

.article_gallery > li:hover .item_section .item_photo > img {
	transform: scale(1.1);
}

.article_gallery .item_section .item_article {
	float:none;
	width:100%;
	padding:2rem 1rem 1rem;
}
.article_gallery .item_section .item_article > * {
	display:block;
	overflow:hidden;
	word-wrap: normal;

	white-space:nowrap;
	text-overflow:ellipsis;
}
.article_gallery .item_section .item_article .tit {
	letter-spacing: -1px;
	font-weight:600;
	height:1.600em;
	font-size:1em;
}


.article_gallery .item_section .item_article .sub {
	width:100%;
	font-size:1.5rem;
	color:#a7a6b3;
	padding: 0.5rem 0 0;
	font-weight:400;
	line-height: 1.5;
	text-align: left;
}
.article_gallery .item_section .item_article .sub + .sub {
	padding-top:0;
}
@media screen and (max-width: 1024px) {

	#ContentGallery.DZSMART_CoverSlide {
		height:auto;
	}

	.article_gallery > li {
		margin:1em 2% 2em;
		float:left;
		width:46%;
		background-color:#fff;
		height:100%;
	}
	.article_gallery > li:first-child ,
	.article_gallery > li:nth-child(5n+1) {
		margin-left:2%;
	}
	.article_gallery > li:nth-child(5n) {
		margin-right:2%;
	}


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

	.article_gallery > li {
		width:96%;
		float:none;
	}

}




#ContentGallery .swiper-button-prev ,
#ContentGallery .swiper-button-next {


    width: 6rem;
    height: 6rem;
    border: none;
    border-radius: 50%;
    background: var(--base-color-04);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    backdrop-filter: blur(10px);
    z-index: 10;
}

ContentGallery