@charset "utf-8";

/* 내용관리 */
#ctt {}
.ctt_admin {text-align:right; display:none;}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0;line-height:1.6em}
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}

#hd{position:relative; border-bottom:1px solid #ababab; padding:10px 0;}
#hd_wrapper .btn{margin-top:10px;}
#logo {
    float: left;
    padding: 0;
    margin-top:0;
}
#container_wr{width:80%; margin:50px auto 200px;}
#container_wr:after{content:""; display:block; float:none; clear:both;}
#container{width:calc(100% - 280px); float:left; margin-left:70px;}
#side{float:left; width:210px;}
#side .depth1_btn{color:#000; font-size:32px; font-family:notol;}
#side ul{margin-top:40px; width:100%;}
#side ul li{border-bottom:1px solid #dde1e5;}
#side ul li a{display:block; width:100%; height:55px; line-height:55px; color:#424242; font-size:16px; font-family:notol; position:relative;}
#side ul li a.active{padding-left:20px;}
#side ul li a.active:before{content:""; display:block; width:7px; height:2px; background:#424242; position:absolute; left:0; top:50%; transform:translateY(-50%);}

#container_title{margin:0; border-bottom:5px solid #e3e5e4; padding-bottom:15px; font-size:24px; font-family:notol; margin-bottom:60px;}

.memberlist{}
.memberlist ul{}
.memberlist ul:after{content:""; display:block; float:none; clear:both;}
.memberlist ul li{width:23%; float:left; box-sizing:border-box; border:1px solid #dedede; margin:1%;}
.memberlist ul li a{display:block; width:100%; height:100%; overflow:hidden; padding:25px; position:relative;}
.memberlist ul li a .img{width:100%; max-height:350px; height:auto; overflow:hidden; position:relative;}
.memberlist ul li a .img img{max-width:100%;}
.memberlist ul li a dl{margin:25px 0 0 0px; color:#323232;  }
.memberlist ul li a dl dt{font-size:18px; font-family:notol;}
.memberlist ul li a dl dd{font-size:21px; font-family:notor; margin-top:10px;}
.memberlist ul li a dl span{color:#9b92d9; font-size:15px; margin-top:5px; display:block;}
.memberlist ul li a p{width: 43px;  height: 43px;  box-sizing: border-box;  border: 5px solid #eaeaea; font-size: 0;  position: relative;
	position:absolute;
	bottom:25px;
	right:25px;
}
.memberlist li p:before {content: "";  display: block;  width: 15px;  height: 1px;  background: #4a4a4a;  margin: 14px auto 0;}
.memberlist li p:after {content: ""; display: block; width: 9px; height: 9px; border-top: 1px solid #4a4a4a; border-right: 1px solid #4a4a4a;  transform: rotate(45deg);
	-webkit-transform: rotate(45deg);  position: absolute;  top: 10px;  right: 10px;}

.ctt_sub2 .memberlist ul li a .img{width:100%; max-height:initial; height:auto; overflow:hidden; position:relative;}

.ctt_sub2  .memberlist{}
.ctt_sub2  .memberlist ul{}
.ctt_sub2  .memberlist ul:after{content:""; display:block; float:none; clear:both;}
.ctt_sub2  .memberlist ul li{width:48%; float:left; box-sizing:border-box; border:1px solid #dedede; margin:1%;}
.ctt_sub2  .memberlist ul li a{display:block; width:100%; height:100%; overflow:hidden; padding:23px 35px; position:relative;}
.ctt_sub2  .memberlist ul li a .img{width:100%; overflow:hidden; position:relative; }
.ctt_sub2  .memberlist ul li a .img img{max-width:100%; }
.ctt_sub2  .memberlist ul li a dl{margin:40px 0 0 0px; color:#323232;  width:calc(90% - 220px);}
.ctt_sub2  .memberlist ul li a dl dt{font-size:18px; font-family:notol;}
.ctt_sub2  .memberlist ul li a dl dd{font-size:21px; font-family:notor; margin-top:10px;}
.ctt_sub2  .memberlist ul li a dl span{color:#afafaf; font-size:15px; margin-top:5px; display:block;}
.ctt_sub2  .memberlist ul li a p{width: 43px;  height: 43px;  box-sizing: border-box;  border: 5px solid #eaeaea; font-size: 0;  position: relative;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:20px;
}

.memberlist_detail{padding:0 20px;}
.memberlist_detail .title{position:relative; height:500px;}
.memberlist_detail .title:after{content: ""; display: block; width: 100%; height: 25px; background: #f7f7f7; position: absolute; bottom: 0; left: 0; z-index: -1;}
.memberlist_detail .title .img{float:left; width:450px; height:500px; position:relative; overflow:hidden;}
.memberlist_detail .title .img img{max-width:100%;}
.memberlist_detail .title dl{float:left; margin-left:55px; color:#323232;}
.memberlist_detail .title dl dt{font-size:35px; font-family:notol;}
.memberlist_detail .title dl dd{font-size:32px; margin-top:20px; font-family:notob;}
.memberlist_detail .title dl dd span{color:#9f9f9f; font-size:28px; display:block; margin-top:5px;}
.memberlist_detail .title p{position:absolute; bottom:35px; right:0;}
.memberlist_detail .title p a{display: block; width: 150px; height: 45px; line-height: 45px; background: #4a4a4a; color: #fff; font-size: 15px; position: relative;
	font-family:notol; font-weight:normal; text-align:center; padding-left:30px;}
.memberlist_detail .title p a:before{content: "<"; font-family: "Nanum Gothic"; position: absolute; top: -4px; left: 40px; transition: all .3s; -webkit-transition: all .3s; font-size:20px;}
.memberlist_detail .title p:hover a:before{left:20px;}
.memberlist_detail .text{margin-top:60px; font-size:15px; color:#929499; font-family:notol; word-break:keep-all;}
.memberlist_detail .history {margin-top:60px;}
.memberlist_detail .history .text{margin-top:0;}
.memberlist_detail .history > ul > li ul .day{width:280px;}
.memberlist_detail .history > ul > li ul .text{padding-left:11px; position:relative;}
.memberlist_detail .history > ul > li ul .text:before{content:""; display:block; background:#9b92d9; position:absolute; left:0; top:8px;
	transform: rotate(-40deg); width:2px; height:8px;}

.ctt_sub2_1 .memberlist_detail .title{position:relative; height:410px;}
.ctt_sub2_1 .memberlist_detail .title .img{float:left; width:650px; height:410px; position:relative; overflow:hidden;}

.ctt_sub2_2 .memberlist_detail .title{position:relative; height:410px;}
.ctt_sub2_2 .memberlist_detail .title .img{float:left; width:650px; height:410px; position:relative; overflow:hidden;}

.ctt_sub2_3 .memberlist_detail .title{position:relative; height:410px;}
.ctt_sub2_3 .memberlist_detail .title .img{float:left; width:650px; height:410px; position:relative; overflow:hidden;}

.ctt_sub2_4 .memberlist_detail .title{position:relative; height:410px;}
.ctt_sub2_4 .memberlist_detail .title .img{float:left; width:650px; height:410px; position:relative; overflow:hidden;}

.ctt_sub1_6 .memberlist_detail .title{position:relative; height:700px;}
.ctt_sub1_6 .memberlist_detail .title .img{float:left; width:450px; height:700px; position:relative; overflow:hidden;}

.ctt_sub14 .memberlist ul li{width:450px; height:800px;}
.ctt_sub14 .memberlist ul li a .img img{display:block; margin-left:auto; margin-right:auto;width:100%; height:auto; overflow:hidden; position:relative;}
.ctt_sub14 .memberlist ul li a .img{width:100%; max-height:850px; height:auto; overflow:hidden; position:relative;}

.ctt_sub4 img{width:100%;}



.map_wrap{}
.map{width:100% ! important; height:500px ! important;}
.map_detail {margin-top: 12px; background: #f7f7f7; width: 100%;  padding: 30px;}
.map_detail:after{content:""; display:block; float:none; clear:both;}
.map_detail h3 {float: left; font-size: 30px; font-family:notob; color: #323232; width: 180px;}
.mapTxt {float: left; width: calc(100% - 180px);}
.mapTxt li {border-bottom: 1px solid #e3e3e3; color: #6c6c6c; font-size: 15px; padding:10px 0; position:relative;}
.mapTxt li:last-child {border-bottom:none;}
.mapTxt li:after{content:""; display:block; float:none; clear:both;}
.mapTxt li dl {display: table; float: left;  width: 50%; }
.mapTxt li:first-child dl {width: 100%;}
.mapTxt li dt {color: #323232; display: table-cell; vertical-align: middle;  line-height: 26px;  padding-left: 20px; position: relative; width: 125px;  box-sizing: border-box;}
.mapTxt li dd {display: table-cell; vertical-align: middle; padding-left: 10px; box-sizing: border-box;}
.mapTxt li dt span{display:block; }
.mapTxt li dt:before {content: ""; display: block; width: 3px; height: 14px; background: #000; position: absolute; top: 50%; transform:translateY(-50%); left: 0;}



.history > ul > li:first-child{padding:00px 0;}
.history > ul > li:after{content:""; display:block; float:none; clear:both;}
.history > ul > li .year{float:left; width:170px; margin-right:30px; font-size:25px; border-top:1px solid #e3e5e4; padding:5px 0;}
.history > ul > li ul{float:left; width:calc(100% - 200px); border-top:1px solid #e3e5e4;}
.history > ul > li ul li{padding:10px 0 0;}
.history > ul > li ul li:last-child{padding:10px 0 10px;}
.history > ul > li ul li:after{content:""; display:block; float:none; clear:both;}
.history > ul > li ul .day{font-size:16px; color:#9b92d9; float:left; width:150px;}
.history > ul > li ul .text{float:left; width:calc(100% - 150px); font-size:16px; color:#666;}


.service .txt01 {font-size: 35px; color: #e3e5e4; /*9f9f9f*/ letter-spacing: -0.2px; font-family:notob; line-height:46px;}
.service .txt01 span{color:#9b92d9;}
.service .txt01 span.db{display:block;}
.service .txt02{color:#666; font-size:16px; margin-bottom:50px; }
.service .list_charter{margin-top:80px;}
.service .list_charter:first-child{margin-top:0px;}
.service .list_charter ul li{margin-top:10px; border:1px solid #ddd; padding:8px; color:#666;}
.service .list_charter ul li:first-child{margin-top:0;}
.service .list_charter ul li span{color:#9b92d9;}
.list_charter > div.txt01{margin-bottom:50px;}
.list_charter .txt03{font-size:20px; margin:50px 0 20px 0;}


.org img{
	width:100%;
}


.intro img{
	width:100%;
}
.intro .text .txt01{
	font-size:30px;
	font-weight:bold;
	margin:70px 0;
}
.intro .text .txt01 strong{
	position:relative;
	display:inline-block;
}
.intro .text .txt01 strong:after{
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:222px;
	height:15px;
	background:#9b92d9;
	z-index:-1;
}
.intro .text .txt02{
	font-size:18px;
}
.intro .text .txt02 span{
	display:block;
}
.intro .text .txt03{
	font-size:18px;
	margin-top:70px;
}
.intro .text .txt03 strong{
	font-weight:normal;
	position:relative;
	display:inline-block;
}
.intro .text .txt03 strong:after{
	content:"";
	display:block;
	position:absolute;
	bottom:-1px;
	left:0;
	width:358px;
	height:4px;
	background:#9b92d9;
	z-index:-1;
}


/* 절차 및 규정 - sub8 */

.sub8 > div{
	margin-top:70px;
}
.sub8 > div:first-child{
	margin-top:00px;
}
.sub8 .part img{
	max-width:100%;
	display:block;
	margin-top:30px;
}
.sub8 .txt01 {
	font-size: 35px; 
	color: #e3e5e4; /*9f9f9f*/ 
	letter-spacing: -0.2px; 
	font-family:notob; 
	line-height:46px;
}
.sub8 .txt01 span{
	color:#9b92d9;
}
.sub8 .txt01 span.db{
	display:block;
}
.sub8 .part ul {
	margin-top:30px;
}
.sub8 .part ul li{
	margin-top:10px; 
	border:1px solid #ddd; 
	padding:8px; 
	color:#666;
}
.sub8 .part ul li:first-child{
	margin-top:0;
}


/* 센터운영조례 - sub10 */

.sub10 > div{
	margin-top:70px;
}
.sub10 > div:first-child{
	margin-top:00px;
}
.sub10 .part img{
	max-width:100%;
	display:block;
	margin-top:30px;
}
.sub10 .txt01 {
	font-size: 35px; 
	color: #e3e5e4; /*9f9f9f*/ 
	letter-spacing: -0.2px; 
	font-family:notob; 
	line-height:46px;
}
.sub10 .txt01 span{
	color:#9b92d9;
}
.sub10 .txt01 span.db{
	display:block;
}
.sub10 .part ul {
	margin-top:30px;
}
.sub10 .part ul li{
	margin-top:10px; 
	border:1px solid #ddd; 
	padding:8px; 
	color:#666;
}
.sub10 .part ul li:first-child{
	margin-top:0;
}
.sub10 .part ul li span{
	color:#9b92d9;
}
.sub10 .part ul li ul{
	margin-top:10px;	
}
.sub10 .part ul li ul li{
	margin-top:5px;
	border:none;
	padding:4px;
}


/* 대관물품 - sub9 */
.sub9 table#table_organ2{
	display:none;
}
.sub9 table{
	border-top:3px solid #9b92d9;
	width: 100%;
    border-bottom: 3px solid #ccc;
    border-collapse: collapse;
    border-spacing: 0;
}
.sub9 table tbody tr{
	border:1px solid #ccc;
}
.sub9 table tbody tr td{
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	padding:10px;
	height:120px;
}

.memberlist ul li a .name {
    float: left;
    margin: 20px 0 0 0px;
    color: #323232;
	font-size: 21px;
    font-family: notor;
	word-break:keep-all;
}
.memberlist.ensemble ul li a p{
	right:35px;
	bottom:20px;
	transform:initial;
	top:auto;
}



.imgbox{
	margin:30px 0 0;
}
.imgbox:after{
	content:"";
	display:block;
	float:none;
	clear:both;
}
.imgbox div{
	float:left;
	width:24%;
	margin:0 1% 0 0;
}
.imgbox > div > div {
   position: relative;
   width: 100%;
   padding-top: 62.5%; /* 8:5 Aspect Ratio */
   overflow:hidden;
  }
.imgbox > div > div img{
	 position:  absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width:100%;
}
.imgbox div.etc{
	background:#ededed;
}


.imgbox_jhs{
	margin:30px 0 0;
}
.imgbox_jhs:after{
	content:"";
	display:block;
	float:none;
	clear:both;
}
.imgbox_jhs div{
	float:left;
	width:20%;
	margin:0 1% 0 0;
}
.imgbox_jhs > div > div {
   position: relative;
   width: 100%;
   padding-top: 140%;
   overflow:hidden;
  }
.imgbox_jhs > div > div img{
	 position:  absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width:100%;
}
.imgbox_jhs div.etc{
	background:#ededed;
}

@media screen and (max-width: 600px) {
.imgbox_jhs div{
	float:left;
	width:100%;
	margin:5% 1% 0 0;
}
}
}


/* 2020 11 03 고익 아티스트 이미지 수정 

.memberlist ul li.li1 a .img img{
	margin:10px 0 0 10px;
}
.memberlist ul li.li2 a .img img{
	margin:10px 0px 0 -10px;
}
.memberlist ul li.li3 a .img img{
	margin:10px 0px 0 0px;
}
.memberlist ul li.li4 a .img img{
	margin:10px 0px 0 0px;
}
.memberlist ul li.li5 a .img img{
	margin:10px 0px 0 10px;
	width:270px;
}
*/

.sub12 > div:after{
	content:"";
	display:block;
	float:none;
	clear:both;
}
.sub12 > div{
	position:relative;
	margin-top:100px;
}
.sub12 > div:first-child{
	margin-top:0;
}
.sub12 > div:before{
	content:"";
	display:block;
	position:absolute;
	left:0;
	bottom:-10px;
	width:100%;
	height:100px;
	background:rgba(155,146,217,0);
	z-index:-1;
}
.sub12 > div img{
	width:100%;
}
.sub12 > div .img01{
	float:left;
	width:800px;
}
.sub12 > div .img02{
	position:absolute;
	bottom:0;
	left:900px;
	width:400px;
}
.sub12 > div .img03{
	float:left;
	width:49%;
	margin-right:1%;
}
.sub12 > div .img04{
	float:left;
	width:49%;
	margin-left:1%;
}
.sub12 > div .img04:after{
	content:"";
	display:block;
	float:none;
	clear:both;
}
.sub12 > div .img04 img{
	width:48%;
	float:left;
	margin:1%;
}


@media only screen and (max-width: 1330px){
	.ctt_sub2_1 .memberlist_detail .title{height:266px;}
	.ctt_sub2_1 .memberlist_detail .title .img{width:400px; height:266px;}

	.ctt_sub2_2 .memberlist_detail .title{height:266px;}
	.ctt_sub2_2 .memberlist_detail .title .img{width:400px; height:266px;}

	.ctt_sub2_3 .memberlist_detail .title{height:266px;}
	.ctt_sub2_3 .memberlist_detail .title .img{width:400px; height:266px;}

	.ctt_sub2_4 .memberlist_detail .title{height:266px;}
	.ctt_sub2_4 .memberlist_detail .title .img{width:400px; height:266px;}
}



@media only screen and (max-width: 1200px){
	.memberlist ul li a{padding:10px;}
	.memberlist ul li a dl {
		margin:10px 0 0;
	}
	.memberlist ul li a p {
		width: 43px;
		height: 43px;
		font-size: 0;
		bottom: 10px;
		transform:initial;
		
		right: 10px;
	}
	#container{
		width:calc(100% - 220px);
		margin-left:10px;
	}
	.footer_wrap{width:96%;}
}
@media only screen and (max-width: 1070px){
	.memberlist_detail .title .img{
		width:400px;
	}
}
@media only screen and (max-width: 1024px){
	#hd_wrapper .btn{
		margin-top:0;
	}
	#side{
		float:none;
		width:100%;
		display:none;
	}
	#container{
		float:none;
		width:100%;
		margin-left:0;
	}
	.memberlist_detail .title{
		height:auto;
		padding-bottom:100px;
	}
	.memberlist_detail .title .img{
		float:none;
		margin:0 auto;
	}
	.memberlist_detail .title dl{
		float:none;
		margin:20px 0 0 ;
		text-align:center;
	}
	.memberlist ul li a .img{max-height:initial;}
	.memberlist_detail .title p{
		bottom:25px;
	}
	.memberlist_detail .history > ul > li ul .day{
		width:100%;
	}
	.memberlist_detail .history > ul > li ul .text{
		width:100%;
	}
	.history > ul > li ul .day{
		width:100%;
	}
	.history > ul > li ul .text{
		width:100%;
	}
	.mapTxt li dl{
		float:none;
		width:100%;
	}
	.mapTxt li dt:before {
		top: 6px;
		transform: initial;
		left: 0;
	}


	.imgbox div{
		float:left;
		width:48%;
		margin:1% 1%;
	}

	.memberlist_detail .title .img{
		width:600px;
		height:auto;
	}

	.ctt_sub2_1 .memberlist_detail .title{height:auto;}
	.ctt_sub2_1 .memberlist_detail .title .img{float:none; width:100%; height:auto; position:relative; overflow:hidden;text-align:center;}
		
	.ctt_sub2_2 .memberlist_detail .title{height:auto;}
	.ctt_sub2_2 .memberlist_detail .title .img{float:none; width:100%; height:auto; position:relative; overflow:hidden;text-align:center;}

	.ctt_sub2_3 .memberlist_detail .title{height:auto;}
	.ctt_sub2_3 .memberlist_detail .title .img{float:none; width:100%; height:auto; position:relative; overflow:hidden;text-align:center;}

	.ctt_sub2_4 .memberlist_detail .title{height:auto;}
	.ctt_sub2_4 .memberlist_detail .title .img{float:none; width:100%; height:auto; position:relative; overflow:hidden;text-align:center;}

	.ctt_sub1_6 .memberlist_detail .title{height:auto;}
	.ctt_sub1_6 .memberlist_detail .title .img{float:none; width:100%; height:auto; position:relative; overflow:hidden;}

}

@media only screen and (max-width: 900px){
	.memberlist ul li a .img{max-height:500px;}
	.memberlist ul li a .img img{display:block; margin-left:auto; margin-right:auto;}

	.sub12 > div .img03{
		float:none;
		width:100%;
		margin-right:0%;
	}
	.sub12 > div .img04{
		float:none;
		width:100%;
		margin-left:0%;
		margin-top:20px;
	}
	.sub12 > div .img04 img:nth-child(1){
		width:49%;
		margin:0 1% 0 0;
	}
	.sub12 > div .img04 img:nth-child(2){
		width:49%;
		margin:0 0 0 1%;
	}
	.sub12 > div .img04 img:nth-child(3){
		width:49%;
		margin:1% 1% 0 0;
	}
	.sub12 > div .img04 img:nth-child(4){
		width:49%;
		margin:1% 0 0 1%;
	}
	.sub12 > div:before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		bottom: -100px;
		width: 100%;
		height: 100px;
		background: rgba(155,146,217,0.1);
		z-index: -1;
	}
	.sub12 > div:last-child::before {
		display:none;
	}

}

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

	

	#container_wr{
		margin:50px auto 100px;
	}
	.history > ul > li .year{
		width:100px;
	}
	.history > ul > li ul {
		width: calc(100% - 130px);
	}
	.memberlist ul li{
		height:auto;
		width:96%;
		margin:2%;
	}
	.ctt_sub14 .memberlist ul li{width:96%;}
	.memberlist ul li a{
	    padding: 23px 35px 83px;
	}
	.memberlist ul li a .img {
		float: none;
		margin:0 auto;
	}
	.memberlist ul li a dl{
		float:none;
		width:100%;
		margin-left:0;
		margin-top:20px;
		text-align:center;
	}
	.memberlist ul li a .name{
		float:none;
		width:100%;
		margin-left:0;
		margin-top:20px;
		text-align:center;
	}
	.memberlist ul li a p {
		width: 43px;
		height: 43px;
		font-size: 0;
		bottom: 20px;
		transform: initial;
		top: auto;
		left: 50%;
		transform:translateX(-50%);
	}
	.memberlist.ensemble ul li a p {
		width: 43px;
		height: 43px;
		font-size: 0;
		bottom: 20px;
		transform: initial;
		top: auto;
		left: 50%;
		transform:translateX(-50%);
	}
	.memberlist_detail .title .img{
		width:100%;
	}
	.map_detail h3 {
		float: none;
		width: 100%;
	}
	.mapTxt {
		float: none;
		width: 100%;
	}
	.sub9 table#table_organ2{
		display:block;
	}
	.sub9 table#table_organ2 td{
		width:160px;
		height:150px;
	}
	.sub9 table#table_organ2 td.left{
		width:calc(100% - 160px);
	}
	table tbody {
		display: block;
		width: 100%;
	}
	.sub9 table tbody tr{
		display:flex;
		width:100%;
	}
	.sub9 table#table_organ1{
		display:none;
	}
	.footer_wrap .group2 .f_info ul li{
		display:block;
		text-align:center;
	}
	.footer_wrap .group2 .f_info ul li:after{
		display:none;
	}


	.history > ul > li .year{
		float:none;
		width:100%;
	}
	.history > ul > li ul{
		float:none;
		width:100%;
		margin:10px auto 0;
		border:none;
	}
	.history > ul > li ul li{
		padding:10px 0;
	}


	.imgbox div{
		float:none;
		width:100%;
		margin:1% 0%;
	}

	.ctt_sub2 .memberlist ul li{width:96%; margin:2%; height:auto;}
	.ctt_sub2 .memberlist ul li a .img{float:none;}
	.ctt_sub2 .memberlist ul li a {
    padding: 23px 35px 83px;
}


}