/* 스크롤바 */
body::-webkit-scrollbar {width: 5px;height:5px;}
body::-webkit-scrollbar-thumb {height: 30%;background: rgba(128, 117, 105, .5);border-radius: 3px;}
body::-webkit-scrollbar-track {background: rgba(128, 117, 105, .3);}


/* 변수, wrap */
* {
    --header-height-1 : 5.5rem;
    --header-height-2 : 5rem;
    --header-height-3 : 4.5rem;
    --footer-height-1 : 7rem;
    --footer-height-2 : 5rem;
    --common-width : 720px;
}
#wrap {width: 100%;margin: 0 auto;max-width: var(--common-width);min-height: 100vh;padding-top: var(--header-height-1);padding-bottom: var(--footer-height-1);background-color: #fff;}
#wrap.index {display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding: 0;}
#wrap.index .logo {
    width: 45%;margin-top: 3rem;max-width: 300px;
}
#wrap.index .bg {
    width: 100%;margin-top: 3rem;
}


/* 헤더 */
header {z-index: 100;height: var(--header-height-1);width: 100%;position: fixed;left: 50%;top: 0;max-width: var(--common-width);padding: 0 1.5rem;background-color: #fff;transform: translateX(-50%);display: flex;align-items: center;justify-content: center;}
header .logo img {height: calc(var(--header-height-1) - 3rem);display: block;}
header .prev {height: calc(var(--header-height-1) - 3.5rem);object-fit: contain;cursor: pointer;display: block;}


/* 하단바 */
nav {
    position: fixed;
    left:50%;
    bottom: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    background-color: #fff;
    transform: translateX(-50%);
    border-top: 1px solid #a1a2a2;
    justify-content: space-between;
    height: var(--footer-height-1);
    max-width: var(--common-width);
}
nav a {
    gap: .8rem;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
nav a.color {
    background-color: #ffdf50;
}
nav a img {
    width: 1.8rem;
}
nav p {
    font-size: 1.4rem;
    line-height: 1.2;
    color: #868686;
}
@media screen and (min-width:770px){
    #wrap {padding-top: var(--header-height-2);padding-bottom: var(--footer-height-2);}
    header {height: var(--header-height-2);}
    footer {height: var(--footer-height-2);}
} 
@media screen and (min-width:1279px){
    #wrap {padding-top: var(--header-height-3);}
    header {height: var(--header-height-3);}
}



/* ==================================================== */
.banner_wrap {
    margin: 1rem 1.5rem;
    display: flex;flex-direction:column;align-items: center;gap: 1rem;
}
.banner_wrap a {
    width: 100%;
}
.banner_wrap img {
    width: 100%;
}
.banner_wrap span {
    display: flex;gap: 1rem;width: 100%;
}


/* news_wrap */
.news_wrap {
    margin:2rem 1.5rem;
}
.news_wrap .swiper-wrapper {
    height: fit-content;
}
.news_wrap .swiper-slide {
    display: block;
    height: fit-content;
    border: 1px solid #aaa;
    border-radius: .5rem;
    padding: 2rem 2rem 10rem;
    overflow: hidden;
}
.news_wrap .swiper-slide h3 {
    font-size: 1.8rem;
    line-height: 1.4;
    color: #fff;
}
.news_wrap .swiper-slide img {
    position: absolute;
    left: 0;
    top: 0;
    filter: brightness(.5);
    width: 100%;
    z-index: -1;
}
.news_wrap .swiper-slide p {}
.news_wrap .swiper-slide a {}
.news_wrap .swiper-pagination {
    position: absolute;
    color: #fff !important;
    width: fit-content !important;
    left: calc(100% - 3rem) !important;
    bottom: 1.5rem !important;
    transform: translate(-50%, -50%) !important;
}
.news_wrap .swiper-pagination .swiper-pagination-current {
    color: #fff !important;
}
.news_wrap .swiper-pagination .swiper-pagination-total {
    color: #fff !important;
}


.swiper-button-next {
    left: auto !important;
    right: 4rem !important;
    height: 3rem !important;
    top: calc(100% - .8rem) !important;
}
.swiper-button-prev {
    left: auto !important;
    right: 6rem !important;
    height: 3rem !important;
    top: calc(100% - .8rem) !important;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1.2rem !important;
    height: 100% !important;
    color: #fff;
}


#allCount {
    font-size: 1.4rem;
    text-align: right;
    margin: 2rem 1.5rem 1rem;
    color: #ada9a9;
}
#page_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0 5rem;
    gap: 1rem;flex-wrap: wrap;
}
#page_wrap div {
    height: 1.8rem;
    width: 1.8rem;
    cursor: pointer;
    padding: .3rem;
    display: flex;justify-content: center;align-items: center;
}
#page_wrap div img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
#page_wrap div.next1 img {
    transform: rotate(180deg);
}
#page_wrap div.next2 img {
    transform: rotate(180deg);
}
#page_wrap p {
    font-size: 1.2rem;
    color: #ddd;
}
#page_wrap p.on {
    color: #111;
    font-weight: 900;
}





/* news */
.news-inner h2 {
    font-size: 1.9rem;
    font-weight: 800;
    padding-bottom: 3rem;
    padding: 2rem;
}
.news-article {
    height: 12rem;
    display: flex;align-items: center;
    margin: 2rem 1.5rem;
}
.news-article img {
    width: 47%;
    height: 100%;
    object-fit: cover;
}
.news-article span {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 53%;
    height: 100%;
    padding-left: 1rem;
}
.news-article span h3 {
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: bold;
    color: #2b2625;
    letter-spacing: -0.6px;
}
.news-article span p {
    font-size: 1.4rem;
    color: #2f2b2a;
}



/* qna */
.qna_wrap {
    margin: 1.5rem;
}
.qna_wrap .qna {}
.qna_wrap .qna .ques {
    padding: 1.5rem 4rem 1.5rem 1.5rem;
    font-size: 1.7rem;
    font-weight: bold;
    line-height: 1.6;
    color: #4e4c4c;
    background: url(../img/qna-open.png) no-repeat calc(100% - 1.5rem) center / 1.5rem;
    border-top: 1px solid #a2aeba;
}
.qna_wrap .qna .ans {
    padding: 2rem 1.5rem;
    font-size: 1.6rem;
    color: #5a5858;
    line-height: 1.6;
    display: none;
    border-top: 1px solid #a2aeba;
}
.qna_wrap .qna.open {
    background-color: #f7f8f8;
}
.qna_wrap .qna.open .ques {
    background: url(../img/qna-close.png) no-repeat calc(100% - 1.5rem) center / 1.5rem;}
.qna_wrap .qna.open .ans {
    display: block;
}



/* introduce */
.introduce {
    margin-top: 4rem;
}
.introduce .title {
    margin: 1rem 1.5rem 3rem;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.6;
    word-break: break-all;
    color: #3e3a39;
}
.introduce .sub_title {
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: bold;
    color: #e6000f;
    word-break: break-all;
    margin: .5rem 1.5rem;
}
.introduce .content {
    margin: .5rem 1.5rem 3rem;
    font-size: 1.6rem;
    color: #5a5858;
    line-height: 1.6;
}



/* search_form */
#search_form {
    padding: 1.5rem;
}
#search_form input {
    color: #aaa;
    width: 100%;
    font-size: 1.4rem;
    border-radius: 1rem;
    border: 1px solid #cbcbcb;
    line-height: 1.2;
    background: url(../img/search.png) no-repeat 1.5rem center / 1.5rem;
    margin-bottom: 2rem;
    padding: 1.3rem 1.5rem 1.3rem 4rem;
}
#search_form input::placeholder {
    font-size: 1.4rem;
    color: #aaa;
}
#search_form span {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 1rem;
}
#search_form span p {
    font-size: 1.6rem;
    font-weight: bold;
    color: #2c2726;
}
#search_form span select {
    padding: .8rem 2rem .8rem 1rem;
    border: 1px solid #e0e6ef;
    border-radius: .5rem;
    background: url(../img/select.png) no-repeat calc(100% - 1rem) center / 1rem;
    font-size: 1.4rem;
    font-weight: bold;
    color: #403c3b;
}
#search_form span option {
    font-size: 1.4rem;
    color: #403c3b;
    background-color: #ffdf50;
}







/* bojo_recomm */
.bojo_recomm {
    margin:2rem 0 1rem;
}
.bojo_recomm .swiper-wrapper {
    height: fit-content;
}
.bojo_recomm .swiper-slide {
    display: block;
    height: fit-content;
    border: 1px solid #aaa;
    background-color: #f7f8f8;
    border-radius: 1rem;
    padding: 2rem 2rem;
}
.bojo_recomm .swiper-slide span {
    margin-top: 3rem;
    display: flex;justify-content: end;
}
.bojo_recomm .swiper-slide span p {
    background-color: #ffdf50;
    border-radius: 10rem;
    padding: .5rem 1.5rem;
    font-size: 1.4rem;
    display: block;
    width: fit-content;
    color: #4e4c4c;
}
.bojo_recomm .swiper-slide h3 {
    font-size: 1.8rem;
    line-height: 1.4;
    font-weight: 800;
}
.bojo_recomm .swiper-slide img {
    position: absolute;
    left: 0;
    top: 0;
    filter: brightness(.5);
    width: 100%;
    z-index: -1;
}
.bojo_recomm .swiper-pagination {
    position: absolute;
    width: fit-content !important;
    left: calc(100% - 5rem) !important;
    bottom: 1.5rem !important;
    transform: translate(-50%, -50%) !important;
}




/* bojo_result */
.bojo_result {

}
.bojo_result .box {
    border: 1px solid #ddd;
    padding: 1rem 2rem;
    border-radius: 1rem;
    margin: 1.5rem;
    display: block;
}
.bojo_result span {
    background-color: #ffdf50;
    border-radius: 10rem;
    padding: .5rem 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    display: block;
    width: fit-content;
    color: #4e4c4c;
    margin-bottom: 1rem;
}
.bojo_result p {
    font-size: 1.8rem;
    line-height: 1.4;
    font-weight: 800;
    gap: 1rem;
    cursor: pointer;
    word-break: break-all;
    display: flex;align-items: center;
}
.bojo_result p img {width: 1rem;}




/* search_sub */
.search_sub h2 {
    color: #00254c;
    font-size: 1.8rem;
    font-weight: 800;
    text-align: center;
    padding: 2rem;
}
.search_sub .tabs {
    display: flex;justify-content: space-between;align-items: center;
}
.search_sub .tabs .tab {
    font-size: 1.4rem;
    color: #939393;
    font-weight: bold;
    display: block;
    width: 100%;
    cursor: pointer;
    padding: 1.5rem 0;
    text-align: center;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}
.search_sub .tabs .tab.on {
    color: #5a5858;
    font-weight: 800;
    border-bottom: 3px solid #ffde49;
}
.search_sub .content {
    padding: 1rem 0 2rem;
}
.search_sub .content span {
    padding: 1rem 2rem;
    display: flex;
}
.search_sub .content p {
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.4;
    color: #3b3736;
    margin-right: 2rem;
}
.search_sub .content pre {
    font-size: 1.6rem;
    line-height: 1.4;
    color: #595757;
}
.search_sub .content .btn {
    display: flex;
    justify-content: center;align-items: center;
    width: calc(100% - 3rem);
    height: 6rem;
    font-size: 1.6rem;
    font-weight: 800;
    border-radius: .5rem;
    background-color: #ffdf50;
    color: #3a3739;
    margin: 1.5rem;
}









.commonh2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #4f4c4c;
    margin-bottom: 1rem;
}
.marginh2 {
    margin: 1.5rem 1.5rem 3rem;
}
.commonh2 b {
    font-weight: 900;
    font-size: inherit;
    line-height: inherit;
}
.commonh2 .red {
    color: #e6000f;
}
.commonh2 .blue {
    color: #00254c;
}