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

#container														{ margin-bottom:9em; }
@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; }
}

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

 					공통 스타일가이드와 별도 부분

**********************************************************************/
.area_diagram .list > li:after									{ filter:invert(36%) sepia(155%) saturate(668%) hue-rotate(81deg) brightness(89%) contrast(50%); }
.area_diagram .list > li span									{ flex-flow:column; gap:10px; }
.basic_btn .download span:after									{ filter:invert(100%) sepia(100%) saturate(0%) hue-rotate(167deg) brightness(102%) contrast(200%); }
.small_dot>li::before											{ top:7.5px; }
.area_tab														{ padding:0; }
.area_tab::before												{ display:none; }
.area_tab .list > li											{ max-width:250px; }
.area_tab .list > li > a, 
.area_tab .list > li > button									{ border-radius:8px; }


@media all and (max-width:468px){
	.basic_btn a, 
	.basic_btn button											{ padding:0 12px; }
}
/**********************************************************************

 								visual 

**********************************************************************/
/* visual */
.visual															{ position:relative; padding:6.25em 0 3.75em;display:flex;align-items: center;flex-wrap:wrap;gap:0 1.875em;}
.visual .line													{display:block;width:7.5em;height:1px;background:var(--color-base1);}
.visual	.txt													{width:100%;font-size:1.375em;font-weight:500;line-height:1;color:var(--color-base1);opacity:.74;margin-top: .75em;}                        

@media all and (max-width:1568px){
	.visual														{padding:5em 0 3.5em;}
}

@media all and (max-width:1468px){
	.visual														{padding:4.5em 0 3em;}
}

@media all and (max-width:1368px){
	.visual .txt												{font-size:1.25em;}
}

@media all and (max-width:968px){
	.visual														{padding:2.5em 0;gap:0 1.5em;}
	.visual .line												{width:5em;}	
	.visual .txt												{font-size:1.125em;}
}

@media all and (max-width:668px){
	.visual														{padding:2em 0;gap:1em;}
	.visual .line												{width:2.5em;}	
	.visual .txt												{font-size:1.063em;margin-top:.5em;}
}

@media all and (max-width:568px){
	.visual														{padding:2em 0 1em;}
	.visual .txt												{font-size:1em;}
}



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

 							location + share

**********************************************************************/
.location_wrap													{ width:100%; display:flex; align-items:center; justify-content:space-between; --sizeHig:48px; border-bottom:1px solid #e5e5e5;}
.section_middle													{ position:relative; }

/* location */
.location_wrap .lco												{ display:flex; align-items:center; border-style:solid;border-color:#e5e5e5;border-width:1px 0 0 1px;}
.location_wrap .lco>li											{ position:relative; border-right:1px solid #e5e5e5; padding:0 20px }
.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/green/images/sub/icon_home.svg) no-repeat 50% 50%; background-size:auto 14.5px; 
																	opacity:1; }
.location_wrap .lco>li>button									{ display:flex; height:var(--sizeHig); align-items:center; padding-right:3.75em; opacity:.7; }
.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; }
.location_wrap .lco>li .loc_wrap								{ position:absolute; display:none; left:-1px;top: calc(100% - 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:color 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/green/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; font-weight:600;}

/* share */
.location_wrap .page_util										{ display:flex; align-items:center; gap:5px;--sizeHig:36px; }
.location_wrap .page_util>li									{ position:relative; }
.location_wrap .page_util>li>button								{ display:flex; width:var(--sizeHig); height:var(--sizeHig); border-radius:8px; background:#ededed; }
.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 .share_bt:before					{ background-image:url(/resource/green/images/sub/ico_share.svg); background-size:16px; margin-top:-.5px;}
.location_wrap .page_util>li>button.copy:before					{ background-image:url(/resource/green/images/sub/ico_copy_link.svg);}
.location_wrap .page_util>li>button.print:before				{ background-image:url(/resource/green/images/sub/ico_print.svg); background-size:17px 16px;}
.location_wrap .page_util>li>button.braille:before				{ background-image:url(/resource/green/images/sub/ico_bx_link.svg); background-size:19px 10px;}
.location_wrap .page_util>li>button.braille_down:before			{ background-image:url(/resource/green/images/sub/ico_bx_down.svg); background-size:21px 13px; background-position:50% 55%}
.location_wrap .page_util>li.share .share_drop												{ display:none; position:absolute; top:-1px; left:-1px; z-index:10; width:calc(var(--sizeHig) + 2px); box-sizing:border-box; background-color:var(--color-white); 
																								border:1px solid #e5e5e5;  text-align:center; z-index:2 ; border-radius:10px;}																								
.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/green/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/green/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/green/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/green/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/green/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/green/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/green/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/green/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); }


@media all and (max-width:1368px){
	.location_wrap .lco>li .loc_wrap li > a							{ font-size:.9rem; }
}

@media all and (max-width:1168px){
	.location_wrap .lco>li>button									{ font-size:.9rem; }
	.location_wrap .lco>li .loc_wrap								{ padding:1em; }
	.location_wrap .lco>li											{ 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 .lco>li>button									{ padding-right:1.75em; }
}
@media all and (max-width:668px){
	.location_wrap .lco>li											{ font-size:.95em; }
	.location_wrap .page_util>li.share .share_drop					{ width:calc(var(--sizeHig) + 12px); left:-6px; }
}
@media all and (max-width:568px){
	.location_wrap														{flex-wrap:wrap;gap:5px;padding:.5em 0;--sizeHig:38px;}
	.location_wrap .lco													{border-width:0;}
	.location_wrap .lco>li												{border-right:none;}
    .location_wrap .lco>li+li											{ padding-left:10px; margin-left:10px; }
	.location_wrap .lco												{ flex-wrap:wrap; }
	.location_wrap .lco>li											{ padding:0; }
	.location_wrap .lco [data-location="home"] a					{ width:25px; height:30px; }
	.location_wrap .lco [data-location="home"]						{ margin-right:-5px; }
	.location_wrap .lco [data-location="home"] a::before			{ margin-top:-1px; }
	.location_wrap .lco>li+li										{ padding-left:10px; margin-left:10px; }
	.location_wrap .lco>li+li::before								{ position:absolute; left:-5px; top:50%; width:7px; height:7px; border-style:solid; border-width:1px 1px 0 0; border-color:#575757; 
																		transform:translateY(-50%) rotate(45deg); content:'';  }
																		
	.location_wrap .lco>li>button									{ height:inherit; padding-right:0; pointer-events:none; }
  	.location_wrap .lco>li>button span								{ max-width:inherit; white-space: normal; text-overflow:inherit; overflow:inherit;}
	.location_wrap .lco>li>button::before							{ display:none; }
	.location_wrap .lco>li:last-child>button::before				{ display:none; }
}


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

 						    	title 

**********************************************************************/
.h2_title														{font-family:'Lato';font-size:3.348em; font-weight:500; line-height:1; color:var(--color-base1);letter-spacing:0; }
.h2_title strong												{font-weight:900;}
.h3_title														{ display:flex; font-size:2.25em; font-weight:800; line-height:1;color:var(--color-base1); letter-spacing:0;  }
.h4_title														{ position:relative; display:inline-flex; font-size:1.56em; font-weight:700; margin-bottom:.8em;line-height:1;margin-top:3.75em; }
.h4_title::after												{ position:absolute; right:-10px; top:-6px; width:6px; height:6px; background:var(--color-point); border-radius:100%; content:''; }
.h5_title														{ position:relative; font-size:1.35em; font-weight:600; margin-bottom:.75em; line-height:1; margin-top:2.5em; color:var(--color-point) }
/*.h5_title::after												{ display:inline-block; vertical-align:middle; width:6em; margin:-3px 0 0 10px; height:1px; background:var(--color-base); content:''; }*/

@media all and (max-width:1368px){
	.h2_title													{ font-size:2.75em; }
	.h3_title													{ font-size:1.8em; }
	.h4_title													{ font-size:1.5em; margin-top:2.4em;}
}
@media all and (max-width:968px){
	.h2_title													{ font-size:2.5em; }
	.h3_title													{ font-size:1.6em; }
	.h4_title													{ font-size:1.3em; }
}

@media all and (max-width:668px){
	.h2_title													{ width:100%;font-size:1.875em; }
	.h3_title													{ font-size:1.375em; }
}

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

 					타이틀, 컨텐츠 영역 한 줄 배치  

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

.row															{ margin-top:3.75em;display:flex;justify-content: center;--sizeWidth:300px;}
.row .title_wrap												{ width:var(--sizeWidth);}
.row .title_wrap .h4_title										{ margin-top:0;}
.row .con_wrap						 						 	{ width:calc(100% - var(--sizeWidth));}
.row .con_wrap>.h5_title:first-child							{ margin-top:0; }
@media all and (max-width:1468px){
	.row														{--sizeWidth:200px; }			
}

@media all and (max-width:1368px){
	.row														{--sizeWidth:170px;margin-top:2.4em; }			
}

@media all and (max-width:1268px){
	.row														{flex-wrap:wrap;}
	.row .title_wrap										  {width:100%;}
	.row .con_wrap						 					{width:100%;}			
}