@charset "utf-8";
/* CSS Document */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* @font-face { 
    font-family: 'Pretendard'; 
    src: url('/woff/Pretendard-Regular.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal;
  }
 */

:root {
    /* --bs-body-font-family:'Montserrat', 'Noto Sans KR', Dotum, Sans-serif; */
    --bs-body-font-family: "Pretendard", Dotum, Sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 300;
    --bs-body-line-height: 1.5;
    --bs-body-color: #666666;

    --bs-primary: #83ac2a;
    --bs-secondary: #00454e;
    --bs-success: #24a148;
    --bs-info: #17a2b8;
    --bs-warning: #ffe01c; /* 카카오톡 버튼 */
    --bs-danger: #ff5938;
    --bs-light: #f5f5f5;
    --bs-dark: #000000;
    --bs-lightblue: #eef2fa;

    --bs-white: #fff;
    --bs-gray: #666666;
    --bs-gray-dark: #222222;
    --bs-gray-100: #eeeeee; /* 회색 배경 */
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dddddd; /* border */
    --bs-gray-400: #cccccc; /* 진한 회색 배경 */
    --bs-gray-500: #aaaaaa; /* 진한 회색 배경2 */
    --bs-gray-600: #888888; /* 회색 폰트 */
    --bs-gray-700: #555555; /* 회색 폰트02 */
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;

    --admin-bg-color: #28344e;
    --admin-login-color: #535d71;
    --bs-border-color: #dddddd; /* border */
}

body {
    font-family: var(--bs-body-font-family);
    font-weight: var(--bs-body-font-weight);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    color: var(--bs-dark);
    font-weight: 700;
}

h6 {
    font-size: 1.125rem;
}
.fs-6 {
    font-size: 1.125rem !important;
}
.text-18 {font-size: 18px !important;}

@media screen  and (max-width:767px){
    .text-18 {font-size: 1rem !important;}
}

.fw-100 {
    font-weight: 100;
}
.fw-200 {
    font-weight: 200;
}
.fw-300 {
    font-weight: 300;
}
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}
.fw-800 {
    font-weight: 800;
}

a {
    text-decoration: none;
    color: var(--bs-body-color);
}
a:hover {
    text-decoration: none;
    color: var(--bs-primary);
}

ol,
ul {
    padding-left: 0;
    margin-bottom: 0;
}
ol,
ul,
li {
    list-style-type: none;
}

p {
    font-size: 1rem;
    margin-bottom: 0;
}
/* p:not(:last-child) {margin-bottom: 1rem;} */

.border-top-dark {
    border-top: 2px solid var(--bs-dark) !important;
}

/* 체크박스 커스텀 */
.form-check-input {
    background-color: var(--bs-gray-400);
    border: 0;
    border-radius: 50% !important;
    background-image: url("/images/common/check.svg");
    background-size: 18px;
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.text-muted {
    color: var(--bs-gray) !important;
}

.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    overflow: hidden;
    border: 0;
}

@media screen and (min-width: 1200px) {
    p {
        font-size: 1.125rem;
    }
}

address {
    margin-bottom: 0.5rem;
}
section {
    padding-top: 80px;
    padding-bottom: 80px;
    word-break: keep-all;
}

@media screen and (min-width: 1200px) {
    section {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

/* 부트아이콘 사파리에서 마음대로 색상변경을해서 생상 지정해놓음. */
.bi {
    color: var(--bs-dark);
}

/* ********************* */
/* **** user class ***** */
/* ********************* */
.sound-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
}

.menu-open {
    overflow: hidden;
}

/* ********************* */
/* ******* layout ****** */
/* ********************* */
.container {
    max-width: 1360px;
    padding-left: 4%;
    padding-right: 4%;
}
.container-fluid {
    max-width: 1760px;
    padding-left: 4%;
    padding-right: 4%;
}

@media screen and (min-width: 1200px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .container-fluid {
        max-width: 1920px;
        padding-left: 100px;
        padding-right: 100px;
    }
}

/* ********************* */
/* ******* banner ****** */
/* ********************* */
.main-banner .swiper-wrapper {
    transition-timing-function: linear;
}
.banner-logo {
    width: 100%;
}

/* ********************* */
/* ******* button ****** */
/* ********************* */
.btn {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-border-radius: 50px;
}

.btn-sm {
    height: 45px;
}
.btn-lg {
    --bs-btn-padding-x: 2rem;
    height: 65px;
}
.btn-sm .bi-arrow-right {
    margin-left: 8px;
}
.btn-lg .bi-arrow-right {
    margin-left: 24px;
}
.btn-xl {
    min-width: 100%;
    height: 60px;
    font-size: 1.25rem;
    font-weight: 500;
}

.btn-primary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
}

.btn-primary:active {border-color: var(--bs-primary) !important;}

.btn-secondary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
}

.btn-light-secondary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: #b1b8a2;
    --bs-btn-border-color: #b1b8a2;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #b1b8a2;
    --bs-btn-hover-border-color: #b1b8a2;
    --bs-btn-active-bg: #b1b8a2;
}
.btn-light-secondary.btn:first-child:active {color: var(--bs-white);    border-color:#b1b8a2;}

.btn-success {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-bg: var(--bs-success);
}

.btn-danger {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-bg: var(--bs-danger);
}

.btn-warning {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-active-bg: var(--bs-warning);
}

.btn-info {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-active-bg: var(--bs-info);
}

.btn-light {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-light);
    --bs-btn-hover-border-color: var(--bs-light);
    --bs-btn-active-bg: var(--bs-light);
}

.btn-lightgreen {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-lightgreen);
    --bs-btn-border-color: var(--bs-lightgreen);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-lightgreen);
    --bs-btn-hover-border-color: var(--bs-lightgreen);
    --bs-btn-active-bg: var(--bs-lightgreen);
    --bs-btn-active-color: var(--bs-white);
}

.btn-dark {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-dark);
}

.btn-gray {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-gray-600);
    --bs-btn-border-color: var(--bs-gray-600);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-gray-600);
    --bs-btn-hover-border-color: var(--bs-gray-600);
    --bs-btn-active-bg: var(--bs-gray-600);
}

.btn-white {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--bs-gray-400);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-border-color: var(--bs-gray-400);
    --bs-btn-active-bg: var(--bs-white);
}

.btn-link {
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
}

.btn-primary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
}

.btn-secondary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
}

.btn-success {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-bg: var(--bs-success);
}

.btn-danger {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-bg: var(--bs-danger);
}

.btn-warning {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-active-bg: var(--bs-warning);
}

.btn-info {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-active-bg: var(--bs-info);
}

.btn-light {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-light);
    --bs-btn-hover-border-color: var(--bs-light);
    --bs-btn-active-bg: var(--bs-light);
}

.btn-lightgreen {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-lightgreen);
    --bs-btn-border-color: var(--bs-lightgreen);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-lightgreen);
    --bs-btn-hover-border-color: var(--bs-lightgreen);
    --bs-btn-active-bg: var(--bs-lightgreen);
    --bs-btn-active-color: var(--bs-white);
}

.btn-dark {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-dark);
}

.btn-gray {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-gray-600);
    --bs-btn-border-color: var(--bs-gray-600);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-gray-600);
    --bs-btn-hover-border-color: var(--bs-gray-600);
    --bs-btn-active-bg: var(--bs-gray-600);
}

.btn-white {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--bs-gray-400);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-border-color: var(--bs-gray-400);
    --bs-btn-active-bg: var(--bs-white);
}

.btn-white:hover {
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
}

.btn-link {
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
}

/* buttons - outline */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
}
.btn-outline-primary:hover {
    color: var(--bs-white) !important;
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
}

.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-bg: var(--bs-success);
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-bg: var(--bs-danger);
}

.btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-active-bg: var(--bs-danger);
}

.btn-outline-info {
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-active-bg: var(--bs-info);
}

.btn-outline-light {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-gray-300);
    --bs-btn-hover-bg: var(--bs-gray-300);
    --bs-btn-hover-border-color: var(--bs-gray-300);
    --bs-btn-active-bg: var(--bs-gray-300);
}

.btn-outline-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-dark);
}
.btn-outline-dark:hover {
    color: var(--bs-white) !important;
}

/* ********************* */
/* **** color & bg ***** */
/* ********************* */
.text-primary {
    color: var(--bs-primary) !important;
}
.text-secondary {
    color: var(--bs-secondary) !important;
}
.text-success {
    color: var(--bs-success) !important;
}
.text-info {
    color: var(--bs-info) !important;
}
.text-warning {
    color: var(--bs-warning) !important;
}
.text-danger {
    color: var(--bs-danger) !important;
}
.text-light {
    color: var(--bs-light) !important;
}
.text-dark {
    color: var(--bs-dark) !important;
}

.text-gray {
    color: var(--bs-gray)!important;
}

/* Background color */
.bg-primary {
    background-color: var(--bs-primary) !important;
}
.bg-secondary {
    background-color: var(--bs-secondary) !important;
}
.bg-success {
    background-color: var(--bs-success) !important;
}
.bg-info {
    background-color: var(--bs-info) !important;
}
.bg-warning {
    background-color: var(--bs-warning) !important;
}
.bg-danger {
    background-color: var(--bs-danger) !important;
}
.bg-light {
    background-color: var(--bs-light) !important;
}
.bg-dark {
    background-color: var(--bs-dark) !important;
}
.bg-white {
    background-color: var(--bs-white) !important;
}

.bg-admin {
    background-color: var(--admin-bg-color);
}
.bg-admin-login {
    background-color: var(--admin-login-color);
}

/* ********************* */
/* ******** card ******* */
/* ********************* */
.card {
    --bs-card-spacer-y: 1.5rem;
    overflow: hidden;
}

.card-img {
    width: 100%;
    height: auto;
    padding-bottom: 70%;
    position: relative;
    overflow: hidden;
}
.card-img:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}
.card-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.card-title {
    font-weight: 700;
    color: var(--bs-gray-dark);
}
.card-desc {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-footer {
    background-color: transparent;
}

@media screen and (min-width: 992px) {
    .card {
        border-width: 0;
    }
}

/* ********************* */
/* ******** list ******* */
/* ********************* */

/* ********************* */
/* ******* modal ******* */
/* ********************* */
.modal-header .modal-title {
    color: var(--bs-dark);
}

/* ********************* */
/* ******* table ****** */
/* ********************* */
.table > :not(caption) > * > * {
    padding: 1rem 1rem;
    font-size: 1rem;
    vertical-align: middle;
}
.table thead tr {
    border-bottom: 1px solid var(--bs-gray-300);
    text-align: center;
}
.table thead tr th {
    border-width: 0;
    color: var(--bs-dark);
}
.table tbody tr th {
    background-color: var(--snb-bg);
}

.table-primary {
    --bs-table-color: var(--bs-white);
    --bs-table-bg: var(--bs-primary);
    --bs-table-border-color: var(--bs-white);
    --bs-table-hover-bg: var(--bs-gray-500);
    font-weight: 400;
}

.table-primary > :not(caption) > * > * {
    padding: 1rem 1rem;
}

.table.table-primary thead th {
    border-right: 1px solid var(--bs-white);
    color: var(--bs-white);
    font-weight: 500;
    font-size: 1.125rem;
}
.table.table-primary thead tr {
    border-color: var(--bs-primary);
}

.table-primary tbody tr {
    border-bottom: 1px solid var(--bs-body-color);
}
.table-primary tbody tr th {
    color: var(--bs-primary);
    font-size: 1.125rem;
    text-align: center;
}
.table-primary tbody td {
    background-color: var(--bs-white);
    color: var(--bs-dark);
    text-align: center;
    border-right: 1px solid var(--bs-gray-200);
    font-size: 1.125rem;
}
.table-primary tbody td:last-child {
    border-width: 0;
}

/* ******************** */
/* ****** visual ****** */
/* ******************** */
/* main-visual */
.main-visual * {
    color: var(--bs-white);
}
.main-visual .swiper-slide {
    width: 100%;
    height: 100vh;
}

.main-visual .visual-01 {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(
            180deg,
            rgba(30, 24, 53, 0.4) 0%,
            rgba(30, 24, 53, 0.4) 90.16%
        ),
        url("/images/main/mainvisual_01.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.main-visual .visual-02 {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(
            180deg,
            rgba(30, 24, 53, 0.4) 0%,
            rgba(30, 24, 53, 0.4) 90.16%
        ),
        url("/images/main/mainvisual_02.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.main-visual .visual-03 {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(
            180deg,
            rgba(30, 24, 53, 0.4) 0%,
            rgba(30, 24, 53, 0.4) 90.16%
        ),
        url("/images/main/mainvisual_03.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.main-visual .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: var(--bs-white);
}

@media screen and (min-width: 1200px) {
    .main-visual .swiper-slide {
        max-height: 950px;
    }
}

.swiper-controls {
    width: 100%;
    height: 3px;
    max-width: 1360px;
    padding-left: 4%;
    padding-right: 4%;
    position: absolute;
    bottom: 58px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: flex;
    justify-content: flex-start;
    z-index: 1;
}
.swiper-controls .progress {
    width: 100%;
    max-width: 200px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 0;
    border-radius: 0;
    overflow: hidden;
}
.swiper-controls .progress .progress-bar {
    width: 0%;
    background-color: var(--bs-primary);
    animation-name: progress;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

@media screen and (min-width: 1200px) {
    .swiper-controls {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@-webkit-keyframes progress {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

@keyframes progress {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

.main-visual .swiper-button-next,
.main-visual .swiper-button-prev {
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    position: relative;
}
.main-visual .swiper-button-prev,
.main-visual .swiper-rtl .swiper-button-next {
    margin-left: 10px;
}
.main-visual .swiper-button-next,
.main-visual .swiper-rtl .swiper-button-prev {
    margin-left: 10px;
}

.main-visual .swiper-button-next:after,
.main-visual .swiper-button-prev:after {
    font-size: 1rem;
    font-weight: 900;
    color: var(--bs-white);
}
.button-area button {
    padding: 0;
    font-size: 1.5rem;
    margin-top: -26px;
}

/* sub-visual */
.sub-visual {
    width: 100%;
    height: 450px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(
            180deg,
            rgba(30, 24, 53, 0.4) 0%,
            rgba(30, 24, 53, 0.4) 90.16%
        ),
        url("/images/sub/company/subvisual.jpg");
    background-size: cover;
}

.sub-visual.visual-01 {
    background-image: linear-gradient(
            180deg,
            rgba(30, 24, 53, 0.4) 0%,
            rgba(30, 24, 53, 0.4) 90.16%
        ),
        url("/images/sub/company/subvisual.jpg");
}
.sub-visual.visual-02 {
    background-image: linear-gradient(
            180deg,
            rgba(30, 24, 53, 0.4) 0%,
            rgba(30, 24, 53, 0.4) 90.16%
        ),
        url("/images/sub/business/subvisual.jpg");
}
.sub-visual.visual-03 {
    background-image: linear-gradient(
            180deg,
            rgba(30, 24, 53, 0.4) 0%,
            rgba(30, 24, 53, 0.4) 90.16%
        ),
        url("/images/sub/company/subvisual.jpg");
}
.sub-visual.visual-04 {
    background-image: linear-gradient(
            180deg,
            rgba(30, 24, 53, 0.4) 0%,
            rgba(30, 24, 53, 0.4) 90.16%
        ),
        url("/images/sub/company/subvisual.jpg");
}
.sub-visual.visual-05 {
    background-image: linear-gradient(
            180deg,
            rgba(30, 24, 53, 0.4) 0%,
            rgba(30, 24, 53, 0.4) 90.16%
        ),
        url("/images/sub/company/subvisual.jpg");
}

/* sub-visual location -필요없을시 아래내용 지우기*/
.sub-visual .container {
    margin-top: 4rem;
}
/* .location {
    margin-top: 2rem;
    font-size: 0.875rem;
}
.location ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.icon_home i::before {
    vertical-align: text-top;
}
.location ul li {
    margin-right: 0.5rem;
}
.location ul li:not(:last-child)::after {
    content: "\F285";
    font-family: "bootstrap-icons";
    position: relative;
    margin-left: 0.5rem;
    font-size: 0.75rem;
}
 */
/* ********************* */
/* ***** side-nav ****** */
/* ********************* */
.spy-nav {
    position: fixed;
    right: 20px;
    bottom: 0;
    z-index: 100;
}
.spy-nav-list {
    position: relative;
}
.spy-nav-list::before {
    content: "Scroll";
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-primary);
    text-transform: uppercase;
    position: absolute;
    right: calc(100% + 5px);
    bottom: 10px;
    writing-mode: vertical-rl;
}
.spy-nav-item a {
    width: 2px;
    height: 40px;
    background-color: var(--bs-gray-500);
    display: block;
}
.spy-nav-item a.on {
    background-color: var(--bs-primary);
}
.spy-nav-item a:hover {
    background-color: var(--bs-primary);
}

@media screen and (min-width: 1440px) {
    .spy-nav {
        right: 180px;
    }
}

/* ******************** */
/* ******** snb ******* */
/* ******************** */
/* desktop */
.snb {
    border-bottom: 1px solid var(--bs-gray-200);
}
.snb-list li.active a {
    color: var(--bs-primary);
    border-bottom: 4px solid var(--bs-primary);
}
.snb-list li a {
    padding: 1.5rem;
    color: var(--bs-body-color);
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* mobild */
.snb-list {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 1.125rem;
    font-weight: 500;
}
.snb-list .snb-item {
    border-right: 1px solid var(--bs-gray-200);
    position: relative;
}
.snb-list .snb-item.home {
    height: 70px;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    line-height: 70px;
}

.snb-list .dropdown {
    width: calc(50% - 22.5px);
}
.snb-list .dropdown-toggle {
    width: 100%;
    height: 70px;
    padding-left: 0.875rem;
    padding-right: 1.5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    position: relative;
    outline: 0;
    border: none;
    font-weight: 500;
}
.snb-list .dropdown-toggle:focus {
    outline: 0;
    border: none;
}
.snb-list .dropdown-toggle::after {
    position: absolute;
    top: 50%;
    right: 4%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.snb-list .dropdown-toggle.on {
    color: var(--bs-primary);
}
.snb-list .dropdown-toggle.show::after {
    -webkit-transform: translateY(-40%) rotate(180deg);
    transform: translateY(-40%) rotate(180deg);
}

.snb-list .dropdown-toggle i.bi {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.snb-list .dropdown-menu {
    min-width: 0;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    z-index: 2000;
}
.snb-list .dropdown-menu a {
    display: block;
    width: 100%;
    padding: 0.5rem 0.875rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.snb-list .dropdown-menu a:hover {
    color: var(--bs-primary);
    background-color: var(--bs-gray-300);
    font-weight: 500;
}

@media screen and (min-width: 768px) {
    .snb-list .snb-item.home {
        font-size: 1.125rem;
    }
    /* .snb-list .snb-item:last-child {border-width: 1px;} */
}

@media screen and (min-width: 1440px) {
    .snb-list {
        justify-content: space-between;
    }
    .snb-list .snb-item {
        border-width: 0;
    }
}

/* ******************** */
/* ****** swiper ****** */
/* ******************** */
.swiper-pagination-bullet-active {
    background-color: var(--bs-primary);
}

/* ********************* */
/* ******* header ****** */
/* ********************* */
.header {
    width: 100%;
    height: auto;
    /* position: fixed; */
    position: absolute;
    top: 0;
    left: 0;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.5); */
    z-index: 1002;
}

.header .dropdown-toggle {
    width: 100%;
    height: 35px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-white);
}
.header .dropdown-toggle .bi {
    color: var(--bs-white);
}
.header .dropdown-toggle.show .fa-angle-down {
    transform: rotate(180deg);
}
.header .dropdown-toggle::after {
    display: none;
}
.header .dropdown-toggle:active {
    color: var(--bs-white);
    border-color: var(--bs-white);
}

.header .dropdown-menu {
    min-width: 0;
    width: 100%;
    text-align: center;
}

/* logo */
.navbar-brand .logo {
    width: 123px;
    height: auto;
}


/* gnb */
.gnb {
    width: 100%;
    padding-top: 50px;
}

@media screen and (max-width: 767px) {
    .gnb {
        padding-top: 30px;
    }
}

.gnb > .container-fluid {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.gnb .nav-list {
    margin-right: 1.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    display: none;
}

.gnb .nav-item {
    position: relative;
}
/* .gnb .nav-item:hover .nav-link {
    color: var(--bs-primary);
} */
.gnb .nav-item.active span::after,
.gnb .nav-item:hover span::after {
    opacity: 1;
    visibility: visible;
    width: calc(100% + 10px);
    transition:all 0.3s;
}
.gnb .nav-item span {position: relative;}
.gnb .nav-item span::after {
    content: "";
    width: 0;
    height: 10px;
    background-color: #00454e;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    padding: 2px 5px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}

/* .gnb .nav-item.active > a {
    color: var(--bs-primary);
} */
.gnb .nav-link {
    padding: 12px 2rem;
    font-size: 1.125rem;
    color: var(--bs-white);
    font-weight: 700;
    font-size: 1.25rem;
}

.gnb .nav-item:hover .submenu {
    display: block;
}

/* submenu */
.submenu {
    min-width: 120px;
    padding: 0;
    /* border-radius: 0.5rem; */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    display: none;
    color: var(--bs-white);
    /* display: block; */
}

/* .sub-item:not(:last-child) {
    margin-bottom: 0.5rem;
} */

.sub-link {
    color: inherit;
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-weight: 600;
    padding: 0.5rem 0;
}
.sub-link:hover {
    color: var(--bs-white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sub-item.active .sub-link {
    color: var(--bs-white);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* .sub-item:hover .sub-link::after {
    opacity: 1;
}
.sub-item.active .sub-link::after {
    opacity: 1;
} */

.sub-link::after {
    content: "";
    width: 5px;
    height: 5px;
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bs-white);
    border-radius: 50%;
    opacity: 0;
}

/* 로그인 했을 때 뜨는 마이페이지 버튼 */
.btn-util {
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-border-width: 0;
    --bs-btn-hover-color: var(--bs-white);
    font-size: 1.75rem;
    color: var(--bs-white);
}
.btn-util .bi {
    color: var(--bs-white);
}
.header.isFixed .bi {
    color: var(--bs-dark);
}

/* 전체메뉴 버튼 */
.btn-trigger {
    --bs-btn-padding-x: 0 !important;
    --bs-btn-padding-y: 0 !important;
    --bs-btn-border-width: 0;
    --bs-btn-hover-color: var(--bs-white);
    font-size: 2rem;
    color: var(--bs-white);
}
.btn-trigger .menu-btn {
    width: 50px;
    height: 50px;
}

.btn-trigger .bi {
    color: var(--bs-white);
}
.btn-trigger .isFixed .bi {
    color: var(--bs-dark);
}

@media screen and (min-width: 1400px) {
    .gnb .nav-list {
        display: flex;
    }

    .btn-util {
        display: none;
    }
    /* .btn-trigger {
        display: none;
    } */
}
header.main-header {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
}
header.main-header .nav-list {
    display: none;
}
header.main-header .navbar-brand {
    display: none;
}
header.main-header .gnb > .container-fluid {
    justify-content: flex-end;
}

/* 전체 메뉴 */
.all-menu {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    display: none;
}

.allMenu-bag {width: 100%; height: 100%;}


.all-menu .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 100px;
    padding-right: 100px;
    max-width: 520px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: var(--bs-white);
}

.all-menu-header {
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding-top: 50px;
    padding-bottom: 50px;
}

@media screen and (max-width: 767px) {
    .all-menu-header {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

.all-menu-header .btn-close {
    opacity: 1;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    background-color: var(--bs-gray-400);
    border-radius: 50%;
    padding: 0;
    color: var(--bs-white);
    background-image: none;
}
.all-menu-header .btn-close .bi::before {
    color: var(--bs-white);
}

.all-menu-nav {
    width: 100%;
    /* max-height: calc(100vh - 255px); */
    padding: 1.5rem 0;
    /* flex: 1; */
    overflow-y: auto;
}

.all-menu-list {
    width: 100%;
}
.all-menu-list .all-link,
.all-menu-list .btn-allmenu {
    padding: 1.25rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-dark);
    display: inline-block;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.all-menu-list .btn-allmenu {
    border-width: 0;
}
.all-menu-list .btn-allmenu .bi {
    font-size: 1rem;
    margin-left: 5px;
}
.all-menu-list .btn-allmenu .bi::before {
    font-size: 0.875rem;
    font-weight: 800 !important;
    color: var(--bs-gray-400);
}
.all-menu-list .btn-allmenu.active {
    color: #536ab2;
}
.all-menu-list .btn-allmenu.active .bi::before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    color: #536ab2;
}
.all-menu-list .btn-allmenu.active + .all-submenu {
    display: block;
}

.all-menu-list .sub-item.active .sub-link {color: var(--bs-secondary);}
.all-menu-list .sub-item .sub-link::after {display: none;}

.all-menu-list .sub-item.active .sub-link {text-underline-offset: 2px;}
.all-menu-list .sub-item:hover .sub-link {text-underline-offset: 2px;}

.all-submenu {
    padding: 0.5rem 1rem;
    padding-top: 0;
    /* margin-bottom: 1rem; */
    font-size: 1.125rem;
    color: #536ab2;
    font-weight: 400;
    display: none;
}

.all-submenu .sub-link {
    font-weight: 400;
    text-align: left;
}

.all-submenu .sub-item:hover .sub-link {
    text-decoration: underline;
    color: #536ab2;
}
.all-submenu .sub-item.active .sub-link {
    text-decoration: underline;
    color: #536ab2;
}

.all-menu-footer {
    width: 100%;

    padding: 1.5rem 0;
    padding-top: 2.5rem;
    border-top: 1px solid var(--bs-gray-300);
}

.all-foot-list {
    font-weight: 400;
}
.all-foot-list .all-foot-item:not(:last-child) {
    margin-bottom: 0.2rem;
}
.all-foot-list .all-foot-item b {
    display: inline-block;
    color: var(--bs-dark);
}
.all-foot-list .dropdown-toggle {
    max-width: 95px;
    margin-left: auto;
    margin-top: 1rem;
    color: var(--bs-dark);
    border-color: var(--bs-dark);
    display: block;
}
.all-foot-list .dropdown-menu {
    max-width: 95px;
    border-color: var(--bs-dark);
}

@media screen and (max-width: 767px) {
    .all-menu-list .all-link,
    .all-menu-list .btn-allmenu {
        padding: 0.5rem 0;
        font-size: 1.125rem !important;
    }
    .all-submenu .sub-link {
        font-size: 1rem !important;
    }
}

/* util-menu */
.util-list {
    font-size: 1.125rem;
}

.util-item {
    position: relative;
}
.util-item:not(:last-child) {
    margin-right: 0.5rem;
}
/* .util-item.bar::after {
    content: "";
    width: 1px;
    height: 15px;
    background-color: var(--bs-gray-300);
    position: absolute;
    top: 50%;
    right: -5px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
 */
.util-link {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    font-weight: 600;
}
.util-link .bi::before {
    font-size: 0.875rem;
    font-weight: 800 !important;
    vertical-align: middle;
    margin-left: 5px;
}

.util-link-01 .bi::before {
    color:#536ab2;
}
.util-link-02 .bi::before,
.util-link-03 .bi::before,
.util-link-04 .bi::before {
    color: #83ac2a;
}

.util-link-05 .bi::before {
    color: var(--bs-gray-600);
}

.util-link-01 {
    color: #536ab2;
}
.util-link-02,
.util-link-03,
.util-link-04 {
    color: #83ac2a;
}

.util-link-05 {
    color: var(--bs-gray-600);
}
.util-link-01:hover {
    color: #536ab2;
}
.util-link-02:hover,
.util-link-03:hover,
.util-link-04:hover {
    color: #83ac2a;
}
.util-link-05:hover {
    color: var(--bs-gray-600);
}

.util-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}
.util-icon-01 {
    background-color: #536ab2;
}
.util-icon-02,
.util-icon-03,
.util-icon-04 {
    background-color: #83ac2a;
}
.util-icon-05 {
    background-color: var(--bs-gray-500);
}
.util-icon img {
    height: auto;
    width: 14px;
}
.util-icon-04 img,
.util-icon-05 img {
    width: 12px;
}

@media screen and (max-width: 767px) {
    .util-link {
        font-size: 1rem;
    }
    .all-menu-footer {
        padding-top: 1.5rem;
    }
}

@media screen and (max-width: 520px) {
    .all-menu .container {
        padding-left: 4%;
        padding-right: 4%;
    }
}

/* ********************** */
/* *** header-isFixed *** */
/* ********************** */
.header.isFixed {
    background-color: var(--bs-white);
    border-color: var(--bs-gray-200);
}
.isFixed .nav-link,
.isFixed .util-link,
.isFixed .btn {
    color: var(--bs-dark);
}
.isFixed.header .dropdown-toggle {
    color: var(--bs-dark);
}
.isFixed .navbar-brand .logo-dark {
    display: block;
}
.isFixed .navbar-brand .logo-wh {
    display: none;
}

/* ********************** */
/* *********quick******** */
/* ********************** */
.quick-menu {
    position: fixed;
    top: auto;
    bottom: 15vh;
    right: 0px;
    z-index: 400;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.quick-menu li {
    width: 70px;
    height: 60px;
    padding-left: 10px;
    position: relative;
}

.quick-menu li .sns-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* .quick-menu li .sns-icon img {height: 40px;} */

.sns-kakao .sns-icon {
    background-color: #fae300;
}
.sns-kakao .sns-icon img {
    height: 35px;
    margin-top: 4px;
}

.sns-facebook .sns-icon {
    background-color: #3b5998;
}
.sns-facebook .sns-icon img {
    height: 35px;
    margin-top: 2px;
}

.sns-naverblog .sns-icon {
    background-color: #2cb24a;
}
.sns-naverblog .sns-icon img {
    height: 30px;
    margin-top: 5px;
}

.sns-instagram .sns-icon {
    background: linear-gradient(
        230deg,
        #6053f8 0%,
        #aa2fc1 20%,
        #da2396 40%,
        #ff3d51 60%,
        #ffcc4c 100%
    );
}
.sns-instagram .sns-icon img {
    height: 35px;
}

.sns-youtube .sns-icon {
    background-color: #c4302b;
}
.sns-youtube .sns-icon img {
    height: 25px;
}

.sns-X .sns-icon {
    background-color: #000000;
}
.sns-X .sns-icon img {
    height: 25px;
}

.quick-menu li:hover .quick-nav-text {
    display: block;
}
.quick-menu li:not(:last-child) {
    margin-bottom: 8px;
}
.quick-menu li a {
    display: block;
    width: 100%;
    height: 100%;
}
.quick-menu .quick-nav-text {
    padding: 8px 16px;
    background-color: var(--bs-white);
    color: var(--bs-dark);
    position: absolute;
    top: 50%;
    right: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.3);
    display: none;
}
.quick-menu .quick-nav-text:hover {
    color: var(--bs-primary);
}
.quick-menu .btn-topScroll {
    width: 60px;
    height: 60px;
    background-color: var(--bs-primary);
    padding: 0;
}
.quick-menu .btn-topScroll i {
    font-size: 1.5rem;
    color: var(--bs-white);
}
.quick-open .quick-menu {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    right: 30px;
}
.btn-quick {
    --bs-btn-border-width: 4px;
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: var(--bs-primary);
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-weight: 700;
    z-index: 900;
    background-color: var(--bs-white);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 0;
    font-size: 0.875rem;
}
.btn-quick:hover {
    border: 4px solid var(--bs-primary);
    background-color: var(--bs-white);
    color: var(--bs-primary);
}
.btn-quick.is-active {
    --bs-btn-color: var(--bs-white);
    background-color: var(--bs-primary);
}
.btn-quick.is-active:hover {
    color: var(--bs-white);
}

@media screen and (max-width: 991px) {
    .quick-menu {
        bottom: 90px;
    }
}
@media screen and (min-width: 992px) {
    .quick-menu {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        right: 20px;
    }
    .btn-quick {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    .quick-menu li {
        width: 40px;
        height: 40px;
        padding-left: 0;
    }
    .quick-menu li .sns-icon {
        width: 40px;
        height: 40px;
    }
    .quick-menu .btn-topScroll {
        width: 40px;
        height: 40px;
    }
    .quick-menu li:hover .quick-nav-text {
        display: none;
    }
    .sns-kakao .sns-icon img {
        height: 20px;
        margin-top: 2px;
    }
    .sns-facebook .sns-icon img {
        height: 20px;
    }
    .sns-naverblog .sns-icon img {
        height: 20px;
        margin-top: 2px;
    }
    .sns-instagram .sns-icon img {
        height: 22px;
    }
    .sns-youtube .sns-icon img {
        height: 16px;
    }
    .sns-X .sns-icon img {
        height: 18px;
    }
}

/* ******************** */
/* ******* title ****** */
/* ******************** */

/* 타이틀 공통사항 */
.section-header {
    margin-bottom: 3.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;

}
.section-header h1 {font-size: 3rem;}

h2.title {
    font-size: 2.5rem;
}

@media screen and (max-width:1199px) {
    .section-header h1 { font-size: calc(1.425rem + 2.1vw);}
}

/* ******************** */
/* ******** main ****** */
/* ******************** */

/* intro */
body.intro {
	position:relative;
	background: #536AB2;
	background: linear-gradient(90deg,rgba(83, 106, 178, 1) 0%, rgba(131, 172, 42, 1) 100%);
    min-height: 100vh;
    padding: 0;
}
body.intro::before {position:absolute; content:""; top:0; left:0; right:0; width:100%; height:90%; background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(98, 131, 222, 0) 100%);}
.intro-section {padding:0;}
.intro-section .container-fluid {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
	min-height:400px;
}
.intro-area {
    text-align: center;
}

@media screen and (max-width: 991px) {
	.intro-section .container-fluid {height:75vh}
}

.intro-area > div {
    display: flex;
    align-items: flex-end;
    gap: 40px;
}
.intro-logo-box {
    position: relative;
}
.intro-logo {
    /* display: none; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: logo 1.5s;
    width: 529px;
    height: auto;
    /* transition: all 3s; */
}

@keyframes logo {
    0% {
        transform: translate(-50%, -50%) scale(1.5);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        width: 580px;
        height: auto;
    }
}
.intro-area .btn-secondary {
    min-width: 240px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
}
.intro-area .logo {
    width: 529px;
    height: auto;
    opacity: 0;
}


/* ******************** */
/* ******** sub ******* */
/* ******************** */

/* 공통사항 바꾸기 텍스트가 작다고해서 16->18로 바꿈 */
.subpage-section {font-size: 1.125rem;}
.selection-section {font-size: 1rem;}
.form-control {font-size: 1.125rem;}
.subpage-section .btn {font-size: 1.125rem;}
@media screen and (max-width:767px) {
    .subpage-section {font-size: 1rem;}
    .form-control {font-size: 1rem;}
    .subpage-section .btn {font-size: 1rem;}
}
.subpage-section label.btn {color: var(--bs-gray-700) !important;}

.location ul {
    display: flex;
    font-weight: 700;
    flex-wrap: wrap;
    margin-top: 1rem;
    font-size: 1rem;
}

.location ul li.active {
    color: var(--bs-dark);
    position: relative;
}
.location ul li.active::before {
    content: "";
    position: absolute;
    bottom: 2px;
    left: -2%;
    height: 10px;
    width: 108%;
    border-radius: 30px;
    background-color: #83ac2a;
    z-index: -1;
}
.location ul li {
    color: #bc8266;
}
.location ul li a {color: #65861c;}
.location ul li.active a {color: var(--bs-dark);}
.location ul li:not(:last-child) {
    margin-right: 1.75rem;
}
.location .chevron-icon {
    font-size: 12px;
    vertical-align: middle;
    display: flex;
    align-items: center;
}
.location .chevron-icon .bi:not(:first-child) {
    margin-left: -2px;
}
.location .chevron-icon .bi::before {
    font-weight: 800 !important;
    opacity: 0.2;
}


@media screen and (max-width: 767px) {
    .location ul li {
        font-size: 0.875rem;
    }
    .location ul li:not(:last-child) {
        margin-right: 0.5rem;
    }
    .location ul li .bi:not(:first-child) {
        display: none;
    }
    .location ul li span {
        display: none;
    }
    .location ul li.active span {
        display: inline;
    }
}

/* 인사말 */
.greeting-section p {line-height: 1.5;}
.greeting-img {background-image: url("/images/sub/greeting-img.png"); background-repeat: no-repeat; background-position: center center; background-size: cover;width: 100%; border-radius: 1rem; padding: 85px 100px;  display: flex; justify-content: space-between; align-items: center; gap: 30px; min-height: 380px;}
.greeting-img .logo {width: 210px; height: auto; min-width: 210px;}


@media screen and (max-width: 1199px){
    .greeting-img {min-height: auto;}
}

@media screen and (max-width: 991px){
    .greeting-img {padding: 50px;}
    .greeting-img .logo  {min-width: auto;}
}

@media screen and (max-width: 767px){
    .greeting-img {padding: 40px; flex-direction: column-reverse;}
    .greeting-img .logo  {min-width: auto;}
}


/* 자율성 알아보기 상단  */
.sub-location {border-bottom: 1px solid var(--bs-gray-300); margin-bottom: 60px;}
.sub-location ul {
    display: flex;
    justify-content: center;
    font-weight: 700;
    /* flex-wrap: wrap; */
    margin-top: 1rem; 
    width: 100%;
}
.sub-location ul li a {padding-bottom: 10px; display: block;}
.sub-location ul li.active {color: var(--bs-primary);position: relative;}

.sub-location ul li.active::after {content: ""; position: absolute; width: 100%; height: 6px; border-radius: 30px; background-color: var(--bs-primary); bottom: -3px; left: 0;}
.sub-location ul li:hover {position: relative;}
.sub-location ul li:hover a::after {content: ""; position: absolute; width: 100%; height: 6px; border-radius: 30px; background-color: var(--bs-primary); bottom: -3px; left: 0;} 
.sub-location ul li.active a {color: var(--bs-primary);}
.sub-location ul li:not(:last-child) {
    margin-right: 1.75rem;
}
.sub-location .chevron-icon {
    font-size: 12px;
    vertical-align: middle;
    display: flex;
    align-items: center;
}
.sub-location .chevron-icon .bi:not(:first-child) {
    margin-left: -2px;
}
.sub-location .chevron-icon .bi::before {
    font-weight: 800 !important;
    opacity: 0.2;
}


@media screen and (max-width: 767px) {
    .sub-location {overflow-x: auto;}
    .sub-location ul {justify-content: flex-start;}
    .sub-location ul li {
        font-size: 0.875rem;
        white-space: nowrap;
    }
    .sub-location ul li:not(:last-child) {
        margin-right: 0.5rem;
    }
    .sub-location ul li .bi:not(:first-child) {
        display: none;
    }
    .sub-location ul li span {
        display: none;
    }
    .sub-location ul li.active span {
        display: inline;
    }
}

.text-indent {
    text-indent: -999999999px;
    font-size: 0;
    padding: 0;
    margin: 0;
}

.section {
    background-image: url("/images/sub/subpage-bag.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    padding-top: 250px;
    min-height: calc(100vh - 138px);
}

@media screen and (max-width: 767px) {
    .section {
        background-size: 100% 250px;
        padding-top: 200px;
    }
}
.up {text-transform: uppercase;}


/* 공유의사 결정이란 */

.info-area {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 28px;
}

.info-area .video-area {
    width: calc(64% - 28px);
    /* border-radius: 1rem; */
    /* overflow: hidden; */
}
.video-slide {    border-radius: 1rem;overflow: hidden;}
.info-area .video-area .video-wrap {
    margin-bottom: 0;
    border-radius: 1rem;
    overflow: hidden;
}

.info-area .card-area {
    width: 35%;
}

@media screen and (max-width: 991px) {
    .info-area {
        flex-wrap: wrap;
    }
    .info-area .video-area {
        width: 100%;
    }
    .info-area .card-area {
        width: 100%;
    }
    .cardSlide .swiper-slide img {
        width: 100%;
    }
}

/* 비디오 슬라이드 */

.video-area .video-pagination {
    color: var(--bs-white);
    position: static;
    font-size: 14px;
    padding-left: 1rem;
    position: absolute;
    bottom: 10px;
    left: auto;
    right: 10px;
    text-align: right;
    margin-right: 10px;
    margin-bottom: 5px;
    width: fit-content;
    padding: 2px 15px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 30px;
}



.video-area .swiper-button-next:after,
.video-area .swiper-button-prev:after {
    color: var(--bs-dark);
    font-size: 1.25rem;
    font-weight: 800 !important;
}

.video-area .video-next {
    right: -25px;
    top: 50%;
    /* transform: translateY(-50%); */
    width: 50px;
    height: 50px;
    background-color: var(--bs-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-gray-300);
    opacity: 0;
}
.video-area .video-prev {
    left: -25px;
    top: 50%;
    /* transform: translateY(-50%); */
    width: 50px;
    height: 50px;
    background-color: var(--bs-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-gray-300);
    opacity: 0;
}
.video-area:hover .video-next {
    opacity: 1;
}
.video-area:hover .video-prev {
    opacity: 1;
}



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

    /* .video-area:hover .video-next {
        right: 20px;
    }
    .video-area:hover .video-prev {
        left: 20px;
    } */
}

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

    .video-area .video-next {
        right: 1%;
    }
    .video-area .video-prev {
        left: 1%;
    }
    .video-area .video-next:after,
    .video-area .video-prev:after {
        font-size: 5vw;
    }
}


/* 슬라이드 */
.card-slide {
    position: relative;
}
.cardSlide {
    border-radius: 1rem;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .main-section {
        background-size: cover;
    }
}

.card-slide .swiper-button-next:after,
.card-slide .swiper-button-prev:after {
    color: var(--bs-dark);
    font-size: 1.25rem;
    font-weight: 800 !important;
}

.card-slide .swiper-button-next {
    right: -25px;
    top: 50%;
    /* transform: translateY(-50%); */
    width: 50px;
    height: 50px;
    background-color: var(--bs-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-gray-300);
    opacity: 0;
}
.card-slide .swiper-button-prev {
    left: -25px;
    top: 50%;
    /* transform: translateY(-50%); */
    width: 50px;
    height: 50px;
    background-color: var(--bs-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-gray-300);
    opacity: 0;
}
.card-area:hover .card-slide .swiper-button-next {
    opacity: 1;
}
.card-area:hover .card-slide .swiper-button-prev {
    opacity: 1;
}

.card-slide .swiper-btn-area .button-area {
    height: 20px;
}
.card-slide .swiper-btn-area .button-area img {
    vertical-align: middle;
}
.card-slide .swiper-btn-area img {
    vertical-align: inherit;
}
.card-slide .swiper-pagination {
    color: var(--bs-white);
    position: static;
    font-size: 14px;
    padding-left: 1rem;
    position: absolute;
    bottom: 10px;
    left: auto;
    right: 10px;
    text-align: right;
    margin-right: 10px;
    margin-bottom: 5px;
    width: fit-content;
    padding: 2px 15px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 30px;
}

@media screen and (max-width: 1320px) {
    .card-section {
        padding-bottom: 5%;
    }
    .card-slide .swiper-button-next {
        right: 20px;
    }
    .card-slide .swiper-button-prev {
        left: 20px;
    }
}

@media screen and (max-width: 767px) {
/*     .cardSlide {
        border-radius: 20px;
    } */
    .card-slide .swiper-button-next {
        right: 1%;
    }
    .card-slide .swiper-button-prev {
        left: 1%;
    }
    .card-slide .swiper-button-next:after,
    .card-slide .swiper-button-prev:after {
        font-size: 5vw;
    }
}

.btn-area .btn-primary {
    max-width: 240px;
    margin-bottom: 20px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    font-weight: 700;
}
@media screen and (max-width: 1199px) {
    .btn-area .btn-primary {
        min-height: auto;
    }
}

.btn-area .btn-secondary {
    max-width: 240px;
    margin-bottom: 20px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    font-weight: 700;
}
@media screen and (max-width: 1199px) {
    .btn-area .btn-secondary {
        min-height: auto;
    }
}

/* 공유의사경정이란? */
.shared-section .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: calc(100vh - 570px);
}
.shared-area {
    max-width: 700px;
    width: 100%;
}
.shared-area > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.shared-area > div:not(:last-child) {
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--bs-gray-300);
}
.shared-area .shared-icon {
    width: 50px;
    height: auto;
    margin-right: 2rem;
}
.shared-area .btn {
    margin-right: 0;
    margin-left: auto;
    min-width: 220px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shared-area .icon-text {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .shared-area > div {
        flex-direction: column;
    }
    .shared-area .btn {
        margin: 0;
        min-width: 200px;
        margin-top: 1rem;
        min-height: auto;
    }
    .shared-area > div:not(:last-child) {
        margin-bottom: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* 이어서 하기 */
.shared-header {
    justify-content: center;
}

.form-style-01 {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.form-style .form-group:not(:last-child) {
    margin-bottom: 2rem;
}
.form-style .form-group .form-control {
    background-color: var(--bs-gray-100);
    border: 0;
    padding: 0.875rem;
    color: var(--bs-gray-700);
}

.form-style .form-group label {
    font-weight: 700;
    color: var(--bs-dark);
}

@media screen and (min-width:1200px){
    /* .form-style .form-group label:first-child {font-size: 1.25rem;} */
    .label-text {font-size: 20px;}
}

.mh-60 {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-style .form-select {
    background-color: var(--bs-gray-100);
    border: 0;
    padding: 0.75rem;
}

.form-style-02 .form-select {
	min-height:70px;
	border-radius:0.5rem;
	color:#555555;
}


@media screen and (max-width: 767px) {
    .mh-60 {
        min-height: auto;
    }
}

/* 팝업 */

.popup-style {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}
.privacy-popup {
    display: none;
}

.privacy-popup.active {
    display: flex;
}

.popup-style .popup-area {
    position: relative;
    background-color: var(--bs-white);
    border-radius: 1rem;
    padding: 3.5rem;
}

.popup-style .popup-area .privacy {
    max-height: 500px;
    overflow-y: auto;
}
.privacy-popup .popup-area {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 767px) {
    .popup-style .popup-area {
        padding: 2rem;
    }
}

.popup-style .popup-close {
    position: absolute !important;
    right: 0;
    top: -40px;
}
.popup-style .popup-close .bi::before {
    color: var(--bs-white);
    font-size: 1.75rem;
}
.privacy-check {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.privacy-check > div {
    display: flex;
}

.form-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 100px;
}
.form-box > div {
    width: calc(50% - 50px);
}

.form-style-02 .form-control::placeholder {
    color: var(--bs-gray-600) !important;
}

.search-bar .form-control::placeholder {
    color:#212529 !important;
}

/* 자율성 알아보기 */
/* 라디오버튼 만들기 */
.form-style .radio-box {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.form-style .radio-area label {
    border-radius: 0.5rem;
    background-color: var(--bs-gray-100);
    min-width: 116px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    border-color: var(--bs-gray-100);
    padding: 0.875rem;
}
.form-style .radio-area label:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary) !important;
    font-weight: 600;
}
.form-style .btn-check:checked + label {
    border-color: var(--bs-primary);
    color: var(--bs-primary) !important;
    font-weight: 600;
}

.btn-area-02 {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}
.btn-area-02 .btn {
    max-width: 190px; font-weight: 700;
}



.btn-area-03 .btn{max-width: 100%; font-weight: 700; }
.btn-area-04 {flex-wrap: wrap; ;}
.btn-area-04 .btn {width: 100%}
.btn-area-05 .btn {max-width: 190px; font-weight: 700; width: 100%; font-size: 1.125rem;}


.btn-area-06 {display: flex; justify-content: center; gap: 5px;}
.btn-area-06 .btn {
    max-width: 190px; font-weight: 700; 
}

.pageprint-btn {width: 100% ; background-color: var(--bs-dark); color: var(--bs-white); display: flex; align-items: center; justify-content: center;}
.pageprint-btn:hover {background-color: var(--bs-dark); color: var(--bs-white);}

.list-btn {max-width: 190px; font-weight: 700;background-color: var(--bs-dark); color: var(--bs-white); width: 100%; font-size: 18px !important;}
.list-btn:hover {background-color: var(--bs-dark); color: var(--bs-white);}
.list-btn:active {background-color: var(--bs-dark) !important; color: var(--bs-white) !important;}

@media screen and (max-width: 767px) {
	.btn-area-06 {display:block; }
	.btn-text {justify-content:center;}
    .form-box {
        flex-direction: column;
        gap: 0;
    }
    .form-box > div {
        width: 100%;
    }
    .btn-area-04 {justify-content: center;}
    .btn-area-04 .btn{width: fit-content;}
    .btn-area-05 .btn  {width: fit-content;}
}

/* 설문정보 */
.form-style-03 .form-group:not(:last-child) {
    margin-bottom: 60px;
}

.radio-box-type-3,
.radio-box-type-5 {
    align-items: stretch;
}
.radio-box-type-3 > div {
    width: calc(33.333% - 5px);
    height: auto;
}
.radio-box-type-3 label {height:100%;}
.radio-box-type-5 > div {
    width: calc(20% - 5px);
    height: auto;
}
.radio-box-type-5 label {height:100%;}
@media screen and (max-width: 1199px) {
    .radio-box-type-3,
    .radio-box-type-5 {
        flex-wrap: wrap;
    }
    .radio-box-type-3 > div,
    .radio-box-type-5 > div {
        width: fit-content;
    }
}

/* 체크 시 인풋  */
.radio-area-02 .etc-input {display: none;}
.radio-area-02.active {display: flex;}
.radio-area-02.active .etc-label {min-width: 80px; margin-right: 5px;}
.radio-area-02.active .etc-input {display: block;}


/* 자율성 알아보기 페이지 추가 구강건강, 의사결정선호도, 치아 발거 후회도 */

.badge-title {display: flex; align-items: flex-start; gap: 10px; font-size: 1.25rem;}
.badge-title .badge {height: fit-content; font-size: 1.125rem; align-content: center;}

.radio-box-type-6 > div {width: calc(16.666666% - 5px);}

@media screen and (max-width: 1199px){
    .radio-box-type-6 > div {width: fit-content;}
}


/* 나의 자율성 결과 */

.result_graph {padding: 60px 130px; padding-bottom: 80px; border-radius: 10px; border: 1px solid var(--bs-gray-300); background-color: var(--bs-white); text-align: center;}

.graph {font-size: 18px; color: var(--bs-dark); margin-top: 70px;}
/* .graph-area {display: flex;} */
.graphBar {display: flex;  justify-content: center; align-items: center;}
.graphBar .graph-area {max-width: 1000px;  height: 15px;  width: 100%; border-radius: 30px; background: linear-gradient(90deg, rgba(202,202,202,1) 0%, rgba(131,172,42,1) 100%); position: relative;}
.graph-icon {position: absolute; bottom: -4px;}
.graph-icon .percent {font-size: 24px; font-weight: 700; color: #83ac2a;}

.graphBar .start {margin-right: 10px;}
.graphBar .last {margin-left: 10px;}

.explanation {display: flex; justify-content: space-between; width: 100%; margin-top: 10px; font-weight: 700; color: var(--bs-gray-700);}

@media screen and (max-width:767px){
    .graph {margin-top: 40px;}
    .result_graph {padding: 60px;}
    .explanation {font-size: 14px; gap: 20px;}
    .explanation div {display: flex; text-align: left; flex-direction: column;}
    .explanation div:last-child {display: flex; flex-direction: column-reverse; text-align: right; align-items: flex-end;}
}
@media screen and (max-width:575px) {
    .result_graph {padding: 30px;}
}



/* 현명한 선택 */
/* 나의 치주 상태는? */
.check-type-04 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.check-type-04 strong { padding: 0.5rem 2rem; background-color: var(--bs-gray-100);}
.check-type-04>div {width:25%;}
.check-area label {
    cursor: pointer;
}
.check-area .img-area {

    /* border-bottom: 10px solid transparent; */
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    border: 1px solid var(--bs-gray-300);
}
/* .check-area .img-area img {border: 1px solid var(--bs-gray-300); border-radius: 0.5rem;} */
.check-area .text-area {
    padding: 1rem;
    width: 100%;
    text-align: center;
    background-color: var(--bs-gray-100);
    margin-top: 0.5rem;
    border: 1px solid var(--bs-gray-100);
    border-radius: 0.5rem;
}
.check-icon {
    width: 50px;
    height: 50px;
    background-color: var(--bs-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0;
}
.check-icon .bi::before {
    font-size: 24px;
    margin-top: 5px;
    font-weight: 700 !important;
    color: var(--bs-white);
}
.check-area .btn-check:checked + label .img-area {
    border-color: var(--bs-primary);
    border:  1px solid transparent;
    box-sizing: border-box;
    position: relative;
}
.check-area .btn-check:checked + label .img-area::after {content: ""; width: 100%; height: 100%; border-radius: 0.5rem; border: 5px solid var(--bs-primary); position: absolute; left: 0; top: 0;}
.check-area .btn-check:checked + label .img-area img {border: 0;}
.check-area .btn-check:checked + label .text-area {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    color: var(--bs-white);
    font-weight: 600 !important;
}
.check-area .btn-check:checked + label .check-icon {
    opacity: 1;
}

@media screen and (max-width: 991px) {
    .check-type-04 {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .check-type-04>div {width: calc(50% - 12px);}
    .check-area label {
        width: 100% !important;
    }

    /* .check-area {
        width: calc(50% - 12px);
    } */
    .check-area .img-area img {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .check-type-04>div {width: 100%;}

    /* .check-area {
        width: 100%;
    } */
}
/* 나의 치주상태 알아보기 */
.learn-area {
    display: flex;
}
.selected-list {
    width: 25%;
    padding-right: 1rem;
}
.selected-card {
    width: 75%;
}

.learn-area .selected-list .itme {
    padding: 4px 20px;
    background-color: var(--bs-gray-400);
    color: var(--bs-white);
    border-radius: 30px;
    font-weight: 500;
    /* font-size: 15px; */
}
.learn-area .selected-list .itme:not(:last-child) {
    margin-bottom: 0.5rem;
}
.learn-area .selected-list .itme.select {
    background-color: var(--bs-primary);
}
.learn-area .selected-list > div {
    width: fit-content;
    align-content: center;
}

.learn-area .selected-card .thumbnail-img {
    width: 100%;
}
.selected-card .selected-item > div {
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
}
.selected-card .selected-item.disable {
	filter: grayscale(1) brightness(0.5);
}
.selected-card .selected-item > div .hover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.selected-card .selected-item > div:hover .hover {
    display: block;
}
.selected-card .selected-item > div .hover::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
}
.selected-card .popup-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    width: 50px;
    height: 50px;
    background-color: var(--bs-primary);
    border-radius: 50%;
    border: 0;
}

.selected-card .popup-btn .bi::before {
    color: var(--bs-white);
    font-weight: 600 !important;
    font-size: 18px;
    margin-top: 2px;
}

@media screen and (max-width: 767px) {
    .learn-area {
        width: 100%;
        flex-direction: column;
    }
    .selected-list {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        /* overflow-x: auto; */
        width: 100%;
        padding-right: 0;
    }
    .selected-card {
        width: 100%;
    }

    .learn-area > div {
        width: 100%;
    }
    .learn-area .selected-list > div {
        white-space: nowrap;
        margin: 0;
    }
    .learn-area .selected-list .itme:not(:last-child) {
        margin-bottom: 0;
    }
    /* .selected-card .selected-item > div .hover {display: flex;} */
    
}


/* 20241107 나의 치주 상태는 라디오버튼으로 변경 */
/* .radio-box-type-4 {} */
.check-type-04 strong.tt {
    display: block;
    padding: 0.875rem 1rem;
    width: 100%;
    text-align: center;
    background-color: var(--bs-gray-100);
    margin-top: 0.5rem;
    border: 1px solid var(--bs-gray-100);
    border-radius: 0.5rem; margin-bottom: 0.5rem;
font-weight: 500;}

@media screen and (min-width:1200px){
    .check-type-04 strong.tt {font-size: 1.25rem;}
}

.form-style .radio-box-type-4 {display: flex; justify-content: center; gap: 5px 20px;}
.form-style .radio-box-type-4 .radio-area {display: flex; justify-content: center; align-items: center;}
.form-style .radio-box-type-4 .radio-area label {width: 100%; min-width: auto; font-size: 1.5rem;}

.form-style .radio-box-type-4 .radio-area .btn-check-situation {clip:auto; position: relative; color: var(--bs-primary) !important;}
.btn-check-situation[type='radio'] {-webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 

    border: 2px solid var(--bs-gray-500); 
    border-radius: 50%;
    outline: none; 
    cursor: pointer;
    min-width: 20px; min-height: 20px; max-height: 20px;}
    input[type='radio']:checked {
    background-color: var(--bs-primary);
    border: 3px solid var(--bs-white); 
    box-shadow: 0 0 0 1.6px var(--bs-primary);
}




.form-style .radio-box-type-4 .radio-area .btn-check-situation + label {background-color: transparent; border: 0; padding: 0; margin-left: 5px; font-size: 1.25rem; min-height: auto;} 
.form-style .radio-box-type-4 .radio-area .btn-check-situation:checked {color: var(--bs-primary);}
.form-style .radio-box-type-4 .radio-area .btn-check-situation:checked + label{background-color: transparent; border: 0;color: var(--bs-primary) !important; font-weight: 600;}
.form-style .radio-box-type-4 .radio-area .btn-check-situation + label:hover{background-color: transparent; border: 0; color: var(--bs-primary);}

.tt.active {background-color: var(--bs-primary) !important; color: var(--bs-white);}
.form-group-situation  {display: none;}
.check-area .btn-check:checked + .form-group-situation {display: block;}
.form-group-situation.block {display: block;}


@media screen and (max-width:767px){
    .form-style .radio-box-type-4 .radio-area .btn-check-situation + label {font-size: 1rem;}
}


/* 팝업 */
.card-popup {
    display: none;
}
.card-popup .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-popup .popup-area {
    max-width: 640px;
    min-width: 640px;
    height: auto;
    padding: 0;
}

.card-popup .card-popup-content img {
    width: 100%;
    height: 100%;
}

.card-popup-content .swiper-button-next {
    opacity: 1;
    right: -80px;
}

.card-popup-content .swiper-button-prev {
    opacity: 1;
    left: -80px;
}
.card-popup.active {
    display: flex;
}

@media screen and (max-width: 991px) {
    .card-popup-content .swiper-button-next {
        display: none;
    }

    .card-popup-content .swiper-button-prev {
        display: none;
    }
}
@media screen and (max-width: 767px) {
    .card-popup .popup-area {
        min-width: auto;
    }
    .card-popup .popup-area {
        width: 100%;
    }
    .card-popup .popup-area .swiper-slide {
        width: 100%;
    }
}

/* 나의 선호가치 알아보기 */
.num-box {border: 1px solid var(--bs-gray-300); padding-top: 60px; border-radius: 15px; text-align: center; padding-bottom: 15px; padding-right: 25px; padding-left: 25px;}

.num-box .num {position: relative; width: fit-content; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem; font-size: 20px;}
.num-box .num::after {content: ""; width: 100%; height: 2px; background-color: var(--bs-primary); position: absolute; bottom: -2px; left: 0;}
.radio-box-type-2 {justify-content: center;}
.radio-box-type-2 > div {width: 100%; max-width: 500px;}

.preferred-page {text-align: right; padding-top: 45px; font-size: 15px; color: var(--bs-gray-700);}



.learn-area .selected-list-02 .itme {
    max-width: 200px;
    width: 100%;
    text-align: center;
}


@media screen  and (max-width:767px){
    .learn-area .selected-list-02 .itme {width: fit-content;}
}

.num-check-wrap {
	max-width:400px;margin-left: auto;margin-right: auto;display: flex;justify-content: space-between;align-items: flex-start;
}
.num-check-wrap-item {width:400px;}
.num-check-frame {position:relative;}
.num-check-frame li {
	border: 1px solid #cccccc;border-radius: 0.5rem;height: 60px;font-weight: 400;
	color: var(--bs-dark);align-content: center;position: relative;
	cursor: pointer;margin-bottom: 0.5rem;font-size: 1.25rem;box-sizing: border-box;
}
.num-check-frame li.valuePassed {
	border-color: var(--bs-primary);font-weight: 600;background-color: var(--bs-white);
}
.num-check-frame li.drag-dis,
.num-check-frame li.valuePassed.drag-dis {border-color: #dddddd !important;}
.num-check-frame li.drag-dis span, 
.num-check-frame li.valuePassed.drag-dis span {color:#dddddd !important;}

.num-check-frame li .num-item {
	width: 25px;height: 25px;border-radius: 50%;background-color: var(--bs-gray-500);text-align: center;display:none;
	align-content: center;color: var(--bs-white);padding-top: 1px;position: absolute;left: 1rem;font-size: 1rem;
}
.num-check-frame li.valuePassed .num-item {background-color: var(--bs-primary);display:none;}

.portlet {background-color:#ffffff;}
.portlet-header {
	width:100%;height:60px;border:0 !important; background:transparent !important;
	display: flex;align-items: center;justify-content: center;box-sizing: border-box;
}
.num-check-frame li.active .num-item {display:block;}
.num-check-frame li.active.valuePassed .num-item {display:block;}
.num-check-frame li .num-pos {
	width: 25px;height: 25px;border-radius: 50%;background-color: var(--bs-gray-500);text-align: center;
	align-content: center;color: var(--bs-white);padding-top: 1px;position: absolute;left: 1rem;font-size: 1rem;
}
.num-check-frame li.valuePassed .num-pos {background-color: var(--bs-primary);}
.num-check-frame li.valuePassed .num-del {
	width:30px;height:30px;position: absolute;right:1rem;
	background: url('/images/sub/x-mark-circle-filled.png') no-repeat center center;background-size: contain;	
}
.num-up {
	width:30px;height:30px;position: absolute;right:1rem;
	background: url('/images/sub/arrow-up.svg') no-repeat center center;background-size: contain;	
}
.num-check-frame li.drag-dis .num-up,
.num-check-frame li.valuePassed.drag-dis .num-up {display:none;}


.num-check-area {
    flex-wrap: wrap;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.num-check {position:relative;}
.num-check li {	
    border: 1px solid var(--bs-gray-100);
    border-radius: 0.5rem;
    background-color: var(--bs-gray-100);
    min-width: 116px;
    min-height: 60px;    
    font-weight: 400;
    border-color: var(--bs-gray-100);
    color: var(--bs-dark);
    padding: 0.5rem 1rem;
    align-content: center;
    text-align: center;
    position: relative;
    cursor: pointer;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

@media screen and (max-width:1199px) {
    .num-check li {font-size: 1.125rem;}
}

.num-check li.active {
    /* border-color: var(--bs-primary); */
    /* font-weight: 600;
    background-color: var(--bs-white); */
}
.num-check li:hover {
    /* border-color: var(--bs-primary); */
   /*  font-weight: 600;
    background-color: var(--bs-white); */
}



.num-check li.valuePassed {
    border-color: var(--bs-primary);
    font-weight: 600;
    background-color: var(--bs-white);
}

.num-check li .num {
    width: 25px;
    height: 25px;
    display: block;
    border-radius: 50%;
    background-color: var(--bs-primary);
    text-align: center;
    align-content: center;
    color: var(--bs-white);
    padding-top: 1px;
    position: absolute;
    left: 1rem;
    display: none;
    font-size: 1rem;
}

.num-check li.active .num {
    display: block;
}

.num-check li .num01::after {content:"1"; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); color: var(--bs-white);}
.num-check li .num02::after {content:"2"; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); color: var(--bs-white);}
.num-check li .num03::after {content:"3"; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); color: var(--bs-white);}
.num-check li .num04::after {content:"4"; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); color: var(--bs-white);}
.num-check li .num05::after {content:"5"; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); color: var(--bs-white);}




.again-btn {
    border: 1px solid var(--bs-gray-500);
    background-color: var(--bs-white);
    color: var(--bs-gray);
    align-content: center;
    padding: 4px 25px;
    border-radius: 30px;
    font-size: 1rem;
}

.again-btn img {
    width: 1rem;
    height: auto;
    margin-right: 5px;
}

.again-btn:hover {background-color: var(--bs-primary); color: var(--bs-white); border-color: var(--bs-primary);}
.again-btn:hover img {filter: brightness(0) invert(1);}

.min-150 {min-width: 150px;}


/* 나의 선호가치 1페이지 슬라이드로 변경하기 */

.numBoxSlide {border: 1px solid var(--bs-gray-300); padding-top: 60px; border-radius: 15px; text-align: center; padding: 50px 25px; padding-bottom: 80px;}

.numBoxSlide .radio-area label {font-size: 1.25rem;}


@media screen and (min-width:1200px){
    .numBoxSlide .radio-area label {font-size: 1.5rem;}
}

.numBoxSlide-pagination {position: static;margin-bottom: 30px;}
.numBoxSlide-pagination .swiper-pagination-bullet {width: 35px; height: 35px; background-color: #f0fae8; color: #83ac2a; font-weight: 700; opacity: 1; align-content: center; font-size: 1rem; margin-bottom: 5px !important;}
.numBoxSlide-pagination .swiper-pagination-bullet-active {background-color: #83ac2a; color: var(--bs-white);}

.numBoxSlide  label{font-weight: 700; color: var(--bs-dark);}
/* .numBoxSlide .swiper-slide {background-color: var(--bs-white);} */
.numBoxSlide-next ,.numBoxSlide-prev {width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--bs-gray-300); top: 64%; background-color: var(--bs-white);}
.numBoxSlide-next {right: 50px;}
.numBoxSlide-prev {left: 50px;}
.numBoxSlide-next::after ,.numBoxSlide-prev::after {font-size: 1rem; color: var(--bs-dark); font-weight: 700;}

.swiper-button-disabled {display: none !important; opacity: 0 !important;}

@media screen and (max-width:1199px){
    .numBoxSlide-next ,.numBoxSlide-prev {top: 62%;}
    .numBoxSlide   .radio-area label {font-size: 1.25rem;}
}
@media screen and (max-width:767px) {
    .numBoxSlide {padding-bottom: 110px;}
    .umBoxSlide-nav {display: flex; flex-direction: row-reverse; gap: 5px; justify-content: center; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);}
    .numBoxSlide-next ,.numBoxSlide-prev {top: auto; bottom: 50px; position: static;}
    .numBoxSlide .swiper-slide {min-height: 238px;}


}


/* 카드 슬라이드 부분 */
/* .card-popup-content .swiper-slide {display: none;}
.card-popup-content .swiper-slide-01.active {display: block;}
.card-popup-content .swiper-slide-02.active {display: block;} */

/* .preferred-card-popup .card-slide {display: none;}
.preferred-card-popup .card-slide-01.active {display: block;}
.preferred-card-popup .card-slide-02.active {display: block;}
.preferred-card-popup .card-slide-03.active {display: block;}
.preferred-card-popup .card-slide-04.active {display: block;}
.preferred-card-popup .card-slide-05.active {display: block;} */


/* .learn-card-popup .card-slide {display: none;}
.learn-card-popup .card-slide-01.active {display: block;}
.learn-card-popup .card-slide-02.active {display: block;}
.learn-card-popup .card-slide-03.active {display: block;}
.learn-card-popup .card-slide-04.active {display: block;} */






/* 함께하는 선택 결과 */
.selection-area {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
}
.selection-area > div {
    width: 33.333%;
    height: 100%;
    min-height: 412px;
}
.selection-area .selection-item {
    min-height: 542px;
    padding: 40px;
}
/* 그래프 */
.donut-container {
    width: 208px;
    height: 208px;
    overflow: hidden;
    padding-top: 24px;
    margin: 0 auto;
    padding-left: 2px;
}
.gauge {
    transform: scale(1.9);
}
/* 결과 아이콘 */
.selection-icon-area {
    height: 65px;
    position: relative;
}
.selection-icon-box:not(:last-child) {
    margin-bottom: 20px;
}
.selection-icon-area .bar {
    width: 100%;
    height: 10px;
    border-radius: 30px;
    background-color: var(--bs-gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    position: absolute;
    left: 0;
    top: 18px;
    z-index: -1;
}
.selection-icon-area .bar span {
    width: 5px;
    height: 5px;
    background-color: var(--bs-gray-500);
    border-radius: 50%;
    display: block; display: none;
}
.selection-icon-area .icon-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

.selection-icon-area .icon-area>div {position: relative;}
.selection-icon-area .icon-area>div .text {position: absolute; white-space: nowrap;}


.selection-icon-area .icon-area>div:nth-child(1) .text {left: 50%; transform: translateX(-50%);}
.selection-icon-area .icon-area>div:nth-child(2) .text {left: 50%; transform: translateX(-50%);}
.selection-icon-area .icon-area>div:nth-child(3) .text {right: 0;}

/* .selection-icon-box-02 .selection-icon-area .icon-area>div:nth-child(3) .text {left: 50%; transform: translateX(-50%); white-space: nowrap; min-width: 30px;} */

.selection-icon-box-04 .selection-icon-area .icon-area .text {min-width: 70px;}

.selection-icon-box-04 .selection-icon-area .icon-area>div:nth-child(1) .text {left: 50%; transform: translateX(-50%);}
.selection-icon-box-04 .selection-icon-area .icon-area>div:nth-child(2) .text {left: 50%; transform: translateX(-50%);}
.selection-icon-box-04 .selection-icon-area .icon-area>div:nth-child(3) .text {left: 50%; transform: translateX(-50%);}
.selection-icon-box-04 .selection-icon-area .icon-area>div:nth-child(4) .text {left: 50%; transform: translateX(-50%);}


.selection-icon-area .icon-area .selection-icon {
    opacity: 0;
    width: 40px;
    height: auto;
    text-align: left;
}
.selection-icon-area .icon-area .text {opacity: 0; text-align: center; font-weight: 500;}

.selection-icon-area .icon-area.icon-01 {text-align: left;}
.selection-icon-area .icon-area.icon-01 .selection-icon-01, 
.selection-icon-area .icon-area.icon-01 .selection-icon-01 + .text{
    opacity: 1;
}
.selection-icon-area .icon-area.icon-02 .selection-icon-02 {text-align: center;}
.selection-icon-area .icon-area.icon-02 .selection-icon-02 , .selection-icon-area .icon-area.icon-02 .selection-icon-02  + .text {
    opacity: 1;
}
.selection-icon-area .icon-area.icon-03 {text-align: center;}

 .selection-icon-area .icon-area.icon-03 .selection-icon-03,
 .selection-icon-area .icon-area.icon-03 .selection-icon-03 + .text {
    opacity: 1;
}

.selection-icon-area .icon-area.icon-04 {text-align: right;}

 .selection-icon-area .icon-area.icon-04 .selection-icon-04,
 .selection-icon-area .icon-area.icon-04 .selection-icon-04 + .text {
    opacity: 1;
}

/*
.selection-icon-area .icon-area.icon-04 .selection-icon-04 {
    opacity: 1;
}
.selection-icon-area .icon-area.icon-05 .selection-icon-05 {
    opacity: 1;
} */

.selection-check-area {
    flex-wrap: wrap;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.selection-check li a{
    border: 1px solid var(--bs-gray-100);
    border-radius: 0.5rem;
    background-color: var(--bs-gray-100);
    min-width: 116px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 400;
    border-color: var(--bs-gray-100);
    color: var(--bs-dark);
    padding: 0.5rem 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    border: 1px solid var(--bs-gray-100);
}


.selection-check li a .bi {margin-left: auto; margin-right: 0; color: var(--bs-primary); font-size: 1.25rem; display: none;}
.selection-check li a .bi::before {font-weight: 800 !important;}

.selection-check li a:hover {border: 1px solid var(--bs-primary); background-color: transparent;}
.selection-check li a:hover .bi {display: block;}

.selection-check li:not(:last-child) {
    margin-bottom: 0.5rem;
}

.selection-check li .num {
    width: 25px;
    height: 25px;
    display: block;
    border-radius: 50%;
    background-color: var(--bs-primary);
    text-align: center;
    align-content: center;
    color: var(--bs-white);
    margin-top: 1px;
    margin-right: 10px;
    font-size: 1rem;
    font-weight: 600;
    position: relative;
}

.selection-check li .num01::after {content:"1"; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); color: var(--bs-white);}
.selection-check li .num02::after {content:"2"; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); color: var(--bs-white);}
.selection-check li .num03::after {content:"3"; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); color: var(--bs-white);}
.selection-check li .num04::after {content:"4"; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); color: var(--bs-white);}
.selection-check li .num05::after {content:"5"; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); color: var(--bs-white);}

.btn-text {
    display: flex;
    align-items: center;
    font-weight: 700;
}
.btn-text span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-dark);
    color: var(--bs-white);
    font-weight: 800;
    font-size: 0.875rem;
    padding-top: 2px;
    margin-right: 5px;
}

@media screen and (max-width: 1199px) {
    .selection-area {
        flex-wrap: wrap;
        gap: 3rem;
    }
    .selection-area > div {
        width: calc(50% - 1.5rem);
    }
}
@media screen and (max-width: 767px) {
    .selection-area > div {
        width: 100%;
    }
    .selection-area .selection-item {
        min-height: auto;
    }
}

@media screen and (max-width: 320px) {
    .selection-area .selection-item {
        padding: 25px;
    }
}

/* 카드 슬라이드 부분 */
/* .card-popup-content .swiper-slide {display: none;}
.card-popup-content .swiper-slide-01.active {display: block;}
.card-popup-content .swiper-slide-02.active {display: block;} */

/* .preferred-card-popup .card-slide {display: none;} */
.card-popup.active {display: flex;}
.preferred-card-popup .card-slide {display: none;}
.preferred-card-popup .card-slide-01.active {display: block;}
.preferred-card-popup .card-slide-02.active {display: block;}
.preferred-card-popup .card-slide-03.active {display: block;}
.preferred-card-popup .card-slide-04.active {display: block;}
.preferred-card-popup .card-slide-05.active {display: block;} 


/* .learn-card-popup .card-slide {display: none;}
.learn-card-popup .card-slide-01.active {display: block;}
.learn-card-popup .card-slide-02.active {display: block;}
.learn-card-popup .card-slide-03.active {display: block;}
.learn-card-popup .card-slide-04.active {display: block;} */







/* 공유하기 팝업 */
.share-popup {
    display: none;
}
.share-popup.active {
    display: flex;
}

.share-popup .popup-area {
    max-width: 520px;
    margin: 0 auto;
}

.share-box img {
    width: 18px;
    height: auto;
    margin-right: 5px;
}
.share-box .form-control {
    background-color: var(--bs-gray-100);
    border: 0;
    padding: 0.75rem;
}
.share-box > div {
    display: flex;
    gap: 5px;
}
.share-box > div .btn {
    border-radius: 0.5rem;
    white-space: nowrap;
    min-width: 110px;
    padding-top: 0.875rem;
    font-weight: 700;
}
.btn-yellow {
    background-color: var(--bs-warning);
}
.btn-yellow:hover {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
}
.btn-yellow:active {
    background-color: var(--bs-warning) !important;
    color: var(--bs-dark) !important;
    border-color:  var(--bs-warning) !important;
}

@media screen and (max-width: 420px) {
    .share-box > div {
        flex-wrap: wrap;
    }
    .share-box > div .btn {
        width: 100%;
    }
}


/* 함께하는 선택결과 나의 선택자율성 그래프 다시하기*/

.result_graph_02 {padding: 40px; min-height: 542px;}

.result_graph_02 .explanation {font-size: 14px; gap: 20px;}
.result_graph_02 .explanation div {display: flex; text-align: left; flex-direction: column;}
.result_graph_02 .explanation div span {font-size: 16px;}
.result_graph_02 .explanation div:last-child {display: flex; flex-direction: column; text-align: right; align-items: flex-end;}
.result_text {font-size: 1rem; font-weight: 400; color: var(--bs-dark); padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--bs-gray-300);}
.result_text .text-primary {font-size: 20px; font-weight: 700;}
.result_graph_02 .graph {margin-top: 40px;}
@media screen and (max-width:767px){
    .result_graph_02 {min-height: auto;}
}



/* 게시판 */

.board-section .search-bar input {
    background-color: transparent;
}
.bag-white {
    background-color: var(--bs-white);
}

/* ******************** */
/* ******서브끝****** */
/* ******************** */

/* ********************* */
/* ******* footer ****** */
/* ********************* */
.footer {
    color: var(--bs-gray-500);
    /* background-color: var(--bs-secondary); */
    font-size: 0.875rem;
    font-weight: 300;
    border-top: 1px solid var(--bs-gray-100);
}

.footer .container-fluid {
    position: relative;
    padding-top: 45px;
    padding-bottom: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}



.policy-list {
    width: 100%;
    height: 80px;
    margin-bottom: 2rem;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.policy-link {
    color: var(--bs-dark);
}

.copyright {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}
.copyright a {
    color: var(--bs-gray-500);
}
.copyright .bi-lock::before {
    color: var(--bs-gray-500);
}
.copyright a:hover {
    color: var(--bs-primary);
}

.copyright a:hover .bi-lock::before {
    color: var(--bs-primary);
}

.foot-logo {display: flex; gap: 20px;}
.foot-logo img{height: 24px; width: auto;}

/* 메인일 때 풋터 */
.footer.main-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border: 0;
}



.footer.main-footer .policy-link {
    color: var(--bs-white);
    font-weight: 600;
}
.footer.main-footer .copyright {
    color: #afc0f3;
}
.footer.main-footer .copyright a {
    color: #afc0f3;
}
.footer.main-footer .copyright a .bi {
    color: #afc0f3;
}

.btn-top {
    position: absolute;
    top: -30px;
    right: 10px;
    width: 60px;
    height: 60px;
    padding: 0;
    font-size: 1.5rem;
    z-index: 9;
}
.btn-top .bi {
    color: var(--bs-white);
}

@media screen and (max-width: 991px){
    .footer .container-fluid {flex-direction: column;}
    .foot-logo {margin-top: 1rem; /* flex-wrap: wrap; */ width: 100%;}
	body.intro .footer.main-footer {position:static;}

@media screen and (max-width: 575px) {
    .foot-logo img {width: calc(33.333% - 13.333px);}
}
}



@media screen and (min-width: 412px) {
    .btn-top {
        right: 20px;
    }
}

/* ******************** */
/* ******* Board ****** */
/* ******************** */
/* bbs.top */
.board-title {
    margin-bottom: 48px;
    text-align: center;
    color: var(--dark);
    display: none;
}
.board-title h2 {
    line-height: 1.5;
}
.board-title p {
    color: var(--bs-body-color);
}

.board-category {
    height: auto;
    margin: 48px 0;
    flex-wrap: wrap;
    justify-content: center;
}
.board-category .nav-item {
    margin: 0.25rem;
}
.board-category .nav-item .nav-link {
    padding: 0.5rem 1rem;
    border: 1px solid var(--bs-gray-300);
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
    display: block;
    color: var(--bs-dark);
}
.board-category .nav-item .nav-link.active {
    border-color: var(--bs-primary);
    color: var(--bs-white);
    background-color: var(--bs-primary);
}
.board-category .nav-item .nav-link:hover {
    border-color: var(--bs-primary);
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

/* list */
/* board-top */
.board-top {
    margin-bottom: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.board-top > div {
    margin-bottom: 16px;
}
.board-top form {
    width: 100%;
}
.board-top .total-count .count {
    color: var(--bs-dark);
    font-weight: 700;
}

.search-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.search-wrap .form-select {
    margin: 8px 0;
}
.search-bar {
    width: 100%;
    border-bottom: 2px solid var(--bs-dark);
}
.search-bar .form-control {
    border-width: 0;
}
.search-bar .input-group-text {
    padding-right: 0;
    font-size: 1.25rem;
}
.search-wrap .form-select[name="category"] {
    border: none;
    padding: 0.375rem 0.75rem;
    border-bottom: 2px solid;
    border-radius: 0;
    height: 54px;
}
.search-wrap .form-select[name="limits"] {
	border: none;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    border-bottom: 2px solid;
    border-radius: 0;
    min-width:auto;
	height: 54px;
	margin-left: 8px;
	margin-right: 0;
}

.search-bar input {
    border-radius: 0 !important;
    padding: 0.375rem 0.75rem !important;
}
@media screen and (min-width: 576px) {
    .search-wrap .form-select {
        flex: 1 1 calc(50% - 4px);
    }
    .search-wrap .form-select[name="category"] {
        margin-right: 8px;
    }	
}
.search-wrap .form-select {
        margin-top: 0;
        margin-bottom: 0;
        margin-right: 8px;
}

@media screen and (min-width: 768px) {
    .board-top form {
        width: auto;
    }
    .search-wrap {
        flex-wrap: nowrap;
    }
    .search-wrap .form-select {
        margin-top: 0;
        margin-bottom: 0;
        margin-right: 8px;
        min-width: 150px;
    }
    .search-bar {
        min-width: 360px;
    }
}

/* all-chk */
.all-chk {
    margin-top: 16px;
    margin-bottom: 16px;
}
.all-chk .form-check-input {
    margin-top: 0.2em;
}

/* 공지 아이콘 */
.icon-bell {
    width: 30px;
    height: 30px;
    background-color: var(--bs-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.icon-bell .bi-bell-fill::before {
    vertical-align: -0.15em;
}
.board-list {
    word-break: break-all;
}
.board-list > .row {
    margin-top: 48px;
}
.board-list .subject {
    margin-top: 20px;
}
.board-list .subject a {
    color: var(--bs-dark);
}

.board-list .badge {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.board-list table {
    margin-top: 48px; /* min-width: 800px; */
    text-align: center;
}
.board-list table thead {
    border-top: 2px solid var(--bs-dark);
    border-bottom: 1px solid var(--bs-gray-100);
}
.board-list table thead th {
    color: var(--bs-dark);
    font-weight: 700;
    white-space: nowrap;
}
.board-list table tbody td {
    text-align: center;
}

.board-list table tbody tr.notice:hover {
    --bs-table-accent-bg: var(--bs-lightblue);
}

.md-hide {
    display: none;
}

@media screen and (min-width: 768px) {
    .md-hide {
        display: table-cell;
    }
}

/* pagenation */
.pagination {
    padding: 0.375rem 0.75rem;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page-item-c {
    color: var(--body-color);
}
.page-item-c.active a {
    color: var(--bs-primary);
}
.page-link-c {
    position: relative;
    display: block;
    padding: 0.375rem 0.75rem;
    font-weight: 700;
}
.page-link-c img {
    min-width: 8px;
}

.bi.bi-chevron-bar-right::before {
    content: "";
    width: 14px;
    height: 13px;
    background: url("/images/common/btn/btn_paging_next_end.png") no-repeat
        center center;
    display: inline-block;
}

.bi.bi-chevron-bar-left::before {
    content: "";
    width: 14px;
    height: 13px;
    background: url("/images/common/btn/btn_paging_prev_end.png") no-repeat
        center center;
    display: inline-block;
}

@media screen and (min-width: 1200px) {
    .pagination {
        font-size: 1.125rem;
        margin-top: 48px;
    }
}

/* view */
.board-view {
    word-break: break-all;
}
.board-view .table {
    table-layout: fixed;
}
.board-view .table th,
.board-view .table td {
    border-bottom: 1px solid var(--bs-gray-300);
}
.board-view .table tbody {
    border-top: 2px solid var(--bs-dark);
}
.board-view .table tbody tr.content td {
    padding: 1.5rem 1rem;
}
.board-view .table tbody tr:not(.content) th {
    background-color: var(--bs-gray-100);
    color: var(--bs-dark);
    font-weight: 500;
}
.board-view .table tbody tr.img td {
    min-height: 53px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    word-break: break-all;
}
.board-view .table tbody tr.img td a {
    width: 100%;
}

.board-view .table tbody tr.file td {
    min-height: 53px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    word-break: break-all;
}
.board-view .table tbody tr.file td a {
    width: 100%;
}

.board-view #DivContents img {
    max-width: 100%;
}

@media screen and (min-width: 768px) {
    .board-view .table tbody tr.file td {
        gap: 8px;
    }
    .board-view .table tbody tr.file td a {
        width: auto;
    }
}

.view-title {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.view-title .title {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
.view-title .title .badge {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    margin-right: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}
.view-title .title h4 {
    width: 100%;
    margin-bottom: 0;
    text-align: left;
    color: var(--bs-dark);
    font-weight: 500;
}
.view-title .title .date {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 8px;
}

.writer-wrap {
    margin-top: 8px;
    font-weight: 400;
}
.writer-wrap .writer {
    color: var(--bs-primary);
}
.writer-wrap span:not(.writer) {
    padding: 0 8px;
    display: inline-block;
}

@media screen and (min-width: 768px) {
    .board-view .table tbody tr.content td {
        padding: 2rem 1.5rem;
    }
    .view-title {
        margin-bottom: 16px;
    }
    .writer-wrap {
        margin-top: 0px;
    }
}

@media screen and (min-width: 1200px) {
    .view-title .title .date {
        margin-top: 0px;
    }
}

/* comment */
.comment-count {
    font-size: 1rem;
}
.comment-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    background-color: var(--bs-gray-300);
    border-radius: 4px;
    text-align: center;
    line-height: 22px;
}
.comment-date {
    color: var(--body-color);
}

.board-view .btn-gray-2 {
    width: 120px;
    height: 100px;
    margin-left: 8px !important;
    border-radius: 6px !important;
}

.list-group-flush {
    text-align: left;
}
.list-group-flush li {
    padding: 30px 20px !important;
    background-color: var(--bs-gray-100);
    border-top: 1px solid var(--bs-gray-200);
    color: var(--bs-body-color);
}
.list-group-flush > .list-group-item {
    border-width: 1px 0 0;
}
.list-group-flush li span b {
    color: var(--bs-dark);
    margin-right: 4px;
}

.comment-writer .writer {
    display: block;
    line-height: 1;
    font-weight: 500;
}

.comment-options,
.comment-cencel {
    position: absolute;
    top: 1.375rem;
    right: 1.375rem;
}
.comment-options .btn,
.comment-cencel .btn {
    width: 22px;
    height: 22px;
    padding: 0;
    text-align: center;
    line-height: 22px;
    background-color: var(--bs-gray-400);
    font-size: 0.875rem;
}

.comment-form textarea.form-control {
    width: 100%;
    height: 100px;
    -webkit-border-radius: 0.5rem !important;
    border-radius: 0.5rem !important;
}
.comment-form .btn {
    width: 100%;
    height: 50px;
    -webkit-border-radius: 0.5rem !important;
    border-radius: 0.5rem !important;
}

@media screen and (min-width: 576px) {
}

@media screen and (min-width: 576px) {
    .comment-writer .writer {
        display: inline-block;
        font-size: 1.125rem;
    }
}

@media screen and (min-width: 768px) {
    .comment-form textarea.form-control {
        width: calc(100% - 128px);
    }
    .comment-form .btn {
        width: 120px;
        height: 100px;
        margin-top: 0;
        margin-left: 8px !important;
    }
}

.comment-write-form {
    padding-top: 24px;
    border-top: 1px dashed var(--bs-gray-300);
}

/* form */
.board-form {
    border-top: 2px solid #000000;
    padding-left: 0;
    padding-right: 0;
}
.board-form .form-group.row {
    margin-left: 0;
    margin-right: 0;
}
.board-form .form-group .col-form-label {
    color: #000000;
    padding: 20px 0 8px 0;
    font-weight: 500;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem;
    font-size: 1.125rem;
}
.board-form + .board-btns {
    justify-content: center;
}

.board-form .form-group {
    border-bottom: 0;
}

.board-form .form-select {padding: .375rem .75rem; min-height: 46px;}
.board-form .form-control { min-height: 46px;}

.board-form .input-group .btn {background-color: var(--bs-primary); color: var(--bs-white); border-color: var(--bs-primary);}

@media screen and (min-width: 576px) {
    .board-form .form-group {
        border-bottom: 1px solid #dddddd;
    }
    /* .board-form .form-group .col-form-label {background-color: var(--bs-gray-100);} */
    .board-form .col-sm-10 {
        padding: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .board-form .form-group .col-form-label {
        padding-left: 0;
    }
}

/* board-btns */
.board-btns {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.board-btns .btn {
    min-width: 90px;
    height: 50px;
    margin: 8px;
    margin-left: 0;
}
.board-btns .btn-md {
    min-width: 120px;
}
.board-btns .left {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

@media screen and (min-width: 992px) {
    .board-btns {
        margin-top: 48px;
    }
}

@media screen and (min-width: 1200px) {
    .board-btns .btn {
        height: 60px;
        font-size: 18px;
    }
}

.empty-list {
    padding: 48px 0;
    text-align: center;
    border-top: 1px solid var(--bs-gray-300);
    border-bottom: 1px solid var(--bs-gray-300);
}

/* ************************* */
/* ** 홍보동영상 (G.video) ** */
/* ************************* */
.video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    margin-bottom: 20px;
    overflow: hidden;
}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ************************* */
/* ** 제품소개 (G.Product) ** */
/* ************************* */
/* list */
.g-product {
    margin-bottom: 48px;
}
.g-product:last-child {
    margin-bottom: 0;
}
.g-product a {
    display: block;
    padding-bottom: 100%;
    border: 1px solid var(--bs-gray-300);
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    text-align: center;
    position: relative;
}
.g-product a img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: cover;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.g-product + div {
    text-align: left;
}
.g-product .form-check-input {
    min-width: 16px;
}
.g-product p {
    margin-bottom: 0;
    color: var(--bs-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 400;
}

@media screen and (min-width: 1200px) {
    .g-product p {
        font-size: 1.125rem;
    }
}

/* view */
.g-product-img {
    border: 1px solid var(--bs-gray-300);
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
}
.g-product-img img {
    width: 100%;
}
.g-product-btns {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.g-product-btns .btn {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.g-product-btns .btn i {
    margin-right: 5px;
}

@media screen and (min-width: 1200px) {
    .g-product-btns .btn {
        height: 60px; /* line-height: 48px; */
    }
}

@media screen and (max-width: 360px) {
    .g-product-btns {
        flex-direction: column;
    }
    .g-product-btns .btn {
        width: 100%;
    }
}

/* ************************* */
/* ***** faq (F.basic) ***** */
/* ************************* */
.board-view.faq span:not(.badge) {
    color: var(--bs-body-color) !important;
}
.accordion-wrap {
    border-top: 2px solid var(--bs-gray-dark);
}
.accordion-wrap .card {
    padding: 0;
    border-color: var(--bs-gray-300);
}
.accordion-wrap .card .card-body {
    padding: 0;
    border-bottom: 1px solid var(--bs-gray-300);
}

/* .accordion-wrap .collapse.show {border-bottom: 1px solid var(--bs-gray-300);} */

/* admin 로그인 시 나타나는 타이틀 */
.accordion-wrap .card .card-title {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-gray-dark);
    padding: 22px 46px 20px 30px;
    display: inline-block;
    position: relative;
}
.accordion-wrap .card .card-title::before {
    content: "Q.";
    font-weight: 800;
    font-family: "Montserrat", Sans-serif;
    position: absolute;
    top: 20px;
    left: -8px;
}
.accordion-wrap .card .card-title.collapsed {
    color: var(--bs-gray-dark);
}

/* 로그인 안했을 때 */
.accordion-wrap .card a.btn {
    min-height: 60px;
    height: 100%;
    position: relative;
    padding: 20px 46px 20px 60px;
    line-height: 1.5;
}
.accordion-wrap .card a.btn:focus {
    box-shadow: none;
}
.accordion-wrap .card a.btn::before {
    content: "Q.";
    font-weight: 800;
    font-family: "Montserrat", Sans-serif;
    position: absolute;
    top: 20px;
    left: 26px;
}
.accordion-wrap .card a.btn::after {
    content: "";
    width: 20px;
    height: 20px;
    background: url("/images/icon/icon-arrow.png") no-repeat center center;
    position: absolute;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
}
.accordion-wrap .card a.btn[aria-expanded="true"]::after {
    background: url("/images/icon/icon-arrow-on.png") no-repeat center center;
}

.accordion-wrap .card a.btn[aria-expanded="true"] {
    background-color: #eef2fa;
    color: var(--bs-primary);
}
.accordion-wrap .card a[aria-expanded="true"].btn::before {
    color: var(--bs-gray-dark);
}

.accordion-wrap .card .qu {
    font-family: "Montserrat", Sans-serif;
    color: var(--bs-gray-dark);
    font-weight: 800;
    margin-right: 10px;
}

.accordion-wrap .collapsing .card-body {
    position: relative;
    padding: 20px 26px 20px 68px;
    background-color: var(--bs-gray-100);
}
.accordion-wrap .collapsing .card-body::before {
    content: "A.";
    font-weight: 800;
    font-family: "Montserrat", Sans-serif;
    position: absolute;
    top: 20px;
    left: 26px;
    color: var(--bs-primary);
}
.accordion-wrap .collapsing .card-body span {
    background-color: transparent !important;
}

.accordion-wrap .collapse .card-body {
    position: relative;
    padding: 20px 26px 20px 68px;
    background-color: var(--bs-gray-100);
}
.accordion-wrap .collapse .card-body span {
    background-color: transparent !important;
}
.accordion-wrap .card .collapse .card-body::before {
    content: "A.";
    font-weight: 800;
    position: absolute;
    top: 20px;
    left: 26px;
    color: var(--bs-primary);
}

@media screen and (max-width: 575px) {
    .accordion-wrap .card a.btn {
        padding: 20px 36px 20px 50px;
    }
    .accordion-wrap .card a.btn::before {
        left: 16px;
    }
    .accordion-wrap .card a.btn::after {
        right: 16px;
    }

    .accordion-wrap .collapsing .card-body {
        padding: 20px 20px 20px 50px;
    }
    .accordion-wrap .collapsing .card-body::before {
        left: 16px;
    }

    .accordion-wrap .collapse .card-body {
        padding: 20px 20px 20px 50px;
    }
    .accordion-wrap .card .collapse .card-body::before {
        left: 16px;
    }
    .accordion-wrap .card .card-title::before {
        left: 0;
    }
}

@media screen and (max-width: 991px) {
    .card {
        border: 0;
    }
}

/* ************************* */
/* ** 홍보동영상 (G.video) ** */
/* ************************* */
.board-list.video .subject a {
    font-size: 1.125rem;
}

/* ************************* */
/* *** partner (G,banner) ** */
/* ************************* */
.g-banner .subject {
    margin-top: 0.875rem;
    font-size: 1.125rem;
    color: var(--bs-dark);
}
.g-image {
    padding: 1.5rem;
    border: 1px solid var(--bs-gray-300);
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.g-image img {
    width: auto;
    height: auto;
}

@media screen and (min-width: 360px) {
    .g-image {
        padding: 1.5rem;
    }
}

/* ************************* */
/* *** 프로젝트 (G.layer) ** */
/* ************************* */
/* list */
.board-list .project-info {
    border-top: 0;
    padding: 1.111rem 0;
    margin-bottom: 0.778rem;
}
.project-search-bar {
    padding: 1.5rem 4%;
    background-color: #f9f9f9;
}
.pj-form > * {
    -webkit-border-radius: 0;
    border-radius: 0;
}
.pj-form .form-select {
    margin-bottom: 0.4rem;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bs-white) url("/images/common/icon/icon-select.jpg")
        calc(100% - 5px) center no-repeat;
}
.pj-form .btn {
    width: 100%;
    height: 44px;
    padding: 0;
    margin-top: 0.4rem;
}

.project-link {
    display: block;
    width: 100%;
    height: auto;
    padding-bottom: 70%;
    border: 1px solid var(--bs-gray-300);
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
}
.project-link:hover .cover {
    display: flex;
}

.project-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.noimg-wrap {
    display: block;
    width: 100%;
    height: auto;
    padding-bottom: 70%;
    border: 1px solid var(--bs-gray-300);
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
}

.project-title {
    font-weight: 400;
    font-size: 1rem;
    width: 100%;
    display: -webkit-box;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cover {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--bs-white);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    display: none;
}
.cover-btn {
    width: 54px;
    height: 54px;
    background-color: var(--bs-white);
    color: var(--bs-dark);
    -webkit-border-radius: 50rem;
    border-radius: 50rem;
    text-align: center;
    line-height: 54px;
}
.cover-btn i::before {
    font-weight: 900 !important;
}

@media screen and (min-width: 412px) {
    .pj-form {
        max-width: 620px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        justify-content: center;
        align-items: center;
    }
    .pj-form .form-select {
        flex: 1 1 40%;
        margin-bottom: 0;
    }
    .pj-form .btn {
        margin-top: 0rem;
    }
}

@media screen and (min-width: 576px) {
    .pj-form .form-select {
        max-width: 140px;
    }
    .pj-form .form-control {
        flex: 1 1 30%;
    }
    .pj-form .btn {
        max-width: 90px;
        margin-top: 0;
    }
}

.project-modal {
    --bs-project-modal-width: 1320px;
    background-color: rgba(0, 0, 0, 0.5);
}

.project-modal .project-modal-header {
    height: 80px;
    border-bottom: 0;
}
.project-modal .project-modal-title {
    padding-right: 1rem;
    font-size: 1.333rem;
    font-weight: 700;
    color: var(--bs-dark);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.project-modal .btn-close {
    width: 0.5em;
    height: 0.5em;
    margin-right: 0;
    opacity: 1;
}

.project-modal .project-modal-body {
    position: relative;
}

.project-modal .swiper {
    position: static;
}

.project-modal .swiper-slide img {
    width: 100%;
    max-height: 680px;
}

.project-modal .swiper-pagination {
    max-width: 296px;
    padding: 1rem 0;
    margin: 0 auto;
    position: relative;
    display: block;
}
.project-modal .swiper-pagination-bullet:only-child {
    display: inline-block !important;
}

.project-modal .swiper-button-next,
.project-modal .swiper-button-prev {
    width: 20px;
    height: 20px;
    display: flex;
}

.project-modal .swiper-button-next {
    top: auto;
    left: auto;
    right: 1rem;
    bottom: 20px;
}
.project-modal .swiper-button-next::after {
    opacity: 0.4;
}
.project-modal .swiper-button-next:hover::after {
    opacity: 1;
}

.project-modal .swiper-button-prev {
    left: 1rem;
    right: auto;
    top: auto;
    bottom: 20px;
}
.project-modal .swiper-button-prev::after {
    opacity: 0.4;
}
.project-modal .swiper-button-prev:hover::after {
    opacity: 1;
}

.project-modal .swiper-button-next:after,
.project-modal .swiper-button-prev:after {
    font-size: 1.25rem;
    font-weight: 900;
    opacity: 1;
    color: var(--bs-dark);
}

.project-modal .swiper-pagination {
    bottom: 0 !important;
}

@media screen and (min-width: 412px) {
    .project-modal .swiper-button-next {
        right: calc(50% - 180px);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .project-modal .swiper-button-prev {
        left: calc(50% - 151px);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

@media screen and (min-width: 576px) {
    .project-modal .project-modal-header {
        padding: 0.5rem 2.778rem;
    }
    .project-modal .project-modal-body {
        padding: 0.5rem 2.778rem;
    }
}

@media screen and (min-width: 768px) {
    .project-modal .swiper-pagination {
        padding: 1.5rem 0;
    }
    .project-modal .swiper-button-next {
        bottom: 45px;
    }
    .project-modal .swiper-button-prev {
        bottom: 45px;
    }
}

@media screen and (min-width: 992px) {
    .project-modal .swiper-pagination-bullet {
        display: inline-block;
    }
}

@media screen and (min-width: 1200px) {
    .project-title {
        font-size: 1.125rem;
    }
}

/* ************************** */
/* **** 연혁 (W.History) **** */
/* ************************** */
.history-year {
    padding-top: 1rem;
    color: var(--bs-primary);
    border-top: 2px solid var(--bs-primary);
}

.history-content {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 1px solid var(--bs-gray-400);
    font-weight: 400;
    color: var(--bs-dark);
}

.history-img {
    max-width: 100%;
}

@media screen and (min-width: 768px) {
    .history-img {
        max-width: 400px;
        margin-top: 2rem;
        display: block;
    }
}

/* *************************** */
/* **** 보도자료 (W.Basic) **** */
/* *************************** */
.board-table.webzine .img-thumbnail-wrap {
    max-width: 100%;
    margin-bottom: 1.125rem;
}
.board-table.webzine .subject {
    font-weight: 500;
    color: var(--bs-gray-dark);
}
.webzine-writer {
    font-size: 0.875rem;
}

@media screen and (min-width: 768px) {
    .board-table.webzine .img-thumbnail-wrap {
        max-width: 120px;
        margin-bottom: 0;
    }
    .webzine-writer {
        font-size: 1rem;
    }
}

/* 
.board-table.webzine .img-thumbnail-wrap {max-width: 120px;}
.board-table.webzine .img-thumbnail {border: none; border-radius: 6px; background-color: transparent;}

.webzine .comment {vertical-align: middle;}
@media screen and (max-width: 767px) {
    .board-table.webzine .img-thumbnail-wrap {max-width: 100%; margin-bottom: 20px;}
    .board-table.webzine .img-thumbnail-wrap img {width: 100%;}

    .board-table.webzine .download-file {vertical-align: bottom;}
} */

/* 개인정보처리방침 */
.privacy-bag {
    background-color: var(--bs-gray-100);
    padding: 1rem;
    max-height: 200px;
    overflow-y: auto;
}

/* ************************* */
/* 게시판 CSS 20221025 윤주명 (언젠간 지울 것)*/
/* ************************* */
.board-form-groups {
    border-top: 1px solid #000000;
}
.board-form-groups .col-form-label {
    background-color: #f8f9fa;
    color: var(--bs-dark);
    font-weight: 500;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem;
}
.board-form-groups .form-group {
    border-bottom: 1px solid #ced4da;
    margin-left: -20px;
    margin-right: -20px;
}

@media screen and (max-width: 575px) {
    .board-form-groups {
        border-top: 1px solid #000000;
    }
    .board-form-groups .col-form-label {
        background-color: transparent;
        padding: 20px 0 8px 0;
    }
    .board-form-groups .form-group {
        border-bottom: 0;
    }

    .input-group > .form-select {
        width: 100%;
    }
}

/* 임시 */
/* gallery */

/* background */
.bg-cover {
    width: 100%;
    height: 500px;
    background: no-repeat 50% / cover;
}
.bg-shape {
    position: relative;
}
.bg-shape:after {
    background: url("/images/common/curve-shape.svg");
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: -15px;
    content: "";
    height: 62px;
    position: absolute;
    width: 100%;
    left: 0;
}
.bg_dimmed {
    background-image: linear-gradient(
        180deg,
        rgba(30, 24, 53, 0.4) 0%,
        rgba(30, 24, 53, 0.4) 90.16%
    );
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* ************************* */
/* ******자료실 게시판******* */
/* ************************* */
.data-list {
    border-top: 2px solid var(--bs-dark);
    margin-top: 4rem;
}
.data-list a {
    color: var(--bs-dark);
}
.data-list .card {
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0;
}
.data-list .card:hover {
    background-color: rgba(0, 0, 0, 0.075);
}
.download-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
}
.download-title {
    display: flex;
}

/* ************************* */
/* ******* 지사 게시판******  */
/* ************************* */
.board-list a:hover {
    color: inherit;
}
.store_map {
    min-width: 62px;
}
#search .findWord {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
.search-button-area input {
    height: 100%;
    border-radius: 0;
}
.search-button-area input:first-child {
    margin-right: -5px;
}
.search-button-area input:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

@media screen and (max-width: 768px) {
    #search {
        flex-direction: column;
    }
    #search .findWord {
        width: 100%;
    }
    .search-button-area {
        text-align: center;
        margin-top: 1rem;
    }
    .search-button-area input {
        border-radius: 0.5rem;
        margin: 0 0.5rem;
    }
}

/* ************************* */
/* ******갤러리 게시판******* */
/* ************************* */
.gallery-wrap {
    margin-bottom: -3rem;
}
.gallery-wrap .subject {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--bs-dark);
}
.gallery-area .gallery {
    max-height: 410px;
    overflow: hidden;
}
.gallery-area .gallery:hover img {
    transform: scale(1.1);
    -webkit-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}
.gallery-area > span {
    display: block;
    width: 100%;
    height: 300px;
    overflow: hidden;
}
.gallery-area .gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .gallery-area .gallery {
        max-height: fit-content;
    }
    .gallery-area > span {
        height: auto;
        max-height: auto;
    }
}

/* ************************* */
/* ********** 연혁 ********** */
/* ************************* */
.history-fixed {
    max-width: 430px;
}
.history-fixed.fixed {
    position: fixed;
    z-index: 99;
    bottom: auto;
    top: 140px;
}
.history-header {
    margin-bottom: 3rem;
}
.history-category {
    font-size: 1.25rem;
    font-weight: 700;
    max-width: 150px;
}
.history-category .history-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    display: block;
}
.history-category .history-link.active {
    color: var(--bs-primary);
    border-bottom: 2px solid var(--bs-primary);
}
.history-category .history-link:hover {
    color: inherit;
}
.history > ul > li {
    position: relative;
    padding-left: 3.75rem;
    padding-bottom: 3rem;
}
.history > ul > li::before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    left: 5px;
    background-color: var(--bs-gray-300);
}
.history > ul > li:first-child:before {
    top: 10px;
}
.history > ul > li:last-child:before {
    height: 10px;
}

.history > ul > li::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    position: absolute;
    top: 0.5rem;
    left: 0;
}
.history .year {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-dark);
    margin-bottom: 1rem;
}
.history .content li {
    display: flex;
    margin-bottom: 0.5rem;
}
.history .content li strong {
    min-width: 30px;
}

@media (max-width: 767px) {
    .history-fixed {
        max-width: 100%;
        width: 100%;
    }
    .history-fixed.fixed {
        bottom: 80px;
        top: auto;
    }
    .history-header {
        max-width: 100%;
    }
    .history-category {
        max-width: 100%;
        display: flex;
        background-color: var(--bs-primary);
        border-radius: 0.5rem;
        padding: 0.5rem 2rem;
        justify-content: space-between;
        font-size: 0.875rem;
        bottom: 130px;
        z-index: 999;
        top: auto; /* left: 50%; transform: translateX(-50%);  */
        flex-direction: row;
        white-space: nowrap;
        overflow-x: auto;
        margin-bottom: 3rem;
    }
    .history-fixed.fixed .history-category {
        width: calc(100% - 8%);
    }

    .history-category .history-link {
        padding: 1rem;
        margin-bottom: 0;
        color: var(--bs-white);
        opacity: 0.7;
    }
    .history > ul > li {
        padding-left: 1.5rem;
        padding-bottom: 2rem;
    }
    .history-category .history-link.active {
        opacity: 1;
        color: var(--bs-white);
        border: none;
    }
    .history-category .history-link:hover {
        color: var(--bs-white);
    }
}

/* ************************* */
/* ********* 로그인 ******** */
/* ************************* */

.form-select-02 {min-height: 55px;}
@media (max-width: 575px) {
    .mem-group {
        flex-direction: column;
    }
    .mem-group input[type="text"] {
        width: 100%;
        margin-top: 0.5rem;
        border-radius: 0.5rem !important;
    }
    .mem-group input[type="button"] {
        border-radius: 0.5rem !important;
    }
    .my-form .form-group {
        border-bottom: 1px solid var(--bs-gray-300);
        padding-bottom: 2rem;
        padding-top: 1rem;
    }
}

/* ************************* */
/* ******** 회원가입 ******** */
/* ************************* */
.bag-gray-h-300 {
    background-color: var(--bs-gray-100);
    padding: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

@media (min-width: 768px) {
.join-area {width: 50%;}
}
@media (max-width: 767px) {

}


/* 비밀번호 찾기 */

.pw-area {max-width: 520px; margin-left: auto; margin-right: auto; background-color: var(--bs-white);}
.pw-area .form-control {min-height: 58px;}


/* 메인 게시판 연동 */

.main-board {
    display: flex;
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: -30px;
}
.main-board-item {
    width: calc(33.333% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
    background-color: var(--bs-white);
    padding: 30px;
    border-radius: 20px;
}

/* 프로덕트 스킨 */

.cate-area {
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .cate-area {
        font-size: 1.125rem;
    }
}

/* 부트스트랩 아이콘 */

.bi::before {
    font-family: "bootstrap-icons";
}

/* 댓글 수정 */
#com_li_write .input-group-text {
    background-color: var(--bs-gray-100);
}
.border-color-primary {border-color: var(--bs-primary) !important;}

/* 메인에 텍스트형 공지사항 연동 */

.main-notice {
    flex-wrap: wrap;
}
/* .main-notice .main-board-item {width: calc(33.3333% - 20px);} */

@media screen and (max-width: 991px) {
    .main-notice .main-board-item {
        width: calc(50% - 30px);
    }
}

@media screen and (max-width: 767px) {
    .main-notice .main-board-item {
        width: calc(100% - 30px);
    }
}

/* 메인에 공지사항 갤러리카드형 연동 */
.main-gallery-notice {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
    flex-wrap: wrap;
    align-items: stretch;
}
.main-gallery-notice .main-board-item {
    border: 1px solid var(--bs-gray-300);
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
    padding: 0;
}
.main-gallery-notice .main-board-item a {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.main-gallery-notice .main-board-item:hover {
    box-shadow: 3px 3px 10px var(--bs-gray-300);
}
.main-gallery-notice .main-board-item a:hover {
    color: inherit;
}

.main-gallery-notice .img-area {
    max-height: 150px;
    overflow: hidden;
}
.main-gallery-notice .img-area img {
    object-fit: cover;
    height: 100%;
}

.main-gallery-notice .title-area {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}
.main-gallery-notice .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: auto;
}
.main-gallery-notice .new img {
    vertical-align: middle;
    margin-left: 5px;
}
.main-gallery-notice .content {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

@media screen and (max-width: 1199px) {
    .main-gallery-notice .main-board-item {
        width: calc(33.3333% - 30px);
    }
}

@media screen and (max-width: 767px) {
    .main-gallery-notice .main-board-item {
        width: calc(50% - 30px);
    }
    .main-gallery-notice .img-area {
        max-height: max-content;
    }
}
@media screen and (max-width: 575px) {
    .main-gallery-notice .main-board-item {
        width: calc(100% - 30px);
    }
}

/* 메인에 갤러리 연동 */
.main-gallery {
    flex-wrap: wrap;
}
.main-gallery .main-board-item {
    padding: 0;
    width: calc(25% - 30px);
}

.main-gallery .title-area {
    margin-top: 1rem;
    display: flex;
    align-items: center;
}

.main-gallery .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: auto;
}
.main-gallery .new img {
    vertical-align: middle;
    margin-left: 5px;
}

.main-gallery .img-area {
    overflow: hidden;
    border-radius: 15px;
    max-height: 200px;
}
.main-gallery .img-area img {
    height: 100%;
    object-fit: cover;
    min-height: 200px;
}
.main-gallery .img-area:hover img {
    transform: scale(1.1);
    transition: all 0.5s;
}

@media screen and (max-width: 1199px) {
    .main-gallery .main-board-item {
        width: calc(33.3333% - 30px);
    }
}

@media screen and (max-width: 767px) {
    .main-gallery .main-board-item {
        width: calc(50% - 30px);
    }
}
@media screen and (max-width: 575px) {
    .main-gallery .main-board-item {
        width: calc(100% - 30px);
    }

    .main-gallery .img-area {
        max-height: max-content;
    }
    .main-gallery .img-area img {
        min-height: auto;
    }
}

/* 메인 갤러리 연동 */
/* .mainProductSlide {margin-bottom: 50px;} */
.mainProductSlide .main-product {
    padding-bottom: 100px;
}
.mainProductSlide img {
    max-width: 100%;
}
.mainProductSlide .main-board-item {
    padding: 0;
}

.mainProductSlide .title-area {
    margin-top: 1rem;
}

.mainProductSlide .swiper-pagination {
    left: 50%;
    top: auto;
    bottom: 1.125rem;
    transform: translateX(-50%);
    width: calc(100% - 100px);
    height: 4px;
}

.mainProductSlide .swiper-button-next,
.mainProductSlide .swiper-button-prev {
    color: var(--bs-primary);
    top: auto;
    bottom: 0;
}

.mainProductSlide .swiper-button-prev:after,
.mainProductSlide .swiper-button-next:after {
    font-size: 1.5rem;
}

.mainProductSlide
    .swiper-pagination-progressbar
    .swiper-pagination-progressbar-fill {
    background: var(--bs-primary);
}

/* 메인 문의하기 연동 */

.main-contact {
    background-image: linear-gradient(
            180deg,
            rgba(30, 24, 53, 0.4) 0%,
            rgba(30, 24, 53, 0.4) 90.16%
        ),
        url("/images/main/about_img_01.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

.main-contact .section-header i {
    color: var(--bs-white);
}

.main-contact .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.main-contact .form-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.main-contact .form-list .form-item {
    width: calc(50% - 5px);
}

.main-contact textarea {
    border-radius: var(--bs-border-radius);
    padding: 0.375rem 0.75rem;
}
.checked_wrap .btn-primary {
    min-width: 150px;
}

.main-contact .checked_wrap > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .main-contact .form-list .form-item {
        width: 100%;
    }
    .checked_wrap .btn-primary {
        min-width: 100px;
    }
}

@media screen and (max-width: 360px) {
    .main-contact .checked_wrap > div {
        flex-direction: column;
        gap: 10px;
    }
    .checked_wrap .btn-primary {
        min-width: 150px;
    }
}

/* 일정 수정 */
.schedule-text {
    line-height: normal;
}
.schedule-text:not(:last-child) {
    margin-bottom: 5px;
}

/* 메인 하단 배너 */
.main-banner .swiper-wrapper {
    align-items: center;
}
.main-banner .swiper-slide {
    width: fit-content !important;
}
.main-banner .banner-link {
    display: block;
    width: fit-content;
}


/* 결과내역 목록 */

.table-01 {border-top: 2px solid var(--bs-dark); text-align: center;}

.table-01 tr th {font-size: 1.125rem;}
.table-01 tr td {font-size: 1.125rem;}
.table-01 a:hover .bi::before {color: var(--bs-primary);}

@media screen and (max-width:767px){
    .table-01 tr th {font-size: 1rem;}
    .table-01 tr td {font-size: 1rem;}
}

.vv {text-align: right;}

/* 결과목록 */

.result-list-top { display: flex; align-items: center;}
.result-list-top .form-select{background-color: transparent; font-size: 1.125rem;}
.result-list-top .form-control{background-color: transparent;}
.result-list-top .form-control::placeholder {color: var(--bs-dark);}

@media screen and (max-width:767px) {
	.result-list-top .form-select{font-size: 1rem;}
}

.dd {display: flex; align-items: center; padding-left: 40px; padding-right: 40px;}
.dis {display:none;}
.it-sel {cursor:pointer}

.dis-wrap {
	background-color: rgba(0, 0, 0, 0.6);position: absolute;width: 100%;left: 0;top: 0;bottom: 0;right: 0;z-index: 100;
	display: flex;align-items: center;justify-content: center;
}
.dis-btn {
	z-index: 101;color:#ffffff;font-size: 1.125rem !important;font-weight: 700;background-color:#83ac2a;border-radius:50px;
	padding:0.625rem 1.25rem;
}
.dis-btn:hover {color:#ffffff;}
@media print {
	* {-webkit-print-color-adjust:exact;}
}

.section-header-02 { display: flex; justify-content: space-between; align-items: center;}
.youtube-link {padding: 8px 20px; background: linear-gradient(90deg,rgba(83, 106, 178, 1) 0%, rgba(131, 172, 42, 1) 100%); color: var(--bs-white); border-radius: 30px; font-size: 1rem; font-weight: 700; display: flex; justify-content: center; align-items: center; transition: transform 0.5s; border: 3px solid var(--bs-primary);} 
.youtube-link img {width: 30px; height: auto; margin-right: 5px;}

.youtube-link:hover {color: var(--bs-white); transform: scale(1.1);}

@media screen and (max-width:767px){
    .section-header-02 {flex-direction: column; gap: 10px; justify-content: flex-start; align-items: flex-start;}
}



/* 배너슬라이드 */
.sub-banner-section p {color: var(--bs-dark); text-align: center;} 
.sub-banner-section p span {font-weight: 700; color: var(--bs-dark);font-size: 20px; display: block;}
.sub-banner-section img {border-radius: 50%; border:  1px solid var(--bs-gray-300); aspect-ratio:1/1; object-fit:cover;}
/* .sub-banner-section .swiper-slide img{} */

.sub-banner-section .swiper-wrapper {transition-timing-function: linear;}

.drag-wrap {
	width:430px;height:362px;border:2px dashed #dddddd;border-radius:5px;padding:15px;	
    display: flex;justify-content: space-between;align-items: flex-start;
	margin-bottom:20px;background-color:#ffffff;margin-left: auto;margin-right: auto;
}
.drag-area {width:400px;height:332px;}

@media screen and (max-width:565px){
    .drag-wrap {width: 100%; justify-content: center;}
}

/* 풋터 배너 */

/* .footBanner {max-width: 870px; margin-right: 0;}
.footBanner .swiper-wrapper {align-items: center;transition-timing-function: linear;}
.footBanner .swiper-slide {width: fit-content !important;} */
/* .footBanner .swiper-slide img {
    display: block;
    width: auto;
    height: 24px;
} */

/* 
@media screen and (max-width:1599px) {
    .footBanner {max-width: 450px;}
}
@media screen and (max-width:1199px){
    .footBanner {max-width: 300px;}
}

@media screen and (max-width:991px) {
    .footBanner {max-width: 100%; margin-top: 30px;}
}
 */

.infinite-banner-container {max-width: 870px;margin-right: 0;overflow: hidden;
  position: relative;/* 초기 위치 설정 (20px 아래에 위치) */transform: translateY(20px);opacity: 0;transition: transform 0.6s ease-out, opacity 0.6s ease-out;}

/* 화면에 나타날 때 적용되는 클래스 */
.infinite-banner-container.visible {transform: translateY(0);opacity: 1;}

.infinite-banner {display: flex;width: fit-content;}

.banner-content {display: flex;align-items: center;flex-shrink: 0;}

.banner-content img { display: block; padding: 0 10px; height: auto;}

@media screen and (max-width:1599px) {
    .infinite-banner-container  {max-width: 450px;}
}
@media screen and (max-width:1199px){
    .infinite-banner-container  {max-width: 300px;}
}

@media screen and (max-width:991px) {
    .infinite-banner-container {max-width: 100%; margin-top: 30px;}
}

@media (max-width: 768px) {
    .banner-content img {max-width: 120px;}
}

/* 20250715 추가 */
.num-check-frame li {position: relative;}
.num-check-pop {position: absolute; padding: 8px 15px; top: 50%; left: 102%; border-radius: 10px;   background-color: var(--bs-white); font-size: 1.125rem; transform: translateY(-50%); white-space: nowrap; font-weight: 500; background-color: var(--bs-primary); color: var(--bs-white); display: none;}

.num-check-frame li:hover .num-check-pop {display: block;}

@media screen and (max-width:767px){
    .num-check-pop {display: none;}
    .num-check-frame li:hover .num-check-pop {display: none;}
}




/* 스킨 재정비 */
.video-content a {overflow: hidden; position: relative; height: 64%; min-height: 230px;}
.video-content a img {margin-top: -10%;}

@media screen and (max-width:1299px){
    .video-content a {min-height: auto; height: 16vw;}
    .video-content a img {margin-top: -3vw;}
}
@media screen and (max-width:991px) {
    .video-content a {height: 24vw;}  
    .video-content a img {margin-top: -5vw;}
}

@media screen and (max-width:767px) {
    .video-content a {height: 51vw;}  
    .video-content a img {margin-top: -9vw;}
}

.comm_check_label {font-size:16px;}

span.dot {position:relative; padding-left:14px;}
span.dot::before {position:absolute; content:""; top: 10px; left:0; width:2px; height:2px; border-radius:50%; background:#666666; }
span.bar {position:relative; padding-left:14px;}
span.bar::before {position:absolute; content:""; top: 10px; left:0; width:4px; height:1px; background:#666666; }

.pac-wrap {height:auto!important;display:flex; flex-direction: column;}
.pac-box-title {min-height:48px;}
.pac-box {flex: 1; border: 1px solid var(--bs-gray-300); border-radius: 10px; padding:40px 30px;}
.pac-box .title {background-color:#eeeeee; font-weight:600; color:#000000; border-radius:8px; padding:14px 20px;}
.pac-box ul {padding:20px;}
.pac-box ul li {display:flex; align-items:center; gap:8px; font-weight:500; color:#000000; font-size:16px;}
.pac-box ul li span {display:block; width:45px; height:45px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.pac-box ul li img {max-width:25px; max-height:32px;}
.pac-box ul li + li {margin-top:6px;}
.pac-box ul.pros li .num {display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background-color:#83ac2a; color:#ffffff; font-size:14px; font-weight:600;}
.pac-box ul.cons li .num {display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background-color:#7d716b; color:#ffffff; font-size:14px; font-weight:600;}

.pac-wrap:nth-of-type(1) .pac-box > div:nth-of-type(1) .title {background-color:#ffdcd9; color:#ec6072;}
.pac-wrap:nth-of-type(1) .pac-box > div:nth-of-type(1) ul li span {border:1px solid #ec6072;}

.pac-wrap:nth-of-type(1) .pac-box > div:nth-of-type(2) .title {background-color:#ffefef; color:#98716e;}
.pac-wrap:nth-of-type(1) .pac-box > div:nth-of-type(2) ul li span {border:1px solid #98716e;}

.pac-wrap:nth-of-type(2) .pac-box > div:nth-of-type(1) .title {background-color:#d8e3ff; color:#2a34b0;}
.pac-wrap:nth-of-type(2) .pac-box > div:nth-of-type(1) ul li span {border:1px solid #2a34b0;}

.pac-wrap:nth-of-type(2) .pac-box > div:nth-of-type(2) .title {background-color:#eff6ff; color:#848da8;}
.pac-wrap:nth-of-type(2) .pac-box > div:nth-of-type(2) ul li span {border:1px solid #848da8;}

.pac-wrap:nth-of-type(3) .pac-box > div:nth-of-type(1) .title {background-color:#dadada; color:#444444;}
.pac-wrap:nth-of-type(3) .pac-box > div:nth-of-type(1) ul li span {border:1px solid #444444;}

.pac-wrap:nth-of-type(3) .pac-box > div:nth-of-type(2) .title {background-color:#ebebeb; color:#888888;}
.pac-wrap:nth-of-type(3) .pac-box > div:nth-of-type(2) ul li span {border:1px solid #888888;}

.btn-result {position:relative;}
.btn-result::before {display:none; animation: scrollDown 1.5s infinite; position:absolute; top:-40px; left:50%; transform:translateX(-50%); content:""; width:32px; height:32px; background-size:32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='%2383ac2a' d='M297.4 566.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L352 466.7V96c0-17.7-14.3-32-32-32s-32 14.3-32 32v370.7L182.6 361.3c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");}
.btn-result.act::before {display:block;}

@keyframes scrollDown {
	0% {
		transform:translate(-50%, -10px);
		opacity: 0;
	}
	100% {
		transform:translate(-50%, 0);
		opacity: 1
	}
}

.btn-wrap {flex-wrap:nowrap;}



@media screen and (max-width: 768px) {
	.search-wrap .form-select[name="limits"] {width:70px; flex:none;}
}

@media screen and (max-width: 567px) {
	.search-wrap {flex-wrap:wrap;}
	.search-wrap > div {width:100%;}
	.search-wrap .form-select[name="limits"] {width:25%; }
}

.table-mobile tbody td:last-child {font-size:1.25rem;}
.table-mobile .mobile {display:none;}
.table-mobile .pc {display:table-cell;}

@media screen and (max-width: 768px) {
	.table-mobile {text-align:left;}
	.table-mobile>:not(caption)>*>* {padding: 0.5rem 1rem;}
	.table-mobile colgroup {display:none;}
	.table-mobile thead {display:none;}
	.table-mobile td {border-bottom:0;}
	.table-mobile tr {border-bottom: 1px solid #dddddd; padding: 0.5rem 0; padding-top: 1rem; display:block;}
	.table-mobile tbody td:first-child {padding-right:0;}
	.table-mobile tbody td:last-child {font-size:2rem;}
	.table-mobile .mobile b {font-weight:700; color:#000000;}
	.table-mobile .mobile {display:table-cell; width:100%;}
	.table-mobile .pc {display:none;}
}


.btn-area-11 .btn {min-width:160px;}

@media screen and (max-width: 567px) {
	.btn-area-11 .btn {min-width:auto;}
}


.floating-text {
  position: absolute;
  right: -10%; /* 시작 위치 */
  font-size: 5rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.4);
  z-index: 1; /* 로고보다 뒤에 배치 */
  opacity: 0;
  pointer-events: none; /* 텍스트가 마우스 클릭을 방해하지 않게 */
}
.intro-section {position:relative; overflow:hidden;}

.floating-text:nth-child(1) { top: 37%; } /* VOICES */
.floating-text:nth-child(2) { top: 45%; } /* VALUES */
.floating-text:nth-child(3) { top: 53%; } /* TOGETHER */


  .scene {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    position: relative;
  }

  .logo-icon {
    display:flex;
    opacity: 0;
    animation: iconFadeIn 1s ease forwards 0.3s;
    flex-shrink: 0;
  }
  @keyframes iconFadeIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
  }



  .text-block {
    position: relative;
	
  }

  .teaser-lines {
  	position: absolute;
    bottom: -14px; left: 0;
    display: flex;
    flex-direction: column;
    gap: 17px;
  }

  .final-lines {
    
    display: flex;
    flex-direction: column;
    gap: 20px;
    opacity: 0;
  }
  .line-text {display:flex;}
  .line-wrap {

    display: flex;
    align-items: center;
  }

  .teaser-lines.exit {
    animation: teaserExit 0.9s cubic-bezier(0.4, 0, 1, 1) forwards;
  }
  @keyframes teaserExit {
    0%   { opacity: 1; filter: blur(0px);  transform: scale(1); }
    100% { opacity: 0; filter: blur(18px); transform: scale(1.04); }
  }

  .final-lines.enter {
    animation: finalEnter 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes finalEnter {
    from { opacity: 0; filter: blur(12px); transform: translateY(6px); }
    to   { opacity: 1; filter: blur(0px);  transform: translateY(0); }
  }

 [data-aos][data-aos][data-aos-delay="6000"].aos-animate {
    transition-delay: 6s;
}


@media screen and (max-width: 991px) {
	.logo-icon {width:44%;max-width: 216px;}
	
	.scene svg {width:100%; height:auto;}
	.scene {width: calc(100% - 280px);}
	.final-lines .line-wrap:nth-of-type(1) {width: 95%;}
	.final-lines .line-wrap:nth-of-type(2) {width: 77%;}
	.final-lines .line-wrap:nth-of-type(3) {width: 100%;}

	.teaser-lines .line-wrap:nth-of-type(3) {width: 239%;}
	.teaser-lines .line-wrap:nth-of-type(2) { width: 177%;}
	.teaser-lines .line-wrap:nth-of-type(1) { width: 193%;}
}

@media screen and (max-width: 768px) {
	.intro-area {width:100%; position:relative;}
    .intro-area > div {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
		width: 60%; position:absolute; top:50%; left: 0; transform: translate(-0%,-50%); animation: logoCenter 1s ease forwards 6s;
    }
    .intro-area .btn-secondary {
        align-self:center;
    }
    .intro-area .btn-secondary {
        font-size: calc(1.325rem + .9vw);

    }
	.teaser-lines {bottom: -6%;}
	.scene { width:100%; }
	.logo-icon { width: calc(50% - 20px);}
	.text-block { width: calc(50% - 20px); max-width: 195px;}
}
@media screen and (max-width: 576px) {
	.final-lines {gap:12px;}
	.teaser-lines {gap: 10px;}

	.scene { gap:20px; }
	.logo-icon { width: calc(50% - 10px);}
	.text-block { width: calc(50% - 10px);}
}


@keyframes logoCenter {
    0%	{ 
			
		left: 0;
		transform: translate(-0%,-50%);
	}
    100% {
		left:50%;
		transform: translate(-50%,-50%);
	}
}

.hd-right {display:flex; align-items:center; gap:40px;}
.lang-menu {display:flex; align-items:center; gap:10px;}
.lang-menu li:nth-child(2) {width:1px; height:10px; background:#ffffff; opacity:0.3;}
.lang-menu a {position:relative; color:#ffffff; opacity:0.7; }
.lang-menu a.active {font-weight:bold; color:#ffffff; text-decoration:underline; opacity:1;}

body.intro .header .lang-menu a {position:relative; color:#00454e;  }
body.intro .header .lang-menu li:nth-child(2) {background:#00454e; }

.footer .lang-menu a {font-size: 0.75rem; color: #000000}
.footer .lang-menu li:nth-child(2) {background:#000000; }
.footer .lang-menu a.active {text-decoration:none;}

body.intro .footer .lang-menu a {font-size: 0.75rem; color: #ffffff}
body.intro .footer .lang-menu li:nth-child(2) {background:#ffffff; }

@media screen and (max-width: 567px) {
	.hd-right { gap:20px;}
}