/*mainVisual*/
#mainVisual { width: 100%; height: 900px; position: relative; overflow: hidden; }
.visual { height:100%; }
.visual div { position: relative; width: 100%; height: 100%; overflow: hidden; }
.visual img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; /* height:100%; object-fit: cover; */ /* min-height: 100%; */}
#mainVisual .slick-dots { position: absolute; bottom: 70px; width: 100%; text-align: center; }
#mainVisual .slick-dots li { display: inline-block; width: 20px; height: 20px; vertical-align: top; margin:0 4px; position: relative; border-radius:50%; cursor:pointer; }
#mainVisual .slick-dots li button { display: block; border:none; width: 100%; height: 100%; cursor:pointer; border-radius:50%; background: transparent; font-size:0; }	
#mainVisual .slick-dots li:before { content: ""; display: block; width: 12px; height: 12px; border-radius:50%; background: rgba(255,255,255,.5); position: absolute;  top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; }
#mainVisual .slick-dots li.slick-active { background: rgba(255,255,255,.2); }
#mainVisual .slick-dots li.slick-active:before { width: 8px; height: 8px; background: #fff;  }


/*공연안내*/
.infoBox { margin:80px auto !important; overflow: hidden; position: relative; }
.infoBox h3 { color: #323232; font-size:34px; font-weight: 500; line-height:100%; text-align: center;  }
.infoBox h3 span { color: #c4c4c4; font-size:15px; display: block; font-weight: 400;  }
.infoBn { margin-top: 50px; overflow: hidden; }
.infoBn .list { height: 460px; }
.infoBn article { width: 90%; max-width:325px; height: 100%;  overflow: hidden; position: relative; margin: 0 auto; box-sizing:border-box; text-align: center; /* border:1px solid #c5c5c5;  */color: #fff; }
.infoBn article > img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; height: 100%; z-index:-2; }
.infoBn a { display: table; width: 100%; height: 100%; position: relative; color: #fff; }
.infoBn a:before { content: ""; display: block; width: 100%; height:100%; background:rgba(0,0,0,.6); position: absolute; top: 0; left: 0; z-index:-1;  }
.infoBn a:after { content: ""; display: block; width:calc(100% - 30px); height:calc(100% - 30px); box-sizing:border-box; border:1px solid #c2c2c2; position: absolute; top: 15px; left: 15px; z-index:-1; }
.infoBn a div { display: table-cell; vertical-align: middle; }
.infoBn dt { font-size:21px; line-height: 120%; width: 80%; margin: 0 auto; }
.infoBn dt:after { content: ""; display: block; width: 23px; height: 1px; background: #fff; margin:45px auto 0; }
.infoBn dd.txt { margin-top: 20px; line-height: 180%; font-size:16px;  }
.infoBn dd.btn { margin:60px auto 0; overflow: hidden; width: 105px; }
.infoBn dd.btn i { display: block; width: 100%; height: 37px; line-height: 35px; background: #707070; border-radius:18px; font-style:normal; font-size:26px;	font-weight: 300; }
.infoBn a:before,
.infoBn a:after,
.infoBn a div { opacity:0; transition:all .3s; -webkit-transition:all .3s; transform:rotateY(145deg) scale(.5); -webkit-transform:rotateY(145deg) scale(.5);  }
.infoBn a:hover:before,
.infoBn a:hover:after,
.infoBn a:hover div { opacity:1; transform:rotateY(0) scale(1); -webkit-transform:rotateY(0) scale(1); }
.infoBox .slick-arrow { position: absolute; z-index:50; top: 180px; width: 50px; height: 100px; border:none; font-size:0; cursor:pointer;  }
.infoBox .slick-prev { left: 0; background:#ddd url(/img/main/btn_prev_info.png) no-repeat center; }
.infoBox .slick-next { right: 0; background:#575757 url(/img/main/btn_next_info.png) no-repeat center;  }



/*동영상배너*/
.mvBox {  width: 100%; height:700px; overflow: hidden; background: url(/img/main/bg_mv.jpg) no-repeat center; background-size:cover; }
.mvBox .inner { padding:100px 15px; }
.mvBox .movie { float: left; width: 50%; height: 490px; overflow: hidden;  position: relative; }
.mvBox .movie div { height: 100%; }
.mvBox .movie iframe { width: 100%; height: 100%; /* pointer-events: none; */ }
.mvBox .txt { float: right; width:48%; box-sizing:border-box; padding-left:40px; }
.mvBox .txt dl { margin-top: 25px; }
.mvBox .txt dl:before { content: ""; display: block; width: 45px; height: 1px; background: #3c3c3c; }
.mvBox .txt dt { padding-top: 35px; color: #323232; font-size:34px; line-height: 120%; font-weight: 500; }
.mvBox .txt dt span { color: #747474; }
.mvBox .txt dd { font-size:17px; color: #8a8a8a; line-height: 120%; margin-top: 20px; }
.mvList { margin-top: 35px; overflow: hidden; }
.mvList div a { display: block; width: 95%	; background:#000; height: 140px; position: relative; overflow: hidden; }
.mvList div a i { display: none; }
.mvList div.slick-current a:before { content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.5); box-sizing:border-box; border:10px solid rgba(255,255,255,.5); position: absolute; top: 0; left: 0; z-index:5; }
.mvList div.slick-current i { display: block; position: absolute; top: 50%; left: 50%; margin:-18px 0 0 -18px; width: 36px; height: 36px; font-size:0; z-index:20; animation:rotate .5s; -webkit-animation:rotate .5s; }
.mvList div.slick-current i:before { content: ""; display: block; width: 100%; height: 1px; background: #fff; position: absolute;	top: 18px; left: 0; }
.mvList div.slick-current i:after { content: ""; display: block; width: 1px; height: 100%; background: #fff; position: absolute; top: 0; left: 18px; }
.mvList div a img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; min-width:100%; max-height:100%; }
.mvBox .btn { margin-top: 55px; height: ; overflow: hidden; }
.mvBox .btn p { float: left; margin-right: 7px; }
.mvBox .btn a { display: block; width: 100%; height: 70px; text-align: center;}
.mvBox .btn .bn { width: 70px; box-sizing:border-box; background: #fff; border:1px solid #9c9c9c; position: relative; }
.mvBox .btn .bn img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; }
.mvBox .btn .all { width: 180px; }
.mvBox .btn .all a { line-height: 70px; background: #181818; color: #fff; font-size:14px; }


@keyframes rotate { 
	0% { transform:rotate(-145deg); }
	100% { transform:rotate(0deg); }
}
@-webkit-keyframes rotate { 
	0% { -webkit-transform:rotate(-145deg); }
	100% { -webkit-transform:rotate(0deg); }
}

/*게시판*/
.boardBox { margin:60px auto !important;  }
.boardBox > article { float: left; width: 48%; height: 355px; box-sizing:border-box; border:5px solid #f5f5f5; padding:45px 50px; }
.boardBox > article:first-child { margin-right: 4%; }
.boardBox h4 { float: left; color: #323232; font-size:24px; font-weight: 500; line-height: 100%; padding-bottom: 20px; vertical-align: bottom; }
.boardBox h4 span { color: #c4c4c4; font-size:15px; margin-left:15px; font-weight: 400;	 }
.boardBox h4+a { float: right; display: block; font-size:24px; font-weight: 500; line-height: 100%; color: #323232; }
.boardBox > article > ul { clear:both; border-top:1px solid #323232; }
.boardBox > article li { overflow: hidden; border-bottom:1px solid #c1c1c1; }	
.boardBox > article li a { height: 65px; line-height: 65px; }
.boardBox > article li p { float: left; width:calc(100% - 100px); color:#323232; font-size:17px; font-weight: 300; overflow: hidden; text-overflow:ellipsis; white-space:nowrap;	}
.boardBox > article li span { float: right; font-size:14px; color: #586074; font-weight: 300; padding-right: 15px; }
.boardBox aside { clear:both; padding-top: 60px; overflow: hidden; letter-spacing:-.5px; }
.boardBox aside ul { float: left; width:calc(100% - 500px); height:115px; }
.boardBox aside li { float: left; width: 33.3%; height: 100%; box-sizing:border-box; border-left:1px dashed #d4d4d4; }
.boardBox aside li:first-child { border-left:none; }
.boardBox aside li a { display: table; width: 70%; height: 74px; margin: 20px auto 0; position: relative; }
.boardBox aside li p { display: table-cell; vertical-align: middle; font-size:24px; color: #323232; font-weight: 500;  }
.boardBox aside li img { position: absolute; top: 0; right: 0; }
.boardBox .bn { float: right; width: 480px; }
.boardBox .bn a { display: table; width: 100%; height: 115px; background: #666cae url(/img/main/bg_bn.gif) no-repeat 80%; }
.boardBox .bn a span { color: #fff; display: table-cell; vertical-align: middle; font-size:24px; font-weight: 500; line-height: 100%; text-indent:45px; }


/*갤러리*/
.galleryBox { width: 100%; overflow: hidden; height: 360px;  }
.gallery div > a { display: block; width: 100%; height: 360px; position: relative; overflow: hidden; }
.gallery div > a:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:rgba(0,0,0,.3); z-index:-1;  }
.gallery div > a:hover:before { top: 20px; left: 20px; width:calc(100% - 40px); height:calc(100% - 40px);  }
.gallery div > a > img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; height: 100%; z-index:-2; }
.gallery div > a div { display:table; width: 100%; height: 100%; text-align: center; }
.gallery dl { display: table-cell; vertical-align: middle; opacity:0; transition:all .3s; -webkit-transition:all .3s; padding:0 25px;	}
.gallery div > a:hover dl { opacity:1; }
.gallery dt { font-size:17px; line-height: 120%; color: #fff; }
.gallery dd { font-size:0; position: relative; width: 35px; height: 35px; margin: 40px auto 0; }
.gallery dd:before { content:""; display: block; width: 100%; height: 1px; background: #fff; position: absolute; top: 17px; left: 0; }
.gallery dd:after { content:""; display: block; width: 1px; height: 100%; background: #fff; position: absolute; top: 0; left: 17px; }



@media screen and (max-width:1500px) {
	/*mainVisual*/
	#mainVisual { height: 56vw; }
	.visual img { min-height: auto; min-width:auto; width: 125%; }
	#mainVisual .slick-dots { bottom: 20px; }


}

@media screen and (max-width:1200px) {


	/*동영상배너*/
	.mvBox {  height:auto; padding:50px 0; }
	.mvBox .inner { padding:0 15px; }
	.mvBox .movie { float: none; width: 100%;  }
	.mvBox .txt { float: none; width:100%; margin-top: 20px; padding-left:0; }
	.mvList div a { height: 25vw; max-height:140px; }
	.mvList div a img { min-width:auto; max-width:100%; max-height:auto; }

	/*게시판*/
	.boardBox > article { height:auto; padding:40px 25px; }
	.boardBox h4 { padding-bottom: 10px;  }
	.boardBox > article li a { height: 55px; line-height: 55px; }
	.boardBox > article li p { font-size:16px; }
	.boardBox aside ul { float: none; width:100%; }
	.boardBox aside li a { width: 90%; }
	.boardBox aside li img { height:60px; right: 10px; }
	.boardBox .bn { float: none; width: 100%; margin-top: 20px;}
	.boardBox .bn a { background-position:95%; }


	
	/*갤러리*/
	.galleryBox { height: 250px;  }
	.gallery div > a { height: 250px; }
	/* .gallery div > a > img { height:auto; min-height:100%; min-width:100%; } */




}
@media screen and (max-width:650px) {


	/*공연안내*/
	.infoBox { margin:40px auto !important; }
	.infoBox h3 { font-size:30px; }
	.infoBn { margin-top: 20px; overflow: hidden; }
	.infoBn .list { height: 320px; }
	.infoBn a:after { width:calc(100% - 20px); height:calc(100% - 20px); top: 10px; left: 10px; }
	.infoBn dt { font-size:20px; }
	.infoBn dt:after { margin-top: 25px; }
	.infoBn dd.txt { font-size:15px;  }
	.infoBn dd.btn {  margin-top: 25px; }
	.infoBox .slick-arrow { top: 50%; margin-top: -30px; width: 35px; height: 60px; background-size:auto 20px !important; }



	/*동영상배너*/
	.mvBox .movie { height:60vw;  }
	.mvBox .txt dt { padding-top: 15px; font-size:30px; }
	.mvBox .txt dd { font-size:16px; margin-top: 15px; }
	.mvList { margin-top: 20px; }
	.mvBox .btn { margin-top: 30px; }
	.mvBox .btn p { margin-right: 5px; }
	.mvBox .btn a { height: 45px; }
	.mvBox .btn .bn { width: 45px; }
	.mvBox .btn .bn img { height: 20px; }
	.mvBox .btn .all { width: calc(100% - 100px); max-width:200px; margin-right: 0;}
	.mvBox .btn .all a { height: 47px; line-height: 47px; }





	/*게시판*/
	.boardBox { margin:25px auto !important;  }
	.boardBox > article { float: none; width: 100%; padding:25px 15px; margin-top: 20px; }
	.boardBox > article:first-child { margin:0; }
	.boardBox h4 span { font-size:15px; margin-left:10px; }
	.boardBox > article li a { height: 45px; line-height: 45px; }
	.boardBox > article li p { font-size:15px; width:calc(100% - 85px); }
	.boardBox > article li span { padding-right: 0; }
	.boardBox aside { padding-top: 20px; }
	.boardBox aside ul { height:auto; text-align: center; overflow: hidden;}
	.boardBox aside li { overflow: hidden; }
	.boardBox aside li a { display: block; width: 95%; height: auto; margin: 10px auto; }
	.boardBox aside li img { position: static;	 height:40px;  }
	.boardBox aside li p { display: block; font-size:18px; margin-top: 5px; }
	.boardBox .bn { float: none; width: 100%; margin-top: 20px;}
	.boardBox .bn a { background-size:auto 80%; background-position:95% bottom; }
	.boardBox .bn a span { font-size:20px; text-indent:25px;  }


	/*갤러리*/
	.gallery dt { font-size:16px; }
	.gallery div > a > img { height:auto; min-height:100%; max-width:120%; } 


}