@charset "utf-8";
@import url("/site/resource/gimhae/ipsi/css/default.css");
@import url("/common/fonts/notosans/notosans.css");
@import url("/common/fonts/jalnangothic/jalnangothic.css");

:root {
    --font-type01: "Noto Sans KR";
    --font-type02: "YeogiOttaeJalnanGothic";
    --radius-sm: 6px;
    --radius: 12px;
    --oval: 100px;
    --circle: 50%;
    --bg-color01: #f5faff;
    --bg-color02: #f4f5f6;
    --shadow: 3px 6px 10px rgba(0, 0, 0, 0.05);
}
@media (min-width: 1400px) {
    :root {
        --radius: 20px;
        --radius-sm: 8px;
    }
}

@keyframes gelatine {
    from,
    to {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(0.9, 1.1);
    }
    50% {
        transform: scale(1.1, 0.9);
    }
    75% {
        transform: scale(0.95, 1.05);
    }
}
@keyframes ripple {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        opacity: 0;
    }
}
@keyframes orbit01 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateY(-887px);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateY(-887px);
    }
}
@keyframes orbit02 {
    0% {
        transform: translate(-50%, -50%) rotate(-40deg) translateY(-599px);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-400deg) translateY(-599px);
    }
}
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/*****************************************************
    common
*****************************************************/
html, body {
    min-width: 360px;
    font-size: 15px;
    letter-spacing: -0.5px;
    line-height: 1.4;
    color: #333;
}
body.main {
    background-color: #f0f9ff;
}
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background-color: var(--bs-gray-200);
    border-radius: var(--oval);
}
::-webkit-scrollbar-thumb {
    background-color: var(--bs-gray-500);
    border-radius: var(--radius);
    border-radius: var(--oval);
}
::-webkit-scrollbar-button {
    display: none;
}
p {
    margin-bottom: 0.5rem;
}
.line-gap {
    margin: 32px 0;
    border-top: 1px dashed var(--bs-gray-400);
    opacity: 1;
}
@media (min-width: 576px) {
    html, body {
        font-size: 16px;
    }
}
@media (min-width: 992px) {
    html, body {
        font-size: 18px;
    }
    .line-gap {
        margin: 60px 0;
    }
    .text-sm {
        font-size: 17px;
    }
}

/* mask */
#mask {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease-out;
    z-index: -1;
}
#mask.on {
    visibility: visible;
    opacity: 1;
}

/* tit */
.cont-tit {
    font-family: var(--font-type02);
    font-size: 26px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 30px;
}
[class*="tit-h"] {
    font-family: var(--font-type02);
    font-weight: 400;
    position: relative;
}
[class*="tit-h"] + [class*="tit-h"] {
    margin-top: 14px;
}
.tit-h3 {
    font-size: 20px;
    padding-left: 28px;
    margin-top: 32px;
}
.tit-h3:first-child {
    margin-top: 0;
}
.tit-h3::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 20px;
    height: 20px;
    background: url("/site/resource/gimhae/ipsi/images/h3-bullet.svg") no-repeat center/cover;
}
.tit-h4 {
    font-size: 20px;
    color: var(--main-color01);
    margin-top: 28px;
}
.tit-h5 {
    font-size: 18px;
    color: var(--bs-gray-700);
    margin-top: 24px;
}
@media (min-width: 576px) {
    .cont-tit {
        font-size: 30px;
        margin-bottom: 40px;
    }
    .tit-h3 {
        font-size: 22px;
    }
}
@media (min-width: 768px) {
    .cont-tit {
        font-size: 34px;
        margin-bottom: 50px;
    }
}
@media (min-width: 1200px) {
    .cont-tit {
        font-size: 38px;
        margin-bottom: 60px;
    }
    .tit-h3 {
        font-size: 24px;
    }
}
@media (min-width: 1400px) {
    .cont-tit {
        font-size: 42px;
        margin-bottom: 70px;
    }
    [class*="tit-h"] + [class*="tit-h"] {
        margin-top: 20px;
    }
    .tit-h3 {
        font-size: 27px;
        padding-left: 32px;
        margin-top: 40px;
    }
    .tit-h3::before {
        width: 22px;
        height: 22px;
    }
    .tit-h4 {
        font-size: 22px;
        margin-top: 36px;
    }
    .tit-h5 {
        font-size: 20px;
        margin-top: 32px;
    }
}

/* form */
.form-control {
    border-radius: 6px;
}
.input-group>.form-control:first-of-type:not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.input-group .d-flex:not(:first-child) .form-control {
    border-radius: 0;
}
.input-group .d-flex:not(:first-child) .form-control:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.input-group .d-flex:not(:first-child) .btn {
    border-radius: 0;
}
.input-group .d-flex:not(:first-child) .btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
@media (min-width: 992px) {
    .form-control {
        font-size: 17px;
    }
}

.attach {
    border-radius: var(--radius-sm);
}
.attach .attach-list > li {
    border-radius: 5px;
}

/* tab */
.tab-select {
    border: 2px solid var(--bs-gray-200);
    border-radius: var(--radius-sm);
}
.tab-select:hover, .tab-select:focus {
    border-color: var(--main-color01-hover);
}
.tab-default {
    border: 0;
    gap: 6px;
    margin-bottom: 40px;
}
.tab-default .nav-item {
    flex: 0 1 calc(50% - 4px);
    margin: 0;
}
.tab-default .nav-item .nav-link {
    width: 100%;
    height: 100%;
    background-color: var(--bg-color02);
    color: var(--bs-gray-600);
    border: 2px solid var(--bg-color02);
    border-radius: var(--radius-sm);
    font-weight: 400;
    font-family: var(--font-type02);
    padding: 14px 16px 8px;
}
.tab-default .nav-item .nav-link:focus, .tab-default .nav-item .nav-link:hover {
    border-color: var(--bs-gray-400);
}
.tab-default .nav-item .nav-link.active {
    background-color: var(--bs-white);
    border: 2px solid var(--main-color01);
    color: var(--main-color01);
}
@media (min-width: 992px) {
    .tab-default {
        gap: 10px;
    }
    .tab-default .nav-item {
        flex: 1 1 calc(25% - 10px);
    }
    .tab-default .nav-item:nth-child(n + 4) {
        flex: 0 1 calc(25% - 8px);
    }
    .tab-default .nav-item .nav-link {
        padding: 18px 18px 14px;
    }
    .tab-default .nav-item .nav-link.active {
        box-shadow: var(--shadow);
    }
}
@media (min-width: 1400px) {
    .tab-default {
        margin-bottom: 50px;
    }
    .tab-default .nav-item {
        flex: 1 1 calc(100% / 6 - 10px);
    }
    .tab-default .nav-item:nth-child(n + 4) {
        flex: 1 1 calc(100% / 6 - 10px);
    }
    .tab-default .nav-item:nth-child(n + 7) {
        flex: 0 1 calc(100% / 6 - 8px);
    }
}

/* tab-style0* */
.tab-style01 {
    gap: 6px 4px;
    border-bottom: 0;
    margin-bottom: 30px;
}
.tab-style01 .nav-item .nav-link {
    border-radius: var(--oval);
    padding: 7px 16px;
    background-color: var(--bs-white);
    border: 2px solid var(--bs-gray-200);
    color: var(--bs-secondary);
    font-weight: 500;
}
.tab-style01 .nav-item .nav-link:hover, .tab-style01 .nav-item .nav-link:focus, .tab-style01 .nav-item .nav-link.active {
    background-color: var(--main-color01);
    border-color: var(--main-color01);
    color: #fff;
}
.tab-style02 {
    border-bottom-color: var(--bs-gray-400);
    gap: 8px 14px;
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.tab-style02 .nav-item .nav-link {
    color: var(--bs-gray-600);
    font-weight: 500;
    border: 0;
    padding: 0;
    position: relative;
    padding: 0;
}
.tab-style02 .nav-item .nav-link::before {
    display: inline-block;
    content: "\F309";
    font-family: var(--font-icon);
    vertical-align: bottom;
    margin-right: 2px;
    transition: 0.3s;
}
.tab-style02 .nav-item .nav-link:hover::before, .tab-style02 .nav-item .nav-link:focus::before {
    content: "\F26B";
    margin-right: 8px;
}
.tab-style02 .nav-item .nav-link.active {
    border: 0;
    background-color: transparent;
    color: var(--main-color02);
}
.tab-style02 .nav-item .nav-link.active::before {
    content: "\F26A";
    margin-right: 4px;
}
@media (min-width: 992px) {
    .tab-style01 .nav-item .nav-link {
        padding: 10px 22px;
        font-size: 18px;
    }
}
@media (min-width: 1400px) {
    .tab-style01 {
        gap: 8px 6px;
        margin-bottom: 40px;
    }
    .tab-style02 {
        gap: 12px 20px;
        margin-bottom: 30px;
    }
    .tab-style02 .nav-item .nav-link {
        font-size: 18px;
    }
    .tab-style02 .nav-item .nav-link.active::before {
        margin-right: 6px;
    }
}

/* table */
.table > :not(caption) > * > * {
    color: #333;
}
.table th, .table td {
    padding: 16px;
}
.table thead th {
    background-color: var(--bg-color02);
    color: var(--bs-gray-900);
}
.table tbody th {
    background-color: var(--bg-color01);
    color: var(--bs-gray-700);
}
.table tbody th label {
    margin-bottom: 0;
}
.table .btn {
    font-size: 16px;
}
.table-sm th, .table-sm td {
    padding: 8px;
}
.table-sm .form-control {
    font-size: 14px;
    min-height: auto;
}
.table .td-color {
    background-color: #F8F8FB;
}
.table .td-color.style01 {
    background-color: #EEF9F1;
}
.table .td-color.style02 {
    background-color: #F5F3FF;
}
.bullet-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.bullet-wrap > * {
    margin-bottom: 0;
}
.bullet-wrap .bullet-box {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}
.bullet-wrap .bullet-box .bullet {
    position: relative;
    padding-left: 40px;
    margin: 2px 0;
    line-height: 1;
    white-space: nowrap;
}
.bullet-wrap .bullet-box .bullet::before {
    content: '';
    position: absolute;
    top: calc(50% + 1px);
    left: 0;
    width: 32px;
    height: 20px;
    border-radius: 4px;
    transform: translateY(-50%);
    background-color: #F8F8FB;
    border: 1px solid #D5D5D5;
}
.bullet-wrap .bullet-box .bullet.style01::before {
    background-color: #EEF9F1;
    border-color: #B4E2C0;
}
.bullet-wrap .bullet-box .bullet.style02::before {
    background-color: #F5F3FF;
    border-color: #D0C9FF;
}
@media (min-width: 992px) {
    .table {
        font-size: 17px;
    }
    .table-sm {
        font-size: 16px;
    }
    .table.board-info > tbody th {
        background-color: var(--bg-color01);
        color: var(--bs-gray-700);
    }
}

/* info-text */
.info-text {
    position: relative;
    padding-left: 25px;
}
.info-text::before {
    content: "\F430";
    position: absolute;
    top: 1px;
    left: 0;
    display: block;
    font-family: var(--font-icon);
    border-radius: var(--circle);
    box-shadow: var(--shadow);
    color: var(--main-color01);
}

/* list-style */
[class*="list-style0"] li {
    margin-bottom: 7px;
}
[class*="list-style0"] > li:last-child {
    margin-bottom: 0;
}
[class*="list-style0"] > li > [class*="list-style0"] {
    margin-top: 7px;
}
ul[class*="list-style0"] {
    list-style: none;
}
ul.list-style01 > li {
    position: relative;
    padding-left: 12px;
}
ul.list-style01 > li::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: var(--circle);
    background-color: var(--main-color01);
}
ul.list-style02 > li {
    position: relative;
    padding-left: 14px;
    color: #555;
}
ul.list-style02 > li::after {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    display: block;
    width: 6px;
    height: 3px;
    border-radius: 2px;
    background: var(--bs-gray-500);
}
ol.list-style01 {
    list-style: decimal-leading-zero;
    padding-left: 28px;
}
ol.list-style01 > li {
    list-style: inherit;
    padding-left: 8px;
}
ol.list-style01 li::marker, ol.list-style02 li::marker {
    font-family: var(--font-type02);
    font-size: 15px;
    font-weight: 400;
    color: var(--main-color01);
}
ol.list-style02 {
    list-style: hangul;
    padding-left: 25px;
}
ol.list-style02 > li {
    list-style: inherit;
    padding-left: 8px;
    color: #555;
}
@media (min-width: 992px) {
    ul.list-style01 > li {
        padding-left: 14px;
    }
    ul.list-style01 > li::after {
        width: 6px;
        height: 6px;
    }
}

/* list-box-style */
.list-box-style01 .inner {
    position: relative;
    border-radius: var(--radius-sm);
    padding: 14px 20px 14px 60px;
    height: 100%;
    min-height: 52px;
    background-color: var(--bg-color01);
}
.list-box-style01 .inner > .num {
    position: absolute;
    top: 11px;
    left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    font-size: 11px;
    font-family: var(--font-type02);
    color: var(--bs-white);
    background-color: var(--main-color01);
    border-radius: 50px 50px 0 50px;
    padding-top: 2px;
}
@media (min-width: 768px) {
    .list-box-style01 .inner {
        padding: 18px 20px 18px 64px;
    }
    .list-box-style01 .inner > .num {
        top: 14px;
        left: 18px;
    }
}
@media (min-width: 992px) {
    .list-box-style01 .inner {
        padding: 22px 25px 22px 70px;
    }
    .list-box-style01 .inner > .num {
        top: 16px;
        width: 36px;
        height: 36px;
        font-size: 12px;
        padding-top: 4px;
    }
}
@media (min-width: 1600px) {
    .list-box-style01 .inner {
        min-height: 71px;
        padding: 22px 25px 22px 78px;
    }
    .list-box-style01 .inner > .num {
        top: 17px;
        left: 24px;
    }
}


/* button */
.btn {
    border-radius: 6px;
}
.btn[class*="bi"], .btn[class*="btn-bi"] {
    min-height: 42px;
}
.btn-text {
    display: inline-block;
    padding: 0;
    margin: 0 4px;
    color: var(--main-color01);
    vertical-align: text-top;
    text-decoration: underline 1px dashed;
    text-underline-offset: 6px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
}
.btn-text:hover, .btn-text:focus {
    color: var(--main-color01-hover);
    text-decoration: underline 1px dashed;
}
.table .btn {
    border-radius: 5px;
}
.btn-page {
    text-align: center;
    margin-top: 30px;
}
.btn-page .btn {
    display: block;
    width: 100%;
    font-size: 16px;
    padding: 12px 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.09);
}
.btn-page .btn > i {
    font-size: 15px;
    margin-left: 8px;
}
.btn-page .btn + .btn {
    margin-top: 4px;
}
@media (min-width: 576px) {
    .btn-page .btn {
        display: inline-block;
        width: auto;
        font-size: 17px;
        padding: 14px 40px;
    }
    .btn-page .btn > i {
        font-size: 16px;
        margin-left: 12px; 
    }
    .btn-page .btn + .btn {
        margin-top: 0;
    }
}
@media (min-width: 992px) {
    .btn-page {
        margin-top: 40px;
    }
    .btn-page .btn {
        font-size: 19px;
        padding: 15px 50px;
    }
    .btn-page .btn > i {
        font-size: 18px;
        margin-left: 16px;
    }
}

/* img-zoom */
.img-zoom {
    position: relative;
    padding: 10px;
    border: 1px solid var(--bs-gray-400);
    border-radius: var(--radius-sm);
    text-align: center;
}
.img-zoom img {
    max-width: 100%;
    margin: 0 auto;
}
.img-zoom .btn {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transition: all 0.3s ease;
    margin-top: 0;
    opacity: 0.8;
}
.img-zoom .btn i {
    font-size: 18px;
}
.img-zoom .btn i::before {
    vertical-align: -0.125em;
}
.img-zoom .btn:focus, .img-zoom .btn:hover {
    color: #fff;
    opacity: 1;
}
@media (min-width: 576px) {
    .img-zoom {
        padding: 20px;
    }
    .img-zoom .btn {
        right: 20px;
        top: 20px;
        width: 48px;
        height: 48px;
    }
    .img-zoom .btn i {
        font-size: 24px;
    }
}
@media (min-width: 992px) {
    .img-zoom {
        padding: 0;
        border: 0;
    }
    .img-zoom .btn {
        display: none;
    }
}

/* modal */
.modal-content {
    border-radius: var(--radius);
}
.modal-content .modal-close {
    top: -20px;
    right: 20px;
    border-radius: var(--circle);
    background: var(--point-color01);
    width: 40px;
    height: 40px;
    opacity: 1;
}
.modal-content .modal-close::before, .modal-content .modal-close::after {
    background-color: var(--bs-white);
}
@media (min-width: 992px) {
    .modal-content .modal-close {
        top: -25px;
        right: -25px;
        width: 50px;
        height: 50px;
    }
}

/* badge */
.badge {
    margin: 2px 0;
    padding: 7px 12px;
    font-size: 14px;
    font-weight: 500;
    border: 0;
    border-radius: var(--oval);
    color: inherit;
}

/* no-data */
.no-data .tit > strong {
    font-weight: inherit;
}
.no-data .img {
    max-width: 200px;
}
@media (min-width: 768px) {
    .no-data .img {
        max-width: 100%;
    }
}

/* prof-style */
.prof-style01 .prof-box {
    border-radius: var(--radius);
}
@media (min-width: 992px) {
    .prof-style01 .prof-box .prof-top .prof-btn {
        flex: 0 0 100px;
        max-width: 100px;
    }
}

/* sitemap */
.sitemap-style01 .sitemap-box {
    border-bottom: 1px solid var(--bs-gray-300);
}
.sitemap-style01 .sitemap-box .depth01 {
    border: 0;
    font-family: var(--font-type02);
    font-size: inherit;
    font-weight: 500;
    color: var(--main-color01);
    background: #f5f8ff;
    border-radius: 8px;
    padding: 16px 20px 12px;
}
.sitemap-style01 .sitemap-box .item-row {
    padding: 0 12px 12px;
}
.sitemap-style01 .sitemap-box .list-style01 {
    margin-bottom: 0;
}
@media (min-width: 992px) {
    .sitemap-style01 {
        border-top-color: var(--main-color01);
    }
    .sitemap-style01 .sitemap-box .depth01 {
        border-radius: 12px;
        padding: 28px 36px;
    }
    .sitemap-style01 .sitemap-box .item-row {
        padding: 15px 0;
    }
}
@media (min-width: 1600px) {
    .sitemap-style01 .sitemap-box .depth01 {
        border-radius: 16px;
    }
}

/* content-foot */
.content-foot {
    border-radius: 10px;
}
.page-review .review-comment {
    min-height: 50px;
}
@media (min-width: 992px) {
    .content-foot {
        font-size: 17px;
    }
}

/*****************************************************
    layout
*****************************************************/
.layout-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
.main-container {
    flex: 1;
}
.sub-container {
    flex: 1;
    padding-top: 30px;
    padding-bottom: 120px;
}
.container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.container .container {
    padding-left: 0;
    padding-right: 0;
}
@media (min-width: 576px) {
    .sub-container {
        padding-top: 40px;
        padding-bottom: 140px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 960px;
        padding-left: 0;
        padding-right: 0;
    }
    .sub-container {
        padding-top: 60px;
        padding-bottom: 170px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    .main-container {
        margin-top: -40px;
    }
    .sub-container {
        padding-top: 80px;
        padding-bottom: 190px;
    }
}
@media (min-width: 1600px) {
    .container {
        max-width: 1500px;
    }
}
@media (min-width: 1800px) {
    .container {
        max-width: 1600px;
    }
}

/* header */
#header {
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 100;
}

/* main - header */
body.main #header:not(.on) {
    color: #fff;
    background-color: transparent;
}
body.main #header:not(.on) .header-global, body.main #header:not(.on) .header-cont {
    background-color: transparent;
}
body.main #header:not(.on) .header-global {
    border-bottom-color: rgba(255, 255, 255, 0.35);
}
body.main #header:not(.on) .header-global .link-box > li:not(:last-child)::after {
    background-color: rgba(255, 255, 255, 0.4);
}
body.main #header:not(.on) .header-global .link-box > li .link {
    color: #fff;
}
body.main #header:not(.on) .header-global .link-box > li .link:hover, body.main #header:not(.on) .header-global .link-box > li .link:focus {
    color: #fff;
}
body.main #header:not(.on) .header-global .link-box > li.home .link .icon {
    background-color: #fff;
}
body.main #header:not(.on) .header-global .log-box .link {
    color: #fff;
}
body.main #header:not(.on) .header-global .log-box .link::after {
    background-color: rgba(255, 255, 255, 0.35);;
}
body.main #header:not(.on) .header-global .log-box .link .icon {
    background-color: #fff;
}
body.main #header:not(.on) .header-global .option-box .zoom-box .tit {
    color: #fff;
}
body.main #header:not(.on) .header-global .option-box .zoom-box [class*="zoom-"] {
    border-color: #fff;
    background-color: transparent;
}
body.main #header:not(.on) .header-global .option-box .zoom-box [class*="zoom-"] .icon {
    background-color: #fff;
}
body.main #header:not(.on) .header-global .option-box .zoom-box [class*="zoom-"].zoom-in .icon::after {
    background-color: #fff;
}
body.main #header:not(.on) .header-global .option-box .lang-box .lang-btn {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
body.main #header:not(.on) .header-global .option-box .lang-box .lang-btn .icon {
    background-color: #fff;
}
body.main #header:not(.on) .header-global .option-box .lang-box .lang-btn::after {
    color: #fff;
}
body.main #header:not(.on) .header-global .option-box .lang-box .lang-btn::before {
    background-color: rgba(255, 255, 255, 0.3);
}
body.main #header:not(.on) .header-cont {
    border-bottom-color: rgba(255, 255, 255, 0.35);
}
body.main #header:not(.on) .header-cont .logo-box .logo {
    color: #fff;
}
body.main #header:not(.on) .header-cont .logo-box .logo .img {
    background-image: url("/site/resource/gimhae/common/images/logo-white.svg");
}
body.main #header:not(.on) .header-cont #top-menu .depth01 > li > .menuitem {
    color: #fff;
}

/* header-global */
.header-global {
    position: relative;
    font-size: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    background-color: #fff;
}
.header-global > .container {
    min-height: 44px;
    display: flex;
    justify-content: space-between;
}
.header-global .link-box {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-size: 0;
}
.header-global .link-box > li {
    position: relative;
    display: inline-block;
    font-size: 15px;
}
.header-global .link-box > li:not(:last-child) {
    padding-right: 12px;
    margin-right: 7px;
}
.header-global .link-box > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(50% + 1px);
    right: 0;
    width: 3px;
    height: 3px;
    border-radius: 50px;
    background-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-50%);
}
.header-global .link-box > li .link {
    gap: 5px;
    color: #333;
    transition: none;
}
.header-global .link-box > li .link > img {
    vertical-align: baseline;
    transform: translateY(1px);
}
.header-global .link-box > li .link:hover, .header-global .link-box > li .link:focus {
    color: #000;
    text-decoration: underline;
}
.header-global .link-box > li.home .link {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 0;
    color: var(--main-color01);
    white-space: nowrap;
}
.header-global .link-box > li.home .link:hover, .header-global .link-box > li.home .link:focus {
    color: var(--main-color01-hover);
}
.header-global .link-box > li.home .link .icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    mask-size: 15px;
    -webkit-mask-size: 15px;
    mask-image: url("/site/resource/gimhae/ipsi/images/icon-home.svg");
    -webkit-mask-image: url("/site/resource/gimhae/ipsi/images/icon-home.svg");
    background-color: var(--main-color01);
}
.header-global .link-box > li.home .link .icon + .txt {
    display: none;
}
.header-global .option-box {
    display: flex;
}
.header-global .option-box .log-box {
    display: flex;
    align-items: center;
}
.header-global .option-box .log-box .link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    margin-right: 7px;
    border: 0;
    background-color: transparent;
    font-size: inherit;
    color: #333;
    transition: none;
    line-height: 0;
}
.header-global .option-box .log-box .link .icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    -webkit-mask-image: url("/site/resource/gimhae/ipsi/images/icon-log.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url("/site/resource/gimhae/ipsi/images/icon-log.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: #545454;
}
.header-global .option-box .log-box .link.setting .icon {
    -webkit-mask-image: url("/site/resource/gimhae/ipsi/images/icon-setting.svg");
    mask-image: url("/site/resource/gimhae/ipsi/images/icon-setting.svg");
}
.header-global .option-box .log-box .link:hover, .header-global .option-box .log-box .link:focus {
    color: #000;
}
.header-global .option-box .log-box .link:hover .icon, .header-global .option-box .log-box .link:focus .icon {
    background-color: var(--main-color01);
}
.header-global .option-box .log-box .link .txt {
    display: none;
}
.header-global .option-box .zoom-box {
    order: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding-left: 15px;
}
.header-global .option-box .zoom-box .tit {
    display: none;
}
.header-global .option-box .zoom-box [class*="zoom-"] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 20px;
    height: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #eee;
    padding: 0;
    transition: all 0.3s ease-out;
}
.header-global .option-box .zoom-box [class*="zoom-"]:hover, .header-global .option-box .zoom-box [class*="zoom-"]:focus {
    background-color: var(--main-color01);
}
.header-global .option-box .zoom-box [class*="zoom-"] .icon {
    position: relative;
    width: 8px;
    height: 2px;
    background-color: #949494;
    transition: all 0.3s ease-out;
}
.header-global .option-box .zoom-box [class*="zoom-"].zoom-in .icon::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #949494;
    transition: all 0.3s ease-out;
}
.header-global .option-box .zoom-box [class*="zoom-"]:hover .icon, .header-global .option-box .zoom-box [class*="zoom-"]:focus .icon, .header-global .option-box .zoom-box [class*="zoom-"].zoom-in:hover .icon::after, .header-global .option-box .zoom-box [class*="zoom-"].zoom-in:focus .icon::after {
    background-color: #fff;
}
.header-global .option-box .lang-box {
    position: relative;
}
.header-global .option-box .lang-box .lang-btn {
    position: relative;
    height: 100%;
    padding: 0;
    border: 0;
    background-color: transparent;
    text-align: left;
    color: #333;
    transition: none;
}
.header-global .option-box .lang-box .lang-btn:hover, .header-global .option-box .lang-box .lang-btn:focus, .header-global .option-box .lang-box .lang-btn.active {
    color: #000;
}
.header-global .option-box .lang-box .lang-btn .txt {
    display: none;
}
.header-global .option-box .lang-box .lang-btn .icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    mask-size: 15px;
    -webkit-mask-size: 15px;
    mask-image: url("/site/resource/gimhae/ipsi/images/icon-lang.svg");
    -webkit-mask-image: url("/site/resource/gimhae/ipsi/images/icon-lang.svg");
    background-color: #545454;
    transform: translateY(1px);
}
.header-global .option-box .lang-box .lang-btn:hover .icon, .header-global .option-box .lang-box .lang-btn:focus .icon, .header-global .option-box .lang-box .lang-btn.active .icon {
    background-color: var(--main-color01);
}
.header-global .option-box .lang-box .list {
    display: none;
}
.header-global .option-box .lang-box.active .list {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 300px;
    padding: 18px;
    margin: 0;
    border-radius: 12px 0 12px 12px;
    background-color: var(--main-color01);
    z-index: 100;
}
.header-global .option-box .lang-box.active .list > li {
    flex: 0 0 calc(50% - 3px);
}
.header-global .option-box .lang-box.active .list > li .item {
    border: 0;
    background-color: rgba(var(--main-color02-rgb), 0.3);
    display: block;
    width: 100%;
    border-radius: 5px;
    padding: 10px;
    color: #fff;
    font-size: 15px;
    transition: all 0.3s ease-out;
}
.header-global .option-box .lang-box.active .list > li .item:hover, .header-global .option-box .lang-box.active .list > li .item:focus {
    background-color: rgba(var(--main-color02-rgb), 0.7);
}
@media (min-width: 992px) {
    .header-global .option-box .log-box .link {
        margin-right: 24px;
    }
    .header-global .option-box .log-box .link::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -12px;
        width: 1px;
        height: 14px;
        background-color: #ddd;
        transform: translateY(-50%);
    }
    .header-global .option-box .log-box .link .txt {
        display: inline-block;
    }
    .header-global .link-box > li.home .link .icon + .txt {
        display: inline-block;
    }
    .header-global .option-box .zoom-box {
        order: 0;
        padding-left: 0;
        padding-right: 15px;
    }
    .header-global .option-box .zoom-box .tit {
        display: inline-block;
        margin-right: 6px;
        color: #333;
    }
    .header-global .option-box .zoom-box [class*="zoom-"] {
        flex: 0 0 22px;
        height: 22px;
    }
    .header-global .option-box .zoom-box [class*="zoom-"] .icon {
        width: 10px;
        height: 2px;
    }
    .header-global .option-box .zoom-box [class*="zoom-"].zoom-in .icon::after {
        width: 2px;
        height: 10px;
    }
    .header-global .option-box .lang-box .lang-btn {
        min-width: 160px;
        padding: 10px 42px 10px 16px;
        border-left: 1px solid rgba(0, 0, 0, 0.15);
        border-right: 1px solid rgba(0, 0, 0, 0.15);
    }
    .header-global .option-box .lang-box .lang-btn:hover, .header-global .option-box .lang-box .lang-btn:focus, .header-global .option-box .lang-box .lang-btn.active {
        background-color: #f5fbff;
    }
    .header-global .option-box .lang-box .lang-btn::after {
        content: "\f282";
        position: absolute;
        top: calc(50% + 1px);
        right: 16px;
        font-family: var(--font-icon);
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        color: #949494;
        transform: translateY(-50%);
        transition: all 0.3s ease-out;
    }
    .header-global .option-box .lang-box.active .lang-btn::after {
        transform: translateY(-50%) rotateX(180deg);
    }
    .header-global .option-box .lang-box .lang-btn:hover::after, .header-global .option-box .lang-box .lang-btn:focus::after, .header-global .option-box .lang-box .lang-btn.active::after {
        color: #333;
    }
    .header-global .option-box .lang-box .lang-btn .txt {
        display: inline-block;
    }
}
@media (min-width: 1800px) {
    .header-global {
        font-size: 16px;
    }
    .header-global .link-box > li {
        font-size: 16px;
    }
}

.header-cont {
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    background-color: #fff;
}
.header-cont > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
.header-cont .logo-box {
    display: inline-block;
    margin-bottom: 0;
}
.header-cont .logo-box .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    transition: none;
}
.header-cont .logo-box .logo .img {
    flex: 0 0 94px;
    max-width: 94px;
    height: 25px;
    background-image: url("/site/resource/gimhae/common/images/logo.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.header-cont .logo-box .logo .txt {
    margin-top: 3px;
    font-family: var(--font-type02);
    font-size: 16px;
}
.header-cont #top-menu {
    flex: 1 1 auto;
    position: fixed;
    width: 100%;
    max-width: 500px;
    height: 100vh;
    top: 0;
    bottom: 0;
    right: -100%;
    background-color: var(--main-color01);
    transition: all 0.5s ease-out;
    z-index: 10;
}
.header-cont #top-menu.active {
    right: 0;
}
.header-cont #top-menu .depth-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
}
.header-cont #top-menu .depth-top .logo {
    display: inline-block;
}
.header-cont #top-menu .depth-top .logo .img > img {
    max-height: 30px;
}
.header-cont #top-menu .depth-top .close {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--point-color01);
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    color: #fff;
    font-size: 24px;
}
.header-cont #top-menu .depth-top .close:hover, .header-cont #top-menu .depth-top .close:focus {
    background-color: var(--point-color01-hover);
}
.header-cont #top-menu .depth01 {
    display: flex;
    flex-flow: column;
    margin-bottom: 0;
}
.header-cont #top-menu .depth01 > li > .menuitem {
    position: relative;
    display: block;
    padding: 15px 45px 15px 15px;
    font-size: 15px;
    font-weight: 500;
    max-width: 160px;
    color: #fff;
    transition: none;
}
.header-cont #top-menu .depth01 > li > .menuitem::after {
    display: none;
    content: "\F285";
    position: absolute;
    top: calc(50% + 1px);
    right: 13px;
    font-family: var(--font-icon);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    transform: translateY(-50%);
    opacity: 0.85;
}
.header-cont #top-menu .depth01 > li > .menuitem > .txt {
    position: relative;
    display: inline-block;
}
.header-cont #top-menu .depth01 > li > .menuitem.now > .txt::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    right: -12px;
    top: 4px;
    background-color: #f0cd3d;
}
.header-cont #top-menu .depth01 > li > .menuitem > .date {
    display: none;
}
.header-cont #top-menu .depth01 > li.active > .menuitem, .header-cont #top-menu .depth01 > li > .menuitem:hover {
    background-color: var(--main-color01-hover);
}
.header-cont #top-menu .depth01 > li.active > .menuitem::after, .header-cont #top-menu .depth01 > li > .menuitem:hover::after {
    display: block;
}
.header-cont #top-menu .depth01 > li > .menuitem:hover > .txt, .header-cont #top-menu .depth01 > li > .menuitem:focus > .txt {
    font-weight: 600;
}
.header-cont #top-menu .depth01 > li > .menu-inner {
    display: none;
    position: absolute;
    top: 63px;
    right: 0;
    width: calc(100% - 160px);
    height: calc(100dvh - 63px);
    background-color: #f8f8fb;
    overflow: auto;
}
.header-cont #top-menu .depth01 > li.active > .menu-inner {
    display: block;
}
.header-cont #top-menu .depth01 > li > .menu-inner > .container {
    height: 100%;
    padding: 15px;
    overflow: auto;
}
.header-cont #top-menu .depth-tit {
    display: none;
}
.header-cont #top-menu .depth-box {
    height: 100%;
}
.header-cont #top-menu .depth-box .depth02 {
    display: flex;
    flex-flow: column;
    height: 100%;
    padding: 8px 16px;
    background-color: #fff;
    border-radius: var(--radius);
    box-shadow: 3px 6px 10px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
    overflow-x: hidden;
}
.header-cont #top-menu .depth-box .depth02 > li > .menuitem {
    position: relative;
    display: block;
    font-weight: 500;
    color: #333;
    padding: 15px 10px 15px 15px;
    border-bottom: 1px dashed #d5d5d5;
}
.header-cont #top-menu .depth-box .depth02 > li:last-child > .menuitem {
    border-bottom: 0;
}
.header-cont #top-menu .depth-box .depth02 > li > .menuitem::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50px;
    background-color: var(--main-color01);
    transition: all 0.3s ease-out;
}
.header-cont #top-menu .depth-box .depth02 > li > .menuitem.now {
    text-decoration: underline;
    color: var(--main-color01);
}
.header-cont #top-menu .depth-box .depth-info {
    display: none;
}
.header-cont .option-box {
    display: flex;
    gap: 4px;
}
.header-cont .option-box .search-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 36px;
    height: 36px;
    border: 0;
    border-radius: 50px;
    background-color: var(--main-color01);
    transition: all 0.3s ease-out;
}
.header-cont .option-box .search-btn::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--point-color01), var(--main-color01));
    opacity: 0.5;
}
.header-cont .option-box .search-btn .icon {
    position: relative;
    width: 15px;
    height: 15px;
    mask-size: 15px;
    -webkit-mask-size: 15px;
    mask-image: url("/site/resource/gimhae/ipsi/images/icon-search.svg");
    -webkit-mask-image: url("/site/resource/gimhae/ipsi/images/icon-search.svg");
    background-color: #fff;
    z-index: 1;
}
.header-cont .option-box .menu-btn {
    position: relative;
    display: none;
    justify-content: center;
    align-items: center;
    flex: 0 0 36px;
    height: 36px;
    border: 0;
    border-radius: 50px;
    background-color: var(--point-color01);
    transition: all 0.3s ease-out;
}
.header-cont .option-box .menu-btn.mobile {
    display: flex;
}
.header-cont .option-box .menu-btn:hover, .header-cont .option-box .menu-btn:focus {
    background-color: var(--point-color01-hover);
}
.header-cont .option-box .menu-btn .icon {
    position: relative;
    width: 15px;
    height: 2px;
    border-radius: 50px;
    margin-bottom: 6px;
    background-color: #fff;
}
.header-cont .option-box .menu-btn .icon::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -6px;
    width: 60%;
    height: 2px;
    border-radius: 50px;
    background-color: #fff;
    transition: all 0.3s ease-out;
}
.header-cont .option-box .menu-btn:hover .icon::after, .header-cont .option-box .menu-btn:focus .icon::after {
    width: 100%;
}
@media (min-width: 1200px) {
    .header-cont > .container {
        gap: 0 15px;
        height: 80px;
    }
    .header-cont .option-box .menu-btn {
        display: flex;
    }
    .header-cont .option-box .menu-btn.mobile {
        display: none;
    }
    .header-cont #top-menu {
        position: static;
        max-width: none;
        height: auto;
        background-color: transparent;
        clip-path: none;
        transition: none;
    }
    .header-cont #top-menu .depth-top {
        display: none;
    }
    .header-cont #top-menu .depth01 {
        flex-flow: row;
        justify-content: space-around;
    }
    .header-cont #top-menu .depth01 > li > .menuitem {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: none;
        min-height: 80px;
        padding: 10px;
        font-size: 16px;
        color: #000;
    }
    .header-cont #top-menu .depth01 > li.active > .menuitem, .header-cont #top-menu .depth01 > li > .menuitem:hover {
        background-color: transparent;
    }
    .header-cont #top-menu .depth01 > li.active > .menuitem::after, .header-cont #top-menu .depth01 > li > .menuitem:hover::after {
        display: none;
    }
    .header-cont #top-menu .depth01 > li > .menuitem.now > .txt::after {
        display: none;
    }
    .header-cont #top-menu .depth01 > li > .menuitem > .date {
        display: block;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: -15px;
        white-space: nowrap;
        font-size: 12px;
        color: #000;
        padding: 6px 10px;
        background-color: #f0cd3d;
        border-radius: 50px;
        letter-spacing: -.7px;
        transition: all .3s ease-out;
    }
    .header-cont #top-menu .depth01 > li > .menuitem > .date::after {
        content: "";
        position: absolute;
        bottom: -15px;
        left: 50%;
        border-top: 8px solid #f0cd3d;
        border-left: 6px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 6px solid transparent;
        transform: translateX(-50%);
    }
    .header-cont #top-menu .depth01 > li > .menuitem:hover > .date, .header-cont #top-menu .depth01 > li > .menuitem:focus > .date {
        visibility: visible;
        opacity: 1;
    }
    .header-cont #top-menu .depth01 > li.active > .menu-inner {
        display: none;
    }
    .header-cont #top-menu .depth01 > li > .menu-inner {
        width: 100%;
        height: auto;
        background-color: #fff;
        top: calc(100% - 1px);
        left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.15);
    }
    .header-cont #top-menu .depth01 > li.on > .menu-inner {
        display: block;
    }
    .header-cont #top-menu .depth01 > li > .menu-inner > .container {
        display: flex;
        min-height: 240px;
        padding: 0;
        overflow: visible;
    }
    .header-cont #top-menu .depth-tit {
        display: block;
        position: relative;
        flex: 0 0 240px;
        max-width: 240px;
        background: #f5fbff url("/site/resource/gimhae/ipsi/images/depth-tit-bg.png") no-repeat right bottom/100%;
    }
    .header-cont #top-menu .depth-tit::before {
        content: "";
        position: absolute;
        top: 0;
        right: 100%;
        width: 200%;
        height: 100%;
        background-color: #f5fbff;
    }
    .header-cont #top-menu .depth-tit .tit {
        position: relative;
        font-family: var(--font-type02);
        font-size: 24px;
        padding-top: 15px;
        margin: 40px 0 15px;
    }
    .header-cont #top-menu .depth-tit .tit::before {
        content: "";
        position: absolute;
        width: 25px;
        height: 6px;
        background: url("/site/resource/gimhae/ipsi/images/depth-tit-bullet.svg") no-repeat center/cover;
        top: 0;
        left: 0;
    }
    .header-cont #top-menu .depth-tit .txt {
        font-size: 15px;
        color: #767676;
    }
    .header-cont #top-menu .depth-box {
        flex: 1;
        padding: 20px 0 20px 20px;
        height: auto;
    }
    .header-cont #top-menu .depth-box .depth02 {
        position: relative;
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        height: auto;
        border-radius: 0;
        box-shadow: none;
        gap: 16px;
        padding: 0;
        margin-bottom: 20px;
    }
    .header-cont #top-menu .depth-box .depth02 > li {
        flex: 0 0 calc(25% - 12px);
    }
    .header-cont #top-menu .depth-box .depth02 > li > .menuitem {
        height: 100%;
        padding: 16px 20px;
        border: 1px solid #d5d5d5;
        border-radius: 8px;
        font-size: 16px;
        transition: all 0.3s ease-out;
    }
    .header-cont #top-menu .depth-box .depth02 > li:last-child > .menuitem {
        border-bottom: 1px solid #d5d5d5;
    }
    .header-cont #top-menu .depth-box .depth02 > li > .menuitem:hover, .header-cont #top-menu .depth-box .depth02 > li > .menuitem:focus {
        font-weight: 600;
        color: #fff;
        background-color: var(--main-color01);
        border-color: var(--main-color01);
        padding: 16px 20px 16px 34px;
    }
    .header-cont #top-menu .depth-box .depth02 > li > .menuitem::before {
        top: 26px;
        left: 20px;
        width: 7px;
        height: 7px;
        background-color: transparent;
        opacity: 0;
    }
    .header-cont #top-menu .depth-box .depth02 > li > .menuitem:hover::before, .header-cont #top-menu .depth-box .depth02 > li > .menuitem:focus::before {
        background-color: #fff;
        opacity: 1;
    }
    .header-cont #top-menu .depth-box .depth02 > li > .menuitem.now {
        text-decoration: none;
        color: inherit;
    }
    .header-cont #top-menu .depth-box .depth02 > li > .menuitem.now:hover, .header-cont #top-menu .depth-box .depth02 > li > .menuitem.now:focus {
        color: #fff;
    }
    .header-cont #top-menu .depth-box .depth-info {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 0;
        min-height: 120px;
        padding: 20px 25px;
        border-radius: 12px;
        background-color: #f8f8fb;
        font-size: 15px;
        letter-spacing: -.7px;
    }
    .header-cont #top-menu .depth-box .depth-info > li {
        flex: 0 0 33.3%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        padding-right: 20px;
    }
    .header-cont #top-menu .depth-box .depth-info > li:not(:first-child) {
        border-left: 1px dashed #c5c5c5;
        padding-left: 20px;
    }
    .header-cont #top-menu .depth-box .depth-info > li:nth-child(4) {
        border-left: 0;
        padding-left: 0;
    }
    .header-cont #top-menu .depth-box .depth-info > li:last-child {
        padding-right: 0;
    }
    .header-cont #top-menu .depth-box .depth-info > li .tit {
        font-weight: 600;
        margin-bottom: 4px;
    }
    .header-cont #top-menu .depth-box .depth-info > li .txt {
        color: #767676;
    }
}
@media (min-width: 1400px) {
    .header-cont > .container {
        height: 90px;
    }
    .header-cont .logo-box .logo .img {
        flex: 0 0 100px;
        max-width: 100px;
        height: 28px;
    }
    .header-cont .logo-box .logo .txt {
        font-size: 17px;
    }
    .header-cont #top-menu .depth01 > li > .menuitem {
        min-height: 90px;
        padding: 18px;
        font-size: 17px;
    }
    .header-cont #top-menu .depth-box .depth02 > li > .menuitem {
        font-size: 17px;
    }
}
@media (min-width: 1600px) {
    .header-cont > .container {
        gap: 0 30px;
        height: 100px;
    }
    .header-cont #top-menu .depth01 > li > .menuitem {
        min-height: 100px;
        font-size: 20px;
    }
    .header-cont #top-menu .depth01 > li > .menu-inner > .container {
        min-height: 270px;
    }
    .header-cont #top-menu .depth-tit {
        flex: 0 0 270px;
        max-width: 270px;
    }
    .header-cont #top-menu .depth-tit .tit {
        font-size: 28px;
    }
    .header-cont #top-menu .depth-tit .txt {
        font-size: 16px;
    }
    .header-cont #top-menu .depth-box {
        padding: 30px 0 30px 30px;
    }
    .header-cont #top-menu .depth-box .depth02 {
        gap: 20px;
        margin-bottom: 30px;
    }
    .header-cont #top-menu .depth-box .depth02 > li {
        flex: 0 0 calc(20% - 16px);
    }
    .header-cont #top-menu .depth-box .depth02 > li > .menuitem {
        font-size: 18px;
    }
    .header-cont #top-menu .depth-box .depth-info {
        font-size: 16px;
    }
    .header-cont #top-menu .depth-box .depth-info > li {
        flex: 0 0 20%;
    }
    .header-cont #top-menu .depth-box .depth-info > li:nth-child(4) {
        border-left: 1px dashed #c5c5c5;
        padding-left: 20px;
    }
}
@media (min-width: 1800px) {
    .header-cont > .container {
        gap: 0 45px;
    }
    .header-cont .logo-box .logo {
        gap: 12px;
    }
    .header-cont #top-menu .depth01 > li > .menu-inner > .container {
        min-height: 290px;
    }
    .header-cont #top-menu .depth-tit {
        flex: 0 0 300px;
        max-width: 300px;
    }
    .header-cont #top-menu .depth-tit .tit {
        font-size: 32px;
    }
    .header-cont #top-menu .depth-tit .txt {
        font-size: 17px;
    }
    .header-cont #top-menu .depth-box {
        padding: 35px 0 35px 35px;
    }
    .header-cont #top-menu .depth-box .depth02 {
        margin-bottom: 35px;
    }
    .header-cont #top-menu .depth-box .depth-info {
        padding: 30px;
        font-size: 17px;
    }
    .header-cont .logo-box .logo .txt {
        font-size: 20px;
    }
    .header-cont .option-box .search-btn {
        flex: 0 0 50px;
        height: 50px;
    }
    .header-cont .option-box .menu-btn {
        flex: 0 0 50px;
        height: 50px;
    }
    .header-cont .option-box .menu-btn .icon {
        width: 20px;
        margin-bottom: 7px;
    }
    .header-cont .option-box .menu-btn .icon::after {
        bottom: -7px;
    }
}

/* footer */
#footer {
    position: relative;
    border-radius: 24px 24px 0 0;
    background-color: var(--main-color02);
    color: #fff;
    z-index: 10;
}
/* #footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
} */
#footer > .container {
    position: relative;
    padding-top: 30px;
    padding-bottom: 50px;
}
#footer > .container::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 10px);
    background-color: var(--main-color02);
    z-index: 1;
}
#footer > .container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    width: calc(100% - 40px);
    height: 10px;
    background-color: var(--main-color02);
    z-index: -1;
}
#footer > .container > [class*="footer-"] {
    position: relative;
    z-index: 1;
}
#footer > .container .dami-box {
    content: "";
    position: absolute;
    top: 92px;
    left: 20px;
    width: 100px;
    height: auto;
    z-index: 0;
    transition: all 0.6s ease-out;
}
#footer > .container .dami-box.on {
    top: 0;
}
#footer > .container .dami-box .dami {
    position: absolute;
    bottom: 0;
    max-width: 100%;
    transform: translateY(8%);
}
.footer-global {
    margin-bottom: 35px;
}
.footer-global .link-box {
    margin-bottom: 25px;
    font-size: 0;
    text-align: center;
}
.footer-global .link-box > li {
    position: relative;
    display: inline-block;
    font-size: 16px;
    margin-top: 13px;
}
.footer-global .link-box > li:not(:last-child) {
    padding-right: 15px;
    margin-right: 9px;
}
.footer-global .link-box > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 0;
    width: 3px;
    height: 3px;
    border-radius: 50px;
    background-color: #fff;
    box-shadow: 0 6px 0 #fff;
    opacity: 0.2;
}
.footer-global .link-box > li .link {
    color: #fff;
    opacity: 0.6;
    transition: all 0.3s ease-out;
}
.footer-global .link-box > li .link:hover, .footer-global .link-box > li .link:focus {
    opacity: 1;
}
.footer-global .link-box > li.privacy .link {
    opacity: 1;
}
.footer-global .link-box > li.privacy .link:hover, .footer-global .link-box > li.privacy .link:focus {
    color: var(--point-color01);
    font-weight: 500;
}
.footer-global .option-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}
.footer-global .option-box .family-box {
    flex: 1 1 100%;
    position: relative;
    text-align: center;
}
.footer-global .option-box .family-box .family-btn {
    position: relative;
    min-width: 200px;
    padding: 12px 45px 12px 15px;
    color: #fff;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    background-color: transparent;
    text-align: left;
    opacity: 0.6;
    transition: all 0.3s ease-out;
}
.footer-global .option-box .family-box.on .family-btn, .footer-global .option-box .family-box .family-btn:hover, .footer-global .option-box .family-box .family-btn:focus {
    opacity: 1;
}
.footer-global .option-box .family-box .family-btn::after {
    content: "\f286";
    position: absolute;
    top: 50%;
    right: 16px;
    font-family: var(--font-icon);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    border: 0;
    margin: 0;
    transform: translateY(-50%);
    transition: all 0.3s ease-out;
}
.footer-global .option-box .family-box.on .family-btn::after {
    transform: translateY(-50%) rotateX(180deg);
}
.footer-global .option-box .family-box #family-list {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    padding: 20px 30px;
    width: 100%;
    min-width: 300px;
    background-color: var(--main-color01-hover);
    border-radius: var(--radius);
}
.footer-global .option-box .family-box.on #family-list {
    display: block;
}
.footer-global .option-box .family-box #family-list > li .link {
    position: relative;
    display: block;
    padding: 15px 0;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px dashed rgba(255, 2552, 255, 0.25);
    transition: all 0.3s ease-out;
}
.footer-global .option-box .family-box #family-list > li:last-child .link {
    margin-bottom: 0;
    border-bottom: 0;
}
.footer-global .option-box .family-box #family-list > li .link:hover, .footer-global .option-box .family-box #family-list > li .link:focus {
    color: #fff;
    padding-left: 11px;
}
.footer-global .option-box .family-box #family-list > li .link::before {
    content: "";
    position: absolute;
    top: 25px;
    left: -10px;
    width: 5px;
    height: 5px;
    border-radius: 50px;
    background-color: #fff;
    opacity: 0;
    transition: all 0.3s ease-out;
}
.footer-global .option-box .family-box #family-list > li .link:hover::before, .footer-global .option-box .family-box #family-list > li .link:focus::before {
    left: 0;
    opacity: 1;
}
.footer-global .option-box .sns-box {
    display: flex;
    gap: 6px;
    margin-top: 13px;
    margin-bottom: 0;
    font-size: 0;
}
.footer-global .option-box .sns-box > li {
    display: inline-block;
}
.footer-global .option-box .sns-box > li .link {
    display: block;
    width: 30px;
    opacity: 0.4;
    transition: all 0.3s ease-out;
}
.footer-global .option-box .sns-box > li .link:hover, .footer-global .option-box .sns-box > li .link:focus {
    animation: gelatine 0.3s 0.1s cubic-bezier(0, 0, 0.18, 0.99) alternate;
    opacity: 1;
}
.footer-global .option-box .sns-box > li .link > img {
    width: 100%;
}
.footer-cont {
    display: flex;
    flex-flow: column-reverse;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}
.footer-cont .site-info .address {
    margin-bottom: 15px;
    font-size: 0;
    text-align: center;
}
.footer-cont .site-info .address > li {
    position: relative;
    display: inline-block;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 10px;
}
.footer-cont .site-info .address > li:not(:last-child) {
    padding-right: 15px;
    margin-right: 13px;
}
.footer-cont .site-info .address > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 0;
    width: 1px;
    height: 14px;
    background-color: rgba(255, 255, 255, 0.2);
}
.footer-cont .site-info .copyright {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.4);
}
.footer-cont .logo {
    display: none;
}
@media (min-width: 576px) {
    #footer > .container .dami-box {
        top: 110px;
        width: 120px;
    }
    .footer-global .option-box .family-box {
        flex: 0;
    }
}
@media (min-width: 992px) {
    #footer {
        border-radius: 24px 24px 0 0;
    }
    #footer > .container {
        min-height: 280px;
        padding-top: 50px;
        padding-bottom: 65px;
    }
    #footer > .container::before {
        left: 0;
        width: 100%;
    }
    #footer > .container::after {
        left: 0;
        width: 100%;
    }
    #footer > .container .dami-box {
        top: 128px;
        left: 0;
        width: 140px;
    }
    .footer-global {
        display: flex;
        justify-content: space-between;
        margin-bottom: 45px;
    }
    .footer-global .link-box {
        margin-bottom: 0;
        text-align: left;
    }
    .footer-global .link-box > li {
        font-size: 18px;
    }
    .footer-global .option-box .family-box #family-list {
        left: auto;
        right: 0;
        width: auto;
        font-size: 17px;
    }
    .footer-global .option-box .sns-box > li .link {
        width: 35px;
    }
    .footer-cont {
        flex-flow: row;
        align-items: flex-end;
        text-align: left;
    }
    .footer-cont .site-info .address > li {
        font-size: 17px;
    }
    .footer-cont .site-info .copyright {
        font-size: 17px;
    }
    .footer-cont .logo {
        display: block;
        max-height: 45px;
        opacity: 0.4;
    }
}
@media (min-width: 1200px) {
    #footer {
        border-radius: 36px 36px 0 0;
    }
}
@media (min-width: 1400px) {
    #footer {
        border-radius: 48px 48px 0 0;
    }
    #footer > .container .dami-box {
        width: 160px;
    }
}

/* right-fixed */
.right-fixed {
    position: fixed;
    width: 90px;
    top: calc(50% + 50px);
    transform: translateY(-50%);
    right: 0;
    text-align: center;
    z-index: 10;
    display: none;
}
.right-fixed .tit {
    padding: 15px 0;
    font-size: 14px;
    color: #fff;
    font-family: var(--font-type02);
    background-color: var(--main-color02);
    margin-bottom: 8px;
    border-radius: 15px 0 0 15px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}
.right-fixed .item-box {
    padding: 25px 15px 20px 15px;
    background-color: #fff;
    border-radius: 15px 0 0 15px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}
.right-fixed .item-box .item {
    position: relative;
    display: block;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ddd;
}
.right-fixed .item-box .item:hover .icon, .right-fixed .item-box .item:focus .icon {
    animation: gelatine 0.3s 0.1s cubic-bezier(0, 0, 0.18, 0.99) alternate;
}
.right-fixed .item-box .item:last-child {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
}
.right-fixed .item-box .item .icon {
    max-width: 28px;
}
.right-fixed .item-box .item .txt {
    display: block;
    font-size: 15px;
    font-weight: 500;
    margin-top: 8px;
    line-height: 1.3;
}
@media (min-width: 992px) {
    .right-fixed {
        display: block;
    }
}

/*****************************************************
    main
*****************************************************/
/* main-visual */
.main-visual {
    height: 400px;
    background-color: #f8f8fb;
    overflow: hidden;
}
.main-visual .visual-swiper {
    height: 100%;
}
.main-visual .visual-swiper .visual {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    z-index: -1;
}
.main-visual .visual-swiper .swiper-slide > .container {
    height: 100%;
    padding-top: 150px;
    padding-left: 30px;
    padding-right: 30px;
}
.main-visual .visual-swiper .swiper-slide > .container .tit {
    font-family: var(--font-type02);
    font-size: 28px;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.24);
    margin: 0;
    line-height: 1.3;
}
.main-visual .visual-indicator {
    position: absolute;
    width: 100%;
    bottom: 30%;
    z-index: 1;
}
.main-visual .visual-indicator > .container {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 30px;
}
.main-visual .visual-indicator [class*="visual-button-"] {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: 0;
    margin-top: 1px;
}
.main-visual .visual-indicator [class*="visual-button-"]::before {
    content: "\F284";
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-icon);
    font-size: 21px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
    opacity: 0.6;
    transition: all 0.3s ease-out;
}
.main-visual .visual-indicator [class*="visual-button-"].visual-button-next::before {
    content: "\F285";
}
.main-visual .visual-indicator [class*="visual-button-"]:hover::before, .main-visual .visual-indicator [class*="visual-button-"]:focus::before {
    opacity: 1;
}
.main-visual .visual-indicator .visual-pagination {
    flex: 0 0 55px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 11px;
    width: auto;
    margin: 3px 20px 0 0;
    font-family: var(--font-type02);
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.main-visual .visual-indicator .visual-pagination .swiper-pagination-current {
    color: #fff;
    font-size: 18px;
}
.main-visual .visual-indicator .visual-progress {
    display: none;
}
.main-visual .visual-autoplay {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: 0;
    z-index: 1;
}
.main-visual .visual-autoplay::before {
    content: "\F4F4";
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-icon);
    font-size: 23px;
    color: #fff;
    transform: translate(-50%, -50%);
}
.main-visual .visual-autoplay.stop::before {
    content: "\F4C3";
}
@media (min-width: 576px) {
    .main-visual .visual-swiper .swiper-slide > .container .tit {
        font-size: 32px;
    }
}
@media (min-width: 992px) {
    .main-visual {
        height: 600px;
    }
    .main-visual .visual-swiper .swiper-slide > .container {
        padding-top: 170px;
        padding-left: 0;
        padding-right: 0;
    }
    .main-visual .visual-swiper .swiper-slide > .container .tit {
        font-size: 48px;
    }
    .main-visual .visual-indicator > .container {
        padding: 0;
    }
    .main-visual .visual-indicator .visual-progress {
        display: block;
        position: relative;
        width: 90px;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .main-visual .visual-indicator .visual-progress .rolling {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        fill: none;
        transform: rotate(-90deg);
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
    }
    .main-visual .visual-indicator .visual-progress .rolling .bg {
        stroke: rgba(255, 255, 255, 0.3);
        stroke-width: 5px;
    }
    .main-visual .visual-indicator .visual-progress .rolling .bar {
        --progress: 0;
        stroke: #fff;
        stroke-width: 5px;
        stroke-dasharray: 251.2;
        stroke-dashoffset: calc(251.2px * (1 - var(--progress)));
    }
    .main-visual .visual-indicator [class*="visual-button-"] {
        width: 40px;
        height: 40px;
    }
    .main-visual .visual-indicator [class*="visual-button-"]::before {
        font-size: 26px;
    }
    .main-visual .visual-indicator .visual-pagination {
        flex: 0 0 70px;
        margin: 3px 30px 0;
        font-size: 22px;
    }
    .main-visual .visual-indicator .visual-pagination .swiper-pagination-current {
        font-size: 24px;
    }
    .main-visual .visual-autoplay {
        width: 40px;
        height: 40px;
    }
    .main-visual .visual-autoplay::before {
        font-size: 26px;
    }
}
@media (min-width: 1200px) {
    .main-visual .visual-swiper .swiper-slide > .container {
        padding-top: 190px;
    }
    .main-visual .visual-indicator {
        bottom: 27%;
    }
}
@media (min-width: 1400px) {
    .main-visual {
        height: 700px;
        border-bottom-right-radius: 100px;
    }
    .main-visual .visual-swiper .swiper-slide > .container {
        padding-top: 230px;
    }
    .main-visual .visual-swiper .swiper-slide > .container .tit {
        font-size: 60px;
    }
}
@media (min-width: 1600px) {
    .main-visual {
        height: 800px;
    }
    .main-visual .visual-swiper .swiper-slide > .container {
        padding-top: 260px;
    }
    .main-visual .visual-swiper .swiper-slide > .container .tit {
        font-size: 66px;
    }
    .main-visual .visual-indicator {
        bottom: 30%;
    }
}
@media (min-width: 1800px) {
    .main-visual {
        height: 900px;
        border-bottom-right-radius: 150px;
    }
    .main-visual .visual-swiper .swiper-slide > .container {
        padding-top: 290px;
    }
    .main-visual .visual-swiper .swiper-slide > .container .tit {
        font-size: 72px;
    }
    .main-visual .visual-indicator {
        bottom: 32%;
    }
}
@media (min-width: 2000px) {
    .main-visual {
        height: 1000px;
    }
    .main-visual .visual-swiper .swiper-slide > .container {
        padding-top: 310px;
    }
    .main-visual .visual-indicator {
        bottom: 37%;
    }
}

/* main-quick */
.main-quick > .container {
    position: relative;
    padding: 60px 15px;
    z-index: 1;
}
.main-quick .quick-tit {
    text-align: center;
}
.main-quick .quick-tit .tit {
    font-family: var(--font-type02);
    font-size: 26px;
    color: #000;
    margin-bottom: 0;
}
.main-quick .quick-tit .tit .point {
    color: var(--main-color01);
}
.main-quick .quick-tit .txt {
    color: #767676;
    margin-bottom: 15px;
}
.main-quick .quick-box {
    position: relative;
    background-color: #0567e2;
    border-radius: 12px;
    padding: 25px;
    z-index: 0;
}
.main-quick .quick-swiper {
    max-height: 285px;
    padding-right: 6px;
    overflow-y: auto;
    z-index: 2;
}
.main-quick .quick-swiper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.main-quick .quick-swiper::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.2);
}
.main-quick .quick-swiper::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.7);
}
.main-quick .quick-swiper .swiper-wrapper {
    flex-wrap: wrap;
    gap: 6px;
}
.main-quick .quick-swiper .item {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    color: #fff;
    background-color: rgba(var(--main-color01-rgb), 0.75);
    border-radius: 8px;
    transition: all 0.3s ease-out;
}
.main-quick .quick-swiper .item:hover, .main-quick .quick-swiper .item:focus {
    background-color: var(--main-color01-hover);
}
.main-quick .quick-swiper .item .icon {
    display: block;
    width: 25px;
    height: 25px;
}
.main-quick .quick-swiper .item .icon > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-quick .quick-swiper .item .txt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.main-quick .quick-indicator {
    display: none;
}
@media (min-width: 576px) {
    .main-quick .quick-tit .tit {
        font-size: 28px;
    }
    .main-quick .quick-box {
        border-radius: 24px;
        padding: 20px 60px;
    }
    .main-quick .quick-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("/site/resource/gimhae/ipsi/images/quick-bg.png") no-repeat bottom right/cover;
        mix-blend-mode: overlay;
        opacity: 0.3;
        z-index: -1;
    }
    .main-quick .quick-swiper {
        max-height: none;
        padding: 10px;
    }
    .main-quick .quick-swiper .swiper-wrapper {
        flex-wrap: nowrap;
        gap: 0;
    }
    .main-quick .quick-swiper .item {
        flex-flow: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        min-height: 140px;
        padding: 20px;
        text-align: center;
        background-color: transparent;
    }
    .main-quick .quick-swiper .item:hover, .main-quick .quick-swiper .item:focus {
        transform: translateY(-8px);
        background-color: transparent;
    }
    .main-quick .quick-swiper .item .icon {
        margin: 0 auto 15px;
        width: 50px;
        height: 50px;
    }
    .main-quick .quick-indicator {
        position: absolute;
        top: 50%;
        left: 30px;
        width: calc(100% - 60px);
        display: flex;
        justify-content: space-between;
        transform: translateY(-50%);
        z-index: 1;
    }
    .main-quick .quick-indicator [class*="quick-button-"] {
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        border: 0;
        background-color: transparent;
        transition: all 0.3s ease-out;
    }
    .main-quick .quick-indicator [class*="quick-button-"]:hover, .main-quick .quick-indicator [class*="quick-button-"]:focus {
        border-color: var(--point-color01);
        background-color: var(--point-color01);
    }
    .main-quick .quick-indicator [class*="quick-button-"]::before {
        content: "\F284";
        position: absolute;
        top: calc(50% + 1px);
        left: 50%;
        font-family: var(--font-icon);
        font-size: 26px;
        color: #fff;
        opacity: 0.6;
        transform: translate(-50%, -50%);
        transition: all 0.3s ease-out;
    }
    .main-quick .quick-indicator [class*="quick-button-"]:hover::before, .main-quick .quick-indicator [class*="quick-button-"]:focus::before {
        font-size: 18px;
        font-weight: 600;
        opacity: 1;
    }
    .main-quick .quick-indicator [class*="quick-button-"].quick-button-next::before {
        content: "\F285";
        left: calc(50% + 2px);
    }
}
@media (min-width: 992px) {
    .main-quick > .container {
        padding: 60px 0;
    }
    .main-quick .quick-tit .tit {
        font-size: 36px;
    }
}
@media (min-width: 1400px) {
    .main-quick > .container {
        display: flex;
        align-items: center;
        padding: 30px 70px;
        border-radius: 24px;
        background: linear-gradient(135deg, #0673fd, #055ac7);
        transform: translateY(-110px);
    }
    .main-quick > .container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("/site/resource/gimhae/ipsi/images/quick-bg.png") no-repeat center/cover;
        mix-blend-mode: overlay;
        opacity: 0.3;
        z-index: -1;
    }
    .main-quick .quick-tit {
        flex: 0 0 350px;
        max-width: 350px;
        text-align: left;
    }
    .main-quick .quick-tit .tit {
        font-size: 38px;
        color: #fff;
        margin-bottom: 5px;
    }
    .main-quick .quick-tit .tit .point {
        color: #fff;
    }
    .main-quick .quick-tit .txt {
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 0;
    }
    .main-quick .quick-box {
        flex: 1;
        max-width: calc(100% - 350px);
        background-color: transparent;
        padding: 0;
    }
    .main-quick .quick-box::before {
        display: none;
    }
    .main-quick .quick-indicator {
        left: -40px;
        width: calc(100% + 80px);
    }
}
@media (min-width: 1600px) {
    .main-quick .quick-tit {
        flex: 0 0 400px;
        max-width: 400px;
    }
    .main-quick .quick-box {
        max-width: calc(100% - 400px);
    }
    .main-quick .quick-swiper .item .icon {
        width: 60px;
        height: 60px;
    }
}

/* section */
.section .section-tit {
    position: relative;
    font-family: var(--font-type02);
    font-size: 26px;
    color: #000;
    margin-bottom: 20px;
}
.section .section-tit .point {
    color: var(--main-color01);
}
.section .nav-tabs {
    gap: 15px 20px;
    margin-bottom: 20px;
    border-bottom: 0;
    white-space: nowrap;
    /* flex-wrap: nowrap; */
    overflow-y: hidden;
    overflow-x: auto;
}
.section .nav-tabs::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.section .nav-tabs .nav-link {
    position: relative;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    padding: 0;
    font-family: var(--font-type02);
    font-size: 18px;
    color: #949494;
    line-height: 1.2;
    transition: all 0.3s ease-out;
}
.section .nav-tabs .nav-link::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -11px;
    width: 6px;
    height: 6px;
    border-radius: 50px;
    background-color: var(--point-color01);
    opacity: 0;
    transition: all 0.3s ease-out;
}
.section .nav-tabs .nav-link.active, .section .nav-tabs .nav-link:hover, .section .nav-tabs .nav-link:focus {
    color: #000;
    padding-left: 11px;
}
.section .nav-tabs .nav-link.active::before, .section .nav-tabs .nav-link:hover::before, .section .nav-tabs .nav-link:focus::before {
    left: 0;
    opacity: 1;
}
.section .more-view {
    position: relative;
    padding: 12px 24px 12px 12px;
    font-weight: 500;
    color: #333;
    transition: all 0.3s ease-out;
    z-index: 0;
}
.section .more-view .icon {
    position: absolute;
    right: 0;
    top: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--point-color01);
    transform: translateY(-50%);
    transition: all 0.3s ease-out;
    opacity: 0.1;
    z-index: -1;
}
.section .more-view:hover, .section .more-view:focus {
    padding-right: 40px;
    color: #000;
}
.section .more-view:hover .icon, .section .more-view:focus .icon {
    width: 30px;
    height: 30px;
    opacity: 1;
}
.section .more-view:hover .icon::before, .section .more-view:focus .icon::before {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    left: -4px;
    width: 24px;
    height: 9px;
    background: url("/site/resource/gimhae/ipsi/images/icon-arrow.svg") no-repeat center/cover;
}
@media (min-width: 576px) {
    .section .section-tit {
        font-size: 28px;
    }
    .section .more-view .icon {
        width: 50px;
        height: 50px;
    }
    .section .nav-tabs .nav-link::before {
        left: -14px;
        width: 8px;
        height: 8px;
    }
    .section .nav-tabs .nav-link.active, .section .nav-tabs .nav-link:hover, .section .nav-tabs .nav-link:focus {
        padding-left: 14px;
    }
}
@media (min-width: 768px) {
    .section .section-tit {
        font-size: 32px;
    }
    .section .more-view {
        font-size: 17px;
        padding: 18px 24px 18px 12px;
    }
    .section .nav-tabs {
        gap: 20px 30px;
    }
    .section .nav-tabs .nav-link {
        font-size: 21px;
    }
}
@media (min-width: 992px) {
    .section .section-tit {
        font-size: 36px;
        margin-bottom: 30px;
    }
    .section .nav-tabs .nav-link {
        font-size: 23px;
    }
    .section .nav-tabs .nav-link::before {
        top: 6px;
        left: -17px;
        width: 10px;
        height: 10px;
    }
    .section .nav-tabs .nav-link.active, .section .nav-tabs .nav-link:hover, .section .nav-tabs .nav-link:focus {
        padding-left: 17px;
    }
}
@media (min-width: 1200px) {
    .section .more-view {
        font-size: 18px;
    }
    .section .more-view .icon {
        width: 60px;
        height: 60px;
    }
}
@media (min-width: 1400px) {
    .section .section-tit {
        font-size: 42px;
    }
}
@media (min-width: 1600px) {
    .section .section-tit {
        font-size: 48px;
        margin-bottom: 40px;
    }
    .section .nav-tabs {
        gap: 20px 40px;
        margin-bottom: 30px;
    }
    .section .nav-tabs .nav-link {
        font-size: 26px;
    }
    .section .nav-tabs .nav-link::before {
        top: 8px;
    }
}

/* section01 */
#section01 {
    padding: 60px 0;
    border-radius: 25px 25px 0 0;
    background-color: #fff;
    overflow: hidden;
}
@media (min-width: 576px) {
    #section01 {
        padding: 80px 0;
    }
}
@media (min-width: 992px) {
    #section01 {
        padding-top: 100px;
        border-radius: 50px 50px 0 0;
    }
}
@media (min-width: 1200px) {
    #section01 {
        padding-top: 120px;
        padding-bottom: 100px;
    }
}
@media (min-width: 1400px) {
    #section01 {
        padding-top: 140px;
        border-radius: 100px 100px 0 0;
    }
}
@media (min-width: 1600px) {
    #section01 {
        padding-top: 160px;
        padding-bottom: 120px;
    }
}
@media (min-width: 1800px) {
    #section01 {
        border-radius: 150px 150px 0 0;
    }
}

/* process-box */
#section01 .process-wrap {
    position: relative;
}
#section01 .process-box {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}
#section01 .process-box .item {
    flex: 1 1 100%;
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 25px;
    border: 2px solid #e5e5e5;
    border-radius: var(--radius);
    background-color: #f8f8fb;
    transition: all 0.3s ease-out;
    z-index: 0;
}
#section01 .process-box .item:not(:first-child)::before {
    content: "\F128";
    position: absolute;
    top: -33px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #ccd3d8;
    background-color: #fff;
    box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.05);
    font-family: var(--font-icon);
    font-size: 18px;
    color: #5d6371;
    -webkit-text-stroke: 0.3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#section01 .process-box .item .txt-box .tit {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    padding: 6px 17px;
    border-radius: 50px;
    background-color: #5d6371;
    margin-bottom: 18px;
}
#section01 .process-box .item .txt-box .date {
    display: block;
    font-family: var(--font-type02);
    font-size: 21px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
    letter-spacing: normal;
}
#section01 .process-box .item .symbol {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    z-index: -1;
}
#section01 .process-box .item .symbol::before {
    content: "";
    position: absolute;
    bottom: -64px;
    right: -36px;
    width: 210px;
    height: 260px;
    mask-image: url("/site/resource/gimhae/ipsi/images/symbol.svg");
    -webkit-mask-image: url("/site/resource/gimhae/ipsi/images/symbol.svg");
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: #5d6371;
    opacity: 0.05;
}
#section01 .process-box .item .link {
    position: relative;
    padding: 5px 5px 5px 15px;
    font-weight: 500;
    color: #545454;
}
#section01 .process-box .item .link::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50px;
    background-color: #949494;
}
#section01 .process-box .item .link > .bi::before {
    margin-left: 5px;
    -webkit-text-stroke: 0.3px;
    transition: all 0.3s ease-out;
}
#section01 .process-box .item:hover {
    border-color: var(--main-color01);
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
#section01 .process-box .item:hover .txt-box .tit {
    background-color: var(--main-color01);
}
#section01 .process-box .item:hover .txt-box .date {
    color: #000;
}
#section01 .process-box .item:hover .symbol::before {
    background-color: var(--main-color01);
}
#section01 .process-box .item:hover .link::before {
    background-color: var(--main-color01);
}
#section01 .process-box .item:hover .link:hover, #section01 .process-box .item:hover .link:focus {
    color: #333;
}
#section01 .process-box .item .link:hover::before, #section01 .process-box .item .link:focus::before {
    background-color: var(--point-color01);
}
#section01 .process-box .item .link:hover > .bi::before, #section01 .process-box .item .link:focus > .bi::before {
    transform: rotate(45deg);
}
#section01 .process-box .item.active {
    border-color: var(--main-color01);
    background-color: var(--main-color01);
}
#section01 .process-box .item.active .txt-box .tit {
    background-color: rgba(var(--main-color02-rgb), 0.7);
}
#section01 .process-box .item.active .txt-box .date {
    color: #fff;
}
#section01 .process-box .item.active .symbol::before {
    background-color: #fff;
}
#section01 .process-box .item.active .link {
    color: rgba(255, 255, 255, 0.85);
}
#section01 .process-box .item.active .link:hover, #section01 .process-box .item.active .link:focus {
    color: rgba(255, 255, 255, 1);
}
#section01 .process-box .item.active .link::before {
    background-color: var(--point-color01);
}
@media (min-width: 768px) {
    #section01 .process-wrap .section-tit {
        padding: 0 30px;
    }
    #section01 .process-wrap .nav-tabs {
        padding-left: 30px;
    }
    #section01 .process-box {
        padding: 0 30px;
    }
    #section01 .process-box .item {
        flex: 1 1 40%;
        min-height: 240px;
    }
    #section01 .process-box .item:not(:first-child)::before {
        content: "\F138";
        top: 50%;
        left: -33px;
        transform: translateY(-50%);
    }
}
@media (min-width: 992px) {
    #section01 .process-wrap::after {
        content: "";
        position: absolute;
        right: 0;
        top: -32px;
        width: 150px;
        height: 158px;
        background: url("/site/resource/gimhae/ipsi/images/dami-illust01.svg") no-repeat bottom/100%;
    }
    #section01 .process-wrap .section-tit {
        padding: 0;
    }
    #section01 .process-wrap .nav-tabs {
        padding-right: 190px;
        padding-left: 0;
    }
    #section01 .process-box {
        padding: 0;
    }
    #section01 .process-box .item {
        flex: 1 1 30%;
    }
    #section01 .process-box .item:nth-child(4)::before {
        display: none;
    }
}
@media (min-width: 1400px) {
    #section01 .process-wrap::after {
        top: -25px;
    }
}
@media (min-width: 1600px) {
    #section01 .process-wrap::after {
        width: 180px;
        height: 190px;
    }
    #section01 .process-wrap .nav-tabs {
        padding-right: 220px;
    }
    #section01 .process-box .item {
        flex: 1;
        min-height: 280px;
        padding: 30px;
    }
    #section01 .process-box .item:not(:first-child)::before {
        left: -38px;
        width: 60px;
        height: 60px;
        font-size: 21px;
    }
    #section01 .process-box .item:nth-child(4)::before {
        display: flex;
    }
    #section01 .process-box .item .txt-box .tit {
        font-size: 17px;
        margin-bottom: 21px;
    }
    #section01 .process-box .item .txt-box .date {
        font-size: 24px;
    }
}

/* community-wrap */
#section01 .community-wrap {
    padding-top: 60px;
}
#section01 .community-box {
    position: relative;
    flex: 1 1 100%;
    padding-bottom: 60px;
}
#section01 .community-list {
    border-top: 2px solid #111;
    margin-bottom: 0;
    max-height: 298px;
    overflow: auto;
}
#section01 .community-list + .more-view {
    position: absolute;
    top: -10px;
    right: 0;
}
#section01 .community-list > li:not(:last-child) {
    border-bottom: 1px solid #e5e5e5;
}
#section01 .community-list > li .link {
    display: flex;
    justify-content: space-between;
    padding: 35px 20px;
}
#section01 .community-list > li .link .txt-box {
    display: flex;
    align-items: center;
}
#section01 .community-list > li .link .txt-box .new {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 24px;
    height: 24px;
    font-family: var(--font-type02);
    font-size: 13px;
    color: #fff;
    background-color: var(--main-color01);
    line-height: 1;
    border-radius: 50px;
    padding-top: 3px;
    margin-right: 10px;
}
#section01 .community-list > li .link .txt-box .txt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 18px;
    font-weight: 500;
}
#section01 .community-list > li .link .date {
    display: none;
}
#section01 .banner-box {
    flex: 1 1 100%;
    max-width: 100%;
}
#section01 .banner-swiper {
    position: relative;
    padding-top: 60px;
}
#section01 .banner-swiper .item {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    padding-top: 74%;
    background-color: #f8f8fb;
    background-image: url("/site/resource/gimhae/ipsi/images/no-img.svg");
    background-repeat: no-repeat;
    background-position: center;
}
#section01 .banner-swiper .item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#section01 .banner-indicator {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 1;
}
#section01 .banner-indicator .tit {
    display: block;
    font-family: var(--font-type02);
    font-size: 28px;
    color: #000;
    text-transform: uppercase;
}
#section01 .banner-indicator .tit .point {
    color: var(--main-color01);
}
#section01 .banner-indicator .option-box {
    display: flex;
}
#section01 .banner-indicator .option-box .banner-pagination {
    display: none;
}
#section01 .banner-indicator .option-box [class*="banner-button-"] {
    position: relative;
    width: 30px;
    height: 30px;
    border: 0;
    background-color: transparent;
    transform: translateY(-1px);
}
#section01 .banner-indicator .option-box [class*="banner-button-"]::before {
    content: "\F284";
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-icon);
    font-size: 22px;
    font-weight: 600;
    color: #111;
    -webkit-text-stroke: 0.2px;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    transition: all 0.3s ease-out;
}
#section01 .banner-indicator .option-box [class*="banner-button-"].banner-button-next::before {
    content: "\F285";
}
#section01 .banner-indicator .option-box [class*="banner-button-"]:hover::before {
    opacity: 1;
}
#section01 .banner-indicator .option-box .banner-autoplay {
    position: relative;
    width: 30px;
    height: 30px;
    border: 0;
    background-color: transparent;
    transform: translateY(-1px);
}
#section01 .banner-indicator .option-box .banner-autoplay::before {
    content: "\F4F4";
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-icon);
    font-size: 22px;
    color: #444;
    transform: translate(-50%, -50%);
}
#section01 .banner-indicator .option-box .banner-autoplay.stop::before {
    content: "\F4C3";
}
@media (min-width: 576px) {
    #section01 .community-wrap {
        padding-top: 80px;
    }
    #section01 .community-list > li .link .date {
        display: block;
        flex: 0 0 100px;
        font-size: 17px;
        color: #949494;
        text-align: right;
    }
}
@media (min-width: 768px) {
    #section01 .banner-indicator .tit {
        font-size: 32px;
    }
}
@media (min-width: 992px) {
    #section01 .community-wrap {
        padding-top: 100px;
    }
    #section01 .banner-indicator .tit {
        font-size: 36px;
    }
}
@media (min-width: 1200px) {
    #section01 .community-wrap {
        padding-top: 120px;
    }
}
@media (min-width: 1400px) {
    #section01 .community-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 60px;
        padding-top: 140px;
    }
    #section01 .community-box {
        flex: 1;
        padding-bottom: 0;
    }
    #section01 .banner-box {
        flex: 0 0 650px;
        max-width: 650px;
    }
    #section01 .banner-swiper {
        padding-top: 0;
        padding-right: 90px;
    }
    #section01 .banner-indicator {
        top: auto;
        right: 0;
        width: 414px;
        min-height: 80px;
        padding: 25px 35px;
        border-radius: 0 0 20px 20px;
        background-color: #fff;
        color: #fff;
        transform-origin: 100% 0;
        transform: rotate(90deg);
    }
    #section01 .banner-indicator::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--main-color02);
        border-radius: 20px;
        z-index: -1;
    }
    #section01 .banner-indicator .tit {
        font-size: 19px;
        color: #fff;
        line-height: 1;
    }
    #section01 .banner-indicator .tit .point {
        color: #fff;
    }
    #section01 .banner-indicator .option-box .banner-pagination {
        flex: 0 0 60px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 10px;
        width: auto;
        margin-right: 16px;
        font-family: var(--font-type02);
        font-size: 18px;
        color: rgba(255, 255, 255, 0.5);
    }
    #section01 .banner-indicator .option-box .banner-pagination .swiper-pagination-current {
        font-size: 20px;
        color: #fff;
    }
    #section01 .banner-indicator .option-box [class*="banner-button-"]::before {
        color: #fff;
        -webkit-text-stroke: 0;
    }
    #section01 .banner-indicator .option-box .banner-autoplay::before {
        color: #fff;
    }
}
@media (min-width: 1600px) {
    #section01 .community-wrap {
        padding-top: 160px;
        gap: 80px;
    }
    #section01 .community-list + .more-view {
        top: -5px;
    }
    #section01 .banner-box {
        flex: 0 0 710px;
        max-width: 710px;
    }
    #section01 .banner-indicator {
        width: 459px;
    }
}

/* support-wrap */
#section01 .support-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 60px;
    gap: 20px 60px;
}
#section01 .support-wrap .tit-box {
    position: relative;
}
#section01 .support-wrap .tit-box .icon {
    display: inline-block;
    max-width: 75px;
    margin-right: 15px;
}
#section01 .support-wrap .tit-box .tit {
    display: inline-block;
    margin-top: 15px;
    font-family: var(--font-type02);
    font-size: 24px;
    color: #000;
    vertical-align: middle;
}
#section01 .support-wrap .tit-box .tit .point {
    color: var(--main-color01);
}
#section01 .support-wrap .support-box {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#section01 .support-wrap .support-box .item {
    position: relative;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    padding: 15px;
    font-weight: 600;
    border: 1px solid #d5d5d5;
    border-radius: 12px;
}
#section01 .support-wrap .support-box .item:hover, #section01 .support-wrap .support-box .item:focus {
    border-color: var(--main-color01);
}
#section01 .support-wrap .support-box .item .icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 60px;
    height: 60px;
    border-radius: 50%;
}
@media (min-width: 576px) {
    #section01 .support-wrap .support-box {
        gap: 12px;
    }
    #section01 .support-wrap .support-box .item {
        flex: 1 1 40%;
    }
}
@media (min-width: 992px) {
    #section01 .support-wrap {
        justify-content: flex-start;
    }
    #section01 .support-wrap .support-box {
        flex: 1;
    }
}
@media (min-width: 1400px) {
    #section01 .support-wrap {
        gap: 0;
    }
    #section01 .support-wrap .tit-box {
        padding-right: 60px;
        margin-right: 20px;
    }
    #section01 .support-wrap .tit-box::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 1px;
        height: 60px;
        background-color: #d5d5d5;
        transform: translateY(-50%);
    }
    #section01 .support-wrap .support-box {
        gap: 0;
    }
    #section01 .support-wrap .support-box .item {
        flex: 1;
        justify-content: center;
        gap: 15px;
        padding: 30px;
        border: 0;
    }
    #section01 .support-wrap .support-box .item:not(:first-child):before {
        content: "";
        position: absolute;
        top: calc(50% - 6px);
        left: 0;
        width: 3px;
        height: 3px;
        background-color: #ddd;
        border-radius: 50%;
        box-shadow: 0 6px 0 #ddd, 0 12px 0 #ddd;
        transform: translateY(-50%);
    }
    #section01 .support-wrap .support-box .item .icon {
        background-color: #f2f7ff;
        background-color: rgba(var(--point-color01-rgb), 0.05);
        transition: all 0.3s ease-out;
    }
    #section01 .support-wrap .support-box .item:hover .icon, #section01 .support-wrap .support-box .item:focus .icon {
        background-color: rgba(var(--point-color01-rgb), 0.1);
    }
}
@media (min-width: 1600px) {
    #section01 .support-wrap .tit-box {
        padding-right: 80px;
        margin-right: 40px;
    }
    #section01 .support-wrap .tit-box .icon {
        max-width: 95px;
        margin-right: 30px;
    }
}

/* section02 */
#section02 {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
}
#section02 .section-tit {
    padding-top: 25px;
    text-align: center;
}
#section02 .section-tit .deco {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
}
@media (min-width: 576px) {
    #section02 {
        padding: 80px 0;
    }
}
@media (min-width: 992px) {
    #section02 {
        padding-bottom: 100px;
    }
}
@media (min-width: 1200px) {
    #section02 {
        padding-top: 100px;
        padding-bottom: 120px;
    }
    #section02 .section-tit {
        padding-top: 30px;
    }
    #section02 .section-tit .deco {
        width: 450px;
    }
}
@media (min-width: 1400px) {
    #section02 {
        padding-bottom: 140px;
    }
    #section02 .section-tit {
        font-size: 46px;
        padding-top: 40px;
    }
    #section02 .section-tit .deco {
        width: 600px;
    }
}
@media (min-width: 1600px) {
    #section02 {
        padding-top: 120px;
        padding-bottom: 160px;
    }
    #section02 .section-tit {
        font-size: 52px;
    }
}

/* major-list */
#section02 .major-list {
    position: relative;
    margin-bottom: 0;
    border-radius: var(--radius);
    overflow: hidden;
    z-index: 0;
}
#section02 .major-list .item .major-tit {
    position: relative;
    padding: 13px 14px 15px;
}
#section02 .major-list .item .major-tit .major-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
#section02 .major-list .item .major-tit .major-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 0;
}
#section02 .major-list .item .major-tit .major-img img {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateY(-50%);
    z-index: -1;
}
#section02 .major-list .item .major-tit .major-open {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 0;
    z-index: 2;
}
#section02 .major-list .item .major-tit .stit {
    position: relative;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
    z-index: 1;
}
#section02 .major-list .item .major-tit .tit {
    position: relative;
    font-family: var(--font-type02);
    font-size: 20px;
    color: #fff;
    margin-bottom: 0;
    line-height: 1.2;
    z-index: 1;
}
#section02 .major-list .item .major-info {
    display: none;
    background-image: url("/site/resource/gimhae/ipsi/images/major-infobg.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 100px 120px;
    padding: 12px;
}
#section02 .major-list .item.item01 .major-info {
    background-color: #fef1f1;
}
#section02 .major-list .item.item02 .major-info {
    background-color: #ecf1ff;
}
#section02 .major-list .item.item03 .major-info {
    background-color: #ebf9f7;
}
#section02 .major-list .item.item04 .major-info {
    background-color: #fffaef;
}
#section02 .major-list .item.item05 .major-info {
    background-color: #ebf9ee;
}
#section02 .major-list .item.item06 .major-info {
    background-color: #f3f2ff;
}
#section02 .major-list .item .major-info .info-stit {
    display: none;
}
#section02 .major-list .item .major-info .info-tit {
    display: none;
    font-family: var(--font-type02);
}
#section02 .major-list .item.item01 .major-info .info-stit, #section02 .major-list .item.item01 .major-info .info-tit {
    color: #ec6a6f;
}
#section02 .major-list .item.item02 .major-info .info-stit, #section02 .major-list .item.item02 .major-info .info-tit {
    color: #4065d8;
}
#section02 .major-list .item.item03 .major-info .info-stit, #section02 .major-list .item.item03 .major-info .info-tit {
    color: #10a78e;
}
#section02 .major-list .item.item04 .major-info .info-stit, #section02 .major-list .item.item04 .major-info .info-tit {
    color: #e3782b;
}
#section02 .major-list .item.item05 .major-info .info-stit, #section02 .major-list .item.item05 .major-info .info-tit {
    color: #008728;
}
#section02 .major-list .item.item06 .major-info .info-stit, #section02 .major-list .item.item06 .major-info .info-tit {
    color: #7068c6;
}
#section02 .major-list .item .major-info .dept-list > li {
    display: flex;
    align-items: flex-start;
    gap: 0 10px;
    margin-bottom: 6px;
}
#section02 .major-list .item .major-info .dept-list > li:last-child {
    margin-bottom: 0;
}
#section02 .major-list .item .major-info .dept-list .degree {
    display: inline-flex;
    flex: 0 0 66px;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    background-color: #fff;
    border-radius: 50px;
    padding: 3px;
}
#section02 .major-list .item.item01 .major-info .dept-list .degree {
    color: #ec6a6f;
}
#section02 .major-list .item.item02 .major-info .dept-list .degree {
    color: #4065d8;
}
#section02 .major-list .item.item03 .major-info .dept-list .degree {
    color: #10a78e;
}
#section02 .major-list .item.item04 .major-info .dept-list .degree {
    color: #e3782b;
}
#section02 .major-list .item.item05 .major-info .dept-list .degree {
    color: #008728;
}
#section02 .major-list .item.item06 .major-info .dept-list .degree {
    color: #7068c6;
}
#section02 .major-list .item .major-info .dept-list {
    min-height: 60px;
}
#section02 .major-list .item .major-info .dept-list .dept-tit {
    font-weight: 500;
    padding: 2px 0 0;
}
#section02 .major-list .item .major-info .dept-list [class*="btn-"] {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
}
#section02 .major-list .item .major-info .dept-list [class*="btn-"]:first-child {
    margin-left: 6px;
}
#section02 .major-list .item .major-info .dept-list [class*="btn-"]::before {
    content: "";
    position: absolute;
    top: 1px;
    left: -2px;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    background-color: #1e2124;
}
#section02 .major-list .item .major-info .dept-list [class*="btn-"].btn-more::before {
    -webkit-mask-image: url("/site/resource/gimhae/ipsi/images/major-more.svg");
    mask-image: url("/site/resource/gimhae/ipsi/images/major-more.svg");
}
#section02 .major-list .item .major-info .dept-list [class*="btn-"].btn-link::before {
    -webkit-mask-image: url("/site/resource/gimhae/ipsi/images/major-link.svg");
    mask-image: url("/site/resource/gimhae/ipsi/images/major-link.svg");
}
#section02 .major-list .item.item01 .major-info .dept-list [class*="btn-"]:hover::before, #section02 .major-list .item.item01 .major-info .dept-list [class*="btn-"]:focus::before {
    background-color: #ec6a6f;
}
#section02 .major-list .item.item02 .major-info .dept-list [class*="btn-"]:hover::before, #section02 .major-list .item.item02 .major-info .dept-list [class*="btn-"]:focus::before {
    background-color: #4065d8;
}
#section02 .major-list .item.item03 .major-info .dept-list [class*="btn-"]:hover::before, #section02 .major-list .item.item03 .major-info .dept-list [class*="btn-"]:focus::before {
    background-color: #10a78e;
}
#section02 .major-list .item.item04 .major-info .dept-list [class*="btn-"]:hover::before, #section02 .major-list .item.item04 .major-info .dept-list [class*="btn-"]:focus::before {
    background-color: #e3782b;
}
#section02 .major-list .item.item05 .major-info .dept-list [class*="btn-"]:hover::before, #section02 .major-list .item.item05 .major-info .dept-list [class*="btn-"]:focus::before {
    background-color: #008728;
}
#section02 .major-list .item.item06 .major-info .dept-list [class*="btn-"]:hover::before, #section02 .major-list .item.item06 .major-info .dept-list [class*="btn-"]:focus::before {
    background-color: #7068c6;
}
@media (min-width: 480px) {
    #section02 .major-list .item .major-tit {
        padding: 18px 16px;
    }
    #section02 .major-list .item .major-tit .tit {
        font-size: 24px;
    }
    #section02 .major-list .item .major-info {
        padding: 18px;
    }
    #section02 .major-list .item .major-info .dept-list > li {
        margin-bottom: 8px;
    }
}
@media (min-width: 992px) {
    #section02 .major-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        overflow: visible;
    }
    #section02 .major-list::before {
        content: "";
        position: absolute;
        bottom: 35%;
        left: -7%;
        width: 50px;
        height: 50px;
        background: url("/site/resource/gimhae/ipsi/images/major-deco01.svg") no-repeat center/100% 100%;
        z-index: -1;
    }
    #section02 .major-list::after {
        content: "";
        position: absolute;
        bottom: -6%;
        right: -14%;
        width: 150px;
        height: 80px;
        background: url("/site/resource/gimhae/ipsi/images/major-deco02.svg") no-repeat center/100% 100%;
        z-index: -1;
    }
    #section02 .major-list .item {
        position: relative;
        flex: 0 0 calc(50% - 16px);
        perspective: 1800px;
    }
    #section02 .major-list .item .item-inner {
        transform-style: preserve-3d;
        will-change: transform;
        transform: rotate(0deg);
        width: 100%;
        aspect-ratio: 52 / 33;
        transition: transform 1.2s;
    }
    #section02 .major-list .item .major-tit {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        backface-visibility: hidden;
        border-radius: 12px;
        padding: 25px 30px;
        overflow: hidden;
    }
    #section02 .major-list .item .major-tit .stit {
        font-size: 17px;
    }
    #section02 .major-list .item .major-tit .tit {
        font-size: 32px;
    }
    #section02 .major-list .item .major-tit .major-img {
        overflow: visible;
    }
    #section02 .major-list .item .major-tit .major-img::before {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.8));
    }
    #section02 .major-list .item .major-tit .major-open {
        display: none;
    }
    #section02 .major-list .item .major-info {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        transform: rotateY(180deg);
        backface-visibility: hidden;
        border-radius: 12px;
        background-size: 150px auto;
        padding: 35px 32px;
        z-index: 1;
        overflow: hidden;
    }
    #section02 .major-list .item .major-info .major-info-inner {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    #section02 .major-list .item.on .item-inner {
        transform: rotateY(180deg);
        z-index: 2;
    }
    #section02 .major-list .item .major-info .info-stit {
        display: block;
        font-size: 16px;
        margin-bottom: 10px;
        opacity: 0.5;
    }
    #section02 .major-list .item .major-info .info-tit {
        display: block;
        font-size: 24px;
        line-height: 1.2;
    }
    #section02 .major-list .item .major-info .dept-list {
        height: 100%;
        overflow-y: auto;
    }
    #section02 .major-list .item .major-info .dept-list .degree {
        font-size: 16px;
    }
    #section02 .major-list .item .major-info .dept-list .dept-tit {
        font-size: 17px;
    }
    #section02 .major-list .item .major-info .dept-list [class*="btn-"] {
        width: 18px;
        height: 18px;
    }
}
@media (min-width: 1400px) {
    #section02 .major-list {
        perspective: 800px;
    }
    #section02 .major-list .item {
        flex: 0 0 calc(33.3% - 13px);
    }
    #section02 .major-list .item .major-info {
        padding: 20px 24px;
    }
}
@media (min-width: 1600px) {
    #section02 .major-list .item .major-tit {
        border-radius: 16px;
        padding: 28px 32px;
    }
    #section02 .major-list .item .major-info {
        border-radius: 16px;
    }
}
@media (min-width: 1800px) {
    #section02 .major-list .item .major-tit {
        padding: 36px 40px;
    }
    #section02 .major-list .item .major-tit .stit {
        font-size: 18px;
    }
    #section02 .major-list .item .major-tit .tit {
        font-size: 36px;
    }
    #section02 .major-list .item .major-info {
        padding: 30px 40px;
    }
    #section02 .major-list .item .major-info .info-tit {
        font-size: 32px;
        margin-bottom: 12px;
    }
    #section02 .major-list .item .major-info .dept-list > li {
        margin-bottom: 10px;
    }
    #section02 .major-list .item .major-info .dept-list .degree {
        flex: 0 0 70px;
        font-size: 17px;
        padding: 3px 8px 2px;
    }
    #section02 .major-list .item .major-info .dept-list .dept-tit {
        font-size: 19px;
    }
}

/* orbit-box */
#section02 .orbit-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f9ff;
    z-index: -1;
}
#section02 .orbit-box .orbit01 {
    position: absolute;
    top: -140px;
    left: 50%;
    width: 1800px;
    height: 1800px;
    border-radius: 50%;
    transform: translateX(-50%);
}
#section02 .orbit-box .orbit01::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #33a3ff;
    box-shadow: 0 15px 20px rgba(73, 92, 120, 0.15);
    animation: orbit01 20s linear infinite;
}
#section02 .orbit-box .orbit01::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    padding: 26px;
    background: linear-gradient(180deg, #edf3fc 20%, transparent 60%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
#section02 .orbit-box .orbit02 {
    position: absolute;
    top: 160px;
    left: 50%;
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    transform: translateX(-50%);
}
#section02 .orbit-box .orbit02::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffd427;
    box-shadow: 0 15px 20px rgba(73, 92, 120, 0.15);
    animation: orbit02 20s linear infinite;
}
#section02 .orbit-box .orbit02::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(180deg, #edf3fc 20%, transparent 60%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

/* section03 */
#section03 {
    position: relative;
    padding-top: 60px;
    padding-bottom: 170px;
    background-color: #fff;
}
@media (min-width: 576px) {
    #section03 {
        padding-top: 80px;
        padding-bottom: 200px;
    }
}
@media (min-width: 992px) {
    #section03 {
        padding-bottom: 230px;
    }
}
@media (min-width: 1200px) {
    #section03 {
        padding-top: 100px;
    }
}
@media (min-width: 1400px) {
    #section03 {
        padding-top: 140px;
    }
}
@media (min-width: 1600px) {
    #section03 {
        padding-top: 160px;
    }
}

#section03 .news-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
#section03 .news-top .tit-box {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
}
#section03 .news-top .tit-box .section-tit {
    margin-bottom: 0;
}
#section03 .news-top .news-indicator {
    display: none;
}
#section03 .news-box .news-swiper .item {
    display: block;
    padding-bottom: 20px;
    border-bottom: 2px solid #e5e5e5;
}
#section03 .news-box .news-swiper .item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--main-color01);
    transition: all 0.3s ease-out;
}
#section03 .news-box .news-swiper .item .img {
    position: relative;
    display: block;
    padding-top: 63%;
    border-radius: var(--radius);
    background-color: #f8f8fb;
    background-image: url("/site/resource/gimhae/ipsi/images/no-img.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 20px;
    overflow: hidden;
}
#section03 .news-box .news-swiper .item .img > img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease-out;
}
#section03 .news-box .news-swiper .item .tit-box {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 60px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}
#section03 .news-box .news-swiper .item:hover .tit-box .tit {
    color: #212529;
}
#section03 .news-box .news-swiper .item .date {
    color: #949494;
}
#section03 .news-box .news-swiper .item:hover::after, #section03 .news-box .news-swiper .item:focus::after {
    width: 100%;
}
#section03 .news-box .news-swiper .item:hover .img > img, #section03 .news-box .news-swiper .item:focus .img > img {
    transform: translate(-50%, -50%) scale(1.1);
    filter: brightness(0.85);
}
#section03 .news-box .news-swiper .item:hover .tit-box .tit, #section03 .news-box .news-swiper .item:focus .tit-box .tit {
    background: linear-gradient(180deg, transparent 60%, rgba(var(--point-color01-rgb), 0.1) 0%);
}
@media (min-width: 576px) {
    #section03 .news-top {
        margin-bottom: 20px;
    }
}
@media (min-width: 768px) {
    #section03 .news-top .tit-box {
        gap: 20px;
    }
    #section03 .news-top .news-indicator {
        display: block;
    }
    #section03 .news-top .news-indicator [class*="news-button-"] {
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #d5d5d5;
        background-color: #fff;
        color: #949494;
        padding: 0;
        transition: all 0.3s ease-out;
    }
    #section03 .news-top .news-indicator [class*="news-button-"]::before {
        content: "\F284";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: var(--font-icon);
        font-size: 21px;
        -webkit-text-stroke: 0.3px;
        padding: 0 2px 0 0;
    }
    #section03 .news-top .news-indicator [class*="news-button-"]:hover, #section03 .news-top .news-indicator [class*="news-button-"]:focus {
        border-color: var(--point-color01);
        background-color: var(--point-color01);
        color: #fff;
        z-index: 1;
    }
    #section03 .news-top .news-indicator [class*="news-button-"].news-button-next {
        transform: translateX(-15px);
    }
    #section03 .news-top .news-indicator [class*="news-button-"].news-button-next::before {
        content: "\F285";
        padding: 0 0 0 2px;
    }
}
@media (min-width: 992px) {
    #section03 .news-top {
        margin-bottom: 30px;
    }
}
@media (min-width: 1200px) {
    #section03 .news-top .tit-box {
        gap: 24px;
    }
    #section03 .news-box .news-swiper .item {
        padding-bottom: 25px;
    }
    #section03 .news-box .news-swiper .item .img {
        margin-bottom: 30px;
    }
    #section03 .news-box .news-swiper .item .tit-box {
        margin-bottom: 20px;
        font-size: 20px;
    }
    #section03 .news-top .news-indicator [class*="news-button-"] {
        width: 60px;
        height: 60px;
    }
}
@media (min-width: 1400px) {
    #section03 .news-top {
        margin-bottom: 40px;
    }
}

#section03 .txt-loop {
    position: absolute;
    bottom: -90px;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}
#section03 .txt-loop .item {
    display: flex;
    gap: 120px;
    padding-right: 120px;
    animation: marquee 60s linear infinite;
}
#section03 .txt-loop .item .txt {
    position: relative;
    font-family: var(--font-type02);
    font-size: 130px;
    color: transparent;
    -webkit-text-stroke: 1px var(--main-color01);
    white-space: nowrap;
    opacity: 0.17;
}
#section03 .txt-loop .item .txt::after {
    content: "";
    position: absolute;
    top: calc(50% - 10px);
    right: -80px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid var(--main-color01);
    transform: translateY(-50%);
}
@media (min-width: 576px) {
    #section03 .txt-loop .item .txt {
        font-size: 140px;
    }
}
@media (min-width: 992px) {
    #section03 .txt-loop .item .txt {
        font-size: 150px;
    }
}
@media (min-width: 1400px) {
    #section03 .txt-loop .item .txt {
        font-size: 160px;
    }
}

/*****************************************************
    sub
*****************************************************/
/* sub-visual */
.sub-visual {
    padding-top: 106px;
}
.sub-visual > .container {
    position: relative;
    padding: 0;
}
.sub-visual .sub-tit {
    padding: 60px 0;
}
.sub-visual .sub-tit .tit {
    font-family: var(--font-type02);
    font-size: 30px;
    color: #fff;
    text-align: center;
}
.sub-visual .sub-tit .option-box {
    display: flex;
    justify-content: center;
}
.sub-visual .page-navi {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #fff;
    padding: 10px;
    border-radius: 16px 16px 0 0;
}
.sub-visual .page-navi .navbar-nav {
    flex: 1;
    flex-flow: row;
    flex-wrap: wrap;
}
.sub-visual .page-navi .navbar-nav .dropdown {
    z-index: 1;
}
.sub-visual .page-navi .navbar-nav .nav-item .nav-link {
    position: relative;
    line-height: 1;
}
.sub-visual .page-navi .navbar-nav .nav-item.home .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    margin-right: 15px;
    color: #949494;
    transition: all 0.3s ease-out;
}
.sub-visual .page-navi .navbar-nav .nav-item.home .nav-link:hover, .sub-visual .page-navi .navbar-nav .nav-item.home .nav-link:focus {
    color: #545454;
}
.sub-visual .page-navi .navbar-nav .nav-item.home .nav-link::after {
    content: "";
    position: absolute;
    top: 24px;
    right: -15px;
    width: 15px;
    height: 1px;
    background-color: #c5c5c5;
}
.sub-visual .page-navi .navbar-nav .nav-item:not(.home):not(:last-child)::before {
    content: "";
    position: absolute;
    top: 20px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #bbb;
    border-right: 1px solid #bbb;
    transform: rotate(45deg);
}
.sub-visual .page-navi .navbar-nav .nav-item:not(.home) .nav-link {
    padding: 15px;
    text-align: left;
    color: #767676;
}
.sub-visual .page-navi .navbar-nav .nav-item:last-child .nav-link, .sub-visual .page-navi .navbar-nav .nav-item:not(.home) .nav-link:hover, .sub-visual .page-navi .navbar-nav .nav-item:not(.home) .nav-link.show {
    color: #333;
    font-weight: 500;
}
.sub-visual .page-navi .navbar-nav .nav-item:not(.home) .nav-link::after {
    display: none;
}
.sub-visual .page-navi .navbar-nav .nav-item:last-child .nav-link::after, .sub-visual .page-navi .navbar-nav .nav-item:not(.home) .nav-link.show::after {
    color: #333;
}
.sub-visual .page-navi .navbar-nav .nav-item:not(.home) .nav-link:hover::after {
    color: var(--main-color01);
}
.sub-visual .page-navi .navbar-nav .nav-item:not(.home) .nav-link.show::after {
    transform: translateY(-50%) rotateX(180deg);
}
.sub-visual .page-navi .navbar-nav .nav-item .dropdown-menu {
    width: 100%;
    padding: 8px;
}
.sub-visual .page-navi .navbar-nav .nav-item .dropdown-menu .dropdown-item {
    position: relative;
    padding: 7px 10px;
    margin-bottom: 4px;
    border-radius: 4px;
    font-weight: 500;
    color: #555;
    background-color: transparent;
    transition: all 0.5s ease-out;
}
.sub-visual .page-navi .navbar-nav .nav-item .dropdown-menu .dropdown-item:last-child {
    margin-bottom: 0;
}
.sub-visual .page-navi .navbar-nav .nav-item .dropdown-menu .dropdown-item.active, .sub-visual .page-navi .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover, .sub-visual .page-navi .navbar-nav .nav-item .dropdown-menu .dropdown-item:focus {
    color: #030100;
    background-color: #f5fbff;
    padding-left: 21px;
}
.sub-visual .page-navi .navbar-nav .nav-item .dropdown-menu .dropdown-item::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50px;
    background-color: var(--main-color01);
    opacity: 0;
    transition: all 0.5s ease-out;
}
.sub-visual .page-navi .navbar-nav .nav-item .dropdown-menu .dropdown-item.active::before, .sub-visual .page-navi .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover::before, .sub-visual .page-navi .navbar-nav .nav-item .dropdown-menu .dropdown-item:focus::before {
    left: 10px;
    opacity: 1;
}
.sub-visual .page-navi .option-box {
    display: flex;
    gap: 2px;
    margin-right: 10px;
}
.sub-visual .page-navi .option-box .btn-option {
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
}
.sub-visual .page-navi .option-box .btn-option .bi {
    font-size: 18px;
    color: #949494;
    transition: all 0.3s ease-out;
}
.sub-visual .page-navi .option-box .btn-option .bi-printer {
    font-size: 22px;
}
.sub-visual .page-navi .option-box .btn-option .bi-share {
    -webkit-text-stroke: 0.2px;
}
.sub-visual .page-navi .option-box .btn-option:hover .bi, .sub-visual .page-navi .option-box .btn-option:focus .bi {
    color: #333;
}
@media (min-width: 576px) {
    .sub-visual .sub-tit {
        padding: 65px 0;
    }
    .sub-visual .sub-tit .tit {
        font-size: 34px;
    }
}
@media (min-width: 992px) {
    .sub-visual .sub-tit .tit {
        font-size: 37px;
    }
    .sub-visual .page-navi::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: -16px;
        width: 16px;
        height: 16px;
        background: url("/site/resource/gimhae/ipsi/images/nav-particle.svg") no-repeat center/cover;
    }
    .sub-visual .page-navi::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: -16px;
        width: 16px;
        height: 16px;
        background: url("/site/resource/gimhae/ipsi/images/nav-particle.svg") no-repeat center/cover;
        transform: rotateY(180deg);
    }
    .sub-visual .page-navi .navbar-nav .nav-item .nav-link {
        font-size: 17px;
    }
    .sub-visual .page-navi .navbar-nav .nav-item.home .nav-link {
        margin-right: 20px;
    }
    .sub-visual .page-navi .navbar-nav .nav-item.home .nav-link::after {
        right: -20px;
        width: 20px;
    }
    .sub-visual .page-navi .navbar-nav .nav-item:not(.home) .nav-link {
        min-width: 150px;
        padding: 15px 40px 15px 15px;
    }
    .sub-visual .page-navi .navbar-nav .nav-item:not(.home) .nav-link::after {
        display: block;
        content: "\f282";
        position: absolute;
        top: calc(50% + 1px);
        right: 15px;
        font-family: var(--font-icon);
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        color: #949494;
        border: 0;
        margin: 0;
        transform: translateY(-50%);
        transition: all 0.3s ease-out;
    }
    .sub-visual .page-navi .navbar-nav .nav-item:not(.home):not(:last-child)::before {
        top: 14px;
        right: 0;
        width: 1px;
        height: 20px;
        background-color: #d5d5d5;
        border: 0;
        transform: none;
    }
    .sub-visual .page-navi .navbar-nav .nav-item .dropdown-menu .dropdown-item {
        font-size: 17px;
    }
}
@media (min-width: 1200px) {
    .sub-visual {
        padding-top: 126px;
    }
    .sub-visual .sub-tit .tit {
        font-size: 41px;
    }
}
@media (min-width: 1400px) {
    .sub-visual {
        padding-top: 136px;
    }
    .sub-visual .sub-tit {
        padding: 85px 0;
    }
    .sub-visual .sub-tit .tit {
        font-size: 45px;
    }
    .sub-visual .page-navi {
        padding: 6px;
        border-radius: 20px 20px 0 0;
    }
    .sub-visual .page-navi::before {
        left: -20px;
        width: 20px;
        height: 20px;
    }
    .sub-visual .page-navi::after {
        right: -20px;
        width: 20px;
        height: 20px;
    }
    .sub-visual .page-navi .navbar-nav .nav-item .nav-link {
        height: 68px;
        font-size: 18px;
    }
    .sub-visual .page-navi .navbar-nav .nav-item.home .nav-link {
        width: 68px;
        margin-right: 25px;
    }
    .sub-visual .page-navi .navbar-nav .nav-item.home .nav-link::after {
        top: 34px;
        right: -25px;
        width: 25px;
    }
    .sub-visual .page-navi .navbar-nav .nav-item:not(.home) .nav-link {
        min-width: 200px;
        padding: 24px 56px 24px 28px;
    }
    .sub-visual .page-navi .navbar-nav .nav-item:not(.home) .nav-link::after {
        right: 27px;
        font-size: 16px;
    }
    .sub-visual .page-navi .navbar-nav .nav-item:not(.home):not(:last-child)::before {
        top: 24px;
    }
    .sub-visual .page-navi .option-box {
        margin-right: 20px;
    }
    .sub-visual .page-navi .option-box .btn-option {
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: 0;
        background-color: transparent;
    }
    .sub-visual .page-navi .option-box .btn-option .bi {
        font-size: 20px;
        color: #949494;
        transition: all 0.3s ease-out;
    }
    .sub-visual .page-navi .option-box .btn-option .bi-printer {
        font-size: 24px;
    }
}
@media (min-width: 1800px) {
    .sub-visual {
        padding-top: 146px;
    }
    .sub-visual .page-navi {
        border-radius: 24px 24px 0 0;
    }
    .sub-visual .page-navi::before {
        left: -24px;
        width: 24px;
        height: 24px;
    }
    .sub-visual .page-navi::after {
        right: -24px;
        width: 24px;
        height: 24px;
    }
}

/* apply-box */
.apply-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.apply-box .item {
    flex: 1 1 100%;
    position: relative;
    display: block;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: var(--radius);
    transition: all 0.3s ease-out;
}
.apply-box .item::after {
    content: "\F138";
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: var(--oval);
    border: 1px solid #f4f5f6;
    background-color: #f4f5f6;
    font-family: var(--font-icon);
    font-size: 20px;
    color: #949494;
    transition: all 0.3s ease-out;
}
.apply-box .item:hover, .apply-box .item:focus {
    border-color: var(--main-color01);
}
.apply-box .item:hover::after, .apply-box .item:focus::after {
    background-color: var(--main-color01);
    color: #fff;
    transform: rotate(-45deg);
}
.apply-box .item .logo {
    display: inline-block;
    height: 30px;
    margin-bottom: 30px;
}
.apply-box .item .logo > img {
    height: 100%;
}
.apply-box .item .badge {
    position: absolute;
    top: 28px;
    right: 30px;
    padding: 10px 15px;
    border-radius: 50px;
    background-color: var(--main-color01);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.apply-box .item .tit {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--main-color01);
}
.apply-box .item .txt {
    position: relative;
    display: flex;
    gap: 8px;
    padding-left: 12px;
    margin-top: 7px;
    font-weight: 500;
    color: #111;
}
.apply-box .item .txt::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: var(--oval);
    background-color: var(--point-color01);
}
.apply-box .item .txt .tel {
    font-weight: 400;
    opacity: 0.6;
}
.apply-box .item.point {
    background-color: var(--main-color01);
    z-index: 0;
    overflow: hidden;
}
.apply-box .item.point:focus-visible {
    outline-color: #f0cd3d;
}
.apply-box .item.point::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--point-color01), var(--main-color01));
    opacity: .5;
    z-index: -1;
}
.apply-box .item.point::after {
    border-color: #fff;
    background-color: transparent;
    color: #fff;
}
.apply-box .item.point .badge {
    background-color: rgba(var(--main-color02-rgb), 0.5);
}
.apply-box .item.point .tit {
    color: #fff;
}
.apply-box .item.point .txt {
    color: #fff;
}
.apply-box .item.point .txt::before {
    background-color: #fff;
}
@media (min-width: 768px) {
    .apply-box {
        gap: 15px;
    }
    .apply-box .item {
        flex: 0 0 calc(50% - 10px);
    }
}
@media (min-width: 992px) {
    .apply-box {
        gap: 20px;
    }
    .apply-box .item {
        padding: 40px 100px 40px 40px;
    }
    .apply-box .item::after {
        bottom: 40px;
        right: 40px;
        width: 60px;
        height: 60px;
        font-size: 22px;
    }
    .apply-box .item .logo {
        height: 45px;
        margin-bottom: 60px;
    }
    .apply-box .item .badge {
        top: 38px;
        right: 40px;
        font-size: 15px;
    }
    .apply-box .item .tit {
        font-size: 21px;
    }
    .apply-box .item .txt {
        gap: 12px;
        margin-top: 10px;
    }
}
@media (min-width: 1400px) {
    .apply-box .item {
        flex: 0 0 calc(33.3% - 13px);
    }
}

/* info-box-style01 */
.info-box-style01 {
    border: 3px dotted #c5d4f4;
    border-radius: var(--radius);
    display: flex;
    padding: 20px 24px;
    flex-direction: column;
    row-gap: 16px;
    margin-bottom: 24px;
}
.info-box-style01 .icon {
    width: 60px;
    height: 60px;
    border-radius: var(--circle);
    position: relative;
    background: var(--bg-color01);
}
.info-box-style01 .icon img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: auto;
}
.info-box-style01 .txt-box .tit {
    color: var(--main-color01);
    font-family: var(--font-type02);
    font-size: 18px;
}
.info-box-style01 .txt-box .list {
    margin-bottom: 10px;
}
.info-box-style01 .txt-box .list li {
    position: relative;
    padding-left: 22px;
    color: var(--bs-gray-600);
    margin-bottom: 5px;
}
.info-box-style01 .txt-box .list li:after {
    content: "\F4B6";
    position: absolute;
    top: 2px;
    left: 0;
    font-family: var(--font-icon);
}
.info-box-style01 .txt-box .btn {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 3px 20px 5px;
    border: 1px solid var(--main-color01-hover);
    border-radius: var(--oval);
    background-color: #fff;
    color: var(--main-color01-hover);
    text-align: center;
}
.info-box-style01 .txt-box .btn:focus, .info-box-style01 .txt-box .btn:hover {
    background: var(--main-color01-hover);
    color: #fff;
}
.info-box-style01 .txt-box .btn::after {
    content: "\F285";
    display: inline-block;
    width: 10px;
    height: 10px;
    font-size: 11px;
    opacity: 0.8;
    margin-left: 5px;
    transition: 0.3s;
    font-family: var(--font-icon);
}
.info-box-style01 .txt-box > *:last-child {
    margin-bottom: 0;
}
.info-box-style02 {
    position: relative;
    padding: 40px 50px;
    border-radius: var(--radius);
    background-color: #f8f8fb;
    margin-bottom: 24px;
    overflow: hidden;
}
.info-box-style02::before {
    content: "";
    position: absolute;
    bottom: -94px;
    right: -36px;
    width: 210px;
    height: 260px;
    mask-image: url(/site/resource/gimhae/ipsi/images/symbol.svg);
    -webkit-mask-image: url(/site/resource/gimhae/ipsi/images/symbol.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: #5d6371;
    opacity: 0.05;
}
.info-box-style02 > *:last-child {
    margin-bottom: 0;
}
@media (min-width: 992px) {
    .info-box-style01 {
        flex-direction: row;
        column-gap: 40px;
        padding: 36px 42px;
        margin-bottom: 40px;
    }
    .info-box-style01 .icon {
        width: 80px;
        height: 80px;
        flex: 0 1 80px;
    }
    .info-box-style01 .icon img {
        width: 38px;
    }
    .info-box-style01 .txt-box {
        flex: 1 1 10%;
    }
    .info-box-style01 .txt-box .tit {
        font-size: 20px;
    }
    .info-box-style01 .txt-box .list li {
        padding-left: 24px;
    }
    .info-box-style02 {
        margin-bottom: 40px;
    }
}
@media (min-width: 1400px) {
    .info-box-style01 {
        padding: 40px 45px;
    }
    .info-box-style01 .icon {
        width: 120px;
        height: 120px;
        flex: 0 1 120px;
        box-shadow: var(--shadow);
    }
    .info-box-style01 .icon img {
        width: 50px;
    }
}

/* step-style01 */
.step-style01 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
}
.step-style01 .step-item {
    position: relative;
    flex: 0 0 100%;
}
.step-style01 .step-item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-width: 8px 7px 0 7px;
    border-style: solid;
    border-color: #d5d5d5 transparent transparent transparent;
}
.step-style01 .step-item:last-child::after {
    display: none;
}
.step-style01 .step-item .step-inner {
    display: flex;
    gap: 0 20px;
    border: 1px solid var(--form-color01);
    border-radius: 6px;
    padding: 6px;
}
.step-style01 .step-item .step-inner .tit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex: 0 0 35%;
    max-width: 35%;
    font-size: 15px;
    font-family: var(--font-type02);
    color: #fff;
    background-color: var(--main-color01);
    border-radius: 6px;
    padding: 16px 16px 12px;
}
.step-style01 .step-item .step-inner .tit + .txt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.step-style01 .step-item.active .step-inner .tit {
    background-color: var(--main-color02);
}
@media (min-width: 576px) {
    .step-style01 .step-item .step-inner .tit {
        flex: 0 0 28%;
        max-width: 28%;
    }
}
@media (min-width: 768px) {
    .step-style01 {
        gap: 18px;
    }
    .step-style01 .step-item {
        flex: 1 1 30%;
    }
    .step-style01 .step-item::after {
        left: auto;
        right: -13px;
        bottom: 50%;
        transform: translateY(50%);
        border-width: 7px 0 7px 8px;
        border-color: transparent transparent transparent #d5d5d5;
    }
    .step-style01 .step-item .step-inner {
        display: block;
        height: 100%;
        padding: 0;
        border-radius: 10px;
    }
    .step-style01 .step-item .step-inner .tit {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding: 17px 14px 14px;
        font-size: 16px;
        border-radius: 10px;
    }
    .step-style01 .step-item .step-inner .txt {
        text-align: center;
    }
    .step-style01 .step-item .step-inner .tit + .txt {
        display: inline-block;
        width: 100%;
        text-align: center;
        padding: 18px;
    }
}
@media (min-width: 992px) {
    .step-style01 {
        gap: 24px;
    }
    .step-style01 .step-item::after {
        right: -16px;
        border-width: 8px 0 8px 10px;
    }
    .step-style01 .step-item .step-inner .tit {
        font-size: 18px;
        margin-bottom: 5px;
    }
    .step-style01 .step-item .step-inner .txt {
        min-height: 60px;
        padding: 0 8px;
    }
    .step-style01 .step-item .step-inner .tit + .txt {
        min-height: 80px;
        padding: 24px;
    }
}
@media (min-width: 1600px) {
    .step-style01 {
        gap: 28px;
    }
    .step-style01 .step-item {
        flex: 1;
    }
    .step-style01 .step-item::after {
        right: -20px;
    }
}


/*****************************************************
        Google Translate Main + Common
*****************************************************/
@media (min-width: 576px) {
    html:not([lang="auto"]):not([lang="ko"]), html:not([lang="auto"]):not([lang="ko"]) body {
        font-size: 16px;
    }
}
@media (min-width: 1800px) {
    html:not([lang="auto"]):not([lang="ko"]) .header-global {
        font-size: 15px;
    }
}
html:not([lang="auto"]):not([lang="ko"]) .header-global > .container {
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
html:not([lang="auto"]):not([lang="ko"]) .header-cont > .container {
    gap: 10px;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}