/* to embed a font : https://fonts.google.com/ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.cdnfonts.com/css/campton');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* document --------------------------- */
*, *::after, *::before {
    box-sizing: border-box;
}

html, body {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 62.5%; /* 1rem = 10px */
    /* web font + system font */
    font-family: 'Roboto', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-weight: 400;
    letter-spacing: -.02rem;
    color: #222;
    /* smoothing font */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    /* mouse drag none */
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/* typography --------------------------- */
h1, h2, h3, h4, h5, h6 {
    clear: both;
    margin: 0;
    padding: 0;
}

b, strong {
    /* add the correct font weight in Chrome, Edge, and Safari */
    font-weight: 700;
}

/* list style --------------------------- */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* embedded content --------------------------- */
img {
    /* remove the border on images inside links in IE 10 */
    border-style: none;
}

/* form --------------------------- */
button, input, textarea, select, option {
    /* web font + system font */
    font-family: 'Roboto', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    /* Remove the inheritance of text transform in Edge, Firefox and IE. */
    text-transform: none;
    background-color: transparent;
    /* Show the overflow in Edge and IE. */
    overflow: visible;
    cursor: pointer;
}

button:disabled, input:disabled {
    cursor: not-allowed;
}

button, [type='button'], [type='reset'], [type='submit'] {
    /* correct the inability to style clickable types in iOS and Safari */
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
}

[type='checkbox'], [type='radio'] {
    /* remove the padding in IE 10 */
    padding: 0;
}

textarea {
    width: 100%;
    /* remove the default vertical scrollbar in IE 10+ */
    overflow: auto;
    resize: none;
}

/* link --------------------------- */
a {
    color: var(--black);
    text-decoration: none;
    /* remove the gray background on active links in IE 10 */
    background-color: transparent;
    cursor: pointer;
}

a:visited, a:hover, a:focus, a:active {
    color: var(--black);
    outline: 0;
    text-decoration: none;
}

:focus {
    outline: none;
}

/* misc --------------------------- */
[hidden] {
    /* add the correct display in IE 10 */
    display: none;
}

.desktop-only {
    display: inherit;
}

.mobile-only {
    display: none;
}

@media screen and (max-width: 768px) {
    .desktop-only {
        display: none!important;
    }

    .mobile-only {
        display: inherit;
    }
}

/* root ----------------------- */
:root {
    /* color */
    --black: #000000;
    --white: var(--white)fff;

    --red900: #980020;
    --red800: #C8102E; /* main color */
    --red700: #DA163A;
    --red600: #E72343;
    --red500: #E93E55; /* sub color */
    --red400: #FF808B;
    --red300: #FF9EA7;
    --red200: #FECBD4;
    --red50: #FBECEE;

    --brown: #AB6C22; /* point color */
    --light-brown: #F5EDE4;

    --gray900: #121212;
    --gray800: #1C1C1C;
    --gray700: #2B2B2B;
    --gray600: #424243;
    --gray500: #747479;
    --gray400: #BDBEC0;
    --gray300: #D7D8DA;
    --gray200: #E3E5E9;
    --gray100: #F2F3F6;

    --pink: #D54C79;
    --yellow: #F6B22A;
    --green: #00704A;

    --system-red: #FF3529;
    --system-blue: #236CD9;
}

/* clearfix */
.clearfix {/*  IE 6,7 */ zoom: 1;}
.clearfix::before,
.clearfix::after {content: ''; display: table;}
.clearfix::after {clear: both;}

/* font style */
.price {font-size: 2.2rem; font-weight: 700;}
.won {font-size: 1.8rem; font-weight: initial;}
.sale {color: var(--gray400); text-decoration:line-through;}

/* font size */
.font14 {font-size: 1.4rem!important;}
.font16 {font-size: 1.6rem!important;}
.font18 {font-size: 1.8rem!important;}
.font20 {font-size: 2.0rem!important;}
.font22 {font-size: 2.2rem!important;}

/* font weight */
.font500 {font-weight: 500;}
.font600 {font-weight: 600;}
.font700 {font-weight: 700;}

/* align */
.position-center {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.position-center-top {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.position-center-left {position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}

.alignLeft, .alignLeft td {text-align: left;}
.alignRight, .alignRight td {text-align: right;}
.alignCenter, .alignCenter td {text-align: center;}

/* color */
.font-red {color: var(--red800)!important;}
.navy {color: var(--red800)!important;}
.brown {color: var(--brown)!important;}
.brown-light {color: var(--light-brown)!important;}
.red {color: var(--red800)!important;}
.blue {color: #236CD9!important;}
.blue-bold {color: #1e457c!important;}
.gray {color: var(--gray500)!important;}

/* input */
input {width: 100%; height: 4.4rem; border: 1px solid var(--gray200); background-color: var(--white); border-radius: .4rem; padding: 0 1.2rem; font-size: 1.4rem; cursor: auto;}

input[type='checkbox'] {display: none;}
input[type='checkbox'] + label {display: flex; column-gap: .6rem; cursor: pointer;}
input[type='checkbox'] + label::before {content: ''; margin-top: 1rem; width: 1.6rem; height: 1.6rem; background-image: url(../img/ico/ic-checkbox.svg); background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}
input[type='checkbox']:checked + label::before {background-image: url(../img/ico/ic-checkbox-ov.svg);}
input[type='checkbox'] + label > span {font-size: 1.2rem; flex: 1;}
input[type='checkbox'] + label > p {font-size: 1.2rem; font-weight: 500; text-align: left; flex: 1;}

input[type='checkbox']:checked:disabled + label::before,
input[type='checkbox']:checked.readonly + label::before {background-image: url(../img/ico/ic-checkbox-none@2x.png);}

table input[type='checkbox'] + label {width: fit-content;}
table input[type='checkbox'] + label::before {margin: 0 auto;}

.radio-wrap {display: flex; align-items: center;}
.radio-wrap > li + li {margin-left: 1rem;}
.radio-wrap > li > input[type='radio'] + label > span {top: 0;}

input[type='radio'] {display: none;}
input[type='radio'] + label {display: flex; align-items: center; column-gap: .6rem; cursor: pointer;}
input[type='radio'] + label::before {content: ''; width: 2rem; height: 2rem; background-image: url(../img/ico/ic-radio.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
input[type='radio'] + label > span {font-size: 1.4rem; font-weight: 500;}
input[type='radio'] + label > p {font-size: 1.4rem; font-weight: 500; text-align: left;}

input[type='radio']:checked:disabled + label::before,
input[type='radio']:checked.readonly + label::before {background-image: url(../img/ico/ic-radio-none@2x.png);}

input[type='radio']:checked + label::before {background-image: url(../img/ico/ic-radio-ov.svg);}
input[type='radio'].readonly + label > span,
input[type='radio'].readonly + label::before,
input[type='radio']:disabled + label > span,
input[type='radio']:disabled + label::before {cursor: default;}

@media screen and (max-width: 767px) {
    input {height: 4rem;}
    input[type='checkbox'] + label > p,
    input[type='radio'] + label > p {font-size: 1.2rem;}
}

input[type='date'] {height: 4rem; line-height: 4rem; padding-left: 1rem; border: 1px solid var(--gray200); background-color: var(--white); background-image: url(../img/ico/ic-calendar@2x.png); background-repeat: no-repeat; background-position: right 1rem center; background-size: 2rem auto; cursor: pointer; font-size: 1.2rem; color: var(--gray500); font-weight: 500;}
input[type='date']::-webkit-outer-spin-button, input[type='date']::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type='date']::-webkit-calendar-picker-indicator {opacity: 0;}

.file-text {height: 4rem; border: 1px solid var(--gray200); background-color: var(--white); padding: 0 1rem; font-size: 1.2rem; cursor: initial;}
input[type='file'] {display: none;}
input[type='file'] + label {display: inline-block; margin-left: 1rem; width: 14rem; height: 4rem; line-height: 4rem; color: var(--white); background-color: var(--gray500); text-align: center; font-size: 1.4rem; cursor: pointer;}

.file {display: flex; align-items: center; grid-gap: .8rem;}
.file + .file {margin-top: .8rem;}
.file > div {display: flex; align-items: center; grid-gap: .8rem;}
.file > div > label {width: 8rem; height: 4.4rem; display: flex; align-items: center; justify-content: center; border-radius: .4rem; background-color: var(--gray500); font-size: 1.4rem; font-weight: 600; color: var(--white);}

@media screen and (max-width: 767px) {
    .file {flex-wrap: wrap;}
    .file input[type='text'],
    .file > div {width: 100%;}
    .file > div > * {margin: 0!important;}
    .file > div > *:nth-child(1):nth-last-child(1) {width: 100%!important;}
    .file > div > *:nth-child(1):nth-last-child(2), .file > div > *:nth-child(1):nth-last-child(2) ~ * {width: calc((100% - .8rem) / 2)!important;}
}

.date-range {display: flex; align-items: center; justify-content: space-between;}
.date-range > li:nth-child(2) {font-size: 1.2rem; color: var(--gray500); margin: 0 .4rem;}

.address {display: flex; flex-flow: column; row-gap: 1.2rem;}
.address > li {display: flex; align-items: center; column-gap: .8rem;}
.address > li input {flex: 1;}
.address > li:nth-child(1) input {width: 24rem; flex: initial;}
.address > li button {background-color: var(--gray500); width: 11.2rem;}

.gender {display: flex; align-items: center; column-gap: 2rem;}

.birth {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .8rem;}
.birth > li * {width: 100%;}

@media screen and (max-width: 767px) {
    .address {row-gap: .8rem;}
    .address > li {flex-flow: column; row-gap: .8rem;}
    .address > li input {flex: initial;}
    .address > li button {width: 100%;}
    
    .gender {display: flex; align-items: center; column-gap: 2rem;}
    
    .birth {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .8rem;}
    .birth > li * {width: 100%;}
}

/* select */
select {height: 4.4rem; border-radius: .4rem; border: 1px solid var(--gray200); background-color: var(--white); padding: 0 4rem 0 1rem; font-size: 1.4rem; font-weight: 500; color: var(--gray500); background-image: url(../img/ico/ic-arrow-down@2x.png); background-repeat: no-repeat; background-size: 2rem auto; background-position: right 1rem center; -webkit-appearance: none; appearance: none;}
select::-ms-expand {display: none;/*for IE10,11*/}

/* textarea */
textarea {width: 100%; min-height: 12rem; font-size: 1.2rem; line-height: 1.6; border: 1px solid var(--gray200); padding: 2rem; cursor: initial;}

/* button */
button {width: fit-content; padding: 0 1.6rem; min-width: 4rem; height: 4.4rem; border-radius: .4rem; display: flex; align-items: center; justify-content: center; column-gap: .4rem; line-height: 1; font-size: 1.4rem; font-weight: 500; border: 0; cursor: pointer; background-color: var(--red800); color: var(--white)!important; white-space: nowrap;}
button.navy {background-color: var(--red800); color: var(--white)!important;}
button.brown {background-color: #424243; color: var(--white)!important;}
button.red {background-color: #ee2529; color: var(--white)!important;}
button.blue {background-color: #236CD9; color: var(--white)!important;}
button.gray {background-color: var(--gray500); color: var(--white)!important;}
button.line {background-color: var(--white); color: var(--gray500)!important; border: 1px solid #dbdbdb;}
button.line-red {background-color: var(--white); color: var(--red800)!important; border: 1px solid var(--red800);}
button.line:disabled {color: #dbdbdb!important; cursor: inherit;}
button:disabled {background-color: var(--gray300); cursor: default;}

@media screen and (max-width: 767px) {
    button {height: 4rem; padding: 0 1rem;}
}
/* count num */
.count-num {width: fit-content; margin: 0 auto; border-top: 1px solid var(--gray200); border-right: 1px solid var(--gray200); display: grid; grid-template-columns: repeat(3, 1fr);}
.count-num > li {width: 3rem; height: 3rem; background-repeat: no-repeat; background-size: 1.2rem; background-position: center; background-color: #f4f4f4; border-left: 1px solid var(--gray200); border-bottom: 1px solid var(--gray200);}
.count-num > li:nth-child(1) {background-image: url(../img/ico/ic-count-minus@2x.png);}
.count-num > li:nth-child(3) {background-image: url(../img/ico/ic-count-plus@2x.png);}
.count-num > li > input[type="text"] {border: none; width: 100%; height: 100%; padding: 0; text-align: center;}

/* label */
.label {display: inline-flex; align-items: center; justify-content: center; width: fit-content; height: 1.8rem; padding: 0 .4rem; font-size: 1rem; font-weight: 500; color: var(--white); background-color: var(--red800); line-height: 1; border-radius: .2rem;}

.label.navy {background-color: var(--red800); color: var(--white)!important;}
.label.brown {background-color: #424243; color: var(--white)!important;}
.label.red {background-color: #ee2529; color: var(--white)!important;}
.label.line-red {border: 1px solid var(--red800)!important; background-color: var(--white)!important; color: var(--red800)!important;}
.label.blue {background-color: #236CD9; color: var(--white)!important;}
.label.gray {background-color: var(--gray500); color: var(--white)!important;}
.label.event {background-color: #FBECEE; color: var(--red800)!important;}

/* list style */
ul.date {display: flex; align-items: center; column-gap: 1.1rem; font-size: 1.4rem; color: var(--gray500);}
ul.date > li {position: relative; display: flex; align-items: center;}
ul.date > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray200); position: absolute; left: -.6rem;}
ul.date > li > span {display: block; width: 6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

ul.file {display: flex; align-items: center; column-gap: 1.2rem; font-size: 1.4rem; color: var(--gray500);}
ul.file > li {display: flex; align-items: center; column-gap: 1.2rem;}
ul.file > li > ul {display: flex; align-items: center; grid-gap: .4rem.8rem; flex-wrap: wrap; flex: 1;}
ul.file > li > ul > li {display: flex; align-items: center; column-gap: .4rem;}

@media screen and (max-width: 767px) {
    ul.file > li > ul {flex-flow: column; align-items: initial;}
    ul.file > li > ul > li p {width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    
}

/* table */
table {position: relative; width: 100%; border-collapse: collapse; border-spacing: 0;}
table::before {content: ''; display: block; width: 100%; height: .2rem; background-color: var(--black); position: absolute; top: -.2rem; left: 0;}
table tr th {font-size: 1.4rem; text-align: center; border-bottom: 1px solid var(--gray200); padding: 1.6rem .8rem; vertical-align: middle; line-height: 1.4; background-color: #f4f4f4; color: var(--gray500); font-weight: 500;}
table tr td {font-size: 1.4rem; text-align: center; border-bottom: 1px solid var(--gray200); padding: 1.6rem .8rem; vertical-align: middle; line-height: 1.4; font-weight: 500;}

table ul.date {justify-content: center;}
table div.table-btn {display: flex; align-items: center; justify-content: center; column-gap: .6rem;}
table div.table-btn button {width: 6.8rem; padding: 0; height: 2.8rem; line-height: 2.7rem; font-size: 1.2rem; margin-top: .5rem;}

@media screen and (max-width: 767px) {
    table tr th {font-size: 1.2rem;}
    table tr td {font-size: 1.4rem; padding: .8rem;}
}

.table-desc {margin: 2rem 0; font-size: 1.4rem; font-weight: 500;}

/* swiper */
.swiper-pagination .swiper-pagination-bullet {background-color: rgba(255,255,255,0.8);}
.swiper-pagination .swiper-pagination-bullet-active {background-color: rgba(255,255,255,1);}

/* item swiper */
.item-swiper {position: relative;}
.item-swiper .swiper-btn {position: absolute; width: 100%; height: 22.4rem; top: 0;}
.item-swiper .swiper-btn .swiper-button-prev,
.item-swiper .swiper-btn .swiper-button-next {width: 5.2rem; height: 5.2rem; background-color: #424243; background-repeat: no-repeat; background-size: 1.2rem auto; background-position: center; border-radius: 100%; box-shadow: 7.7px 6.4px 15px 0 rgba(199, 160, 121, 0.3);}
.item-swiper .swiper-btn .swiper-button-prev::after,
.item-swiper .swiper-btn .swiper-button-next::after {content: '';}
.item-swiper .swiper-btn .swiper-button-prev {left: -2.6rem; background-image: url(../img/ico/btn-arrow-prev-wh@2x.png);}
.item-swiper .swiper-btn .swiper-button-next {right: -2.6rem; background-image: url(../img/ico/btn-arrow-next-wh@2x.png);}
.item-swiper .swiper-btn .swiper-button-disabled {opacity: 0;}

/* depth */
.depth {padding-top: 4rem; margin-bottom: 6rem; display: flex; align-items: center;}
.depth > li {display: flex; align-items: center; font-size: 1.2rem; color: var(--gray500); vertical-align: middle;}
.depth > li + li::before {content: ''; display: block; width: .6rem; height: 1.2rem; margin: 0 1rem;; background-image: url(../img/ico/ic-depth@2x.png); background-repeat: no-repeat; background-position: center; background-size: contain;}
.depth > li:last-child {font-weight: 700; color: var(--red800);}

/* tab menu */
.tab-menu.sticky {position: sticky; top: 13rem; padding-top: 1rem; background-color: var(--white); z-index: 999;}
.tab-menu {display: flex; width: 100%; align-items: center; margin-bottom: 4rem;}
.tab-menu > li {position: relative; height: 6rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--gray500); border-top: 1px solid var(--gray200); border-bottom: .2rem solid var(--red900); background-color: var(--white); cursor: pointer;}
.tab-menu > li:first-child {border-left: 1px solid var(--gray200);}
.tab-menu > li:last-child {border-right: 1px solid var(--gray200);}
.tab-menu > li:not(:first-child)::before {content: '|'; color: var(--gray200); position: absolute; left: -.05rem;}
.tab-menu > li:first-child:nth-last-child(2), .tab-menu > li:first-child:nth-last-child(2) ~ li {width: calc(100% / 2);}
.tab-menu > li:first-child:nth-last-child(3), .tab-menu > li:first-child:nth-last-child(3) ~ li {width: calc(100% / 3);}
.tab-menu > li:first-child:nth-last-child(6), .tab-menu > li:first-child:nth-last-child(6) ~ li {width: calc(100% / 6);}
.tab-menu > li:first-child:nth-last-child(7), .tab-menu > li:first-child:nth-last-child(7) ~ li {width: calc(100% / 7);}
.tab-menu > li.active {border: .2rem solid var(--red900); border-bottom-color: var(--white); font-weight: 700; color: var(--red900);}
.tab-menu > li.active::before, .tab-menu > li.active + li::before {content: none;}

.tab-cont {display: none; width: 100%;}
.tab-cont.active {display: inherit;}

/* cont box */
.cont-box + .cont-box {margin-top: 9rem;}
.cont-box > p {font-size: 1.4rem; font-weight: 700; margin-bottom: 2rem;}
.cont-box > img,
.cont-box > video {width: 100%;}
.cont-box > iframe {width: 100%; max-height: 42rem;}
.cont-box > h6 {font-size: 1.5rem; font-weight: 700; margin-bottom: 1.6rem;}

.cont-box .title {width: 100%; position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 3rem;}
.cont-box .title > h4 {font-size: 2.4rem; font-weight: 700; color: var(--black); display: flex; align-items: center;}
.cont-box .title > h4 > div {padding-left: .6rem;}
.cont-box .title > h4 > span {font-size: 2rem; color: var(--gray500); font-weight: 500; margin-left: .8rem; vertical-align: middle; position: relative; top: -.2rem;}
.cont-box .title > h4 .sub {font-size: 1.2rem; font-weight: initial; margin-left: 1.2rem; top: auto; line-height: 1.4;}
.cont-box .title > h4 .sub > span {font-weight: 500; color: initial;}
.cont-box .title > button {width: 11rem; height: 3rem; line-height: 2.8rem; font-size: 1.2rem; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.cont-box .title .more {position: absolute; right: 0; bottom: 0; font-size: 1.4rem; font-weight: 500; padding-right: 2rem; background-image: url(../img/ico/ic-more1@2x.png); background-repeat: no-repeat; background-size: 1.6rem; background-position: right center; cursor: pointer;}
.cont-box .title .align {position: absolute; right: 0; bottom: 0; font-size: 1.4rem; font-weight: 500; padding-right: 2rem; background-image: url(../img/ico/ic-menu-down@2x.png); background-repeat: no-repeat; background-size: 1.6rem; background-position: right center; cursor: pointer;}
.cont-box .title .align.activer {background-image: url(../img/ico/ic-menu-up@2x.png);}
.cont-box .title .align.active {background-image: url(../img/ico/ic-menu-up@2x.png);}
/* .cont-box .title select {position: absolute; right: 0; bottom: 0; font-size: 1.4rem; padding: 0 3rem 0 1rem; background-image: url(../img/ico/ic-menu-down@2x.png); background-repeat: no-repeat; background-size: 1.6rem; background-position: right .5rem center; cursor: pointer;} */

@media screen and (max-width: 767px) {
    .cont-box > iframe {width: 100%; height: 52vw;}

    .cont-box .title {flex-flow: column; row-gap: 2rem; align-items: flex-start; margin-bottom: 2rem;}
    .cont-box .title > h4 {font-size: 1.8rem; justify-content: space-between; width: 100%;}
    .cont-box .title > h4 .sub {display: block; margin-left: 0; font-size: 1.2rem;}
}
/* search */
.search-con {display: flex; align-items: center; justify-content: center; column-gap: .6rem;}
.search-con > input[type='text'] {width: 20rem;}
.search-con > button {width: 9rem;}

@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 767px) {
    .search-con {display: flex; align-items: center; justify-content: center; column-gap: .6rem; width: 100%;}
    .search-con > select {width: 10rem!important;}
    .search-con > select + input[type='text'] {width: calc(100% - 15rem - 1.2rem);}
    .search-con > input[type='text'] {width: calc(100% - 5rem - .6rem);}
    .search-con > button {width: 5rem;}
}

/* sub box */
.sub-box {background-color: #f4f4f4; padding: 4rem 3rem; display: flex; align-items: center; justify-content: center; margin-bottom: 3rem;}
.sub-box > *:not(:first-child) {margin-left: 2rem;}

/* desc box */
.desc-box {background-color: #f4f4f4; padding: 3rem;}
.desc-box > *:not(:first-child) {margin-top: 2rem;}
.desc-box > h6 {font-weight: 700; font-size: 1.6rem; line-height: 1.4;}
.desc-box > * + h6 {margin-top: 3rem;}
.desc-box > p {font-size: 1.4rem; font-weight: 500; line-height: 1.6;}
.desc-box > ul > li, .desc-box > ol > li {font-size: 1.4rem; font-weight: 500; line-height: 1.6; text-indent: -1.5rem; padding-left: 1.5rem;}
.desc-box > ul > li + li, .desc-box > ol > li + li {margin-top: .5rem;}

/* guide box */
.guide-box {text-align: center; margin-top: 9rem;}
.guide-box + * {margin-top: 9rem;}
.guide-box .img {width: 9rem; height: 9rem; margin: 0 auto 3rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.guide-box > h4 {font-size: 2.4rem; font-weight: 700;}
.guide-box > p {font-size: 1.4rem; font-weight: 500; line-height: 1.6; margin-top: 4rem; color: var(--gray500);}

/* board view */
.board-view {border-top: .2rem solid var(--red800); border-bottom: 1px solid var(--red800);}
.board-view .title {padding: 2rem; font-size: 1.4rem; font-weight: 700; background-color: #f4f4f4; line-height: 1.6; margin-bottom: 0;}
.board-view .sub {padding: 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--gray200);}
.board-view .sub .desktop-only {display: inline-block; margin-right: .25rem;}
.board-view .sub > span {font-size: 1.4rem; color: var(--gray500);}
.board-view .sub > span > i {display: inline-block; vertical-align: middle; position: relative; top: -.125rem; margin-right: .25rem;}
.board-view .sub > span > span:not(.desktop-only) {text-decoration: underline; margin-left: .5rem;}
.board-view .sub ul.date > li {display: flex; align-items: center;}

.board-view .cont {padding: 6rem 2rem; line-height: 1.6; font-size: 1.4rem;}
.board-view .cont img {width: 100%; margin: 0 auto 2rem; height: auto; display: block;}
.cont-textarea {width: 100%; border: 0; padding: 0; line-height: 1.6; display: inline-table; min-height: initial;}

.board-view .file {width: 100%; margin: -2rem auto 0; padding: 1.2rem 0; min-height: 5.2rem; display: flex; align-items: center; border-top: 1px solid var(--gray200);}
.board-view .file .ic-clip {width: 1.6rem; height: 1.6rem; background-image: url(../img/ico/ic-clip-16.svg);}
.board-view .file > ul {display: flex; flex-flow: column; row-gap: .6rem;}
.board-view .file > ul > li {display: flex; column-gap: .6rem;}
.board-view .file > ul > li > p {font-size: 1.4rem; font-weight: 500;}
.board-view .file > ul > li > a {font-size: 1.4rem; word-break: break-all; flex: 1;}

.board-view .reply {border-top: 1px solid var(--gray200); padding: 2rem 0; display: flex; align-items: center; justify-content: space-between;}
.board-view .reply > p {font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.board-view .reply > p > span {font-size: 1.4rem; font-weight: 900; color: var(--red800); margin-right: .25rem;}
.board-view .reply > div {display: flex; align-items: center;}
.board-view .reply > div > span {font-size: 1.2rem; font-weight: 500; color: var(--gray500); margin-right: .25rem; margin-top: .125rem;}
.board-view .reply-cont {border-top: 1px solid var(--red800);}
.board-view .reply-cont > li {padding: 3rem 0; display: flex; align-items: center; justify-content: space-between;}
.board-view .reply-cont > li + li {border-top: 1px solid var(--gray200);}
.board-view .reply-cont > li .desc {width: 100%;}
.board-view .reply-cont > li .desc ul.date {margin-bottom: 1rem;}
.board-view .reply-cont > li .desc > p {font-weight: 500; display: block; width: 100%; line-height: 1.6; font-size: 1.4rem;}
.board-view .reply-cont > li .btn {display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 1rem;}
.board-view .reply-cont > li .btn > button {width: 6.5rem; height: 2.8rem; font-size: 1.2rem;}

.board-view .answer {background-color: #f4f4f4; padding: 3rem; display: flex;}
.board-view .answer .answer-a {font-size: 2.4rem; color: var(--red800); font-weight: 700; margin-right: 2rem;}
.board-view .answer * {line-height: 1.6; font-size: 1.4rem;}

.board-btn {margin-top: 2rem; display: flex; align-items: center; justify-content: center; column-gap: .6rem;}

@media screen and (max-width: 768px) {
    /* board view */
    .board-view .cont {padding: 5rem 2rem;}
    .board-view .cont img {width: 100%;}
    .board-view .reply-cont > li {flex-flow: column; row-gap: 1.2rem;}
    .board-view .reply-cont > li .desc > p {width: 100%; line-height: 1.6;}
    .board-view .reply-cont > li .btn {width: 100%; flex-flow: row; column-gap: .4rem; justify-content: flex-end;}

    .board-view .sub {flex-flow: column; align-items: flex-start; row-gap: .8rem;} 

}

/* button wrap */
#contents > .btn-wrap, #cont-wrap > .btn-wrap {margin-top: 6rem; text-align: center; display: flex; align-items: center; justify-content: center; column-gap: 1rem;}
#contents > .btn-wrap > button, #cont-wrap > .btn-wrap > button {width: 22rem; height: 6rem; font-weight: 700;}

/* search filter */
.search-filter {background-color: #f4f4f4; padding: 2rem 3rem; display: flex; align-items: center; grid-gap: 2rem; justify-content: center; margin-bottom: 3rem; flex-wrap: wrap;}
.search-filter > h6 {font-weight: 700; font-size: 1.4rem; line-height: 1.2;}
.search-filter .filter-tab {display: flex; align-items: center; border-top: 1px solid var(--gray200); border-left: 1px solid var(--gray200);}
.search-filter .filter-tab > li {width: 6rem; height: 4rem; line-height: 4rem; border-right: 1px solid var(--gray200); border-bottom: 1px solid var(--gray200); text-align: center; font-size: 1.4rem; color: var(--gray500); background-color: var(--white); font-weight: 500;}
.search-filter .filter-tab > li.active {background-color: #424243; color: var(--white); font-weight: 700;}
.search-filter .date-range > li > input[type='date'] {width: 14rem;}
.search-filter > button {height: 4rem;}

/* phrase desc */
.cont-box .phrase-desc {font-size: 1.4rem; margin: 2rem 0; font-weight: 500; color: var(--gray500);}
.cont-box .phrase-desc > span {font-weight: 700; color: initial;}

/* review star */
.ico-star {display: flex; align-items: center;}

/* pagination */
.pagination {margin-top: 6rem; display: flex; align-items: center; justify-content: center;}
.pagination > li {width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray200); font-size: 1.4rem; font-weight: 500; text-align: center; margin-left: -1px; cursor: pointer;}
.pagination > li.active {background-color: var(--red800); color: var(--white);}
.pagination > li.first, .pagination > li.prev, .pagination > li.next, .pagination > li.last {background-repeat: no-repeat; background-size: 1.6rem; background-position: center;}
.pagination > li.first {background-image: url(../img/ico/pagination-first@2x.png);}
.pagination > li.prev {background-image: url(../img/ico/pagination-prev@2x.png); margin-right: 1rem;}
.pagination > li.next {background-image: url(../img/ico/pagination-next@2x.png); margin-left: 1rem;}
.pagination > li.last {background-image: url(../img/ico/pagination-last@2x.png);}
.pagination > li.first.disabled {background-image: url(../img/ico/ic-pagination-first-disabled@2x.png); cursor: initial; pointer-events: none;}
.pagination > li.prev.disabled {background-image: url(../img/ico/ic-pagination-prev-disabled@2x.png); cursor: initial; pointer-events: none;}
.pagination > li.next.disabled {background-image: url(../img/ico/ic-pagination-next-disabled@2x.png); cursor: initial; pointer-events: none;}
.pagination > li.last.disabled {background-image: url(../img/ico/ic-pagination-last-disabled@2x.png); cursor: initial; pointer-events: none;}


@media screen and (max-width: 768px) {
    /* input */
    input[type='checkbox'] + label > span {top: 0;}

    .radio-wrap {flex-flow: column; align-items: flex-start;}
    .radio-wrap > li + li {margin-left: 0; margin-top: 1rem;}
    .radio-wrap > li > input[type='radio'] + label > span {top: 0;}

    /* count num */
    .count-num {margin: 0;}
    .count-num > li {width: 2.6rem; height: 2.6rem;}

    /* label */
    .label {height: 2rem; line-height: 2rem;}

    /* swiper */
    .swiper-pagination .swiper-pagination-bullet {width: .8rem; height: .8rem;}

    /* item swiper */
    .item-swiper .swiper-btn {height: 17rem;}

    /* depth */
    .depth > li {font-size: 1.5rem;}
    .depth > li + li::before {margin: 0 .6rem;}
    .depth > li:last-child {font-weight: 500;}

    /* tab menu */
    .tab-menu.sticky {top: 6.8rem;}
    .tab-menu {margin-bottom: 3rem;}

    /* cont box */
    .cont-box + .cont-box {margin-top: 5rem;}

    /* guide box */
    .guide-box {margin-top: 5rem;}
    .guide-box .img {width: 7.2rem; height: 7.2rem; margin-bottom: 2rem;}
    .guide-box + * {margin-top: 5rem;}
    .guide-box > h4 {font-size: 2rem;}
    .guide-box > p {width: 90%; margin: 2rem auto 0; word-break: keep-all;}



    /* button wrap */
    #contents > .btn-wrap, #cont-wrap > .btn-wrap {margin-top: 3rem; text-align: center;}
    #contents > .btn-wrap > button, #cont-wrap > .btn-wrap > button {width: 100%; font-size: 1.75rem; font-weight: 500;}
    #contents > .btn-wrap > button:first-child:nth-last-child(2), #contents > .btn-wrap > button:first-child:nth-last-child(2) ~ button,
    #cont-wrap > .btn-wrap > button:first-child:nth-last-child(2), #cont-wrap > .btn-wrap > button:first-child:nth-last-child(2) ~ button {width: calc((100% - 1.4rem) / 2);}

    /* search filter */
    .search-filter {align-items: flex-start;  flex-flow: column; grid-gap: 1rem;}
    .search-filter .filter-tab {width: 100%; flex-wrap: wrap;}
    .search-filter .filter-tab > li {width: calc(100% / 3);}
    .search-filter .date-range {width: 100%; flex-flow: column;}
    .search-filter .date-range > li {width: 100%; text-align: center;}
    .search-filter .date-range > li:nth-child(2) {margin: .5rem 0;}
    .search-filter .date-range > li > input[type='date'] {width: 100%;}
    .search-filter > button {width: 100%;}

    /* pagination */
    .pagination {margin-top: 3rem;}
}


.main-pop {position: fixed; z-index: 9999;}
.main-pop .pop-tit {height: 6rem; display: flex; align-items: center; justify-content: center;}
.main-pop .pop-tit > h2 {font-size: 1.8rem; font-weight: 600;}
.main-pop .pop-cont {width: 100%; min-width: initial; padding: 0; line-height: 1;}
.main-pop .pop-cont img {width: 100%; display: block;}
.main-pop .pop-cont p {text-align: center; font-size: 1.4rem; font-weight: 500;}
.main-pop .pop-btn {position: absolute; left: 0; height: 3rem; padding: 0 1.2rem; display: flex; align-items: center; justify-content: space-between; background-color: var(--black); width: 100%;}
.main-pop .pop-btn input + label {align-items: center;}
.main-pop .pop-btn input + label::before {margin-top: 0;}
.main-pop .pop-btn input + label > p {font-size: 1.2rem; font-weight: 500; color: var(--white); height: fit-content;}
.main-pop .pop-btn button {width: fit-content; height: fit-content; font-size: 1.2rem; background-color:transparent; border: 0; text-decoration: underline;}