#wrap {padding-top: 5.5rem;min-height: 100vh;width: 100%;}
#wrap.index {padding: 2rem;position: relative;display: flex;justify-content: center;align-items: center;background: url(../img/index.png) no-repeat center / cover;}
#wrap.index img {width: 50%;margin-bottom: 30%;max-width: 500px;}
#wrap.index a {position: absolute;left: 2rem;bottom: 2rem;font-size: 1.6rem;font-weight: bold;color: #fff;display: flex;justify-content: center;align-items: center;width: calc(100% - 4rem);height: 5rem;background-color: #8c8886;}
#wrap.home {padding-top: 0;}

header {display: flex;justify-content: space-between;align-items: center;height: 5.5rem;width: 100%;position: fixed;left: 0;top: 0;padding: 0 2rem;background-color: #fff;z-index: 100;}
header .prev, header .open {height: 3rem;width: 3rem;}
header .logo {height: 2rem;width: fit-content;}
header .open {background: url(../img/ham.png) no-repeat center / 2.5rem;}
header .black {background: url(../img/ham_black.png) no-repeat center / 2.5rem;}
header .prev {background: url(../img/prev.png) no-repeat 0 center / 2rem;}
header h1 {font-size: 1.6rem;font-weight: bold;}
header.home {background-color: transparent;border: none;}
header.color {background-color: #1e1e1e;}

.bannerImg {
    width: 100%;
    padding: 1.5rem 0;
}
.bannerImg a {
    width: 100%;
}
.bannerImg a img {
    width: 100%;
}

.intro_wrap {display: flex;justify-content: center;flex-direction: column;padding: 2rem;min-height: 80vh;background: url(../img/index.png) no-repeat center / cover;}
.intro_wrap img {width: 80%;max-width: 500px;}



.content {padding: 2rem;}
.content h2 {font-size: 2.4rem;font-weight: 900;color: #5c5c5c;margin: 2rem 0 1rem;}
.content h3 {font-size: 1.6rem;color: #5c5c5c;margin-bottom: 2rem;}
.content a {display: block;border-radius: 2.5rem;margin-bottom: 2rem;box-shadow: .1rem .5rem 1rem rgba(0, 0, 0, .1);}
.content a img {width: 100%;}



/* 햄버거 */
nav .inner {transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1);background-color: #1e1e1e;display: flex;justify-content: space-between;flex-direction: column;overflow-y: scroll;position:fixed;z-index: 1000;height:100%;width:100%;right:-100%;top:0;}
nav .outer {background-color:rgba(0, 0, 0, .5);min-height: 100vh;position:fixed;width:100%;left:0; top:0;z-index: 999;display: none;}
nav.on .inner {display: flex;right: 0;}
nav.on .outer {display: block;}
.nav_header {display: flex;justify-content: space-between;align-items: center;padding:2rem;}
.nav_header .close {width:2.4rem;height:2.4rem;margin-right: .5rem;background:url('../img/close.png') no-repeat center/contain;}
.nav_header a img {height: 1.8rem;}
nav .navtoggles {padding: 0 2rem;font-size: 1.8rem;font-weight: 500;display: block;color: #fff;width: 100%;}
nav .navtoggles .navtoggle_title {padding: 1.5rem 4rem 1.5rem 0;color: #aaa;font-weight: 800;font-size: 1.7rem;background: url(../img/arrow_down.png) no-repeat calc(100% - 1rem) center / 1.5rem;color: #fff;}
nav .navtoggles .navtoggle_title.arrow {background: url(../img/arrow_down.png) no-repeat calc(100% - 1rem) center / 1.5rem;color: #fff;}
nav .navtoggles .navtoggle_content a {padding: 1.5rem 4rem 1.5rem 0 ;color: #e6e6e6;font-size: 1.4rem;display: none;width: 100%;background: url(../img/arrow_next.png) no-repeat calc(100% - 1rem) center / .7rem;}
nav .navtoggles.open .navtoggle_content a {display: flex;}
nav .outlink {display: flex;align-items: center;width: calc(100% - 4rem);padding: 1.5rem;font-size: 1.6rem;font-weight: bold;color: #fff;margin: 2rem;background: #8c8c8c url(../img/banner_arrow.png) no-repeat calc(100% - 1.5rem) center / 2rem;}



/* qna */
.qna_wrap {padding: 2rem;}
.qna_wrap h2 {font-size: 2.2rem;font-weight: 900;color: #1a252c;margin-bottom: 2rem;line-height: 1.4;}
.qna_wrap .box.open .opener {background: #f1f1f1 url(../img/qna_up.png) no-repeat calc(100% - 1.5rem) center / 1.5rem;}
.qna_wrap .box.open .opened {display: block;background-color: #f1f1f1;}
.qna_wrap .box .opener {font-size: 1.6rem;font-weight: 800;line-height: 1.6;padding: 1.2rem 4rem 1.2rem 1rem;color: #18232b;border-top: 1px solid #a1adb9;background: url(../img/qna_down.png) no-repeat calc(100% - 1.5rem) center / 1.5rem;}
.qna_wrap .box .opened {display: none;}
.qna_wrap .box .opened pre {font-size: 1.6rem;line-height: 1.4;padding: 1.2rem 4rem 1.2rem 1rem;color: #878081;border-top: 1px solid #a1adb9;}
.qna_wrap .box .opened pre a {font-size: inherit;font-weight: inherit;color: inherit;line-height: inherit;}



/* sub_wrap */
.sub_wrap {padding: 2rem;}
.sub_wrap.diff {background-color: #f1f3f5;border-top: 1px solid #e1e5e8;}
.sub_wrap h2 {font-size: 2.4rem;font-weight: 900;color: #1a252c;margin: 0 0 1rem;}
.sub_wrap h3 {font-size: 2rem;font-weight: 900;color: #0b171e;margin: 1rem 0 2rem;}
.sub_wrap .bold {font-size: 1.6rem;font-weight: bold;line-height: 1.4;margin-top: 3rem;color: #2b4c5a;}
.sub_wrap .desc {font-size: 1.6rem;font-weight: bold;line-height: 1.4;margin-top: 3rem;color: #2b4c5a;margin-bottom: 3rem;}
.sub_wrap pre {line-height: 1.4;font-size: 1.6rem;color: #254755;margin-bottom: 2rem;}
.sub_wrap .warn {font-size: 1.4rem;color: #3f4a4f;line-height: 1.4;word-break: break-all;}
.sub_wrap img {width: 100%;display: block;margin: 2rem auto;max-width: 500px;}
.sub_wrap > a {display: flex;align-items: center;background: #111 url(../img/banner_arrow.png) no-repeat calc(100% - 1.5rem) center / 2rem;height: 5rem;color: #fff;padding: 1.5rem;font-size: 1.6rem;font-weight: bold;color: #fff;}