@import './common.css';
/* 홈페이지 기본설정 */
.italic{font-style: italic;} 
@media (max-width:1520px) { /* 기본 레이아웃 1500PX로 설정 */
    .container{width:90%;margin:auto;}
    .section-left  {padding-left : 5%}
    .section-right {padding-right: 5%}
}

/* ==================> Header <================== */
.header{position: fixed;top: 0;left: 0;width: 100%;z-index: 99;--navH:30rem}
.header a{color: #fff;line-height: 1.2;padding:1em 0.3em;text-align: center;display: block;}
.header .inner{padding:0 1em}
.header .logo{filter: brightness(0) invert(1); max-width:128px;width:11em}
.header .m-icon{width:3.5em}

.header .nav{width:80%;display: table;}
.header .nav > li{flex:1;position: relative; display: table-cell;vertical-align: middle;}
.header .nav > li:hover > a{font-weight: 800;}
.header .submenu{display:none;position: absolute; width: 100%;padding:1.5em 0;bottom:0;transform:translateY(100%);height: var(--navH)}
.header .submenu > li:hover > a{font-weight: 800; color:var(--pointcolor)}

@media(min-width:1241px) {
    .header .submenu > li.txt > a {font-weight: 800; cursor: default;}
    .header .submenu > li.txt:hover > a {color: #000;}
}

.header .aside a:hover{filter: invert(1);}
.header .nav-dim{display: none;width: 100%;background: #f7f7f7;border-top: 1px solid #eee; height: var(--navH); position: relative; z-index: -1;}
.header .nav-dim .inner{display: flex;height: 100%;align-items: flex-end;padding-bottom: 2em;}
.header .nav-dim .tellTag{padding: 1em; color: #6d6e70;border:1px solid #ccc; display: inline-block;width:100%}
.header .nav-dim .leftbox{height: var(--navH); display: flex; flex-direction: column; justify-content: space-between; padding: 1.5em 1em}
.header .nav-dim .leftbox img {max-width:12em; width:80%}
.header .nav-dim .rightbox{padding: 1.5em 1em}
.header .nav-dim .rightbox img {max-width:10em; width:90%;margin-left:auto}
/* scroll & active */
.header:hover,.header.active{background: #fff; box-shadow: 0 0 0.5em rgba(0,0,0,0.1);}
.header:hover a,.header.active a{color: #000;}
.header:hover .logo,.header.active .logo{filter: none;}
.header:hover .m-icon, .header.active .m-icon{filter:brightness(0)}

/* 게시판 Header */
.boardPage .header,.header.active{background: #fff; box-shadow: 0 0 0.5em rgba(0,0,0,0.1);}
.boardPage .header a,.header.active a{color: #000;}
.boardPage .header .logo,.header.active .logo{filter: none;}
.boardPage .header .m-icon, .header.active .m-icon{filter:brightness(0)}

.boardPage .boardTop{padding-top:10em}


/* ==================> Sitemap <================== */
.sitemap{left:-100%;position: fixed;top: 0;width: 100%;overflow: hidden;bottom: 0;background-color: #fff;z-index: 999;transition:left 0.5s}
.sitemap.on{left:0}

.sitemap .st_head{padding: 1em 1.5em;display: flex;justify-content: space-between;border-bottom: 1px solid rgba(255,255,255,0.2);align-items: center;}
.sitemap .st_head .logo{width: 11em;}
.sitemap .st_head .st-close{position: relative;width:2.5em;padding:0.5em}
.sitemap .st_head .st-close:before,.sitemap .st_head .st-close:after{content:'';height: 1px;width:1.2em}

.sitemap .st_menu{width: 50%;height: 100%;padding: 2em 1.5em;padding-right: 0;position: relative;}
.sitemap .st_menu > li > a{padding:0.5em;padding-left:0;display:block; color: #888; transition :all 0.2s;font-size:1.5em}
.sitemap .st_menu > li.active > a{font-size:1.3em;color: #000;font-size:2em}

.sitemap .st_menu .submenu{background: var(--pointcolor);position: absolute; width: 100%;height: 100%; ;right: -100%;top: 0;padding: 3em 2em 1.5em ;padding-right: 0;display: none;}
.sitemap .st_menu .submenu > li > a {display: block;color: #fff;padding:0.5em;font-size:1.3em}
.sitemap .tellTag{ width:50%;padding: 1.5em; color: #6d6e70;position: absolute;bottom: 0;left: 0; }
.sitemap .tellTag p { font-size: 1.3em; }
.sitemap .tellTag .certify { margin-bottom: 3em; font-size: 1.2em; }
.sitemap .tellTag .certify p { color: #34bdb3; padding: 0.25em 0; }


/* ============> quick <============ */
.quick { position: fixed; z-index: 99; font-size: 1rem; right: 1.5rem; bottom: 3rem; } 
.quick a {display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; } 

@media (min-width:991px) {
    .quick .q_list{display: none;}
    .quick .q_menu { position: relative; margin-bottom: 5px; border-radius: 50%; background: #0c0c0c; box-shadow:0 0 1em rgba(0,0,0,0.15) ;transition:background 0.2s} 
    .quick .q_menu .name {position: absolute; padding: 0.5em 1em; width:7em;border-radius: 2em; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); transition:backgaround 0.2s;background: #0c0c0c; color:white} 
    .quick .q_list .q_menu:hover,.quick .q_list .q_menu:hover .name { background-color: var(--pointcolor);} 
    
    .quick .q_top {background: var(--pointcolor);} 
    .quick .q_open {transform: rotate(0);transition: transform 0.3s} 
    .quick .q_open.on {transform: rotate(45deg);}
}
@media (max-width:990px) {
    .quick {bottom:7.5rem}
    .quick .q_list{position: fixed;left: 0;bottom: 0;display: flex;width:100%; border-top:1px solid #eee}
    .quick .q_list .q_menu{flex:1;padding:1em 0.5em;background:#fff;border-left:1px solid #eee}
    .quick .q_list .q_menu + .q_menu{border-left:1px solid #eee}
    .quick .q_list .q_menu a {display: block;width:100%;height: auto;} 
    .quick .q_list .q_menu img {filter: brightness(0.5);margin:0 auto 6px;max-width:30%}

    .quick .q_list .q_menu:hover{background:var(--pointcolor);border-color:transparent;}
    .quick .q_list .q_menu:hover a{color: #fff;}
    .quick .q_list .q_menu:hover img{filter: none}

    .quick .q_top {background:#fff; border-radius: 50%; box-shadow:0 0 1em rgba(0,0,0,0.15) ;transition:background 0.2s} 
}

/* ==================> Footer <================== */
.footer a{color: #737373;}
.footer a+a{margin-left:2.5em}
.footer .f-logo{max-width:30%}
@media (max-width:990px) {
    .footer {padding-bottom:10rem} /* 퀵메뉴로 인한 여백 */
    .footer .f-link{text-align: left;}
}

/* ============> kakao 지도 <============ */
.kakaomap{width: 100% !important; height: 100% !important; margin: 0 auto !important; padding: 0 !important;border: 0 !important;}

/* 이부분은 맵 잡다한 부분 삭제처리 */
.root_daum_roughmap .wrap_btn_zoom{z-index: 1}
.root_daum_roughmap .wrap_controllers {display: none}
.root_daum_roughmap .wrap_map{height: 100% !important;}