:root {
    --fcf: #ffffff;
    --fc0: #000;
    --fc1: #121212;
    --fc2: #222222;
    --mColor: #963dbb;
    --mColor2: #8a35ae;
}

/* layout-w */
.layout-w {width: 140rem; margin: 0 auto;}

@media screen and (max-width: 1400px) {
    .layout-w {width: 95%;}
}

/* container */
.container {padding-bottom: 5rem;}

/* title_bx */
.title_bx {display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 4rem;}
.title_bx .icon_bx {width: 4.8rem; height: 4.8rem; border-radius: 50%; box-shadow: 0.2rem 0.2rem 0 var(--mColor);}
.title_bx h2 {font-size: 4.4rem; font-weight: 700; color: var(--fc2); padding-top: 0.8rem;}

@media screen and (max-width: 1026px) {
    /* title_bx */
    .title_bx {margin-bottom: 3.3rem;}
    .title_bx .icon_bx {width: 3.7rem; height: 3.7rem;}
    .title_bx h2 {font-size: 3.6rem;}
}

@media screen and (max-width: 768px) {
    .title_bx {margin-bottom: 2.3rem; gap: 0.8rem;}
    .title_bx .icon_bx {width: 2.9rem; height: 2.9rem;}
    .title_bx h2 {font-size: 2.8rem;}
}

/* tab_menu */
.tab_menu {display: flex; border: 2px solid var(--fc0); margin-bottom: 5.9rem;}
.tab_menu li {flex: 1;}
.tab_menu li:not(:last-child) {border-right: 2px solid var(--fc0);}
.tab_menu li a {display: flex; align-items: center; justify-content: center; height: 6.4rem; word-break: keep-all; text-align: center; transition: all 0.3s;}
.tab_menu li a.on {background: var(--fc0);}
.tab_menu li a span {margin-top: 0.5rem; font-size: 2rem; color: var(--fc1); transition: all 0.3s;}
.tab_menu li a.on span {color: var(--fcf); font-weight: 700;}

@media screen and (max-width: 1026px) {
    .tab_menu {flex-wrap: wrap; border: none; border-top: 2px solid var(--fc0);}
    .tab_menu li {flex: 1 1 25%; max-width: 25%; border-bottom: 2px solid var(--fc0);}
    .tab_menu li:first-child, .tab_menu li:nth-child(5) {border-left: 2px solid var(--fc0);}
    .tab_menu li:last-child {border-right: 2px solid var(--fc0);}
    .tab_menu li a {height: 5.4rem;}
    .tab_menu li a span {font-size: 1.8rem;}
}

@media screen and (max-width: 768px) {
    .tab_menu {margin-bottom: 4rem;}
    .tab_menu li {flex: 1 50%; max-width: 50%;}
    .tab_menu li:nth-child(3), .tab_menu li:nth-child(7), .tab_menu li:last-child {border-left: 2px solid var(--fc0);}
    .tab_menu li a {height: 5.2rem;}
    .tab_menu li a span {font-size: 1.7rem;}
}

/* tab_bx */
.tab_bx {display: none;}
.tab_bx.on {display: block;}

/* title */
.h3Tit {font-size: 3.4rem; color: var(--mColor2); font-weight: 700; margin-bottom: 4rem;}
.h4Tit {font-size: 2.6rem; color: var(--fc2); font-weight: 700; line-height: 2.8rem;}
.h5Tit {font-size: 2.2rem; color: var(--fc2); font-weight: 700;}
.icon_title {display: flex; gap: 0.8rem;}
.icon_title .h4Tit {padding-top: 0.15rem;}
.icon_title .icon_bx {flex-shrink: 0;}
.arr_title {display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;}
.arr_title img {margin-bottom: 0.4rem;}

@media screen and (max-width: 1026px) {
    .h3Tit {font-size: 3rem; margin-bottom: 3rem;}
    .h4Tit {font-size: 2.4rem;}
}

@media screen and (max-width: 768px) {
    .h3Tit {font-size: 2.4rem;}
    .h4Tit {font-size: 2.2rem; line-height: 2.4rem;}
    .h5Tit {font-size: 2rem;}
    .icon_title .h4Tit {padding-top: 0.3rem;}
}

/* flex_btn */
.flex_btn {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1.5rem;}

/* btn_list */
.btn_list {display: flex; flex-wrap: wrap; gap: 1rem;}

@media screen and (max-width: 768px) {
    .btn_list {gap: 0.5rem;}
}

/* btn */
a.btn {position: relative; display: block; padding: 1rem 3.4rem 0.5rem 1.3rem; border: 1px solid var(--mColor); width: max-content;}
a.btn.link.type2 {display: flex; align-items: center; gap: 0.5rem; border-color: #dddddd;}
a.btn.link.type2 img {margin-bottom: 0.3rem;}
a.btn::before {content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 1.4rem; background-repeat: no-repeat; background-size: 100%;}
a.btn.link::before {background-image: url('/humanframe/theme/intobusan/assets/img/common/link_icon.png'); width: 1.2rem; height: 1.2rem;}
a.btn.link.type2::before {background-image: url('/humanframe/theme/intobusan/assets/img/common/link_icon2.png');}
a.btn.view::before {background-image: url('/humanframe/theme/intobusan/assets/img/common/view_icon.png'); width: 1.6rem; height: 1.6rem;}
a.btn span {font-size: 1.6rem; color: var(--mColor); font-weight: 500;}
a.btn.link.type2 span {color: var(--fc2);}

@media screen and (max-width: 768px) {
    a.btn span {font-size: 1.4rem;}
}

/* table */
.tableColRow th, .tableColRow td {padding: 2.2rem 1rem 1.8rem 1rem; font-size: 1.8rem;}

@media screen and (max-width: 768px) {
    .tableColRow th, .tableColRow td {padding: 1.8rem 0.5rem 1.4rem 0.5rem; font-size: 1.5rem;}
}