@charset "utf-8";
@import url(notosanskr.css);
@import url('//cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

body{font-family: 'Noto Sans KR',sans-serif; font-size: 16px; overflow-x: hidden; box-sizing: border-box;}
@media screen and (max-width:1080px) {
    body{font-size: 15px;}
}
@media screen and (max-width:767px) {
    body{font-size: 14px;}
}
@media screen and (max-width:411px) {
    body{font-size: 13px;}
}
#wrap{position: relative; min-width: 280px; overflow-x: hidden;}
.nanum_ft{ font-family: 나눔스퀘어, 'NanumSquare', sans-serif; }
.noto_ft{font-family: 'Noto Sans KR',sans-serif;}

.header{ position: absolute; width: 100%; height: 9.37em; z-index: 9999;}
.header.fixed .header_inner .menu_all_btn{ position: fixed !important; top: 8%; right: 5%; animation: headerFixed 0.4s; -webkit-animation: headerFixed 0.4s; }
@keyframes headerFixed{
	0% {-webkit-transform:translateY(-100%); transform:translateY(-100%)}
    100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
.header_inner{width: 100%; height: 100%; margin: 0 auto;}
.header_inner > .guide{ width: 90%; height: 100%; max-width: inherit;}
.header_inner .logo{ width: 45%; max-width: 200px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; max-width: 200px;}
.header_inner .logo a{display: block; width: 100%;}
.header_inner .logo a img{display: block; width: 100%;}
.header_inner .mask{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 998; background-color: rgba(34, 34, 34, 0.5);}


.header_inner .menu_all_btn{position: absolute; top: 31%; right: 0; display: flex; align-items: center; width: 8.75em; padding: 1.25em 1.25em 1.1em; background-color: #fff; border-radius: 1.25em; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); cursor: pointer;}
.header_inner .menu_all_btn .menutxt{ width: 80%; float: left; font-size: 1.25em; color: #444; font-weight: 900;}
.header_inner .menu_all_btn .icon{float: left; width: 20%; display: flex; align-items: flex-end; flex-direction: column; }
.header_inner .menu_all_btn .icon .icon_bar{display: block; height: 4px; width: 16px; background-color: #444;}
.header_inner .menu_all_btn .icon .bottom_bar{width: 20px; margin-top: 4px;}


/* com_btn */

.com_btn { display: inline-block; text-align: center; width: 100%; }
.blue_btn{background-color: #17519a;}
.bk_btn{ background-color: #222;}
.com_btn .btn { display: inline-block; padding: 1em 1.45em; font-size: 1.25em; color: #fff; font-weight: 500; border-radius: 1.56em;  box-sizing: border-box;}
.com_btn .btn::after{    content: "\e603"; font-family: 'xeicon'; display: inline-block; color: #fff; vertical-align: -2px; margin-left: 12px;}

.com_down_btn .btn{ padding: 0.78em 2.8em; border-radius: 1.25em;}
.com_down_btn .btn::after{content: "\e651"; vertical-align: -1px;}



/* footer */
.footer{background-color: #333; width: 100%; position: relative;padding: 2.5em 0; z-index: 1;}
.footer .f_txt{display: inline-block; width: 80%; color: #fff; font-size: 0.87em; line-height: 1.85em; word-break: keep-all;} 
.footer .f_txt span{color: #949494;}
.footer .f_txt .mob_br{display: none;}
.footer .family_site{float: right; position: relative; z-index: 10; font-size: 0.87em; background-color: #333; border: 1px solid #4fafda; border-radius: 1.42em;}

.footer .family_site span{display: inline-block; position: relative; color: #4fafda; padding: 10px 12px; z-index: 10;}
.footer .family_site span::after{ content:"\e60e"; font-family: 'xeicon'; display: inline-block; line-height: 1.35em; color: #4fafda; vertical-align: middle; margin-left: 4.85em; }
.footer .family_site .family_list{ display: none; width: 100%; position: absolute; bottom: calc(100% - 10px); left: -1px; background-color: #333; border: 1px solid #4fafda; border-bottom: none; padding-bottom: 20px; z-index: 1; border-radius: 1.42em 1.42em 0 0; }
.footer .family_site .family_list li a{display: block; padding: 10px 12px; color: #4fafda; box-sizing: border-box;}
.footer .family_site.on { border-radius: 0 0 1.4em 1.4em; }
.footer .family_site.on .family_list{display: block; padding: 1em 0;}
.footer .family_site.on span::after{content:"\e619";}

@media screen and (max-width:1080px) {
    .footer .family_site{float: none; width: 17.33em; font-size: 1em; margin: 1em auto 0;}
    .footer .family_site button{display: block; width: 100%; text-align: left;}
    .footer .family_site span{padding: 10px 1em; box-sizing: border-box; width: 100%; display: block;}
    .footer .family_site span::after{position: absolute; top: 50%; right: 1em; transform: translateY(-50%);}
    .footer .f_txt{display: block; width: 100%; text-align: center;}
    .footer .family_site .family_list{padding-bottom: 0; }
    .footer .family_site.on .family_list{padding: 0 0 1.2em;}
    .footer .family_site .family_list li a{display: block; padding: 15px 1em;}
}

@media screen and (max-width:920px) {
    .footer .f_txt .mob_br{display: block;}
}
@media screen and (max-width:460px) {
    .footer .f_txt br{display: none;}
}

/* WCAG 2.1 1.3.1 / 4.1.2 시각적 숨김 표준 패턴 (WebAIM / TPGi / Bootstrap 4 industry-settled) — Phase 18 sr-only H1 도입 (HEAD-02) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}