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

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

 								비주얼

**********************************************************************/
.visual																				{ position:relative; width:100%; height:0; padding-top:23.4375%; min-height:240px; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; }
.visual::before																		{ position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.6); content:''; z-index:1; }
.visual::after																		{ position:absolute; left:50%; bottom:0; width:1px; height:clamp(10%, 1vw + .5em, 15%); background:var(--color-white); content:''; z-index:1; }
.visual.bg1																			{ background-image:url(/resource/mahan/images/sub/bg_sub1.jpg); }
.visual.bg2																			{ background-image:url(/resource/mahan/images/sub/bg_sub2.jpg); }
.visual.bg3																			{ background-image:url(/resource/mahan/images/sub/bg_sub3.jpg); }
.visual.bg4																			{ background-image:url(/resource/mahan/images/sub/bg_sub4.jpg); }
.visual.bg5																			{ background-image:url(/resource/mahan/images/sub/bg_sub5.jpg); }
.visual.bg6																			{ background-image:url(/resource/mahan/images/sub/bg_sub6.jpg); }
.visual .con_inner																	{ position:absolute; top:50%; left:50%;  transform:translate(-50%,-20%); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; z-index:2}

.visual .text_wrap																	{ display:flex; flex-flow:column; width:100%; justify-content:center; align-items:center }
.visual .text_wrap .visual_title													{ position:relative; line-height:1; font-size:clamp(2em, 2vw + 1em, 2.81em); color:var(--color-white) }
.visual .text_wrap .sub_txt															{ color:var(--color-white); font-size:clamp(0.9em, 1vw + 0.5em, 1.09em); margin-top:clamp(.75em, 1vw + 0.5em, 1.25em); font-weight:300; line-height:1.2; }

/* 공유 */
.visual .page_util																	{ position:relative; z-index:3; display:flex; justify-content:center; align-items:center; --sizeHig:clamp(30px, 2vw + 20px, 40px);
    margin-top:clamp(1em, 1vw + 0.5em, 1.5em); gap:6px;  }
.visual .page_util>li																{ position:relative; }
.visual .page_util>li>button														{ display:flex; width:var(--sizeHig); height:var(--sizeHig); border-radius:100%; border:1px solid var(--color-white) }
.visual .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);}
.visual .page_util>li .share_bt:before												{ background-image:url(/resource/mahan/images/sub/ico_share.svg); background-size:16px; margin-top:-.5px}
.visual .page_util>li>button.copy:before											{ background-image:url(/resource/mahan/images/sub/ico_copy_link.svg);}
.visual .page_util>li>button.print:before											{ background-image:url(/resource/mahan/images/sub/ico_print.svg); background-size:17px 16px;}
.visual .page_util>li>button.braille:before											{ background-image:url(/resource/mahan/images/sub/ico_bx_link.svg); background-size:19px 10px;}
.visual .page_util>li>button.braille_down:before									{ background-image:url(/resource/mahan/images/sub/ico_bx_down.svg); background-size:21px 13px; background-position:50% 55%}
.visual .page_util>li.share .share_drop												{ display:none; position:absolute; top:-1px; left:-3px; z-index:10; width:calc(var(--sizeHig) + 6px); box-sizing:border-box; background-color:var(--color-white);
    border:1px solid #e5e5e5;  text-align:center; z-index:1 ; border-radius:25px;}
.visual .page_util>li.share .share_drop ul											{ padding-top:10px; display:flex; flex-flow:column; gap:7px; }
.visual .page_util>li.share .share_drop ul > li a									{ display:flex; justify-content:center; align-items:center; width:100%; height:100%;}
.visual .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%; }
.visual .page_util>li.share .share_drop ul > li[data-share="blog"] a:before			{ background-image:url(/resource/mahan/images/sub/icon_blog.svg); background-color:#32b44a;}
.visual .page_util>li.share .share_drop ul > li[data-share="youtube"] a:before		{ background-image:url(/resource/mahan/images/sub/icon_youtube.svg); background-color:#e03232;}
.visual .page_util>li.share .share_drop ul > li[data-share="facebook"] a:before		{ background-image:url(/resource/mahan/images/sub/icon_facebook.svg); background-color:#385691;}
.visual .page_util>li.share .share_drop ul > li[data-share="instar"] a:before		{ background:url(/resource/mahan/images/sub/icon_instar.svg) no-repeat 50% 50% / cover, linear-gradient(to bottom right, #4a48e8 20% , #ee3183 60%, #f0c05c 100%);}
.visual .page_util>li.share .share_drop ul > li[data-share="kakao"] a:before		{ background-image:url(/resource/mahan/images/sub/icon_kakaoch.svg); background-color:#ffde00; }
.visual .page_util>li.share .share_drop ul > li[data-share="twitter"] a:before		{ background-image:url(/resource/mahan/images/sub/icon_twitter.png); background-color:#000;}
.visual .page_util>li.share .share_drop ul > li[data-share="band"] a:before			{ background-image:url(/resource/mahan/images/sub/icon_band.png); background-color:#50b748;}
.visual .page_util>li.share .share_drop ul > li[data-share="copy"] a:before			{ background-image:url(/resource/mahan/images/sub/icon_copy.svg); background-color:#555555;}
.visual .page_util>li.share .share_close											{ position:relative; width:30px; height:30px; margin-top:10px; margin-bottom:5px; background:#e5e5e5; border-radius:100%;}
.visual .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); }
.visual .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);}
.visual .page_util>li.share .share_close:hover										{ transform:rotate(90deg); }


@media all and (max-width:1568px) {
    .visual .con_inner																{ transform:translate(-50%,-30%); }
}
@media all and (max-width:768px) {
    .visual .page_util>li .share_bt:before,
    .visual .page_util>li>button.print:before										{ background-size:auto 14px; }
    .visual .page_util>li>button.braille:before										{ background-size:auto 9px; }
    .visual .page_util>li>button.braille_down:before								{ background-size:auto 12px; }
}
/**********************************************************************

 								내용

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

/* 타이틀 */
h4.h4_title														{ position:relative; font-size:clamp(1.9em, 1vw + 1.5em, 2.38em); line-height:1; padding-top:clamp(1.5em, 1vw + 1.5em, 2.11em); text-align:center;  }
h4.h4_title::before												{ position:absolute; width:1px; height:clamp(1em, 1vw + .5em, 1.32em); left:50%; top:0; content:''; background:#000; }
h5.h5_title														{ position:relative; font-size:clamp(1.6em, 1vw + 1.3em, 2em); margin-bottom:.5em; margin-top:clamp(1.5em, 1vw + 1.3em, 2.19em)}
h5.h5_title::after												{ display:inline-block; margin-left:10px; width:clamp(2.5em, 1vw + 1.3em, 4.69em); height:1px; background:#000; content:''; }
h6.h6_title														{ position:relative;font-size: clamp(1.3em, 1vw + 1.3em, 1.5em);font-weight: 600;margin-bottom: .5em;margin-top: clamp(1.25em, 1vw + 1.3em, 2.75em);}

/* 위치 */
.location														{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:3px 0; --sizeHig:clamp(30px, 2vw + 20px, 40px); margin-top:clamp(0.5em, 1vw + 0.2em, 0.95em); }
.location>li													{ position:relative; font-size:clamp(0.9em, 1vw + 0.4em, 0.98em); }
.location [data-location="home"] a								{ display:flex; font-size:0px; width:var(--sizeHig); height:var(--sizeHig);}
.location [data-location="home"] a::before						{ content:''; display:block; width:100%; height:100%; background:url(/resource/mahan/images/sub/icon_home.svg) no-repeat 50% 50%; background-size:auto 15px; }
.location>li:nth-child(2)										{ margin-left:-3px; }
.location>li+li													{ padding-left:15px; margin-left:9px; }
.location>li+li::before											{ position:absolute; width:8px; height:1px; content:''; left:0; top:50%; background:#424242; transform:translateY(-50%); }



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

 								공통

**********************************************************************/
[data-subarea]													{ margin-top:clamp(2em, 2vw + 1em, 4em); }

/* 주의사항 */
.notandum														{ display:flex; gap:clamp(1em, 2vw + 0.5em, 3.13em); flex-wrap:wrap; align-items:center; border:1px solid #000; padding:clamp(1.5em, 1vw + 1em, 2.19em) clamp(1.5em, 1vw + 1.2em, 2.5em); }
.notandum .icon_notandum										{ position:relative; display:flex; width:clamp(3em, 2vw + 1em, 5em); height:clamp(3em, 2vw + 1em, 5em); border-radius:100%; background:#000; }
.notandum .icon_notandum::before								{ position:absolute; display:flex; width:100%; height:100%; align-items:center; justify-content:center; left:0; top:0; font-size:clamp(1.5em, 2vw + 1em, 2.5em); content:'!';
    color:var(--color-white); }
.notandum .not_list												{ flex:auto; max-width:calc(100% - clamp(3em, 2vw + 1em, 5em) - clamp(1em, 2vw + 0.5em, 3.13em)); display:flex; flex-flow:column; gap:.75em; }
.notandum .not_list>li											{ position:relative; width:100%; padding-left:1.11em; font-size:clamp(0.98em, 1vw + 0.5em, 1.13em); line-height:1.2; opacity:.84; }
.notandum .not_list>li::before									{ position:absolute; left:0; top:clamp(.02em, 1vw, 0.2em); width:clamp(12px, 2vw, 14px); height:clamp(11px, 2vw, 13px); background:url(/resource/mahan/images/sub/icon_ex.svg) no-repeat 50% 50% / auto;
    content:''; }
.notandum .not_list>li.none_before								{ padding-left:0; opacity:1; font-weight:bold }
.notandum .not_list>li.none_before::before						{ display:none; }

.basic_p														{font-size: 1.167em;}
.basic_btn														{text-align:center;margin-top: clamp(1.25em, 1vw + 1.3em, 2.75em);}
.basic_btn a													{background:#000;display:inline-block;vertical-align:middle;padding:1.2em 1.6em;line-height:1;color:#fff;font-size: 1.167em;transition:var(--trans-ani);}
.basic_btn a:focus,
.basic_btn a:hover												{padding:1.2em 2.2em;}
.basic_btn a::after												{content:'';display:inline-block;vertical-align:middle;width:18px;height:18px;margin-left:.5em;margin-top:-2px;}
.basic_btn a.download::after									{background:url(/resource/mahan/images/sub/icon_down.svg) no-repeat center center / 100%;}

@media all and (max-width:1668px) {
  #boardWrap													{ width:94%; }
}

@media all and (max-width:1368px) {
  .basic_p														{font-size: 1.13em;}
  .basic_btn a													{font-size: 1.13em;padding:1em 1.4em;}
  .basic_btn a:focus,
  .basic_btn a:hover											{padding:1em 2em;}
  .basic_btn a::after											{width:16px;height:16px;}
}

@media all and (max-width:1268px) {
  .basic_p														{font-size: 1.1em;}
  .basic_btn a													{font-size: 1.1em;}
}

@media all and (max-width:1168px) {
  .basic_p														{font-size: 1.067em;}
  .basic_btn a													{font-size: 1.067em;padding:1em 1.2em;}
  .basic_btn a:focus,
  .basic_btn a:hover											{padding:1em 1.6em;}
  .basic_btn a::after											{width:14px;height:14px;}
}


@media all and (max-width:414px) {
    .notandum													{ flex-flow:column; }
    .notandum .not_list											{ flex:100%; max-width:inherit; }
}