:root {
    --bs-tertiary: #155688;
    --bs-tertiary-rgb: 21, 86, 136;
    --st-box-shadow: 0 .5rem 1rem 0 rgba(0,0,0,.15);
    --st-transition: .3s all ease;
}


/*common*/
html, body {
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

/*bs-override*/
.bg-tertiary {
    background-color: var(--bs-tertiary) !important;
}
.bg-blue {
    background-color: var(--bs-blue) !important;
}
.bg-indigo {
    background-color: var(--bs-indigo) !important;
}
.bg-purple {
    background-color: var(--bs-purple) !important;
}
.bg-pink {
    background-color: var(--bs-pink) !important;
}
.bg-red {
    background-color: var(--bs-red) !important;
}
.bg-orange {
    background-color: var(--bs-orange) !important;
}
.bg-yellow {
    background-color: var(--bs-yellow) !important;
}
.bg-green {
    background-color: var(--bs-green) !important;
}
.bg-teal {
    background-color: var(--bs-teal) !important;
}
.bg-cyan {
    background-color: var(--bs-cyan) !important;
}
.bg-black {
    background-color: var(--bs-black) !important;
}
.bg-white {
    background-color: var(--bs-white) !important;
}
.bg-gray {
    background-color: var(--bs-gray) !important;
}
.bg-gray-dark {
    background-color: var(--bs-gray-dark) !important;
}
.bg-gray-light {
    background-color: var(--bs-gray-400) !important;
}
.bg-silver {
    background-color: var(--bs-gray-200) !important;
}

.btn .material-symbols-rounded {
    vertical-align: middle;
    font-size: 1.2rem;
    line-height: 1.5;
    margin: -.25rem 0;
}


/*sitehead*/
.sitehead {
    position: fixed;
    width: 100%;
    z-index: 999;
    top: 0;
    left: 0;
    box-shadow: var(--st-box-shadow);
    padding-right: inherit;
}

.sitehead .sitehead-links-wrap,
.sitehead .sitehead-menu-wrap {
    width: 100%;
    background: #fff;
    transition: var(--st-transition);
}

.sitehead .sitehead-links-wrap .sitehead-links {
    display: flex;
    height: 2.5rem;
    align-items: center;
    justify-content: right;
    gap: 2rem;
}

.sitehead .sitehead-menu-wrap .sitehead-menu {
    display: flex;
    justify-content: space-between;
    height: 5rem;
    align-items: center;
    gap: 10rem;
}

.sitehead .sitehead-menu-wrap .sitehead-menu h1 {
    margin: 0;
}

.sitehead .sitehead-menu-wrap .sitehead-menu h1 span {
    display: none;
    font-size: 0;
}

.sitehead .sitehead-menu-wrap .sitehead-menu h1 img {
    display: block;
    height: 2.75rem;
}

.sitehead .sitehead-menu-wrap .sitehead-menu h1 img.logo-white {
    display: none;
}

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    justify-content: space-between;
    height: 100%;
}

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb a {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--bs-body-color);
    transition: var(--st-transition);
}

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb .lnb {
    position: absolute;
    width: max-content;
    margin: 0;
    list-style: none;
    background: #fff;
    transition: var(--st-transition);
    padding: 0 .25rem;
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    top: 5rem;
    left: -2rem;
    overflow: hidden;
    height: fit-content;
    max-height: 0;
    /* max-height: 12rem; */
    box-shadow: var(--st-box-shadow);
}

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb .lnb > li {
    margin-top: .5rem;
}

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb .lnb a {
    font-size: 1rem;
    display: block;
    width: 100%;
    padding: .25rem 2rem;
    border-radius: var(--bs-border-radius);
}

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb li:hover .lnb {
    max-height: 15rem;
}

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb .lnb > li:last-child {
    margin-bottom: .5rem;
}

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb > li:hover > a {
    color: var(--bs-tertiary);
}

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb .lnb a:hover {
    color: var(--bs-tertiary);
    background: var(--bs-gray-200);
}

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb > li::after {
    content: '▲';
    display: block;
    position: absolute;
    bottom: -7px;
    left: 50%;
    margin-left: -.5em;
    color: var(--bs-tertiary);
    opacity: 0;
    transition: var(--st-transition);
}

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb > li:hover::after {
    opacity: 1;
}

.sitehead .sitehead-links-wrap .sitehead-links a {
    color: var(--bs-gray-700);
    font-size: .9rem;
    display: flex;
    align-items: center;
    transition: var(--st-transition);
}

.sitehead .sitehead-links-wrap .sitehead-links a > span {
    color: var(--bs-gray-600);
    font-size: 1.2rem;
    margin-right: .25rem;
    transition: var(--st-transition);
}

.sitehead .sitehead-links-wrap .sitehead-links a > b {
    font-weight: 500;
}

.sitehead .sitehead-links-wrap .sitehead-links a:hover {
    color: var(--bs-tertiary);
}

.sitehead.mobile-sitehead {
    display: none;
}

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb > li a.current {
    color: var(--bs-tertiary);
}

/*서브메뉴(lnb) 없을 때 */

.sitehead .sitehead-menu-wrap .sitehead-menu .gnb > li.no-lnb::after {
    display: none;
}

.sitehead .slidemenu-wrap .slidemenu-list .gnb > li.no-lnb > a::after {
    display: none;
}


@media (max-width:991px) {
    .sitehead.pc-sitehead {
        display: none;
    }

    .sitehead.mobile-sitehead {
        display: block;
    }
}

/*모바일 상단 바*/
.sitehead.mobile-sitehead .sitehead-menu-wrap .sitehead-menu {
    gap: 0;
    height: 4rem;
}

.sitehead.mobile-sitehead .sitehead-menu-wrap .sitehead-menu button .material-symbols-rounded {
    font-size: 2rem;
    font-variation-settings: 'wght' 700;
}

.sitehead.mobile-sitehead .sitehead-menu-wrap .sitehead-menu button {
    background: transparent;
    color: var(--bs-primary);
    border: none;
    outline: none;
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sitehead.mobile-sitehead .sitehead-menu-wrap .sitehead-menu button.slidemenu-close,
.sitehead.mobile-sitehead.active .sitehead-menu-wrap .sitehead-menu button.slidemenu-call {
    display: none;
}

.sitehead.mobile-sitehead.active .sitehead-menu-wrap .sitehead-menu button.slidemenu-close {
    display: flex;
}

.sitehead .slidemenu-wrap {
    position: fixed;
    width: 100%;
    height: 0;
    background: #fff;
    overflow: hidden;
    transition: all .5s ease-in-out;
}

.sitehead.mobile-sitehead.active .slidemenu-wrap {
    height: calc(100% - 4rem);
}

.sitehead .slidemenu-wrap .slidemenu-list {
    height: 100%;
}

.sitehead .slidemenu-wrap .container {
    height: 100%;
}

.sitehead .slidemenu-wrap .slidemenu-list .login-btn-wrap {
    padding: 1rem 0;
    margin-bottom: 1rem;
    border-top: 1px var(--bs-border-color) solid;
    border-bottom: 1px var(
    --bs-border-color) solid;
}

.sitehead .slidemenu-wrap .slidemenu-list .login-btn-wrap > a {
    display: flex;
    text-align: center;
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    gap: .25em;
}

.sitehead .slidemenu-wrap .slidemenu-list .login-btn-wrap > a.login {
    background: var(--bs-tertiary);
    padding: .5rem;
    border-radius: .5rem;
    color: #fff;
}

.sitehead .slidemenu-wrap .slidemenu-list .login-btn-wrap > a.login-guide {
    margin-top: .25rem;
    font-size: .875rem;
    font-weight: 400;
    color: var(--bs-gray-700);
}

.sitehead .slidemenu-wrap .slidemenu-list .login-btn-wrap > a.login-guide span {
    font-size: 1rem;
}

.sitehead .slidemenu-wrap .slidemenu-list .gnb,
.sitehead .slidemenu-wrap .slidemenu-list .lnb {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sitehead .slidemenu-wrap .slidemenu-list .gnb a {
    display: block;
    color: var(--bs-body-color);
}

.sitehead .slidemenu-wrap .slidemenu-list .gnb {
    position: relative;
    height: calc(100% - 8rem);
    overflow-y: auto;
}

.sitehead .slidemenu-wrap .slidemenu-list .lnb {
    transition: all .5s ease-in-out;
    height: fit-content;
    max-height: 0;
    overflow: hidden;
}

.sitehead .slidemenu-wrap .slidemenu-list .gnb a.active + .lnb {
    max-height: 15rem;
}

.sitehead .slidemenu-wrap .slidemenu-list .gnb > li > a {
    position: relative;
    font-weight: 700;
    padding: .5rem;
    border-bottom: 1px var(--bs-border-color) solid;
}

.sitehead .slidemenu-wrap .slidemenu-list .lnb > li > a {
    padding: .5rem 1rem;
    background: var(--bs-gray-100);
    border-bottom: 1px var(--bs-border-color) dashed;
    font-size: .9rem;
}

.sitehead .slidemenu-wrap .slidemenu-list .gnb > li > a::after {
    content: '\e313';
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    font-size: 1.5rem;
    top: 0.125rem;
    right: .5rem;
    color: var(--bs-gray-500);
}

.sitehead .slidemenu-wrap .slidemenu-list .gnb > li > a.active::after {
    content: '\e316';
    color: var(--bs-gray-600);
}

.sitehead .slidemenu-wrap .slidemenu-list .gnb > li > a.active {
    color: var(--bs-tertiary);
}

.sitehead .slidemenu-wrap .slidemenu-list .gnb > li a.current {
    color: var(--bs-tertiary);
}



/*index 페이지 상단 바 투명*/
body.index.scrolltop > .sitehead:not(:hover) {
    box-shadow: none;
}

body.index.scrolltop > .sitehead:not(:hover) .sitehead-links-wrap, body.index.scrolltop > .sitehead:not(:hover):not(.active) .sitehead-menu-wrap {
    background: transparent;
}

body.index.scrolltop > .sitehead:not(:hover) .sitehead-links-wrap .sitehead-links a {
    color: #fff;
}

body.index.scrolltop > .sitehead:not(:hover):not(.active) .sitehead-menu-wrap .sitehead-menu h1 img.logo-white {
    display: block;
}

body.index.scrolltop > .sitehead:not(:hover):not(.active) .sitehead-menu-wrap .sitehead-menu h1 img.logo-color {
    display: none;
}

body.index.scrolltop > .sitehead:not(:hover):not(.active) .sitehead-menu-wrap .sitehead-menu .gnb > li > a {
    color: #fff;
}

body.index.scrolltop > .sitehead:not(:hover):not(.active) .sitehead-links-wrap .sitehead-links a > span {
    color: var(--bs-gray-400)
}

/*mobile*/
body.index.scrolltop > .sitehead.mobile-sitehead:not(:hover):not(.active) .sitehead-menu-wrap .sitehead-menu button {
    color: #fff;
}



.main-visual {
    position: relative;
    width: 100%;
    height: 720px;
}

.main-visual .main-visual-background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: url('../img/main-visual-background.jpg') no-repeat center / cover;
}

.main-visual .main-visual-contents-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-visual .main-visual-contents {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin-top: 2.5rem;
}

.main-visual .main-visual-contents .title {
    color: #fff;
}

.main-visual .main-visual-contents .title > h1 {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 2rem;
}

.main-visual .main-visual-contents .title > h2 {
    font-size: 2rem;
    font-weight: 400;
}

.main-visual .main-visual-contents .links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.main-visual .main-visual-contents .links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #fff;
    width: 7.5rem;
    height: 7.5rem;
    background: rgba(0,0,0,.5);
    border-radius: 1rem;
    transition: var(--st-transition);
}

.main-visual .main-visual-contents .links a > p {
    /* width: 100%; */
    text-align: center;
    margin: 0;
    font-weight: 700;
}

.main-visual .main-visual-contents .links a > span {
    display: block;
    font-size: 2rem;
}

.main-visual .main-visual-contents .links a:hover {
    background: var(--bs-red);
    box-shadow: var(--st-box-shadow);
}

.main-banner {
    position: relative;
    margin-top: -4rem;
    border-top-left-radius: 4rem;
    border-top-right-radius: 4rem;
    background: #fff;
    padding-top: 1.5rem;
}

.main-banner .main-banner-bar-wrap {
    position: relative;
    display: flex;
    height: 7.5rem;
    overflow: hidden;
    align-items: end;
}

.main-banner .main-banner-bar-wrap .main-banner-bar-background {
    position: absolute;
    right: 4rem;
    top: 0;
    z-index: 1;
}

.main-banner .main-banner-bar-wrap .main-banner-bar {
    width: 100%;
    height: 5rem;
    border-radius: 1rem;
    background: #032D4E;
    background: linear-gradient(90deg, rgba(3, 45, 78, 1) 0%, rgba(37, 81, 122, 1) 100%);
    display: flex;
    align-items: center;
    color: #fff;
    padding: 0 4rem;
    gap: 1.5rem;
}

.main-banner .main-banner-bar-wrap .main-banner-bar p {
    margin: 0;
    font-size: 1.5rem;
}

.main-banner .main-banner-bar-wrap .main-banner-bar p b {
    color: #ffc95f;
}

.main-banner .main-banner-bar-wrap .main-banner-bar a {
    display: block;
    color: #fff;
    border: 1px #fff solid;
    padding: .25rem 1.5rem;
    border-radius: 2rem;
    transition: var(--st-transition);
}

.main-banner .main-banner-bar-wrap .main-banner-bar a:hover {
    background: var(--bs-red);
    box-shadow: var(--st-box-shadow);
}

.client-banner {
    margin-top: 5rem;
}

.client-banner .client-banner-bar-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.client-banner .client-banner-bar-header {
    flex-shrink: 0;
}

.client-banner .client-banner-bar-header a {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px var(--bs-border-color) solid;
    border-radius: 2rem;
    padding: .5rem 1.5rem;
    transition: var(--st-transition);
    color: var(--bs-body-color);
}

.client-banner .client-banner-bar-header a span {
    opacity: .5;
}

.client-banner .client-banner-bar-header a:hover {
    background: var(--bs-gray-100);
    color: var(--bs-tertiary);
}

.client-banner .client-banner-bar {
    position: relative;
    width: 100%;
    height: 3rem;
    overflow: hidden;
}

.client-banner .client-banner-bar-inner {
    display: flex;
    align-items: center;
    width: fit-content;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 3rem;
    position: relative;
    animation: marquee 480s linear infinite;
    will-change: transform;
}

.client-banner .client-banner-bar-inner > li {
    position: relative;
}

.client-banner .client-banner-bar-inner > li::after {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    background: var(--bs-gray-200);
    top: 0;
    right: -1.5rem;
}

.client-banner .client-banner-bar::before,
.client-banner .client-banner-bar::after {
    content: '';
    display: block;
    position: absolute;
    width: 3rem;
    height: 100%;
    top: 0;
    z-index: 1;
}

.client-banner .client-banner-bar::before {
    background: #FFFFFF;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    left: 0;
}

.client-banner .client-banner-bar::after {
    background: #FFFFFF;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    right: 0;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.harmful-notice {
    margin-top: 6rem;
}

.harmful-notice .harmful-notice-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
}

.harmful-notice .harmful-notice-wrap .header {
    width: 100%;
    padding-bottom: .5rem;
    text-align: center;
}

.harmful-notice .harmful-notice-wrap .count {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(50% - 1rem);
}

.harmful-notice .harmful-notice-wrap .answer {
    width: calc(50% - 1rem);
    min-height: 21rem;
    padding: 2rem;
    border-radius: 1rem;
    background: var(--bs-gray-200);
}

.harmful-notice .harmful-notice-wrap .count .inform {
    width: 100%;
    height: calc(50% - .75rem);
    border-radius: 1rem;
    background: var(--bs-primary);
    position: relative;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    color: #fff;
    background-image: url('../img/count-inform-background01.png');
    background-repeat: no-repeat;
    background-position: right center;
    padding: 0 8rem 0 2rem;
    gap: 1.25rem;
}

.harmful-notice .harmful-notice-wrap .institute {
    width: 100%;
    border: 1px var(--bs-border-color) solid;
    padding: 2rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 3rem;
    justify-content: space-between;
}

.harmful-notice .harmful-notice-wrap .header h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.harmful-notice .harmful-notice-wrap .header .dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: var(--bs-gray-400);
    margin: 0 auto;
}

.harmful-notice .harmful-notice-wrap .header .dot::before,
.harmful-notice .harmful-notice-wrap .header .dot::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: var(--bs-gray-400);
}

.harmful-notice .harmful-notice-wrap .header .dot::before {
    left: -16px;
}

.harmful-notice .harmful-notice-wrap .header .dot::after {
    right: -16px;
}

.harmful-notice .harmful-notice-wrap .answer h4 {
    font-size: 1.2rem;
    font-weight: 400;
    border-bottom: 2px var(--bs-gray-600) solid;
    padding-bottom: 1rem;
    margin: 0;
}

.harmful-notice .harmful-notice-wrap .answer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.harmful-notice .harmful-notice-wrap .answer ul li {
    padding: .5rem .5rem;
    border-bottom: 1px var(--bs-gray-400) solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
}

.harmful-notice .harmful-notice-wrap .answer ul li .context {
    width: 100%;
}

.harmful-notice .harmful-notice-wrap .answer ul li .status {
    flex-shrink: 0;
    background-color: var(--bs-primary);
    color: #fff;
    padding: .25rem 1rem;
    border-radius: 1rem;
    font-size: .9rem;
    font-weight: 700;
}

.harmful-notice .harmful-notice-wrap .answer ul li .status.type01 {
    background-color: var(--bs-blue);
}

.harmful-notice .harmful-notice-wrap .answer ul li .status.type02 {
    background-color: var(--bs-tertiary);
}

.harmful-notice .harmful-notice-wrap .answer ul li .status.type03 {
    background-color: var(--bs-gray-500);
}

.harmful-notice .harmful-notice-wrap .answer ul li .status.type04 {
    background-color: var(--bs-red);
}

.harmful-notice .harmful-notice-wrap .answer ul li .context .product {
    font-weight: 600;
}

.harmful-notice .harmful-notice-wrap .answer ul li .context .name {
    font-size: .9rem;
}

.harmful-notice .harmful-notice-wrap .answer ul li .context .date {
    color: var(--bs-gray-600);
    font-weight: 700;
    margin-left: .5rem;
}

.harmful-notice .harmful-notice-wrap .count .inform:last-child {
    background: var(--bs-secondary);
    background-image: url('../img/count-inform-background02.png');
    background-repeat: no-repeat;
    background-position: right center;
}

.harmful-notice .harmful-notice-wrap .count .inform .text {
    font-size: 1.2rem;
    word-break: keep-all;
}

.harmful-notice .harmful-notice-wrap .count .inform .number {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 3rem;
    font-weight: 900;
    gap: .3rem;
}

.harmful-notice .harmful-notice-wrap .count .inform .number small {
    font-size: 1.2rem;
    font-weight: 400;
}

.harmful-notice .harmful-notice-wrap .count .inform .add-text {
    position: absolute;
    bottom: -1rem;
    right: 0;
    font-size: 1rem;
    font-weight: 400;
    opacity: .9;
}

.harmful-notice .harmful-notice-wrap .institute .title {
    flex-shrink: 0;
    width: 12rem;
}

.harmful-notice .harmful-notice-wrap .institute .title h4 {
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0;
}

.harmful-notice .harmful-notice-wrap .institute .title a {
    display: flex;
    width: fit-content;
    align-items: center;
    font-size: .9rem;
    font-weight: 700;
    color: var(--bs-gray-600);
    transition: var(--st-transition);
}

.harmful-notice .harmful-notice-wrap .institute .title a span {
    font-size: 1rem;
}

.harmful-notice .harmful-notice-wrap .institute .title a:hover {
    color: var(--bs-tertiary);
}

.harmful-notice .harmful-notice-wrap .institute .links {
    width: calc(100% - 15rem);
    position: relative;
}

.harmful-notice .harmful-notice-wrap .institute .links ul {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.harmful-notice .harmful-notice-wrap .institute .links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .9rem;
    color: var(--bs-body-color);
    width: 8rem;
    transition: var(--st-transition);
}

.harmful-notice .harmful-notice-wrap .institute .links a:hover {
    color: var(--bs-tertiary);
}

.harmful-notice .harmful-notice-wrap .institute .links a:hover .icon {
    background: var(--bs-primary);
}

.harmful-notice .harmful-notice-wrap .institute .links a .icon {
    width: 5rem;
    height: 5rem;
    border-radius: 5rem;
    background: var(--bs-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: inherit;
    margin-bottom: .25rem;
}

.harmful-notice .harmful-notice-wrap .institute .links a .icon img {
    width: 4rem;
    transition: inherit;
}

.harmful-notice .harmful-notice-wrap .institute .links a span {
    line-height: 1;
    display: block;
    height: 1.75rem;
    display: flex;
    align-items: center;
}

.harmful-notice .harmful-notice-wrap .institute .links ul .slick-arrow {
    display: block;
    font-size: 3.5rem;
    color: var(--bs-gray-500);
    cursor: pointer;
}

.harmful-notice .harmful-notice-wrap .institute .links ul .slick-arrow:hover {
    color: var(--bs-gray-700);
}

.harmful-notice .harmful-notice-wrap .institute .links ul li {
    display: flex!important;
    justify-content: center;
}

.intro-board {
    margin-top: 6rem;
    padding: 4rem 0 6rem;
    background: var(--bs-gray-200);
}

.intro-board .board-wrap {
    display: flex;
    gap: 4rem;
    justify-content: space-between;
}

.intro-board .board-wrap .notice, 
.intro-board .board-wrap .reference {
    width: calc(50% - 2rem);
}

.intro-board .board-wrap .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px var(--bs-gray-600) solid;
    padding-bottom: 1rem;
}

.intro-board .board-wrap .header h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.intro-board .board-wrap .header a {
    display: flex;
    width: fit-content;
    align-items: center;
    font-size: .9rem;
    font-weight: 700;
    color: var(--bs-gray-600);
    transition: var(--st-transition);
}

.intro-board .board-wrap .header a span {
    font-size: 1rem;
}

.intro-board .board-wrap .header a:hover {
    color: var(--bs-tertiary);
}

.intro-board .board-wrap .list {
    list-style: none;
    margin: 0;
    padding: 1rem 0;
}

.intro-board .board-wrap .list li {position: relative;}

.intro-board .board-wrap .list li a {
    display: flex;
    padding: .5rem 1rem;
    justify-content: space-between;
    gap: 2rem;
    /* transition: var(--st-transition); */
    border-radius: 1rem;
}

.intro-board .board-wrap .list li a .date {
    font-size: .9rem;
    color: var(--bs-gray-600);
    width: 6rem;
    flex-shrink: 0;
    text-align: right;
}

.intro-board .board-wrap .list li a .title {
    position: relative;
    width: calc(100% - 8rem);
    /* padding-right: 2.5rem; */
    display: flex;
    gap: .5rem;
    align-items: center;
}

.intro-board .board-wrap .list li a .title p {
    /* width: 100%; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    color: var(--bs-body-color);
}

.intro-board .board-wrap .list li a .title span {
    display: flex;
    /* position: absolute; */
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background: var(--bs-tertiary);
    color: #fff;
    font-size: 1rem;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
}

.intro-board .board-wrap .list li a:hover {
    background: #fff;
}

.intro-board .board-wrap .list li a:hover p {
    color: var(--bs-tertiary);
}

.footer-banner {
    border-top: 1px var(--bs-border-color) solid;
    border-bottom: 1px var(--bs-border-color) solid;
    padding: .75rem 0;
}

.footer-banner ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-banner ul li {
    margin-right: 2.5rem;
    padding-right: 2.5rem;
    border-right: 1px var(--bs-border-color) solid;
}

.footer-banner ul li:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

footer {
    padding: 2.5rem 0;
    border-top: 1px var(--bs-border-color) solid;
}

.footer-banner + footer {
    border-top: none;
}

footer .footer-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .9rem;
}

footer .footer-wrap .links {
    display: flex;
    gap: 2.5rem;
}

footer .footer-wrap .links a {
    color: var(--bs-gray-700);
}

footer .footer-wrap .links a:hover {
    color: var(--bs-tertiary);
}

footer .footer-wrap .address p {
    margin-bottom: .25rem;
}

footer .footer-wrap .address {
    color: var(--bs-gray-700);
}

footer .footer-wrap .address img {
    margin-bottom: 1rem;
}

footer .footer-wrap .address small {
    display: block;
    font-size: .75rem;
}

@media (max-width: 1199px) {
    .sitehead .sitehead-menu-wrap .sitehead-menu {
        gap: 4rem;
    }

    .main-banner .main-banner-bar-wrap .main-banner-bar-background {
        right: 2rem;
    }

    .main-banner .main-banner-bar-wrap .main-banner-bar {
        flex-wrap: wrap;
        gap: 0;
        padding: 0 2rem;
        height: 6rem;
    }

    .main-banner .main-banner-bar-wrap .main-banner-bar p {
        width: 100%;
    }

    .main-banner .main-banner-bar-wrap .main-banner-bar a {
        margin-top: -1.5rem;
        padding: .125rem 1.5rem;
    }

    .main-banner {
        padding-top: 3rem;
    }

    .harmful-notice .harmful-notice-wrap .count .inform {
        flex-wrap: wrap;
        gap: 0;
    }

    .harmful-notice .harmful-notice-wrap .count .inform .number {
        margin-top: -5rem;
    }

    .harmful-notice .harmful-notice-wrap .count .inform .text {
        width: 100%;
    }

    footer .footer-wrap {
        flex-direction: column-reverse;
        gap: 2rem;
        align-items: baseline;
    }
}

@media (max-width: 991px) {
    .main-visual .main-visual-contents {
        flex-wrap: wrap;
    }

    .main-visual .main-visual-contents .title {
        width: 100%;
    }

    .main-visual .main-visual-contents .links {
        width: 100%;
        grid-template-columns: repeat(4, 1fr);
        margin-top: 2rem;
        gap: 1rem
    }

    .main-visual .main-visual-contents .links a {
        width: 100%;
        height: 5rem;
        gap: .25rem;
    }

    .main-visual .main-visual-contents .links a > span {
        font-size: 1.5rem;
    }


    .main-banner .main-banner-bar-wrap .main-banner-bar-background {
        right: auto;
        left: calc(100% - 15rem);
    }

    .main-banner .main-banner-bar-wrap .main-banner-bar {
        padding-right: 15rem;
    }

    .client-banner .client-banner-bar-inner {
        gap: 2rem;
    }

    .client-banner .client-banner-bar-inner > li::after {
        right: -1rem;
    }

    .harmful-notice .harmful-notice-wrap .count {
        width: 100%;
        height: 20rem;
    }

    .harmful-notice .harmful-notice-wrap .answer {
        width: 100%;
        min-height: 8.5rem;
    }

    .harmful-notice .harmful-notice-wrap .institute {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .harmful-notice .harmful-notice-wrap .institute .title {
        flex-shrink: unset;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .harmful-notice .harmful-notice-wrap .institute .links {
        width: 100%;
    }

    .intro-board .board-wrap {
        flex-wrap: wrap;
    }

    .intro-board .board-wrap .notice, .intro-board .board-wrap .reference {
        width: 100%;
    }
}

@media (max-width: 767px) {
    html {
        font-size: 14px;
    }

    .main-visual .main-visual-contents .title > h1 {
        font-size: 2.75rem;
        margin-bottom: 1rem;
    }

    .main-visual .main-visual-contents .title > h2 {
        font-size: 1.5rem;
    }

    .main-visual .main-visual-background {
        background-position: right;
    }

    .main-visual {
        height: 640px;
    }

    .main-banner {
        border-top-left-radius: 2.5rem;
        border-top-right-radius: 2.5rem;
        padding-top: 1.5rem;
    }

    .main-banner .main-banner-bar-wrap .main-banner-bar-background {left: calc(100% - 12.5rem);}

    .main-banner .main-banner-bar-wrap .main-banner-bar-background > img {
        width: 12.5rem;
    }

    .main-banner .main-banner-bar-wrap {
        height: 10rem;
    }

    .main-banner .main-banner-bar-wrap .main-banner-bar {
        padding: 2rem 1rem 0;
        height: 7.5rem;
        border-radius: 1.5rem;
    }

    .main-banner .main-banner-bar-wrap .main-banner-bar p {
        font-size: 1.2rem;
    }

    .main-banner .main-banner-bar-wrap .main-banner-bar a {
        width: 100%;
        text-align: center;
    }

    .client-banner .client-banner-bar-wrap {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .client-banner .client-banner-bar-header {
        margin: 0 auto;
    }

    .client-banner .client-banner-bar-header a {
        padding: .25rem 2rem;
    }

    .harmful-notice .harmful-notice-wrap .header h3 {
        font-size: 1.5rem;
    }

    .client-banner .client-banner-bar-inner > li {
    }

    .harmful-notice .harmful-notice-wrap .institute .links ul .slick-arrow {
        font-size: 2rem;
    }

    .harmful-notice .harmful-notice-wrap .institute .links ul {
        gap: .5rem;
    }

    .footer-banner ul {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .footer-banner ul li {
        margin: 0;
        padding: 0;
        border: none;
    }

    footer .footer-wrap .links {
        flex-wrap: wrap;
        gap: 1rem 2rem;
    }
}


.sub-header {
    margin-top: 7.5rem;
}

.sub-header-wrap {
    padding: 3.75rem 0 1.5rem;
    border-bottom: 1px var(--bs-border-color) solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub-header-wrap .title {
    position: relative;
}

.sub-header-wrap .title h1 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--bs-primary);
    margin: 0;
}

.sub-header-wrap .breadcrumb {
    position: relative;
    margin: 0;
}

.sub-header-wrap .breadcrumb ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sub-header-wrap .breadcrumb ul li {
    position: relative;
    font-size: .9rem;
    color: var(--bs-gray);
    margin-right: 2rem;
}

.sub-header-wrap .breadcrumb ul li span {
    font-variation-settings: 'FILL' 1;
    font-size: 1.2rem;
    line-height: 1.2;
}

.sub-header-wrap .breadcrumb ul li:last-child {
    margin-right: 0;
    font-weight: 700;
}

.sub-header-wrap .breadcrumb ul li::after {
    content: '\e5cc';
    font-family: 'Material Symbols Rounded';
    position: absolute;
    font-size: 1rem;
    font-weight: 900;
    right: -1.5rem;
    top: 0;
}

.sub-header-wrap .breadcrumb ul li:last-child::after {
    content: '';
    display: none;
}


.sub-content-wrap {
    position: relative;
    padding: 4rem 0;
    /* transition: opacity 1.5s;
    opacity: 1;
    transform: translateY(0);
    animation: subFadeEvent 1.5s ease; */
}

.sub-content-wrap .content-box {
    position: relative;
    margin: 6rem 0;
}

.sub-content-wrap .content-box:first-child {
    margin-top: 0;
}

.content-box .page-summary h3 {
    font-weight: 800;
    font-size: 2rem;
}

.content-box .page-summary p {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.content-box h4 {
    position: relative;
    
    margin-bottom: 1rem;
    padding-left: .875rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.content-box h4.inline-block {
    display: inline-block;
}

.content-box h4::before {
    content: '';
    display: block;
    width: .375rem;
    height: .25rem;
    position: absolute;
    background: var(--bs-red);
    left: 0;
    top: .5rem;
}

.content-box h4::after {
    content: '';
    display: block;
    width: .375rem;
    height: .25rem;
    position: absolute;
    background: var(--bs-primary);
    left: 0;
    top: .75rem;
}

.content-box .define-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
}

.content-box .define-list > li {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-weight: 700;
    word-break: keep-all;
    background-color: var(--bs-primary);
    padding: 2rem;
    border-radius: 1rem;
    line-height: 1.2;
    flex: 1;
    position: relative;
}

.content-box .define-list > li:not(:last-child)::after {
    content: '\e5c8';
    font-family: 'Material Symbols Rounded';
    position: absolute;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--bs-gray);
    top: 50%;
    transform: translateY(-50%);
    right: -2rem;
}

.content-box .step-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    counter-reset: step-list;
}

.content-box .step-list > li {
    counter-increment: step-list 1;
    position: relative;
    background: #fff;
    border: 1px var(--bs-border-color) solid;
    border-radius: 1rem;
    flex: 1;
    margin-top: .5rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.content-box .step-list > li::before {
    content: 'STEP' counter(step-list);
    position: absolute;
    display: block;
    background: #fff;
    top: -.75rem;
    left: 1rem;
    font-weight: 700;
    font-size: .9rem;
    padding: 0 1rem;
    color: var(--bs-gray);
}

.content-box .step-list > li > .icon {
    width: 5rem;
    height: 5rem;
    border-radius: 5rem;
    background: var(--bs-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem;
}

.content-box .step-list > li > .icon > img {
    display: block;
    width: 4rem;
}

.content-box .step-list > li > small {
    font-weight: 400;
}

.content-box .step-list > li:not(:last-child)::after {
    content: '\e5cc';
    display: block;
    color: var(--bs-gray-400);
    font-family: 'Material Symbols Rounded';
    position: absolute;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 0;
    left: 100%;
}

.content-box .system-flow-wrap {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.content-box .system-flow-wrap .system-flow-box {
    flex: 1;
    background-color: var(--bs-gray-100);
    border-radius: 1rem;
    padding: 1rem;
}

.content-box .system-flow-wrap .system-flow-box h5 {
    font-size: 1rem;
    font-weight: 700;
    padding: 0 .5rem 1rem;
    border-bottom: 1px var(--bs-border-color) solid;
    margin: 0;
}

.content-box .system-flow-wrap .system-flow-box h5::before {
    display: none;
}

.content-box .system-flow-wrap .system-flow-box h5 > img {
    display: block;
    margin-top: -.4rem;
    margin-bottom: -.4rem;
}

.content-box .system-flow-wrap .system-flow-box ul {
    list-style: none;
    margin: 0;
    padding: 1rem .5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.content-box .system-flow-wrap .system-flow-box ul li {
    background: #000;
    display: flex;
    align-items: center;
    height: 2.75rem;
    border-radius: 10rem;
    font-weight: 700;
    color: #fff;
    padding: 0 1rem;
    gap: .5rem;
}

.content-box .system-flow-wrap .system-flow-box ul li p {
    margin: 0;
}

.content-box .system-flow-wrap .system-flow-box.step01 ul li {
    background-color: #fff;
}

.content-box .system-flow-wrap .system-flow-box.step02 ul li {
    background-color: var(--bs-primary);
}

.content-box .system-flow-wrap .system-flow-box.step03 ul li {
    background-color: var(--bs-blue);
}

.content-box .system-flow-wrap .system-flow-box.step03 {
    flex: .75;
}

.content-box .system-flow-wrap .system-flow-box.step02 ul li:nth-child(2) {
    position: relative;
}

.content-box .system-flow-wrap .system-flow-box.step02 ul li:nth-child(2)::before {
    content: '\eef6';
    display: block;
    color: var(--bs-tertiary);
    font-family: 'Material Symbols Rounded';
    position: absolute;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 0;
    font-variation-settings: 'FILL' 1;
    top: -.75rem;
    left: 50%;
    transform: translateX(-50%);
}

.content-box .system-flow-wrap .system-flow-box.step02 ul li:nth-child(2)::after {
    content: '\eef6';
    display: block;
    color: var(--bs-tertiary);
    font-family: 'Material Symbols Rounded';
    position: absolute;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 0;
    font-variation-settings: 'FILL' 1;
    transform: rotate(180deg) translateX(50%);
    bottom: -.75rem;
    left: 50%;
}

.content-box .system-flow-wrap .system-flow-arrow {
    position: relative;
    flex: .75;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
}

.content-box .system-flow-wrap .system-flow-arrow > .arrow {
    position: relative;
    text-align: center;
    font-size: .9rem;
    font-weight: 700;
    color: var(--bs-primary);
}

.content-box .system-flow-wrap .system-flow-arrow > .arrow::before {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--bs-gray-400);
    border-radius: 4px;
    position: absolute;
}

.content-box .system-flow-wrap .system-flow-arrow > .arrow.right::before {
    bottom: -4px;
}

.content-box .system-flow-wrap .system-flow-arrow > .arrow.left::before {
    top: -4px;
}

.content-box .system-flow-wrap .system-flow-arrow > .arrow-dot {
    position: absolute;
    width: 100%;
    border-bottom: 1px var(--bs-gray-600) dashed;
    bottom: 3.25rem;
}

.content-box .system-flow-wrap .system-flow-arrow > .arrow.right::after {
    content: '\e5cc';
    display: block;
    color: var(--bs-gray-400);
    font-family: 'Material Symbols Rounded';
    position: absolute;
    font-size: 2.5rem;
    font-weight: 500;
    bottom: -2px;
    right: -16px;
    line-height: 0;
}

.content-box .system-flow-wrap .system-flow-arrow > .arrow.left::after {
    content: '\f46b';
    display: block;
    color: var(--bs-gray-400);
    font-family: 'Material Symbols Rounded';
    position: absolute;
    font-size: 2.5rem;
    font-weight: 500;
    top: -2px;
    left: -16px;
    line-height: 0;
}

.content-box .system-flow-wrap .system-flow-arrow > .arrow-dot.right::before {
    content: '\e5df';
    display: block;
    color: var(--bs-gray-600);
    font-family: 'Material Symbols Rounded';
    position: absolute;
    font-size: 1.5rem;
    top: 1px;
    right: -10px;
    line-height: 0;
}

.content-box .imgbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.content-box .imgbox-list > li {
    position: relative;
    flex: 1;
    border: 1px var(--bs-border-color) solid;
    padding: .5rem .5rem 1rem;
    border-radius: 1rem;
    text-align: center;
    font-weight: 700;
}

.content-box .imgbox-list > li .img {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 66.667%;
    border-radius: .5rem;
    margin-bottom: .75rem;
}

.content-box .imgbox-list > li .img > img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-box  .borderbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.content-box .borderbox-list > li {
    position: relative;
    border: 1px var(--bs-tertiary) solid;
    /* border-bottom: 2px var(--bs-tertiary) solid; */
    border-radius: 1rem;
    flex: 1;
    padding: 1rem 1.2rem;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.content-box .borderbox-list > li > h5 {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--bs-primary);
}

.content-box .borderbox-list > li > p {
    margin: 0;
    line-height: 1.2;
}

.content-box .borderbox-list > li::before {
    content: '';
    display: block;
    position: absolute;
    width: 40px;
    height: 4px;
    background: var(--bs-gray-400);
    transform: rotate(-45deg);
    left: -8px;
    top: 10px;
    z-index: -1;
}

.content-box .contact-info {
    position: relative;
    display: flex;
    align-items: center;
    border: 2px var(--bs-blue) solid;
    border-radius: 1rem;
    margin-top: 2rem;
    padding: 0 2rem;
    gap: 2rem;
    background-color: var(--bs-gray-100);
}

.content-box .contact-info .icon {
    margin-top: -2rem;
    width: 100%;
    max-width: 15rem;
}

.content-box .contact-info .icon > img {
    width: 100%;
}

.content-box .contact-info .info {
    /* width: 100%; */
    font-size: 1.125rem;
}

.content-box .contact-info .info ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.content-box .contact-info .info ul li {
    position: relative;
    padding-left: 1.5rem;
    display: flex;
    line-height: 1;
}

.content-box .contact-info .info ul li::before {
    content: '';
    display: block;
    width: .75rem;
    height: .25rem;
    border-radius: .5rem;
    background: var(--bs-tertiary);
    position: absolute;
    left: 0;
    top: .5rem;
}

.content-box .contact-info .info ul li b {
    margin-right: .5rem;
    color: var(--bs-tertiary);
    display: inline-block;
    min-width: 4rem;
}

.content-box .contact-info .info ul li:not(:last-child) {
    margin-bottom: 1rem;
}

.content-box .api-guide-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.content-box .api-guide-list li {
    position: relative;
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    border: 2px var(--bs-primary) solid;
    border-radius: 1rem;
    overflow: hidden;
    padding-top: 1rem;
}

.content-box .api-guide-list li::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 1rem;
    background: var(--bs-primary);
    top: 0;
}

.content-box .api-guide-list li .title {
    text-align: center;
    padding: .5rem 1rem;
    font-weight: 700;
}

.content-box .api-guide-list li .content {
    text-align: center;
    padding: .5rem 1rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: keep-all;
}

.content-box .api-guide-list li .title + .content {
    border-top: 1px var(--bs-border-color) dashed;
}

.content-box .api-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
}


.api-input-wrap {
    position: relative;
    padding: 0 1rem 1.5rem;
}

.api-input-wrap .api-input-row {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.api-input-wrap .api-input-row:not(:last-child) {
    margin-bottom: .5rem;
}

.api-input-wrap .api-input-row > label {
    position: relative;
    line-height: 1;
    word-wrap: break-word;
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--bs-gray-700);
    flex-shrink: 0;
    min-width: 6rem;
}

.api-input-wrap .api-input-row input[type='number']::-webkit-outer-spin-button, 
.api-input-wrap .api-input-row input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.api-input-wrap .api-input-row .w-20 {
    width: 20%;
}

.api-input-wrap .api-input-row .w-30 {
    width: 30%;
}

.api-input-wrap .api-input-row .w-40 {
    width: 40%;
}

.api-input-wrap .api-input-row .w-50 {
    width: 50%;
}

.api-input-wrap .api-input-row.no-label {
    padding-left: 6.5rem;
}

.api-input-wrap .api-input-row > label.required::after {
    content: '*';
    position: relative;
    color: var(--bs-danger);
    top: -.25rem;
    left: .125rem;
}

.api-agree-wrap {
    position: relative;
    display: flex;
    gap: 1rem;
    justify-content: end;
    align-items: center;
    margin-bottom: 1rem;
}

.api-submit-wrap {
    position: relative;
    margin-bottom: 1rem;
}

.api-submit-wrap .api-submit {
    display: block;
    width: 100%;
    font-weight: 700;
}


@media (max-width: 1199px) {
    .content-box .define-list > li {
        padding: 1.2rem;
    }

    .content-box .step-list > li {
        padding: 1rem;
    }

    .content-box .system-flow-wrap {
        gap: .5rem;
    }

    .content-box .system-flow-wrap .system-flow-arrow {
        flex: .25;
    }
}

@media (max-width: 991px) {
    .sub-header {
        margin-top: 4rem;
    }

    .content-box .define-list {
        flex-direction: column;
        gap: 1.5rem;
    }

    .content-box .define-list > li {
        padding: 1rem;
    }

    .content-box .define-list > li:not(:last-child)::after {
        content: '\e5db';
        right: auto;
        top: 100%;
        transform: translateY(0);
    }

    .content-box .step-list {
        flex-direction: column;
    }

    .content-box .step-list > li {
        flex-direction: row;
        gap: 1rem;
        justify-content: normal;
    }

    .content-box .step-list > li > .icon {
        margin: 0;
    }

    .content-box .step-list > li:not(:last-child)::after {
        content: '\e313';
        left: calc(50% - 1.25rem);
        top: calc(100% + 1.25rem);
    }

    .content-box .system-flow-wrap {
        flex-direction: column;
    }

    .content-box .system-flow-wrap .system-flow-box ul {
        gap: .5rem;
        padding: .5rem;
    }

    .content-box .system-flow-wrap .system-flow-arrow {
        flex: auto;
        flex-direction: row;
        gap: 3rem;
    }

    .content-box .system-flow-wrap .system-flow-box ul {
        flex-direction: row;
    }

    .content-box .system-flow-wrap .system-flow-box ul li {
        flex: 1;
        justify-content: center;
        height: 2.5rem;
    }

    .content-box .system-flow-wrap .system-flow-arrow > .arrow {
        display: flex;
        align-items: center;
        height: 3.5rem;
    }

    .content-box .system-flow-wrap .system-flow-arrow > .arrow::before {
        width: 4px;
        height: 100%;
    }

    .content-box .system-flow-wrap .system-flow-arrow > .arrow.right::before {
        bottom: auto;
        right: -12px;
    }

    .content-box .system-flow-wrap .system-flow-box.step01 + .system-flow-arrow {
        padding-right: 9.5rem;
    }

    .content-box .system-flow-wrap .system-flow-arrow > .arrow.right::after {
        content: '\e313';
        bottom: auto;
        right: auto;
        left: calc(100% - 10px);
        top: calc(100% - 4px);
    }

    .content-box .system-flow-wrap .system-flow-arrow > .arrow.left::after {
        content: '\e316';
        top: 4px;
        left: -29px;
    }

    .content-box .system-flow-wrap .system-flow-arrow > .arrow.left::before {
        top: auto;
        left: -12px;
    }

    .content-box .system-flow-wrap .system-flow-box.step02 + .system-flow-arrow {
        padding-right: 3rem;
    }

    .content-box .system-flow-wrap .system-flow-box.step02 ul li:nth-child(2)::before,
    .content-box .system-flow-wrap .system-flow-box.step02 ul li:nth-child(2)::after {
        display: none;
    }

    .content-box .system-flow-wrap .system-flow-arrow > .arrow-dot {
        display: none;
    }

    .content-box .imgbox-list {
        flex-wrap: wrap;
    }

    .content-box .imgbox-list > li {
        flex: none;
        width: calc(50% - 1rem);
    }

    .content-box .borderbox-list {
        flex-direction: column;
        gap: 1rem;
    }

    .content-box .borderbox-list > li {
        /* padding: .75rem 1.2rem; */
        align-items: normal;
        /* text-align: left; */
    }

    .content-box .borderbox-list > li > p {
        padding-left: .5rem;
    }

    .content-box .contact-info .icon {
        max-width: 10rem;
        align-self: self-end;
    }

    .content-box .contact-info {
        padding: 0 1rem;
    }

    .content-box .contact-info .info {
        font-size: 1rem;
        padding: 1.5rem 0;
        flex-shrink: 0;
    }

    .content-box .api-guide-list {
        flex-direction: column;
        gap: 1rem;
    }

    .content-box .api-guide-list li {
        flex: unset;
    }

    .content-box .api-links {
        flex-wrap: wrap;
    }

    .content-box .api-links li {
        width: calc(50% - .5rem);
    }

    .content-box .api-links li:first-child {
        width: 100%;
    }

    .content-box .api-links li a {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .sub-header-wrap {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: normal;
    }
    .content-box .system-flow-wrap .system-flow-box ul {
        flex-direction: column;
    }

    .content-box .system-flow-wrap .system-flow-box ul li {
        padding: .25rem;
    }

    .content-box .system-flow-wrap .system-flow-arrow > .arrow.right::after {
        left: calc(100% - 8px);
    }

    .content-box .system-flow-wrap .system-flow-arrow > .arrow.left::after {
        left: -28px;
    }
    
    .content-box .contact-info {
        flex-direction: row-reverse;
        padding-right: 0;
        overflow: hidden;
        justify-content: space-around;
    }

    .content-box .contact-info .icon {
        transform: rotateY(180deg);
    }


    .api-input-wrap .api-input-row {
        position: relative;
        padding-top: 1rem;
    }

    .api-input-wrap .api-input-row > label {
        position: absolute;
        top: 0;
    }

    .api-input-wrap .api-input-row:not(:last-child) {
        margin-bottom: 1rem;
    }

    .api-input-wrap .api-input-row.no-label {
        padding: 0;
    }

    .api-input-wrap .api-input-row + .no-label {
        margin-top: -.5rem;
    }

    .api-agree-wrap {
        flex-wrap: wrap;
        gap: 0 1rem;
        justify-content: center;
    }

    .api-agree-wrap .api-agree {
        width: 100%;
        text-align: center;
    }

}



.history-bar {
    position: relative;
    padding: 2rem 0;
}

.history-bar::before {
    content: '';
    display: block;
    position: absolute;
    width: 2px;
    height: 100%;
    background: var(--bs-gray-400);
    top: 0;
    left: 50%;
    margin-left: -1px;
    border: 1px #fff dashed;
}

.history-bar::after {
    content: '';
    display: block;
    position: absolute;
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
    background: var(--bs-primary);
    border: 7px #fff double;
    left: 50%;
    margin-left: -1rem;
    bottom: 0;
}

.history-wrap {
    display: flex;
}

.history-wrap:nth-child(even) {
    justify-content: end;
}

.history-box {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
}

.history-wrap:nth-child(odd) .history-box {
    justify-content: flex-end;
}

.history-year {
    font-size: 2rem;
    font-weight: 400;
    background: #fff;
    width: fit-content;
    color: var(--bs-gray-600);
    position: relative;
}

.history-year::before {
    content: '';
    display: block;
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 2rem;
    background: var(--bs-tertiary);
    border: .333rem #fff double;
    top: 50%;
    margin-top: -.75rem;
}

.history-wrap:nth-child(odd) .history-year {
    padding-right: 1.5rem;
}

.history-wrap:nth-child(even) .history-year {
    padding-left: 1.5rem;
}

.history-wrap:nth-child(odd) .history-year::before {
    right: -0.75rem;
}

.history-wrap:nth-child(even) .history-year::before {
    left: -.75rem;
}

.history-list {
    margin: .5rem 0 3rem;
    padding: 0;
    width: 100%;
    list-style: none;
}

.history-list li {
    width: 100%;
    position: relative;
    margin: .5rem 0;
}

.history-list li p {
    margin: 0;
}

.history-wrap:nth-child(odd) .history-box .history-list {
    text-align: right;
    padding-right: 1.5rem;
}

.history-wrap:nth-child(even) .history-box .history-list {
    padding-left: 1.5rem;
}

.history-list li::before {
    content: '';
    display: block;
    width: .5rem;
    height: .5rem;
    border-radius: 1rem;
    position: absolute;
    background: var(--bs-blue);
    top: 0.5rem;
    transition: all .3s ease;
}

.history-wrap:nth-child(odd) .history-box .history-list li::before {
    right: -1.75rem;
}

.history-wrap:nth-child(even) .history-box .history-list li::before {
    left: -1.75rem;
}

.history-list li:hover::before {
    width: 1rem;
    height: 1rem;
    top: 0.25rem;
}

.history-wrap:nth-child(odd) .history-box .history-list li:hover::before {
    right: -2rem;
}

.history-wrap:nth-child(even) .history-box .history-list li:hover::before {
    left: -2rem;
}

@media (max-width: 767px) {
    .history-bar::before {
        left: 2rem;
        margin: 0;
    }

    .history-bar::after {
        left: 2rem;
    }

    .history-box {
        width: 100%;
        padding-left: 2.125rem;
    }

    .history-wrap:nth-child(odd) .history-box {
        justify-content: normal;
    }

    .history-wrap:nth-child(odd) .history-year {
        padding-right: 0;
        padding-left: 1.5rem;
    }

    .history-wrap:nth-child(odd) .history-year::before {
        right: auto;
        left: -.75rem;
    }

    .history-wrap:nth-child(odd) .history-box .history-list {
        text-align: left;
        padding-right: 0;
        padding-left: 2rem;
    }

    .history-wrap:nth-child(odd) .history-box .history-list li::before {
        right: 0;
        left: -2.25rem;
    }

    .history-wrap:nth-child(odd) .history-box .history-list li:hover::before {
        right: 0;
        left: -2.5rem;
    }

}

.board-search-wrap {
    position: relative;
    display: flex;
    background: var(--bs-gray-100);
    padding: 1.5rem 2rem;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;
    border-radius: 1rem;
}

.board-search-wrap .search-condition {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
}

.board-search-wrap .search-condition .input-wrap {
    width: calc(50% - 1rem);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.board-search-wrap .search-condition .input-wrap .input-label {
    font-weight: 700;
    flex-shrink: 0;
    min-width: 3.5rem;
}

.board-search-wrap .search-condition .input-form {
    flex: 1;
}

.form-control.input-date {
    /* position: relative; */
    /* padding-left: 2.5rem; */
    /* cursor: pointer; */
}

.board-search-wrap .search-condition .input-wrap .input-date-range-row {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/*input:date 가로 길이 이슈로 특정 레이아웃에서 강제 사이즈 지정*/
@media (min-width: 992px) and (max-width: 1199px) {
    .form-control.input-date {
        max-width: 8.375rem;
    }
}

.form-control.input-date + .material-symbols-rounded {
    position: absolute;
    display: block;
    margin-top: -2rem;
    margin-left: .5rem;
    color: var(--bs-gray);
    font-variation-settings: 'FILL' 1;
}

.board-list-wrap {
    position: relative;
}

.board-search-wrap + .board-list-wrap {
    margin-top: 2.5rem;
}

.board-list-header {
    display: flex;
    width: 100%;
    align-items: end;
    justify-content: space-between;
    margin-bottom: .5rem;
    gap: 2.5rem;
}

.board-list-header .list-caption {
    flex-shrink: 0;
    font-weight: 600;
    font-size: .9rem;
    color: var(--bs-gray-700);
}

.board-list-header .list-search {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.board-list-table {
    display: block;
}

.table.basic-table {
    border-top: 2px var(--bs-border-color) solid;
    vertical-align: middle;
}

.table.basic-table thead td, .table.basic-table thead th {
    background: var(--bs-gray-100);
}

.table.basic-table td, .table.basic-table th {
    padding: 1rem .5rem;
    white-space: nowrap;
}

.board-list-table .basic-table tbody tr td.allow-double {
    white-space: unset;
}

.table.basic-table .table-data-file {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.table.basic-table .attach-file {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background: var(--bs-tertiary);
    color: #fff;
    font-size: 1rem;
    justify-content: center;
    align-items: center;
    margin-left: .25rem;
    line-height: 1;
    position: relative;
    top: 2px;
}

.board-list-table .basic-table tbody tr {
    cursor: pointer;
}

.board-list-table .basic-table tbody tr td {
    transition: var(--st-transition);
}

.board-list-table .basic-table tbody tr:hover td {
    color: var(--bs-blue);
    background: #fafafa;
}


.board-list-pagination {
    margin-top: 2.5rem;
}

.board-list-pagination .pagination {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.board-list-pagination .pagination > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .5rem;
}

.board-list-pagination .pagination a {
    text-decoration: none;
    color: inherit;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
    /* transition: all .3s ease; */
    /* background: var(--bs-gray); */
}

.board-list-pagination .pagination a.disable {
    cursor: default;
    color: var(--bs-gray-400);
    pointer-events: none;
}

.board-list-pagination .pagination a.active {
    background: var(--bs-primary);
    color: #fff;
}

.board-list-pagination .pagination a:not(.active):hover {
    background: var(--bs-gray-200);
}

.board-list-pagination .pagination a.arrow:hover {
    background: transparent;
    color: var(--bs-secondary);
}

.detail-list-table {
    position: relative;
}

.document-table {
    border-top: 2px var(--bs-border-color) solid;
}

.document-table .document-header {
    padding: 1rem;
    background: var(--bs-gray-100);
    border-bottom: 1px var(--bs-border-color) solid;
}

.document-table .document-header .title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.document-table .document-header .info {
    color: var(--bs-gray-600);
    font-size: .9rem;
}

.document-table .document-header .info ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2.5rem;
    justify-content: end;
}

.document-table .document-header .title p {
    margin: 0;
}

.document-table .document-attach {
    padding: 1rem;
    border-bottom: 1px var(--bs-border-color) solid;
    display: flex;
    gap: 1.5rem;
}

.document-table .document-attach p {
    margin: 0;
    padding-top: .5rem;
    color: var(--bs-tertiary);
    font-weight: 700;
    flex-shrink: 0;
}

.document-table .document-attach ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    gap: .25rem .5rem;
}

.document-table .document-attach ul li a {
    display: block;
    position: relative;
    padding: .4rem 1rem;
    border: 1px var(--bs-blue) solid;
    color: var(--bs-blue);
    border-radius: .5rem;
    transition: var(--st-transition);
    padding-right: 2.5rem;
}

.document-table .document-attach ul li a:hover {
    background: var(--bs-blue);
    color: #fff;
}

.document-table .document-attach ul li a::after {
    content: '\f090';
    font-family: 'Material Symbols Rounded';
    position: absolute;
    font-size: 1rem;
    font-weight: 900;
    top: .4rem;
    right: 1rem;
    /* color: var(--bs-primary); */
}

.document-table .document-content {
    padding: 2rem 1rem;
    border-bottom: 1px var(--bs-border-color) solid;
}

.pseudo-table {
    border-top: 2px var(--bs-border-color) solid;
}

.pseudo-table .tr {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.pseudo-table .tr .td, .pseudo-table .tr .th {
    border-bottom: 1px var(--bs-border-color) solid;
    padding: 1rem;
}

.pseudo-table .tr .th {
    background: var(--bs-gray-100);
    font-weight: 700;
    width: 20%;
    flex: none;
}

.pseudo-table .tr .td {
    width: 30%;
}

.content-box h5.icon-check {
    position: relative;
    /* display: inline-block; */
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}

.content-box h5.icon-check.inline-block {
    display: inline-block;
}

.content-box h5.icon-check::before {
    content: '\e5ca';
    font-family: 'Material Symbols Rounded';
    position: absolute;
    font-size: 1rem;
    font-weight: 900;
    left: 0;
    top: .125rem;
    color: var(--bs-red);
}

.pseudo-table .tr .td.colspan {
    width: 80%;
}

.image-table {
    border-top: 2px var(--bs-border-color) solid;
    border-bottom: 1px var(--bs-border-color) solid;
    padding: 1rem;
}

.image-table > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
}

.image-table img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
}

.image-table > ul > li {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 120%;
}

.institute-list {
    list-style: none;
    margin-top: 1.5rem;
    padding: 0;
    border-top: 2px var(--bs-border-color) solid;
}

.institute-list li {
    border-bottom: 1px var(--bs-border-color) solid;
    padding: 1.5rem 1rem;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.institute-list li .logo {
    width: 8rem;
    flex-shrink: 0;
}

.institute-list li .logo > img {
    width: 100%;
}

.institute-list-table {
    position: relative;
}

.institute-table {
    min-width: 45rem;
    /* table-layout: fixed; */
    vertical-align: middle;
    border-top: 2px var(--bs-border-color) solid;
}

/* .institute-table-mobile-tip {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, .5);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.institute-table-mobile-tip > span {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
} */

.institute-table th {
    background-color: var(--bs-gray-100);
}

.institute-table td {
    border-left: 1px var(--bs-border-color) dashed;
}

.institute-table th, .institute-table td {
    padding: .75rem;
    word-break: keep-all;
}

.certification-wrap {
    display: flex;
    gap: 2.5rem;
}

.certification-wrap.reverse {
    flex-direction: row-reverse;
    text-align: right;
}

.certification-wrap img {
    width: 100%;
}

.certification-wrap .certification-logo {
    width: 20%;
}

.certification-wrap .certification-summary {
    font-size: 1.2rem;
    align-self: center;
}

.certification-wrap .certification-content {
    flex: 1;
}

.certification-wrap:not(:last-child) {
    margin-bottom: 5rem;
}

.comp-list-wrap {
    position: relative;
    transition: var(--st-transition);
}

.comp-list-category {
    position: relative;
    margin-bottom: 2.5rem;
}

.comp-list-category ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .5rem;
    /* justify-content: space-between; */
    flex-wrap: wrap;
}

.comp-list-category ul li {
    position: relative;
    /* flex: auto; */
    /* text-align: center; */
    border: 1px var(--bs-border-color) solid;
    border-radius: 1rem;
    background: var(--bs-gray-100);
    padding: .5rem 1rem .5rem 2.5rem;
    cursor: pointer;
    transition: var(--st-transition);
}

.comp-list-category ul li.current, .comp-list-category ul li:hover {
    border-color: var(--bs-tertiary);
    background: #fff;
    color: var(--bs-tertiary);
    font-weight: 700;
}

.comp-list-category ul li::before {
    content: '';
    display: block;
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background: #fff;
    left: 1rem;
    top: .6667rem;
    border: 1px var(--bs-border-color) solid;
}

.comp-list-category ul li.current::before {
    background: var(--bs-blue);
    border-color: var(--bs-teriary);
    box-shadow: 0 0 0 2px #fff inset;
}

.comp-list-content {
    position: relative;
}

.comp-list-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    transition: var(--st-transition);
}

.comp-list-content img {
    width: 100%;
    max-width: fit-content;
    /* display: block; */
    /* margin: 0 auto; */
}

.comp-list-content ul li {
    border: 1px var(--bs-gray-300) solid;
    border-radius: 1rem;
    padding: .5rem;
}

.comp-list-content ul li a.logo {
    display: block;
    padding: 1rem 2rem;
    text-align: center;
    transition: var(--st-transition);
}

.comp-list-content ul li .name {
    font-weight: 700;
    border-bottom: 1px var(--bs-gray-300) solid;
    margin-bottom: .5rem;
    padding: .5rem 1rem;
}

.comp-list-content ul li .kind {
    display: inline-block;
    padding: .125rem 1rem;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: var(--bs-primary);
    border-radius: 1rem;
    margin-bottom: .5rem;
}

.comp-list-content ul li a.logo.cursor-none {
    cursor: default;
    pointer-events: none;
}

.comp-list-content ul li a.logo:hover {
    padding: .75rem 1.5rem;
}

.board-list-faq {
    position: relative;
    display: block;
    margin: 1rem 0 2.5rem;
}

.board-list-faq .faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 2px var(--bs-border-color) solid;
}

.board-list-faq .faq-list > li {
    border-bottom: 1px var(--bs-border-color) solid;
}

.board-list-faq .faq-list .faq-list-question, .board-list-faq .faq-list .faq-list-answer {
    display: flex;
    gap: 1rem;
    padding: 1rem .5rem;
    word-break: keep-all;
}

.board-list-faq .faq-list .faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    background: var(--bs-gray-600);
    color: #fff;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 2.5rem;
    flex-shrink: 0;
    transition: var(--st-transition);
}

.board-list-faq .faq-list .faq-list-answer .faq-icon {
    background: var(--bs-primary);
}

.board-list-faq .faq-list .faq-text {
    padding-top: .475rem;
}

.board-list-faq .faq-list .faq-list-question .faq-text {
    font-weight: 700;
    color: var(--bs-gray-700);
    transition: var(--st-transition);
}

.board-list-faq .faq-list .faq-list-question {
    cursor: pointer;
}

.board-list-faq .faq-list .faq-list-answer {
    /* overflow: hidden; */
    background: var(--bs-gray-100);
    position: relative;
    transition: all .5s ease;
    display: none;
    transform-origin: top;
}

.board-list-faq .faq-list .faq-list-question.active + .faq-list-answer {
    padding: 1rem .5rem;
    display: flex;
    animation: faqAnswer .5s ease;
}

@keyframes faqAnswer {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

.board-list-faq .faq-list .faq-list-answer::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 0;
    border-top: 1px var(--bs-gray-400) dashed;
    top: 0;
    left: 0;
}

.board-list-faq .faq-list .faq-list-question:hover .faq-text {
    color: var(--bs-tertiary);
}

.board-list-faq .faq-list .faq-list-question:hover .faq-icon {
    background: var(--bs-tertiary);
}

.relation-site-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    list-style: none;
    /* gap: 2.5rem; */
    margin: 0;
    padding: 0;
    border-top: 2px var(--bs-border-color) solid;
    border-bottom: 1px var(--bs-border-color) solid;
}

.relation-site-list > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    border-bottom: 1px var(--bs-border-color) solid;
    padding: 1rem 1rem 4rem;
    margin-bottom: -1px;
}

.relation-site-list > li .logo img {
    display: block;
    width: 100%;
}

.relation-site-list > li > a {
    position: absolute;
    display: block;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
}

.relation-site-list .logo, .relation-site-list .name, .relation-site-list .m-name {
    display: block;
}

.relation-site-list .logo {
    padding: 0 1rem;
}

.relation-site-list p {
    /* margin: 0; */
    font-size: .9rem;
    color: var(--bs-gray);
    line-height: 1.2;
}

.relation-site-list .name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bs-gray-700);
}

.relation-site-list .m-name {
    background: var(--bs-gray-100);
    display: inline-block;
    padding: 0 1rem;
    margin-bottom: 1rem;
}


@media (max-width: 1199px) {
    .comp-list-content ul {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .comp-list-content ul li a.logo {
        padding: .75rem 1.5rem;
    }
    
    .comp-list-category ul {
        flex-wrap: wrap;
        justify-content: unset;
    }

    .relation-site-list {
        grid-template-columns: repeat(4, 1fr);
    }

}

@media (max-width: 991px) {
    .board-search-wrap {
        flex-direction: column;
        gap: 1rem;
    }

    .board-search-wrap .search-button {
        width: 100%;
    }

    .board-search-wrap .search-button .btn {
        display: block;
        width: 100%;
    }

    .board-search-wrap .search-condition .input-wrap {
        width: 100%;
    }

    .table.basic-table td, .table.basic-table th {
        white-space: unset;
    }

    .table.basic-table thead {
        display: none;
    }

    .table.basic-table tbody tr td {
        display: block;
        position: relative;
        text-align: left;
        padding: .125rem .5rem;
        border: none;
    }

    .table.basic-table tbody tr td:last-child {
        border-bottom: 1px var(--bs-border-color) solid;
        padding-bottom: 1rem;
    }

    .table.basic-table tbody tr td:first-child {
        padding-top: 1rem;
    }

    .table.basic-table tbody tr td[data-title]::before {
        content: attr(data-title) ' \:';
        display: inline-block;
        font-weight: 700;
        margin-right: .5rem;
        color: var(--bs-gray-800);
    }
    
    .board-list-pagination .pagination > ul {
        gap: 0.25rem;
    }

    .board-list-pagination .pagination a {
        width: 1.5rem;
        height: 1.5rem;
    }

    .pseudo-table .tr .td, .pseudo-table .tr .th {
        padding: .5rem .75rem;
    }

    .pseudo-table .tr .th {
        width: 35%;
    }

    .pseudo-table .tr .td {
        width: 65%;
    }

    .pseudo-table .tr .td.colspan {
        width: 65%;
    }

    .image-table > ul {
        grid-template-columns: repeat(4, 1fr);
    }

    .certification-wrap .certification-logo {
        width: calc(40% - 1rem);
    }

    .certification-wrap .certification-summary {
        font-size: 1rem;
        width: calc(60% - 1rem);
    }

    .certification-wrap .certification-summary p {
        line-height: 1.2;
        margin-bottom: .5rem;
    }

    .certification-wrap {
        flex-wrap: wrap;
        gap: 2rem;
    }

    .certification-wrap .certification-content {
        width: 100%;
        flex: auto;
    }

    .certification-wrap.reverse {
        flex-direction: unset;
        text-align: left;
    }

    .comp-list-category ul li {
        flex: unset;
        padding: .25rem 1.5rem .25rem 2rem;
    }

    .comp-list-content ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .comp-list-category ul li::before {
        width: .75rem;
        height: .75rem;
        left: .75rem;
        top: .6rem;
    }

    .relation-site-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .image-table > ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .institute-table-mobile-tip {
        display: flex;
    }

    .comp-list-content ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .relation-site-list {
        grid-template-columns: repeat(2, 1fr);
    }
}


.privacy-wrap {
    position: relative;
}


.privacy-wrap h4 {
    position: relative;
    margin-bottom: .5rem;
    padding-left: .875rem;
    /* font-size: 1.5rem; */
    font-weight: 700;
}

.privacy-wrap h4::before {
    content: '';
    display: block;
    width: .375rem;
    height: .25rem;
    position: absolute;
    background: var(--bs-red);
    left: 0;
    top: .5rem;
}

.privacy-wrap h4::after {
    content: '';
    display: block;
    width: .375rem;
    height: .25rem;
    position: absolute;
    background: var(--bs-primary);
    left: 0;
    top: .75rem;
}

.privacy-wrap h5 {
    position: relative;
    padding-left: .875rem;
    font-weight: 700;
}

.privacy-wrap h5::before {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 4px;
    background: var(--bs-tertiary);
    left: 0;
    top: calc(.5rem + 1px);
}

.privacy-wrap h6 {
    position: relative;
    font-weight: 700;
    padding-left: .875rem;
}

.privacy-wrap h6::before {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 4px;
    background: var(--bs-red);
    left: 0;
    top: 6px;
}

.privacy-wrap ul, .privacy-wrap ol {
    padding-left: 1.5rem;
    list-style: none;
    margin-bottom: .5rem;
}

.privacy-wrap ul li, .privacy-wrap ol li {
    position: relative;
}

.privacy-wrap ul.type01 > li::before {
    content: '';
    display: block;
    position: absolute;
    width: .5rem;
    height: 3px;
    border-radius: 3px;
    background: var(--bs-gray-500);
    left: -1rem;
    top: calc(.5rem + 1.5px);
}

.privacy-wrap ul.type02 > li::before {
    content: '\e5df';
    font-family: 'Material Symbols Rounded';
    display: block;
    position: absolute;
    left: -1.25rem;
    top: -.125rem;
    font-variation-settings: 'FILL' 1,
      'wght' 700;
    color: var(--bs-gray-500);
    font-size: 1.2rem;
}

.privacy-wrap ul.type03 > li::before {
    content: '\e5cc';
    font-family: 'Material Symbols Rounded';
    display: block;
    position: absolute;
    left: -1.25rem;
    top: -.125rem;
    font-variation-settings: 'FILL' 1,
      'wght' 700;
    color: var(--bs-gray-500);
    font-size: 1.2rem;
}

.privacy-wrap ol.type01 {
    counter-reset: privacylist1;
}

.privacy-wrap ol.type02 {
    counter-reset: privacylist2;
}

.privacy-wrap ol.type03 {
    counter-reset: privacylist3;
}


.privacy-wrap ol.type01 > li::before {
    counter-increment: privacylist1;
    content: counter(privacylist1);
    position: absolute;
    left: -.875rem;
    top: .175rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--bs-gray-600);
}

.privacy-wrap ol.type01 > li::after {
    content: '';
    display: block;
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: .875rem;
    border: 1px var(--bs-gray-500) solid;
    left: -1.15rem;
    top: .25rem;
}

.privacy-wrap ol.type02 > li::before {
    counter-increment: privacylist2;
    content: counter(privacylist2) '.';
    position: absolute;
    left: -.875rem;
    top: .175rem;
    font-size: .75rem;
    font-weight: 900;
    color: var(--bs-gray-600);
}

.privacy-wrap ol.type03 > li::before {
    counter-increment: privacylist3;
    content: counter(privacylist3);
    position: absolute;
    left: -.875rem;
    top: .175rem;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
}

.privacy-wrap ol.type03 > li::after {
    content: '';
    display: block;
    position: absolute;
    width: .875rem;
    height: .875rem;
    border-radius: .875rem;
    background: var(--bs-gray-600);
    left: -1.125rem;
    top: .275rem;
    z-index: -1;
}

.privacy-wrap p {
    margin-bottom: .5rem;
}

.privacy-wrap {
    margin-bottom: 2rem;
}

.privacy-table caption {
    display: none;
}

.privacy-table .table.basic-table td, 
.privacy-table .table.basic-table th {
    padding: .5rem;
}

.privacy-wrap .btn {
    position: relative;
    padding: 0 1rem;
    margin-top: -.25rem;
}

.email-callout {
    display: flex;
    background: var(--bs-tertiary);
    align-items: center;
    color: #fff;
    border-radius: 1rem;
    padding: 1rem 2rem;
    gap: 1.5rem;
}

.email-callout  .icon span {
    font-size: 2.5rem;
}

.email-callout .text {
    word-break: keep-all;
    font-weight: 700;
}

@media (max-width: 991px) {
    .privacy-table .table.basic-table td, .privacy-wrap .table.basic-table th {
        padding: .125rem;
    }
}

.sitemap-wrap {
    position: relative;
}

.sitemap-wrap .sitemap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2.5rem 5rem;
}

.sitemap-wrap .sitemap > li {
    position: relative;
}

.sitemap-wrap .sitemap > li > a {
    display: block;
    background: var(--bs-primary);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    padding: .5rem 1.5rem;
    border-radius: 1rem;
}

.sitemap-wrap .sitemap > li > ul {
    margin-top: 1rem;
    list-style: none;
    padding: 0;
    position: relative;
}

.sitemap-wrap .sitemap > li > ul > li {
    position: relative;
    padding: .5rem;
    padding-left: 2.5rem;
    font-weight: 700;
}

.sitemap-wrap .sitemap > li > ul > li::before {
    content: '';
    display: block;
    width: .75rem;
    height: 1px;
    position: absolute;
    background: var(--bs-gray-400);
    left: 1rem;
    top: 1.2rem;
}

.sitemap-wrap .sitemap > li > ul::before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: calc(100% - .25rem);
    background: var(--bs-gray-400);
    left: 1rem;
    top: -1rem;
}

.sitemap-wrap .sitemap > li > ul > li > a {
    color: var(--bs-tertiary);
    transition: var(--st-transition);
}

.sitemap-wrap .sitemap > li > ul > li > a:hover {
    color: var(--bs-red);
}

@media (max-width:991px) {
    .sitemap-wrap .sitemap {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 1.5rem;
    }

}


/*************/
/*layer-popup*/
/*************/

.layer-popup-wrap {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.5);
    top: 0;
    left: 0;
    z-index: 999;
    backdrop-filter: blur(4px);
}

.layer-popup-wrap .layer-popup {
    background: #fff;
    width: calc(100% - 2rem);
    max-width: 40rem;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: var(--st-box-shadow);
    cursor: default;
    max-height: calc(100% - 2rem);
    overflow: auto;
}

.layer-popup-wrap .layer-popup .layer-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px var(--bs-border-color) solid;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
}

.layer-popup-wrap .layer-popup .layer-popup-header h4 {
    font-weight: 700;
    color: var(--bs-primary);
    font-size: 1.25rem;
    margin: 0;
}

.layer-popup-wrap .layer-popup-header .layer-popup-close {
    color: var(--bs-gray);
    cursor: pointer;
    transition: var(--st-transition);
}

.layer-popup-wrap .layer-popup-header .layer-popup-close:hover {
    color: var(--bs-red);
}

.layer-popup-wrap .layer-popup-header .layer-popup-close span {
    display: block;
    font-weight: 700;
}

.popup-content {
    padding: 1rem;
}

.popup-content .content-box:not(:last-child) {
    border-bottom: 1px var(--bs-gray-300) solid;
    margin-bottom: 1rem;
}

.popup-content .content-box h4 {
    font-size: 1.2rem;
    margin-bottom: .5rem;
}

.popup-content .content-box p {
    padding-left: .8rem;
    word-break: keep-all;
}

.login-popup-wrap {
    position: relative;
    padding-bottom: 1.5rem;
}

.login-popup-header {
    position: relative;
    padding: 1rem 0;
}

.login-popup-header > img {
    width: 100%;
    max-width: 24rem;
    display: block;
    margin: 0 auto;
}

.login-popup-header > h4 {
    text-align: center;
    color: var(--bs-primary);
    font-weight: 700;
    margin-left: 4.5rem;
    margin-top: -1rem;
}

.login-popup-form {
    padding: 0 calc(100% - 30rem);
}

.login-input > input {
    display: block;
    margin-top: .6rem;
    font-weight: 400;
}

.login-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: .5rem 0;
}

.login-buttons {display: flex;gap: .5rem;}

.login-buttons > button {
    flex: 1;
    font-weight: 700;
    padding: .5rem 1rem;
}

/*팝업 내부 컨텐츠가 길어질 때 pc에서 스크롤 바 모양 처리*/
.layer-popup-wrap .layer-popup::-webkit-scrollbar {
    /* 스크롤바의 폭 너비 */
    width: 8px;  
}

.layer-popup-wrap .layer-popup::-webkit-scrollbar-thumb {
    background: var(--bs-tertiary); /* 스크롤바 색상 */
    border-radius: 8px; /* 스크롤바 둥근 테두리 */
    border: 2px rgba(255,255,255.0) solid;
}

.layer-popup-wrap .layer-popup::-webkit-scrollbar-track {
    background: rgba(255,255,255,0);  /*스크롤바 뒷 배경 색상*/
}

.layer-popup-wrap .layer-popup::-webkit-scrollbar-button:vertical:start:decrement,
.layer-popup-wrap .layer-popup::-webkit-scrollbar-button:vertical:start:increment {
    display: block;
    height: 16px;
}

.layer-popup-wrap .layer-popup::-webkit-scrollbar-button:vertical:end:decrement,
.layer-popup-wrap .layer-popup::-webkit-scrollbar-button:vertical:end:increment {
    display: block;
    height: 16px;
}

/**/
.search-account-popup {
    position: relative;
}

.search-account-popup > .info {
    position: relative;
    padding: 1rem 0 1rem 2rem;
    font-weight: 700;
    color: var(--bs-gray);
}

.search-account-popup > .info::before {
    content: '\e88e';
    display: block;
    position: absolute;
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 1;
    color: var(--bs-orange);
    left: 0;
    font-size: 1.5rem;
    top: .667rem;
}

.search-account-popup .api-input-wrap {
    background: var(--bs-gray-100);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 1rem;
}

.search-account-popup .api-submit-wrap {
    margin: 0;
}

.search-account-popup .search-id-result {
    text-align: center;
    border: 1px var(--bs-border-color) solid;
    border-radius: .5rem;
    background: #fff;
    margin-top: 1rem;
    padding: .5rem 0;
}

@media (max-width: 575px) {
    .login-popup-header > h4 {
        margin-left: 3.5rem;
        font-size: 1rem;
    }
}


/************/
/*fade event*/
/************/
.fade-event {
    transition: opacity 1s, transform 1s;
    opacity: 0;
    position: relative;
    transform: translateY(20px);
}

.fade-event.fade-in {
    opacity: 1;
    transform: translateY(0);
}