@charset "utf-8";

* {transition: all 0.3s; box-sizing: border-box;}
body {position: relative; font-family: "Pretendard", sans-serif; font-weight: 400; line-height: 1; color: #000; overflow-x: hidden;}
a:active, a:hover, a:focus {text-decoration: none;}

/* swiper 초기화 */
.swiper-button-prev, .swiper-button-next {position: static; margin-top: 0; color: transparent; width: auto; height: auto;}
.swiper-button-next:after,.swiper-button-prev:after {display: none;}

/* ------------------------------ */
/* 공통 헤더 */
/* ------------------------------ */
header .in_header {width: 144rem; margin: 0 auto;}
header .topHeader {position: relative; padding: 4.8rem 0 7rem 0;}
header .topHeader::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url('/humanframe/theme/100days/assets/img/common/hd_bg.png'); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1;}
header .topHeader .busan_logo {display: flex; justify-content: flex-end;}
header .topHeader .topHdText .txt {font-size: 3rem; color: #3a4f6c; font-weight: 600; letter-spacing: -0.05rem; margin-bottom: 2.3rem;}
header .navWrap nav {display: flex; gap: 2.8rem;}
header .navWrap nav a {display: flex; flex-direction: column; flex: 1; align-items: center; justify-content: center; gap: 2rem; height: 15.5rem; border-radius: 1.5rem; border: 1px solid #c5d1e2; background: #fff;}
header .navWrap nav a.active,
header .navWrap nav a:hover {border-color: #04afdd; box-shadow: 0.3rem 0 2.1rem rgba(0,0,0,0.11);}
header .navWrap nav a p {font-size: 2.4rem; font-weight: 600; letter-spacing: -0.03rem; text-align: center;}
header .btHeader .subNavTab {display: none;}

/* ------------------------------ */
/* 메인페이지 헤더 */
/* ------------------------------ */
#mainHd .btHeader {margin: 6.8rem 0 4.7rem 0;}
#mainHd .btHdText {margin-bottom: 4.5rem;}
#mainHd .btHdText .txt {font-size: 2.4rem; font-weight: 500; color: #535353; letter-spacing: -0.03rem; margin-bottom: 2.5rem;}
#mainHd .btHdText .tit {font-size: 4.5rem; font-weight: 600; color: #060606; letter-spacing: -0.03rem;}

/* ------------------------------ */
/* 서브페이지 헤더 & 레이아웃 */
/* ------------------------------ */
#subHd .btHdText,
#subHd .allMenu {display: none;}
#subHd .btHeader {position: relative;}
#subHd .navWrap {position: absolute; top: 4.5rem; width: calc(144rem - 37rem); z-index: 999;}
#subHd .navWrap nav {gap: 2.2rem;}
#subHd .navWrap nav a {height: 11.9rem; gap: 1.4rem;}
#subHd .navWrap nav a img {width: 4.5rem;}

.subWrap {overflow: hidden;}
.subInner {display: flex; gap: 2.5rem; width: 144rem; margin: 0 auto;}
.subInner #contents {width: 100%; padding: 22.4rem 0 12.5rem 0;}
.subInner .sideMenuWrap {position: relative; width: 34.5rem; flex-shrink: 0; padding: 4.7rem 0 4.7rem 2.5rem;}
.subInner .sideMenuWrap::before {content: ''; position: absolute; top: 0; left: 0; width: 2000rem; height: 100%; background: #f8f8f8; z-index: -1;}

.subInner .sideMenuWrap .scrollGuide {display: none;}

.subInner .sideMenuWrap .allBtn {display: flex; gap: 1.5rem; margin-bottom: 3.3rem;}
.subInner .sideMenuWrap .allMenu {width: calc(50% - 0.75rem); height: 11.9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; border-radius: 1rem; background: #333333;}
.subInner .sideMenuWrap .allMenu.active {background: #0bc0e8;}
.subInner .sideMenuWrap .allMenu span {font-size: 2.3rem; color: #fff; font-weight: 600; letter-spacing: -0.03rem;}
.subInner .sideMenuWrap .allMenu:hover {opacity: 0.9;}

.subInner .sideMenu li {position: relative; width: 100%; height: 19rem; border-radius: 1.5rem; border: 3px solid transparent; box-shadow: 0.3rem 0 2.1rem rgba(0, 0, 0, 0.11);}
.subInner .sideMenu li:not(:last-child) {margin-bottom: 2.8rem;}
.subInner .sideMenu li a {height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 2.5rem 1rem 2rem 3rem;}
.subInner .sideMenu li a .badgeBx {display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1.3rem;}
.subInner .sideMenu li a .badge {display: inline-block; padding: 0.7rem 1.5rem 0.5rem 1.5rem; border-radius: 1.4rem; font-size: 1.8rem; color: #fff; font-weight: 600;}
.subInner .sideMenu li a .tit {position: relative; font-size: 2.4rem; font-weight: 500; line-height: 1.2; word-break: keep-all; z-index: 1;}
.subInner .sideMenu li a .icon {position: absolute; bottom: 0; right: 1rem;}
.subInner .sideMenu li a .icon {transform: scale(0.7);}
.subInner .sideMenu li:hover {transform: translateY(-0.7rem);}

/* 카테고리 분류 */
.subInner .sideMenu li.smallbiz {background: #faf2ee;}
.subInner .sideMenu li.smallbiz .badge {background: #e69153;}
.subInner .sideMenu li.smallbiz:hover {border-color: #e69153;}
.subInner .sideMenu li.citizen {background: #eefcfb;}
.subInner .sideMenu li.citizen .badge {background: #52a6bf;}
.subInner .sideMenu li.citizen:hover {border-color: #52a6bf;}
.subInner .sideMenu li.truck {background: #f7fcee;}
.subInner .sideMenu li.truck .badge {background: #7d915c;}
.subInner .sideMenu li.truck:hover {border-color: #7d915c;}
.subInner .sideMenu li.job {background: #faf3fa;}
.subInner .sideMenu li.job .badge {background: #b7458d;}
.subInner .sideMenu li.job:hover {border-color: #b7458d;}
.subInner .sideMenu li.relief {background: #f5f1fa;}
.subInner .sideMenu li.relief .badge {background: #9d6fe3;}
.subInner .sideMenu li.relief:hover {border-color: #9d6fe3;}

/* topBtn */
.topBtn {display: none;}

/* footer */
footer {padding: 4.2rem 0; background: #353b45; text-align: center;}
footer .text {margin-top: 2rem; font-size: 1.6rem; line-height: 2.6rem; color: #ffffff; opacity: 0.7; word-break: keep-all;}


@media screen and (max-width: 1440px) {
    header .in_header,
    .subInner {width: 100%; padding: 0 2.4rem;}

    /* ------------------------------ */
    /* 서브페이지 헤더 & 레이아웃 */
    /* ------------------------------ */
    #subHd .navWrap {width: calc(100% - 41.8rem);}
}

@media screen and (max-width: 1280px) {

    /* ------------------------------ */
    /* 서브페이지 헤더 & 레이아웃 */
    /* ------------------------------ */
    #subHd .navWrap {width: calc(100% - 37.2rem);}
    #subHd .navWrap nav {gap: 1.5rem;}
    #subHd .navWrap nav a p {font-size: 1.8rem;}

    .subInner .sideMenuWrap {width: 30rem;}
    .subInner .sideMenuWrap .allMenu {gap: 1.7rem; padding: 2rem;}
    .subInner .sideMenuWrap .allMenu span {font-size: 1.8rem;}
    .subInner .sideMenu li {height: auto; min-height: 19rem;}
    .subInner .sideMenu li a .tit {margin-bottom: 1rem; font-size: 2.2rem;}
}

@media screen and (max-width: 1026px) {
    header.scroll {height: 485px;}
    header .topHeader {padding: 3.3rem 0 5.3rem 0;}
    header .topHeader::before {background-image: url('/humanframe/theme/100days/assets/img/common/hd_bg_tab.png');}
    header .topHeader .topHdText .txt {font-size: 2rem; margin-bottom: 1.7rem;}
    header .topHeader .topHdText .tit img {width: 46.9rem;}
    header .navWrap nav {gap: 1.9rem;}
    header .navWrap nav a {height: 11.5rem; gap: 1.4rem;}
    header .navWrap nav a img {width: 4.5rem;}
    header .navWrap nav a p {font-size: 1.8rem;}

    #mainHd.scroll .navWrap,
    #subHd.scroll .navWrap nav {width: calc(100% - 4.8rem); position: fixed; top: 0; left: 1.5rem; padding: 1rem 0; background: rgba(255,255,255,0.9); z-index: 999;}
    #mainHd .btHeader {margin: 3.5rem 0;}
    #mainHd .btHdText .txt {font-size: 2rem; margin-bottom: 1.7rem;}
    #mainHd .btHdText .tit {font-size: 3.5rem;}

    /* ------------------------------ */
    /* 서브페이지 헤더 & 레이아웃 */
    /* ------------------------------ */
    #subHd .navWrap {position: static; width: 100%;}
    #subHd .btHeader {margin: 3rem 0 4.4rem 0;}
    #subHd .allMenu {display: flex;}
    #subHd .navWrap nav {gap: 1.9rem; margin-bottom: 3.4rem;}
    #subHd .navWrap nav a {height: 11.5rem;}
    #subHd .navWrap nav a p {font-size: 2rem;}
    #subHd .subNavTab {display: flex;}
    #subHd .subNavTab li {flex: 1; text-align: center; border: 1px solid #dbdbdb; margin-right: -1px; margin-bottom: -1px;}
    #subHd .subNavTab li a {display: flex; align-items: center; justify-content: center; width: 100%; height: 7.6rem; padding: 2.8rem 0; font-size: 2rem; font-weight: 500; letter-spacing: -0.025rem; line-height: 1.2; background: #f8f8f8; word-break: keep-all;}
    #subHd .subNavTab li.active {border-color: #181818;}
    #subHd .subNavTab li.active a {background: #484848; color: #fff;}

    .subInner {flex-direction: column; gap: 0;}
    .subInner #contents {padding: 0 0 5.5rem 0;}
    .subInner .sideMenuWrap {width: 100%; padding: 3.3rem 0 3.8rem 0; display: none;}
    .subInner .sideMenuWrap::before {left: 50%; transform: translateX(-50%);}
    .subInner .sideMenuWrap .allBtn {display: none;}
    .subInner .sideMenuWrap .scrollGuide {align-items: center; gap: 1.1rem; position: absolute; top: 5rem; right: 0;}
    .subInner .sideMenuWrap .scrollGuide.active {display: flex;}
    .subInner .sideMenuWrap .scrollGuide .arrow {font-size: 1rem; line-height: 1;}
    .subInner .sideMenuWrap .scrollGuide .text { font-size: 1.6rem;}
    .subInner .sideMenuScroll {overflow-x: auto; transform: rotateX(180deg);}
    .subInner .sideMenuScroll::-webkit-scrollbar {height: 6px;}
    .subInner .sideMenuScroll::-webkit-scrollbar-track {background: #ffffff; border-radius: 3px;}
    .subInner .sideMenuScroll::-webkit-scrollbar-thumb {background: #919191; border-radius: 3px;}
    .subInner .sideMenu {display: flex; gap: 2.9rem; transform: rotateX(180deg);}
    .subInner .sideMenuScroll.active .sideMenu {padding-top: 2rem;}
    .subInner .sideMenu li {width: 30.4rem; height: 18.4rem; flex-shrink: 0; box-shadow: none;}
    .subInner .sideMenu li:not(:last-child) {margin-bottom: 0;}
    .subInner .sideMenu li:hover {transform: translateY(0); box-shadow: 0.3rem 0 2.1rem rgba(0, 0, 0, 0.11);}
    .subInner .sideMenu li a .badge {font-size: 1.6rem;}
    .subInner .sideMenu li a .arr {width: 2.6rem;}

    /* topBtn */
    .topBtn {position: fixed; bottom: 5rem; right: 2.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; width: 5.4rem; height: 5.4rem; border-radius: 50%; background: #2f2f2f; box-shadow: 0.3rem 0 2.1rem rgba(0, 0, 0, 0.2); z-index: 1;}
    .topBtn p {font-size: 1.6rem; letter-spacing: -0.03rem; color: #fff;}

    /* footer */
    footer {padding: 3.2rem 0;}
}

@media screen and (max-width: 768px) {
    header.scroll {height: 363px;}

    header .in_header,
    .subInner {padding: 0 1.5rem;}
    header .topHeader {padding: 1.6rem 0 2.2rem 0;}
    header .topHeader::before {background-image: url('/humanframe/theme/100days/assets/img/common/hd_bg_mob.png');}
    header .topHeader .busan_logo img {width: 7rem;}
    header .topHeader .topHdText .txt {font-size: 1.5rem; margin-bottom: 0.7rem;}
    header .topHeader .topHdText .tit img {width: 26.3rem;}
    header .navWrap nav {gap: 1rem 0.7rem; flex-wrap: wrap;}
    header .navWrap nav a {flex: none; width: calc(25% - 0.525rem); height: 7rem; gap: 0.8rem; border-radius: 0.5rem;}
    header .navWrap nav a img {width: 3.6rem;}
    header .navWrap nav a p {font-size: 1.5rem;}

    #mainHd .btHeader {margin: 2.5rem 0;}
    #mainHd .btHdText {margin-bottom: 2.2rem;}
    #mainHd .btHdText .txt {font-size: 1.6rem; margin-bottom: 1.2rem;}
    #mainHd .btHdText .tit {font-size: 2.4rem;}
    #mainHd.scroll .navWrap,
    #subHd.scroll .navWrap nav {width: calc(100% - 3rem);}

    /* ------------------------------ */
    /* 서브페이지 헤더 & 레이아웃 */
    /* ------------------------------ */
    #subHd .btHeader {margin: 1.5rem 0 2.6rem 0;}
    #subHd .navWrap nav {gap: 1rem 0.7rem; margin-bottom: 2.2rem;}
    #subHd .navWrap nav a {height: 7rem; gap: 0.8rem;}
    #subHd .navWrap nav a p {font-size: 1.5rem;}
    #subHd .navWrap nav a img {width: 3.6rem;}
    #subHd .subNavTab {flex-wrap: wrap;}
    #subHd .subNavTab li {flex: none; width: 50%;}
    #subHd .subNavTab li a {height: 5rem; font-size: 1.6rem; padding: 1.7rem 0 1.6rem 0; letter-spacing: -0.05rem;}

    .subInner #contents {padding: 0 0 3.5rem 0;}
    .subInner .sideMenuWrap {padding: 2rem 0;}
    .subInner .sideMenuWrap .scrollGuide {top: 2.5rem;}
    .subInner .sideMenuWrap .scrollGuide .text {font-size: 1.5rem;}
    .subInner .sideMenuScroll.active .sideMenu {padding-top: 3.3rem;}
    .subInner .sideMenu {gap: 1rem;}
    .subInner .sideMenu li {width: 16.8rem; height: 17.9rem;}
    .subInner .sideMenu li a {padding: 1.5rem 1rem 2.2rem 1.9rem;}
    .subInner .sideMenu li a .badgeBx {margin-bottom: 1rem;}
    .subInner .sideMenu li a .badge {font-size: 1.5rem; padding: 0.5rem 1.2rem 0.3rem 1.2rem;}
    .subInner .sideMenu li a .tit {font-size: 1.8rem;}
    .subInner .sideMenu li a .icon {transform: scale(0.6); bottom: -0.8rem; right: -0.1rem;}
    .subInner .sideMenu li a .arr {font-size: 2.2rem;}

    /* topBtn */
    .topBtn {right: 1.5rem; width: 4.2rem; height: 4.2rem; gap: 0.5rem;}
    .topBtn img {width: 1rem;}
    .topBtn p {font-size: 1.3rem;}

    /* footer */
    footer {padding: 2.5rem 2rem 3rem 2rem;}
    footer .text {font-size: 1.4rem; line-height: 2.2rem;}
}