@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:#e83f46;
    --bs-secondary: #000000;
    --bs-success: #24a148;
    --bs-info: #17a2b8;
    --bs-warning: #ffc107;
    --bs-danger: #ff5938;
    --bs-light: #f5f5f5;
    --bs-dark: #000000;
    --bs-lightblue: #eef2fa;
    --bs-blue: #1f59ee;

    --bs-white: #fff;
    --bs-gray: #666666;
    --bs-gray-dark: #222222;
    --bs-gray-100: #f5f5f5; /* bag-gray */
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dddddd; /* border */
    --bs-gray-400: #cccccc; /* allmanu kakao */
    --bs-gray-500: #aaaaaa; /* allmanu text */
    --bs-gray-600: #999999; /* font-color */
    --bs-gray-700: #495057;
    --bs-gray-800: #333333; /* allmanu border */
    --bs-gray-900: #212529;

    --admin-bg-color:#28344e;
    --admin-login-color:#535d71;
}

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;
    }


.pop-font {font-family: "Poppins",'Pretendard', sans-serif;}
.os-font {font-family: "Oswald",'Pretendard', sans-serif;}

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

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

.text-440 {font-size: 440px;}
.text-240 {font-size: 240px;}
.text-230 {font-size: 230px;}
.text-160 {font-size: 160px;}
.text-140 {font-size: 140px;}
.text-110 {font-size: 110px;}
.text-100 {font-size: 100px;}
.text-90 {font-size: 90px;}
.text-85 {font-size: 85px;}
.text-22 {font-size: 22px;}
.text-18 {font-size: 18px;}
.text-16 {font-size: 1rem;}
.text-15 {font-size: 15px;}
@media screen and (max-width:1399px) {
    .text-85 {font-size: calc(1.5rem + 3.5vw);}
    .text-90 {font-size: calc(1.5rem + 3.5vw);}
    .text-100 {font-size: calc(1.5rem + 3.8vw);}
    .text-110 {font-size: calc(1.5rem + 4vw);}
    .text-160 {font-size: 11vw;}
    .text-230 {font-size: calc(3rem + 5vw);}
    .text-440 {font-size: 26vw;}

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

    .text-140{font-size: calc(1.625rem + 4.5vw);}

    .text-22 {font-size: 20px;}
    /* .text-160 {font-size: 70px;} */

}

@media screen and (max-width:767px) {
    .text-440 {font-size: 28vw;}
    /* .text-160 {font-size: calc(1.5rem + 4vw);} */
    .text-160 {font-size: 11vw;}
}

@media screen and (max-width:520px) {
    .text-440 {font-size: 30vw;}
}

/* @media screen and (max-width:360px) {
    .text-160 {font-size: calc(1.25rem + 4vw);}
}
 */

.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;}

.bag-dark {background-color: var(--bs-dark);}
.bag-gray {background-color: var(--bs-gray-100);}

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: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 {padding-left: 4%; padding-right: 4%;}

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



/* ********************* */
/* ******* 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: 30px;
}

.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-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-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-blue {color: var(--bs-blue) !important;}
.text-a {color: #aaaaaa;}


/* 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 {z-index: 9999999999;}
.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-200); 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; display: none;}
.location ul{display: flex; color: var(--bs-white); 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; top: 0; left: 0; z-index: 3000;}

.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 {position: absolute; top: 50%; left: 4%; -webkit-transform: translateY(-50%); transform: translateY(-50%);} */
.navbar-brand .logo-dark {display: block;}
.navbar-brand .logo-wh {display: none;}
.navbar-brand img {width: 155px; height: auto;}

@media screen and (min-width: 1200px) {
    .navbar-brand {left: 20px;}
}





/* gnb */
.gnb {width: 100%; height: 110px; padding: 0; border-bottom: 0;}
.gnb > .container-fluid {width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: flex-start; position: relative; padding-top: 40px;}
.gnb > .container {width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: flex-start; position: relative; padding-top: 40px;}

.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-link {padding: 0.5rem 1.5rem; font-size: 1.125rem; color: var(--bs-dark); font-weight: 500;}
.gnb .nav-link:hover {color: var(--bs-primary);}
.gnb .nav-item.active .nav-link{color: var(--bs-primary);}
/* .gnb .nav-item .nav-link::before {content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); background-color: var(--bs-primary); height: 10px;  border-radius: 30px; width: 0; opacity: 0; transition: all 0.5s;} */
/* .gnb .nav-item:hover .nav-link::before {width: calc(100% - 30px); opacity: 1;} */
/* .gnb .nav-item:hover .submenu {display: block;} */

@media screen and (max-width: 991px) {
    .gnb {height: 70px; /* background-color: var(--bs-white); */}
    .gnb > .container-fluid {padding-top: 10px;}
    .navbar-brand img {width: 100px;}
}

@media screen and (max-width: 767px){
    .gnb > .container-fluid {align-items: center;}
}

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

} */

/* submenu */
.submenu {min-width: 120px; padding: 1rem 1.125rem; background-color: var(--bs-white); border: 1px solid var(--bs-gray-300);  -webkit-border-radius: 0.5rem; border-radius: 0.5rem; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); box-shadow: 1px 0px 3px rgba(0,0,0,0.3); white-space: nowrap; display: none; text-align: center;}

.sub-item:not(:last-child) {margin-bottom: 0.5rem;}
.sub-item.active {color: var(--bs-primary);}
.sub-item.active .sub-link::after {opacity: 1; visibility: visible;}

.sub-link {color: inherit; position: relative; display: inline-block; width: 100%;}
.sub-link:hover {color: var(--bs-primary);}
.sub-link:hover::after {opacity: 1; visibility: visible;}
/* .sub-link::after {content: ''; width: 100%; height: 2px; background-color: var(--bs-primary); position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; visibility: hidden;} */



/* util-menu */
.util-list {display: flex; justify-content: flex-start; align-items: center; display: none;}

.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 {
    padding: 0.5rem; font-weight: 400; color: var(--bs-white);
}


/* 로그인 했을 때 뜨는 마이페이지 버튼 */
.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.5rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-border-width: 0;
    --bs-btn-hover-color: var(--bs-white);
    font-size: 2rem; color: var(--bs-white);

}

.btn-trigger.red span{background-color: var(--bs-primary);}

.btn-trigger:hover span:nth-child(1) {transform: rotate(360deg); transition: all 0.5s; background-color: var(--bs-primary);}
.btn-trigger:hover span:nth-child(2) {transform: rotate(-360deg); transition: all 0.5s;background-color: var(--bs-primary);}

.btn-trigger {display: flex; flex-direction: column; justify-content: center;}
.btn-trigger .bi {color: var(--bs-white);}
.btn-trigger .isFixed .bi {color: var(--bs-dark);}
.btn-trigger span {width: 40px; height: 2px; background-color: var(--bs-dark); display: inline-block;}
.btn-trigger span:not(:last-child) {margin-bottom: 0.5rem;}
@media screen and (min-width: 1200px) {
    .util-list {display: flex;}
    .gnb .nav-list {display: flex;}

    .btn-util {display: none;}
    /* .btn-trigger {display: none;} */
    
}



/* 전체 메뉴 */
.all-menu {width: 100%; height: 100%; background-color: var(--bs-dark); position: fixed; top: 0; left: 0; z-index: 1100; display: none; z-index: 99999999999;}
.all-menu .container-fluid {width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; overflow-y: auto;}

.all-menu-header {width: 100%; height: 110px; display: flex; justify-content: space-between; align-items: flex-start; padding-top: 40px;}
.all-menu-header .btn-close {opacity: 1; font-size: 1.5rem; /* filter: invert(1); */ /* transition: transform 0.3s ease-in-out; */ background-image: none; font-size: 38px; padding: 0;}
.all-maenu-logo {width: 155px; height: auto;}

.all-menu-header .btn-close i::before {font-weight: 100 !important; color: var(--bs-white); vertical-align: baseline;}
.all-menu-header .btn-close:hover{color: var(--bs-primary); }
.all-menu-header .btn-close:hover i::before {color: var(--bs-primary); } 


.all-menu-area {display: flex; justify-content: space-between; align-items: center; gap: 50px; height: calc(100% - 110px);}


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


.all-menu-list {width: 100%;}

.all-menu-list .all-link{padding: 0.625rem 0; font-size: 1.5rem; font-weight: 700; color: var(--bs-white); display: inline-block; width: 100%; text-align: left;
}

.all-menu-list .all-menu-link {padding: 0.625rem 0; font-weight: 700; color: var(--bs-white); display: inline-block; width: 100%; text-align: left; font-family: "Poppins",'Pretendard', sans-serif;
}

.all-menu-list .all-menu-link:hover {color: var(--bs-primary); }

.all-menu-list .all-menu-link.active {color: var(--bs-primary);}

.all-menu-list .all-menu-link.active + .all-submenu {display: block;}

.all-submenu {padding: 1rem; margin-bottom: 1rem; font-size: 1.125rem; font-weight: 500; background-color: var(--bs-gray-100); display: none;}


.all-menu-footer {padding: 1.5rem 0; border-top: 1px solid var(--bs-gray-800); max-width: 430px; width: 100%;}

.all-footer-menu {padding-bottom: 1.5rem; border-bottom: 1px solid var(--bs-gray-800);}
 
.all-footer-link {font-size: 30px; color: var(--bs-white); padding: 5px 0 ; display: inline-block; padding: 2px 0;}
.kakao-alarm {padding: 2px 10px; border-radius: 30px; border: 1px solid var(--bs-gray-400); display: inline-block;vertical-align: text-bottom;color: var(--bs-gray-400); margin-left: 5px; cursor: pointer;}
.all-kakao-img {width: 16px; height: auto;vertical-align: middle;}
.kakao-alarm:hover {background-color: #F7E600; color: var(--bs-dark); border-color: #F7E600;}
.kakao-alarm:hover .all-kakao-img {filter: invert(1);}

.all-menu-footer .bi {color: var(--bs-white); font-size: 20px;} 
.all-menu-footer .bi::before {font-weight: 800 !important;}

.all-foot-list {font-weight: 400; padding-top: 1.5rem; color: var(--bs-white);}
.all-foot-list .tell {font-size: 30px; font-weight: 700;}
.all-foot-list .mail {color: var(--bs-gray-500);}
.all-foot-list .mail a {color: var(--bs-gray-500);}

.all-menu-footer .all-footer-link:hover .bi {color: var(--bs-primary);}

@media screen and (max-width:991px){
    .all-menu-area {flex-direction: column;justify-content: flex-start;
        align-items: flex-start; padding-top: 40px;}
    .all-menu-list .all-menu-link.display-1{font-size: calc(1.625rem + 2.5vw) !important;}
    .all-footer-link {font-size: calc(1rem + 1.5vw);}
    .kakao-alarm {font-size: 0.875rem;}
    .all-menu-header {padding-top: 10px; height: 70px;}
    .all-maenu-logo {width: 100px; padding: 5px 0;}
    .all-menu-footer {max-width: 100%;}
}

@media screen and (max-width:767px) {
    .all-menu-header {align-items: center;}
    .all-foot-list{font-size: calc(1rem + 1.5vw);}
    .all-foot-list>div span {display: block; font-size: 20px;}
    .all-foot-list>div span.bar {display: none;}
    .all-foot-list .mail {margin-top: 0.5rem; font-size: 1rem;}
    .all-foot-list .mail span {font-size: 1rem;}

    
}


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



/* ********************** */
/* *** subpage header *** */
/* ********************** */
.sub-header .container-fluid{padding-top: 0; align-items: center;}



.sub-header.isFixed {background-color: var(--bs-white);}

.sub-header.isFixed
#header.sub-header .gnb {height: 120px;}
#header.sub-header .nav-list {display: flex;}

@media screen and (max-width:1399px) {
#header.sub-header .nav-list {display: none;}
}

@media screen and (max-width:991px) {
    #header.sub-header .gnb {height: 70px;}
    #header.sub-header  .gnb > .container {padding-top: 10px;}
}



/* ********************** */
/* *********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: 4rem;}
h2.title {font-size: 2.5rem; }



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

.boardname {
    position: absolute;
    z-index: 9;
    color: white;
    font-size: 50px;
    top: 120vh;
    text-align: center;
    width: 100%;
}

.intro-area {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 9999999;
}

.intro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/images/main/intro-img.svg");
    background-size: cover;
    /* background-size: contain; */
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 999;
    transition: transform 0.3s ease;
    display: flex; align-items: center; justify-content: center;
}

.intro::before {content: ""; position: absolute;  left: 0; top: 0;background-color: var(--bs-dark); z-index:-1;}
.intro::after {content: ""; position: absolute; ; right: 0; top: auto; bottom: 0; background-color: var(--bs-dark); z-index:-1;}

.intro-img {display: flex; align-items: center; justify-content: center;}

@media screen and (min-width:1920px){
    .intro::before {left: 0; top: 0;width: 7%;height: 100vh;}
    .intro::after {right: 0; top: 0;width: 7%;height: 100vh;}
}

/* @media screen and (max-width:1140px){
    .intro::before {height: 40vw;}
    .intro::after{height: 40vw;}
} */


@media screen and (max-width:1440px) {
    .intro {background-image: url("/images/main/intro-img-m.svg"); background-size: cover;}
    .intro::before {width: 100%; height: 18vw;}
    .intro::after{width: 100%; height: 18vw;}
}
@media screen and (max-width:1024px) {
    .intro {background-image: url("/images/main/intro-img-m.svg"); background-size: contain;}
    .intro::before {width: 100%;  height: 18vw;}
    .intro::after{width: 100%;  height: 18vw;}
}
@media screen and (max-width:991px) {
    .intro::before {width: 100%;  height: 40vw;}
    .intro::after{width: 100%;  height: 40vw;}
}
@media screen and (max-width:767px) {
    .intro::before {width: 100%;  height: 60vw;}
    .intro::after{width: 100%;  height: 60vw;}
}
@media screen and (max-width:540px) {
    .intro::before {width: 100%;  height: 50vw;}
    .intro::after{width: 100%;  height: 50vw;}
}
@media screen and (max-width:520px) {
    .intro::before {width: 100%;  height: 60vw;}
    .intro::after{width: 100%;  height: 60vw;}
}
@media screen and (max-width:430px) {
    .intro::before {width: 100%;  height: 85vw;}
    .intro::after{width: 100%;  height: 85vw;}
}
@media screen and (max-width:420px) {
    .intro::before {width: 100%; height: 60vw;}
    .intro::after{ width: 100%; height: 60vw;}
}
@media screen and (max-width:380px) {
    .intro::before {width: 100%;  height: 50vw;}
    .intro::after{width: 100%; height: 50vw;}
}
@media screen and (max-width:360px) {
    .intro::before {width: 100%;  height: 76vw;}
    .intro::after{width: 100%;  height: 76vw;}
}
@media screen and (max-width:350px){
        .intro::before {width: 100%;  height: 110vw;}
    .intro::after{width: 100%; height: 110vw;}
}
@media screen and (max-width:320px){
    .intro::before {width: 100%; height: 70vw;}
    .intro::after{width: 100%; height: 70vw;}
}


.intro.hidden {
    opacity: 0;
    transition: opacity 0.5s ease;
    display: none;
}

.intro.hidden + .icon_scroll {display: none;}

.icon_scroll {position: fixed; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 9999999;font-size: 2rem;color: var(--bs-white);animation: scroll 1.5s infinite; -webkit-animation: scroll 1.5s infinite; -o-animation: scroll 1.5s infinite;}
.icon_scroll span::before {color: var(--bs-white);}
.icon_scroll .bi::before {color: var(--bs-white);}

@keyframes scroll {
	0% {transform:translateY(-15px);}
	100% {transform:translateY(0);}
}
/* #intro-front {
    top: 25.3125vw;
    left: calc(52.65% - 65.98958333333333vw / 2);
    width: 65.98958vw;
    position: absolute;
    z-index: 9999999999;
    height: auto;
} */

/* #intro-stones {
    position: absolute;
    top: 35.08333vw;
    left: 0;
    width: 100%;
    height: auto;
} */

.intro-area .content-area{
    width: 100%;
    height: 100vh;
}

.ScrollTriggerSection .section {width: 100%; height: 100vh;}
.ScrollTriggerSection .section:nth-child(1) {background-color: var(--bs-gray-300);}
.ScrollTriggerSection .section:nth-child(2) {background-color: var(--bs-gray);}
.ScrollTriggerSection .section:nth-child(3) {background-color: var(--bs-dark);}
.ScrollTriggerSection .section:nth-child(4) {background-color: var(--bs-gray-500);}


.main-section {width: 100%; height: 100vh;}

body {
  overflow-x: hidden;
 }





 /* 인트로 애니메이션으로 다시하기 */

 .intro-ani {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999999999999;
    /* background-color: var(--bs-dark); */
    z-index: 99999;
    transition: transform 0.3s ease;
    display: flex; align-items: center; justify-content: center;
}


 .intro-ani.active {animation: intro 3s;}

@keyframes intro {
    0% {
        transform: scale(1);
        top: 0;
        left: 0;
    }
    100% {
        transform: scale(9);
        top: -100%;
        left: -200%;
        /* opacity: 0; */
    }
}

.intro-ani.none {display: none;}



@media screen and (max-width:767px){
    @keyframes intro {
    0% {
        transform: scale(1);
        top: 0;
        left: 0;
    }
    100% {
        transform: scale(8);
        top: -10%;
        left: -100%;
        opacity: 0;
    }
}
}


/* 메인 시작 */

.h1-title{position: absolute; left: -100%; height: 0;}

#fullpage .section {height: 100vh;}

/* .fullpage {
  height: 100vh;
  position: relative;
} */

/* .panel:not(:first-child) {
  position: absolute;
  top: 100vh;
  width: 100%;
} */

/* #fullpage .description {background-color: #dfdfdf; height: 100vh;} */
#fullpage .main-section {height: 100vh;}

#fullpage .main-section {display: flex; align-items: center; justify-content: center; font-weight: 800;}
#fullpage .main-section-01 {background-color: var(--bs-white); overflow: hidden;}
#fullpage .main-section-02 {background-color: var(--bs-dark);}
#fullpage .main-section-03 {background-color: var(--bs-dark);}
#fullpage .main-section-04 {background-color: var(--bs-dark);}
#fullpage .main-section-05 {background-color: var(--bs-white);}
/* .fullpage .panel-05 {background-color: var(--bs-white);}
.fullpage .panel-05 {height: 0; padding: 0;} */

@media screen and (max-width:767px){
    #fullpage .main-section-01 {    height: 140vw;}
}


/* @media screen and (max-width:767px){
    .fullpage .panel {min-height: 700px; height: auto;}
} */


/* main-section-01 */

.main-section-01 .container-fluid{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; height: 100%; position: relative; padding-top: 210px;}
.panel-top-text {display: flex; align-items: flex-start; justify-content: flex-start; height: 100%;flex-direction: column;}
.main-video-area {max-width: 660px; width: 100%; position: absolute; right: 20px; bottom: 80px;}
.main-section-01 .main-video {width: 100%; height: 140px; overflow: hidden; position: relative;}

.main-section-01 .main-video video {width: 100%; margin-top: -100px;}
.up {text-transform: uppercase;}
.main-section-01 .main-video .text-area {font-size: 100px; font-weight: 800; color: var(--bs-white); position: absolute; left: -30px; top: 30px;}

.video-botttom-text {display: flex; justify-content: space-between;}
.main-section-01 .icon_scroll {left: 30px; bottom: 10vh;position: absolute; z-index: 1;}
.main-section-01 .icon_scroll img {width: 75px; height: auto;}
.main-section-01 .icon_scroll .bi::before {color: var(--bs-dark); font-size: 75px; font-weight: 200 !important;}


/* .fullpage .panel-05 .container {flex-direction: column; position: relative; display: block;} */


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

    .main-section-01 .container-fluid {padding-top: 30%; min-height: auto;}
    /* .main-video-area {position: static;} */
    .panel-top-text {margin-bottom: 1rem;}
    .main-video-area .main-video {position:relative; height:0; padding-bottom:26.25%;}
    .main-video-area source {position:absolute; top:0; left:0; width:100%; height:100%;}
    .main-section-01 .icon_scroll {left: 4%; bottom: 2%;}
    .main-video-area {right: 4%;}

}

@media screen and (max-width: 767px){
    .main-section-01 .main-video .text-area {font-size: calc(1.5rem + 3.8vw); top: auto; bottom: -1.6vw;}


}




/* 풀페이지의 2,3,4 섹션 헤더 색상 바꾸기 */
.fp-viewing-1 #header .btn-trigger span,
.fp-viewing-2 #header .btn-trigger span,
.fp-viewing-3 #header .btn-trigger span
{background-color: var(--bs-primary);}

.fp-viewing-1 #header .logo-dark, 
.fp-viewing-2 #header .logo-dark, 
.fp-viewing-3 #header .logo-dark 
{display: none;}

.fp-viewing-1 #header .logo-wh,
.fp-viewing-2 #header .logo-wh,
.fp-viewing-3 #header .logo-wh
{display: block;}

#header .nav-list {display: none;}

.fp-viewing-0 #header .nav-list {display: flex;}


@media screen and (max-width:1199px) {
    .fp-viewing-0 #header .nav-list{display: none;}
}

/* main-section-02 */
/* main-section-02 ~ main-section-04까지 헤더 컬러 바꾸기*/
#header.menu-color .btn-trigger span{background-color: var(--bs-primary);}
#header.menu-color .icon_scroll {display: none;}
#header.menu-color .logo-dark {display: none;}
#header.menu-color .logo-wh {display: block;}
#header .nav-list {display: none;}
#header.menu-block .nav-list {display: flex;}

#header.menu-color .nav-list {display: none;}

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

    #header.menu-color .gnb {background-color: transparent;}
     /* #header.menu-color .nav-list {display: none;} */
    /* #header.menu-color .logo-dark {display: block;}
    #header.menu-color .logo-wh {display: none;} */
}


.main-section .container {display: flex; justify-content: space-between; align-items: center; height: 100%;}
.main-section .main-text {align-items: center;}
.main-section .main-text span {position: relative; display: inline-block;}
.main-section .main-text span::after {content: ""; position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: 100%; height: 1px; background-color:  var(--bs-white);}

.main-pane-video {width:100%; max-width: 570px; height: 570px; overflow: hidden; border-radius: 50%;}
.main-pane-video video {width: 100%;}

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

    .main-section .main-text span {text-decoration: underline; text-decoration-thickness:1px;text-underline-position:under;}
    .main-section .main-text span::after {display: none;}
    .main-pane-video {max-width: 50vw; height: 50vw;}
    #header.menu-block .nav-list {display: none;}
    
}
@media screen and (max-width:1199px){
    .main-section .container {flex-direction: column; justify-content: center;}
    .main-section .main-text {margin-bottom: 2rem;}

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

}
@media screen and (max-width:767px){
.main-video-area {right: auto; width: 92%;}
.main-section-01 .icon_scroll img{width: 30px;}
/* .main-section-01 .container-fluid {max-height: 560px; padding-top: 0;} */
} 
@media screen and (max-width:575px) {

        .main-pane-video {max-width: 70vw; height: 70vw;}
}



/* main-section-03 */
/* 배너 슬라이드 */
/* banner */

.main-pane-slide {width:100%; max-width: 570px; min-height: 570px; border-radius: 50%; background-color: var(--bs-white);overflow: hidden;}

.banner {padding: 40px 44px;}
.banner-link {font-size: 0.875rem; color: var(--bs-dark); font-weight: 600; position: relative; text-transform: uppercase;}
.banner-link::after {content: ''; width: 100%; height: 2px; background-color: var(--bs-dark); position: absolute; bottom: -2px; left: 0;}
.banner-link:hover {color: var(--bs-primary);}
.banner-link:hover::after {background-color: var(--bs-primary);}

.banner-btns .btn {width: 100%;}

@media screen and (max-width: 767px) {
    .banner-link {font-size: 1rem;}
}

.main-banners .swiper {margin-top: 48px;}
.main-banners .swiper-wrapper {transition-timing-function: linear;}
.main-banners .logo {max-width: 100%;}
.partners-banner .swiper-slide {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: initial;}
/* .partners-banner .swiper-slide img {max-width: 100%; margin-right: 30px;} */
.partners-banner .swiper-wrapper {-webkit-transition-timing-function:linear!important; transition-timing-function:linear!important; 
    align-items: center;
    height: 100%;
}
.partners-banner  .swiper-slide img {
  width: auto; /* 이미지 원본 비율 유지 */
  height: auto; /* 이미지 원본 비율 유지 */
}
/* .partners-banner01 .swiper-slide {flex-shrink: 0;width: auto !important; display: flex; align-items: center; justify-content: center;}
.partners-banner02 .swiper-slide {flex-shrink: 0; width: auto !important; display: flex; align-items: center; justify-content: center;} */


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

    .main-pane-slide {max-width: 50vw; height: 50vw; min-height:auto;}
    .main-banners .swiper {margin-top: 4.5vw;}
}

@media screen and (max-width:767px) {
    .main-banners .swiper {margin-top: 4.5vw;}
    .main-banners .swiper {margin-top: 2.5vw;}
}

@media screen and (max-width:575px) {
    .main-pane-slide {max-width: 70vw; height: 70vw;}
}



/* main-section-04 */
/* .main-section-04 {border: 2px solid var(--bs-primary);} */
.main-pane-img {width:100%; max-width: 570px; max-height: 570px; border-radius: 50%; overflow: hidden;}

.main-pane-img img {width: 100%; margin-top: -20%;}

@media screen and (max-width:1399px) {
    .main-pane-img {max-width: 50vw;
        height: 50vw;
        min-height: 50vw;
        /* min-height: auto; */}
}

@media screen and (max-width:575px) {
    .main-pane-img {max-width: 70vw; height: 70vw;}
}


/* 초기 상태 */
/* .animate-hidden {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-in-out;
} */

/* 활성화 상태 */
/* .animate-visible {
    opacity: 1;
    transform: translateY(0);
}
 */

/* 메인 애니메이션 효과 */
/* 기본 숨김 상태 */
/* .main-text-tt-01,
.main-text-visual-01 {
  opacity: 0; 
  transform: translateY(50px); 
} */

/* main-awards */

.main-awards {    padding-top: 200px;padding-bottom: 200px; height: max-content;}
.main-awards .container {flex-direction: column; justify-content: center;}
.main-title-area {display: flex; justify-content: space-between; align-items: flex-start;}
.main-title-area .title-area {width: 42%;}
.main-title-area .content-area {width: 58%; padding-top: 80px; border-top: 1px solid var(--bs-dark); margin-top: 60px;}

.overlapping-wrap {position: relative; width: 1320px;}
.overlapping-img-area {padding-top: 80px;/* position: absolute; left: 50%; transform: translateX(-50%); */}

.overlapping-img-area .imgs {position: relative; height: 510px; }
.overlapping-img-area .imgs img {/* width: 20vw; aspect-ratio: 2/3; */ display: block; position: absolute; width: 300px; height: auto;}

    .overlapping-img-area .imgs .item01 {left: 100px; top:15px;}
    .overlapping-img-area .imgs .item02 {left: 50%; transform: translateX(-50%); top: 30px;}
    .overlapping-img-area .imgs .item03 {left: 910px; top:0;}
    .overlapping-img-area .imgs .item04 {left: 770px; bottom: 0;}
    .overlapping-img-area .imgs .item05 {left: 340px; top:75px;}

@media screen and (max-width:1199px) {
    .main-title-area {flex-direction: column; width: 100%;}
    .main-title-area .title-area {width: 100%;}
    .main-title-area .content-area {width: 100%;}

    .overlapping-wrap {position: relative; width: 900px;}
    .overlapping-img-area .imgs img {width: 290px;}
    .overlapping-img-area .imgs .item01 {left: 80px; top:30px;}
    .overlapping-img-area .imgs .item02 {left: 50%; transform: translateX(-50%); top: 0;}
    .overlapping-img-area .imgs .item03 {left: 230px; top:100px;}
    .overlapping-img-area .imgs .item04 {left: 490px; top:75px;}
    .overlapping-img-area .imgs .item05 {left: 540px; top:50px;}
}



@media screen and (max-width:767px) {
    .overlapping-img-area {padding: 60px 0;}

    .main-awards {padding: 100px 0;}

    .overlapping-wrap {position: relative; width: 100%;}
    .overlapping-img-area .imgs {height: 450px;}
    .overlapping-img-area .imgs img {width: 200px;}
    .overlapping-img-area .imgs .item01 {left: 0; top:auto; bottom: 10%;}
    .overlapping-img-area .imgs .item02 {left: 50%; transform: translateX(-50%); top: 30%;}
    .overlapping-img-area .imgs .item03 {left: 15%; top:0;}
    .overlapping-img-area .imgs .item04 {left: auto; top:auto; right: 15%; bottom: 0;}
    .overlapping-img-area .imgs .item05 {left: auto; top:15%; right: 0;}
    
}

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

    .overlapping-img-area .imgs img {width: 160px;}

}

@media screen and (max-width:360px){
    .overlapping-img-area .imgs img {width: 140px;}
}


/* way21에 있는 어워드 */

.overlapping-img-area-02  {padding-top: 130px;}

.overlapping-img-area-02  .imgs {position: relative; height: 1000px;}
.overlapping-img-area-02  .imgs img {/* width: 20vw; aspect-ratio: 2/3; */ display: block; position: absolute;}

.overlapping-img-area-02 .imgs .item01 {left: 0; top:5vh;}
.overlapping-img-area-02 .imgs .item02 {left:50%; transform: translateX(-50%); top: 8vh;}
.overlapping-img-area-02 .imgs .item03 {right:0; top:0;}
.overlapping-img-area-02 .imgs .item04 {left:10vw; top:25vh;}
.overlapping-img-area-02 .imgs .item05 {left:30vw; top:35vh;}


@media screen and (max-width:767px) {
    .overlapping-img-area-02  {padding: 100px 0;}
    .overlapping-img-area-02  .imgs {height: 130vw;}
    .overlapping-img-area-02  .imgs img {width: 50%; height: auto;}
    .overlapping-img-area-02  .main-awards {padding: 100px 0;}
    
}

@media screen and (max-width:520px) {
    /* .overlapping-img-area .imgs {height: 180vw;} */
    .overlapping-img-area-02  .imgs .item01 {left: 0; top:5vh;}
    .overlapping-img-area-02  .imgs .item02 {left:50%; transform: translateX(-50%); top: 8vh;}
    .overlapping-img-area-02  .imgs .item03 {right:0; top:0;}
    .overlapping-img-area-02  .imgs .item04 {left:10vw; top:50vw;}
    .overlapping-img-area-02  .imgs .item05 {left:30vw; top:80vw;}
}




/* 메인 흘러가는 텍스트 */
.main-section-06  .fp-tableCell {display: flex; align-items: center;}
.animated-section {display: flex; align-items: center; height: 100%;}
.animated-title {font-weight:800; position: relative; width: 100%;max-width:100%; height: auto; overflow-x: hidden; overflow-y: hidden; color: var(--bs-dark);}
.animated-title .track-01 {  white-space: nowrap;will-change: transform;animation: marquee 10s linear infinite; }
.animated-title .track-01 .content {-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: var(--bs-dark); color: var(--bs-white);}

.animated-title .track-02 {  white-space: nowrap;will-change: transform;animation: marquee02 10s linear infinite; }
.animated-title .track-02 .content {color: var(--bs-dark);}

.animated-title .track-03 {  white-space: nowrap;will-change: transform;animation: marquee 10s linear infinite; }
.animated-title .track-03 .content {color: var(--bs-dark);}

.animated-title .track-04 {  white-space: nowrap;will-change: transform;animation: marquee02 10s linear infinite; }
.animated-title .track-04 .content {color: var(--bs-dark);}
.animated-video {width: 206px; height: 92px; display: inline-block; overflow: hidden; position: relative; overflow: hidden; margin-bottom: -10px;}
.animated-video video {width: 140%; height: auto; margin-left: -30%; margin-top: -15%;}

.animated-title img {vertical-align: middle; margin-bottom: 22px;}

.animated-title .track:not(:first-child) {margin-top: -20px;}

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

@media screen and (max-width:1399px){
    .animated-title .track:not(:first-child) {margin-top: 0;}

}

@media screen and (max-width:767px) {
    .animated-section {height: auto;}
}



/* 메인 흘러가는 텍스트 다시 하기 */

.marquees {
  display: flex;
  overflow: hidden;
}

.marquees.reverse {
  flex-direction: row-reverse;
}

.marquees .marquees-text {
  white-space: nowrap;
  margin-right: 50px; /* 텍스트 간 여백 */
  color: var(--bs-dark);
width: auto;
 padding: 0 5rem;
}

.marquees1 .marquees-text { padding: 0 10rem;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: var(--bs-dark); color: var(--bs-white);}
.marquees2 .marquees-text { padding: 0 12rem;}
.marquees3 .marquees-text { padding: 0 18rem;}
.marquees4 .marquees-text { padding: 0 8rem;}

@media screen and (max-width:767px){
    .marquees1 .marquees-text { padding: 0 0rem; }
    .marquees2 .marquees-text { padding: 0 6rem;}
    .marquees3 .marquees-text { padding: 0 8rem;}
    .marquees4 .marquees-text { padding: 0 4rem;}
}

/* 메인 포트폴리오 */

.main-portfolio .container{flex-direction: column; justify-content: center;}

/* .mainPortfolio {} */


.portfolioArea {
    position: relative;
    overflow: visible;
    width: 100%;
    padding-top: 80px;
}
.mainPortfolio {display: flex; align-items: flex-start; }
.mainPortfolio .scroll-box {width: 100%; /* overflow-x: auto; */ white-space: nowrap; /* padding: 130px calc(16vw - 4px); */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none;  box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; padding-bottom: 0;}
.mainPortfoliot .scroll-box::-webkit-scrollbar { display: none; }
.mainPortfolio-list {transition: all .3s linear; display: inline-flex; flex-wrap: nowrap;}
.mainPortfolio-list li { margin-right: 35px;  white-space: normal;}
.mainPortfolio-list li a {width: 100%; height: 100%; display: block; white-space: nowrap;/*  position: relative; */}
/* .mainPortfolio-list li a:hover::after {content: ""; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.4); width: 100%; height: 100%;} */

.mainPortfolio-list .portfolio-box {width: 200px; height: fit-content; max-height: 300px; overflow: hidden; box-sizing: border-box; border-radius:15px;;}


.mainPortfolio-list .portfolio-box .title {width: 100%; height: auto; position: absolute; top: -80px; left: 70px;}

.mainPortfolio-inner {display: flex; flex-direction: column; justify-content: space-between; height: 100%; word-break: keep-all; position: relative; margin-top: 70px;}
.portfolio-inner {position: relative;}
.portfolio-inner::after {content: ""; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.04); width: 100%; height: 100%;}
.portfolio-inner:hover:after {background-color: rgba(0,0,0,0.5);}
.portfolio-inner img {width: 100%; height: auto; white-space: nowrap; }


/* .listArea a {pointer-events: auto;} */

.portfolioArea .listArea {display: flex;}
.portfolioArea .listArea .portfolio-link{ display: none;}
.portfolioArea .listArea .portfolio-link a {align-content: center;}
.portfolioArea .listArea:last-child {margin-right: 0;}
.portfolioArea .listArea:last-child .portfolio-link {display: flex; margin-left: 120px; height: 140px; height: auto; align-items: center; margin-bottom: 100px;}


/* @media screen and (min-width:1921px) {
    .mainPortfolio .scroll-box {padding: 130px calc(21vw - 4px);}
}
@media screen and (max-width:1399px) {
        .mainPortfolio .scroll-box {padding: 80px 20px;}

} */


/* 홈페이지의 포트폴리오 */

.portfolioArea02 {
    position: relative;
     overflow-x: hidden; /* 스크롤 영역 초과 방지 */
    /* pointer-events: auto; */
}
.portfolioArea02 .scroll-box {
    display: flex;
    overflow-x: auto; /* Horizontal scrolling */
    overflow-y: hidden; /* Disable vertical scroll */
    white-space: nowrap;
}
.portfolioArea02 .listArea a {/* pointer-events: auto; */
    position: relative;
    z-index: 10;}
.portfolioArea02 .mainPortfolio {display: flex; align-items: center; }
.portfolioArea02 .mainPortfolio .scroll-box {width: 100%; overflow-x: auto; white-space: nowrap; padding: 130px 0; padding-right: 200%; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none;  box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; padding-bottom: 0;}
.portfolioArea02 .mainPortfoliot .scroll-box::-webkit-scrollbar { display: none; }
.portfolioArea02 .mainPortfolio-list {transition: all .3s linear; display: inline-flex; flex-wrap: nowrap;}
.portfolioArea02 .mainPortfolio-list li { margin-right: 20px;  white-space: normal;}
.portfolioArea02 .mainPortfolio-list li a {width: 100%; height: 100%; display: block; white-space: nowrap;/*  position: relative; */}
/* .mainPortfolio-list li a:hover::after {content: ""; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.4); width: 100%; height: 100%;} */

.portfolioArea02 .mainPortfolio-list .portfolio-box {width: 300px; height: fit-content; max-height: 510px; overflow: hidden; box-sizing: border-box; border-radius:15px;;}

.portfolioArea02 .mainPortfolio-list .portfolio-box .title {width: 100%; height: auto; position: absolute; top: -80px; left: 70px;}

.portfolioArea02 .mainPortfolio-inner {display: flex; flex-direction: column; justify-content: space-between; height: 100%; word-break: keep-all; position: relative; margin-top: 70px;}
.portfolioArea02 .portfolio-inner {position: relative;}
.portfolioArea02 .portfolio-inner::after {content: ""; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.04); width: 100%; height: 100%;}
.portfolioArea02 .portfolio-inner:hover:after {background-color: rgba(0,0,0,0.5);}
.portfolioArea02 .portfolio-inner img {width: 100%; height: auto; white-space: nowrap; }

.portfolioArea02 .listArea {position: relative;
    z-index: 10; will-change: transform;}
.portfolioArea02 .listArea a {pointer-events: auto; position: relative;
    z-index: 20;}

.portfolioArea02 .listArea {display: flex;pointer-events: auto;position: relative;
   }
/* .portfolioArea02 .listArea img {width: 100%; height: auto;} */
.portfolioArea02 .listArea .portfolio-link{ display: none;}
.portfolioArea02 .listArea .portfolio-link a {align-content: center;}
.portfolioArea02 .listArea:last-child {margin-right: 0;}
.portfolioArea02 .listArea:last-child .portfolio-link {display: flex; margin-left: 120px; height: 140px; height: auto; align-items: center; margin-bottom: 100px;}





@media screen and (min-width:1921px) {
    .portfolioArea02 .mainPortfolio .scroll-box {padding: 130px calc(21vw - 4px);}
}
@media screen and (max-width:1399px) {
    .portfolioArea02 .mainPortfolio .scroll-box {padding: 80px 20px;}

}


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

.portfolioArea02 .mainPortfolio .scroll-box {padding: 80px 0; padding-bottom: 0;}
.portfolioArea02 .mainPortfolio-list .portfolio-box  {width: 100%; max-height: 100%;}
.portfolioArea02 .mainPortfolio-list li {margin-right: 0; width: 100%;}
/* .portfolioArea02 .listArea:last-child .portfolio-link {margin-left: 50px !important;} */

.portfolioArea02 .mainPortfolio-list{display: flex; flex-wrap: wrap; gap: 30px;}
.portfolioArea02 .listArea:last-child .portfolio-link {margin-bottom: 0;}

}







@media screen and (max-width:767px) {
.mainPortfolio-list .portfolio-box  {width: 320px; max-height: 530px;}
.mainPortfolio-list li {margin-right: 20px;}
/* .portfolioArea  {padding-top: 30px;} */
}

/* 메인 뉴스 */
.main-news-section {height: auto; padding-bottom: 400px;}
.main-news-section .main-board-item {border-radius: 0;}
.main-news-link {min-height: 140px; display: flex; align-items: center; justify-content: flex-start; position: relative;}
.main-news-link a {padding-left: 70px; position: relative;}
.main-news-link a::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 140px; height: 140px; border-radius: 50%; background-color: var(--bs-primary);z-index: -1;}
.main-news-link a:hover::before {top: 50%; transform: translateY(-50%) scale(0.7); transition: all 0.3s linear;}
.main-news-link a:hover {text-decoration: underline;}


.main-news li .tt{ color: var(--bs-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: calc(100% - 50px); vertical-align: middle;}


@media screen and (max-width:767px) {
    .main-news-section {height: auto; padding-bottom: 100px;}
    /* .main-news-link {min-height: auto;}
    .main-news-link a::before {width: 30px; height: 30px;}
    .main-news-link a {padding-left: 40px;} */
 
}


/* 메인에 텍스트형 뉴스 연동 */
.main-news {flex-direction: column;}
.main-news li {width: 100%; display: flex; justify-content: space-between; margin-bottom: 0; padding-left: 0; padding-right: 0; width: auto; border-radius: 0;}
.main-news li:first-child {padding-top: 0;}
.main-news li h5 {width: calc(100% - 100px);}
.main-news li h5 img {vertical-align: text-top;}
.main-news li a {color: var(--bs-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: calc(100% - 100px); vertical-align: middle;}
.main-news li a:hover {text-decoration: underline; color: var(--bs-primary);}
.news-regist {color: var(--bs-gray-500); /* white-space: nowrap; margin-left: 0.5rem; */}


@media screen  and (max-width:767px){
    .main-news-section h2 br {display: none;}

    .main-news li h5 {width: 100%;}
    .main-news li a {min-width: calc(100% - 20px); font-size: 1.125rem;}
    .main-board-item {padding: 10px;}
    .main-title-area .content-area {padding-top: 60px; margin-top: 30px;}
    

}







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

.up {text-transform: uppercase;}

/* 서브페이지 타이틀 */
.sbupageTitle {width: 100%; height: 770px; display: flex; align-items: center; justify-content: center; transition: height 0.5s ease-out;}
.sbupageTitle .container {display: flex; align-items: center; justify-content: center;  }



/* .sbupageTitle .title-area {position: relative; max-height: 70px; overflow: hidden;}
.sbupageTitle .title-area h1{position: absolute;  top: 50px; text-align: center; left: 50%; transform: translateX(-50%); white-space: nowrap; animation: tltleArea 3s ease forwards;}
 */
@media screen and (max-width:1440px) {
    /* .sbupageTitle .title-area h1.letter-spacing {letter-spacing: -6px;} */
}

.top-title-area {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden; /* Hide overflowing content */
    display: flex;
    align-items: center;
    justify-content: center;

}


.title-mask {
    position: relative;
    width: 100%;
    height: 100%;

}


.top-title-area .title:first-child {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    animation: moveOut 2s ease forwards;
}

.top-title-area h1 {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 1; 
    animation: moveIn 2s ease forwards; 
}

.top-title-area .hidden-box {width: 100%; height: 180px; background-color: var(--bs-white); position: absolute; top:280px; left: 50%; transform: translateX(-50%); animation: titleBox 2s ease forwards; }


@keyframes moveOut {
    0% {
        top: -80px;
        opacity: 1;
    }
    25% {
        top: -80px;
        opacity: 1;
    }
    50% {
        top: -300px;
        opacity: 1;
    }

    100% {

        top: -300px;

    }
}


@keyframes moveIn {
    0% {
        top: 120px; 
        opacity: 1;
    }
    25% {
        top: 120px; 
        opacity: 1;
    }
    50% {
        top: -300px; 
        opacity: 1;
    }
    74% {
        top: -300px;
        opacity: 0;
    }
    75% {
        top: 300px;
        opacity: 0;
    }
    100% {
        top: 0px; 
        opacity: 1;
    }
}


@keyframes titleBox {

0% {
    top: 280px;
}
50% {
    top: 280px;
}
100%{
    top: 115px;

}

}


@media screen and (max-width:1399px) {
    .top-title-area {height: 130px;}

    .top-title-area .title:first-child {top: -40px;}
    .top-title-area h1 {top: 0px; }
    .top-title-area .hidden-box {
        top: 140px;
    }

    @keyframes moveOut {
        0% {
            top: -40px;
            opacity: 1;
        }
        25% {
            top: -40px;
            opacity: 1;
        }
        50% {
            top: -150px;
            opacity: 1;
        }

        100% {

            top: -150px;

        }
    }

    @keyframes moveIn {
        0% {
            top: 60px; 
            opacity: 1;
        }
        25% {
            top: 60px; 
            opacity: 1;
        }
        50% {
            top: -150px; 
            opacity: 1;
        }
        74% {
            top: -150px;
            opacity: 0;
        }
        75% {
            top: 150px;
            opacity: 0;
        }
        100% {
            top: 0px; 
            opacity: 1;
        }
    }


    @keyframes titleBox {

        0% {
            top: 140px;
        }
        50% {
            top: 140px;
        }
        100%{
            top: 60px;

        }

    }




}



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

    .top-title-area {height: 110px;}
    
    @keyframes titleBox {

        0% {
            top: 140px;
        }
        50% {
            top: 140px;
        }
        100%{
            top: 50px;

        }

    }
}
@media screen and (max-width:767px) {
    .top-title-area .title:first-child {animation: none; display: none;}
    .top-title-areaa h1 {animation: none; }
    .top-title-area .hidden-box {animation: none;}
    .top-title-area {height: 20vw;}
}


/* @keyframes tltleArea {
    from {
        top: 50%;
    }
    to {
        top: 0;
    }
} */



/* .sbupageTitle .title-area .hidden-box {width: 100%; height: 180px; background-color: var(--bs-white); position: absolute; top:62%; left: 50%; transform: translateX(-50%); animation: titlebag 3s ease forwards; display: none;}
.sbupageTitle .title-area .bag {opacity: 1; padding-top: 0;}
 */

/* @keyframes titlebag {

0% {
    opacity: 0;
}
50% {
    opacity: 0;
}
70% {
    opacity: 1;
}
100%{
    opacity: 1;
}

} */



/* 백업 */
/* .sbupageTitle {width: 100%; height: 770px; display: flex; align-items: center; justify-content: center; transition: height 0.5s ease-out;}
.sbupageTitle .container {display: flex; align-items: center; justify-content: center; }
.sbupageTitle .title-area {position: relative;}
.sbupageTitle .title-area h1{position: absolute;  top: 0%; text-align: center; left: 50%; transform: translateX(-50%); white-space: nowrap; animation: titleAreaSequence 3s ease forwards;} */



/* @keyframes tltleArea {
    from {
        top: 50%;
    }
    to {
        top: 0;
    }
} */


/* @keyframes titleAreaSequence {
    0% {
        top:50%; 
        opacity: 0; 
    }
    30% {
        top: 0%; 
        opacity: 1; 
    }
    60% {
        top: -20%; 
        opacity: 0; 
    }
    70% {
        top: 50%; 
        opacity: 0; 
    }
    100% {
        top: 0; 
        opacity: 1; 
    }
} */

/* .sbupageTitle .title-area .hidden-box {width: 100%; height: 180px; background-color: var(--bs-white); position: absolute; top:62%; left: 50%; transform: translateX(-50%); animation: titlebag 3s ease forwards;}
.sbupageTitle .title-area .bag {opacity: 0; } */


/* @keyframes titlebag {

0% {
    opacity: 0;
}
50% {
    opacity: 0;
}
70% {
    opacity: 1;
}
100%{
    opacity: 1;
}

} */


/* @media screen and (max-width:1199px) {
    .sbupageTitle {height: 400px;}
    .sbupageTitle .title-area .hidden-box {height: 100px;}
}

@media screen and (max-width:767px) {
    .sbupageTitle {height: 300px;}
    .sbupageTitle .title-area .hidden-box {height:80px;}
}  */

/* 백업끝 */


/* 공통사항 */
.subpage-section {line-height: 1.3;padding-bottom: 400px;}
.section-content {padding-top: 400px; padding-bottom: 400px;}
.section-content-header {margin-bottom: 100px;}
.section-content-header strong {display: block; margin-bottom: 0.5rem;}

.mt-100 {margin-top: 100px;}
.mb-100 {margin-bottom: 100px;}
.mt-80 {margin-top: 80px;}
.mb-80 {margin-bottom: 80px;}

.mt-150 {margin-top: 150px;}
.mb-150 {margin-bottom: 150px;}

.pb-150 {padding-bottom: 150px;}


.pt-290 {padding-top: 290px;}

@media screen and (max-width:1199px) {
    .section-content {padding-top: 150px; padding-bottom: 150px;}
    .section-content-header {margin-bottom: 30px;} 
    .mt-100 {margin-top: 30px;}
    .mb-100 {margin-bottom: 30px;}
    .mt-80 {margin-top: 50px;}
    .mb-80 {margin-bottom: 50px;}
    .mt-150 {margin-top: 80px;}
    .mb-150 {margin-bottom: 80px;}
    .pt-290 {padding-top: 100px;}
    .subpage-section {padding-bottom: 150px;}
}




/* Homepage */
.home-section {overflow: hidden;}
.top-video-wrap { max-height: 900px; overflow: hidden; }
.top-video{position:relative; height:0; padding-bottom:56.25%;margin-top: -6%;}
.top-video video {position:absolute; top:0; left:0; width:100%; height:100%;}


@media screen and (max-width:1199px) {
    .top-video-wrap  {max-height: max-content; overflow: inherit;}
    .top-video {margin-top: auto;}
}

.top-video .text-area { position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 100%;}
.top-video .text-area  h2 {text-align: center; color: var(--bs-white); width: 100%;}

.content-text {display: flex; justify-content: space-between; align-items: flex-start;  gap: 30px; flex-wrap: wrap;}
.content-text img {margin-bottom: 20px;}




.support_benefits {color: var(--bs-white); display: flex; flex-wrap: wrap;}
.support_benefits li {width: 20%; min-height: 200px; border-right:1px solid rgba(255, 255, 255, 0.15); padding-left: 30px; padding-right: 30px;}

.support_benefits li:nth-child(1) {border-bottom:1px solid rgba(255, 255, 255, 0.15);}
.support_benefits li:nth-child(2) {border-bottom:1px solid rgba(255, 255, 255, 0.15);}
.support_benefits li:nth-child(3) {border-bottom:1px solid rgba(255, 255, 255, 0.15);}
.support_benefits li:nth-child(4) {border-bottom:1px solid rgba(255, 255, 255, 0.15);}
.support_benefits li:nth-child(5) {border-right: none;border-bottom:1px solid rgba(255, 255, 255, 0.15);}
.support_benefits li:nth-child(6) {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding-top: 60px;}
.support_benefits li:nth-child(7) {padding-top: 60px;}
.support_benefits li:nth-child(8)  {padding-top: 60px;display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}
.support_benefits li:nth-child(9) {padding-top: 60px;}
.support_benefits li:nth-child(10) {border-right: none;padding-top: 60px;}


.support_benefits .num {color: var(--bs-primary); font-size: 1.125rem; margin-bottom: 1rem;}
.support_benefits h3 {color: var(--bs-white);}
.section-content-02 {position: relative; overflow: hidden;}


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

    .support_benefits li {width: 25%;}
    .support_benefits li:nth-child(4) {border-right: 0;}
    /* .support_benefits li:nth-child(4) {} */
    .support_benefits li:nth-child(5){padding-top: 30px; border-right: 1px solid rgba(255, 255, 255, 0.15);}
    .support_benefits li:nth-child(6) , .support_benefits li:nth-child(7) , .support_benefits li:nth-child(8) , .support_benefits li:nth-child(9) , .support_benefits li:nth-child(10) {
        padding-top: 30px; justify-content: flex-start;
    }
    .support_benefits li:nth-child(6) , .support_benefits li:nth-child(7) , .support_benefits li:nth-child(8) {border-bottom: 1px solid rgba(255, 255, 255, 0.15);}
    .support_benefits li:nth-child(8) {border-right: 0;}
    .support_benefits li:nth-child(10) {border-right: 1px solid rgba(255, 255, 255, 0.15);}



}

@media screen and (max-width:991px) {
        .support_benefits li {width: 50%; min-height: auto;padding-bottom: 30px; padding-right: 20px; padding-right: 20px;}
        .support_benefits li:first-child {padding-top: 30px; }
        .support_benefits li:nth-child(2) {padding-top: 30px; }
        .support_benefits li:nth-child(3) , .support_benefits li:nth-child(4){padding-top: 30px; }
        .support_benefits li:nth-child(even){border-right: 0;}
        /* .support_benefits li:nth-child(even) {border-right: 1px solid  rgba(255, 255, 255, 0.15);} */
}

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

    /* .support_benefits h3 {font-size: 1.125rem !important;} */
}

@media screen and (max-width:575px) {
        /* .support_benefits li {width: 100%;} */
        
        /* .support_benefits li {padding-bottom: 30px; padding-top: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); border-right: 0 !important;} */
        /* .support_benefits li:first-child {padding-top: 0;} */
}



/* 모달 스타일 */
.modal-btn-01 {width: 30px; height: 30px; border-radius: 50%; background-color: transparent; border: 1px solid var(--bs-white); color: var(--bs-white); font-weight: 700; margin-top: 20px; font-size: 1.125rem;}
.modal-btn-01:hover {background-color: var(--bs-white); color: var(--bs-dark);}

.service-area button.modal-btn-02 {min-width: 120px; min-height: 36px; padding: 5px 20px; background-color: var(--bs-dark); border-radius: 30px; width: fit-content; color: var(--bs-white); display: flex; align-items: center; justify-content: center; color: var(--bs-white); border: 0;font-weight: 700;}
.service-area button.modal-btn-02:hover {color: var(--bs-white); background-color: var(--bs-primary);}

.link-btn {max-width: 120px; min-height: 38px; display: flex; align-items: center; justify-content: center;margin-top: 20px; border-radius: 30px; font-weight: 600; padding: 5px; box-sizing: border-box; background-color: var(--bs-white); color: var(--bs-dark);}
.link-btn:hover {background-color: var(--bs-primary); color: var(--bs-white);}



.modal-style-01 {background-color: rgba(0, 0, 0, 0.7); box-shadow: none; margin: 0; /* display: flex; align-items: center; justify-content: center; */}

.modal-style-01.show {display: flex !important; align-items: center; justify-content: center;}
.modal-style-01 .modal-dialog  {/* top: 50%; left: 50%; transform: translate(-50% , -50%) !important; */ margin-left: 0%; margin-right: 0%;width: 100%; max-width: 850px; word-break: keep-all;}
.modal-style-01 .modal-content{padding:45px 38px; border-radius: 20px;}

.btn-close:focus {box-shadow: none;}
/* .modal-style-01 .modal-header {} */
.modal-style-01 .btn-close {font-size: 35px; background: none; opacity: 1; position: absolute; right:30px; top: 30px; }
.modal-style-01 .btn-close .bi-x-lg::before {color: var(--bs-dark); font-weight: 500 !important;}

.modal-style-01 .modal-header {padding: 0; border: 0;}
.modal-style-01 .modal-body {border: 0; padding: 0;}
.modal-style-01 .modal-footer {border: 0; padding: 0; display: block; padding-top: 40px;}

.modal-style-01 .img-area {display: flex;}

.modal-style-01 .modal-con >div {display: flex;}
.modal-style-01 .modal-con .icon-area {min-width:45px;}
.modal-style-01 .modal-con .icon-area .icon-01 {width: 24px; height: auto;}
.modal-style-01 .modal-con .icon-area .icon-02 {width: 28px; height: auto;}
.modal-style-01 .modal-con .icon-area .icon-03 {width: 28px; height: auto;}
.modal-style-01 .modal-con .icon-area .icon-04 {width: 28px; height: auto;}

.modal-style-01 .modal-con {display: flex; flex-wrap: wrap;}
.modal-style-01 .modal-con>div {width: 50%;}
.modal-style-01 .modal-con>div:nth-child(1){padding-bottom: 20px; padding-right: 30px; border-bottom: 1px solid var(--bs-gray-300); border-right: 1px solid var(--bs-gray-300);}
.modal-style-01 .modal-con>div:nth-child(2){padding-bottom: 20px; padding-left: 30px;border-bottom: 1px solid var(--bs-gray-300);}
.modal-style-01 .modal-con>div:nth-child(3){padding-top: 20px; padding-right: 30px;border-right: 1px solid var(--bs-gray-300);}
.modal-style-01 .modal-con>div:nth-child(4){padding-top: 20px; padding-left: 30px;}

.modal-style-01 .modal-con p  {font-size: 1rem;}



/* 무한 루프 텍스트 */
.loop-container {position: absolute; bottom: -40px; color: #1c1c1c; font-weight: 800; height: fit-content;}
.loop-container-02 {bottom: auto; top: -60px;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgba(255, 255, 255, 0.3); color:  #000000;;}


@media screen and (max-width:1399px) {
    .loop-container {bottom: -10px;}
    .loop-container-02 {top: -10px;}
}
@media screen and (max-width:991px) {
    .modal-style-01 .img-area img {width: 50%;}

    .modal-style-01 .modal-content{max-height: 600px; overflow-y: scroll;    width: calc(100% - 8%);margin-right: 4%; margin-left: 4%;}
}
@media screen and (max-width:767px) {
    .modal-style-01 .img-area {flex-wrap: wrap;}
    .modal-style-01 .img-area img {width: 100%;}
    .modal-style-01 .modal-con>div {width: 100%; border-right: 0 !important; border-bottom: 1px solid var(--bs-gray-300);padding-left: 0 !important; padding-top: 30px !important; padding-bottom: 30px;}
    .modal-style-01 .modal-con>div:first-child {padding-top: 0 !important;}
    .modal-style-01 .modal-con>div:last-child {border: 0;padding-bottom: 0 !important;}
    .modal-style-01 .btn-close {top: 10px; right: 10px;}
}


.home-portfolio .text-area { display: flex; justify-content: flex-end; width: 100%;}
.home-portfolio .text-area >div { max-width: 760px;}

.portfolioArea02 .text-area{ display: flex; justify-content: flex-end; width: 100%;}
.portfolioArea02 .text-area >div{ max-width: 760px;}


.portfolio-link {min-height: 140px; display: flex; align-items: center; justify-content: flex-start; position: relative;padding-right: 530px !important;}
.portfolio-link a {padding-left: 70px; position: relative;}
.portfolio-link a::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 140px; height: 140px; border-radius: 50%; background-color: var(--bs-primary);z-index: -1;}
.portfolio-link a:hover::before {top: 50%; transform: translateY(-50%) scale(0.7); transition: all 0.3s linear;}
.portfolio-link a:hover {text-decoration: underline;}


.loop-box {position: relative; min-height: 125px;}
.loop-box .loop-container {top: 0; }
.loop-box .item  ul {display: flex;}
.loop-box .item li {width: 290px; padding: 35px; font-size: 20px; border-radius: 20px; border: 1px solid var(--bs-dark); margin-right: 1rem;}

.loop-box-02 {margin-top: 20px;}
.loop-box-02 .item li {background-color: var(--bs-dark); color: var(--bs-white);}


/* 
@media screen and (max-width:1919px){
    .portfolio-link {padding-right: 550px !important;}
}
 */

/* service */
.top-video-02 {margin-top: -4%;}
.service-area ul{ display: flex; flex-wrap: wrap; width: calc(100% + 14px); margin-left: -7px; margin-right: -7px; margin-bottom: -14px;}
.service-area ul li {width: calc(25% - 14px); margin-left: 7px; margin-right: 7px; min-height: 320px; background-color: var(--bs-white); padding: 50px 40px; box-sizing: border-box; border-radius: 1rem; display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 14px;}

.service-area .icon-area {min-height: 38px; display: flex; align-items: center; margin-bottom: 1rem;}
.service-area .icon-area img {height: 38px; width: auto;}

.service-area .icon-area .icon-02 {height: 32px;}
.service-area .icon-area .icon-03 {height: 36px;}
.service-area .icon-area .icon-05 {height: 36px;}
.service-area .icon-area .icon-06 {height: 35px;}
.service-area .icon-area .icon-07 {height: 32px;}
.service-area .icon-area .icon-08 {height: 30px;}


.service-link-btn {display: flex; color: var(--bs-dark); font-weight: 700; /* gap: 4px; */ position: relative; width: fit-content;}
.service-link-btn>div:first-child {padding-right: 4px;}

.service-link-btn:hover .hover {align-content: center;  position: absolute; width: 50px; text-align: center; z-index: 9;height: 50px; left: 32px; top: 50%; transform: translateY(-50%); color: var(--bs-white);} 
.service-link-btn:hover .hover::after {content: ""; position: absolute; width: 50px; height: 50px;  border-radius: 50%; background-color: var(--bs-primary);  z-index: -1; left: 0; top: 0;}

.service-link-btn-02 {min-width: 120px; min-height: 36px; padding: 5px 20px; background-color: var(--bs-dark); border-radius: 30px; width: fit-content; color: var(--bs-white); display: flex; align-items: center; justify-content: center;}
.service-link-btn-02:hover {color: var(--bs-white); background-color: var(--bs-primary);}


.service-area button {border: 1px solid var(--bs-gray-600); color: var(--bs-gray-600);}
.service-area button:hover {color: var(--bs-white); background-color: var(--bs-gray-600);}

@media screen  and (max-width:1199px) {
    .service-area ul li {width: calc(50% - 14px);}
}
@media screen  and (max-width:767px) {
    .service-area ul li {width: calc(100% - 14px);}
}





/* 20241226 CI/BI, 명함, 대소봉투 가격표 모달 추가 */

.ci-btn-area {display: flex; align-items: center; gap: 1rem;}

/* CI/BI */
.ciModal .modal-dialog {max-width: 1250px;}
.ciModal .modal-content { min-height: 782px;}
.modal-tab {position: relative; width: 100%;}
.modal-tab::after {content: ""; position: absolute; left: 50%; bottom: 0; width: calc(100% + 76px); height: 1px; background-color: var(--bs-dark); transform: translateX(-50%);}

.modal-tab .nav-link {padding: 0; padding-bottom: 10px; font-size: 22px; color: var(--bs-gray-500); font-weight: 700;}
.modal-tab .nav-item:not(:last-child) .nav-link {margin-right: 35px;}
.modal-tab .nav-link.active{ background-color: transparent; color: var(--bs-dark); position: relative;}

.modal-tab .nav-link.active::after {content: ""; width: 100%; height: 3px; background-color: var(--bs-dark); position: absolute; left: 0; bottom:0;}

#modal-tab-con {padding-top: 40px;}
.tab-con-style {display: flex; gap: 30px;}
.tab-con-style .con-box {width: 25%;}

.tab-con-style .con-box strong {font-size: 20px; font-weight: bold; padding-bottom: 15px; border-bottom: 2px solid var(--bs-dark); display: block; color: var(--bs-dark); display: flex; align-items: center; gap: 5px;}
.tab-con-style .con-box strong img {width: 30px; height: auto;}

.tab-con-style .con-box ul li {display: flex; padding: 20px 0; border-bottom: 1px solid var(--bs-gray-300); color: var(--bs-dark); font-weight: 400;}

.tab-con-style-01 .con-box ul li:first-child {min-height: 132px;}
.tab-con-style .con-box ul li div:first-child {min-width: 70px; font-weight: 500; color: var(--bs-gray);}
.tab-con-style .con-box ul li .small {color: var(--bs-gray);}
.vat {text-align: right; margin-top: 1rem; font-size: 0.875rem; color: var(--bs-gray);}

@media screen and (max-width:1080px){
    .ciModal .modal-content {max-height: 600px; overflow-y: scroll; width: calc(100% - 8%); margin-right: 4%; margin-left: 4%; min-height: auto;}
    .tab-con-style  {flex-wrap: wrap;}
    .tab-con-style .con-box {width: 100%;;}
    .tab-con-style-01 .con-box ul li:first-child {min-height: auto;}
}

@media screen and (max-width:767px){
.modal-tab .nav-link {font-size: 20px;}
.modal-tab .nav-item:not(:last-child) .nav-link {margin-right: 15px;}
}

/* 명함 */
.tab-con-style-02 {gap: 20px;}
.tab-con-style-02 .con-box {width: 33.333%;}
.tab-con-style-02 .con-box strong {border-bottom: 0;}

@media screen and (max-width:1080px) {
    .tab-con-style-02 .con-box {width: 100%;}
    .tab-con-style-02 .img-area img {width: 100%;}
}

/* 대소봉투 */
.tab-con-style-03 .con-box{width: 50%;}

@media screen and (max-width:1080px) {
    .tab-con-style-03 .con-box{width: 100%;}
}


















/* Customer */

.customer_snb {position: static;}
.customer_snb .nav-item:not(:last-child) {margin-right: 25px !important;}
.customer_snb .nav-item .nav-link {letter-spacing: -1px;}
.customer-list-top {display: flex; justify-content: space-between; align-items: center;}
.select-style {/* font-size: 1.125rem; */ border: 0; border-bottom: 2px solid var(--bs-dark); border-radius: 0; padding: 0; padding-bottom: 25px; background-position: top 5px  right;  background-size: 1rem; min-width: 180px; font-weight: 700; color: var(--bs-dark);}
.select-style:focus {box-shadow: none;}

.customer_snb .nav-item .nav-link.active02 {color: var(--bs-dark);}


@media screen and (max-width:1440px) {
    .customer_snb {flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; margin-left: 20px !important; margin-right: 20px !important;width: calc(100% - 40px);}
    /* .customer_snb {flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; width: calc(100% - 8%); margin-left: 4% !important; margin-right: 4% !important;} */
    .customer_snb .nav-item .nav-link {white-space: nowrap;}
}

@media screen and (max-width:1199px) {
        .customer_snb {flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; width: calc(100% - 8%); margin-left: 4% !important; margin-right: 4% !important;border-bottom: 1px solid var(--bs-dark); padding-bottom: 0;}
        .customer_snb::before {display: none;}
}


@media screen and (max-width:767px) {
    
    .customer-list-top {flex-direction: column; align-items: flex-end;}
    .select-style {width: 100%; margin-top: 30px; margin-left: auto; margin-right: 0;}
}

/* 테이블 스타일 */
.table-style-01 {border-top: 2px solid var(--bs-dark);}
.table-style-01 tr td {padding: 30px;}
.table-style-01 tr:hover {--bs-table-accent-bg: transparent !important;color: inherit; background: transparent !important;}
.table-hover>tbody>tr:hover>* {--bs-table-accent-bg: transparent !important; color: inherit;}
.table-style-01 tr:hover .con-01 {color: var(--bs-gray-500);}
.table-style-01 .con-01 {font-weight: 700; color: var(--bs-gray-500); font-size: 15px;}
.table-style-01 .con-01:hover {color: var(--bs-gray-500);}
.table-style-01 .con-02{font-size: 15px;}
.table-style-01 

.table-style-01 .con-02 {font-size: 15px;}
.table-style-01 .con-02 .icon-area {width: 18px; display: flex; align-items: center; justify-content: center;}
.customer-type {font-weight: 700; display: flex; align-items: center; gap:5px;}
.customer-type-01 {color: var(--bs-primary);}
.customer-type-02 {color: #33a2ff;}
.customer-type-03 {color: #7556f1;}
.customer-type-03 .customer-icon-03 {width: 16px;}
.customer-type-04 {color: #ff6382;}
.customer-type-04 .customer-icon-04 {width: 16px;}
.customer-type-05 {color: #ff6382;}
.customer-type-05 .customer-icon-05 {width: 14px;}
.customer-type-06 {color: #7556f1;}
.customer-type-06 .customer-icon-06 {width: 20px; margin-left: -2px;}
.customer-type-07 {color: #ffac27;}

.customer-icon {width: 18px; height: auto;}

.table-style-01 .con-03 {color: #888888;}

.table-style-01 tr:hover .con-03 {color: #888888;}
.table-style-01 .title {color: var(--bs-dark); font-size: 1.125rem; margin-bottom: 0.5rem; width: fit-content; margin-bottom: 0.5rem; display: flex;}
.table-style-01 .title:hover {color: var(--bs-primary);}
.table-style-01 .title .tt { width: auto;  max-width: max-content;font-weight: 700; max-width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* max-width: 500px; */ display: inline-block; vertical-align: middle;}


.table-style-01 .con-03 .info span:not(:last-child){padding-right: 0.875rem; margin-right: 0.875rem; position: relative;}

.table-style-01 .con-03 .info span:not(:last-child)::after {content: ""; width: 1px; height: 15px; background-color: #888888; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

.table-style-01 .con-04 { color: #888888;}

.table-style-01 tr:hover .con-04 { color: #888888;}

.progress-btn {width: fit-content; font-size: 0.875rem; min-width: 68px; min-height: 26px; padding: 2px 10px; display: flex; align-items: center; justify-content: center;color: var(--bs-white); border-radius: 5px;}
.progress-btn-01 {background-color: var(--bs-dark);}
.progress-btn-02 {background-color: #6c6c6c;}
.progress-btn-03 {background-color: #c69571;}
.progress-btn-04 {background-color: #7f5353;}
.progress-btn-05 {background-color: #b68787;}
.progress-btn-06 {background-color: var(--bs-primary);}
.progress-btn-07 {background-color: var(--bs-gray-500);overflow: visible;}

.table-style-01 .info {margin-top: 0.5rem;}

@media screen  and (max-width:1440px) {
/* .table-style-01 .title .tt { max-width: 500px;} */
}



@media screen  and (max-width:767px){
.table-style-01 tr {width: 100%;}

.table-style-01 .con-02 {display: none;}
.table-style-01 .con-04 {display: none;}
.table-style-01 .con-05 {display: none;}

.table-style-01 .con-01 {width: 8%;}
.table-style-01 .con-03 {width: 92%;}
/* .table-style-01 .title .tt {max-width: 280px;} */

.table-style-01 .title .tt {white-space: normal; display: inline;}
.table-style-01 .title {display: inline;}

}
@media screen  and (max-width:767px) {
.table-style-01 .title {width: 100%;}
/* .table-style-01 .title .tt {max-width: calc(100% - 50px);} */

}
@media screen  and (max-width:520px) {
/* .table-style-01 .title .tt {max-width: 150px;} */
}


/* 웹 호스팅 신청 */
.webhosting-area {display: flex; gap: 20px;}
.webhosting-area>div {display: flex; flex-direction: column; justify-content: space-between; min-height: 506px; border:  1px solid var(--bs-dark); width: 100%; padding: 80px; border-radius: 1rem;}

.webhosting-text {font-size: 1.125rem; color: var(--bs-dark); font-weight: 500; margin-bottom: 2rem}
.webhosting-text li:not(:last-child){margin-bottom: 5px;}

.link-btn-03 {font-size: 20px; min-width: 200px; min-height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 30px; font-weight: 700; max-width: fit-content;}
.link-btn-03:hover {background-color: var(--bs-primary); border-color: var(--bs-primary);}

/* 추천마크 넣기 */

.mark-area {position: relative; padding-right: 120px;}
.mark-box {position: absolute; right: 0; top: -25px;}
.mark-box span {color: var(--bs-white); position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%); font-size: 30px;}

@media screen and (max-width:991px){
    .webhosting-area {flex-direction: column;}
}

@media screen and (max-width:767px) {
    .webhosting-area>div {padding: 30px; min-height: auto;}
    .mark-area {padding-right: 70px;}
    .mark-box {width: 50px; top: -15px; right: -15px;}
    .mark-box img {width: 100%; height: auto;}
    .mark-box span {font-size: 1rem;}
}


/* QR코드 제작 */
.qrcoad-area {display: flex; justify-content: space-between;}
.qrcoad-area>div {width: calc(50% - 50px);}
.qrcoad-area>div .form-group {width: 100%;}
.qrcoad-area>div .form-group:first-child {padding-top: 0;}
.btn-qrcoad-dark {width: fit-content; min-width: 200px; min-height: 60px; background-color: var(--bs-dark); color: var(--bs-white); font-size: 20px; font-weight: 700; padding: 10px 20px; display: flex; align-items: center; justify-content: center; border-radius: 30px; margin-left: auto; margin-right: auto;border-color: var(--bs-dark);}
.btn-qrcoad-dark:hover {color: var(--bs-white); background-color: var(--bs-primary); border-color: var(--bs-primary); box-shadow: none; outline: 0; border: 0;}
.btn-qrcoad-gray {width: fit-content; min-width: 200px; min-height: 60px; background-color: var(--bs-gray-500); color: var(--bs-white); font-size: 20px; font-weight: 700; padding: 10px 20px; display: flex; align-items: center; justify-content: center; border-radius: 30px; }
.btn-qrcoad-gray:hover {color: var(--bs-white); background-color: var(--bs-gray-600);}

.qrcoad-area .form-select {border: none; font-size: 1.125rem; padding: 0;background-position: top 5px right;background-size: 1rem;}
.qrcoad-area .form-select:focus {box-shadow: none;}

.qr-box {border: 4px solid var(--bs-dark); min-height: 320px; display: flex; align-items: center; justify-content: center; padding: 30px;}

.qrcoad-area .btn-area {display: flex; justify-content: center; gap: 5px; align-items: center;}
.qrcoad-area .btn-area .btn-qrcoad-dark {margin: 0;}


@media screen and (max-width:991px) {
    .qrcoad-area {flex-direction: column;}
    .qrcoad-area>div {width: 100%;}
    .qrcoad-area>div:first-child {margin-bottom: 50px;}
}

@media screen and (max-width:767px) {
    .qrcoad-area .btn-area { flex-direction: column;}
}


/* 웨이투원 소개 */
.way-21-area {padding-top: 140px; padding-bottom: 140px;}
/* .way-top {} */
.way-bar {display: inline-block; width: 170px; height: 8px; background-color: var(--bs-dark);}
.title-21 {width: 100%; height: auto; position: relative; min-height: 410px;}

.way21-cover-area {position: absolute; left: 0; top: 0;}

@media screen  and (max-width:1440px){
    .title-21 {min-height: 28vw;}
}



.section-content-03 {padding-top: 150px; position: relative;}
.way-sub-tilte { border-bottom: 6px solid var(--bs-dark); width: fit-content; padding-bottom: 5px; font-weight: 800;}
/* .way-text {line-height: 1.5;} */
.way-text span {width: fit-content;}
.way-text span:not(:last-child) {margin-bottom: 10px;}
.way-text .bag-dark {color: var(--bs-white);}
.right-text {position: absolute; right: 0; top: 0; font-size: 1.125rem; top: 150px; font-weight: 600;writing-mode: vertical-lr; color: var(--bs-dark);}

@media screen and (max-width:1440px){
    .right-text {right: 20px}
}
@media screen and (max-width:767px) {
    .right-text {display: none;}
    .way-text {font-size: calc(1.25rem + 1.5vw);}
}

.way-year {white-space: nowrap; letter-spacing: -10px;}
.way-year {
    transform: translateX(100%); /* Start off-screen to the right */
    opacity: 0; /* Hidden initially */
    transition: transform 0.3s ease, opacity 0.3s ease; /* For a fallback animation */
}

@media screen and (min-width:1921px) {
    .way-year {font-size: 20.4vw;}

}
@media screen and (min-width:2561px) {
    .way-year {font-size: 18.2vw;}
}
@media screen and (min-width:3441px) {
    .way-year {font-size: 16.5vw;}
} 

.section-content-04 {overflow: visible;}


/* @media screen and (max-width:767px){
.way-year {letter-spacing: -5px;}
} */


.way-title-area {display: flex; justify-content: space-between; align-items: flex-start; margin-top: 200px;}
.way-title-area .title-area {width: 42%;}
.way-title-area .content-area {width: 58%; padding-top: 100px; border-top: 1px solid var(--bs-dark); margin-top: 60px;}

@media screen and (max-width:1199px) {
    .way-title-area {flex-direction: column;}
    .way-title-area .title-area {width: 100%;}
    .way-title-area .content-area {width: 100%; padding-top: 30px; margin-top: 30px;}
}

.tab-area {margin-top: 100px;}
.tabStyle01-area .nav-link {color: var(--bs-dark); font-weight: 700; max-width: 140px; font-size: 22px; border: 1px solid var(--bs-dark);border-radius: 30px; margin-bottom: 5px;}
.tabStyle01-area .nav-link.active {background-color: var(--bs-dark); }
#tabStyle01 {width: 42%;}
#tabStyle01Content {width: 58%;}

@media screen and (max-width:767px){
  .tabStyle01-area .nav-link {font-size: 20px;}
}

/* 아코디언 */

/* .accordion-type-01 {border: 0;} */
/* .accordion-type-01 strong{font-size: 48px;} */
.accordion-button {background-color: transparent !important; box-shadow: none; padding: 0; padding-bottom: 30px;}

.accordion-button::after {display: none;}
.bi-dash-lg {display: none;}
.bi-plus-lg {display: block;}

.accordion-button:not(.collapsed) .bi-dash-lg {display: block;}
.accordion-button:not(.collapsed) .bi-plus-lg{display: none;}



.accordion-button:not(.collapsed) {box-shadow: none;}
.accordion-button {display: flex; align-items: center; justify-content: space-between; border: 0 !important;}
.accordion-button:focus {box-shadow: none;}

.accordion-button .icon {font-size: 30px;}

.accordion-body {border: 0 !important; padding: 0;}
.accordion-item{border: 0 ;}

.accordion-content {font-size: 20px;}
.accordion-content li {padding: 30px 0; border-bottom: 1px solid var(--bs-gray-300);}
.accordion-content li:first-child {padding-top: 0;}
.accordion-content li:last-child {margin-bottom: 40px;}

@media screen  and (max-width:767px){
    .tab-area>div {flex-direction: column;}
    #tabStyle01 {width: 100%;flex-direction: row !important; gap: 5px; margin-bottom: 30px; overflow-x: auto; flex-wrap: nowrap;}
    #tabStyle01Content {width: 100%;}
    .accordion-content li {font-size: 1.125rem;}
}


/* 인증서 */
/* 기존 웨이투원꺼 가져옴 */


.certifi_list {max-height:320px; margin-top: 100px;}
.certifi_list dl {padding:0 8px;}
.certifi_list dl dt img {height:250px;}
.certifi_list dl dd {padding-top:15px;}
.certifi_list .slick-slide:nth-child(2n) dl dt img {height:180px;}
.certifi_list .slick-slide:nth-child(3n) dl dt img {height:160px;}
.certifi_list  dl dd {padding-top: 20px; font-size: 13px; text-align: center; color: var(--bs-dark);}
.certifi_list dl dt img {border: 1px solid var(--bs-gray-200);}



@media screen and (max-width: 767px) {
/*     .overlapping-img-area {
        padding: 30px 0;
    } */
    .certifi_list {margin-top: 50px;}
}

/* 어워드 */

.overlapping-wrap-02 .overlapping-img-area{padding-top: 100px;}

/* 오시는길 */
#mapLocation {padding-top: 200px; margin-top: 200px;}
.tab-area-02 .nav-link {min-width: 180px; font-size: 20px; padding: 12px;}

.tab-area-02 .title-area {margin-bottom:55px;}

#tabStyle02 {width: 42%;}
#tabStyle02Content {width: 58%;}

.map-01 {display: none;}
.map-02 {display: none;}
.map-01.active {display: block;}
.map-02.active {display: block;}

.tab-area-02 .tabStyle01-area {margin-bottom: 100px;}
.tab-area-02 .tab-pane {padding-top: 100px; border-top: 1px solid var(--bs-dark); margin-top: -120px;}

.map-content {color: var(--bs-dark);}
.map-content li {display: flex; gap: 5px;}
.map-content li:not(:last-child) {margin-bottom: 0.5rem;}
.map-content b{font-weight: 700;}
.map-content span {font-size: 20px; color: #777777;}

.map-area iframe {width: 1620px; height: 690px;}
.tab-area-02 {margin-top: 0;}


@media screen and (max-width:1919px){
    .map-area iframe {width: 100%;}
    #mapLocation  {margin-top: 0;padding-top: 150px;}
}


@media screen and (max-width:1199px) {
    .section-content-03 {padding-top: 0;}
}

@media screen and (max-width:767px){
#tabStyle02 {width: 100%;}
#tabStyle02Content {width: 100%;}
.tab-area-02 .tab-pane {margin-top: 0 ; border: 0; padding-top: 50px;}
.tab-area-02 .title-area {margin-bottom: 0;}

#tabStyle02{border-top: 1px solid var(--bs-dark); margin-top: 30px; padding-top: 30px; flex-direction: row !important; gap: 5px;}
.map-area iframe  {height: 400px;}

.tab-area-02 .nav-link {font-size: 1.125rem;min-width: 160px;}
.tab-area-02 .tabStyle01-area {margin-bottom: 50px;}
 
}


.top-video .text-area h2.video-text {border-bottom: 5px solid var(--bs-white); width: fit-content; margin-left: auto; margin-right: auto; padding-bottom: 5px; margin-bottom: 0; margin-top: 4%;}












/* 풋터 위의 흘러가는 텍스트 */
.overflow-x-hidden {overflow-x: hidden;}
.foot-loop {position: relative; min-height: 275px; background-color: var(--bs-dark); display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--bs-gray-800); overflow-x: hidden;}
.foot-loop .loop-wrap {height: 100%; position: relative;}
.foot-loop .loop-container { color: var(--bs-white); height: 100%; box-sizing: border-box; bottom: 0;}
.foot-loop .item {display: flex; align-items: center; top: 0; height: 100%;overflow-x: hidden;}


.loop-link {min-height: 140px; display: flex; align-items: center; justify-content: flex-start; position: relative;}
.loop-link .loop-link-btn {padding-left: 70px; position: relative; z-index: 9;}
.loop-link .loop-link-btn::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 140px; height: 140px; border-radius: 50%; background-color: var(--bs-primary); z-index: -1;}
.loop-link .loop-link-btn:hover::before {top: 50%; transform: translateY(-50%) scale(0.7); transition: all 0.3s linear;}
.loop-link  .loop-link-btn:hover {text-decoration: underline;}


@media screen and (max-width:1199px) {
    /* .foot-loop .loop-wrap {bottom: 20%; } */
}
@media screen and (max-width:767px) {
    .foot-loop {min-height: 30vw;}
    /* .foot-loop .loop-wrap {bottom: 0%; } */
    /* .foot-loop .item> .text {margin-top: 20px;} */
    .loop-link .loop-link-btn::before {width: 80px; height: 80px;}
    .loop-link .loop-link-btn {padding-left: 30px;}
}



/* ********************* */
/* ******* footer ****** */
/* ********************* */
.footer { color: var(--bs-gray-500); background-color: var(--bs-dark); font-size: 1rem; font-weight: 300; padding: 150px 0; overflow: hidden;}
.footer>div {display: flex; justify-content: space-between; gap: 1rem;}

.footer .container {position: relative;}
.footer .container-fluid {position: relative;}

.foot-logo {width: 220px; height: auto;}


.foot-link {font-size: 1rem; color: var(--bs-white);  display: inline-block; padding: 2px 0; font-weight: 600;}
.foot-item:not(:last-child) {margin-bottom: 1rem;}
.footer .kakao-alarm {padding: 2px 10px; border-radius: 30px; border: 1px solid var(--bs-gray-400); display: inline-block;color: var(--bs-gray-400); margin-left: 5px; font-size: 0.875rem; vertical-align: baseline;}
.foot-menu .kakao-img {width: 16px; height: auto;vertical-align: middle;}
.kakao-alarm:hover {background-color: #F7E600; color: var(--bs-dark); border-color: #F7E600;}
.kakao-alarm:hover .kakao-img {filter: invert(1);}

.modal-alarm .modal-dialog {max-width: 500px;}
.modal .kakao-alarm-area {display: flex; }
.modal .kakao-alarm-area .btn-primary {margin-left: 5px;}

.foot-link .bi-download {color: var(--bs-white); margin-left: 5px;}
.foot-link .bi-download::before {font-weight:  700 !important;}
.foot-link:hover .bi-download {color: var(--bs-primary);}

.foot-list {font-weight: 400; color: var(--bs-white); border: 0;}
.foot-list .tell {font-size: 30px; font-weight: 700;}
.foot-list .mail {color: var(--bs-gray-500); margin-bottom: 1.125rem;}
.foot-list .mail a {color: var(--bs-gray-500);}

.foot-list-area{display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;}
.foot-logo-box {display: flex; gap: 1.125rem; flex-wrap: wrap;}

.footer address {font-size: 0.875rem; margin-bottom: 1.125rem;}
.footer address>div:not(:last-child) {margin-bottom: 5px;}
.footer address span.dot {margin-left:4px; margin-right: 4px;}

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

.add-area {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;}
.copy-area {display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 1.125rem; flex-wrap: wrap;}
.copy-area .policy-link {margin-left: auto; margin-right: 0;}

.copy-area .bi-lock {color: var(--bs-gray-500);}
.copy-area .bi-lock:hover {color: var(--bs-primary);}


@media screen and (max-width:1399px) {
    /* .footer>div {flex-wrap: wrap; justify-content: flex-start; gap: 50px;} */
}


@media screen and (max-width:991px){
    .footer>div  {flex-direction: column;justify-content: flex-start;
        align-items: flex-start;/*  padding-top: 40px; */}
    .footer-link {font-size: calc(1rem + 1.5vw);}
    /* .kakao-alarm {font-size: 0.875rem;} */
}

@media screen and (max-width:991px) {
.footer .logo-wh {width: 100px;}
}

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

    .footer {padding: 80px 0;}
    .foot-logo {width: 100%; text-align: left; display: none;}
    .footer .logo-wh {width: 120px; margin: 0 auto; margin-bottom: 30px;}

    .foot-list-area {width: 100%; align-items: center;}
    .foot-menu {display: none;}
    .foot-list{font-size: calc(1rem + 1.5vw); text-align: left; width: 100%;}
    .foot-logo-box {justify-content: center; margin-top: 30px; display: none;}
    .foot-list strong {font-size: 1rem;}
    .foot-list>div span {display: block;}
    .foot-list>div span.bar {display: none;}
    .foot-list .mail {margin-top: 0.5rem; font-size: 1rem;}
    .add-area {margin-top: 30px; text-align: left; width: 100%; }
    .footer address {width: 100%;}
    .footer address span {display: block;margin-bottom: 5px;}
    .footer address span.dot {display: none;}
    .copy-area {justify-content: flex-start;  align-items: flex-start;}
    

}


/* ******************** */
/* ******* 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; flex-wrap: wrap; 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-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;}
}

@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; /* overflow-x: hidden; */}
.board-list>.row {margin-top: 48px;}
.board-list .subject {margin-top: 20px;}
.board-list .subject a {color: var(--bs-dark); font-size: 1.125rem;}

.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; margin-top: 50px;}
.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 (max-width: 767px) {
.comment-options,
.comment-cencel {position: relative; right: 0; top: 0;margin-top: 10px;}
}


@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;}
.board-form + .board-btns {justify-content: center;}

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


@media screen and (min-width: 576px) {
    .board-form .form-group {border-bottom: 1px solid #dddddd;}

    .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: 300px; 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);}

}


/* ************************* */
/* ********* 로그인 ******** */
/* ************************* */
@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(max-width:767px) {

    .join-area {display: block;}
    .join-area span {display: none;}
    .join-area .form-control {width: 100%;margin-bottom: 1rem;}
    .join-area .btn {border-radius: 0.5rem;border-top-left-radius:0.5rem !important;border-bottom-left-radius:0.5rem !important;}
}


/* 메인 게시판 연동 */

.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);}




/* 메인에 공지사항 갤러리카드형 연동 */
.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: .375rem .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;}


/* 카테고리 디자인 변경 */

.board-section {/* overflow: hidden; */ padding-bottom: 300px;}
.category-area  {position: sticky; padding-bottom: 30px; background-color: var(--bs-white); z-index: 2000; top: 110px;overflow-x: hidden;}
.category-area::before {content: ""; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 200%; background-color: var(--bs-dark); height: 1px;}
.category-area .nav-item {margin: 0;}
.category-area .nav-item:not(:last-child) {margin-right: 35px;}
.category-area .nav-item .nav-link {border: 0; font-size: 22px; font-weight: 700; color: var(--bs-gray-500); border-radius: 0; padding: 0; padding-bottom: 0.875rem; }

.board-category .nav-item .nav-link.active {background-color: transparent; color: var(--bs-dark); border-bottom: 3px solid var(--bs-dark); }
.board-category .nav-item .nav-link:hover { background-color: transparent; color: var(--bs-dark); border-bottom: 3px solid var(--bs-dark);}

/* @media screen and (max-width:1919px) {
    .category-area {overflow-x: hidden;}
} */



@media screen and (max-width:1199px) {
    .board-section {padding-bottom: 150px;}
    .category-area {padding-bottom: 0;}
    .category-area::before {bottom: 0;}

}

@media screen and (max-width:991px) {
    .category-area {top: 70px;}
}

@media screen and (max-width:767px){
    .category-area {flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; border-bottom: 1px solid var(--bs-dark); padding-bottom: 0; padding-left: 4%; padding-right: 4%;}
    .category-area::before {display: none;}
    .category-area .nav-item .nav-link{font-size: 1.125rem;}
}

.snb-list  {display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 1.125rem;
    font-weight: 500;
    overflow-x: auto;}

/* 포트폴리오 게시판 */

.portfolio-wrap {margin-bottom: -3rem; display: flex; flex-wrap: wrap; gap: 40px; width: calc(100% + 40px); margin-left: -20px; margin-right: -20px;}
.portfolio-wrap .subject {font-size: 1.125rem; font-weight: 500; color: var(--bs-dark); display: block; margin-top: 0; width: 100%;}
.portfolio-area .portfolio{max-height: 730px; overflow: hidden;/* position: relative; */}
/* .portfolio-area .portfolio::after {content: ""; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.04); width: 100%; height: 100%;} */
/* .portfolio-area .portfolio:hover:after {background-color: rgba(0,0,0,0.5);} */
.portfolio-wrap .portfolio-area {width: calc(25% - 40px); margin-left: 20px; margin-right: 20px;}

.subject-area {display: flex; gap: 5px; margin-top:20px; flex-direction: column; position: relative;}
.subject-area strong {font-weight: 600; display: inline-block; color: var(--bs-dark); font-size: 1.125rem;}
.subject-area p {font-size: 1rem; color: var(--bs-gray);}
.subject-area .Type {font-size: 1rem; color: var(--bs-gray);}
.portfolio-wrap .form-check-input[type=checkbox] {margin-top: 5px;}

/* .portfolio-area .portfolio:hover img {transform: scale(1.1);-webkit-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;} */
.portfolio-area .portfolio a {background-color: var(--bs-dark);}
.portfolio-area .portfolio img { opacity: 0.96;}
.portfolio-area .portfolio:hover img {background-color: var(--bs-dark); opacity: 0.5;/* transition: all 0.1s ease-in-out; */}
.portfolio-area .portfolio .portfolio-img {transition: all 0.5s;}
.portfolio-area .portfolio:hover .portfolio-img {transform: scale(1.1);}
.portfolio {position: relative;}
.portfolio-area .portfolio .portfolio-search-w {opacity: 0; width: 30px; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.5s; margin-top: 30px;}
.portfolio-area .portfolio:hover img.portfolio-search-w{opacity: 1; z-index: 5; opacity: 1;background-color: transparent;  margin-top: 0px;}


.portfolio-area > span {display: block; width: 100%; height: 300px; overflow: hidden; }
.portfolio-area .portfolio-img {width: 100%; height: 100%; object-fit: cover;}
.subject {position: relative;}
.icon_award {width: 55px; height: auto; position: absolute; right: 10px; top: -50px;}

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

.portfolio-area .portfolio {max-height: 500px;}
}

@media screen and (max-width:767px) {
    .portfolio-wrap {width: calc(100% + 20px); margin-left: -10px; margin-right: -10px;}
    .portfolio-wrap .portfolio-area {width: calc(50% - 20px);margin-left: 10px; margin-right: 10px;}
    .portfolio-area .portfolio {max-height: fit-content;}
    .portfolio- > span {height: auto; max-height: auto;}
    .portfolio-area .portfolio {max-height: 95vw}
    .icon_award {width: 30px; top: -30px;}
}






.hashtag {position:relative; padding-right:45px; margin-bottom:40px;}
.hashtag ul {height:50px; margin-top:-5px; overflow:hidden; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}
.hashtag ul li {float:left; height:40px; margin-right:5px; margin-top:5px;  box-sizing:border-box; line-height:40px;}
.hashtag ul li a {display:block; padding:0 22px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; font-size: 1.125rem; font-weight: 700; color: var(--bs-dark);border-radius: 30px;border:1px solid var(--bs-dark);}
.hashtag ul li a.active,
.hashtag ul li a:hover{background:#000; color:#fff;}
.hashtag .hash_BtnArea {position:absolute; top:5px; right:0;}
.hashtag .hash_BtnArea a.btn_port_more {display:block;}
.hashtag .hash_BtnArea a.btn_port_more .bi  {font-size: 30px;}
.hashtag .hash_BtnArea a.btn_port_more .bi::before {font-weight: 400 !important;}
.hashtag.active .hash_BtnArea a.btn_port_more {background-image:url('/images/common/btn/btn_more01_m.png');}
.hashtag.active ul {height:auto; padding-bottom: 0.5rem;}


/* 검색과 페이징 변경 */

.board-bottom {display: flex; justify-content: space-between; align-items: center; padding-top: 90px;}
.board-bottom .search-wrap .form-select[name="category"] {display: none;}
.board-bottom .pagination {margin-top: 0;}

.board-bottom .search-bar .form-control {padding-left: 0 !important;font-weight: 700;  }
.board-bottom .search-bar .form-control:focus {box-shadow: none;}
.board-bottom .search-bar .form-control::placeholder{font-weight: 700; color: var(--bs-gray-500);}
.board-bottom .fa-search {font-weight: 700;}

.page-link-c {border-radius: 50%; width: 50px; height: 50px;display: flex; align-items: center; justify-content: center; color: var(--bs-dark);}
.page-link-c:hover {color: var(--bs-dark) !important;}
.page-item-c.active .page-link-c {background-color: var(--bs-dark); color: var(--bs-white) !important; }


.paging_prev i , .paging_next i {margin-top: -5px;}
.page-item-c.mx-2 {margin: 0 !important;}
.page-item-c .paging_prev , .page-item-c .paging_next , .paging_next {background-color: #ededed; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; /* margin-left: 0.5rem !important; margin-right: 0.5rem !important; */}



.paging_prev2 , .paging_next2 {background-color: #ededed; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; margin-left: 0.5rem !important; margin-right: 0.5rem !important;}

.paging_prev2 i::before, .paging_next2 i::before {font-weight: 700 !important;}
.paging_prev2 {margin-right: 1.25rem !important;}
.paging_next2 {margin-left: 1.25rem !important;}


@media screen and (max-width:991px) {
    .board-bottom {flex-direction: column; gap: 2rem; padding-top: 80px;}
    .page-link-c {width: 35px; height: 35px;}
    .page-item-c .paging_prev , .page-item-c .paging_next , .paging_next{width: 35px; height: 35px;}

}


/* 게시판 커스텀 */
/* 수정/유지보수 (L.modify) */

.top-title {margin-top: 150px; margin-bottom: 80px;}
.new-board-form {border: 0; display: flex; flex-wrap: wrap; justify-content: space-between;}

.new-board-form .form-group {width: calc(50% - 4%); border-bottom: 2px solid var(--bs-dark); display: flex; padding-top: 25px; padding-bottom: 25px; margin-bottom: 1.5rem;}

.new-board-form .form-group .col-form-label {font-weight: 700; padding-left: 0; min-width: 100px; padding: 0; font-size: 1.125rem;}


.new-board-form .form-group .col-form-label-03 {white-space: nowrap;}

.new-board-form .form-group .form-control {padding: 0; width: 100%; font-size: 1.125rem; border: 0;border-radius: 0;}
.new-board-form .form-group .form-control::placeholder {font-size: 1.125rem;color: #aaaaaa;font-weight: 700;}


.new-board-form .form-group-02 {width: 100%;}

.form-control:focus{border-color:inherit; box-shadow: none;}
.new-board-form .form-group-area {width: calc(50% - 4%);margin-bottom: 1.5rem;}
.new-board-form .form-group-area .form-group {width: 100%; margin-bottom: 0.875rem;}

.info-colum {display: flex; align-items: flex-start;flex-direction: column; justify-content: center;}
.info-row {display: flex; }
.info-row .input-group{max-width: 90px; align-items: center;}

/* .new-board-form .spam-area .form-control {border: 1px solid var(--bs-gray-300); padding:0.5rem; border-radius: 0;} */

/* 파일 모양 바꾸기 */
.file-area .form-group>div {position: relative;}
.file-area .file-text {font-size: 1.125rem; color: #aaaaaa; font-weight: 700; position: absolute; left: 0; top: 0;}
.file-area input::file-selector-button {display: none;}
.file-area input {opacity: 0;}

.align-items-center {align-items: center;}
@media screen and (max-width:767px) {
    .top-title {margin-top: 80px; margin-bottom: 50px;}
    .new-board-form {flex-direction: column;}
    .new-board-form .form-group .col-form-label {margin-bottom: 1rem;}
    .new-board-form .form-group {width: 100%; flex-direction: column;}
    .new-board-form .form-group-area{width: 100%;}
/*     .new-board-form .form-group .col-form-label {font-size: 1rem;}
    .new-board-form .form-group .form-control {font-size: 1rem;} */
}


/* 개인정보처리방침 바꿔야 함. */
.board-privacy {display: flex; justify-content: space-between; align-items: center; background-color: #f1f1f1; padding: 30px 40px;}
.privacy-area {font-size: 1.125rem;}
.privacy-area .form-check-input {border-color: var(--bs-dark); font-size: 24px; margin-top: 0;}
.privacy-area .form-check-input:checked{border-color: var(--bs-dark);}
.privacy-btn {min-width: 120px; min-height: 35px; padding: 5px; border-radius: 30px; color: var(--bs-white); font-weight: 500; background-color: var(--bs-gray-600); border-color: transparent;}
.privacy-btn:hover {background-color: var(--bs-dark);}

@media screen  and (max-width:767px) {
    .board-privacy {flex-direction: column; gap: 0.5rem; padding: 30px;}
}

/* 폼의 버튼 바꾸기 */
.new-board-btns #okBtn {min-width: 275px; min-height: 80px; font-size: 22px; font-weight: 700; border-radius: 100px;}
.new-board-btns #ccBtn {min-width: 275px; min-height: 80px; font-size: 22px; font-weight: 700; border-radius: 100px;}
.new-board-btns {margin-top: 100px;}

@media screen  and (max-width:767px) {
    .new-board-btns {margin-top: 50px;}
    .new-board-btns #okBtn ,.new-board-btns #ccBtn {min-width: 160px; min-height:60px; font-size: 1.125rem; }
}


/* 웹호스팅 신청(CMS) 스킨 커스텀(L.webhosting)  */

.text-right {text-align: right;}

.top-info {border: 1px solid var(--bs-dark); border-radius: 1rem; padding: 45px 50px; display: flex; justify-content: space-between;}

@media screen and (max-width:767px){
    .top-info {flex-direction: column; padding: 40px;}
}
.form-check-input[type=checkbox] {border-radius: 4px; margin-top: 2px; /* font-size: 24px; */}
.form-check-input-02 {font-size: 24px; border-color: var(--bs-dark); margin-top: 0; margin-right: 5px;}
.form-check-input-02:checked[type=checkbox] { background-color: var(--bs-dark); border-color: var(--bs-dark);}
.form-check-input:checked[type=checkbox] {background-image: url("/images/sub/checkbox.svg"); background-size: 1rem; background-position: center center; border-radius: 4px;}

.new-board-form-02 {}

.new-board-form-02 .form-group .col-form-label {min-width: 205px; color: var(--bs-dark);}

.price-area {display: flex; align-items: center; justify-content: space-between; padding-right: 50px;}


@media screen and (max-width:767px){
    .price-area {flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-right: 0;}
}

.total-area {display: flex; justify-content: space-between;padding-right: 50px;}

.total-text {background-color: var(--bs-gray-100); border-radius: 10px; padding: 25px 20px;}
.total-text li{ display: flex;}
.total-text li span {margin-right: 4px;}

@media screen and (max-width:767px){
    .price-area {flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-right: 0;}
    .total-area {padding-right: 0;}
}

.new-board-form .form-group .col-form-label-02 {min-width: 120px;}

/* 웹호스팅&유지보수 신청(CMS) 스킨 커스텀(L.maintain)  */

.info-type-01 {display: flex; gap: 100px;}

@media screen and (max-width:767px){
    .info-type-01 {flex-direction: column; gap: 30px;}
    .new-board-form .form-group-03 {flex-direction: row;}
}


/* 도메인 신청 스킨 커스텀(L.domain) */

.domain-search-area { width: 100%; margin-bottom: 50px;}

.domain-search-box {display: flex; justify-content: space-between; width: 100%;}
.domain-search-box>div {width: calc(50% - 4%); font-size: 1.125rem;}
.domainSearch {width: 100%; border: 4px solid var(--bs-dark); padding:1rem 30px; font-size: 24px;}
.domainSearch .www {font-weight: 700; color: var(--bs-dark);}
.domainSearch input {width: calc(100% - 110px); border: 0;}

.domainSearch input:focus {border: none; box-shadow: none;}
.domainSearch input:focus-visible{border: none; box-shadow: none; outline: none;}
.domainSearch .fa-search:before {color: var(--bs-dark);}
.domainList {font-weight: 500; vertical-align: top; margin-top: 35px;}
.domainList label {min-width: 116px; margin-bottom: 15px;}
/* .domainList label {display: flex; align-items: center;} */
.btn_domain_search{font-size: 30px;}


.domain-search-box-02 {background-color: #fbfbfb;}
.domain-search-box-02>div{border: 1px solid var(--bs-gray-300); padding: 10px 22px; display: flex; justify-content: space-between; align-items: center;}
.domain-search-box-02>div:not(:first-child) {margin-top: -1px;}
.domain-search-box-02 .col-form-label{font-weight: 500;}
.form-check-input-02:disabled {background-color: #eeeeeeee; border-color: var(--bs-gray-400);}
.domain-info-btn {width: fit-content; min-width: 75px; min-height: 28px; padding: 4px 5px; background-color: var(--bs-gray-600); color: var(--bs-white); font-size: 0.875rem; border-radius: 30px; display: inline-block; text-align: center;}
.domain-info-btn:hover {background-color: var(--bs-dark); color: var(--bs-white);}
@media screen and (max-width:991px) {
    .domain-search-box {flex-direction: column; gap: 30px;}
    .domain-search-box>div {width: 100%;}
}
.question-area {display: flex; gap: 5px; align-items:center;}
.question_mark {min-width: 25px; height: 25px; background-color: var(--bs-primary); border-radius: 50%; display: flex; align-items: baseline; justify-content: center; color: var(--bs-white); font-size: 1.125rem;}

/* 문자 발신번호등록 스킨 커스텀(L.sms) */

.new-board-form .form-group .col-form-label-03 {min-width: 135px;}
.new-board-form .file-area-02 .form-group {margin-bottom: 24px;}
.smsmodal {position: relative;}
.sms-modal-btn-01 {min-width: 120px; min-height: 35px; padding: 5px; border-radius: 30px; color: var(--bs-white); font-weight: 500; background-color: var(--bs-gray-600); border-color: transparent; position: absolute; right: 0; top: -4px;}
.sms-modal-btn-01:hover {background-color: var(--bs-dark);}
.sms-text {color: var(--bs-dark);}
.sms-text li {display: flex; gap: 2px;padding-left: 10px; position: relative;}
.sms-text li span {white-space: nowrap;}
.sms-text li::before {width: 3px; height: 3px; background-color: var(--bs-dark); content: ""; position: absolute; left: 0; top: 8px;}
.sms-text li:not(:last-child) {margin-bottom: 4px;}


/* Project Request 스킨 커스텀(L.request) */
.request-warp {position: relative; overflow-x: clip;}
/* .top-title-02 {} */
.container-ani {position: relative;}
.top-ani {position: absolute; top: -50px; right: 0; font-size: 1.125rem; background-color: var(--bs-primary); color: var(--bs-white); text-align: center; font-weight: 700; width: 198px; height: 198px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 99;}
.top-ani:hover {color: var(--bs-white);}

.top-ani::before {content: ""; position: absolute; width: 198px; height: 198px; background-image: url("/images/sub/request-ani.png"); background-size: contain; animation-name: spin; animation-duration: 6000ms; animation-iteration-count: infinite; animation-timing-function: linear;}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}


@media screen and (max-width:767px) {
    .top-ani {top: -80px; width: 150px; height: 150px; font-size: 0.875rem; right: 4%;}
    .top-ani::before {width: 150px; height: 150px;}
}


/* .request-area {} */
.request-area-02 {width: 100%;}

.request-area-02 .request-check-03 {max-width: 605px;}
.request-check label {font-size: 1.125rem; color: var(--bs-dark); font-weight: 500; margin-bottom: 35px;}
.request-check label:not(:last-child){margin-right: 45px; }
.etc_label {display: flex;}
.etc_label .form-control {padding-right: 0; padding-left: 0; padding-top: 0; padding-bottom: 24px; border: 0; border-bottom: 2px solid var(--bs-dark); border-radius: 0; font-size: 1.125rem; max-width: 510px;}
.etc_label .form-control::placeholder {font-size: 1.125rem;color: #aaaaaa;font-weight: 700;}
.min-90 {min-width: 90px;}

.request-check-02 label {min-width: 216px; margin-right: 0 !important;}

.request-check-03 {display: flex; align-items: center; border-bottom: 2px solid var(--bs-dark); padding-bottom: 24px; min-width: 605px;}
.request-check-03 span {min-width: 100px;}
.request-check-03 .form-control {font-size: 1.125rem; padding: 0; border: 0;}

.request-check-03 .form-control::placeholder{font-size: 1.125rem;color: #aaaaaa;font-weight: 700;}

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

    .request-check-03 {min-width: max-content;}
    /* .request-check label {display: block;} */
    .etc_label .form-control {padding-top: 24px;}
    .request-check .p-767 {padding-top: 0;}
}




/* 서브페이지에서 스크롤 내리면 줄어드는 비주얼*/

.sbupageTitle.sbupageTitleActive {
    height: 270px; /* height: 100px; */ overflow: hidden;
}


/* #content {overflow-x: hidden;} */

/* .sbupageTitle.sbupageTitleActive02 { height: 200px;} */

/* #content {overflow-x: hidden; position: fixed;}

#content .sbupageTitle.active{min-height: 10px; padding-top: 0; padding-bottom: 120px; transition: height 0.5s ease, padding 1s ease; overflow: hidden;}
#content .sbupageTitle.active .title-area .hidden-box {top: 0;}

@media screen and (max-width:1199px) {
    #content .sbupageTitle.active{min-height: 10px; padding: 60px; transition: height 0.5s ease, padding 0.5s ease;}
    #content .sbupageTitle.active  {min-height: 400px; padding: 0;}
}


@media screen and (max-width:767px) {
    content .sbupageTitle.active  {min-height: 300px; }
}  */



/* 풀페이지로 정비 */

.footer-section {height:  auto !important; width: 100%;}

.portfolioArea-overflow { overflow-x: auto; overflow-y: hidden; width: calc(100% + 300px); margin-left:300px; white-space: nowrap; scroll-behavior: smooth; /* height: 100%; */ padding-bottom: 20px;}

.portfolioArea-overflow::-webkit-scrollbar {display: none;}
.portfolioArea-overflow::-webkit-scrollbar-thumb {background-color: var(--bs-primary);}


.portfolioArea-overflow .scrollable-element { display: flex; gap: 20px;}
.portfolioArea-overflow .box { min-width: 300px; height: 100%; max-height: 510px; /* border: 1px solid var(--bs-gray-300); */ border-radius: 15px; overflow: hidden;}
.portfolioArea-overflow .box img {width: 100%; height: auto;}
.portfolioArea-overflow .box:last-child {border: 0;}

.portfolio-link {min-width: 250px;}

.main-section-09{height: auto !important;}
.main-section-09 .fp-tableCell{height: auto !important;}

#fp-nav {display: none;}
@media screen and (max-width:1660px) {

    .main-title-area .content-area {padding-top: 30px; margin-top: 30px;}
}





/* 모바일 메인 디자인 다시 잡기 */
@media screen and (max-width:767px) {
    .header.isFixed {background-color: var(--bs-white);}
    #fullpage .main-section-02 , #fullpage .main-section-03 , #fullpage .main-section-04 , #fullpage .main-section-05 , #fullpage .main-section-06 , #fullpage .main-section-07 , #fullpage .main-section-08 {height: auto; padding: 100px 0;}
    #fullpage .main-section-03 , #fullpage .main-section-04 {padding-top: 0;}
    #fullpage .main-section-05  {padding-bottom: 0;}
    #fullpage .main-section-07 {padding-top: 0;}
    #fullpage .main-section-08 {padding-top: 0;}
    .overlapping-img-area {padding-bottom: 0;}

    .animated-title img {width: auto; max-height: 50px; margin-bottom: 0;}
    .animated-video {width: 100px; height: 50px;}


    .portfolioArea-overflow {width: 100%; margin-left: 0;overflow-x: scroll;}
    .portfolioArea-overflow .scrollable-element { gap: 30px;  width: max-content;}
    .portfolioArea-overflow .box {min-width: auto; width: 100%; max-height: 500px; width: 250px !important;}
    .portfolioArea  {padding-top: 50px;}
    .portfolio-link {margin-left: 0 !important; margin-right: 0 !important;min-height: auto; padding: 30px 0; padding-right: 0 !important; }
    .portfolio-link a {padding-left: 40px;}
    .portfolio-link a::before {width: 80px; height: 80px;}

    .main-news li {flex-direction: column;}
    .main-news-link {min-height: auto; padding-bottom: 30px;}
    .main-news-link a {padding-left: 40px;}
    .main-news-link a::before {width: 80px; height: 80px;}
}


/* 메인 첫 화면  */

/* .main-text-tt-01, .icon_scroll, .main-text-visual-01 {
    opacity: 0;                 
    transform: translateY(40px); 
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; 
}
.fade-up {
    opacity: 1;                
    transform: translateY(0);
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
 */

/* 풀페이지에 영향가는 비디오 다시재생 */
/* 비활성화된 섹션 숨기기 */
/* .fp-section {
    visibility: hidden; 
    opacity: 0;
    transition: opacity 0.5s ease;
} */
/* 활성화된 섹션 보이기 */
/* .fp-section.active {
    visibility: visible; 
    opacity: 1;
} */






/* 코멘트 커스텀 */
.list-group-flush {border-top: 1px solid var(--bs-dark);}
.list-group-flush li {background-color: transparent; padding: 30px 0 !important;}
.comment-top {display: flex; align-items: center;}
.comment-icon {font-size: 12px; width: 32px;background-color: transparent; border: 1px solid var(--bs-gray-500);font-weight: 400;}
.comment-icon:hover {color: var(--bs-white); background-color: var(--bs-primary);border-color: var(--bs-primary);}
.comment-icon:hover .bi-arrow-counterclockwise {filter: invert(100);}

.comment-form {padding-top: 20px; border-top: 1px solid var(--bs-gray-200);background-color:#f1f1f1;}

.comment-info {display: flex; gap: 30px; flex-wrap: wrap; width: 100%; padding-left: 30px; padding-right: 30px;}

.comment-count {font-size: 1.125rem; color: var(--bs-dark);}

/* 담당자명 */
.com_writer {font-weight: 700; color: var(--bs-dark); max-width: 290px; display: flex; padding-bottom: 20px; border-bottom: 2px solid var(--bs-dark);width: 100%;font-size: 1.125rem;}
.com_writer>span {white-space: nowrap; min-width: 100px; }
.com_writer .form-control {padding: 0; border-radius: 0; border: none;font-size: 1.125rem; font-weight:700; background-color: #f1f1f1;}
.com_writer .form-control::placeholder {font-weight: 700; color: var(--bs-gray-500); font-size: 1.125rem;}

/* 상태 */
.com_progress {font-weight: 700; color: var(--bs-dark); max-width: 290px; display: flex; padding-bottom: 20px; border-bottom: 2px solid var(--bs-dark); width: 100%; font-size: 1.125rem;}
.com_progress>span {white-space: nowrap; min-width: 100px;}
.com_progress .form-select {padding: 0; border-radius: 0; border: none; font-weight: 700; background-position: right center;font-size: 1.125rem; background-color: #f1f1f1;}
.com_progress .form-select:focus {box-shadow: none;}


/* 패스워드 */
.com_passwd {font-weight: 700; color: var(--bs-dark); max-width: 290px; display: flex; padding-bottom: 20px; border-bottom: 2px solid var(--bs-dark);width: 100%;font-size: 1.125rem;}
.com_passwd>span {white-space: nowrap; min-width: 100px;}
.com_passwd .form-control {padding: 0; border-radius: 0; border: none;}
.com_passwd .form-control::placeholder {font-weight: 700; color: var(--bs-gray-500); font-size: 1.125rem;}

/* 내용 */
.com_content {font-weight: 700; color: var(--bs-dark); display: flex; width: 100%; /* margin-top: 30px; */font-size: 1.125rem; padding: 30px;}
.com_content>div{/*padding-bottom: 20px;  border-bottom: 2px solid var(--bs-dark); */ display: flex; width: calc(100% - 130px); flex-direction: column;}
.com_content>div>span {white-space: nowrap; min-width: 100px;}

.comment-form textarea.form-control {height: 60px; width: 100%; border-radius: 0 !important; padding: 0; border: 0; font-weight: 700;}
.comment-form .btn {width: 100px; height: 100px; font-size: 18px; border-radius: 20px !important; margin-left: 30px !important;}
.comment-form textarea.form-control::placeholder {font-weight: 700; color: var(--bs-gray-500); font-size: 1.125rem;}

@media screen and (max-width:767px){
    .com_writer , .com_progress ,.com_passwd ,.com_content>div{max-width: 100%; width: 100%;}
    .com_content {flex-direction: column;}
    /* .com_content>div>span {margin-bottom: 20px;} */
    .com_content>div {flex-direction: column; }
    .comment-form .btn {margin-left: 0 !important; margin-top: 20px; width: 100%; height: 60px; border-radius: 50px !important;}
}




/* 뷰페이지 커스텀. */

.top-view {border: 1px solid var(--bs-dark); border-radius: 30px; padding: 50px;}
.top-view .title {}
.top-view .info {font-size: 1.125rem; color: var(--bs-dark); margin-bottom: 1rem;}
.top-view .info span:not(:last-child) {position: relative; padding-right: 1rem; margin-right: 1rem;}
.top-view .info span::before {content: ""; position: absolute; right: 0; top: 3px; width: 1px; height: 16px; background-color: var(--bs-gray-400); font-weight: 500;}
.top-view .info span:last-child:before {display: none;}
.top-view .regist {color: #888888;}

.view-style {margin-top: 60px; display: flex;}

.view-style-left {min-width: 400px;}
.view-style-right {width: calc(100% - 400px);}

/* .view-wrap>div {border-bottom: 2px solid var(--bs-gray-300);} */
.view-wrap ul li {display: flex; font-size: 1.125rem; color: var(--bs-dark); padding: 25px 0;border-bottom: 1px solid var(--bs-gray-300); align-items: center;}
.view-wrap ul li:first-child {padding-top: 0;}
.view-wrap ul li div:first-child {min-width: 160px; font-weight: 700;}
.view-wrap ul li div a { color: var(--bs-dark);}
.view-wrap ul li div a:hover {color: var(--bs-primary);}

#DivContents {padding: 50px 0; color: var(--bs-dark);}
#DivContents {font-size: 1.125rem;}

.view-wrap .file a { background-color: var(--bs-dark); color: var(--bs-white); padding: 8px 18px; border-radius: 30px; font-size: 1.125rem; font-weight: 400; display: inline-block; margin-bottom: 5px;}
.view-wrap .file a:not(:last-child) {margin-right: 5px;}
.view-wrap .file a i {display: none;}

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

    .view-style {flex-direction: column;}
    .view-style-left {min-width: auto; margin-bottom: 2rem;}
    .view-style-right {width: 100%;}
}


@media screen and (max-width:767px) {
    .top-view .info span {display: block;}
    .top-view .info span::before {display: none;}
    .view-wrap ul li {flex-direction: column;align-items: flex-start;}
    .view-wrap ul li div:first-child {min-width: auto; margin-bottom: 5px;}
    .view-wrap .file a {font-size: 0.875rem;}

}

/* 웹호스팅 신청 */

.info-style-wrap {max-width: 360px; width: 100%; background-color: var(--bs-gray-100); padding: 30px 25px; border-radius: 15px; margin-top: 30px;}
.info-style-wrap strong {color: var(--bs-dark); font-weight: 700; font-size: 20px; display: block; margin-bottom: 1rem;}

.info-style-01 {display: flex; justify-content: space-between; font-weight: 500; color: var(--bs-dark); margin-bottom: 8px;}
.info-style-02 {color: var(--bs-gray-600); font-weight: 500; margin-bottom: 8px;}
.info-style-03 {color: var(--bs-primary); font-weight: 500; }

.info-style-wrap .style-wrap-01 {padding-bottom: 20px; border-bottom: 1px solid var(--bs-gray-300);}

.info-style-wrap .style-wrap-02 {padding-top: 20px; font-weight: 700; display: flex; justify-content: space-between;}
.info-style-wrap .style-wrap-02>div:first-child {color: var(--bs-dark);}
.info-style-wrap .style-wrap-02>div:last-child {text-align: right; font-size: 1.125rem;}.info-style-wrap .style-wrap-02>div span:last-child {font-size: 0.875rem; font-weight: 300;}

.view-wrap-02 {margin-top: 80px;}
.view-wrap-02 h3{ margin-bottom: 50px;}


/* 라디오버튼 커스텀 */

.form-check-input[type=radio] {border-radius: 4px;}
.form-check-input:checked[type=radio] {background-image: url(/images/sub/checkbox.svg); background-size: 1rem; background-position: center center; border-radius: 4px; background-color: var(--bs-dark); border-color: var(--bs-dark);}

/* 웹호스팅 계좌아체 카드결제 */
.pay-bank-area { display: flex; flex-wrap: wrap; justify-content: space-between;}
.pay-card-area { flex-wrap: wrap; justify-content: space-between;}

/* 파일 삭제 체크박스 */
.file-area input.check {opacity: 1; margin-top: 0; font-size: 0; ;}
.file-area input.check:checked {background-color: var(--bs-dark)}


/* 도메인신청 */
.view-wrap-03 h3 {font-size: 1.125rem; margin-bottom: 0.875rem;}
.view-wrap-03 ul {font-size: 1.125rem; color: var(--bs-dark);}
.view-wrap-03 ul li {background-color: var(--bs-gray-100);padding: 1rem 30px; border-radius: 10px;}
.view-wrap-03 ul li:not(:last-child) {margin-bottom: 0.5rem;}




/* 테스트 */
/* resent */
.resent {background-image: url('/images/main/main_sec_bg.jpg');background-size: cover;background-position: 50%;background-repeat: no-repeat;height: 100vh;width:100%; display: flex; align-items: center;  font-family: 'Spoqa Han Sans Neo', 'sans-serif';}
.resent .scroll-box {width: 100%; overflow-x: auto; white-space: nowrap; padding: 275px calc(20vw - 4px); -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
.resent .scroll-box::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/}
.resent-list {transition: all .3s linear; display: inline-flex; flex-wrap: nowrap;}
.resent-list li { margin-right: 100px; /* flex: 0 0 calc(30vw - 26px); */ white-space: normal;}
.resent-list li a {width: 100%; height: 100%; display: block;}
.resent-list li.recent-link {position: relative;}
.resent-list li.recent-link a {width: 80px; height: 80px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.resent-list li.recent-link a img {width: 100%;}
.resent-list .resent-box {width: 550px; height: 670px; padding: 50px 40px; box-shadow: 30px 30px 50px -10px rgb(0 0 0 / 20%); box-sizing: border-box;}

.resent-list li.partners .resent-box{background-color: #ff5600; color: #ffffff;}
.resent-list li.report .resent-box{background-color: #ffffff; color: #000000;}
.resent-list li.media .resent-box{background-color: #000000; color: #ffffff;}

.resent-tit {word-break: break-all; line-height: 1.3; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.resent-list li.partners .resent-tit {font-size: 76px; font-family: "Inter"; font-weight: 900; }
.resent-list li.report .resent-tit {font-size: 76px; font-family: "Inter"; font-weight: 900;}
.resent-list li.media .resent-tit {font-size: 36px; font-weight: 500;}

.resent-inner {display: flex; flex-direction: column; justify-content: space-between; height: 100%; word-break: keep-all;}

.resent-tag {margin-bottom:70px;}
.resent-tag .ep {font-weight: 700; font-style: italic; display: inline-block; margin-right: 3px;}
.resent-list li.partners .resent-tag .ep  {color: #7f2e7b;}
.resent-list li.report .resent-tag .ep {color: #ff5600;}
.resent-list li.media .resent-tag .ep {display: none}

.tag-item {display:inline-block; padding:0 15px; height:40px; line-height:40px; text-align:center; font-family: "Inter",sans-serif; font-weight:400; font-size: 16px; border-radius:40px;}
.tag-item.ti01 {font-style: italic; margin-right:5px; background:#000; border:1px solid #000; color:#fff; text-transform: capitalize;}
.tag-item.ti02 {font-style: normal; background-color:#eeeeee; border:1px solid #eeeeee; color:#000;}
.resent-box.dark .tag-item.ti01 {background-color:#fff; border:1px solid #fff; color:#000;}
.resent-box.dark .tag-item.ti02 {background-color:transparent; border:1px solid #fff; color:#fff;}
.ep-txt {display:inline-block; color:#ff5600; font-weight: 600; margin-right:9px;}
.resent-box.orange .tag-item.ti01 {color:#ff5600;}
.resent-box.orange .ep-txt { color:#7f2e7b; }
.resent-list li.media .tag-item.ti02 {background-color: #000000; color: #ffffff; border-color: #ffffff;}

.resent-list li.partners .tag-item.ti01 {background-color: #ffffff; color: #ff5600; border-color: #ffffff;}
.resent-list li.partners .tag-item.ti02 {color: #ffffff; background: #ff5600; border-color: #ffffff;}
.resent-list li.report .tag-item.ti02 {color: #000000; background: #eeeeee; border-color: #eeeeee;}
.resent-list li.media .tag-item.ti01 {background-color: #ffffff; color: #000000; border-color: #ffffff;}
.resent-list li.media .resent-list li.media .tag-item.ti02 {color: #ffffff; background: #000000; border-color: #ffffff;}

.resent-box .item-mark {width: 28px; height: 17px; background-image: url('/images/main/icon_up_arrow_bk.png');background-size: cover; background-position: left center;background-repeat: no-repeat; background-size:28px; margin-bottom:20px;}
.resent-box .item-mark {background-image: url('/images/main/icon_up_arrow_wh.png');}
.resent-list li.report .resent-box .item-mark {background-image: url('/images/main/icon_up_arrow_bk.png');}
.resent-box .item-txt {font-size: 16px; font-weight:300; line-height: 1.4em;  max-height: 2.8em; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}


/* 타이틀 다시하기 */

.sbupageTitle {
    position: relative;
    overflow: visible; /* 숨겨지는 부분 없이 보여주기 */
    overflow-x: hidden;
}



.sbupageTitle h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: pre-wrap; width: 100%;
    display: inline-block;
}

.letter{
    display: inline-block;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.letter.on{
    transform: translateY(0); /* Move to normal position */
    opacity: 1; /* Fully visible */
}

.sbupageTitle .container {height: 100%;width: 100%;}
.title-box {height: 100%; width: 100%; position: relative; height: 300px; /* margin-top: 60px; */ overflow: hidden;}
.title-box .hidden-box {width: 100%; height: 180px; background-color: var(--bs-white); position: absolute; z-index: 99; top: 185px;}
.sbupageTitle.sbupageTitleActive  .title-box {height: 0;}

.sbupageTitle.sbupageTitleActive02 {margin-bottom: -100px;}


.sbupageTitleActive .title-box .hidden-box {top:75px;}



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

    .title-box .hidden-box {top: 175px;}

}

@media screen and (max-width: 767px) {
    .title-box .hidden-box {height: 100px;top: 53%;}
    .sbupageTitle {height: 400px;}
    .sbupageTitle.sbupageTitleActive02 {margin-bottom: -150px;}

}

@media screen and (max-width: 575px){
    .sbupageTitle {height: 250px;}
    .title-box .hidden-box {height: 50px;}
}


.portfolioArea03 img {width: 200px;max-height: 600px;}


/* 인트로 */

.intro { z-index: 100000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bs-dark); /* color:var(--bs-white); */ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);color:#460d10; font-weight: 300; overflow: hidden;}
.intro .scale-out {font-weight: 300;}
.intro .context { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.intro .heading { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; }
.intro .heading .paragraph { display: flex; font-size: clamp(20px, 4.6vw, 72px); font-weight: 700;  }
.intro .heading .paragraph .slide-right, .intro .heading .paragraph .slide-left {/* color:#460d10; */color:var(--bs-white);}
.intro .heading .paragraph [data-fade] { opacity: 0; }

.intro-skip {display: block; margin-top: 100px;  position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%);z-index: 9999; min-width: 200px; padding: 15px 30px; font-size: 20px;}


@media screen and (min-width:1660px) {
    .intro .heading .paragraph { font-size: clamp(20px, 10vw, 100px); }
}


@media screen and (max-width:767px){
    .intro-skip {min-width: 150px; padding: 10px 30px; font-size: 1rem;}
}


/* 메인 슬라이드배너 수정 */
/* ._marquee {display: inline-flex;animation: marquee forwards infinite 10s linear;     animation-duration: 50s;}
._marquee ._con {display: flex; white-space: nowrap;} */

.main-banner {position: relative; display: flex; align-items: flex-start; justify-content: center; flex-direction: column;}

/* 마퀴 */
@keyframes marquee {
	from { transform:translateX(0) }
	to { transform:translateX(-50%) }
}
@keyframes marqueeReverse {
	from { transform:translateX(0) }
	to { transform:translateX(50%) }
}

._marquee { display: inline-flex; animation: marquee forwards infinite 50s linear; }
._marquee.reverse {  animation-name: marqueeReverse; }
._marquee ._con { display: flex; white-space: nowrap; }

.main-banner .logo {width: 100%;}
._marquee ._con>div>div{width: max-content; margin-right: 30px;}

#commentArea textarea {resize: none;height: 100%;  font-weight: 400; background-color: #f1f1f1; margin-top: 10px;    border-bottom: 2px solid var(--bs-dark);}


.privacyArea {font-family: 'Pretendard', Dotum, Sans-serif !important;;}
.privacyArea p {font-family: 'Pretendard', Dotum, Sans-serif !important;;}
.privacyArea span {font-family: 'Pretendard', Dotum, Sans-serif !important;}
.privacyArea div {font-family: 'Pretendard', Dotum, Sans-serif !important;}





/* 고객센터 홈에 수정 요청하기 버튼 만들기 */
.customer-btn {text-align: center; margin-top: 100px;}
.customer-btn .btn {max-width: 275px; min-height: 80px; font-size: 22px; font-weight: 700; border-radius: 100px; display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto;}

@media screen and (max-width: 767px) {
    .customer-btn {margin-top: 50px;}
    .customer-btn .btn {min-width: 160px; min-height: 60px; font-size: 1.125rem;}
}


/* 홈페이지의 가로스크롤이었던 부분 수정하기 */
.homepage-portfolio .container{ position: relative;}
.subpage-portfolio-wrap {overflow-x: auto;}
.subpage-portfolio-list {display: flex; gap: 20px; margin-top: 130px; }

/* .subpage-portfolio-list li {} */
.subpage-portfolio-list li a { width: 100%; height: 100%; display: block; white-space: nowrap;max-height: 510px;overflow: hidden;border-radius: 15px;height: fit-content;}
.subpage-portfolio-list .portfolio-box {width: 300px;  box-sizing: border-box; }
.subpage-portfolio-list .portfolio-inner {position: relative;}
.subpage-portfolio-list .portfolio-inner::after {content: ""; position: absolute; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.04); width: 100%; height: 100%;}


.subpage-portfolio-list .portfolio-inner img { width: 100%; height: auto; white-space: nowrap;}


.homepage-portfolio .portfolio-link {position: absolute; right: -230px; top: 50%; transform: translateY(-50%); width: fit-content; z-index: 9; padding-right: 0 !important;}

@media screen and (max-width:1800px){
    .subpage-portfolio-list .portfolio-box {width: 250px;}
    .homepage-portfolio .portfolio-link {right: 0;}
}
@media screen and (max-width:1440px) {
    .homepage-portfolio .subpage-portfolio-wrap {display: flex; gap: 30px;}
    .homepage-portfolio .portfolio-link {position: static; margin-top: 30px; transform: none;}
}
@media screen and (max-width:1199px) {
    /* .subpage-portfolio-list {flex-wrap: wrap;}
    .subpage-portfolio-list li {width: calc(50% - 10px);}
    .subpage-portfolio-list .portfolio-box {width: 100%;} */
}

@media screen and (max-width:767px) {
    /* .subpage-portfolio-list li {width: 100%;} */
}

.overflow-x-hidden {overflow-x: hidden;}

.domain_title_wrap {display: flex;align-items: flex-start; min-width: 205px;}
.domain_title {font-weight: 700;font-size: 1.125rem;}
.domain_wrap {width: 100%;/* padding-top: 25px;padding-bottom: 25px;border-bottom: 2px solid var(--bs-dark);margin-bottom:1.5rem */;}
.domain_group {display: flex;align-items: center;padding-right: 50px;}
.domain_group:not(:first-child) {margin-top: 20px; padding-top: 20px; border-top: 1px dotted var(--bs-gray-300);}
.domain_group label {color: var(--bs-dark);font-size: 1.125rem;font-weight: 700;}
.domain_group .form-check-input-02 {flex : 1;}
.domain_group .form-control {flex : 1;border: 0; padding: 0 .75rem; padding-right: 0;}
.domain_group span {display:block;font-size: 18px;font-weight: 700;color: var(--bs-dark) !important;padding-left:10px;}
.domain_btn {
	font-size:.7em;padding: 3px 10px;border-radius: 5px;color: var(--bs-white);font-weight: 500;background-color: var(--bs-gray-600);border-color: transparent;
}
.domain_btn:hover {background-color: var(--bs-dark);color:var(--bs-white);}
.domain_group>div {display: flex; flex: 1 1 auto; align-items: baseline; gap:5px}

@media screen and (max-width:767px) {
    .domain_title_wrap {margin-bottom: 1rem;}
    .domain_group {flex-direction: column; align-items: flex-start; padding-right: 0; gap: 0.5rem;}
    .domain_group span {padding-left: 0;}
}