@charset "utf-8";

html {
    overflow-x: hidden;
    overflow-y: scroll;
}
#site {
    background-color: #fff;
    word-break: keep-all !important;
    padding-top: 9.6rem;
}

#site > .container {
    width: 100%;
    padding: 0;
}

/* 폰트 설정 */
#site,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
button {
    font-family: "notokr", sans-serif;
    letter-spacing: -0.035em;
}

ol,
ul {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-position: inside;
}

/* 닷홈 빌더 설정
.navbar .caret,
.navbar .divider-vertical,
.navbar ~ br,
.footer-social-layout,
.footer_copy .text-center > br,
.topmarginLay_a {display: none;}
 */

:root {
    --page-point-color: #2e56d9;
    --page-point-color-hover: #1c41bc;
    --page-danger-color: #f34825;
    --page-danger-color-hover: #ce4825;
    --page-dark-color: #3f3f3f;
    --page-dark-color-hover: #222;
    --page-grey-color: #d5d5d5;
    --page-grey-color-hover: #c4c4c4;
    /* sub */
    --sub-menu-height: 6rem;
    /* google-material-symbols */
    --gms: "Material Symbols Outlined";
    --gms-grad-low: "GRAD" -25;
    --gms-grad-zero: "GRAD" 0;
    --gms-grad-high: "GRAD" 200;
    --gms-opsz: "opsz" 48;
    /* fill icon */
    --gms-100-fill: "FILL" 1, "wght" 100, var(--gms-opsz);
    --gms-200-fill: "FILL" 1, "wght" 200, var(--gms-opsz);
    --gms-300-fill: "FILL" 1, "wght" 300, var(--gms-opsz);
    --gms-400-fill: "FILL" 1, "wght" 400, var(--gms-opsz);
    --gms-500-fill: "FILL" 1, "wght" 500, var(--gms-opsz);
    --gms-600-fill: "FILL" 1, "wght" 600, var(--gms-opsz);
    --gms-700-fill: "FILL" 1, "wght" 700, var(--gms-opsz);
    /* outlined icon */
    --gms-100-out: "FILL" 0, "wght" 100, var(--gms-opsz);
    --gms-200-out: "FILL" 0, "wght" 200, var(--gms-opsz);
    --gms-300-out: "FILL" 0, "wght" 300, var(--gms-opsz);
    --gms-400-out: "FILL" 0, "wght" 400, var(--gms-opsz);
    --gms-500-out: "FILL" 0, "wght" 500, var(--gms-opsz);
    --gms-600-out: "FILL" 0, "wght" 600, var(--gms-opsz);
    --gms-700-out: "FILL" 0, "wght" 700, var(--gms-opsz);
}

@media (min-width: 768px) {
    .col-sm-20 {
        width: 20%;
    }
    .col-sm-40 {
        width: 40%;
    }
    .col-sm-60 {
        width: 60%;
    }
    .col-sm-80 {
        width: 80%;
    }
}
@media (min-width: 992px) {
    .col-md-20 {
        width: 20%;
    }
    .col-md-40 {
        width: 40%;
    }
    .col-md-60 {
        width: 60%;
    }
    .col-md-80 {
        width: 80%;
    }
}
@media (min-width: 1200px) {
    .col-lg-20 {
        width: 20%;
    }
    .col-lg-40 {
        width: 40%;
    }
    .col-lg-60 {
        width: 60%;
    }
    .col-lg-80 {
        width: 80%;
    }
}

/* 상단 네비게이션 */

.navbar.navbar-inverse {
    background-color: #f7f8f6;
    border-bottom: none;
}
.navbar.navbar-inverse .container{
    /* width: 100%; */
    /* padding: 0; */
}
.navbar.navbar-inverse .container > *{/* float: none; */}
.nav-upper{
    position: absolute;
    top: 2.8rem;
    right: 6rem;
}
.nav-upper a{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    font-size: 1.2rem;
    font-weight: 500;
    background: #fff;
    padding: 5px 5px 5px 9px;
    border-radius: 8px;
}
.nav-upper a:hover{text-decoration: none;}
.nav-upper a .txt{
    color: #777;
}
.nav-upper a img{
    width: 2.5rem;
    border-radius: 5px;
}

.navbar.navbar-inverse .container .navbar-header{padding: 1.6rem 0;/* display: flex; *//* justify-content: center; *//* align-items: center; *//* border-bottom: 1px solid #eee; */}
.navbar-header .navbar-brand {
    display: block;
    padding: 0;
    font-size: 2rem;
    margin-left: 0 !important;
    height: auto;
    width: 18rem;
}
.navbar-header .navbar-brand img {
    margin-top: 0;
    display: inline-block;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
    /* background: #ffffff; */
    /* border: 0; */
}
.nav.navbar-nav {
    /* display: flex; */
    /* align-items: center; */
    /* gap: 0; */
    /* float: none !important; */
    /* width: 100%; */
    /* max-width: 1140px; */
    /* margin: 0 auto; */
    /* justify-content: center; */
}
.nav.navbar-nav::before,
.nav.navbar-nav::after {
    display: none;
}
.nav.navbar-nav > li {/* flex: 1; *//* min-width: 18rem; */}
.nav.navbar-nav > li > a {
    display: block;
    height: 100%;
    padding: 3.8rem 3.5rem;
    font-size: 1.8rem;
    color: #222;
    font-weight: 500;
    text-align: center;
    letter-spacing: -0.06em;
}

.nav.navbar-nav > li + li > a {
    /* border-left: 1px solid rgb(55 73 141); */
}
.nav.navbar-nav > li > a .caret {
    display: none;
}
.nav.navbar-nav > li:hover > a,
.nav.navbar-nav > li.open > a,
.nav.navbar-nav > li:focus > a,
.nav.navbar-nav > li > a:hover,
.nav.navbar-nav > li > a:focus,
.nav.navbar-nav > li.open > a,
.nav.navbar-nav > li.open > a:hover,
.nav.navbar-nav > li.open > a:focus {
    color: #1e48d5;
    background: transparent;
}
.nav.navbar-nav li .dropdown-menu {
}

@media (min-width: 768px){
    .nav.navbar-nav li .dropdown-menu {
            left: 50%;
            right: auto;
            transform: translate(-50%, 0);
            top: 85%;
            border-radius: 0;
            border: 0;
            padding: 1rem;
            background: #1034a9;
            -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.125);
            box-shadow: 2px 5px 6px rgba(0,0,0,.2);
            animation-fill-mode: both;
            animation-duration: 0.4s;
            animation-name: fadeIn;
    }
}
.nav.navbar-nav li .dropdown-menu li a {
    padding: 0.9rem 1.5rem;
    text-align: center;
    font-size: 1.5rem;
    color: #fff;
    transition: all 0.1s;
}
.nav.navbar-nav li .dropdown-menu li a:hover {
    background: #2351e9;
    color: #fff;
    border-radius: 2px;
}

@media (max-width: 767px) {
    #site {
    }

    .navbar-header .navbar-brand {
        margin-top: 5px;
        margin-left: 15px !important;
    }

    /*.navbar-inverse .navbar-toggle{border:1px solid #666;}*/
    .navbar-inverse .navbar-toggle {
        border: 0;
        padding: 9px 0;
    }

    .navbar-inverse .navbar-toggle .icon-bar {
        background-color: #666;
        transition: ease-in-out 0.15s all;
        opacity: 1;
        position: relative;
    }

    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus {
        background: none;
        border-color: #222;
    }

    .navbar-inverse .navbar-toggle:hover .icon-bar,
    .navbar-inverse .navbar-toggle:focus .icon-bar {
        background-color: #222;
    }

    .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {
        border-color: transparent;
    }

    .navbar-inverse.open .navbar-toggle > .icon-bar:nth-of-type(1) {
        transform: rotate(45deg);
        top: 6px;
    }

    .navbar-inverse.open .navbar-toggle > .icon-bar:nth-of-type(2) {
        opacity: 0;
    }

    .navbar-inverse.open .navbar-toggle > .icon-bar:nth-of-type(3) {
        transform: rotate(-45deg);
        top: -6px;
    }

    .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {
        border-color: #e6e6e6;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #site {
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #site {
    }
}

/* //상단 네비게이션 */

/* 슬라이드 영역 */
#mainCarousel .carousel-inner .item {
    height: 64rem;
}
#mainCarousel .carousel-inner .item .carousel-caption {
    padding: 0;
    left: calc((100% - 114rem) / 2);
    right: calc((100% - 114rem) / 2);
    text-decoration: none;
    text-shadow: none;
    top: 48%;
}
#mainCarousel .carousel-inner .item h1 {
    font-size: 8.5rem;
    /* margin: 0; */
    font-weight: 600;
    margin: 0rem 0 3.2rem;
}
#mainCarousel .carousel-inner .item p {
    font-size: 2.1rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    letter-spacing: -0.04em;
    gap: 0.7rem;
}

#mainCarousel .carousel-inner .item p span {
    display: inline-flex;
    width: 15rem;
    padding: 1.4rem 0;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: rgb(18 41 155 / 80%);
    background: rgb(18 41 155 / 70%);
    backdrop-filter: blur(6px);
}

#mainCarousel .carousel-indicators{
    bottom: 3rem
}
#mainCarousel .carousel-indicators li,
#mainCarousel .carousel-indicators li.active{
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid #fff;
    margin: 0 0.3rem;
    border-radius: 0;
}
#mainCarousel .carousel-indicators li.active{}

#mainCarousel .carousel-control{display: none;}
@media (max-width: 767px) {
    #mainCarousel .carousel-inner .item .carousel-caption {
        left: 15px;
        right: 15px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #mainCarousel .carousel-inner .item .carousel-caption {
        left: calc((100% - 75rem) / 2);
        right: calc((100% - 75rem) / 2);
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #mainCarousel .carousel-inner .item .carousel-caption {
        left: calc((100% - 97rem) / 2);
        right: calc((100% - 97rem) / 2);
    }
}
/* //슬라이드 영역 */

/* 메인 중단영역 */

.main-section {
    padding: 11rem 0 10rem;
}
.main-section h3{
    text-align: center;
    font-size: 3.8rem;
    color: #222;
    font-weight: 700;
    margin: 0 0 7rem;
}
.main-section .main-prod-wrap{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}
.main-section .main-prod-wrap .main-prod{
    overflow: hidden;
}
.main-section .main-prod-wrap .main-prod img{
    transition: all 0.3s;
}
.main-section .main-prod-wrap .main-prod .caption{
    display: block;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    color: #333;
    padding: 1.9rem 0;
    letter-spacing: -0.04em;
    background: #fff;
    position: relative;
    z-index: 1;
}
.main-section .main-prod-wrap .main-prod:hover{
    text-decoration: none;
}
.main-section .main-prod-wrap .main-prod:hover img{
    transform: scale(1.15);
    opacity: 0.75;
}
.main-section .main-prod-wrap .main-prod:hover .caption{
    color: var(--page-point-color);
}

@media (max-width: 767px) {
}
@media (min-width: 768px) and (max-width: 991px) {
}
@media (min-width: 992px) and (max-width: 1199px) {
}

/* //메인 중단영역 */

/* 서브페이지 */

.subHeader {
    height: 33rem;
    background-color: #333;
    background-image: url(/public/img/sub/sub_title.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.subHeader::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #050a25;
    opacity: 0.4;
}
.subHeader .container {
    height: 100%;
    position: relative;
}
.subHeader .container h2 {
    text-align: center;
    color: #fff;
    font-size: 4.6rem;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%,-50%);
    font-weight: 600;
    text-shadow: 0 0 70px rgba(0,0,0,0.3);
    letter-spacing: -0.05em;
}
.subHeader .container .breadcrumb {
    padding: 0;
    margin: 0;
    background: none;
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;
    display: none;
}
.subHeader .container .breadcrumb > li > a,
.subHeader .container .breadcrumb > li.active {
    color: #fff;
    opacity: 0.7;
}

.subMenu {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.07);
    /* background: rgb(18 41 155 / 80%); */
    margin-top: calc(var(--sub-menu-height) *-1);
    position: relative;
}

.subMenu .container {
    /* display: flex; */
    /* justify-content: center; */
}
.subMenu .nav {overflow: hidden;display: flex;border-radius: 10px 10px 0 0;}

.subMenu .nav > li:first-child a {
    /* border-radius: 8px 0 0 8px; */
}

.subMenu .nav > li:last-child a {
    /* border-radius: 0 8px 8px 0; */
}
.subMenu .nav::before,
.subMenu .nav::after{display: none;}
.subMenu .nav > li {flex: 1;margin: 0;}
.subMenu .nav > li > a {text-align: center;font-size: 1.8rem;color: #aebbf5;border-radius: 0;font-weight: 500;padding: 0;background: rgb(18 41 155 / 80%);letter-spacing: -0.05em;line-height: var(--sub-menu-height);backdrop-filter: blur(10px);}

.subMenu .nav > li > a::before {
    content: '';
    width: 0;
    height: 3px;
    /* background: #3665ff; */
    position: absolute;
    left: 50%;
    bottom: -1px;
    transition: all 0.3s ease;
    transform: translateX(-50%);
    opacity: 0;
}
.subMenu .nav > li > a:hover,
.subMenu .nav > li > a:focus{
    color: #fff;
}
.subMenu .nav > li.active > a {color: #3665ff;background: #fff;font-weight: 700;}

.subMenu .nav > li:hover a::before ,.subMenu .nav > li.active > a::before {
    width: 100%;
    opacity: 1;
}

.subContent {
    padding-top: 10rem;
}
.subContent_title {}
.subContent_title h3 {margin: 0 0 9rem;text-align: center;font-size: 3.7rem;color: #333;font-weight: 700;letter-spacing: -0.05em;}
.subContent .content,
.bbs-section {
    padding-bottom: 8rem;
}

.subContent .content:last-child, .bbs-section:last-child {
    padding-bottom: 11rem;
}
.bbs-area .board_wrapper {
    margin-top: 0;
}
.subContent .content h4 {}
.subContent .content h4::before {
    content: "";
}

.intro {
    display: flex;
    gap: 6rem;
}
.table-overview{
    width: 64%;
    margin: 0 auto;
    border-top: 2px solid #333;
    border-bottom: 1px solid #ccc;
}
.table-overview tr{
    border-bottom: 1px solid #e5e5e5;
    /* background: #f7f8f9; */
}
.table-overview tr th,
.table-overview tr td{
    padding: 1.2rem 0rem 1.1rem;
    font-size: 1.6rem;
}
.table-overview tr th{
    border-top: none;
    font-size: 1.6rem;
    font-weight: 700;
    color: #333;
    letter-spacing: -0.06em;
    vertical-align: middle;
    padding-left: 1rem;
    /* background: #ecf1fb; */
}
.table-overview tr td{
    padding-left: 22px;
    letter-spacing: -0.04em;
}


.location iframe {
    margin-bottom: -6px;
    background-color: #e5e3df;
    height: clamp(260px, 40vw, 450px);
}
.location p.addr {
    font-size: clamp(16px, 3vw, 20px);
    line-height: clamp(24px, 5vw, 36px);
    font-weight: 500;
    margin-block: clamp(30px, 5vw, 40px) 15px;
    letter-spacing: -0.04em;
}

.location .text {
    text-align: center;
}
.li-location {
    display: flex;
    gap: clamp(20px, 3vw, 40px);
    justify-content: center;
}
.li-location li {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    letter-spacing: -0.015em;
    color: #606060;
    font-size: clamp(14px, 3vw, 16px);
}
.li-location strong {
    color: inherit;
}
.li-location li::before {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(26px, 3vw, 30px);
    aspect-ratio: 1;
    border-radius: 9999px;
    background-color: #406cf9;
    font-variation-settings: var(--gms-400-fill);
    font-family: var(--gms);
    color: #fff;
}
.li-location li.tel::before {
    content: "\e0b0";
}
.li-location li.fax::before {
    content: "\ead8";
}
.li-location li.mail::before {
    content: "\e158";
}

.board_wrapper .table.board_write_table{
    /* border: none; */
}

.board_wrapper .table.board_write_table > :where(tbody, tfoot, thead) > tr > :where(th, td){
    border-top: none;
    border-bottom: 1px solid #e6e6e6;
}

.board_wrapper .table.board_write_table tbody tr th{
    background: rgba(0,0,0,0);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.06em;
    color: #333;
    padding-left: 15px;
    width: 18rem;
}

.board_wrapper .table.board_write_table .form-control{
    width: 35rem;
    min-height: 4.5rem;
    font-size: 1.4rem;
    border-color: #ccc;
}

.board_wrapper .table.board_write_table tbody tr th > span.required_text{
    color: #1d80ff;
}

.form-control:not([readonly]):focus {
    border-color: var(--page-point-color) !important;
}

#captcha + br{
    display: none;
}
#captcha {
    height: 4.5rem;
    margin-top: 0;
    vertical-align: bottom;
}
#wr_captcha {
    margin-top: 0 !important;
}
.board_wrapper .table.board_write_table .text-muted{
    font-size: 1.3rem;
    color: #8f8f8f;
    margin-top: 8px !important;
}

.board_wrapper .table.board_write_table .text-muted i {
    color:#6ebcf9
}

.checkbox label, .radio label {
    font-size: 1.5rem;
}

.custom_checkbox + span::before {
    margin: 0px 7px 0px -20px;
    vertical-align: top;
}

#form_inquiry #list_btn {
    display: none;
}

:where(.table_video, .table_blog2) dd {
    margin-bottom: 50px;
}
:where(.table_video, .table_blog2, .table_pd) .inner {
    border: none;
}

:where(.table_video, .table_blog2, .table_pd) .inner .bottom {
    padding: 20px 0;
}

:where(.table_video, .table_blog2) .inner :where(.bottom .title a, .title a) {
    font-weight: 500;
    letter-spacing: -0.04em;
}

:where(.table_video, .table_blog2, .table_pd) .inner .top a {
    overflow: hidden;
    background: #fff;
}

:where(.table_video, .table_blog2, .table_pd) .inner:hover .top a span.thumb {
    transform: scale(1.15);
    opacity: 0.7;
}

:where(.table_video, .table_blog2, .table_pd) .inner .top a span.thumb {
    transition: all 0.3s;
}

:where(.table_video, .table_blog2, .table_pd) .inner:hover .bottom .title {
    color: var(--page-point-color)
}


.board_data_view {border-top: 2px solid #333;}

.board_data_view .header_wrap {
    padding: 40px 0;
    border-bottom: 1px solid #ddd;
}

.board_data_view .header_wrap .title {
    font-size: 26px;
    letter-spacing: -0.04em;
}

.table.table_default tbody .subject a {
    font-size: 1.6rem;
    color: #333;
}

.table.table_default tr td {
    color: #8f8f8f;
    font-size: 15px;
    border-color: #e6e6e6;
    padding: 1.8rem;
}

.table.table_default thead th {
    font-weight: 600;
    font-size: 1.6rem;
    background: #fafafa;
    border-bottom: 1px solid #ccc;
}

.contents_inner {
    font-size: 1.6rem;
    line-height: 1.55;
}

.contents_inner p {
    margin: 0 0 20px;
}

.board_pd_view .pd_title_wrap {margin-bottom: 40px;}

@media (max-width: 767px) {
    .table.table_default tr .num,
    .table.table_default tr .regdate,
    .table.table_default tr .hits {
        display: none;
    }
    .board_wrapper .table.board_write_table tbody tr td .btn,
    .board_wrapper .table.board_write_table tbody tr td .form-control,
    .board_wrapper .table.board_write_table .input-group.input-group-big,
    .board_wrapper .table.board_write_table .form-control.form-control-big {
        width: 100%;
    }

    #list_btn {
        display: none;
    }
    #write_btn {
        margin: 0;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
}
@media (min-width: 992px) and (max-width: 1199px) {
}
/* //서브페이지 */

/* 푸터 */

footer {
    text-align: left;
    padding: 4rem 0;
    color: #999;
    font-size: 1.3rem;
    background: #f2f2f2;
}
footer .footer-logo {}
footer .footer-logo h1 {
    margin: 0;
}
footer .footer-logo h1 > a {
    display: block;
}
footer .footer-logo h1 > a > img {
    display: block;
}
footer .footer-text {
}
footer .footer-text p {font-weight: 600;font-size: 1.6rem;}
footer .footer-text ul {
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 2px;
}
footer .footer-text ul:after {
    content: "";
    clear: both;
    display: table;
}
footer .footer-text ul li {
    float: left;
    margin-right: 1.8rem;
    line-height: 1.4;
}

footer .footer-text ul li.comp {
    font-weight: 600;
    font-size: 1.4rem;
    color: #6f6f6f;
}
footer .footer-text ul li b{margin-right: 0.6rem;font-weight: 600;}
footer .footer-text ul li address {
    margin-bottom: 0;
    line-height: 1.4;
}
footer .footer-text .copyrights {
    display: block;
    font-size: 1.2rem;
    margin-top: 1.2rem;
    color: #bbb;
}

@media (max-width: 767px) {
}
@media (min-width: 768px) and (max-width: 991px) {
}
@media (min-width: 992px) and (max-width: 1199px) {
}
/* //푸터 */

.maintenance {
    margin-top: 0.5rem;
    border: 7px solid #e5e5e5;
    padding: 5rem 2.5rem;
    text-align: center;
}
.maintenance .icon {
    display: block;
    line-height: 1;
    font-size: 6.4rem;
    margin-bottom: 1rem;
}
.maintenance .big-cont {
    display: block;
    line-height: 1;
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: -0.05em;
    margin-bottom: 2rem;
}
.maintenance .small-cont {
    display: block;
    line-height: 1.5;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    color: #818181;
    margin-bottom: 2rem;
}
.member_wrapper {
    max-width: 117rem;
}