@charset "utf-8";
/* CSS Document */
.content														{ margin-top:3.75em;  margin-bottom:4.38em; }
@media all and (max-width:1168px){
	.content													{ margin-top:3.5em;  margin-bottom:3.8em; }
}
@media all and (max-width:968px){
	.content													{ margin-top:3.25em;  margin-bottom:3.4em; }
}
@media all and (max-width:768px){
	.content													{ margin-top:3em;  margin-bottom:3.1em; }
}
@media all and (max-width:568px){
	.content													{ margin-top:2.75em;  margin-bottom:2.8em; }
}
@media all and (max-width:368px){
	.content													{ margin-top:2.5em;  margin-bottom:2.5em; }
}

#boardWrap														{font-weight:400;}

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

						비주얼
 
************************************************************/
.visual															{ position:relative; width:94%; height:var(--sizeHig); --sizeHig:220px; margin:0 auto; border-radius:0 20px 20px 0;  background:#e4f1fd; z-index:-1;  }
.visual::before													{ position:absolute; z-index:-1; width:10%; height:var(--sizeHig); left:-6%; top:0; background:#e4f1fd; content:''; }
.visual .con_inner												{ width:100%; display:flex; justify-content:center; flex-flow:column; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; }
.bg1 .con_inner													{ background-image:url(/resource/reserve/images/sub/bg_sub1.png); }
.bg2 .con_inner													{ background-image:url(/resource/reserve/images/sub/bg_sub2.png); }
.bg3 .con_inner													{ background-image:url(/resource/reserve/images/sub/bg_sub3.png); }
.bg4 .con_inner													{ background-image:url(/resource/reserve/images/sub/bg_sub4.png); }
.bg5 .con_inner													{ background-image:url(/resource/reserve/images/sub/bg_sub5.png); }
.bg6 .con_inner													{ background-image:url(/resource/reserve/images/sub/bg_sub6.png); }
.bg7 .con_inner													{ background-image:url(/resource/reserve/images/sub/bg_sub7.png); }
.bg8 .con_inner													{ background-image:url(/resource/reserve/images/sub/bg_sub1.png); }
.bg9 .con_inner													{ background-image:url(/resource/reserve/images/sub/bg_sub2.png); }
.bg10 .con_inner												{ background-image:url(/resource/reserve/images/sub/bg_sub3.png); }
.visual .con_inner h2											{ font-size:2.38em; font-weight:500; color:var(--color-point); line-height:1 }
.visual .con_inner span											{ display:flex; font-size:.94em; line-height:1.3; margin-top:1em; }
@media all and (max-width:1768px){
	.visual														{ width:96%; padding-left:1%  }	
	.visual .con_inner											{ border-radius:0 20px 20px 0; overflow:hidden }									
}
@media all and (max-width:1668px){
	.visual .con_inner											{ background-position:3em 50%; }
	.visual .con_inner h2										{ font-size:2.28em }
}
@media all and (max-width:1568px){
	.visual .con_inner h2										{ font-size:2.18em }
}
@media all and (max-width:1468px){
	.visual .con_inner h2										{ font-size:2.08em }
}
@media all and (max-width:1368px){
	.visual .con_inner h2										{ font-size:2em }
}
@media all and (max-width:1268px){
	.visual .con_inner h2										{ font-size:1.9em }
}
@media all and (max-width:1168px){
	.visual														{ --sizeHig:210px;}
	.visual .con_inner h2										{ font-size:1.8em }
	.visual .con_inner span										{ font-size:.9rem; }
}
@media all and (max-width:1068px){
	.visual .con_inner h2										{ font-size:1.7em }
	.visual .con_inner span										{ font-size:.9rem; }
	.visual .con_inner											{ background-position:10% 50%; }
}
@media all and (max-width:968px){
	.visual														{ --sizeHig:200px;}
	.visual .con_inner h2										{ font-size:1.6em }
	.visual .con_inner span										{ padding-right:45%; }
}
@media all and (max-width:768px){
	.visual														{ --sizeHig:190px;}
	.visual .con_inner											{ background-position:20% 50%; }
}
@media all and (max-width:568px){
	.visual														{ --sizeHig:180px;}
	.visual .con_inner h2										{ font-size:1.5em }
	.visual .con_inner span										{ font-size:.8rem; }
	.visual .con_inner											{ background-position:25% 50%; }
}
@media all and (max-width:468px){
	.visual														{ --sizeHig:170px;}
}
@media all and (max-width:368px){
	.visual														{ --sizeHig:150px;}
}
/* 위치 */
.lnb_wrap														{ margin-top:-30px; background:var(--color-point); border-radius:10px; display:flex; align-items:center; z-index:2; --sizeHig:60px; --sizeBtn:35px; justify-content:space-between;}
.lnb_wrap .lnb													{ position:relative; display:flex; align-items:center; }
.lnb_wrap .lnb>li												{ position:relative;  transition:var(--trans-ani); border-right:1px solid rgba(255,255,255,.2);}
.lnb_wrap .lnb [data-lnb="home"] > a							{ display:flex; justify-content:center; align-items:center; height:var(--sizeHig); width:var(--sizeHig);}
.lnb_wrap .lnb [data-lnb="home"] > a:before						{ content:''; display:block; width:19px; height:20px; background:url(/resource/reserve/images/sub/icon_home.svg) no-repeat 50% 50%; background-size:100%; }
.lnb_wrap .lnb>li:not([data-lnb="home"])						{ min-width:220px; box-sizing:border-box; }
.lnb_wrap .lnb>li button										{ position:relative; display:flex;width:100%; height:var(--sizeHig);  align-items:center; text-align:left; color:var(--color-white); font-size:1em; transition:var(--trans-ani); 
																	font-weight:500; padding:0 25px;}											
.lnb_wrap .lnb>li button>span									{ margin-right:50px; }
.lnb_wrap .lnb>li button.active									{ background-color:var(--color-white); color:var(--color-base); border-style:solid; border-color:var(--color-point); border-width:1px 0 0 0; }
.lnb_wrap .lnb>li button::before   								{ position:absolute; width:9px; height:9px; top:50%; content:''; right:25px; border-style:solid; border-width:0 1px 1px 0; border-color:var(--color-white);
																	transform:translateY(-80%) rotate(45deg); transition:var(--trans-ani);}																	
.lnb_wrap .lnb>li button.active::before 						{ border-color:var(--color-point); transform:translateY(-40%) rotate(225deg);}
.lnb_wrap .lnb>li>div											{ position:absolute; display:none; left:-1px; top:var(--sizeHig); z-index:112; width:calc(100% + 2px); padding:20px 25px; background:var(--color-white); border:1px solid #4657a7; 
																	border-top-color:rgba(0,0,0,.2) }
.lnb_wrap .lnb>li ul											{ display:flex; flex-flow:column }
.lnb_wrap .lnb>li ul > li > a									{ display:inline-flex; justify-content:flex-start; align-items:center; padding:3px 0px; color:#666; transition:color var(--trans-ani);word-break:break-all; font-size:.95em}
.lnb_wrap .lnb>li ul > li a[target="_blank"]:after				{ content:''; opacity:0.5; display:inline-block; width:16px; height:16px; margin-left:7px; background:url(/resource/common/images/common/icon_newtab.svg) no-repeat 50% 50%; 
																		background-size:100%; vertical-align:middle; transition:opacity var(--trans-ani); filter:invert(0%) sepia(93%) saturate(0%) hue-rotate(235deg) brightness(107%) contrast(107%);}
.lnb_wrap .lnb>li ul > li a[target="_blank"]:hover:after		{ opacity:1;}
.lnb_wrap .lnb>li ul > li > a:hover								{ color:var(--color-point); }




/* 공유 */
.lnb_wrap .page_util											{ position:relative; display:flex; align-items:center;  }
.lnb_wrap .page_util>li											{ position:relative; border-left:1px solid rgba(255,255,255,.2); }
.lnb_wrap .page_util>li>button									{ display:flex; width:var(--sizeHig); height:var(--sizeHig); }
.lnb_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%; }
.lnb_wrap .page_util>li .share_bt:before						{ background-image:url(/resource/reserve/images/sub/icon_share.svg); background-size:19px 20px; margin-top:-.5px;}
.lnb_wrap .page_util>li>button.copy:before						{ background-image:url(/resource/reserve/images/sub/icon_copy_link.svg);}
.lnb_wrap .page_util>li>button.print:before						{ background-image:url(/resource/reserve/images/sub/icon_print.svg); background-size:20px 20px;}
.lnb_wrap .page_util>li>button.braille:before					{ background-image:url(/resource/reserve/images/sub/icon_bx_link.svg); background-size:26px 14px;}
.lnb_wrap .page_util>li>button.braille_down:before				{ background-image:url(/resource/reserve/images/sub/icon_bx_down.svg); background-size:26px 18px; background-position:50% 55%}
.lnb_wrap .page_util>li.share .share_drop						{ display:none; position:absolute; top:0; left:-1px; 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:0 0 10px 10px;}																								
.lnb_wrap .share_drop ul										{ padding-top:10px; display:flex; flex-flow:column; justify-content:center; align-items:center;gap:7px; }
.lnb_wrap .share_drop ul > li a									{ display:flex; justify-content:center; align-items:center; width:var(--sizeBtn); height:var(--sizeBtn)}
.lnb_wrap .share_drop ul > li[data-share] a:before				{ content:''; display:block; width:100%; height:100%; background-repeat:no-repeat;
																		 background-position:50% 50%; background-size:auto 100%; border-radius:100%;}
.lnb_wrap .share_drop ul > li[data-share="blog"] a:before		{ background-image:url(/resource/reserve/images/sub/icon_blog.svg); background-color:#32b44a;}
.lnb_wrap .share_drop ul > li[data-share="youtube"] a:before	{ background-image:url(/resource/reserve/images/sub/icon_youtube.svg); background-color:#e03232;}
.lnb_wrap .share_drop ul > li[data-share="facebook"] a:before	{ background-image:url(/resource/reserve/images/sub/icon_facebook.svg); background-color:#385691;}
.lnb_wrap .share_drop ul > li[data-share="instar"] a:before		{ background:url(/resource/reserve/images/sub/icon_instar.svg) no-repeat 50% 50% / cover, linear-gradient(to bottom right, #4a48e8 20% , #ee3183 60%, #f0c05c 100%);}
.lnb_wrap .share_drop ul > li[data-share="kakao"] a:before		{ background-image:url(/resource/reserve/images/sub/icon_kakaoch.svg); background-color:#ffde00; }
.lnb_wrap .share_drop ul > li[data-share="twitter"] a:before	{ background-image:url(/resource/reserve/images/sub/icon_twitter.png); background-color:#000;}
.lnb_wrap .share_drop ul > li[data-share="band"] a:before		{ background-image:url(/resource/reserve/images/sub/icon_band.png); background-color:#50b748;}
.lnb_wrap .share_drop ul > li[data-share="copy"] a:before		{ background-image:url(/resource/reserve/images/sub/icon_copy.svg); background-color:#555555;}
.lnb_wrap .page_util > li.share .share_close					{ position:relative; width:var(--sizeBtn); height:var(--sizeBtn); margin-top:10px; margin-bottom:5px; background:#e5e5e5;
																		 border-radius:100%;}
.lnb_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); }
.lnb_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);}
.lnb_wrap .page_util > li.share .share_close:hover				{ transform:rotate(90deg); }

@media all and (max-width:1568px){
	.lnb_wrap													{ margin-top:-29px; --sizeHig:58px; --sizeBtn:33px; }
	.lnb_wrap .lnb>li:not([data-lnb="home"])					{ min-width:210px; }
	.lnb_wrap .lnb [data-lnb="home"] > a:before					{ width:15px; height:16px; }
	.lnb_wrap .lnb>li button									{ font-size:.95rem; padding:0 20px }
	.lnb_wrap .lnb>li button>span								{ padding-right:30px; }
	.lnb_wrap .lnb>li ul > li > a								{ font-size:.9rem; }
	.lnb_wrap .lnb>li>div										{ padding:15px 20px; }
}
@media all and (max-width:1468px){
	.lnb_wrap													{ margin-top:-28px; --sizeHig:56px; --sizeBtn:31px; }
	.lnb_wrap .lnb>li:not([data-lnb="home"])					{ min-width:200px; }
	.lnb_wrap .lnb>li button									{ padding:0 15px }
	.lnb_wrap .lnb>li button>span								{ padding-right:20px; }
	.lnb_wrap .lnb>li>div										{ padding:10px 15px; }
	.lnb_wrap .page_util>li .share_bt:before,
	.lnb_wrap .page_util>li>button.print:before					{ background-size:auto 18px; }
	.lnb_wrap .page_util>li>button.braille:before				{ background-size:auto 12px; }
	.lnb_wrap .page_util>li>button.braille_down:before			{ background-size:auto 16px; }
}
@media all and (max-width:1168px){
	.lnb_wrap .lnb>li:not([data-lnb="home"]):not(:last-child)	{ display:none; }
	.lnb_wrap													{ margin-top:-27px; --sizeHig:54px; --sizeBtn:29px; }
}
@media all and (max-width:668px){
	.lnb_wrap													{ margin-top:-25px; --sizeHig:50px; }
	.lnb_wrap .lnb>li button									{ font-size:.9rem; padding:0 10px;}
	.lnb_wrap .lnb>li button>span								{ padding-right:0; margin-right:15px; max-width:6em; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
	.lnb_wrap .lnb>li button::before							{ right:10px; width:7px; height:7px; }
	.lnb_wrap .lnb>li:not([data-lnb="home"])					{ min-width:inherit; }
	.lnb_wrap .lnb>li>div										{ padding:10px; }
	.lnb_wrap .lnb>li ul > li > a								{ font-size:.8rem }
}
@media all and (max-width:468px){
	.lnb_wrap													{ margin-top:-24px; --sizeHig:48px;position:relative; }
  	.lnb_wrap .page_util										{position: absolute;bottom: 7px;right: 7px;gap: 6px;flex-flow: column;flex-direction: column-reverse;}
  	.lnb_wrap .page_util>li										{border-left:none;}
  	.lnb_wrap .page_util>li.share								{padding-top:7px;}	
  	.lnb_wrap .page_util>li>button								{background: var(--color-white);width:calc(var(--sizeHig) - 12px);height:calc(var(--sizeHig) - 12px);border-radius: 8px;}
  	.lnb_wrap .page_util>li>button:before						{filter: brightness(88%) contrast(98%) invert(1) sepia(90%) saturate(2952%) hue-rotate(195deg);}
  	.lnb_wrap .page_util>li .share_bt:before,
	.lnb_wrap .page_util>li>button.print:before					{ background-size:auto 16px; }
	.lnb_wrap .page_util>li>button.braille:before				{ background-size:auto 10px; }
	.lnb_wrap .page_util>li>button.braille_down:before			{ background-size:auto 14px; }
  	.lnb_wrap .page_util>li.share .share_drop					{top: 7px;width:calc(var(--sizeHig) - 12px + 2px);border-radius:10px;}
}

@media all and (max-width:368px){
    .lnb_wrap .page_util										{gap: 4px;}
}