@charset "utf-8";

/* 레이아웃 */

#main *						          	{ box-sizing:border-box;}
#main [data-main]						{ padding:80px 0;}

	
@media (max-width: 1024px) {
	#main [data-main]					{ padding:60px 0;}
}


@media (max-width: 668px) {
	#main [data-main]					{ padding:50px 0;}
}

@media (max-width: 468px) {
	#main [data-main]					{ padding:40px 0;}
}


/* tab */
.control_main_tab .conts_tab				{ display:none; }
.control_main_tab .conts_tab.active	{ display:block; }


/************************************************************
							비주얼
************************************************************/
.visual                                       		{ position: relative; width: 100%; overflow: hidden; background-color:var(--color-white);}
.visual .swiper-slide                             	{ position: relative; background: var(--color-white);}
.visual .text                                     	{ position: absolute; top: 50%; left: calc(50% - 750px - 50px); transform: translateY(-50%); background: rgba(35, 46, 128, 0.9); padding: 60px 70px; border-radius: 0 0 100px 0; 
														max-width: 690px; color: var(--color-white); z-index: 10; overflow: inherit;}
.visual .text .title                              	{ display: flex; flex-flow: column; gap: 1.5em; color: #fff;   position:relative;margin-bottom:4.375em;}
.visual .text .title span                        	{ font-size:1.25em;text-shadow:0 0 20px rgba(0,0,0,.2);}	
.visual .text .title strong                       	{ font-size:3.125em;font-weight:800;text-shadow:0 0 20px rgba(0,0,0,.2);}
.visual .img																			{ position:relative; width: 1920px; left: 50%; transform: translateX(calc(-50% + 210px)); height:780px;}
.visual .img img																	{ position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); 
																										-webkit-transform:translate(-50%,-50%); -moz-transform: translate(-50%,-50%); object-fit:cover; -o-object-fit:cover; z-index:1}

.visual .swiper_control 													{ display:flex; align-items: center; }
.visual .swiper_control .page											{ display:flex; position:absolute; left: calc(50% - 730px ); transform:translateY(-30%); bottom:30%; z-index:9; gap:0 1em;}
.visual .swiper_control .page button							{ filter:invert(1); }
.visual .swiper_control .swiper_page							{ display:flex; width:auto;align-items:center; justify-content:center; line-height:1; color:var(--color-white);}
.visual .swiper_control .swiper_page .swiper-pagination-total	{ font-weight:bold;opacity:1;}
.visual .swiper_control .swiper_page i::after			{ background:rgba(255,255,255,.3); }


@media (max-width: 1600px) {
	.visual .text { top:50%; left:50%; transform:translate(-50%, -50%); border-radius: 10px; text-align:center; width:700px; height:auto; max-width:inherit;}
	.visual .text .title {margin-bottom:0;}
	.visual .img  { width:100%; left:0%; transform:inherit; height:680px;}
	.visual .swiper_control .page { transform:inherit; bottom:30px; left:50%; transform: translateX(-50%);}
}

@media (max-width: 1024px) {
	.visual .img  			 	{ height:600px; }
}

@media (max-width: 768px) {
	.visual .img  			 			{ height:500px; }
	.visual .text  						{ padding: 30px; width:90% }
	.visual .text .title strong 		{ font-size:1.875em; }
	.visual .text .title span  			{ font-size:1.125em; }
	.visual .text						{ top:calc(50% - 2em); }
}
@media (max-width:568px) {
	.visual .text .title span br		{ display:none; }
	
}
@media (max-width: 468px) {
	.visual .img  			 	{ height:400px; }
	.visual .text  				{ padding: 20px; width:90% }
	.visual .text .title strong { font-size:1.563em; }
	.visual .text .title span  	{ font-size:inherit; }
}

/************************************************************
						안내
************************************************************/

.main_info_wrap  				{ display:flex; justify-content:space-between; margin-top:35px;}

.info_wrap   						{ display: flex; flex-direction: column; flex:1;}
.info_item   						{ display: flex; align-items: center;}
.info_title   					{ position:relative; display: flex; align-items:center; width: 160px; font-weight: 600;position: relative; padding-right: 30px;  border-bottom: 1px solid #000; font-size:1.375em; height:60px;  padding-left:20px}
.info_text   						{ flex: 1; border-bottom: 1px solid #ddd; height:60px; display: flex; align-items:center;  font-size:1.125em;  font-weight:500; padding-left:20px}
.info_text em   				{ font-size:initial; font-weight:400; margin-left:10px}

.info_closed .info_title,
.info_closed .info_text 	{ border-bottom: none !important;}

.info_title::before 			{ content: ""; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain;}

.info_time .info_title::before 		{ background-image: url("/resource/artsunchang/images/main/icon_time.svg");}
.info_fee .info_title::before 		{ background-image: url("/resource/artsunchang/images/main/icon_fee.svg");}
.info_closed .info_title::before 	{ background-image: url("/resource/artsunchang/images/main/icon_closed.svg");}

.info_icon   						{ flex:1; display:flex; justify-content:flex-end; gap: 20px}
.info_icon ul  					{ display:flex; gap:10px; align-items:center;}
.info_icon ul li				{ flex:1;}
.info_icon ul li a			{ display:flex; flex-direction:column; align-items:center; border:1px solid var(--color-black); border-radius:5px; padding:1.25em; text-align:center; min-width:130px; min-height:130px; justify-content:center}
.info_icon ul li a .ico 	 	{ display: block; width: 35px; height: 35px;  position: relative; margin-bottom:15px}
.info_icon ul li a .ico:before  { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-size: contain; background-position: 50%;    background-repeat: no-repeat;   content: ''; transition:var(--trans-ani);}
.info_icon ul li a .banner01::before { background-image: url("/resource/artsunchang/images/main/banner01.svg");}
.info_icon ul li a .banner02::before { background-image: url("/resource/artsunchang/images/main/banner02.svg");}
.info_icon ul li a .banner03::before { background-image: url("/resource/artsunchang/images/main/banner03.svg");}

.info_icon ul li a:hover .ico::before,
.info_icon ul li a:focus .ico::before { animation: iconShow 0.7s ease-in-out 1 forwards; }
.info_icon ul li a:hover,
.info_icon ul li a:focus  			 { color:var(--color-point); font-weight:600; box-shadow:3px 3px 5px rgba(0,0,0,.1);}

@media (max-width: 1024px) {
	.main_info_wrap  				{ flex-direction:column;}
	.info_icon   						{ flex:none; width:100%; }
	.info_icon ul  					{ width:100%; margin-top:20px}
	.info_icon ul li 				{ flex: 1; width: 100%;}
	.info_icon ul li a  		{ min-width:auto; width: 100%;  min-height:auto; }
}

@media (max-width: 768px) {
  .info_item   						{ flex-direction: column;  align-items: flex-start; }
  .info_title   					{ width: 100%; height: auto;border-bottom: none; padding: 10px 0;}
  .info_text   						{ width: 100%; height: auto; border-bottom: 1px solid var(--color-line); padding: 0 0 15px 0; font-size: inherit;}
  .info_icon ul li a				{ padding:1.25em .75em; }
}

/************************************************************
						전시안내
************************************************************/

[data-main="exhibition"]  					{ position:relative;}
[data-main="exhibition"]::before  	{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%;height: 50%; background-color: #f3f6fb; z-index: -2; }

[data-main="exhibition"] .exhibition_title 									{ display:flex; align-items:center; justify-content:space-between; margin-bottom:50px; position: relative;}
[data-main="exhibition"] .exhibition_title:after  					{ content:'Information'; font-size:7.5em; color:rgba(0, 0, 0, .05); font-weight:900; position: absolute; top:30px; left:-5px; z-index:-1; text-transform: uppercase; letter-spacing: -1px;}
[data-main="exhibition"] .exhibition_title .title  					{ position:relative; }
[data-main="exhibition"] .exhibition_title .title span  		{ color:var(--color-point); font-size:15px; display:block; font-weight:500; margin-bottom:20px; text-transform: uppercase;}
[data-main="exhibition"] .exhibition_title .title strong		{ font-size: 2.25rem; font-weight:700;  }

[data-main="exhibition"] .tab_menu										{ display:flex; gap:15px; }
[data-main="exhibition"] .tab_menu li button					{ display:flex; height:50px; justify-content:center; align-items:center; padding:0 25px; background:var(--color-white); border-radius: 50px; font-weight:500; transition: var(--trans-ani); border:1px solid var(--color-line);}
[data-main="exhibition"] .tab_menu li button.active		{ background:var(--color-point); color:var(--color-white); border:1px solid var(--color-point);}
[data-main="exhibition"] .list_exhibition  						{ position: relative; padding-bottom:100px}

/* 슬라이드 */
[data-main="exhibition"] .swiper 								{ width:calc(100% + 20px); margin:0 -10px; }
[data-main="exhibition"] .swiper-wrapper						{ align-items:stretch;}
[data-main="exhibition"] .swiper-slide							{ width:25%; display:flex; height:auto }
[data-main="exhibition"] .swiper-slide a						{ display:flex; flex-flow:column; width:calc(100% - 20px); margin:0 10px; padding:0; overflow:hidden  }
[data-main="exhibition"] .swiper-slide .img					{ width: 100%; height: 300px; overflow: hidden; border:1px solid var(--color-line); background:var(--color-white); }
[data-main="exhibition"] .swiper-slide .img img			{ width: 100%; height: 100%; object-fit: cover;  display: block; transition:transform 0.4s ease}
[data-main="exhibition"] .swiper-slide strong  			{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:1.375em; line-height:1.4; text-align:center; font-weight:500; margin-top:30px; padding:0 20px}

[data-main="exhibition"] .txt_wrap 							{ margin-top: 20px;}
[data-main="exhibition"] .category 							{ display: inline-block; background: var(--color-point); color: var(--color-white); padding: 4px 15px; border-radius: 5px; margin-bottom: 10px; font-weight:500; font-size: 1.125em;}
[data-main="exhibition"] .category.category02 	{ background:var(--color-point2); }
[data-main="exhibition"] .title 								{ font-size: 1.375em; font-weight: 600; margin: 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
[data-main="exhibition"] .place 								{ font-size: 1.125em; font-weight:500;}
[data-main="exhibition"] .date 									{ color: #555;}

[data-main="exhibition"] .img_wrap 							{ width: 100%; height: 500px; overflow: hidden; border:1px solid var(--color-line); background:var(--color-white); border-radius: 15px 50px 15px 15px;}
[data-main="exhibition"] .img_wrap img 					{ width: 100%; height: 100%; object-fit: cover;  display: block; transition:transform 0.4s ease}
[data-main="exhibition"] .img_wrap img:hover,
[data-main="exhibition"] .img_wrap img:focus  	{ transform: scale(1.05); }


[data-main="exhibition"] .swiper_control  						{ position:absolute; bottom:0; left:50%; gap: 10px; transform: translateX(-50%);}
[data-main="exhibition"] .control  										{ gap:10px }
[data-main="exhibition"] .swiper_control button  			{ display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: 100%; background: var(--color-white); transition: var(--trans-ani); border:1px solid var(--color-base2); }
[data-main="exhibition"] .swiper_control .btn_more  					{ display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: 100%; background: var(--color-white); transition: var(--trans-ani); border:1px solid var(--color-base2); position: relative;}
[data-main="exhibition"] .swiper_control .btn_more::before   	{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: ''; background: url(/resource/artsunchang/images/main/icon_more.svg) no-repeat 50% 50% / 19px; }
[data-main="exhibition"] .swiper_control .btn_more:hover, 
[data-main="exhibition"] .swiper_control .btn_more:focus   		{ transform: rotate(90deg); background: var(--color-point); border-color: var(--color-point); }

[data-main="exhibition"] .swiper_control button:hover,
[data-main="exhibition"] .swiper_control button:focus  				{ background: var(--color-point); border:1px solid var(--color-point);}

[data-main="exhibition"] .swiper_control button:hover::before,
[data-main="exhibition"] .swiper_control button:focus::before,
[data-main="exhibition"] .swiper_control .btn_more:hover::before,
[data-main="exhibition"] .swiper_control .btn_more:focus::before	{ filter: invert(1); transition: filter 0.3s ease;}

@media all and (max-width:1440px) {
		[data-main="exhibition"] .exhibition_title  			{ margin-bottom:15px }
		[data-main="exhibition"] .exhibition_title .title span				{ margin-bottom:0; }
		[data-main="exhibition"] .exhibition_title:after  { font-size:4.375em; top:50px;}
    [data-main="exhibition"] .swiper-slide						{ width:33.333%; }
}

@media all and (max-width:1024px) {
		[data-main="exhibition"] .title:after  						{ font-size:2em; top:18px}
		[data-main="exhibition"] .control  								{ gap:5px }
    [data-main="exhibition"] .swiper-slide						{ width:50%; }
    [data-main="exhibition"] .swiper_control button,
    [data-main="exhibition"] .swiper_control .btn_more  { width:40px; height:40px }
    [data-main="exhibition"] .swiper_control .btn_more::before { background-size:18px }
    [data-main="exhibition"] .tab_menu  						{ gap:5px }
}
@media all and (max-width:868px) {
	[data-main="exhibition"] .exhibition_title					{ flex-wrap:wrap; }
	[data-main="exhibition"] .tab_menu							{ width:100%; }
}
@media all and (max-width:768px) {
	  [data-main="exhibition"] .swiper-slide .img  		{ height:250px }
	  [data-main="exhibition"] .swiper-slide strong  	{ margin-top:10px }
	  [data-main="exhibition"] .exhibition_title  		{ text-align:center;flex-direction:column;gap:5px 0; }
	  [data-main="exhibition"] .exhibition_title .title strong{ font-size:1.75rem }
	  [data-main="exhibition"] .exhibition_title:after { left:50%; transform:translateX(-50%); }
	  [data-main="exhibition"] .img_wrap  						{ height:400px }
	  [data-main="exhibition"] .list_exhibition  			{ padding-bottom:80px }
	  [data-main="exhibition"] .exhibition_title:after{ display:none; }
}
@media all and (max-width:568px) {
    [data-main="exhibition"] .swiper-slide					{ width:100%; }
    [data-main="exhibition"] .swiper-slide .img  		{ height:250px }
    [data-main="exhibition"] .swiper_control button, 
    [data-main="exhibition"] .swiper_control .btn_more 	{ width:30px; height:30px; }
    [data-main="exhibition"] .swiper_control .btn_more::before  { background-size:12px; }
    [data-main="exhibition"] .exhibition_title .title strong 					{ font-size:1.563rem }
    [data-main="exhibition"] .exhibition_title .title { margin:0; }
 	[data-main="exhibition"] .title					{font-size:1.25em;}
    [data-main="exhibition"] .tab_menu li button  	{ padding:0 12px; height:40px }
    [data-main="exhibition"] .list_exhibition  			{ padding-bottom:50px }
	
	[data-main="exhibition"] .swiper								{ width:calc(100% + 10px); margin:0 -5px; }
	[data-main="exhibition"] .swiper-slide a						{ width:calc(100% - 10px); margin:0 5px; }
   

}
@media all and (max-width:468px) {
	[data-main="exhibition"] .tab_menu					{ flex-wrap:wrap; }
	[data-main="exhibition"] .tab_menu>li				{ width:calc((100% - 5px) / 2); } 
	[data-main="exhibition"] .tab_menu>li>button		{ width:100%; }
}
/************************************************************
						교육/행사
************************************************************/

[data-main="education"]  									{ position:relative;}

[data-main="education"] .title  					{ position:relative;  margin-bottom:50px}
[data-main="education"] .title span  			{ color:var(--color-point); font-size:15px; display:block; font-weight:500; margin-bottom:20px; text-transform: uppercase;}
[data-main="education"] .title strong			{ font-size: 2.25rem; font-weight:700;  }
[data-main="education"] .title:after  		{ content:'Education/Events'; font-size:5em; color:rgba(0, 0, 0, .05); font-weight:900; position: absolute; top:30px; left:-5px; z-index:-1; text-transform: uppercase; letter-spacing: -1px;}
[data-main="education"] .swiper										{ width:calc(100% + 20px); margin:0 -10px; }
[data-main="education"] .swiper-wrapper								{ align-items:stretch;}
[data-main="education"] .swiper-slide									{ width:25%; display:flex; height:auto }
[data-main="education"] .swiper-slide a								{ display:flex; flex-flow:column; width:calc(100% - 20px); margin:0 10px; padding:0; background:var(--color-white); overflow:hidden  }
[data-main="education"] .swiper-slide .img						{ width: 100%; height: 300px; overflow: hidden; border:1px solid var(--color-line); background:var(--color-white); }
[data-main="education"] .swiper-slide .img img				{ width: 100%; height: 100%; object-fit: cover;  display: block; transition:transform 0.4s ease}

[data-main="education"] .txt_wrap 							{ margin-top:20px;}
[data-main="education"] .txt_wrap .category 				{ display: inline-block; background: var(--color-point); color: var(--color-white); padding: 4px 15px; border-radius: 5px; margin-bottom: 10px; font-weight:500; font-size: 1.125em;}
[data-main="education"] .txt_wrap .category.category02 		{ background:var(--color-point2); }
[data-main="education"] .txt_wrap .title 					{ display:block; font-size: 1.375em; font-weight: 600; margin: 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
[data-main="education"] .txt_wrap .place 					{ font-size: 1.125em; font-weight:500;}
[data-main="education"] .txt_wrap .date 					{ color: #555;}



[data-main="education"] .swiper-slide .img img:hover,
[data-main="education"] .swiper-slide .img img:focus{ transform: scale(1.05); }

[data-main="education"] .swiper_control  								{ position:absolute; top:100px; right:0; gap: 10px}
[data-main="education"] .control  											{ gap:10px }
[data-main="education"] .swiper_control button  				{ display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: 100%; background: var(--color-white); transition: var(--trans-ani); border:1px solid var(--color-base2); }
[data-main="education"] .swiper_control .btn_more  			{ display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: 100%; background: var(--color-white); transition: var(--trans-ani); border:1px solid var(--color-base2); position: relative;}
[data-main="education"] .swiper_control .btn_more::before   	{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: ''; background: url(/resource/artsunchang/images/main/icon_more.svg) no-repeat 50% 50% / 19px; }
[data-main="education"] .swiper_control .btn_more:hover, 
[data-main="education"] .swiper_control .btn_more:focus   		{ transform: rotate(90deg); background: var(--color-point); border-color: var(--color-point); }

[data-main="education"] .swiper_control button:hover,
[data-main="education"] .swiper_control button:focus  				{ background: var(--color-point); border:1px solid var(--color-point);}

[data-main="education"] .swiper_control button:hover::before,
[data-main="education"] .swiper_control button:focus::before,
[data-main="education"] .swiper_control .btn_more:hover::before,
[data-main="education"] .swiper_control .btn_more:focus::before	{ filter: invert(1); transition: filter 0.3s ease;}

@media all and (max-width:1440px) {
		[data-main="education"] .title  								{ margin-bottom:15px }
		[data-main="education"] .title span  						{ margin-bottom:0; }
		[data-main="education"] .title:after  					{ font-size:3em }
    [data-main="education"] .swiper-slide						{ width:33.333%; }
}
@media all and (max-width:1024px) {
		[data-main="education"] .title:after  					{ font-size:2em; top:18px}
		[data-main="education"] .control  							{ gap:5px }
    [data-main="education"] .swiper-slide						{ width:50%; }
    [data-main="education"] .swiper_control  				{ top:70px;}
    [data-main="education"] .swiper_control button,
    [data-main="education"] .swiper_control .btn_more  { width:40px; height:40px }
    [data-main="education"] .swiper_control .btn_more::before { background-size:18px }

}
@media all and (max-width:768px) {
	  [data-main="education"] .swiper-slide .img  		{ height:250px }
	  [data-main="education"] .swiper-slide strong  	{ margin-top:10px }
	  [data-main="education"] .title strong 					{ font-size:1.75rem }
}
@media all and (max-width:568px) {
      [data-main="education"] .title:after  					{ display:none;}
      [data-main="education"] .swiper-slide						{ width:100%; }
      [data-main="education"] .swiper-slide .img  		{ height:250px }
      [data-main="education"] .swiper_control button, 
      [data-main="education"] .swiper_control .btn_more 	{ width:30px; height:30px; }
      [data-main="education"] .swiper_control .btn_more::before  { background-size:12px; }
      [data-main="education"] .title strong 					{ font-size:1.563rem }
      [data-main="education"] .txt_wrap .title 					{font-size:1.25em;}
	  
	  [data-main="education"] .swiper								{ width:calc(100% + 10px); margin:0 -5px; }
	  [data-main="education"] .swiper-slide a						{ width:calc(100% - 10px); margin:0 5px; }
}


/************************************************************
						커뮤니티
************************************************************/

[data-main="community"]  								{ position:relative; padding:120px 0; background:url("/resource/artsunchang/images/main/community_bg.jpg") no-repeat center center / cover; color:var(--color-white); }
[data-main="community"] .title  				{ position:relative;  margin-bottom:50px; text-align:center; }
[data-main="community"] .title span  		{ font-size:15px; display:block; font-weight:500; margin-bottom:20px; text-transform: uppercase;}
[data-main="community"] .title strong		{ font-size: 2.25rem; font-weight:700;  }

[data-main="community"] .con_inner  		{ display:flex; height:100%;  align-items: stretch;}
[data-main="community"] h3  						{ font-size:1.875em; margin-bottom:30px; }

[data-main="community"] .event 					{ position:relative; flex: 2; display: flex; flex-direction: column; gap: 10px; }
[data-main="community"] .btn_more_wrap	{ position:absolute; top:8px; right:5px; }
[data-main="community"] .btn_more  			{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 100%; background: var(--color-white); transition: var(--trans-ani); position: relative;}
[data-main="community"] .btn_more::before   { position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: ''; background: url(/resource/artsunchang/images/main/icon_more.svg) no-repeat 50% 50% / 18px; }
[data-main="community"] .btn_more:hover, 
[data-main="community"] .btn_more:focus   	{ transform: rotate(90deg); }

[data-main="community"] .date 					{ position: relative; padding-left: 25px; color: var(--color-text-gray); font-weight:400; line-height:1}
[data-main="community"] .date::before 	{ content: ''; position: absolute; left: 0; top:47%; transform: translateY(-50%); width: 16px; height: 16px; background: url("/resource/artsunchang/images/main/icon_calendar.svg") no-repeat center/contain;}

.event ul 															{ display: flex; flex-direction: column; flex: 1; gap: 10px; }
.event ul li a 													{ flex: 1;  display: flex; align-items: center; justify-content: space-between; padding: 15px 20px;   border-radius: 20px; margin-bottom: 10px; transition: background 0.3s ease, color 0.3s ease; background: rgba(0, 0, 0, .5); height:90px}
.event ul li .category 									{ background: var(--color-point); color: var(--color-white); border-radius: 5px; padding: 3px 8px; font-size: 1.125em; flex-shrink: 0;}
.event ul li .tit 											{ font-size: 1.25em; margin: 0 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; width: 100%;}

.event ul li a:hover,
.event ul li a:focus 										{ background: var(--color-white); color:var(--color-base);}
.event ul li a:hover .title,
.event ul li a:hover .date 							{ color:var(--color-base);}

.event ul li a:hover .date::before,
.event ul li a:focus .date::before 			{ filter:invert(1); }


[data-main="community"] .notice					{ position:relative; flex: 1; display: flex; flex-direction: column; padding: 10px; }
[data-main="community"] .notice>ul				{ display:flex; gap:0 20px; }
[data-main="community"] .notice>ul>li			{ width:calc((100% - 40px) / 3); }
[data-main="community"] .notice>ul>li>a			{ height:100%; }
.notice_item 														{ flex: 1; display: flex; flex-direction: column; gap: 10px; background: rgba(0, 0, 0, .5); border-radius: 20px; padding:45px 40px; position: relative; overflow: hidden;}
.notice_item .tit 											{ font-size: 1.375em; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.notice_item .text 											{ flex: 1 1 auto;  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 1.125em; line-height: 1.4; font-weight: 400; max-height:100px; margin:10px 0}

.notice_item::before 										{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid transparent; border-radius: 20px; pointer-events: none;  transition: var(--trans-ani);}
.notice_item:hover::before,
.notice_item:focus::before 							{ border:1px solid rgba(255, 255, 255, 0.2); }
.notice_item:hover .text,
.notice_item:focus .text 								{ text-decoration:underline; }

@media all and (max-width:1440px) {
	  [data-main="community"] .title  								{ margin-bottom:15px }
	  [data-main="community"] .title span  						{ margin-bottom:0 }
}

@media all and (max-width:1280px) {
	[data-main="community"] .event { flex:1.5 }
}

@media screen and (max-width: 1024px) {
  [data-main="community"] .con_inner{ flex-direction: column;  }
  [data-main="community"] .event,
  [data-main="community"] .notice { flex: none;}
  [data-main="community"] .notice>ul					{ flex-wrap:wrap; gap:10px; }
  [data-main="community"] .notice>ul>li			{ width:100%; }
}

@media all and (max-width:768px) {
		[data-main="community"] h3  		{ margin-bottom:10px; font-size:1.375em; }
		[data-main="community"] .btn_more  					{ width:30px; height:30px; }
		[data-main="community"] .btn_more::before			{ background-size:auto 12px; }
	  [data-main="community"] .title strong 			{ font-size:1.75rem }
	  [data-main="community"] .event .btn_more_wrap,
	  [data-main="community"] .notice .btn_more_wrap  		{ top:0px }
	  .event ul li a  								{ flex-direction:column; height:auto; align-items:flex-start; overflow:hidden; margin:0}
	  .event ul li .tit  							{ margin:5px 0; }
	  [data-main="community"] .notice { padding:0; }
	  .notice_item .tit,
	  .event ul li .tit 								{ font-size:1.125em; }
	  .notice_item  									{ padding:20px }
	  .event ul li .category							{ font-size:.85rem; padding:5px 10px 4px 10px; }
	[data-main="community"] .date						{ font-size:.85rem; padding-left:22px; }
	[data-main="community"] .date::before				{ width:13px; height:13px; top:44% }
	

}

@media all and (max-width:568px) {
	[data-main="community"] .title strong  		{ font-size:1.563rem }
}

/************** 2026.03.03 익산시청 팝업 레이어 css 추가
/* 슬라이드 */
.layer_popup_wrap																{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000; color:#fff}
.layer_popup_cont 																{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1000; max-height:calc(100svh - 5em); overflow:hidden }
.layer_popup_cont .tit 															{ font-size:1.563rem; font-weight:700; position:relative; display:inline-flex; padding-top:15px; line-height:1 }
.layer_popup_cont .tit:before 													{ content:''; position:absolute; top:8px; right:-10px; width:8px; height:8px; border-radius:100%; background-color:var(--color-point); }
.layer_popup_cont .layerPopSwiper												{ width:calc(100% + 30px); margin-left:-15px; margin-right:-15px; margin-top:15px; }
.layer_popup_cont .layerPopSwiper .swiper-slide									{ width:33.333%; }
.layer_popup_cont .layerPopSwiper .swiper-slide>a								{ display:flex; width:calc(100% - 30px); margin-left:15px; margin-right:15px; }
.layer_popup_cont .layerPopSwiper .swiper-slide .img							{ position:relative; width:100%; height:0; padding-top:100%; overflow-y:auto; overflow-x:hidden }
.layer_popup_cont .layerPopSwiper .swiper-slide .img::-webkit-scrollbar 		{ -webkit-appearance:none; width:4px;} 
.layer_popup_cont .layerPopSwiper .swiper-slide .img::-webkit-scrollbar-thumb 	{ background-color:var(--color-white); border-radius:5px; } 
.layer_popup_cont .layerPopSwiper .swiper-slide .img::-webkit-scrollbar-track 	{ border-radius:5px; background-color:rgba(255,255,255,.5); }
.layer_popup_cont .layerPopSwiper .swiper-slide .img img						{ position:absolute; top:0; left:50%; min-width:100%; min-height:100%; transform:translateX(-50%); -ms-transform:translateX(-50%);
   																	 				-webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); object-fit:cover; -o-object-fit:cover;}
.layer_popup_cont .swiper_bottom												{ position:absolute; right:0; top:0; display:flex; justify-content:center; align-items:center; gap:20px; }
.layer_popup_cont .swiper_bottom .control button								{ position:relative; width:30px; height:30px; display:flex; justify-content:center; align-items:center;}
.layer_popup_cont .swiper_bottom .control										{ display:flex; justify-content:center; align-items:center; height:40px; background:var(--color-point); border-radius:40px; padding:0 10px 0 20px; }
.layer_popup_cont .swiper_bottom  .swiper_prev::before,
.layer_popup_cont .swiper_bottom  .swiper_next::before							{ position:absolute; width:8px; height:8px; border-style:solid; background:none; border-width:2px 2px 0 0; border-color:#fff; transform:rotate(45deg); content:'';filter: inherit; }
.layer_popup_cont .swiper_bottom  .swiper_next::before							{ margin-left:-4px; }
.layer_popup_cont .swiper_bottom  .swiper_prev::before							{ border-width:0 0 2px 2px; margin-right:-2px }
.layer_popup_cont .swiper_bottom .swiper_page									{ width:auto; display:flex; justify-content:center; align-items:center; font-size:.9rem; margin:0; line-height:1; color:#fff; gap:7px; margin-right:10px;}
.layer_popup_cont .swiper_bottom .swiper-pagination-current						{ font-weight:bold; color:var(--color-white);}
.layer_popup_cont .swiper_bottom .swiper-pagination-total						{ font-weight:300; opacity:.9;color:var(--color-white);}
.layer_popup_cont .swiper_bottom .swiper_page i									{ position:relative; display:inline-block; width:4px; height:4px; background:rgba(255,255,255,.5); vertical-align:middle; border-radius:100%;  }
.layer_popup_cont .swiper_bottom .swiper_page i::after							{ display:none; }
.layer_popup_cont .swiper_bottom .swiper_auto::before							{ position:absolute; width:100%; height:100%; left:0; top:0; content:''; background-position:50% 50%; background-repeat:no-repeat; background-size:auto 10px; filter:invert(1); }
.layer_popup_cont .swiper_bottom .swiper_auto::before							{ background-image:url(/resource/common/images/bbs/icon_stop.svg); }
.layer_popup_cont .swiper_bottom .swiper_auto.paused::before					{ background-image:url(/resource/common/images/bbs/icon_play.svg); }
.layer_popup_cont .layer_popup_btn												{ display:flex; justify-content:center; align-items:center; gap:10px;}
.layer_popup_cont .layer_popup_btn>li											{ position:relative; display:flex; justify-content:center; align-items:center;}
.layer_popup_cont .layer_popup_btn>li input[type="checkbox"]					{ position:absolute; width:100%; height:100%; opacity:0; }
.layer_popup_cont .layer_popup_btn>li label										{ position:relative; padding-left:35px; cursor:pointer; font-size:.95rem; }
.layer_popup_cont .layer_popup_btn>li input 									{ position:absolute; width:1px; height:1px; opacity:0; }
.layer_popup_cont .layer_popup_btn>li label::after								{ position:absolute; width:22px; height:22px; border:1px solid var(--color-white); border-radius:100%; content:''; left:0; top:0; }
.layer_popup_cont .layer_popup_btn>li label::before 							{ content: ""; position:absolute; top:4px; left:8px; width:6px; height:10px; overflow:hidden; border-style:solid; border-width:0 2px 2px 0;
																					 border-color:var(--color-white); opacity:0; transform:rotate(45deg);}
.layer_popup_cont .layer_popup_btn>li input:checked + label::before 			{ opacity:1; }
.layer_popup_cont .layer_popup_btn .popup_close_button 							{ display:flex; position: relative; width:46px; height:46px; transition:all ease 0.3s }
.layer_popup_cont .layer_popup_btn .popup_close_button::before					{ position:absolute; width:100%; height:100%; left:0; top:0; content:''; background:var(--color-point); opacity:.5; border-radius:100%; }
.layer_popup_cont .layer_popup_btn .popup_close_button::after					{ position:absolute; width:calc(100% - 16px); height:calc(100% - 16px); left:8px; top:8px; content:''; background:var(--color-point); border-radius:100%; }
.layer_popup_cont .layer_popup_btn .popup_close_button>em						{ position:relative; width:100%; height:100%; transition:all ease 0.3s }
.layer_popup_cont .layer_popup_btn .popup_close_button>em::before				{ position:absolute; width:2px; height:14px; left:50%; top:50%; background:var(--color-white); transform:translate(-50%,-50%) rotate(45deg); content:''; z-index:3}
.layer_popup_cont .layer_popup_btn .popup_close_button>em::after				{ position:absolute; width:2px; height:14px; left:50%; top:50%; background:var(--color-white); transform:translate(-50%,-50%) rotate(-45deg); content:''; z-index:3}
.layer_popup_cont .layer_popup_btn .popup_close_button:hover					{ transform:rotate(180deg); }	
.layer_popup_bg 																{ position:absolute; top:0; left:0; right:0; bottom:0; background:rgb(0, 0, 0, 0.9); }
@media all and (max-width:1368px){
	.layer_popup_cont .layerPopSwiper											{ width:calc(100% + 20px); margin-left:-10px; margin-right:-10px;  }
	.layer_popup_cont .layerPopSwiper .swiper-slide>a							{ width:calc(100% - 20px); margin-left:10px; margin-right:10px; }
}
@media all and (max-width:1024px){
	.layer_popup_cont .layerPopSwiper .swiper-slide								{ width:50%;  }
	.layer_popup_cont .swiper_bottom .control									{ height:36px; }
	.layer_popup_cont .layer_popup_btn .popup_close_button 						{ width:42px; height:42px; }
	.layer_popup_cont .layer_popup_btn>li label									{ padding-left:30px; font-size:.9rem; }
	.layer_popup_cont .tit														{ padding-top:10px; }
	.layer_popup_cont .tit:before												{ width:6px; height:6px; right:-8px; top:4px; }
}
@media all and (max-width:768px){
	.layer_popup_cont															{ padding-bottom:52px; }
	.layer_popup_cont .swiper_bottom											{ position:initial; }
	.layer_popup_cont .swiper_bottom .control									{ position:absolute; right:0; top:2px; }
	.layer_popup_cont .layer_popup_btn											{ position:absolute; width:max-content; left:50%; bottom:0; transform:translateX(-50%); }
	.layer_popup_cont .tit														{ padding-top:8px; }
	.layer_popup_cont .tit:before												{ width:6px; height:6px; right:-8px; top:0; }
}
@media all and (max-width:568px){
	.layer_popup_cont .layerPopSwiper .swiper-slide								{ width:100%;  }
}
@media all and (max-width:468px){
	.layer_popup_cont .tit 														{ font-size:1.363rem; }
	.layer_popup_cont .swiper_bottom .control									{ height:32px; padding:0 5px 0 15px }
	.layer_popup_cont .swiper_bottom .swiper_page								{ font-size:.85rem; margin-right:5px; }
	.layer_popup_cont .swiper_bottom .control button							{ width:25px; height:25px; }
	.layer_popup_cont .layerPopSwiper											{ margin-top:15px; }
} 
@media all and (max-width:320px){
	.layer_popup_cont .tit>span													{ display:none; }
}