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

/* 제목 */
.title_h4                 { position:relative; margin-top:1.92em; margin-bottom:.77em; font-size:1.63em; color:var(--color-base); font-weight:bold; line-height:1.28; }
.title_h4:first-child                       { margin-top:0; }
.title_h4:before,


/* list text */
.basic_ul                 { margin-top:10px;}
.basic_ul>li                { position:relative; padding-left:12px; line-height:1.28; font-size:1.13rem; color:var(--color-base)}
.basic_ul>li+li               { margin-top:10px; }
.basic_ul>li strong             { font-weight:bold;}
.basic_ul>li:before             { content:''; display:block; position:absolute; left:0px; top:6.5px; width:5px; height:5px; background:var(--color-point); border-radius:100%;}
@media (max-width: 1024px) { 
	.basic_ul>li:before						{ top:6px }
}
/* 단순 박스 스타일 */
[class*="box_text_"]          { margin-top:15px; padding:20px; border-radius:10px;}
.box_text_gray              { background:#efefef; font-size:1.06em; color:var(--color-base3); line-height:1.6; font-weight:400}
.box_text_line              { border:1px solid #dddddd; font-size:1.06em; color:var(--color-base3); line-height:1.6; font-weight:400 }



/**********************************************************************
 					인사말
**********************************************************************/
[data-subarea="greetings"] 							{ position: relative;}
[data-subarea="greetings"] .greeting_wrap			{ display:flex; justify-content:space-between; gap: 100px}
[data-subarea="greetings"] .greeting_wrap .title  	{ font-size:1.625em; font-weight:400; line-height:1.4; position: relative; margin-bottom:50px; padding:50px 0}
[data-subarea="greetings"] .title:before  			{ content:''; position:absolute; bottom:0; left:0; background:var(--color-black); width:160px; height:1px; }
[data-subarea="greetings"] .title:after  			{ content:''; position:absolute; top:20px; right:25%; background:url("/resource/artsunchang/images/contents/greetings.svg"); width:120px; height:86px; opacity:.06; background-size:cover;}
[data-subarea="greetings"] .title  					{ position:relative; }
[data-subarea="greetings"] .title span				{ font-size:15px; color:var(--color-point); font-weight:900; display:block; text-transform: uppercase;}
[data-subarea="greetings"] .title strong			{ display:block; font-weight:600 }
[data-subarea="greetings"] .basic_list  			{ display:flex; flex-flow:column; gap:2em; font-size:1.125em; line-height:1.6; }
[data-subarea="greetings"] .basic_list .sign		{ color:var(--color-black); font-size:1.625em;}
[data-subarea="greetings"] .basic_list .sign span 	{ font-family:var(--font-dobong); font-size:1.538em; margin-left:10px}

[data-subarea="greetings"] .greeting_wrap .img { flex: none; display: block; height: 560px; width: 420px; border-radius: 100px 0; position: relative; margin-right:30px;}
[data-subarea="greetings"] .greeting_wrap .img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;}
[data-subarea="greetings"] .greeting_wrap .img::after { content: ''; position: absolute; right: -30px; bottom: -30px; border-radius: 0 0 100px 0; background: var(--color-point); width: 100%;  height: 330px;  z-index: -1;}

.museum  				{ margin:50px 0 }
.museum_inner   		{ display: grid; grid-template-columns: minmax(0, 570px) 1fr; gap: 40px; align-items: start; margin-bottom:30px;}
.museum_inner2   		{ grid-template-columns: 1fr minmax(0, 570px); }
.museum_img    			{ position: relative; height: 400px; overflow: hidden;}
.museum_img img    		{ width: 100%; height: 100%; object-fit: cover; display: block;}
.museum_text    		{ display: flex; flex-direction: column;}
.museum .title  		{ padding:20px 0; position:relative; margin-bottom:20px }
.museum .title span 	{ font-size:1.625rem; font-weight:300; color:var(--color-base2); }
.museum .title strong 	{ font-size:2.5rem; }

@media (max-width: 1280px) {
  [data-subarea="greetings"] { gap: 50px; align-items: center; }
  [data-subarea="greetings"] .greeting_wrap .img { width: 320px; height: 430px; border-radius: 60px 0;}
  [data-subarea="greetings"] .greeting_wrap .img::after { right: -20px; bottom: -20px; height: 250px; border-radius: 0 0 60px 0;}
  [data-subarea="greetings"] .greeting_wrap .title { font-size: 1.4em; margin-bottom: 30px; padding: 30px 0;}
}

@media (max-width: 1024px) {
  .museum_inner {   grid-template-columns: 1fr; gap:0;  }
  .museum_img { width: 100%; height: auto; aspect-ratio: 570 / 400; margin-top: 30px; }
  [data-subarea="greetings"] .greeting_wrap { flex-direction: column; align-items: center; gap: 40px;}
  [data-subarea="greetings"] .greeting_wrap .img { order:1 !important; height:30em; background:url("/resource/artsunchang/images/contents/img_greetings.jpg") no-repeat 50% 15% / cover; max-width:inherit; border-radius:30px; margin:0;}
  [data-subarea="greetings"] .greeting_wrap .img img { display:none; }
  [data-subarea="greetings"] .greeting_wrap .img::after { right:0; border-radius:30px;  }
  [data-subarea="greetings"] .greeting_wrap > div { order:2 }
}

@media (max-width:768px) {
  [data-subarea="greetings"] .basic_list { gap: 1.5em;}
  .museum  					{ margin:30px 0 }
  .museum .title span 		{ font-size:1.25em; }
  .museum .title strong 	{ font-size:1.875em; }
  [data-subarea="greetings"] .basic_list .sign	{ font-size:1.425em; }

}

@media (max-width:568px) {
	[data-subarea="greetings"] .greeting_wrap .img { width:100%; height:20em;}
  [data-subarea="greetings"] .basic_list .sign	{ font-size:1.225em; }
}


/* 관람안내 */
[data-subarea="viewing"]							{overflow:inherit;}
[data-subarea="viewing"] ol							{display:flex; flex-wrap:wrap; gap:2em}
[data-subarea="viewing"] li							{width:calc((100% - 4em) / 3); border:1px solid #ddd; border-radius:0 40px 0 40px; padding:2.5em 3em; position:relative;}
[data-subarea="viewing"] li>span					{position:absolute; top:-.5em; left:.5em; background:rgba(28, 41, 147, .8); color:#fff; font-weight:600; padding:1.1em .7em .6em; border-radius:0 0 20px 0;}
[data-subarea="viewing"] li:nth-child(2)>span		{background:rgba(28, 81, 147, .8);}
[data-subarea="viewing"] li:nth-child(3)>span		{background:rgba(28, 118, 147, .8);}
[data-subarea="viewing"] li:nth-child(4)>span		{background:rgba(28, 132, 147, .8);}
[data-subarea="viewing"] li:nth-child(5)>span		{background:rgba(28, 147, 126, .8);}
[data-subarea="viewing"] li:nth-child(6)>span		{background:rgba(28, 147, 81, .8);}
[data-subarea="viewing"] dl							{background-image:url(/resource/artsunchang/images/contents/img_info01.png); background-repeat:no-repeat; background-position:center 0; padding-top:10em; text-align:center; }
[data-subarea="viewing"] li:nth-child(2) dl			{background-image:url(/resource/artsunchang/images/contents/img_info02.png);}
[data-subarea="viewing"] li:nth-child(3) dl			{background-image:url(/resource/artsunchang/images/contents/img_info03.png);}
[data-subarea="viewing"] li:nth-child(4) dl			{background-image:url(/resource/artsunchang/images/contents/img_info04.png);}
[data-subarea="viewing"] li:nth-child(5) dl			{background-image:url(/resource/artsunchang/images/contents/img_info05.png);}
[data-subarea="viewing"] li:nth-child(6) dl			{background-image:url(/resource/artsunchang/images/contents/img_info06.png);}
[data-subarea="viewing"] dt							{position:relative; font-size:1.3em; font-weight:600; margin-bottom:.8em}
[data-subarea="viewing"] dt:before					{content:""; display:block; width:50%; height:40px; border-radius:50%; background:rgba(202, 207, 251, .1); position:absolute; top:-3em; left:0; right:0; margin:auto;}
[data-subarea="viewing"] dd							{color:#777;}
@media (max-width:850px) {
  [data-subarea="viewing"] ol						{gap:1em}
  [data-subarea="viewing"] li						{width:calc((100% - 1em) / 2); padding:2em 1em;}
}
@media (max-width:460px) {
  [data-subarea="viewing"] li						{width:100%;}
}

/* 단체관람안내 */
[data-subarea="organization"]>div:first-child{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:4em; background:#fafafa;}
[data-subarea="organization"]>div:first-child:before{content:""; display:block; background:url(/resource/artsunchang/images/contents/img_organization.jpg);  width:50%; height:400px;}
[data-subarea="organization"]>div:first-child dl{width:45%; padding-right:3em}
[data-subarea="organization"]>div:first-child dt{font-size:1.65em; font-weight:600;}
[data-subarea="organization"]>div:first-child dt strong{font-size:1.1em; font-weight:bold; color:var(--color-point);}
[data-subarea="organization"]>div:first-child dd{font-size:1.1em; font-weight:500; opacity:.8; position:relative;}
[data-subarea="organization"]>div:first-child dd:before{content:""; display:block; width:50%; height:1px; background:#777; margin:2em 0 2.2em}
@media (max-width:1024px) {
  [data-subarea="organization"]>div:first-child:before{width:35%;}
  [data-subarea="organization"]>div:first-child dl{width:60%}
  [data-subarea="organization"]>div:first-child dt{font-size:1.5em;}
}
@media (max-width:700px) {
  [data-subarea="organization"]>div:first-child{overflow:hidden; position:relative; padding:5em 1.5em; background:none}
  [data-subarea="organization"]>div:first-child:before{width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1; opacity:.3; filter:blur(1px);}
  [data-subarea="organization"]>div:first-child dl{width:100%; padding-right:0;}
}
@media (max-width:640px) {
  [data-subarea="organization"]>div:first-child{padding:5em 1em}
  [data-subarea="organization"]>div:first-child dt{font-size:1.3em;}
}

[data-subarea] .data_list{border-top:1px solid #ddd; position:relative;}
[data-subarea] .data_list:before{content:""; display:block; width:5em; height:3px; background:var(--color-point); position:absolute; top:-2px; left:0;}
[data-subarea] .data_list dl{display:flex; flex-wrap:wrap; align-items:center; align-items:center; padding:2em 0; border-bottom:1px solid #ddd;}
[data-subarea] .data_list dt{width:28%; font-size:1.6em; font-weight:bold; color:#444;}
[data-subarea] .data_list dt:first-letter{color:#000}
[data-subarea] .data_list dd{width:72%;}
[data-subarea] .data_list .basic_ul{margin-top:0;}
[data-subarea] .data_list .basic_ul li{font-size:1em; font-weight:400}

@media (max-width:768px) {
  [data-subarea] .data_list dt{font-size:1.4em; width:100%; margin-bottom:.5em;}
  [data-subarea] .data_list dt br		{ display:none; }
  [data-subarea] .data_list dd{width:100%; padding-left:10px}
}

@media (max-width:460px) {
  [data-subarea] .data_list dt{font-size:1.3em;}
}

.basic_step{display:flex; flex-wrap:wrap; gap:1em 0; margin-bottom:1.5em;}
.basic_step li{display:flex; flex-wrap:wrap; align-items:center;}
.basic_step li span{background:#39428c; color:#fff; padding:1em 2em; text-align:center; position:relative; display:block;}
.basic_step li span:after{content:""; display:block; width:100%; height:100%; background:#39428c; position:absolute; top:.3em; left:.3em; z-index:-1; opacity:.1}
.basic_step li:nth-child(2) span,
.basic_step li:nth-child(2) span:after{background:#395a8c;}
.basic_step li:nth-child(3) span,
.basic_step li:nth-child(3) span:after{background:#396e8c;}
.basic_step li:not(:first-child):before{content:""; display:block; width:7px; height:13px; background:url(/resource/artsunchang/images/contents/step_arr.png) no-repeat; margin:0 1em}
@media (max-width:768px) {
  .basic_step li span{padding:.8em 1.5em;}
}

/* 오시는 길 */
[data-subarea="location"] .map_wrap{margin-bottom:3em;}
[data-subarea="location"] .basic_ul{margin-top:0;}
[data-subarea="location"] .basic_ul li{font-size:1em; font-weight:500;}

.map_wrap{width:100%; border-radius:0 50px 0 50px; overflow:hidden;}
.map_wrap .root_daum_roughmap_landing{width:calc(100% + 2px); height:calc(100% + 2px); position:relative; top:-1px; left:-1px;}
.map_wrap .root_daum_roughmap .cont{display:none;}
@media (max-width:768px) {
  .map_wrap{border-radius:0 30px 30px 0; height:220px;}
  [data-subarea="location"] .map_wrap{margin-bottom:2em;}
}

.loca_info{display:flex; flex-wrap:wrap; margin-bottom:5em;}
.loca_info:last-child{margin-bottom:0}
.loca_info h4{font-size:1.8em; font-weight:500; line-height:1.3; width:12em; position:relative;}
.loca_info h4:after{content:""; display:block; width:3em; height:3em; background-image:url(/resource/artsunchang/images/contents/icon_loca.svg); background-repeat:no-repeat; background-position:0 0; margin-top:2.5em;}
.loca_info h4 strong{display:block; font-weight:600; font-size:1.5em; position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:.3em;}
.loca_info h4 strong:after{content:""; display:block; width:.8em; height:3px; background:var(--color-point);}

.loca_info_wrap{width:calc(100% - 21.6em); display:flex; flex-wrap:wrap;}
.loca_info_wrap div{border:1px solid #ddd; border-top:0; display:flex; flex-wrap:wrap; align-items:center; flex:1 0 100%;}
.loca_info_wrap div:first-child{border-radius:20px 20px 0 0; border-top:1px solid #ddd;}
.loca_info_wrap div:nth-child(2){flex:1 0 55%; border-right:0;}
.loca_info_wrap div:nth-child(3){flex:1 0 45%;}
.loca_info_wrap div:last-child{border-radius:0 0 20px 20px; background:#f4f4f4; border:0;}

.loca_info_wrap h5{font-size:19px; font-weight:600; position:relative; display:flex; flex-wrap:wrap; align-items:center; padding:1em; gap:.8em; width:165px;}
.loca_info_wrap div:last-child h5{width:100%;}
.loca_info_wrap h5:before{content:""; display:block; width:2.5em; height:2.5em; border-radius:50%; background-color:#f4f4f4; background-size:1.1em; background-repeat:no-repeat; background-position:center;}
.loca_info_wrap div:first-child h5:before{background-image:url(/resource/artsunchang/images/contents/icon_add.svg);}
.loca_info_wrap div:nth-child(2) h5:before{background-image:url(/resource/artsunchang/images/contents/icon_tel.svg);}
.loca_info_wrap div:nth-child(3) h5:before{background-image:url(/resource/artsunchang/images/contents/icon_mail.svg);}
.loca_info_wrap div:last-child h5:before{background-color:#fff; background-image:url(/resource/artsunchang/images/contents/icon_bus.svg); background-size:1.2em;}

.loca_info_wrap p{width:calc(100% - 165px); padding-right:2em}

.loca_info_wrap dl{width:calc(100% - 2em); margin:auto; border-top:1px solid #ddd; padding:1.5em 1em 2em;}
.loca_info_wrap dt{font-size:1.1em; font-weight:600; background:#356ca9; width:max-content; padding:.2em 1em; border-radius:50px; color:#fff; margin-bottom:.5em;}
.loca_info_wrap dd + dt{background:#3595a9; margin-top:1em}

.loca_info_wrap:has(>table){background:#f4f4f4; padding:3em; border-radius:1em;}
.loca_info_wrap table.basic_table thead th{background:#f0f1f7;}
.loca_info_wrap .basic_table{margin-top:0}
@media (max-width:1240px) {
  .loca_info_wrap div:nth-child(2){border-right:1px solid #ddd;}
  .loca_info_wrap div:nth-child(2),
  .loca_info_wrap div:nth-child(3){flex:1 0 100%;}
}
@media (max-width:1024px) {
  .loca_info h4{width:10em;}
  .loca_info h4 strong{font-size:1.2em}

  .loca_info_wrap{width:calc(100% - 18em);}
  .loca_info_wrap h5{padding:.5em 1em; font-size:1.2em; width:145px;}
  .loca_info_wrap p{width:calc(100% - 145px);}

  .loca_info_wrap dl{padding:1em 1em 1.5em}
  .loca_info_wrap dt{font-size:1.05em;}
}
@media (max-width:768px) {
  .loca_info h4,
  .loca_info_wrap{width:100%;}
  .loca_info h4{display:flex; align-items:center; gap:.3em; margin-bottom:1em; font-size:1.3em}
  .loca_info h4:after{position:absolute; right:0; top:-2.8em; width:2em; height:2em;}
  
  .loca_info_wrap:has(>table){padding:1em;}
}
@media (max-width:460px) {
  .loca_info_wrap h5{width:100%; gap:.5em;}
  .loca_info_wrap h5:before{width:2em; height:2em;}
  .loca_info_wrap p{width:100%; padding:.5em 1.5em; background:#f4f4f4; margin:0 1em 1em; border-radius:.5em 1em;}
}


/* 대관안내 */
[data-subarea="rental"] div:has(ol){overflow:hidden;}
[data-subarea="rental"] ol{display:flex; flex-wrap:wrap; margin-bottom:3em; width:calc(100% + 3.2em);}
[data-subarea="rental"] ol li{display:flex; flex-wrap:wrap; align-items:center; position:relative; text-align:center;width:calc(100% / 5); min-width:10em;}
[data-subarea="rental"] ol li:not(:last-child):after{content:""; display:block; width:1.2em; height:2em; background:url(/resource/artsunchang/images/contents/rental_arr.png) no-repeat center / contain; margin:0 1em}
[data-subarea="rental"] ol dl{width:calc(100% - 3.2em); position:relative;}
[data-subarea="rental"] ol dt{background:#1b257b; padding:.8em 1.5em; color:#fff; border-radius:20px 20px 0 20px; width:max-content; font-size:.9em; margin-bottom:9em}
[data-subarea="rental"] ol li:nth-child(2) dt{background:#1b487b;}
[data-subarea="rental"] ol li:nth-child(3) dt{background:#1b567b;}
[data-subarea="rental"] ol li:nth-child(4) dt{background:#1b6a7b;}
[data-subarea="rental"] ol li:nth-child(5) dt{background:#1b7a7b;}
[data-subarea="rental"] ol dt strong{font-weight:bold; font-size:1.2em}
[data-subarea="rental"] ol i{display:block; width:100%; height:calc(100% - 4.5em); background-color:#f8f9fb; border-radius:80px; position:absolute; top:2em; z-index:-1; background-size:auto 45%; background-position:center; background-repeat:no-repeat; background-image:url(/resource/artsunchang/images/contents/icon_rental01.svg);}
[data-subarea="rental"] ol li:nth-child(2) i{background-image:url(/resource/artsunchang/images/contents/icon_rental02.svg);}
[data-subarea="rental"] ol li:nth-child(3) i{background-image:url(/resource/artsunchang/images/contents/icon_rental03.svg);}
[data-subarea="rental"] ol li:nth-child(4) i{background-image:url(/resource/artsunchang/images/contents/icon_rental04.svg);}
[data-subarea="rental"] ol li:nth-child(5) i{background-image:url(/resource/artsunchang/images/contents/icon_rental05.svg);}
@media (max-width:768px) {
  [data-subarea="rental"] ol{width:100%; justify-content:center; gap:1.5em 0}
  [data-subarea="rental"] ol li:not(:last-child):after{width:1em; margin:.5em;}
  [data-subarea="rental"] ol li:last-child{margin-right:-2em;}
  [data-subarea="rental"] ol dl{width:calc(100% - 2em);}
  [data-subarea="rental"] ol dt{padding:.5em 1em; }
}
@media (max-width:468px) {
	[data-subarea="rental"] ol li			{ min-width:9em; }
  [data-subarea="rental"] ol dt				{ font-size:.75rem; margin-bottom:8em }
  [data-subarea="rental"] ol dt strong		{ font-size:1.1em; }
  [data-subarea="rental"] ol i				{ max-width:95px; height:95px; top:1.7em; background-size:auto 40% }
  [data-subarea="rental"] ol li:not(:last-child):after	{ height:1.2em; }
}
/* 조직도 */
[data-subarea="org"]{overflow:inherit}
[data-subarea="org"] .loca_info{margin-bottom:3em;}
[data-subarea="org"] .loca_info h4:after{background-image:url(/resource/artsunchang/images/contents/icon_org.svg);}

.org_info ul{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2em;}
.org_info li{width:calc((100% - 2em) / 2); border:1px solid #ddd; border-radius:0 0 50px 0; position:relative; background:#fff;}
.org_info li:before{content:""; display:block; width:100%; height:100%; background:#f4f4f4; border-radius:0 0 50px 0; position:absolute; top:.5em; left:.5em; z-index:-1;}
.org_info dl{padding:3em; position:relative;}
.org_info dl:before{content:""; display:block; width:3em; height:3em; position:absolute; top:2em; right:2em; background-image:url(/resource/artsunchang/images/contents/icon_org01.svg); background-repeat:no-repeat; background-position:center;}
.org_info li:nth-child(2) dl:before{background-image:url(/resource/artsunchang/images/contents/icon_org02.svg);}
.org_info li:nth-child(3) dl:before{background-image:url(/resource/artsunchang/images/contents/icon_org03.svg);}
.org_info li:nth-child(4) dl:before{background-image:url(/resource/artsunchang/images/contents/icon_org04.svg);}
.org_info dt{font-size:1.4em; margin-bottom:2em}
.org_info dt strong{font-size:1.4em; font-weight:800}
.org_info dd{position:relative;}
.org_info dd:before{content:""; display:block; width:5.5em; height:1px; background:#ddd; margin-bottom:1em}

.org_info p{font-size:1.7em; text-align:center; margin:3em 0 2em;}
.org_info p strong{font-size:1.4em; text-align:center; margin-top:3em; font-weight:600;}
@media (max-width:1024px) {
  .org_info dt{font-size:1.2em;}
}
@media (max-width:768px) {
  .org_info dl{padding:2em;}
  
  .org_info p{font-size:1.4em; margin:2em 0 1em; line-height:1.4}
  .org_info p strong{font-size:1.3em;}
}
@media (max-width:640px) {
  .org_info ul{gap:1em;}
  .org_info li{width:100%;}
  .org_info dl{padding:1.5em;}
  .org_info dt{margin-bottom:1em; font-size:1.1em}

  .org_info p{font-size:1.2em;}
}

@media (max-width:280px) {
  .org_info dl:before{opacity:.2;}
}