@charset "UTF-8";

:root {
    --color-green-ec: #ECF6EB
}

/* 카테고리 */
.board-category {
    width: 100%;
}
.board-category .category-depth {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.board-category .category-depth > li {
    margin: 0 var(--space-5)
}
.board-category .category-depth > li > button {
    padding: var(--space-8) var(--space-15);
    font-size: var(--font-size-16);
    font-weight: var(--fw-light);
    background-color: var(--color-lightgray);
    color: var(--color-gray);
    border-radius: 10000000000px;
    text-align: var(--align-center);
}
.board-category .category-depth > li > button:hover,
.board-category .category-depth > li > button.on {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--fw-bold);
}
    /* 카테고리 미디어쿼리 */
    @media all and (max-width: 1023px) {
        .board-category .category-depth > li {
            margin-bottom: var(--space-10);
        }
    }
    @media all and (max-width: 767px) {
        .board-category .category-depth > li {
            margin: 0 3px;
            margin-bottom: var(--space-6);
        }
        .board-category .category-depth > li > button {
            padding: var(--space-5) var(--space-10);
            font-size: var(--font-15);
            font-weight: var(--fw-normal);
        }
    }

/* 텍스트형 게시판 */
/* .board-list {
    width: 100%;
    border-top: 2px solid var(--color-dark);
}
.board-list .board-head {
    background-color: var(--board-bg);
    border-bottom: 1px solid var(--color-darkgray);
    color:var(--color-dark);
    font-weight: var(--color-bold);
}
.board-list .board-head {
    padding: var(--space-20) 0;
}
.board-list .list,
.board-view .subject-area,
.poduct-list .list {
    border-bottom: 1px solid var(--color-darkgray);
}
.board-list .list,
.board-view .subject-area {
    padding: var(--space-25) 0;
}
.board-list .board-head,
.board-list .list {
    display: flex;
    align-items: center;
    font-size: var(--font-18);
}
.board-list .board-head .number-th,
.board-list .list .number {
    flex:1.9;
    text-align: center;
}
.board-list .board-head .subject-th {
    text-align: center;
}
.board-list .board-head .subject-th,
.board-list .list .subject {
    flex:13.5;
}
.board-list .board-head .date-th,
.board-list .list .date {
    flex:2.7;
    text-align: center;
}
.board-list .board-head .file-th,
.board-list .list .file {
    flex:2.36;
    text-align: center;
}
.board-list .list .subject a {
    font-size: 20px;
    font-weight: 600;
}
.board-list .list .subject a:hover {
    color: var(--color-orange);
}
.board-list .list .number,
.board-list .list .date {
    font-weight: 400;
    color: #363636;
    display: flex;
    justify-content: center;
    align-items: center;
}
    /* 텍스트형 미디어쿼리 */
    @media (max-width: 1699px) {
        .board-list {width: 90%;}
    }
    @media (max-width: 1199px) {
        .board-list .date,
        .board-list .media,
        .board-list .subject {
            font-size: 0.889rem;
        }
        .board-list .list .date {
            width: 18%;
        }
    }
    @media (max-width: 1023px) {
        .board-list {
            width: 100%;
        }
        .board-list .list .contwrap,
        .board-list .list .date {
            padding: 1.5rem 0;
        }
        .board-list .list .date {
            width: 28%;
            text-align: left;
            padding-left: 3%;
        }
        .board-list .contwrap .box-row {
            display: table;
            width: 100%;
        }
        .board-list .contwrap .media,
        .board-list .contwrap .subject {
            width: 100%;
            display: block;
            text-align: left;
        }
        .board-list .contwrap .media {
            margin-bottom: 0.5rem;
            opacity: 0.8;
        }
        .board-list .subject {
            padding-left: 0;
        }
    }
    @media (max-width: 767px) {
        .board-list .list .contwrap,
        .board-list .list .date {
            display: block;
            width: 100%;
        }
        .board-list .list .date {
            padding: 1.2rem 0 0.5rem;
            border-bottom: 0;
            font-size: 0.778rem;
            opacity: 0.6;
        }
        .board-list .list .contwrap {
            padding: 0 0 1.2rem;
        }
    }

/* 텍스트형 타입2 */
/* normalboard-list */
.normal-board-list {
    border-top: var(--border);
}
/* .normal-board-list .t-head {
    display: flex;
    align-items: center;
    height: 90px;
    background: var(--color-gray-e9)
}
.normal-board-list .t-head .row {
    display: flex;
    align-items: center;
    width: 100%;
}
.normal-board-list .t-head .row .th {
    text-align: center;
}
.normal-board-list .t-head .row .number {
    flex: 0 0 108px;
}
.normal-board-list .t-head .row .subject {
    flex: 1 1 auto;
}
.normal-board-list .t-head .row .date {
    flex: 0 0 188px;
}
.normal-board-list .t-head .row span {
    color: var(--color-dark);
    font-size: var(--font-16);
    font-weight: var(--fw-bold);
} */
.normal-board-list .t-body .row {
    display: flex;
    align-items: center;
    height: clamp(60px, calc(87 / var(--inner) * 100vw), 87px);
    border-bottom: var(--border);
}
.normal-board-list .t-body .row .number-content {
    /* flex: 0 0 clamp(40px, calc(87 / var(--inner) * 100vw), 68px); */
    margin: 0 var(--space-40);
    text-align: center;
}
.normal-board-list .t-body .row .number-content span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(45px, calc(68 / var(--inner) * 100vw), 68px);
    height: clamp(22px, calc(37 / var(--inner) * 100vw), 37px);
    margin: 0 auto;
    font-size: var(--font-16);
    font-weight: var(--fw-bold);
}
.normal-board-list .t-body .row.topic .notice-txt {
    background: var(--color-basic);
    color: var(--color-white);
    font-weight: var(--fw-bold);
    border-radius: var(--border-radius);
}
/* .normal-board-list .t-body .row.topic .notice-txt {
    width: 60px;
} */
.normal-board-list .t-body .row .subject-content {
    flex: 1 1 auto;
    padding: 0 var(--space-30);
    text-align: left;
}
.normal-board-list .t-body .row.topic .subject-content {
    font-weight: var(--fw-bold);
}
.normal-board-list .t-body .row .file-content {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: var(--space-15);
    padding-right: var(--space-15);
}
.normal-board-list .t-body .row .file-content::after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background-color: var(--color-basic);
}
.normal-board-list .t-body .row .file-content img {
    width: clamp(11px, calc(13 / var(--inner) * 100vw), 13px);
}
.normal-board-list .t-body .row .date-content {
    text-align: center;
    white-space: nowrap;
}
.normal-board-list .t-body .row .subject-content a:hover {
    opacity: 0.6;
}
    /* 미디어쿼리 1200px이하 */
    @media all and (max-width: 1200px) {

    }
    @media all and (max-width: 1000px) {
        
    }
    @media all and (max-width: 640px) {
        .normal-board-list .t-body .row {
            position: relative;
            height: auto;
            padding: var(--space-40) var(--space-20) var(--space-40) var(--space-150);
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: flex-start
        }
        .normal-board-list .t-body .row .number-content {
            position: absolute;
            top: var(--space-40);
            left: 0;
            margin: 0;
        }
        .normal-board-list .t-body .row .subject-content {
            flex: 100%;
            margin-bottom: var(--space-20);
            padding: 0;
        }
        .normal-board-list .t-body .row .subject-content .ellipsis1 {
            -webkit-line-clamp: 2;
            word-break: keep-all;
        }
        .normal-board-list .t-head .row .date,
        .normal-board-list .t-body .row .date-content {
            flex: unset;
            font-size: 13px;
        }
        .normal-board-list .t-body .row .file-content img {
            width: 11px;
        }
        .normal-board-list .t-body .row .date-content {
            flex: unset;
        }
    }

/* 갤러리 */
.gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: var(--space-60) var(--space-30);
}
.gallery .post .post-title {
    margin-top: var(--space-20);
    font-size: var(--font-18);
    font-weight: var(--fw-bold);
}
.gallery .post .post-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.gallery .post .post-img img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: var(--transition);
    transform: scale(1);
}
.gallery .post a:hover .post-img img {
    transform: scale(1.01);
}
.gallery .post .post-title-sub {
    color: var(--color-basic);
    margin-top: var(--space-6);
    font-weight: var(--fw-light);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: normal;
}
.gallery .post .period {
    font-size: var(--font-16);
    font-weight: var(--fw-light);
    border-top: var(--border);
    padding-top: var(--space-15);
    margin-top: var(--space-15);
}
    /* 갤러리 미디어쿼리 */
    @media all and (max-width: 1400px) {
        .gallery {
            grid-template-columns: repeat(4, 1fr);
            gap: var(--space-60) var(--space-30);
        }
    }
    @media all and (max-width: 1200px) {
        .gallery {
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-60) var(--space-30);
        }
    }
    @media all and (max-width: 640px) {
        .gallery {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-60) var(--space-30);
        }
    }
    @media all and (max-width: 414px) {
        .gallery {
            grid-template-columns: repeat(1, 1fr);
            gap: var(--space-60) 0;
        }
    }

/* 갤러리 > 호버 이펙트형 */
.gallery-hover {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 64px;
}
.gallery-hover .post .post-link {
    position: absolute;
    top: 0;
    left:0;
    z-index: 3;
    display: block;
    width:100%;
    height:100%
}
.gallery-hover .post .post-img {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 144%;
    overflow: hidden;
}
.gallery-hover .post .post-img img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.gallery-hover .post figure {
    position: relative;
	overflow: hidden;
	text-align: center;
	cursor: pointer;
    transition: .3s ease-out;
}
.gallery-hover .post figure::before {
    content:"";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top: 0;
    display: block;
    z-index: 1;
    transition: .3s ease-out;
}
.gallery-hover .post figure:hover::before {
    background: rgba(0, 0, 0, 0.6);
}
.gallery-hover .post figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
}
.gallery-hover .post figure figcaption {
    padding: var(--space-35) var(--space-40);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    top: auto;
    bottom: 0;
    height: 50%;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    color: var(--color-white);
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}
.gallery-hover .post figure figcaption::before,
.gallery-hover .post figure figcaption::after {
	pointer-events: none;
}
.gallery-hover .post figure figcaption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    z-index: 2;
}
.gallery-hover figure .post-menu {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
    font-size: var(--font-14);
    font-weight: var(--fw-light);
    opacity: 0;
}
.gallery-hover figure .post-title {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
    font-size: var(--font-25);
    font-weight: var(--fw-bold);
    opacity: 0;
}
.gallery-hover figure:hover figcaption,
.gallery-hover figure:hover .post-title,
.gallery-hover figure:hover .post-menu {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
}
.gallery-hover figure:hover .post-menu {
    opacity: 0.8;
}
.gallery-hover figure:hover .post-menu {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.gallery-hover figure:hover .post-title {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
    /* 갤러리 > 호버 이펙트형 미디어쿼리 */
    @media all and (max-width: 1199px) {
        .gallery-hover {
            grid-gap: var(--space-30);
        }
    }
    @media all and (max-width: 1023px) {
        .gallery-hover {
            grid-template-columns: repeat(3, 1fr);
            grid-gap: var(--space-20);
        }
    }
    @media all and (max-width: 767px) {
        .gallery-hover {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: var(--space-10);
        }
    }
    
/* 게시글 상세보기 */
.board-view {
    border-top: 2px solid transparent;
    background-color: var(--color-gray-f8f8f8);
    padding: var(--space-100) var(--space-60)
}
/* .boardView .viewHead,
.boardView .viewFile,
.boardView .viewContent  {
    padding: var(--space-40);
} */
.board-view .view-head {
    border-bottom: var(--border);
    text-align: center;
    padding-bottom: var(--space-40)
}
.board-view .view-title {
    margin-bottom: var(--space-30);
    font-size: var(--font-35);
    font-weight: var(--fw-bold);
    word-wrap: break-word;
}
.board-view .view-date {
    font-size: var(--font-20);
}
.board-view .post-title-Sub {
    font-size: var(--font-25);
    color: var(--color-basic);
    font-weight: var(--fw-medium);
    display: block;
}
.board-view .period {
    font-size: var(--font-20);
    color:var(--color-primary);
}
.board-view .view-file {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* background-color: var(--color-gray); */
    padding: var(--space-20) 0;
    border-bottom: var(--border);
}
.board-view .view-file .file-list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-10) var(--space-20);
    font-size: var(--font-15);
    border:var(--border);
    background-color: var(--color-white);
    
    border-radius: 10000px;
    position: relative;
}
.board-view .view-file .file-list:nth-child(n+2) {
    margin-left: var(--space-10);
}
.board-view .view-file .file-list svg {
    width: clamp(13px, calc(15 / var(--inner) * 100vw), 15px);
    margin-right: var(--space-10);
}
.board-view .view-file .file-list svg Path {
    fill: var(--color-basic)
}
.board-view .view-file .file-list:hover {
    background-color: var(--color-gray);
}
.board-view .view-content {
    font-size: var(--font-20);
    text-align: center;
    padding: var(--space-60) 0 var(--space-100)
}
.board-view .view-content * {
    word-break: break-word;
    font-family: inherit !important;
    font-size: inherit !important;
    background: transparent !important;
}
.board-view .view-content img {
    width: auto;
    margin:0 auto
}

/* Board Form */
.board-form .input-area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0 var(--space-10);
}
.board-form .input-box {
    height: clamp(50px, calc(60 / var(--inner) * 100vw), 60px);
    padding:0 var(--space-25);
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-20);
    transition: all 0.3s;
    border: var(--border);
}
.board-form .input-box:hover,
.board-form .input-box:focus {
    border: 1px solid var(--color-primary);
}
.board-form .input-box > label,
.board-form .input-box strong {
    font-size: var(--font-18);
    display: flex;
    align-items: center;
    color: var(--color-dark);
    font-weight: var(--fw-bold);
}
.board-form .input-box > label {
    width:125px;
    border-right: var(--border)
}
.board-form .essential-mak {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-right: var(--space-5);
    font-size: var(--font-16);
    padding-top: 7px;
}
.board-form .input-style {
    color: var(--color-dark);
    font-size: inherit
}
.board-form .input-style[type="text"] {
    width: calc(100% - 127px);
    height:63px;
    padding-left: var(--space-15);
    background-color: transparent;
}
.board-form .input-style[type="text"]::placeholder,
.board-form textarea::placeholder {
    font-size: var(--font-16);
    font-weight: var(--fw-light);
    color:var(--color-darkgray)
}
.board-form .input-textarea,
.board-form .input-policy {
    width:100% !important;
    padding-top: var(--space-25);
    padding-bottom: var(--space-25);
    align-items: flex-start;
    flex-direction: column;
}
.board-form .input-textarea {
    height: 225px;
}
.board-form .input-textarea > label,
.board-form .input-textarea > strong {
    width:100% !important;
    max-width: 100% !important;
    border-right:0;
    border-bottom: 0;
    padding-bottom: var(--space-15)
}
.board-form .input-textarea > label {
    border-bottom: var(--border)
}
/* .board-form .input-textarea > label {
    margin-bottom: var(--space-15)
} */
.board-form .file-input {
    width: 100%;
    padding-right: 0
}
.board-form .file-input .file_attach {
    width: calc(100% - 180px);
    height: 62px;
    padding-left: var(--space-20);
    background-color: var(--color-gray);
}
.board-form .file-input .file_attach::placeholder {
    color: var(--color-dark);
    font-weight: var(--fw-medium);
}
.board-form .file-input label {
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    position: absolute;
    right: 8px;
    top: 8px;
    width:103px;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    background-color: var(--color-graye1);
    font-size: var(--font-16);
    font-weight: var(--fw-normal);
    color: var(--color-dark)
}
.board-form .file-input label:hover {
    background-color: var(--color-dark);
    color:var(--color-white)
}
.board-form .file-input input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* 개인정보수집 동의 */
.board-form .input-box.input-policy {
    height: 393px;
    background-color: var(--color-gray);
    text-align: left;
}
.board-form .input-policy .input-title {
    width:100%;
    max-width:none;
    padding-bottom: var(--space-15);
    margin-bottom:var(--space-10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: var(--border);
    border-right:0
}
.board-form .input-policy .input-privacy {
    width:100%;
    height:300px;
    overflow-y:scroll;
    padding-bottom: 0
}
.board-form .input-policy .input-privacy .policy-content {
    margin-right: var(--space-20)
}
/* 마케팅 동의 */
.board-form .input-maketing {
    background-color: var(--color-gray);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.board-form .input-maketing > label {
    border-right: 0;
    width: auto !important;
    font-weight: var(--fw-normal);
}
.board-form .input-maketing.input-box > strong {
    width: auto;
}
/* 동의하기 체크 박스 - 타입 A */
.board-form .btn-radio {
    cursor: pointer;
    width:auto !important
}
.board-form .btn-radio svg {
    width: 15px; 
    height: 15px;
    fill: none;
    vertical-align: middle;
}
.board-form .btn-radio svg circle {
    stroke-width: 1;
    stroke: var(--color-gray1);
}
.board-form .btn-radio:hover svg circle {
    stroke-width: 1;
    stroke: var(--color-primary);
}
.board-form .btn-radio svg path {
    stroke: var(--color-primary);
}
.board-form .btn-radio svg path.inner {
    stroke-width: 6;
    stroke-dasharray: 19;
    stroke-dashoffset: 19;
}
.board-form .btn-radio svg path.outer {
    stroke-width: 1;
    stroke-dasharray: 57;
    stroke-dashoffset: 57;
}
.board-form .btn-radio input {
    display: none;
}
.board-form .btn-radio input:checked + svg path {
    transition: all 0.4s ease;
}
.board-form .btn-radio input:checked + svg path.inner {
    stroke-dashoffset: 38;
    transition-delay: 0.3s;
}
.board-form .btn-radio input:checked + svg path.outer {
    stroke-dashoffset: 0;
}
.board-form .btn-radio span {
    display: inline-block;
    vertical-align: middle;
    color: var(--color-gray1);
    font-size: var(--font-15);
    transition: var(--transition);
}
.board-form .btn-radio:hover span {
    color: var(--color-orange);
}
/* 동의하기 체크 박스 - 타입 B */
.agree-box {
    display: flex;
    align-items: center;
    position: relative;
}
.agree-box input[type=checkbox].switch {
    --active: var(--color-primary);
    --active-inner: var(--color-white);
    --focus: 2px rgba(0, 0, 0, .2);
    --border: var(--color-white);
    --border-hover: var(--color-primary);
    --background: var(--color-gray);
    --disabled: var(--color-basic);
    --disabled-inner: var(--color-basic);
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 23px;
    height: 10px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    top: 0;
    cursor: pointer;
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    border-radius: 11px;
    border:0
}
.agree-box input[type=checkbox].switch:after {
    content: "";
    display: block;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    left: -6px;
    top: -3px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background: var(--ab, var(--active));
    transform: translateX(var(--x, 0));
}
.agree-box input[type=checkbox].switch:checked {
    --b: var(--background);
    --bc: var(--background);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
    --ab: var(--active);
    --x: 16px;
    background-color: var(--color-basic);
}
/* .agree-box input[type=checkbox].switch:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
}
.agree-box input[type=checkbox].switch:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
} */
.agree-box input[type=checkbox].switch + label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 8px;
    color: var(--color-white);
    font-size: var(--font-15);
}
.agree-box span {
    font-size: var(--font-16);
    margin-left: var(--space-10);
    font-weight: var(--fw-bold);
}
    /* Contact 미디어쿼리 */
    @media all and (max-width: 1199px) {
        .board-form .input-area {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media all and (max-width: 1023px) {
        .board-form .input-area {
            margin-top: var(--space-20);
            flex-direction: column;
        }
        .board-form .input-box {
            width:100%;
            padding: var(--space-15) var(--space-15);
            margin-bottom: var(--space-15);  
        }
        .board-form .input-area .input-box:not(:last-of-type) {
            margin-right: 0;
        }
        .board-form .input-style,
        .board-form .input-box > label,
        .board-form .input-box strong,
        .board-form .input-policy .input-title {
            font-size: var(--font-16)
        }
        .board-form .input-style[type="text"] {
            width: calc(100% - 105px);
        }
        .board-form .input-box > label,
        .board-form .input-box > strong {
            width:105px;
        }
        .board-form .input-box.input-policy {
            height:230px;
        }
    }
    @media all and (max-width: 767px) {
        .board-form .input-area {
            grid-template-columns: repeat(1, 1fr);
        }
        .board-form .essential-mak {
            padding-top: 0;
            font-size: var(--font-14);
        }
        .board-form .input-box {
            padding: var(--space-15) var(--space-10);
            margin-bottom: var(--space-10);
            height:50px
        }
        .board-form .input-style,
        .board-form .input-box > label,
        .board-form .input-box strong,
        .board-form .input-policy .input-title {
            font-size: var(--font-15)
        }
        .board-form .input-style[type="text"] {
            width: calc(100% - 95px);
            height:48px;
            padding-left: var(--space-10)
        }
        .board-form .input-box > label,
        .board-form .input-box > strong {
            width:95px;
        }
        .board-form .input-style[type="text"]::placeholder,
        .board-form textarea::placeholder,
        .board-form .btn-radio span,
        .agree-box span {
            font-size: var(--font-14)
        }
        .board-form .input-textarea,
        .board-form .input-policy {
            padding: var(--space-15) var(--space-10)
        }
        .board-form .input-textarea {
            height: 180px;
        }
        .board-form .input-textarea > label, 
        .board-form .input-textarea > strong {
            padding-bottom: var(--space-10)
        }
        .agree-box span {
            margin-left: var(--space-5);
        }
        .board-form .file-input .file_attach {
            height: 48px;
            padding-left: var(--space-10);
            margin-right:54px
        }
        .board-form .file-input label {
            font-size: var(--font-12);
            width: 20%;
            top: 2px;
            right: 2px;
            height: 45px
        }
        .board-form .input-policy .input-title {
            padding-bottom: var(--space-10);
            margin-bottom: var(--space-5);
        }
        .board-form .input-box.input-policy {
            height:230px;
        }
        .board-form .input-policy .input-privacy * {
            font-size: var(--font-14)
        }
    }

/* 문의하기 FlexBox 타입 */
.board-form-a .input-box {
    position: relative;
    margin-bottom: var(--space-60);
    transition: all 0.3s;
    padding-left: var(--space-35);
}
.board-form-a .input-box:last-of-type {
    margin-bottom: 0
}
.board-form-a .input-title {
    font-size: var(--font-20);
    margin-bottom: var(--space-20);
    display: flex;
    align-items: center;
    font-weight: var(--fw-bold);
    width: 100%;
}
.board-form-a .input-title .essential-mak {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    left: 0;
    width: clamp(16px, calc(22 / var(--inner) * 100vw), 22px);
}
.board-form-a .input-title .essential-mak svg {
    width: 100%;
}
.board-form-a .input-style,
.board-form-a .input-policy {
    width: 100%;
    font-size: inherit;
    background-color: rgba(236, 246, 235, 0.6);
}
.board-form-a .input-style[type="text"],
.board-form-a .file-input .file_attach {
    height: clamp(50px, calc(60 / var(--inner) * 100vw), 60px);
    padding-left: var(--space-25);
    border-radius: var(--radius-10);
    border: 1px solid rgba(236, 246, 235, 0.6);
}
.board-form-a .input-textarea textarea {
    height: 250px;
    padding: var(--space-25);
    border-radius: var(--radius-10);
}
.board-form-a .input-style[type="text"]::placeholder,
.board-form-a .input-textarea textarea::placeholder,
.board-form-a .file-input .file_attach::placeholder {
    font-size: var(--font-16);
}
.board-form-a .input-box input,
.board-form-a .input-box textarea {
    transition: var(--transition);
}
.board-form-a .input-box input:hover,
.board-form-a .input-box input:focus,
.board-form-a .input-box textarea:hover,
.board-form-a .input-box textarea:focus {
    border: 1px solid var(--color-primary);
}
.board-form-a .input-textarea,
.board-form-a .input-policy {
    width:100% !important;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.board-form-a .input-textarea > label,
.board-form-a .input-textarea > strong {
    width:100% !important;
    max-width: 100% !important;
    border-right:0;
    border-bottom: 0;
}
.board-form-a .file-input {
    width: 100%;
    padding-right: 0;
    position: relative;
    border-radius: var(--space-10);
}
.board-form-a .file-input .file_attach {
    width: calc(100% - 92px);
    border-radius: var(--radius-10) 0 0 var(--radius-10);
}
.board-form-a .file-input label {
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    position: absolute;
    right: 0;
    top: 0;
    width:92px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    background-color: var(--color-basic);
    font-size: var(--font-15);
    color:var(--color-white);
    border-radius: 0 var(--radius-10) var(--radius-10) 0;
}
.board-form-a .file-input label:hover {
    background-color: var(--color-primary);
}
.board-form-a .file-input input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
/* 개인정보수집 동의 */
.board-form-a .input-policy {
    color: var(--color-basic);
    padding: var(--space-25);
    border-radius: var(--radius-10);
}
.board-form-a .input-policy .input-privacy {
    width:100%;
    height:300px;
    overflow-y:scoll;
    overflow-x:hidden;
    padding-bottom: 0;
    text-align: left;
}
.board-form-a .input-policy .input-privacy .policy-content {
    margin-right: var(--space-20)
}
.board-form-a .input-policy .input-policy-agree {
    margin-top: var(--space-20);
    padding-top: var(--space-15);
    border-top: var(--border);
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
/* 문의내용 체크박스 */
.board-form-a .checkboxArea ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.board-form-a .checkboxArea ul > li {
    display: flex;
    align-items: center;
    margin-right: 5.5%;
    white-space: nowrap;
}
.en .board-form-a .checkboxArea ul > li {
    padding: var(--space-5) 0
}
.board-form-a .checkboxArea input {
    width:18px;
    height: 18px;
    background-color: var(--color-gray-e5);
}
.board-form-a .checkboxArea label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: var(--fw-medium);
    color: var(--color-dark);
}
.en .board-form-a .checkboxArea label {
    font-size: var(--font-15);
}
.board-form-a .checkboxArea .checkbox {
    position: relative;
    margin: 0 9px 0 0;
    cursor: pointer;
}
.board-form-a .checkboxArea .checkbox:before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 1;
    width: 12px;
    height: 8px;
    border: 2px solid var(--color-white);
    border-top-style: none;
    border-right-style: none;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    -moz-transition: -moz-transform 0.3s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    transition: transform 0.3s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    -webkit-transform: rotate(-45deg) scale(0, 0);
    -moz-transform: rotate(-45deg) scale(0, 0);
    -ms-transform: rotate(-45deg) scale(0, 0);
    -o-transform: rotate(-45deg) scale(0, 0);
    transform: rotate(-45deg) scale(0, 0);
}
.board-form-a .checkboxArea .checkbox:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    background: transparent;
    cursor: pointer;
}
.board-form-a .checkboxArea .checkbox:checked:before {
    -webkit-transform: rotate(-45deg) scale(1, 1);
    -moz-transform: rotate(-45deg) scale(1, 1);
    -ms-transform: rotate(-45deg) scale(1, 1);
    -o-transform: rotate(-45deg) scale(1, 1);
    transform: rotate(-45deg) scale(1, 1);
}
.board-form-a .checkboxArea .checkbox:checked {
    background: var(--color-primary);
}
    /* Contact 미디어쿼리 */
    @media all and (max-width: 1200px) {

    }
    @media all and (max-width: 1000px) {
        .inquiry .board-form-a {
            width: 100%;
            border-left: 0;
            padding-left: 0;
        }
    }
    @media all and (max-width: 640px) {
        .board-form-a .input-textarea textarea {
            height: 200px
        }
        .board-form-a .file-input .file_attach {
            width: calc(100% - 55px);
        }
        .board-form-a .file-input label {
            width: 55px;
        }
        .board-form-a .input-box.input-policy {
            height:230px;
        }
    }

/* FAQ */
.faq-list {
    border-top: var(--border)
}
.faq-list .list {
    border-bottom: var(--border);
    cursor: pointer;
}
.faq-list .questions,
.faq-list .answer {
    display: flex;
    padding: var(--space-22) var(--space-50);
    position: relative;
}
.faq-list .icon {
    flex: 0 0 50px;
    height: 32px;
    font-size: var(--font-15);
    font-weight: var(--fw-bold);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    margin-right: 3.5%
}
.faq-list .questions .icon {
    background-color: var(--color-primary);
}
.faq-list .answer .icon {
    background-color: var(--color-basic);
}
.faq-list .faqText {
    flex: 1 1 auto;
    white-space: wrap;
    font-size: var(--font-18);
    padding-right: var(--space-30);
}
.faq-list .questions .faqText {
    font-weight: var(--fw-semibold);
}
.faq-list .questions {
    align-items: center;
}
.faq-list .questions .arrow {
    display: block;
    transform: rotate(-180deg);
    transition: var(--transition);
    right: var(--space-50);
}
.faq-list .questions .arrow img {
    width: 14px;
}
.faq-list .questions .arrow.on {
    transform: rotate(0);
}
.faq-list .answer {
    background-color: var(--color-gray-light);
}
.faq-list .answer .faqText {
    margin-top: var(--space-5);
}
    /* FAQ 미디어쿼리 */
    @media all and (max-width:1200px) {
        .faq-list .questions,
        .faq-list .answer {
            padding: var(--space-20) var(--space-30)
        }
        .faq-list .icon {
            flex: 0 0 35px;
            height: 23px;
            font-size: var(--font-12);
        }
        .faq-list .answer .faqText {
            margin-top: 0
        }
    }
    @media all and (max-width:1000px) {
        .faq-list .questions,
        .faq-list .answer {
            padding: var(--space-20)
        }
        .faq-list .questions {
            align-items: flex-start;
        }
    }
    @media all and (max-width:640px) {
        .faq-list .questions,
        .faq-list .answer {
            padding: var(--space-15) var(--space-10)
        }
        .faq-list .icon {
            flex: 0 0 30px;
            height: 20px;
            font-size: var(--font-11);
        }
        .faq-list .faqText {
            font-size: var(--font-15);
        }
        .faq-list .faqText {
            flex: 1 1 calc(100% - 30px);
        }
        .faq-list .questions .arrow {
            right: var(--space-10);
        }
        .faq-list .questions .arrow img {
            width: 10px;
        }
    }


/* board-total */
.board-total {
    font-size: var(--font-18);
}

/* 검색영역 */
.search-area {
    overflow: hidden;
    width: clamp(210px, calc(370 / var(--inner) * 100vw), 370px);
    border-radius: var(--border-radius);
}
.search-area form {
    width: 100%;
    display: flex;
    background-color: var(--color-gray-f8f8f8);
    overflow: hidden;
}
.search-area .form-input,
.search-area .form-select,
.search-area .form-button {
    min-width: 0;
    height: clamp(35px, calc(70 / var(--inner) * 100vw), 70px);
}
.search-area .form-input,
.search-area .form-select {
    padding: 0 var(--space-10);
    border-right: 0;
    color: var(--color-basic);
    font-size: var(--font-16);
}
.search-area .form-select {
    flex: 0 1 100px;
    padding: 0 var(--space-25);
    background-position: right var(--space-10) center;
    background-size: 11px auto;
    background-image: url("/views/board/bootstrap/images/icon-select.svg") ;
    background-repeat: no-repeat;
    background-color: transparent;
}
.search-area .form-input {
    flex: 1 1 auto;
    background-color: transparent;
}
.search-area .form-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 clamp(30px, calc(40 / var(--inner) * 100vw), 40px);
    background: transparent;
}
.search-area .form-button img {
    width: clamp(13px, calc(18 / var(--inner) * 100vw), 18px);
}
    

/* 게시판 하단 & 버튼 */
.board-bottom {
    display: flex;
    justify-content: center;
}
.board-bottom .btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(45px, calc(60 / var(--inner) * 100vw), 60px);
    padding: 0 var(--space-30);
    border: var(--border);
    transition: var(--transition);
    font-size: var(--font-20);
    font-weight: var(--fw-bold);
}
.board-bottom .btn-submit:hover {
    background-color: var(--color-basic);
    color: var(--color-white);
}
.board-bottom .btn-submit svg {
    width: clamp(11px, calc(15 / var(--inner) * 100vw), 15px);
    margin-left: var(--space-10);
}
.board-bottom .btn-submit svg path,
.board-bottom .btn-submit svg rect {
    transition: var(--transition);
}
.board-bottom .btn-submit:hover svg path,
.board-bottom .btn-submit:hover svg rect {
    fill: var(--color-white)
}
/* 페이징 */
.pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--space-100)
}
.pagination .paging-number {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 var(--space-10);
    font-size: var(--font-15);
    border-radius: var(--border-radius);
    transition: var(--transition);
}
.pagination .current,
.pagination .paging-number:hover {
    color: var(--color-white);
    font-weight: var(--fw-bold);
    background-color: var(--color-basic);
}
.pagination .paging-prev,
.pagination .paging-next {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pagination .paging-next {
    margin-left: var(--space-20)
}
.pagination .paging-prev {
    margin-right: var(--space-20)
}
.pagination .paging-prev a:hover,
.pagination .paging-next a:hover {
    opacity: 0.5;
}
.pagination .paging-prev img,
.pagination .paging-next img {
    width: 8px
}

/* 페이징 > 더보기형 */
/* .paginationMore {
    width:380px;
    height: 90px;
    margin:auto;
    margin-top: var(--space-100);
    font-size: var(--font-18);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border:2px solid var(--color-dark);
    transition: var(--transition);
    font-weight: var(--fw-bold);
}
.paginationMore:hover {
    background-color: var(--color-lightgray);
} */
    /* 페이징 > 더보기형 미디어쿼리 */
    /* @media all and (max-width:1199px) {
        .paginationMore {
            width:300px;
            height: 80px;
            margin-top: var(--space-60);
        }
    }
    @media all and (max-width:1023px) {
        .paginationMore {
            width:200px;
            height: 60px;
            margin-top: var(--space-50);
            font-size: var(--font-16);
        }
    }
    @media all and (max-width:767px) {
        .paginationMore {
            width:160px;
            height:50px;
            margin-top: var(--space-30);
            font-size: var(--font-15);
        }
    } */