@charset "utf-8";

/* PC 메인 비주얼 Swiper fade — vs_txt는 오른쪽 유지, 줄이면 함께 축소 */
#visual {
	height: auto;
}
#visual .visual_wrap {
	position: relative;
	width: 100%;
	line-height: 0;
}
#visual .visual-sizer {
	width: 100%;
	height: auto;
	display: block;
	visibility: hidden;
	pointer-events: none;
}
#visual .visual_box.swiper {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#visual .visual_box .swiper-wrapper {
	position: relative !important;
	width: 100%;
	height: 100%;
	margin: 0;
}
#visual .visual_box .swiper-slide,
#visual .visual_box .visual_p {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}
#visual .visual_box .swiper-slide {
	opacity: 0 !important;
	transition: opacity .8s ease;
	z-index: 1;
}
#visual .visual_box .swiper-slide-active {
	opacity: 1 !important;
	z-index: 2;
}
#visual .visual_box .visual_p img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
#visual .vs_txt {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 50;
	height: 100%;
	margin-left: 0;
	line-height: 0;
}
#visual .vs_txt .m-txt {
	height: 100%;
	margin: 0;
}
#visual .vs_txt .m-txt img {
	height: 100%;
	width: auto;
	max-width: none;
	display: block;
}

.m-mb-slide { display: none; }
.pc-only { display: block; }

body.m-scrollno {
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

/* 태블릿: PC 레이아웃을 유동적으로 */
@media all and (max-width: 1280px) {
	#header .headerWrap .gnb {
		right: 220px;
	}
	#header .headerWrap .gnb li.listWrap {
		margin-left: 8px;
	}
	#header .headerWrap .gnb li.listWrap a.title {
		font-size: 1.35rem;
		padding: 15px 10px;
	}
	#maincon2 .programWrap_title,
	.bannerWrap,
	.subContents,
	.moviearea {
		width: 90% !important;
		max-width: 1200px;
	}
	.subContents .rightCon,
	.subContents .rightCon .conTop,
	.subContents .rightCon .subCon {
		width: 100% !important;
		max-width: 100%;
	}
	.noticeWrap_left .notice iframe {
		width: 100% !important;
		max-width: 700px;
		height: auto;
		min-height: 280px;
	}
}

@media all and (max-width: 1400px) {
#maincon1 ul li {    height: 180px;}
.banner_title01 {font-size: 27px;}
#maincon1 ul li a img {width: 60px; margin-right: 15px;}

.programList .programWrap ul {width: calc(100%/3 - 10px); margin-right:15px; }
.programList .programWrap ul:nth-child(3n){margin-right:0}
.programList .programWrap ul:nth-child(n+4){margin-top:15px;}
}



@media all and (max-width: 1100px) {
	#header .headerWrap h1 img {
		max-height: 88px;
		width: auto;
	}
	#header .headerWrap .sns {
		display: none;
	}
	#header .headerWrap .gnb {
		right: 10px;
	}
	#maincon1 {
		position: relative;
		top: auto;
		height: auto;
	}
	#maincon1 ul li {
		width: 50%;
		height: 130px;
	}
	#maincon1 ul li a img{width:50px; margin-right: 10px;}
.banner_title01 {	font-size: 22px;}
 #maincon1 ul li a{   padding-right: 5px;}

	#maincon2 {
		height: auto;
		padding-top: 80px;
		padding-bottom: 40px;
	}
	.moviearealeft,
	.moviearearight,
	.noticeWrap_left,
	.noticeWrap_right {
		width: 100% !important;
		float: none !important;
		margin-left: 0;
	}
	.moviearealeft iframe {
		width: 48% !important;
		max-width: 100%;
		height: 200px;
	}
	.noticeWrap_left .notice {
		width: 100%;
		float: none;
		height: auto;
		padding: 20px;
	}
	.bannerWrap ul li {
		margin-bottom: 10px;
	}
	
.programList .programWrap ul {width: calc(100%/3 - 6px); margin-right:8px; }
.programList .programWrap ul:nth-child(3n){margin-right:0}
.programList .programWrap ul:nth-child(n+4){margin-top:8px;}
}

/* 모바일: 기존 /m 페이지와 동일 */
@media all and (max-width: 860px) {
	html, body {
		overflow-x: hidden;
		max-width: 100%;
	}
	
	.pc-only .visual_wrap{display:none}
	.m-mb-slide {display: block;}
	
	@media (max-width:860px){
		.programList .programWrap ul {width: calc(100%/2 - 7px); margin-right:14px; }
		.programList .programWrap ul:nth-child(3n){margin-right:14px}
		.programList .programWrap ul:nth-child(2n){margin-right:0}
		.programList .programWrap ul:nth-child(n+3){margin-top:14px;}
		.photo {height: auto;}

	#maincon2{
		display:block !important;
		height:auto !important;
		padding:40px 0 50px !important;
		margin:0;
		background-size:cover;
		background-position:center top;
	}
#maincon2 .programWrap_title{display: flex; flex-flow: column-reverse;}
	#maincon2 .programWrap_title ul li:first-child{width:100% !important;}
	#maincon2 .program_title{
		font-size:24px;	text-align:left;	}
	.morebtn {
    position: initial;
    transform: initial;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

	#maincon2 .morebtn .myButton5{
            font-size: 14px;
            padding: 6px 10px 6px 25px;
            box-sizing: border-box;
            width: 110px;
    background: url('/images/new/more5.png') no-repeat left 8px top 7px; margin-left:0;
	}

	#maincon2 .program-swiper .swiper-slide > ul{
		min-height:0;
	}
	#maincon2 .program-swiper .swiper-slide > ul li.photo,
	#maincon2 .program-swiper .swiper-slide > ul li.photo img,
	#maincon2 .program-swiper .swiper-slide > ul li.photo a img{
		height:220px !important;
	}
	#maincon2 .program-swiper-prev,
	#maincon2 .program-swiper-next{
		top:-200px;
		width:34px;
		height:34px;
	}
	#maincon2 .program-swiper-prev{left:-4px;}
	#maincon2 .program-swiper-next{right:-4px;}
}


#maincon4 ul li{width:100%;  padding:25px 10px;}
#maincon4 ul li a{display:flex; flex-wrap:wrap; align-items:Center; justify-content: center;text-align:left; font-size:20px; line-height:1.4;}
#maincon4 ul li a img{margin:0; width:60px; margin-right:10px;}
.banner_fonts, .banner_fonts2 {font-size:20px; line-height:1.4;}

.main-notice ul li {font-size:14px; padding: 13px 5px;}
.main-notice {margin: 50px auto;}
.noticeWrap {margin-top: 0px;}


	/* 메인 - /m layout.css 와 동일 */
	.m-main {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
		background: #fff;
	}
	.m-mb-slide {
		position: relative;
		overflow: hidden;
	}
	.m-mb-slide .swiper-slide {
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.m-mb-slide .swiper-slide img {
		display: block;
		max-width: 100%;
		width: 100%;
		height: auto;
	}
	.m-mb-slide .slid-arrow {
		width: 80px;
		height: 40px;
		position: absolute;
		bottom: 20px;
		right: 5%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		z-index: 5;
	}
	.m-mb-slide .swiper-button-next:after,
	.m-mb-slide .swiper-button-prev:after {
		font-size: 17px !important;
		font-weight: 400 !important;
		color: #fff !important;
	}
	.m-mb-slide .swiper-button-next,
	.m-mb-slide .swiper-button-prev {
		position: static !important;
		box-sizing: border-box;
		top: 0 !important;
		width: 40px !important;
		height: 40px !important;
		background: rgba(0,0,0,.7) !important;
		margin-top: 0 !important;
	}
	.m-mb-slide .swiper-button-prev {
		border-right: 1px solid rgba(255,255,255,.4);
	}

	.m-mb-banner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.m-mb-banner > div { width: 50%; }
	.m-mb-banner > div a {
		display: inline-block;
		width: 100%;
		height: 100%;
		position: relative;
		text-decoration: none;
	}
	.m-bn-left a { padding-bottom: 30px; box-sizing: border-box; }
	.m-bn-left img { max-width: 100%; width: 100%; display: block; }
	.m-bn-left p {
		display: inline-block;
		background: #540002;
		width: 100%;
		line-height: 40px;
		position: absolute;
		left: 0;
		bottom: 0;
		text-align: center;
		color: #fff;
		font-size: 14px;
		font-weight: 500;
		margin: 0;
	}
	.m-bn-right {
		display: flex;
		flex-flow: column;
	}
	.m-bn-right dl {
		width: 100%;
		height: 50%;
		margin: 0;
		border-bottom: 1px solid #ddd;
		box-sizing: border-box;
	}
	.m-bn-right dl a {
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		min-height: 140px;
		text-decoration: none;
	}
	.m-bn-right dl a img { width: 90px; }
	.m-bn-right dl a span {
		font-weight: 500;
		margin-top: 5px;
		text-align: center;
		font-family: 'Paperlogy-8ExtraBold';
		font-size: 1.4rem;
		color: #000;
	}

	.m-mb-btn ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: 1px solid #ddd;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.m-mb-btn li {
		width: 33.333%;
		box-sizing: border-box;
		border-right: 1px solid #ddd;
		list-style: none;
	}
	.m-mb-btn li:last-child { border-right: none; }
	.m-mb-btn li a {
		display: flex;
		flex-flow: column;
		align-items: center;
		width: 100%;
		padding: 20px 10px;
		box-sizing: border-box;
		text-decoration: none;
		color: #000;
	}
	.m-mb-btn li a img { width: 90px; }
	.m-mb-btn li a p {
		font-family: 'Paperlogy-8ExtraBold';
		font-size: 1.4rem;
		font-weight: 500;
		margin-top: 5px;
	}

	.m-notice {
		padding: 50px 0;
		box-sizing: border-box;
		width: 92%;
		max-width: 500px;
		margin: 0 auto;
		background: url('/images/new/bg_01_2024.jpg?ver=1') center no-repeat;
		background-size: cover;
	}
	.m-notice .m-mb-tit {
		font-size: 22px;
		font-weight: 600;
		line-height: 1;
		margin: 0 0 12px;
		text-align: center;
		font-family: 'Paperlogy-8ExtraBold';
		color: #ff9900;
	}
	.m-notice-list {
		border-top: 1px solid #000;
		border-bottom: 2px solid #ddd;
		padding: 12px 0;
		margin: 0;
		list-style: none;
	}
	.m-notice-list li {
		width: 100%;
		box-sizing: border-box;
		padding: 8px 0;
		font-size: 14px !important;
		font-weight: 300;
		line-height: 1.3 !important;
		height: auto !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
	}
	.m-notice-list li span { display: none; }

	.m-footer {
		display: block !important;
		padding: 30px 5%;
		box-sizing: border-box;
		background: #0f3044;
		width: 100%;
		text-align: center;
	}
	.m-footer p {
		color: #fff;
		text-align: center;
		line-height: 1.6;
		font-size: 13px;
		font-weight: 300;
		margin: 0;
	}

	/* 서브페이지 */
	#page1, #page2, #page3, #page4, #page5, #page6 {
		height: auto !important;
	}
	[class^="sub_visual"] {
		top: 0 !important;
		height: 170px !important;
		background-size: cover !important;
		background-position: center !important;
	}
	.v_text { display: none !important; }
	.s_menu, .s_menu2, .s_menu3, .s_menu4, .s_menu5, .s_menu6, .s_menu7, .s_menu8 {
		position: relative !important;
		top: 0 !important;
	}
	.s_menu ul, .s_menu2 ul, .s_menu3 ul, .s_menu4 ul, .s_menu5 ul, .s_menu6 ul, .s_menu7 ul {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.s_menu li, .s_menu2 li, .s_menu3 li, .s_menu4 li, .s_menu5 li, .s_menu6 li, .s_menu7 li {
		float: none !important;
		width: 50% !important;
		box-sizing: border-box;
	}
	.s_menu li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.3)}
	.s_menu li a, .s_menu2 li a, .s_menu3 li a, .s_menu4 li a, .s_menu5 li a, .s_menu6 li a, .s_menu7 li a {
		display: block !important;
		padding: 12px 8px !important;
		font-size: 14px !important;
		text-align: center;
		box-sizing: border-box;
		white-space: nowrap;
	}
	.subContents {
		width: 90% !important;
		max-width: 1400px;
		margin: 0 auto !important;
		padding: 0 0 30px !important;
		overflow: visible !important;
		display: block !important;
	}
	.subContents .leftMenu { display: none !important; }
	.subContents .rightCon {
		float: none !important;
		width: 100% !important;
		box-sizing: border-box;
		display: block !important;
	}
	.subContents .rightCon .conTop {
		width: 100% !important;
		height: auto !important;
		margin-left: 0 !important;
		border-bottom: 1px solid #d2d2d2;
		padding: 20px 0 10px;
	}
	.subContents .rightCon .conTop p { display: none !important; }
	.subContents .rightCon .conTop h2 {
		font-size: 24px !important;
		padding-top: 10px !important;
		height: auto !important;
		display: block;
		text-align: center;
		width: 100%;
	}
	.subContents .rightCon .subCon {
		width: 100% !important;
		min-height: 0 !important;
		padding: 16px 0 !important;
		white-space: normal !important;
		font-size: 14px;
		line-height: 1.6;
	}
	.subContents img,
	.rightCon img,
	.about img {
		max-width: 100% !important;
		height: auto !important;
	}
	.about ul,
	.about ul li,
	.aboutare {
		display: block !important;
		float: none !important;
		width: 100% !important;
		box-sizing: border-box;
	}
	.visual,
	.s_visual { display: none !important; }

	table {
		max-width: 100%;
	}
	.subContents table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#wrap {
		overflow: hidden;
		width: 100%;
	}
}



@media (max-width:500px){
	.programList .programWrap ul {width: calc(100%/2 - 3px); margin-right:5px; }
	.programList .programWrap ul:nth-child(3n){margin-right:5px}
	.programList .programWrap ul:nth-child(2n){margin-right:0}
	.programList .programWrap ul:nth-child(n+3){margin-top:5px;}
	.photo {height: auto;}
}



@media all and (max-width: 340px) {

.programList .programWrap ul {width: 100%; margin-right:0; }
	.programList .programWrap ul:nth-child(3n){margin-right:0}
	.programList .programWrap ul:nth-child(2n){margin-right:0}
	.programList .programWrap ul:nth-child(n+2){margin-top:10px;}
	
	
	.m-mb-slide .slid-arrow {
		width: 70px;
		height: 35px;
		bottom: 15px;
	}
	.m-mb-slide .swiper-button-next,
	.m-mb-slide .swiper-button-prev {
		width: 35px !important;
		height: 35px !important;
	}
	.m-mb-banner > div { width: 100%; }
	.m-bn-right { flex-flow: row; }
	.m-bn-right dl {
		width: 50%;
		height: auto !important;
	}
	.m-mb-btn li a img { width: 85px; }
	.m-mb-btn li a p { font-size: 13px; }
	.m-notice { padding: 35px 0; }
	.m-footer p { font-size: 12px; }
}