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

#container														{ margin-bottom:9em; }
#boardWrap														{width:94%;}
@media all and (max-width:1568px){
	#container													{  margin-bottom:8em; }
}
@media all and (max-width:1268px){
	#container													{ margin-bottom:7em; }
}
@media all and (max-width:868px){
	#container													{  margin-bottom:6em; }
}
@media all and (max-width:468px){
	#container													{  margin-bottom:5em; }
}

/**********************************************************************

 							기본 리스트 스타일

**********************************************************************/
.basic_ul li						                              { position:relative; padding-left:13px; line-height:1.35em; margin-top:10px;font-size:1.063em;}
.basic_ul li::before  				                             { content:''; position:absolute; top:9px; left:0; width:5px; height:5px; background:var(--color-point); border-radius:100%; }
.basic_ul li:first-child                                          {margin-top:0;}

@media all and (max-width:1024px){
	.basic_ul li                                                   {padding-left:12px;}
	.basic_ul li::before                                         {width:4px;height:4px;top:7px;}
}
@media all and (max-width:468px){
	.basic_ul li                                                  {font-size:1em;}
	.basic_ul li::before                                         {top:6.5px;}
}

/**********************************************************************

 							rolling_text

**********************************************************************/

[data-subarea] .rolling_text						{ position:relative; z-index:0; margin-top:.2em }
[data-subarea] .rollig_text 						{ white-space:nowrap;}
[data-subarea] .rollig_text .rolling_text_text 		{ display:inline-block; font-weight:900; font-size:9.38em; white-space:nowrap; text-transform:uppercase; line-height:1; color:#fcf5f8; }					

@media all and (max-width:1024px){
	[data-subarea] .rollig_text .rolling_text_text{font-size:7.5em;}
}

@media all and (max-width:668px){
	[data-subarea] .rollig_text .rolling_text_text{font-size:5em;}
}

/**********************************************************************

 								visual 

**********************************************************************/
/* visual */
.visual															{ position:relative; height:460px; margin:0 auto; padding:0;background-repeat:no-repeat;background-position: left 50% center;background-size:cover; }
.visual.bg1														{ background-image:url(/resource/gukhwa/images/sub/sub_visual_01.jpg); }
.visual.bg2														{ background-image:url(/resource/gukhwa/images/sub/sub_visual_02.jpg); }
.visual.bg3														{ background-image:url(/resource/gukhwa/images/sub/sub_visual_03.jpg); }
.visual.bg4														{ background-image:url(/resource/gukhwa/images/sub/sub_visual_04.jpg); }
.visual::before													{ content:''; position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.3);z-index:1; }
.visual > .con_inner                                           {display: flex;align-items: center;justify-content:center;height: 100%;}
.visual .title_wrap												{margin-top:110px;color:var(--color-white);z-index:9; text-align:center;}                                         
.visual .title_wrap h2                                         {font-family:var(--font-TTT);font-weight:600;font-size:2.8125em;line-height:1.2;margin-bottom: 18px;text-shadow:0 5px 20px rgba(0,0,0,.2); }
.visual .title_wrap p                               			{font-weight:500;font-size:1.125em;text-shadow:0 5px 20px rgba(0,0,0,.2); }

@media all and (max-width:1568px){
	.visual														{ height:400px; }
	.visual .title_wrap											{margin-top:100px;}
}


@media all and (max-width:1268px){
	.visual														{ height:340px;  }
	.visual .title_wrap											{margin-top:90px;}
	.visual .title_wrap h2										{font-size:2.5em;margin-bottom: 12px;}
	.visual .title_wrap											{font-size:1.063em;}
	
}

@media all and (max-width:1024px){
	.visual														{ height:280px;  }
}

@media all and (max-width:868px){
	.visual														{ padding:0 1em ;}
	.visual .title_wrap											{margin-top:85px;}
	.visual .title_wrap h2										{font-size:2.375em;margin-bottom:8px;}
	.visual .title_wrap											{font-size:1em;}
	

	
}
@media all and (max-width:568px){
	.visual														{ height:240px;background-position:left 30% center;}
	.visual .title_wrap h2										{font-size:2em;margin-bottom:0;}
	.visual .title_wrap											{font-size:.938em;}
}

/**********************************************************************

 								location 

**********************************************************************/

/* 위치 */
.location_wrap													{ width:100%; border-style:solid; border-width:1px 0 1px 0; border-color:#e5e5e5; }
.location_wrap .con_inner										{ display:flex; align-items:center; justify-content:space-between; --sizeHig:53px; height:var(--sizeHig) }
.location_wrap .lco												{ display:flex; align-items:center; border-left:1px solid #e5e5e5 }
.location_wrap .lco>li											{ position:relative; border-right:1px solid #e5e5e5; }
.location_wrap .lco [data-location="home"] a					{ display:flex; font-size:0px; width:var(--sizeHig); height:var(--sizeHig); opacity:.7;}
.location_wrap .lco [data-location="home"] a::before			{ content:''; display:block; width:100%; height:100%; background:url(/resource/gukhwa/images/sub/icon_home.svg) no-repeat 50% 50%; background-size:auto 14.5px; opacity:1; }
.location_wrap .lco>li>button									{ display:flex; min-width:200px;height:var(--sizeHig); align-items:center; padding:0 20px ;padding-right:3.75em; opacity:.7; }
.location_wrap .lco>li:last-child>button						{opacity:1;}
.location_wrap .lco>li>button::before							{ position:absolute; right:0; top:50%; width:7px; height:7px; border-style:solid; border-width:0 1px 1px 0; border-color:#575757; transform:translateY(-80%) rotate(45deg); transition:var(--trans-ani); content:''; vertical-align:middle;  top:50%; right:30px; }
.location_wrap .lco>li.active>button::before					{ transform:translateY(-40%) rotate(225deg); }
.location_wrap .lco>li:not(:has(button))						{ padding:0;min-width:auto; }
.location_wrap .lco>li .loc_wrap								{ position:absolute; display:none; left:-1px; z-index:112; width:calc(100% + 2px); padding:1.25em; background:var(--color-white); border:1px solid #e5e5e5; border-radius:0 0 10px 10px }
.location_wrap .lco>li .loc_wrap li > a							{ display:inline-flex; justify-content:flex-start; align-items:center; padding:5px 0px; color:var(--color-base); transition:var(--trans-ani); opacity:.64; 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/gukhwa/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					{ opacity:1; color:var(--color-point);}


/* 공유 */
.location_wrap .page_util										{ display:flex; align-items:center; border-left:1px solid #e5e5e5}
.location_wrap .page_util>li									{ position:relative; border-right:1px solid #e5e5e5 }
.location_wrap .page_util>li>button								{ display:flex; width:var(--sizeHig); height:var(--sizeHig); }
.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%; }
.location_wrap .page_util>li>button.copy:before					{ background-image:url(/resource/gukhwa/images/sub/ico_copy_link.svg);background-size:18px 17px;}
.location_wrap .page_util>li>button.print:before				{ background-image:url(/resource/gukhwa/images/sub/ico_print.svg); background-size:17px 16px;}
.location_wrap .page_util>li>button.braille:before				{ background-image:url(/resource/gukhwa/images/sub/ico_bx_link.svg); background-size:19px 10px;}
.location_wrap .page_util>li>button.braille_down:before			{ background-image:url(/resource/gukhwa/images/sub/ico_bx_down.svg); background-size:21px 13px; background-position:50% 55%}

@media all and (max-width:1368px){
	.location_wrap .con_inner										{ --sizeHig:48px; }
	.location_wrap .lco>li>button									{ font-size:.95rem; }
	.location_wrap .lco>li .loc_wrap li > a							{ font-size:.9rem; }
}
@media all and (max-width:1168px){
	.location_wrap .con_inner										{ --sizeHig:45px; }
	.location_wrap .lco>li>button									{ font-size:.9rem; }
	.location_wrap .lco>li .loc_wrap								{ padding:1em; }
	.location_wrap .lco>li>button									{ padding:0 1em; }
	.location_wrap .lco>li>button::before							{ right:1em; }
	.location_wrap .lco>li .loc_wrap li > a							{ font-size:.85rem; }
}
@media all and (max-width:968px){
	.location_wrap .con_inner										{ --sizeHig:42px; }
	.location_wrap .lco>li>button									{ padding-right:3em; }
}
@media all and (max-width:668px){
	.location_wrap .con_inner										{ --sizeHig:40px; }
	.location_wrap .lco>li>button									{min-width:auto;}
	
}
@media all and (max-width:568px){
	.location_wrap													{ border:none; }
	.location_wrap .con_inner										{ width:100%;border-color:#e5e5e5;border-style:solid;border-width:1px 0 1px 0; --sizeHig:42px; }
	.location_wrap .lco												{border-left:none;}
	.location_wrap .lco>li>button									{ padding:0 1em;padding-right:2.5em; }
	.location_wrap .page_util>li:last-child							{border-right:none;}
	
}

@media all and (max-width:468px){
  	.location_wrap .lco												{border-right:1px solid #e5e5e5;}
	.location_wrap .lco>li											{border-right:none;}
	.location_wrap .lco>li:has(button)								{display:none;}
}



/**********************************************************************

 							section_middle  

**********************************************************************/

.section_middle													{ position:relative; margin-top:5em;  }
.section_middle .content										{width:100%; }


@media all and (max-width:1568px){
	.section_middle												{ margin-top:4.5em;--sizeWidth:300px; }
	.section_middle	.lnb_wrap .list								{ max-width:230px;gap:1.88em;}
	.section_middle .lnb_wrap .list>li>a                     {font-size:1.167em;padding: 5px 1.05em;}
	.section_middle .lnb_wrap .list>li>ul                   {margin: 1em 0 0 1.25em; padding: 1em;}
}

@media all and (max-width:1468px){
	.section_middle												{ margin-top:4em; --sizeWidth:280px; }
	.section_middle	.lnb_wrap .list								{ max-width:210px; gap:1.5em; }
}


@media all and (max-width:1368px){
	.section_middle												{ margin-top:3.5em; }
	.section_middle::before           							{top:49px;}

	.section_middle .lnb_wrap .list                            {gap:1.75em}
	.section_middle .lnb_wrap .list>li>a                      {font-size:1.125em;}
}

@media all and (max-width:1268px){
	.section_middle                                    			{margin-top:3em;--sizeWidth:260px;  }	
	.section_middle .lnb_wrap .list>li>a           			 {font-size:1.1em;}


}

@media all and (max-width:1168px){
	.section_middle												{ margin-top:2.5em; --sizeWidth:250px;}
	.section_middle:before                           		 {display:none;}
	.section_middle	.lnb_wrap								{ display:none; }
	.section_middle .content                         		 {width:100%;}
}

@media all and (max-width:668px){
	.section_middle												{ margin-top:2em; }
}

@media all and (max-width:468px){
	.section_middle												{ --sizeWidth:170px; }
}





/**********************************************************************

 									title 

**********************************************************************/

.h3_title														{ position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom: 3.75em;}
.h3_title h3													{font-size:2.375em; font-weight:800; line-height:1;color:var(--color-base);}
.h3_title .share												{display:flex;align-items:center;}
.h3_title .share p												{display:inline-flex;align-items:center;font-size:1em;color:#787878;}
.h3_title .share p:after 									{content:'';display:block;width:40px;height:1px;background:#e2e2e2;margin:0 20px;}
.h3_title .share ul												{display:flex;align-items:center;}
.h3_title .share ul	li											{display:flex;align-items:center;}
.h3_title .share ul	li + li::before								{content:'';display:block;width:2px;height:2px;background:#787878;border-radius:100%;margin:0 10px;}
.h3_title .share ul	li a										{display:flex;justify-content:center; align-items:center; --sizeHig:34px;width:var(--sizeHig);height:var(--sizeHig);}
.h3_title .share ul	li a::before									{content:'';display:block; width:100%; height:100%; margin:0 auto; background-repeat:no-repeat; background-position:50% 50%; opacity: .7;border-radius:100%;transition:var(--trans-ani);}
.h3_title .share ul li[data-share="facebook"] a::before {background:url(/resource/gukhwa/images/common/icon_facebook.svg) no-repeat center center / 100%;}
.h3_title .share ul li[data-share="twitter"] a::before  {background:url(/resource/gukhwa/images/common/icon_twitter.svg) no-repeat center center / 100%;}
.h3_title .share ul li[data-share="facebook"] a:focus::before,
.h3_title .share ul li[data-share="facebook"] a:hover::before  {background:#e2e2e2 url(/resource/gukhwa/images/common/icon_facebook.svg) no-repeat center center / 100%;}
.h3_title .share ul li[data-share="twitter"] a:focus::before,
.h3_title .share ul li[data-share="twitter"] a:hover::before  {background:#e2e2e2 url(/resource/gukhwa/images/common/icon_twitter.svg) no-repeat center center / 100%;}

.h4_title:first-child                                          {margin-top:0;}
.h4_title														{ position:relative;font-size:1.625em; font-weight:700; line-height:1;margin-bottom: 1.156em;margin-top: 2.4em;padding-left:40px; color:var(--color-base);}
.h4_title:before												{ content:''; display:block; position:absolute; top:50%;left:0;transform:translateY(-50%);width:30px; height:30px; background:url(/resource/gukhwa/images/sub/icon_gukhwa.svg) no-repeat center center / 100%; border-radius:100%;}



@media all and (max-width:1368px){
	.h3_title													{margin-bottom:3em;}
	.h3_title h3											{ font-size:2em; }
	.h3_title .share p:after								{width:30px;margin:0 16px;}
	.h3_title .share ul li a									{--sizeHig:32px;}
	.h3_title .share ul li + li::before						{margin:0 6px;}
	.h4_title													{ font-size:1.5em;padding-left:38px;}
	.h4_title:before										  {width:28px;height:28px;}
}


@media all and (max-width:968px){
	.h3_title													{margin-bottom:2em;}
	.h3_title h3													{ font-size:1.875em; }
	.h4_title													{ font-size:1.3em;padding-left:30px; }
	.h4_title:before										  {width:22px;height:22px;}
}

@media all and (max-width:668px){
	.h3_title													{margin-bottom:1.5em;}
	.h3_title h3                                                    { font-size:1.75em;}
}

@media all and (max-width:468px){
  .h3_title .share p											{display:none;}
}