@charset "UTF-8";
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*
* css는 유료테마 ASKTHEME의 일부입니다. 불법복제시 불이익을 받을 수 있습니다.
* Header_1
*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.js-hiraku-offcanvas-active { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100001; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); }

.js-hiraku-offcanvas-open { display: block; }

.js-hiraku-offcanvas-body { width: 100%; left: 0; transition: left 0.3s ease-in-out; z-index: 0; }

.js-hiraku-offcanvas-body-right { overflow-y: hidden; left: -70%; position: fixed; }

.js-hiraku-offcanvas-body-left { overflow-y: hidden; left: 70%; position: fixed; }

.js-hiraku-offcanvas-body-moving { left: 0; position: fixed; }

.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar { display: block; width: 70%; z-index: 10002; position: fixed; top: 0; bottom: 0; max-width: 100%; background-color: #495057; overflow-y: scroll; -webkit-overflow-scrolling: touch; box-sizing: border-box; }

.js-hiraku-offcanvas:focus { background-color: rgba(0, 0, 0, 0.3); }

.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar-right { right: 0; left: auto; margin-right: -70%; transition: margin-right 0.3s ease-in-out; }

.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar-left { left: 0; right: auto; margin-left: -70%; transition: margin-left 0.3s ease-in-out; }

.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar-right.active { margin-right: 0; transition: margin-right 0.3s ease-in-out; }

.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar-left.active { margin-left: 0; transition: margin-left 0.3s ease-in-out; }

.js-hiraku-header-fixed { transition: margin-left 0.3s ease-in-out; position: fixed; top: 0; left: 0; width: 100%; }

.js-hiraku-offcanvas-body-right, .js-hiraku-offcanvas-body-left { overflow: hidden; }

.js-hiraku-offcanvas-body-right .js-hiraku-header-fixed { margin-left: -70%; }

.js-hiraku-offcanvas-body-left .js-hiraku-header-fixed { margin-left: 70%; }

.js-hiraku-offcanvas-close-btn { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }

.hiraku-open-btn { background: transparent; border: 1px solid #ccc; padding: 6px; cursor: pointer; border-radius: 3px; }

.hiraku-open-btn-line { display: block; position: relative; width: 18px; height: 2px; margin: 6px 0; background-color: #fff; border-radius: 1px; transition: .1s all; }

.hiraku-open-btn-line:before, .hiraku-open-btn-line:after { content: ""; display: block; position: absolute; background-color: #dee2e6; width: 100%; height: 2px; border-radius: 1px; transition: .3s all; }

.hiraku-open-btn-line:before { top: -6px; }

.hiraku-open-btn-line:after { bottom: -6px; }

[aria-expanded="true"] .hiraku-open-btn-line { background-color: transparent; }

[aria-expanded="true"] .hiraku-open-btn-line:before, [aria-expanded="true"] .hiraku-open-btn-line:after { width: 22px; }

[aria-expanded="true"] .hiraku-open-btn-line:before { transform: translate(-2px, 6px) rotate(45deg); }

[aria-expanded="true"] .hiraku-open-btn-line:after { transform: translate(-2px, -6px) rotate(-45deg); }

/*# sourceMappingURL=hiraku.css.map */