@charset "utf-8";
/* CSS Document */

#container									{ position:relative;overflow:hidden;padding-bottom:7em;}		
#content									{z-index:3;}
.paging.mob									{ margin-top:20px; }
@media (max-width: 1024px) {
  #container								{ padding-bottom:5em; } 
}
@media (max-width:768px) {
  #container								{ padding-bottom:4em; } 
}
@media (max-width:468px) {
  #container								{ padding-bottom:3em; } 
}

.permanent .gallery_list .list_4vs3>li .gl_thumb		{ padding-top:84.66% }
/**********************************************************************

 								비주얼 

**********************************************************************/
.visual                                       	{ position:relative; width: 1920px; left: 50%; transform: translateX(calc(-50% + 210px)); height:340px; overflow: visible; background-size: cover; background-position: center; background-repeat: no-repeat; z-index:3;}
.visual::before									{ position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.05); content:''; }
.visual.bg1										{ background-image:url(/resource/artsunchang/images/sub/sub_visual01.jpg); }
.visual.bg2										{ background-image:url(/resource/artsunchang/images/sub/sub_visual02.jpg); }
.visual.bg3										{ background-image:url(/resource/artsunchang/images/sub/sub_visual03.jpg); background-position: right 10% top 50%;}
.visual.bg4										{ background-image:url(/resource/artsunchang/images/sub/sub_visual04.jpg); }
.visual.bg5										{ background-image:url(/resource/artsunchang/images/sub/sub_visual05.jpg); }

.visual .text_wrap 								{ position: absolute; top: 50%; left: -50px;  transform: translateY(-50%); background: rgba(35, 46, 128, 0.9); padding: 30px 70px; border-radius: 0 0 40px 0; color: var(--color-white); z-index: 3; display: inline-block; width: auto; white-space: nowrap;}
.visual .visual_title 							{ font-size: 1.875em; font-weight: 800; margin: 0; color: var(--color-white); text-shadow: 0 0 20px rgba(0, 0, 0, 0.2);}
.visual .img									{ position:relative; width: 1920px; left: 50%; transform: translateX(calc(-50% + 210px)); height:340px;}
.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}

@media (max-width: 1600px) { 
	.visual 					{ width:100%; left:0; transform:inherit; } 
}


@media (max-width: 1024px) { 
	.visual .text_wrap  		{ transform:inherit; top:50px; padding:20px 60px 20px 30px; left:0;}
	.visual 					{ height: 270px }
}
@media (max-width: 768px) { 
	.visual { height: 240px }
	.visual .visual_title { font-size:1.5em }
	.visual .text_wrap 	  { top:30px; }
}

@media (max-width: 468px) { 
	.visual { height: 200px }
	.visual .visual_title { font-size:1.375em }
}

.location_wrap  								{ position:absolute; bottom:20px; left:25px; display:flex; justify-content:space-between;}	
/* 위치 */
.location_wrap .lco												{ display:flex; align-items:center; color:var(--color-white);}
.location_wrap .lco>li											{ position:relative; margin:0 10px }
.location_wrap .lco [data-location="home"] a					{ display:flex; font-size:0px; width:40px; height:40px; background: rgba(0, 0, 0, .6); border-radius: 40px}
.location_wrap .lco [data-location="home"] a::before			{ content:''; display:block; width:100%; height:100%; background:url(/resource/artsunchang/images/sub/icon_home.svg) no-repeat 50% 50%; background-size:auto 16px; filter:invert(1);}
.location_wrap .lco>li>button									{ display:flex; align-items:center; background: rgba(0, 0, 0, .6); border-radius: 40px; height:40px; width:180px; padding:0 20px; transition:var(--trans-ani);}
.location_wrap .lco>li>button::before							{ position:absolute; right:20px; top:50%; width:7px; height:7px; border-style:solid; border-width:0 1px 1px 0; border-color:var(--color-white); transform:translateY(-80%) rotate(45deg); transition:var(--trans-ani); content:''; vertical-align:middle;}
.location_wrap .lco>li.active>button::before					{ transform:translateY(-40%) rotate(225deg); }
.location_wrap .lco>li:not(:has(button))						{ padding:0; }
.location_wrap .lco>li>button.active							{ border-radius:20px 20px 0 0}
.location_wrap .lco>li .loc_wrap								{ position:absolute; display:none; left:0; z-index:5; width:100%; padding:1.25em; border-radius:20px; background: rgba(0, 0, 0, .6); }
.location_wrap .lco>li.active .loc_wrap							{ border-radius:0 0 20px 20px; }
.location_wrap .lco>li .loc_wrap li > a							{ display:inline-flex; justify-content:flex-start; align-items:center; padding:5px 0px; color:var(--color-white); transition:var(--trans-ani); line-height:1.2;
    word-break: break-all; }
.location_wrap .lco>li .loc_wrap li a[target='_blank']::after	{ content:""; display:inline-block; opacity:.8; transition:all .4s; margin-left:7px; vertical-align:middle; width:11px; height:10px;
    background:url(/resource/artsunchang/images/common/icon_blank.svg) no-repeat 50% 50% / auto 10px; }
.location_wrap .lco>li .loc_wrap li > a:hover,
.location_wrap .lco>li .loc_wrap li > a:focus					{ text-decoration: underline;}

@media all and (max-width:768px){
    .location_wrap													{ border:none; height:fit-content }
    .location_wrap .con_inner										{ border-radius:10px; background:#f2f2f2; --sizeHig:40px; flex-wrap:wrap; height:auto; padding:7px; gap:5px;}
    .location_wrap .lco												{ border:none; }
	.location_wrap .lco												{ flex-wrap:wrap; }
	.location_wrap .lco>li											{ padding:0; }
	.location_wrap .lco [data-location="home"] a					{ min-width:30px; width:30px; height:30px; }
	.location_wrap .lco [data-location="home"]						{ margin-right:-1px; margin-left:0; }
	.location_wrap .lco [data-location="home"] a::before			{ margin-top:-1px; background-size:12px; }
	.location_wrap .lco>li												{ border-right:none; }
	.location_wrap .lco>li+li										{ padding-left:15px; margin-left:10px; }
	.location_wrap .lco>li+li::before								{ position:absolute; left:-3.5px; top:50%; width:7px; height:7px; border-style:solid; border-width:1px 1px 0 0; border-color:var(--color-white); 
																		transform:translateY(-50%) rotate(45deg); content:'';  }
																		
	.location_wrap .lco>li>button									{ height:inherit; padding:0; pointer-events:none; text-align:left; background:none; width:auto;}
	.location_wrap .lco>li>button::before							{ display:none; }
	.location_wrap .lco>li:last-child>button::before				{ display:none; }
	.location_wrap .lco>li>button span								{ max-width:inherit; white-space:initial; text-overflow:initial; overflow:inherit; }
    .location_wrap .lco>li												{ border-right:none; }
	
}

/* 공유 */
.location_wrap .page_util																{ z-index:3; display:flex; justify-content:center; align-items:center; --sizeHig:clamp(30px, 2vw + 20px, 40px); gap:6px;  }
.location_wrap .page_util>li															{ position:relative; }
.location_wrap .page_util>li>button														{ display:flex; width:var(--sizeHig); height:var(--sizeHig); border-radius:100%; background: rgba(0, 0, 0, .5);}
.location_wrap .page_util>li>button:before												{ content:''; flex:none; display:block; width:100%; height:100%; margin:0 auto; background-repeat:no-repeat; background-position:50% 50%; filter:invert(1);}
.location_wrap .page_util>li .share_bt:before											{ background-image:url(/resource/artsunchang/images/sub/ico_share.svg); background-size:16px; margin-top:-.5px}
.location_wrap .page_util>li>button.copy:before											{ background-image:url(/resource/artsunchang/images/sub/ico_copy_link.svg);}
.location_wrap .page_util>li>button.print:before										{ background-image:url(/resource/artsunchang/images/sub/ico_print.svg); background-size:17px 16px;}
.location_wrap .page_util>li>button.braille:before										{ background-image:url(/resource/artsunchang/images/sub/ico_bx_link.svg); background-size:18px 13px;}
.location_wrap .page_util>li>button.braille_down:before									{ background-image:url(/resource/artsunchang/images/sub/ico_bx_down.svg); background-size:18px 13px; background-position:50% 55%}
.location_wrap .page_util>li.share .share_drop											{ display:none; position:absolute; top:-1px; left:-2px; z-index:10; width:calc(var(--sizeHig) + 4px); box-sizing:border-box; background-color:var(--color-white); 
																						border:1px solid #e5e5e5;  text-align:center; z-index:1 ; border-radius:25px;}			

.location_wrap .page_util>li.share .share_drop ul										{ padding-top:10px; display:flex; flex-flow:column; gap:7px; }
.location_wrap .page_util>li.share .share_drop ul > li a								{ display:flex; justify-content:center; align-items:center; width:100%; height:100%;}
.location_wrap .page_util>li.share .share_drop ul > li[data-share] a:before				{ content:''; display:block; width:30px; height:30px; background-repeat:no-repeat; background-position:50% 50%; background-size:auto 100%; border-radius:100%; }
.location_wrap .page_util>li.share .share_drop ul > li[data-share="blog"] a:before		{ background-image:url(/resource/artsunchang/images/sub/icon_blog.svg); background-color:#32b44a;}
.location_wrap .page_util>li.share .share_drop ul > li[data-share="youtube"] a:before	{ background-image:url(/resource/artsunchang/images/sub/icon_youtube.svg); background-color:#e03232;}
.location_wrap .page_util>li.share .share_drop ul > li[data-share="facebook"] a:before	{ background-image:url(/resource/artsunchang/images/sub/icon_facebook.svg); background-color:#385691;}
.location_wrap .page_util>li.share .share_drop ul > li[data-share="instar"] a:before	{ background:url(/resource/artsunchang/images/sub/icon_instar.svg) no-repeat 50% 50% / cover, linear-gradient(to bottom right, #4a48e8 20% , #ee3183 60%, #f0c05c 100%);}
.location_wrap .page_util>li.share .share_drop ul > li[data-share="kakao"] a:before		{ background-image:url(/resource/artsunchang/images/sub/icon_kakaoch.svg); background-color:#ffde00; }
.location_wrap .page_util>li.share .share_drop ul > li[data-share="twitter"] a:before	{ background-image:url(/resource/artsunchang/images/sub/icon_twitter.png); background-color:#000;}
.location_wrap .page_util>li.share .share_drop ul > li[data-share="band"] a:before		{ background-image:url(/resource/artsunchang/images/sub/icon_band.png); background-color:#50b748;}
.location_wrap .page_util>li.share .share_drop ul > li[data-share="copy"] a:before		{ background-image:url(/resource/artsunchang/images/sub/icon_copy.svg); background-color:#555555;}
.location_wrap .page_util>li.share .share_close											{ position:relative; width:30px; height:30px; margin-top:10px; margin-bottom:5px; background:#e5e5e5; border-radius:100%;}
.location_wrap .page_util>li.share .share_close::before									{ position:absolute; width:1px; height:11px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg); content:''; background:var(--color-base); }
.location_wrap .page_util>li.share .share_close::after									{ position:absolute; width:1px; height:11px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-45deg); content:''; background:var(--color-base);}
.location_wrap .page_util>li.share .share_close:hover									{ transform:rotate(90deg); }

.location_wrap .scroll_down 																		{width: 100%;text-align: center;position: absolute;bottom: 0; left: 0;display: flex;justify-content: center;filter: invert(1) brightness(10);mix-blend-mode: difference;margin-bottom: -70px;z-index:5;pointer-events: none;}
.location_wrap .scroll_down .spinner 															{width: 140px;height: 140px;display: flex;align-items: center;justify-content: center;z-index: 3;}
.location_wrap .scroll_down .spinner i 														{position:absolute;width:100%;height:100%;display:block;background:url("/resource/artsunchang/images/sub/icon_down_arr.svg") no-repeat center center / auto 20px;animation: updown 1s alternate-reverse ease-in-out infinite;}
.location_wrap .scroll_down .spinner img 														{animation: rotate 8s infinite linear;}

@keyframes rotate {
    0% { transform:rotate(0); }
    100% { transform:rotate(360deg); }
}


@media all and (max-width:1024px){
	.location_wrap { left:50%; transform:translateX(-50%); }
}
@media all and (max-width:768px){
	.location_wrap													{ height:fit-content; flex-wrap:wrap; gap:5px 1.5em}
	.location_wrap .page_util										{ --sizeHig:30px; }
  	.location_wrap .page_util>li.share .share_drop					{ width:calc(var(--sizeHig) + 8px); left:-4px; }
  	.location_wrap .page_util>li.share .share_drop ul				{ padding-top:7px; gap:5px; }
  	.location_wrap .page_util>li.share .share_drop ul > li[data-share] a:before,
  	.location_wrap .page_util>li.share .share_close					{width:26px; height:26px; }
	.location_wrap .page_util>li .share_bt:before					{ background-size:13px; }
	.location_wrap .page_util>li>button.print:before				{ background-size:auto 13px; }
	.location_wrap .page_util>li>button.braille:before				{ background-size:auto 10px; background-position:52% 50% }
	.location_wrap .page_util>li>button.braille_down:before			{ background-size:auto 10px; background-position:52% 50% }
  	.location_wrap .page_util>li.share .share_close					{margin-top:8px;}


}

/**********************************************************************
 								내용 
**********************************************************************/

/* 타이틀 */
.h3_title														{ position:relative;padding-top:5em; text-align:center;  }
.h3_title h3														{font-size:2.813em; line-height:1; margin-bottom:.8em; }
.h3_title .bullet												{display: inline-flex;gap: 10px; }
.h3_title .bullet span										{width:10px;height:10px;background:var(--color-point);border-radius:100%;}

@media all and (max-width:1468px) {
	.h3_title h3												{font-size:2.5em;}
}

@media all and (max-width:1268px) {
	.h3_title														{padding-top:4.5em;}
	.h3_title h3												{font-size:2.375em;margin-bottom:.6em;}
	
}


@media all and (max-width:1024px) {
	.h3_title														{padding-top:4em;}
	.h3_title h3													{font-size:2em;}

}


@media all and (max-width:768px) {
	.h3_title														{padding-top:3em;}
	.h3_title h3												{font-size:1.875em;}
	.h3_title .bullet												{gap:8px;}
	.h3_title .bullet span										{width:8px;height:8px;}
}

@media all and (max-width:468px) {
	.h3_title														{padding-top:2.5em;}
	.h3_title h3												{font-size:1.625em;}
	.h3_title .bullet												{gap:6px;}
	.h3_title .bullet span										{width:6px;height:6px;}
}
											

/*********************************************************************
 								공통 
**********************************************************************/
[data-subarea]													{ margin-top:70px;}

@media all and (max-width:1268px) {
	[data-subarea]												{margin-top:50px;}
}


@media all and (max-width:1024px) {
	[data-subarea]												{margin-top:40px;}
}


@media all and (max-width:768px) {
	[data-subarea]												{margin-top:30px;}
}

@media all and (max-width:468px) {
	[data-subarea]												{margin-top:25px;}
}
		
/* 3차메뉴 */
.area_snb .sub_tab								{ display:flex; flex-flow:row wrap; justify-content:center; align-items:stretch; gap:9px; }
.area_snb .sub_tab > li							{ display:flex; justify-content:center; align-items:center;}
.area_snb .sub_tab > li > a,
.area_snb .sub_tab > li > button				{ display:flex; justify-content:center; align-items:center; position:relative; box-sizing:border-box; padding:20px 0; border-radius:10px; width:200px;
												line-height:1.15; color:#565656; text-align:center; transition:var(--trans-ani); font-size:1.25em; font-weight:400; background:#f0f0f0; letter-spacing:-.045em }
.area_snb .sub_tab > li.active > a,
.area_snb .sub_tab > li.active > button			{ background:var(--color-point); color:var(--color-white); }	

.area_snb .sub_tab > li > a:hover,
.area_snb .sub_tab > li > a:focus  				{ background:var(--color-point); color:var(--color-white); }
.area_snb .btn_snb_mob						{ display:none; justify-content:flex-start; align-items:center; position:relative; width:100%; box-sizing:border-box; padding:15px 20px 15px 15px; border-radius:8px; 
													line-height:1.15; color:var(--color-white); text-align:center; transition:var(--trans-ani); font-size:1.03em; font-weight:400; background:var(--color-point); letter-spacing:-.045em }
.area_snb .btn_snb_mob::after					{ content:''; display:block; position:absolute; width:7px; height:7px; right:17px; top:50%; border-style:solid; border-color:var(--color-point); border-width:0 1px 1px 0; 
													transform:translateY(-70%) rotate(45deg); transition:var(--trans-ani); }
.area_snb .btn_snb_mob.active::after			{ transform:translateY(-40%) rotate(-135deg);}	


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

	/* 6차 메뉴 */
	.area_snb									{ border-radius:10px; padding:10px; }
	.area_snb .btn_snb_mob						{ display:flex; background:var(--color-white); border:1px solid var(--color-point); color:var(--color-point); padding:15px 20px 15px 15px; width:100% }
	.area_snb .btn_snb_mob.active				{ border-radius:8px 8px 0px 0px;  }
	.area_snb .sub_tab							{ display:none; overflow-y:auto; position:absolute; left:10px; top:var(--sizeMob); z-index:5; width:calc(100% - 20px); max-height:300px; box-sizing:border-box; border-radius:0 0 8px 15px;
												padding:15px; background:var(--color-white); border:1px solid var(--color-point); border-top-color:#dcdcdc; box-shadow:0 10px 30px rgba(0,0,0,0.2);}
	.area_snb .sub_tab > li						{ height:auto; max-width:inherit; }
	.area_snb .sub_tab > li+li					{ margin-top:5px; }
	.area_snb .sub_tab > li > a,
	.area_snb .sub_tab > li > button			{ padding:12px 15px; border-radius:5px; width:100%; font-size:inherit;}

}