@charset "utf-8";
@import url("/skin/notokr/notokr.css");
:root {
    /* font-family */
    --page-font-family: "Pretendard Variable", "notokr", sans-serif;
    /* page global color */
    --page-point-color: #175d91;
    --page-point-color-light: #e1e8fa;
    --page-point-color-dark: rgb(9, 38, 112);
    --page-point-color-hover: var(--page-point-color-dark);
    --page-danger-color: #f32222;
    --page-danger-color-hover: #cc0a0a;
    --page-dark-color: #4f5356;
    --page-dark-color-hover: #333;
    --page-grey-color: #d5d5d5;
    --page-grey-color-hover: #c4c4c4;
    /* navbar */
    --navbar-height: clamp(60px, 10vw, 100px);
    /* container */
    --container-padding-inline: 15px;
    /* snb */
    --snb-height: 67px;
    /* common */
    --radius: 15px;
    --svh100: 100svh;
    /* board */
    --form-height: 47px;
    --radius-sm: 7px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    /* 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);
}
/* svh 미지원 */
@supports not (max-height: 100svh) {
    :root {
        --svh100: 100vh;
    }
}
/* material-symbols */
.material-symbols-outlined {
    font-family: var(--gms) !important;
    overflow: hidden;
    display: inline-flex;
    line-height: 1;
    font-variation-settings: var(--gms-300-out), var(--gms-grad-zero);
    user-select: none;
}
html {
    overflow-x: hidden;
    overflow-y: scroll;
}

.body-layout {
    display: none;
    background-color: #fff;
    padding-top: 150px;
}

.body-layout > br {
    display: none;
}

@media (max-width: 768px) {
    .body-layout {
        padding-top: 147px;
    }
}

/* 폰트 설정 */
.body-layout,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
button {
    font-family: "notokr", "NanumGothic", "나눔고딕", "NanumBarunGothic", "Apple SD Neo Gothic", "Malgun Gothic", "Gulim", sans-serif;
}

ol,
ul,
li {
    list-style: none;
    list-style-position: inside;
}

p,
li,
dd,
dt {
    font-size: 16px;
}

a:hover,
a:focus {
    text-decoration: none;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    word-break: keep-all;
}
/* list-style */
:where(ol, ul)[class*="li-"] {
    display: flex;
    flex-direction: column;
}
:where(img) + :where(ol, ul)[class*="li-"] {
    margin-top: 20px;
}
:where(ol, ul)[class*="li-"] > li {
    position: relative;
    padding-left: 0.8em;
}
.li-check > li {
    position: relative;
    padding-left: 1.3em;
    font-size: 15px;
}
:where(ol, ul)[class*="li-"] small {
    font-size: 0.85em;
}
/* circle */
.li-cir > li {
    margin-bottom: 3px;
}
[lang="en-US"] .li-cir > li {
    font-size: clamp(13px, 2vw, 14px);
}
.li-cir > li::before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: 0;
    display: block;
    width: 0.3em;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--page-point-color);
}
/*list style*/
.li-none > li {
    list-style: none !important;
    margin-left: 20px;
}

.li-circle > li {
    list-style: circle !important;
    margin-left: 20px;
}

.li-square > li {
    list-style: square !important;
    margin-left: 20px;
}

.li-disc > li {
    list-style: disc !important;
    margin-left: 20px;
}

.li-check > li,
.li-dash > li,
.li-dot > li {
    margin-left: 10px;
    padding-left: 20px;
    position: relative;
}

.li-dash > li:before,
.li-dot > li:before {
    content: "-";
    display: block;
    position: absolute;
    left: 5px;
    top: 0;
}

.li-dot > li:before {
    content: "";
    width: 4px;
    height: 4px;
    background: #aaa;
    border-radius: 50%;
    left: 0;
    top: 10px;
}

.li-check > li:before {
    content: "\f00c";
    left: 0;
    font-family: "fontawesome";
    color: #ed1c24;
}

/* ---------- 테이블 ---------- */
.table-style {
    margin: 0 0 20px;
    border-top: 2px solid #ed1c24;
}

.table-style tr th,
.table-style tr td {
    padding: 10px 10px !important;
    border-bottom: 1px solid #dedede !important;
    letter-spacing: -0.02em;
    word-break: keep-all;
    vertical-align: middle !important;
}

.table-style tr th {
    color: #333;
    text-align: center;
}

.table-style thead tr th {
    background: #f8f8f8;
}

.table-style tr td {
    color: #666;
}

/* ---------- 주문폼 ---------- */
#mod_type_formForm {
    max-width: 850px;
    margin: 0 auto 60px;
}

.q_number {
    margin: 0 0 20px 0;
}

.q_number div h3 {
    font-size: 15px;
    color: #2f2f2f;
    margin: 0 0 6px !important;
    display: block;
    font-weight: 500 !important;
}

.q_number div h3 i {
    display: none;
}

.q_number .form-control {
    border-radius: 0;
    margin-bottom: 0px;
    box-shadow: none;
    background: #fff;
    border: 1px solid #cad2d8;
    min-height: 42px;
    padding: 10px 12px;
}

.q_number .form-control:focus {
    border-color: #146db8;
}

.q_number textarea {
    width: 100% !important;
    height: 200px;
}

.q_number.checkBox-wrap p {
    font-size: 13px;
}

.checkBox-wrap .col-sm-1 {
    width: auto;
    padding-right: 2px !important;
}

#mod_type_formForm .btn-primary {
    width: 180px;
    color: #fff;
    background-color: #146db8;
    text-align: center;
    font-size: 15px;
    padding: 20px 0;
    line-height: 1;
    font-weight: 500;
    border-radius: 4px;
    box-shadow: none;
    border: none;
    margin: 0 auto;
    transition: all ease 0.3s;
}

#mod_type_formForm .btn-primary:hover {
    background: #00185a;
}

#mod_type_formForm .btn-wrap {
    float: none !important;
    margin: 10px 0 0;
    padding: 0 !important;
}

.form-horizontal .checkbox,
.form-horizontal .radio {
    padding-top: 0;
    text-align: right;
}

.form-horizontal .checkbox label,
.form-horizontal .radio label {
    font-size: 13px;
    margin-right: 0;
    padding-left: 20px;
}

.form-horizontal .checkbox label input,
.form-horizontal .radio label input {
    margin-top: 4px;
}

@media (min-width: 767px) {
    #mod_type_formForm .name-wrap,
    #mod_type_formForm .email-wrap,
    #mod_type_formForm .tel-wrap,
    #mod_type_formForm .company-wrap,
    #mod_type_formForm .email-wrap {
        float: left;
        width: 50%;
    }

    #mod_type_formForm .q_number > div {
        padding: 0 15px 0 0;
    }
}

@media (max-width: 768px) {
    .checkBox-wrap .col-sm-1 {
        float: left;
        width: 10%;
    }

    .checkBox-wrap div:nth-child(n + 2) {
        float: right;
        width: 90%;
    }
}

/* ---------- 네비게이션 ---------- */
.navbar .caret,
.navbar .divider-vertical,
.navbar ~ br,
.footer-social-layout,
.footer_copy .text-center > br,
.topmarginLay_a {
    display: none;
}

.navbar-inverse {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
}

.navbar-inverse .container {
    max-width: 1400px;
    width: 100%;
}

.navbar-inverse .navbar-brand {
    color: #333;
    margin-left: 0 !important;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0 10px;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
    color: #333;
}

.navbar-brand img {
    margin-top: 0;
}
.navbar-brand img + img {
    height: 18px;
}

@media screen and (min-width: 768px) {
    .navbar-inverse .navbar-nav > li > a {
        padding: 40px 12px;
        font-size: 17px;
        font-weight: 600;
        color: #333;
        -webkit-text-shadow: none;
        text-shadow: none;
    }

    .navbar-inverse .navbar-nav > li > a .glyphicon {
        line-height: 0;
    }

    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus,
    .navbar-inverse .navbar-nav > li:hover > a,
    .navbar-inverse .navbar-nav > li:focus > a,
    .navbar-inverse .navbar-nav > .open > a,
    .navbar-inverse .navbar-nav > .open > a:hover,
    .navbar-inverse .navbar-nav > .open > a:focus,
    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus {
        -webkit-box-shadow: none;
        box-shadow: none;
        background-color: transparent;
        color: #146db8;
    }
}

@media screen and (min-width: 768px) {
    .navbar-nav > li > .dropdown-menu {
        left: 0;
        right: auto;
        animation-fill-mode: both;
        animation-duration: 0.5s;
        animation-name: fadeInRight;
        -webkit-border-radius: 0;
        border-radius: 0;
        border: none;
        background-color: #fff;
    }
}

@media screen and (max-width: 768px) {
    [lang="kr"] .navbar-brand img {
        height: 48px;
    }
    [lang="kr"] .navbar-brand img:last-of-type {
        height: 15px;
    }
    /* .navbar-brand img + img{
    height: 12px;
} */

    .navbar-header,
    .navbar-inverse .navbar-collapse {
        border-bottom: 1px solid #eee;
    }

    .navbar-inverse .navbar-brand {
        margin: 15px !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px 0;
    }

    .navbar-inverse .navbar-toggle,
    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus {
        margin: 30px 15px;
        background-color: #fff;
        border-color: #146db8;
    }

    .navbar-inverse .navbar-toggle .icon-bar {
        background-color: #146db8;
    }

    .navbar-inverse .navbar-nav > li > a,
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
        padding: 13px 15px;
        font-weight: 600;
        color: #333;
    }

    .navbar-inverse .navbar-nav > .open > a,
    .navbar-inverse .navbar-nav > .open > a:focus,
    .navbar-inverse .navbar-nav > .open > a:hover {
        background: #146db8;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        font-weight: 600;
    }
}

.dropdown-menu > li > a {
    padding: 7px 25px;
    font-size: 15px;
    color: #222;
    font-weight: 500;
    text-transform: uppercase;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: transparent;
    color: #146db8;
    text-decoration: none;
}

/* 상단 - 다국어 */
.menu-top {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.pu-btn.lang {
    float: right;
    background: #fff;
    padding: 5px 12px;
    font-size: 12px;
    color: #333;
    border-left: 1px solid #eee;
    border-right: 0.5px solid #eee;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-radius: 4px;
    font-weight: 500;
}

.pu-btn.lang + .pu-btn.lang {
    margin-right: 10px;
}

.pu-btn.lang.active {
    text-decoration: none;
    background: #012f5e;
    color: #fff;
}

/* ---------- 로그인 ---------- */
.login-layout,
.id-find-layout,
.pw-find-layout {
    background: #f2f6f8;
    padding: 100px 15px;
    margin-top: -35px;
}

.login-layout .panel,
.id-find-layout .panel,
.pw-find-layout .panel {
    box-shadow: none;
    max-width: 500px;
    padding: 80px 40px 80px;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 0px;
}

.login-layout .panel hr,
.id-find-layout .panel hr,
.pw-find-layout .panel hr {
    display: none;
}

.login-layout .panel .panel-body,
.id-find-layout .panel .panel-body,
.pw-find-layout .panel .panel-body {
    padding: 0;
}

.login-layout .panel-body > div.col-sm-12,
.id-find-layout .panel-body > div.col-sm-12,
.pw-find-layout .panel-body > div.col-sm-12 {
    float: none;
}

.login-layout .panel-body > div.col-sm-12 h2,
.id-find-layout .panel-body > div.col-sm-12 h2,
.pw-find-layout .panel-body > div.col-sm-12 h2 {
    text-align: center;
    margin: 0 0 15px;
    line-height: 1;
    color: #222;
    font-size: 32px;
}

.inner-box-msg {
    width: 100%;
    text-align: center;
    float: none;
    margin-bottom: 30px;
    padding: 0;
}

.inner-box-msg p {
    font-size: 14px;
    letter-spacing: -0.03em;
    color: #555;
    margin: 0;
}

.inner-box-form {
    width: 100%;
    float: none;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
}

.login-layout label,
.id-find-layout label,
.pw-find-layout label {
    font-size: 16px;
    letter-spacing: -0.03em;
    color: #222;
    font-weight: 500;
    margin: 0 0 10px;
    line-height: 1;
}

.login-layout .form-control,
.id-find-layout .form-control,
.pw-find-layout .form-control {
    box-shadow: none;
    border-radius: 0px;
    border: 1px solid #cad2d8;
    height: 40px;
    color: #555;
    font-size: 15px;
    letter-spacing: -0.03em;
}

.login-layout .form-control:focus,
.id-find-layout .form-control:focus,
.pw-find-layout .form-control:focus {
    border-color: #146db8;
}

.login-layout .btn-warning,
.id-find-layout .btn-warning,
.pw-find-layout .btn-warning {
    float: none;
    width: 100%;
    height: 50px;
    background: #146db8;
    border-radius: 4px;
    border: none;
    font-size: 15px;
    letter-spacing: -0.03em;
    box-shadow: none;
    margin-top: 15px;
    transition: all ease 0.3s;
}

.login-layout .btn-warning:hover,
.id-find-layout .btn-warning:hover,
.pw-find-layout .btn-warning:hover {
    background: #00185a;
}

.login-layout form > div > p,
.id-find-layout form > div > p,
.pw-find-layout form > div > p {
    width: 50%;
    margin: 0;
    float: left;
    text-align: center;
    line-height: 1;
}

.login-layout form > div > p + p,
.id-find-layout form > div > p + p,
.pw-find-layout form > div > p + p {
    border-left: 1px solid #ccc;
}

.login-layout form > div > p > a,
.id-find-layout form > div > p > a,
.pw-find-layout form > div > p > a {
    font-size: 14px;
    color: #555;
    letter-spacing: -0.03em;
    display: block;
    padding: 2px 0;
}

@media (max-width: 768px) {
    .login-layout,
    .id-find-layout,
    .pw-find-layout {
        padding: 20px 15px;
    }

    .login-layout .panel,
    .id-find-layout .panel,
    .id-find-layout .panel {
        padding: 40px;
    }

    .login-layout .panel-body > div.col-sm-12 h2,
    .id-find-layout .panel-body > div.col-sm-12 h2,
    .pw-find-layout .panel-body > div.col-sm-12 h2 {
        font-size: 24px;
    }

    .inner-box-msg p {
        font-size: 12px;
    }

    .login-layout label,
    .id-find-layout label,
    .pw-find-layout label {
        font-size: 14px;
    }

    .login-layout .form-control,
    .id-find-layout .form-control,
    .pw-find-layout .form-control {
        font-size: 13px;
        height: 36px;
    }

    .login-layout form > div > p > a,
    .id-find-layout form > div > p > a,
    .pw-find-layout form > div > p > a {
        font-size: 12px;
    }

    .login-layout .btn-warning,
    .id-find-layout .btn-warning,
    .pw-find-layout .btn-warning {
        height: 45px;
        font-size: 14px;
        margin-top: 10px;
    }
}

/* ---------- 가로 100% 레이아웃 정의 ---------- */
.container_contents,
.intro-html-layout,
.intro-html-layout > div,
.sub-layout {
    width: 100%;
    padding: 0;
    margin: 0;
}

.intro-board-widget-layout,
.dh-board,
.dh-view-box,
.bbs-list-view-layout + .row,
#mailForm,
#mod_type_formForm,
#insertForm {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
}

/* 어드민 */
.join-view-layout {
    background: #e8e8e8;
    padding-top: 20px;
}

.join-view-layout > p {
    display: none;
}

#joinForm {
    margin: 100px auto 0;
    width: 1170px;
}

@media (max-width: 768px) {
    .join-view-layout {
        padding: 15px;
    }

    #joinForm {
        margin: 0;
        width: 100%;
    }
}

/* ---------- 메인페이지 ---------- */

/* 슬라이드 */
.container_slide {
    width: 100%;
    margin: 0;
    padding: 0;
}

.container_slide > .fill,
.carousel-inner .item .fill {
    height: 650px;
}

.carousel-caption {
    margin: 0;
    padding: 0;
    left: 50%;
    right: auto;
    top: 46%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 1170px;
    text-align: left;
}

#myCarousel .carousel-caption span {
    opacity: 1;
    padding: 0;
    background: transparent;
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
}

.carousel-caption h1 {
    margin: 0;
    font-size: 60px;
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.01em;
    position: relative;
}

/* .carousel-caption h1:before{
	content:"";
	width:60px;
	height:6px;
	background:#fff;
	box-shadow:0 0 6px rgba(0,0,0,0.5);
	display:block;
	margin-left:2px;
	margin-bottom:40px;
} */
.carousel-caption p {
    margin: 13px 0 0;
    font-size: 21px;
    color: #fff;
    font-weight: 500;
}

.carousel-indicators li,
.carousel-indicators li.active {
    margin: 0 7px;
    width: 12px;
    height: 12px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
}

.carousel-indicators li.active {
    background: #97da00;
}

.carousel-control {
    display: none;
}

@media (max-width: 767px) {
    .container_slide > .fill,
    .carousel-inner .item .fill {
        height: 500px;
    }

    .carousel-caption h1 {
        font-size: 4rem;
    }
}

ul.list-contact {
    display: flex;
    flex-wrap: wrap;
    margin: 40px -15px 0;
}
ul.list-contact > li {
    flex-basis: 25%;
    -ms-flex-preferred-size: calc(25% - 30px);
    padding: 0 15px;
}
ul.list-contact > li .inner {
    height: 100%;
    position: relative;
    padding: 30px 15px;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    transition: all 0.25s;
}
ul.list-contact > li .inner:hover {
    border-color: #01264d;
    transform: translateY(-15px);
}
ul.list-contact > li .inner::before,
ul.list-contact > li .inner::after {
    content: "";
    width: 0;
    position: absolute;
    border-top: 3px solid #01264d;
    transition: all 0.25s;
}
ul.list-contact > li .inner::before {
    top: 0;
    left: 0;
}
ul.list-contact > li .inner::after {
    right: 0;
    bottom: 0;
}
ul.list-contact > li .inner:hover::before,
ul.list-contact > li .inner:hover::after {
    width: 100%;
}
ul.list-contact > li h4 {
    margin: 20px 0 20px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}
ul.list-contact > li .info {
    font-size: 15px;
    line-height: 1.6em;
    color: #000;
}
ul.list-contact > li:not(:first-child) h4 {
    margin-bottom: 25px;
}
ul.list-contact > li:not(:first-child) .info {
    font-size: 17px;
}

@media (max-width: 768px) {
    .main-tit {
        font-size: 3.8rem;
    }

    .main-tit:after {
        top: 1px;
    }

    /* .main-content .sec3 .contact-info {
        padding: 15px;
    } */

    /* .main-content .sec3 article:last-child {
        margin-right: 0;
    } */

    ul.list-contact > li {
        flex-basis: 100%;
    }
    ul.list-contact > li + li {
        margin-top: 15px;
    }
    ul.list-contact > li .inner:hover {
        transform: none;
    }
    ul.list-contact > li h4 {
        margin: 18px 0 15px !important;
    }

    .main-content .sec3 .q_number {
        margin: 0 -15px 20px -15px;
    }
}

/* 메인 sec4 */
/* .main-content .sec4 {
    position: relative;
}

.main-content .sec4:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #f2f6f8;
    z-index: -1;
} */

/* ---------- 푸터 ---------- */
.footer_copy * {
    line-height: 1.65;
    font-size: 13px;
}

.footer_copy > div {
    padding: 40px 0;
    /* background: #01264D; */
    background: rgb(8, 83, 143);
    background: linear-gradient(125deg, rgba(8, 83, 143, 1) 0%, rgba(8, 53, 100, 1) 70%);
    background: linear-gradient(135deg, #3ab3e8, #0c3c64);
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    text-align: left;
}

.footer_copy li span:after {
    content: "|";
    padding: 0 5px;
}

.footer_copy li span:last-child:after {
    content: "";
    padding: 0;
}

.footer-wrap address {
    margin: 0;
}

.footer-wrap .copy {
    margin-top: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 767px) {
    .footer_copy li span {
        display: block;
    }

    .footer_copy li span:after {
        display: none;
    }
}

/* ---------- 서브페이지 ---------- */
.sub-top {
    position: relative;
    height: 260px;
    background: url(/skin/img/sub/sub-top01.jpg) no-repeat center/cover;
}

.sub-top h1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1140px;
    margin: 0;
    font-size: 45px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}

.sub-top .bread-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0;
    text-align: right;
}

.sub-top .breadcrumb {
    margin: 0 auto;
    padding: 10px 15px;
    max-width: 1140px;
    background: transparent;
}

.sub-top .breadcrumb li {
    font-size: 13px;
    color: #fff;
}

.sub-top .breadcrumb li.active {
    color: #fff;
}

.sub-top .breadcrumb li + li:before {
    content: ">";
    padding: 0 10px;
    color: #fff;
}

.sub-content {
    padding: 100px 0;
}

.sub-con-tit {
    margin: 0 0 25px;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
}

.con-dec {
    margin: 0 0 90px;
    text-align: center;
}

@media (max-width: 767px) {
    .sub-top {
        height: 230px;
    }

    .sub-top h1 {
        font-size: 36px;
    }
}

/* 게시판 */
.text-bbs6 .dh-board,
.text-bbs7 .dh-board {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.dh-board .dhb-txt-box {
    float: left;
    width: 100%;
    height: 200px;
    margin: 0;
    padding: 15px;
    overflow: hidden;
}

.dh-board .dhb-txt-box:nth-child(odd) {
    margin-right: 15px;
}

.dh-board .dhb-txt-box .dhb-txt-list h4 strong a {
    /* display: inline-block; */
    width: 100%;
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;

    height: 45px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.3em;
}

.dh-board .dhb-txt-box .dhb-txt-list h4 strong small {
    display: none;
}

.dh-board .dhb-txt-box .dhb-txt-list h5 {
    float: left;
    width: 75%;
}

.dh-board .dhb-txt-box .dhb-txt-list h5 a {
    line-height: 1.6;
    font-size: 15px;
}

.dh-board .dhb-txt-box .dhb-txt-list .no-contents {
    display: none;
}

.dh-board .dhb-txt-box .text-right .hits {
    display: none;
}

.dh-board .dhb-txt-box .text-right h5 em span {
    line-height: 1.4;
}

.dh-board .pagination li {
    display: inline-block;
    text-align: center;
}

.dh-board .pagination li + li {
    margin-left: 10px;
}

.dh-board .pagination li a {
    padding: 6px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.btn-primary {
    background: #146db8;
    border-color: #146db8;
}

.dh-view-box .page-header h4 {
    margin: 25px 0;
    font-size: 22px;
}

/* TEXT 게시판 */
.dh-board .dhb-txt-box > .dhb-txt-list {
    width: 100%;
    border-right: none;
}
.dh-board .dhb-txt-box > .text-right {
    display: none;
}

/* GALLERY */
#bbs02 .con-dec {
    font-size: 19px;
    line-height: 1.7em;
}
html[lang="en"] #bbs02 .wrap-con-dec {
    text-align: center;
}
html[lang="en"] #bbs02 .con-dec {
    display: inline-block;
    text-align: left;
}
/* 게시글 상세 */
#bbs02 .dh-view-box img {
    max-width: 600px;
}

/* 블로그 게시판 */
/* .bbs-blog2-index-layout .dh-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
} */
.bbs-blog2-index-layout .dh-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.bbs-blog2-index-layout .clearfix.visible-xs {
    display: none;
}
.bbs-blog2-index-layout .dhb-txt-box-type-b {
    width: 100%;
    padding: 15px;
}
/* .bbs-blog2-index-layout .dhb-txt-box-type-b:nth-child(odd) {
    margin-right: 7.5px;
}
.bbs-blog2-index-layout .clearfix+.dhb-txt-box-type-b {
    margin-right: 0;
    margin-left: 7.5px;
} */
.bbs-blog2-index-layout .dhb-txt-box-type-b .dhb-txt-box-type-b-text-layout {
    float: unset;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 15px 0 20px;
}
.bbs-blog2-index-layout .dhb-txt-box-type-b .row {
    display: flex;
    flex-direction: row-reverse;
}
.dhb-txt-box-type-b-text-layout h4 {
    height: 45px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    margin: 10px 0;
    font-size: 18px;
    line-height: 1.3em;
}
.dhb-txt-box-type-b-text-layout h4 small {
    display: none;
}
.dhb-txt-box-type-b-text-layout .txt-box-footer {
    float: unset;
    display: flex;
    flex-direction: column-reverse;
    margin: 0;
    text-align: left;
    font-style: italic;
    line-height: 1.55em;
    display: none;
}
.dhb-txt-box-type-b-text-layout .txt-box-footer br {
    display: none;
}
.dhb-txt-box-type-b-text-layout .txt-box-footer .hits {
    display: none;
}
.bbs-blog2-index-layout .dhb-txt-box-type-b .dhb-txt-box-type-b-img-layout {
    float: unset;
    width: 50%;
    padding: 0 15px 0 20px;
}
.dhb-txt-box-type-b-img-layout .thumb-hidden {
    height: auto;
    max-height: none;
    aspect-ratio: 4 / 3;
    border: none;
    box-shadow: none;
}
.dhb-txt-box-type-b-img-layout .thumb-hidden img {
    min-height: 195px;
}
.bbs-blog2-index-layout .dh-margin-top {
    grid-column: span 2;
}

@media (max-width: 767px) {
    .dh-board .dhb-txt-box {
        width: 100%;
    }

    .dh-board .dhb-txt-box + .dhb-txt-box {
        margin: 15px 0 0;
    }

    .dh-board .dhb-txt-list {
        border-right: none;
    }

    #bbs02 .con-dec {
        font-size: 16px;
        line-height: 1.5em;
    }
    .bbs-blog2-index-layout .dh-board {
        grid-template-columns: 1fr;
        gap: 15px 0;
    }
    .bbs-blog2-index-layout .dhb-txt-box-type-b .row {
        flex-direction: column;
    }
    .bbs-blog2-index-layout .dhb-txt-box-type-b .dhb-txt-box-type-b-img-layout,
    .bbs-blog2-index-layout .dhb-txt-box-type-b .dhb-txt-box-type-b-text-layout {
        width: 100%;
        padding: 0 15px;
    }
    .dhb-txt-box-type-b-text-layout h4 {
        height: 42px;
        margin: 20px 0 10px;
        font-size: 16px;
    }

    #bbs02 .dh-view-box img {
        max-width: 100%;
    }
}

/* new 250304 */
.main-content section {
    overflow: hidden;
}
.main-content .pb-0 {
    padding-bottom: 0 !important;
}
.main-content .container {
    max-width: 1400px;
    width: 100%;
}
.main-content .title {
    position: relative;
    padding-block: clamp(80px, 10vw, 130px) 0px;
    /* background-color: #f2f6f8; */
}
.main-content .title .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(/skin/img/main/t-bg.jpg) no-repeat center / cover;
    z-index: -1;
}
.main-content .title span {
    color: var(--page-point-color);
    font-size: clamp(14px, 2vw, 20px);
}
.main-content .title h2 {
    font-size: clamp(32px, 3vw, 46px);
    font-weight: 500;
    line-height: 1.3;
    margin-top: 10px;
}
.main-content .title h2[lang="en-US"] {
    letter-spacing: -0.02em;
}
.main-content .title:has(.bg) {
    color: #fff;
    background-color: transparent;
    /* background-color: #000; */
    padding-bottom: 70px;
}
.main-content .title:has(.bg) span {
    color: inherit;
}
@media (max-width: 767.98px) {
    .main-content .title {
        text-align: center;
    }
}
.main-content .con {
    position: relative;
    padding-block: clamp(40px, 10vw, 70px) 150px;
}
.main-content .con .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(/skin/img/main/c-bg.jpg) no-repeat center / cover;
    z-index: -1;
}
.main-content .con:has(.bg) {
    margin-top: 50px;
}
.m-ceo-wrap {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 100px;
    align-items: flex-start;
}
.m-ceo-wrap .info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}

.m-ceo-wrap dt {
    background-color: var(--page-point-color);
    color: #fff;
    padding: clamp(15px, 2vw, 20px) 50px;
    border-radius: 4px;
    text-align: center;
    font-size: clamp(16px, 3vw, 20px);
    margin-bottom: 20px;
}
.m-ceo-wrap .profile {
    position: relative;
}
.m-ceo-wrap .profile img {
    width: 80%;
    background-color: #ccc;
    aspect-ratio: 4/5;
}
.m-ceo-wrap .profile p {
    font-weight: 700;
    margin: 15px 0 0 20px;
    font-size: clamp(15px, 2vw, 18px);
}
.m-ceo-wrap .p-bg {
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 705px;
    height: 160%;
    background: url(/skin/img/main/profile-bg.jpg) no-repeat center / cover;
    opacity: 0.7;
}
@media (max-width: 767.98px) {
    .m-ceo-wrap {
        /* display:flex; */
        /* flex-direction:column; */
        grid-template-columns: minmax(0, 1fr);
    }
    .m-ceo-wrap .info {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .m-ceo-wrap .profile .inner {
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .m-ceo-wrap .profile p {
        margin: 0;
        text-align: center;
        margin-top: 30px;
    }
    .m-ceo-wrap .p-bg {
        left: -40px;
        top: -30px;
        height: 150%;
    }
}
.m-history-wrap {
    display: flex;
    gap: 30px;
}
.m-history-wrap .col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.m-history-wrap .col ul {
    margin-bottom: 40px;
}
.m-history-wrap .col li {
    margin-bottom: 10px;
}
.m-history-wrap .col img {
    max-width: 150px;
}

.m-history-wrap .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    border-radius: 9999px;
    background-color: #0f3e61;
    /* color: #fff; */
    max-width: 100px;
    width: 100%;
    margin-bottom: 20px;
}

.m-history-wrap .icon span.material-symbols-outlined {
    color: #ffc000;
    font-size: 42px;
}
.m-history-wrap h4 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
}
@media (max-width: 767.98px) {
    .m-history-wrap {
        max-width: 300px;
        margin-inline: auto;
        flex-direction: column;
    }
}

.m-service-wrap .inner {
    display: flex;
    gap: 50px;
}
.m-service-wrap .col {
    flex: 1;
}
.m-service-wrap .img-box {
    height: clamp(150px, 25vw, 250px);
    margin-bottom: 40px;
    width: 100%;
    background-color: #ccc;
}
.m-service-wrap .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.m-service-wrap .box {
    position: relative;
    padding: 50px 30px 20px;
    background-color: #f7f7f7;
    border-radius: 10px;
    margin-bottom: 30px;
    height: 220px;
}
.m-service-wrap .inner[lang="en-US"] .box {
    height: 370px;
}
.m-service-wrap .box span.num {
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--page-point-color);
    color: #fff;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    width: 40px;
    aspect-ratio: 1;
}
.m-service-wrap .box h4 {
    font-size: clamp(18px, 3vw, 24px);
    margin-top: 0;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--page-point-color);
    text-align: center;
}
.m-service-wrap [lang="en-US"] .box h4 {
    font-size: clamp(20px, 3vw, 21px);
    height: 110px;
    display: flex;
    justify-content: center;
    /* align-items: center; */
}
@media (max-width: 767.98px) {
    .m-service-wrap .inner {
        flex-direction: column;
    }
    .m-service-wrap .box {
        height: auto !important;
    }
    .m-service-wrap [lang="en-US"] .box h4 {
        height: auto;
    }
}
.m-exp-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 100px;
    align-items: center;
    margin-top: 50px;
}
.m-exp-wrap .details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.m-exp-wrap .details .item {
    background-color: rgb(23 93 145 / 70%);
    aspect-ratio: 1;
    padding: 30px;
    text-align: center;
    text-align: left;
    color: #fff;
}
.m-exp-wrap .details .item h4 {
    font-size: clamp(16px, 2vw, 20px);
    opacity: 0.8;
}
.m-exp-wrap .details .item p {
    font-size: clamp(26px, 3vw, 34px);
    margin-bottom: 20px;
}
.m-exp-wrap .details .item small {
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.7;
}
.m-exp-wrap .details[lang="en-US"] .item p {
    font-size: 22px;
}
.m-exp-wrap .details[lang="en-US"] .item small {
    font-size: 15px;
}
.m-exp-wrap thead,
.m-exp-wrap th,
.m-exp-wrap .table {
    background-color: transparent !important;
    border: 0;
}
.m-exp-wrap .col :is(th, td) {
    color: #fff;
    font-size: 12px;
    text-align: center;
}
.m-exp-wrap .col tbody td {
    border: 0 !important;
}
@media (max-width: 767.98px) {
    .m-exp-wrap .details {
        grid-template-columns: minmax(0, 1fr);
        max-width: 300px;
        margin-inline: auto;
    }
    .m-exp-wrap {
        grid-template-columns: minmax(0, 1fr);
    }
}
.m-net-wrap {
    display: grid;
    grid-template-columns: minmax(0, 10fr) minmax(0, 2fr);
    gap: 3px;
    @media (max-width: 767.98px) {
        display: flex;
        flex-direction: column;
    }
    [locale="us"] {
        --color: #5b9bd5;
    }
    [locale="ge"] {
        --color: #ed7d31;
    }
    [locale="ch"] {
        --color: #ffc000;
    }
    [locale="uk"] {
        --color: #4472c4;
    }
    [locale="jp"] {
        --color: #a5a5a5;
    }

    [locale="ca"] {
        --color: #70ad47;
    }
    [locale="sw"] {
        --color: #9e480e;
    }
    [locale="in"] {
        --color: #636363;
    }
    [locale="fr"] {
        --color: #255e91;
    }
    [locale="ne"] {
        --color: #997300;
    }
    [locale="cz"] {
        --color: #264478;
    }
}
.m-net-wrap .info {
    display: grid;
    grid-template-rows: repeat(12, minmax(0, 55px));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    @media (max-width: 767.98px) {
        display: flex;
        flex-direction: column;
    }
    [rowspan="12"] {
        grid-row: span 12;
    }
    [rowspan="7"] {
        grid-row: span 7;
    }
    [rowspan="6"] {
        grid-row: span 6;
    }
    [rowspan="5"] {
        grid-row: span 5;
    }
    [colspan="2"] {
        grid-column: span 2;
    }
    [locale="jp"] {
        grid-column: 2;
    }
    .subgrid {
        grid-row: 6 / span 7;
        grid-column: 3 / span 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
        @media (max-width: 767.98px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    .col[locale],
    .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px;
        background-color: var(--color);
        color: #fff;
    }
    h5 {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 0;
    }
    ul {
        li {
            font-size: 14px;
        }
    }
}

.m-net-wrap .list {
    display: flex;
    flex-direction: column;
    .i01 {
        flex: 1;
        padding: 25px;
        background-color: #f7f7f7;
        li {
            display: flex;
            margin-bottom: 15px;
            align-items: center;
            font-size: clamp(15px, 2vw, 17px);
            letter-spacing: -0.02em;
        }
        li::before {
            content: "";
            width: 15px;
            aspect-ratio: 1;
            margin-right: 7px;
            background-color: var(--color);
        }
    }
    .i02 {
        padding: 25px;
        background-color: #eee;
        ul {
            display: grid;
            gap: 5px 10px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            li {
                display: flex;
                align-items: center;
                font-size: 14px;
            }
            li::before {
                content: "";
                width: 5px;
                margin-right: 5px;
                aspect-ratio: 1;
                border-radius: 9999px;
                background-color: #444;
            }
        }
    }
}