@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

html { font-size: 1vw; }
@media all and (min-width: 700px) {
    html { font-size: 7px; }
}

body,div,h1,h2,h3,h4,h5,h6,input,p,span,a { margin: 0; padding: 0; box-sizing: border-box; }
body { background-size: 1rem; font-family: 'Noto Sans KR', sans-serif; }
a { text-decoration: none; color: inherit; cursor: pointer; }
img { display: block; outline: none; width: 100%; height: auto; }

.btn { display: block; position: absolute; bottom: 4%; left: 10%; width: 80%; height: 13rem; background-color: #f000; }

.wrap { width: 100rem; margin: 0 auto; }
.header { border-bottom: .3rem solid #000; }
.header { display: flex; justify-content: space-between; height: 12rem; padding: 2rem 4rem 4rem; }
.header a { width: 28.6rem; }
.header img { width: auto; height: 100%; }
.header img.logo-70 { height: 130%; }
.menu-wrap { position: sticky; top: 0; display: flex; justify-content: center; align-items: center; height: 16rem; padding: 0 1.5rem; border-bottom: .3rem solid #000; background-color: rgba(210,210,210,.9); z-index: 100; }
.menu-wrap a.menu { display: block; margin: 0 1rem; }
.menu-wrap a.menu img.on { display: none; }
.menu-wrap a.menu.on img { display: none; }
.menu-wrap a.menu.on img.on { display: block; }

.section { position: relative; overflow: hidden; }
.section .swiper-wrap { overflow: hidden; }
.section .swiper-wrap .swiper-button-prev,
.section .swiper-wrap .swiper-button-next { top: 88rem; width: 4rem; height: auto; margin-top: 0; background: none; }
.section .swiper-wrap .swiper-button-prev { left: 7.5rem; }
.section .swiper-wrap .swiper-button-next { right: 7.5rem; }
.section .swiper-wrap .tab-3 .content { position: relative; }
.section .swiper-wrap .tab-3 .content-1 .btn-1 { bottom: 23%; left: 0; width: 100%; height: 14rem; }
.section .swiper-wrap .tab-3 .content-2 .btn-1 {
    bottom: 21.5%;
    left: 11%;
    width: 78%;
    height: 14rem;
}
.section .swiper-wrap .tab-3 .content-2 .btn-2 { bottom: 33.6%; left: 2%; width: 96%; height: 36rem; }
.section .swiper-wrap .tab-3 .content-2 .btn-3 { bottom: 26.8%; left: 2%; width: 96%; height: 36rem; }
.section .swiper-wrap .tab-3 .content-3 .btn-1 {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24rem;
}
.section .swiper-wrap .tab-3 .term-header { position: relative; padding: 5rem 0; font-size: 2.3rem; text-align: center; background-color: #fff; line-height: 1.5; }
.section .swiper-wrap .tab-3 .term-header:after { content: ''; display: block; position: absolute; bottom: 0; left: 3%; width: 94%; height: 3px; background-color: #d9d9d9; }
.section .swiper-wrap .fraction { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; left: 0; width: 100%; height: 9rem; color: rgba(0,0,0,.6); line-height: 1; font-size: 3rem; z-index: 10; }