.heritage-item a {
color : #111;
}
.archive-header {
padding: 100px 0 80px;
}
.archive-header .archive-title {
color: #000;
font-size: 58px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
text-align: center;
font-family: "Poppins", sans-serif;
}
.archive-header .tab-keyword {
margin-top: 32px;
}
.archive-header .tab-keyword ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.archive-header .tab-keyword a {
display: block;
color: #555;
font-size: 13px;
font-weight: 400;
line-height: 24px;
border-radius: 20px;
background-color: #f2f2f2;
padding: 6px 16px;
transition: all 0.2s;
}
.archive-header .tab-keyword a[aria-selected="true"] {
color: #fff;
background-color: #000;
}
@media screen and (min-width: 1280px) {
.archive-header .tab-keyword a:hover {
color: #fff;
background-color: #000;
}
}
@media screen and (max-width: 1280px) {
.archive-header {
padding: 80px 0 60px;
}
.archive-header .archive-title {
font-size: 44px;
}
.archive-header .tab-keyword {
margin-top: 28px;
}
.archive-header .tab-keyword a {
line-height: 23px;
padding: 5px 20px;
}
}
@media screen and (max-width: 860px) {
.archive-header {
padding: 50px 0;
}
.archive-header .archive-title {
font-size: 32px;
}
.archive-header .tab-keyword {
margin-top: 24px;
}
.archive-header .tab-keyword ul {
gap: 12px 4px;
}
.archive-header .tab-keyword a {
font-size: 12px;
line-height: 22px;
border-radius: 16px;
padding: 3px 16px;
}
}
.archive-body,
.page-body {
padding-bottom: 200px;
}
.archive-body .list-options,
.page-body .list-options {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
height: 50px;
border-bottom: 1px solid #e2e2e2;
box-sizing: border-box;
z-index: 10;
}
.archive-body .list-options.type-youtube,
.archive-body .list-options.type-media,
.page-body .list-options.type-youtube,
.page-body .list-options.type-media {
align-items: center;
height: auto;
border: 0;
padding-left: 327px;
margin-top: 60px;
}
.archive-body .list-options.type-youtube + .search-result-none,
.archive-body .list-options.type-media + .search-result-none,
.page-body .list-options.type-youtube + .search-result-none,
.page-body .list-options.type-media + .search-result-none {
padding-left: 327px;
}
.archive-body .list-options.type-youtube:last-child,
.archive-body .list-options.type-media:last-child,
.page-body .list-options.type-youtube:last-child,
.page-body .list-options.type-media:last-child {
margin-bottom: 700px;
}
@media screen and (max-width: 1280px) {
.archive-body .list-options.type-youtube:last-child,
.archive-body .list-options.type-media:last-child,
.page-body .list-options.type-youtube:last-child,
.page-body .list-options.type-media:last-child {
margin-bottom: 700px;
}
}
@media screen and (max-width: 860px) {
.archive-body .list-options.type-youtube:last-child,
.archive-body .list-options.type-media:last-child,
.page-body .list-options.type-youtube:last-child,
.page-body .list-options.type-media:last-child {
margin-bottom: 460px;
}
}
.archive-body .list-type-toggler,
.page-body .list-type-toggler {
display: flex;
}
.archive-body .list-type-toggler .slot,
.page-body .list-type-toggler .slot {
position: relative;
width: 37px;
height: 36px;
border: 1px solid #d9d9d9;
background-color: #fff;
box-sizing: border-box;
}
.archive-body .list-type-toggler .slot:first-child,
.page-body .list-type-toggler .slot:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.archive-body .list-type-toggler .slot:last-child,
.page-body .list-type-toggler .slot:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.archive-body .list-type-toggler .slot:not(:first-child),
.page-body .list-type-toggler .slot:not(:first-child) {
margin-left: -1px;
}
.archive-body .list-type-toggler input,
.page-body .list-type-toggler input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: 0;
opacity: 0;
}
.archive-body .list-type-toggler label,
.page-body .list-type-toggler label {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
z-index: 1;
cursor: pointer;
}
.archive-body .list-type-toggler label[for="listTypeGrid"],
.page-body .list-type-toggler label[for="listTypeGrid"] {
gap: 2px;
}
.archive-body .list-type-toggler label[for="listTypeGrid"]::before,
.archive-body .list-type-toggler label[for="listTypeGrid"]::after,
.page-body .list-type-toggler label[for="listTypeGrid"]::before,
.page-body .list-type-toggler label[for="listTypeGrid"]::after {
width: 2px;
height: 6px;
border-left: 6px solid #e0e0e0;
border-right: 6px solid #e0e0e0;
content: "";
}
.archive-body .list-type-toggler label[for="listTypeHorizontal"],
.page-body .list-type-toggler label[for="listTypeHorizontal"] {
gap: 3px;
}
.archive-body .list-type-toggler label[for="listTypeHorizontal"]::before,
.page-body .list-type-toggler label[for="listTypeHorizontal"]::before {
width: 14px;
height: 3px;
border-top: 2px solid #e0e0e0;
border-bottom: 2px solid #e0e0e0;
content: "";
}
.archive-body .list-type-toggler label[for="listTypeHorizontal"]::after,
.page-body .list-type-toggler label[for="listTypeHorizontal"]::after {
width: 14px;
height: 0;
border-top: 2px solid #e0e0e0;
content: "";
}
.archive-body .list-type-toggler input + label::before,
.archive-body .list-type-toggler input + label::after,
.page-body .list-type-toggler input + label::before,
.page-body .list-type-toggler input + label::after {
transition: border-color 0.2s;
}
.archive-body .list-type-toggler input:checked + label::before,
.archive-body .list-type-toggler input:checked + label::after,
.page-body .list-type-toggler input:checked + label::before,
.page-body .list-type-toggler input:checked + label::after {
border-color: #000;
}
@media screen and (max-width: 860px) {
.archive-body .list-type-toggler .slot,
.page-body .list-type-toggler .slot {
width: 33px;
height: 32px;
}
}
.archive-body .btn-media-download,
.page-body .btn-media-download {
position: relative;
}
.archive-body .btn-media-download > button,
.page-body .btn-media-download > button {
display: flex;
align-items: center;
gap: 10px;
color: #111;
font-size: 20px;
font-weight: 700;
}
.archive-body .btn-media-download > button::after,
.page-body .btn-media-download > button::after {
flex-shrink: 0;
width: 26px;
height: 25px;
background: url("./assets/images/icon_media_download.png") no-repeat;
background-size: 26px 25px;
content: "";
}
.archive-body .btn-media-download > button .count,
.page-body .btn-media-download > button .count {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
color: #fff;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
border-radius: 50%;
background-color: #111;
font-family: "Poppins", sans-serif;
}
.archive-body .btn-media-download > button:disabled,
.page-body .btn-media-download > button:disabled {
color: #999;
}
.archive-body .btn-media-download > button:disabled .count,
.page-body .btn-media-download > button:disabled .count {
background-color: #999;
}
.archive-body .btn-media-download > button:disabled::after,
.page-body .btn-media-download > button:disabled::after {
opacity: 0.43;
}
@media screen and (max-width: 1280px) {
.archive-body .btn-media-download > button,
.page-body .btn-media-download > button {
gap: 8px;
font-size: 18px;
}
.archive-body .btn-media-download > button::after,
.page-body .btn-media-download > button::after {
width: 22px;
height: 21px;
background-image: url('data:image/svg+xml,');
background-size: contain;
margin-left: 8px;
}
.archive-body .btn-media-download > button .count,
.page-body .btn-media-download > button .count {
width: 30px;
height: 30px;
font-size: 16px;
padding-top: 2px;
box-sizing: border-box;
}
}
@media screen and (max-width: 860px) {
.archive-body .btn-media-download,
.page-body .btn-media-download {
position: fixed;
bottom: 70px;
right: 10px;
z-index: 5;
}
.archive-body .btn-media-download > button,
.page-body .btn-media-download > button {
width: 50px;
height: 50px;
background-image: url('data:image/svg+xml,');
background-size: contain;
gap: 0;
font-size: 1px;
text-indent: -999px;
}
.archive-body .btn-media-download > button::after,
.page-body .btn-media-download > button::after {
display: none;
}
.archive-body .btn-media-download > button .count,
.page-body .btn-media-download > button .count {
position: absolute;
top: -6px;
right: -4px;
width: 22px;
height: 22px;
color: #333;
font-size: 12px;
font-weight: 600;
text-indent: 0;
background-color: #fff;
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25);
}
.archive-body .btn-media-download > button:disabled,
.page-body .btn-media-download > button:disabled {
display: none;
}
.archive-body .btn-media-download.fixed-hide,
.page-body .btn-media-download.fixed-hide {
display: none;
}
}
.archive-body .sub-media-search-box,
.page-body .sub-media-search-box {
display: flex;
width: 426px;
overflow: hidden;
border: 1px solid #999;
border-radius: 100px;
background-color: #fff;
box-sizing: border-box;
}
.archive-body .sub-media-search-box input,
.page-body .sub-media-search-box input {
width: 100%;
color: #333;
font-size: 18px;
line-height: 28px;
border: 0;
padding: 10px 0 10px 23px;
outline: 0;
}
.archive-body .sub-media-search-box input::-webkit-input-placeholder,
.page-body .sub-media-search-box input::-webkit-input-placeholder {
color: #bbb;
}
.archive-body .sub-media-search-box input::-moz-placeholder,
.page-body .sub-media-search-box input::-moz-placeholder {
color: #bbb;
}
.archive-body .sub-media-search-box input::-ms-placeholder,
.page-body .sub-media-search-box input::-ms-placeholder {
color: #bbb;
}
.archive-body .sub-media-search-box input::-moz-placeholder,
.page-body .sub-media-search-box input::-moz-placeholder {
color: #bbb;
}
.archive-body .sub-media-search-box input::placeholder,
.page-body .sub-media-search-box input::placeholder {
color: #bbb;
}
.archive-body .sub-media-search-box .btn-search,
.page-body .sub-media-search-box .btn-search {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
padding: 0 23px;
}
.archive-body .sub-media-search-box .btn-search::after,
.page-body .sub-media-search-box .btn-search::after {
width: 21px;
height: 20px;
background: url("./assets/images/icon_media_search.png") no-repeat;
background-size: 21px 20px;
content: "";
}
@media screen and (max-width: 1280px) {
.archive-body .sub-media-search-box,
.page-body .sub-media-search-box {
width: 344px;
}
.archive-body .sub-media-search-box input,
.page-body .sub-media-search-box input {
font-size: 16px;
line-height: 22px;
border: 0;
padding: 10px 0 10px 19px;
}
.archive-body .sub-media-search-box .btn-search,
.page-body .sub-media-search-box .btn-search {
padding: 0 18px;
}
.archive-body .sub-media-search-box .btn-search::after,
.page-body .sub-media-search-box .btn-search::after {
width: 24px;
height: 22px;
background-image: url('data:image/svg+xml,');
background-size: contain;
}
}
@media screen and (max-width: 860px) {
.archive-body .sub-media-search-box,
.page-body .sub-media-search-box {
width: 100%;
}
.archive-body .sub-media-search-box input,
.page-body .sub-media-search-box input {
font-size: 14px;
line-height: 18px;
border: 0;
padding: 10px 0 10px 19px;
}
.archive-body .sub-media-search-box .btn-search,
.page-body .sub-media-search-box .btn-search {
padding: 0 18px 0 9px;
}
.archive-body .sub-media-search-box .btn-search::after,
.page-body .sub-media-search-box .btn-search::after {
width: 22px;
height: 20px;
background-image: url('data:image/svg+xml,');
}
}
@media screen and (max-width: 860px) {
.archive-body .list-options > .sub-media-search-box,
.archive-body .btn-media-download + form,
.page-body .list-options > .sub-media-search-box,
.page-body .btn-media-download + form {
width: calc(50% - 8px);
}
}
.archive-body .list-filter-media,
.page-body .list-filter-media {
position: absolute;
top: 100%;
left: 0;
width: 261px;
margin-top: 30px;
}
.archive-body .list-filter-media.fixed,
.page-body .list-filter-media.fixed {
position: fixed;
top: 0;
left: 72px;
}
@media screen and (min-width: 1920px) {
.archive-body .list-filter-media.fixed,
.page-body .list-filter-media.fixed {
left: calc(50% - 880px);
}
}
@media screen and (max-width: 1280px) {
.archive-body .list-filter-media.fixed,
.page-body .list-filter-media.fixed {
left: 40px;
}
}
.archive-body .list-filter-media .title,
.page-body .list-filter-media .title {
display: block;
color: #111;
font-size: 28px;
font-weight: 600;
line-height: 1;
border-bottom: 1px solid rgba(17, 17, 17, 0.8);
padding-bottom: 24px;
}
.archive-body .list-filter-media .filter-option,
.page-body .list-filter-media .filter-option {
height: 18px;
overflow: hidden;
margin-top: 32px;
transition: height 0.3s;
}
.archive-body
.list-filter-media
.filter-option[data-options-visible="true"].option-visible,
.page-body
.list-filter-media
.filter-option[data-options-visible="true"].option-visible {
overflow: visible;
}
.archive-body
.list-filter-media
.filter-option[data-options-visible="true"]
> .option-name
button::after,
.page-body
.list-filter-media
.filter-option[data-options-visible="true"]
> .option-name
button::after {
transform: rotateX(180deg);
}
@media screen and (max-width: 1280px) {
.archive-body .list-filter-media .filter-option,
.page-body .list-filter-media .filter-option {
height: 16px;
}
}
.archive-body .list-filter-media .option-name,
.page-body .list-filter-media .option-name {
display: block;
position: relative;
color: #333;
font-size: 18px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
}
.archive-body .list-filter-media .option-name button,
.page-body .list-filter-media .option-name button {
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.archive-body .list-filter-media .option-name button::after,
.page-body .list-filter-media .option-name button::after {
width: 16px;
height: 16px;
background: url("./assets/images/icon_filter_arrow.png") no-repeat;
background-size: 16px 16px;
content: "";
transition: all 0.2s;
}
.archive-body .list-filter-media .option-list,
.page-body .list-filter-media .option-list {
padding-top: 10px;
padding-left: 10px;
}
.archive-body .list-filter-media .option-list li,
.page-body .list-filter-media .option-list li {
display: flex;
position: relative;
margin-top: 10px;
}
.archive-body .list-filter-media .option-list input[type="checkbox"],
.page-body .list-filter-media .option-list input[type="checkbox"] {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
padding: 0;
margin: 0;
opacity: 0;
}
.archive-body .list-filter-media .option-list label,
.page-body .list-filter-media .option-list label {
display: flex;
align-items: center;
gap: 12px;
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.01em;
cursor: pointer;
}
.archive-body .list-filter-media .option-list label::before,
.page-body .list-filter-media .option-list label::before {
width: 22px;
height: 22px;
background: url("./assets/images/icon_check_filter.png") no-repeat;
background-size: 22px 22px;
content: "";
}
.archive-body .list-filter-media .option-list label::after,
.page-body .list-filter-media .option-list label::after {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
background-color: #fff;
content: "";
transition: opacity 0.2s;
opacity: 1;
}
.archive-body
.list-filter-media
.option-list
input[type="checkbox"]:checked
+ label::after,
.page-body
.list-filter-media
.option-list
input[type="checkbox"]:checked
+ label::after {
opacity: 0;
}
.archive-body .list-filter-media .option-date,
.page-body .list-filter-media .option-date {
padding-left: 10px;
padding-top: 20px;
}
.archive-body .list-filter-media .option-date .date-item,
.page-body .list-filter-media .option-date .date-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.archive-body .list-filter-media .option-date .date-item:not(:first-child),
.page-body .list-filter-media .option-date .date-item:not(:first-child) {
margin-top: 10px;
}
.archive-body .list-filter-media .option-date .date-item .label,
.page-body .list-filter-media .option-date .date-item .label {
flex-shrink: 0;
width: 41px;
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 1;
}
.archive-body .list-filter-media .option-date .date-selector,
.page-body .list-filter-media .option-date .date-selector {
position: relative;
width: calc((100% - 49px - 8px) / 2);
}
.archive-body .list-filter-media .option-date .date-selector .selected-date,
.page-body .list-filter-media .option-date .date-selector .selected-date {
display: block;
width: 100%;
color: #666;
font-size: 14px;
font-weight: 400;
line-height: 24px;
border: 1px solid #999;
border-radius: 4px;
padding: 2px 0 2px 15px;
box-sizing: border-box;
transition: border 0.2s;
}
.archive-body .list-filter-media .option-date .date-selector .btn-selector,
.page-body .list-filter-media .option-date .date-selector .btn-selector {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
outline: 0;
}
.archive-body
.list-filter-media
.option-date
.date-selector
.btn-selector::after,
.page-body .list-filter-media .option-date .date-selector .btn-selector::after {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 7px;
background-repeat: no-repeat;
content: "";
}
.archive-body .list-filter-media .option-date .date-selector .date-list,
.page-body .list-filter-media .option-date .date-selector .date-list {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
overflow: hidden;
border: 1px solid #999;
background-color: #fff;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
z-index: 5;
}
.archive-body .list-filter-media .option-date .date-selector .date-list button,
.page-body .list-filter-media .option-date .date-selector .date-list button {
display: flex;
align-items: center;
width: 100%;
height: 20px;
color: #666;
font-size: 14px;
font-weight: 400;
padding-left: 15px;
box-sizing: border-box;
transition: color 0.2s, background 0.2s;
}
@media screen and (min-width: 1280px) {
.archive-body
.list-filter-media
.option-date
.date-selector
.date-list
button:hover,
.page-body
.list-filter-media
.option-date
.date-selector
.date-list
button:hover {
color: #fff;
background-color: #1967d2;
}
}
.archive-body
.list-filter-media
.option-date
.date-selector
.date-list.has-scroll,
.page-body
.list-filter-media
.option-date
.date-selector
.date-list.has-scroll {
max-height: 242px;
overflow-y: auto;
}
@media screen and (min-width: 1280px) {
.archive-body
.list-filter-media
.option-date
.date-selector:hover
.selected-date,
.page-body
.list-filter-media
.option-date
.date-selector:hover
.selected-date {
border-color: #111;
}
}
.archive-body
.list-filter-media
.option-date
.date-selector[data-selector-option-visible="true"]
.selected-date,
.page-body
.list-filter-media
.option-date
.date-selector[data-selector-option-visible="true"]
.selected-date {
border-color: #111;
}
.archive-body
.list-filter-media
.option-date
.date-selector[data-selector-option-visible="true"]
.date-list,
.page-body
.list-filter-media
.option-date
.date-selector[data-selector-option-visible="true"]
.date-list {
display: block;
}
@media screen and (max-width: 1280px) {
.archive-body .list-filter-media,
.page-body .list-filter-media {
width: 204px;
margin-top: 24px;
}
.archive-body .list-filter-media .title,
.page-body .list-filter-media .title {
font-size: 24px;
padding-bottom: 28px;
}
.archive-body .list-filter-media .option-name,
.page-body .list-filter-media .option-name {
font-size: 16px;
}
.archive-body .list-filter-media .option-list,
.page-body .list-filter-media .option-list {
padding-top: 8px;
padding-left: 10px;
}
.archive-body .list-filter-media .option-list li,
.page-body .list-filter-media .option-list li {
margin-top: 12px;
}
.archive-body .list-filter-media .option-list label,
.page-body .list-filter-media .option-list label {
font-size: 15px;
}
.archive-body .list-filter-media .option-date .date-selector .selected-date,
.page-body .list-filter-media .option-date .date-selector .selected-date {
padding-left: 10px;
}
.archive-body
.list-filter-media
.option-date
.date-selector
.btn-selector::after,
.page-body
.list-filter-media
.option-date
.date-selector
.btn-selector::after {
top: 7px;
right: 5px;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml,');
background-size: contain;
}
.archive-body
.list-filter-media
.option-date
.date-selector
.date-list
button,
.page-body .list-filter-media .option-date .date-selector .date-list button {
padding-left: 10px;
}
}
@media screen and (max-width: 860px) {
.archive-body .list-filter-media,
.page-body .list-filter-media {
position: relative;
top: auto;
left: auto;
width: calc(50% - 8px);
margin: 0;
}
}
.archive-body .list-filter-media .btn-filter-reset,
.page-body .list-filter-media .btn-filter-reset {
position: absolute;
top: 4px;
right: 0;
width: 20px;
height: 20px;
background: url('data:image/svg+xml,');
background-size: contain;
}
@media screen and (max-width: 1280px) {
.archive-body .list-filter-media .btn-filter-reset,
.page-body .list-filter-media .btn-filter-reset {
top: 3px;
width: 18px;
height: 18px;
}
}
.archive-body .list-filter-media .btn-filter-apply,
.page-body .list-filter-media .btn-filter-apply {
width: 100%;
height: 36px;
color: #000;
font-size: 16px;
border: 1px solid #333;
border-radius: 18px;
margin-top: 36px;
box-sizing: border-box;
}
@media screen and (min-width: 1280px) {
.archive-body .list-filter-media .btn-filter-apply,
.page-body .list-filter-media .btn-filter-apply {
transition: all 0.3s;
}
.archive-body .list-filter-media .btn-filter-apply:hover,
.page-body .list-filter-media .btn-filter-apply:hover {
color: #fff;
background-color: #333;
}
}
@media screen and (max-width: 1280px) {
.archive-body .list-filter-media .btn-filter-apply,
.page-body .list-filter-media .btn-filter-apply {
height: 40px;
font-weight: 700;
letter-spacing: -0.01em;
}
}
.archive-body .list-filter-search,
.page-body .list-filter-search {
display: flex;
gap: 48px;
margin-top: 10px;
}
.archive-body .list-filter-search .filter-option,
.page-body .list-filter-search .filter-option {
position: relative;
}
.archive-body
.list-filter-search
.filter-option[data-options-visible="false"]
> *:not(.option-name),
.page-body
.list-filter-search
.filter-option[data-options-visible="false"]
> *:not(.option-name) {
display: none;
}
.archive-body
.list-filter-search
.filter-option[data-options-visible="true"]
> .option-name
button::after,
.page-body
.list-filter-search
.filter-option[data-options-visible="true"]
> .option-name
button::after {
transform: rotateX(180deg);
}
.archive-body .list-filter-search .btn-bottom,
.page-body .list-filter-search .btn-bottom {
border-top: 1px solid #e8e8e8;
padding-top: 16px;
margin-top: 16px;
}
.archive-body .list-filter-search .btn-bottom button,
.page-body .list-filter-search .btn-bottom button {
width: 100%;
color: #000;
font-size: 16px;
font-weight: 400;
line-height: 26px;
text-align: center;
border: 1px solid #333;
border-radius: 36px;
background-color: #fff;
padding: 4px 0;
box-sizing: border-box;
}
.archive-body .list-filter-search .option-name,
.page-body .list-filter-search .option-name {
display: block;
position: relative;
color: #333;
font-size: 16px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
padding: 10px 24px 10px 0;
}
.archive-body .list-filter-search .option-name button,
.page-body .list-filter-search .option-name button {
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.archive-body .list-filter-search .option-name button::after,
.page-body .list-filter-search .option-name button::after {
width: 12px;
height: 12px;
background: url("./assets/images/icon_filter_arrow_search.png") no-repeat;
background-size: 12px 12px;
content: "";
transition: all 0.2s;
}
.archive-body .list-filter-search .option-date,
.page-body .list-filter-search .option-date {
position: absolute;
top: calc(100% - 2px);
right: 0px;
width: 296px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
padding: 15px 23px;
box-sizing: border-box;
}
.archive-body .list-filter-search .option-date .date-item,
.page-body .list-filter-search .option-date .date-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.archive-body .list-filter-search .option-date .date-item:not(:first-child),
.page-body .list-filter-search .option-date .date-item:not(:first-child) {
margin-top: 10px;
}
.archive-body .list-filter-search .option-date .date-item .label,
.page-body .list-filter-search .option-date .date-item .label {
flex-shrink: 0;
width: 41px;
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 1;
}
.archive-body .list-filter-search .option-date .date-selector,
.page-body .list-filter-search .option-date .date-selector {
position: relative;
width: calc((100% - 49px - 8px) / 2);
}
.archive-body .list-filter-search .option-date .date-selector .selected-date,
.page-body .list-filter-search .option-date .date-selector .selected-date {
display: block;
width: 100%;
color: #666;
font-size: 14px;
font-weight: 400;
line-height: 24px;
border: 1px solid #999;
border-radius: 4px;
padding: 2px 0 2px 15px;
box-sizing: border-box;
transition: border 0.2s;
}
.archive-body .list-filter-search .option-date .date-selector .btn-selector,
.page-body .list-filter-search .option-date .date-selector .btn-selector {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
outline: 0;
}
.archive-body
.list-filter-search
.option-date
.date-selector
.btn-selector::after,
.page-body
.list-filter-search
.option-date
.date-selector
.btn-selector::after {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 7px;
background-repeat: no-repeat;
content: "";
}
.archive-body .list-filter-search .option-date .date-selector .date-list,
.page-body .list-filter-search .option-date .date-selector .date-list {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
overflow: hidden;
border: 1px solid #999;
background-color: #fff;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
z-index: 5;
}
.archive-body .list-filter-search .option-date .date-selector .date-list button,
.page-body .list-filter-search .option-date .date-selector .date-list button {
display: flex;
align-items: center;
width: 100%;
height: 20px;
color: #666;
font-size: 14px;
font-weight: 400;
padding-left: 15px;
box-sizing: border-box;
transition: color 0.2s, background 0.2s;
}
@media screen and (min-width: 1280px) {
.archive-body
.list-filter-search
.option-date
.date-selector
.date-list
button:hover,
.page-body
.list-filter-search
.option-date
.date-selector
.date-list
button:hover {
color: #fff;
background-color: #1967d2;
}
}
.archive-body
.list-filter-search
.option-date
.date-selector
.date-list.has-scroll,
.page-body
.list-filter-search
.option-date
.date-selector
.date-list.has-scroll {
max-height: 242px;
overflow-y: auto;
}
@media screen and (min-width: 1280px) {
.archive-body
.list-filter-search
.option-date
.date-selector:hover
.selected-date,
.page-body
.list-filter-search
.option-date
.date-selector:hover
.selected-date {
border-color: #111;
}
}
.archive-body
.list-filter-search
.option-date
.date-selector[data-selector-option-visible="true"]
.selected-date,
.page-body
.list-filter-search
.option-date
.date-selector[data-selector-option-visible="true"]
.selected-date {
border-color: #111;
}
.archive-body
.list-filter-search
.option-date
.date-selector[data-selector-option-visible="true"]
.date-list,
.page-body
.list-filter-search
.option-date
.date-selector[data-selector-option-visible="true"]
.date-list {
display: block;
}
.archive-body .list-filter-search .option-date .option-header,
.page-body .list-filter-search .option-date .option-header {
display: none;
}
.archive-body .list-filter-search .option-sort,
.page-body .list-filter-search .option-sort {
position: absolute;
top: calc(100% - 2px);
right: 0px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
padding: 14px 23px;
box-sizing: border-box;
}
.archive-body .list-filter-search .option-sort .sort-types,
.page-body .list-filter-search .option-sort .sort-types {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
white-space: nowrap;
}
.archive-body .list-filter-search .option-sort .sort-types li,
.page-body .list-filter-search .option-sort .sort-types li {
position: relative;
}
.archive-body .list-filter-search .option-sort .sort-types li input,
.page-body .list-filter-search .option-sort .sort-types li input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
}
.archive-body .list-filter-search .option-sort .sort-types li label,
.page-body .list-filter-search .option-sort .sort-types li label {
display: block;
color: #000;
font-size: 16px;
font-weight: 400;
line-height: 1;
text-align: right;
cursor: pointer;
}
.archive-body
.list-filter-search
.option-sort
.sort-types
li
input:checked
+ label,
.page-body
.list-filter-search
.option-sort
.sort-types
li
input:checked
+ label {
font-weight: 600;
}
.archive-body .list-filter-search .date-list-label,
.page-body .list-filter-search .date-list-label {
display: none;
}
@media screen and (max-width: 1280px) {
.archive-body .list-filter-search,
.page-body .list-filter-search {
margin-top: 8px;
}
.archive-body .list-filter-search .btn-bottom,
.page-body .list-filter-search .btn-bottom {
padding-top: 24px;
margin-top: 24px;
}
.archive-body .list-filter-search .btn-bottom button,
.page-body .list-filter-search .btn-bottom button {
font-weight: 700;
border-radius: 100px;
padding: 13px 0;
}
.archive-body .list-filter-search .option-name,
.page-body .list-filter-search .option-name {
font-size: 16px;
}
.archive-body .list-filter-search .option-date,
.page-body .list-filter-search .option-date {
width: 252px;
padding: 23px;
}
.archive-body .list-filter-search .option-date .option-header,
.page-body .list-filter-search .option-date .option-header {
display: flex;
color: #333;
font-size: 16px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
margin-bottom: 20px;
}
.archive-body .list-filter-search .option-date .date-item,
.page-body .list-filter-search .option-date .date-item {
gap: 4px;
}
.archive-body .list-filter-search .option-date .date-item:not(:first-child),
.page-body .list-filter-search .option-date .date-item:not(:first-child) {
margin-top: 13px;
}
.archive-body .list-filter-search .option-date .date-item .label,
.page-body .list-filter-search .option-date .date-item .label {
width: 34px;
font-size: 15px;
line-height: 1;
padding-left: 10px;
}
.archive-body .list-filter-search .option-date .date-selector,
.page-body .list-filter-search .option-date .date-selector {
flex-shrink: 0;
}
.archive-body .list-filter-search .option-date .date-selector:nth-child(2),
.page-body .list-filter-search .option-date .date-selector:nth-child(2) {
width: 84px;
}
.archive-body .list-filter-search .option-date .date-selector:nth-child(3),
.page-body .list-filter-search .option-date .date-selector:nth-child(3) {
width: 68px;
}
.archive-body .list-filter-search .option-date .date-selector .selected-date,
.page-body .list-filter-search .option-date .date-selector .selected-date {
padding: 3px 0 3px 11px;
}
.archive-body .list-filter-search .option-date .date-selector .btn-selector,
.page-body .list-filter-search .option-date .date-selector .btn-selector {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
outline: 0;
}
.archive-body
.list-filter-search
.option-date
.date-selector
.btn-selector::after,
.page-body
.list-filter-search
.option-date
.date-selector
.btn-selector::after {
top: 7px;
right: 5px;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml,');
background-size: contain;
}
.archive-body .list-filter-search .option-date .date-selector .date-list,
.page-body .list-filter-search .option-date .date-selector .date-list {
border-radius: 4px;
}
.archive-body
.list-filter-search
.option-date
.date-selector
.date-list
button,
.page-body .list-filter-search .option-date .date-selector .date-list button {
height: 30px;
font-weight: 500;
padding-left: 11px;
}
.archive-body
.list-filter-search
.option-date
.date-selector
.date-list.has-scroll,
.page-body
.list-filter-search
.option-date
.date-selector
.date-list.has-scroll {
max-height: 362px;
}
}
@media screen and (max-width: 1280px) and (min-width: 1280px) {
.archive-body
.list-filter-search
.option-date
.date-selector:hover
.selected-date,
.page-body
.list-filter-search
.option-date
.date-selector:hover
.selected-date {
border-color: #111;
}
}
@media screen and (max-width: 1280px) {
.archive-body .list-filter-search .option-sort,
.page-body .list-filter-search .option-sort {
padding: 15px 23px;
}
.archive-body .list-filter-search .option-sort .sort-types,
.page-body .list-filter-search .option-sort .sort-types {
gap: 10px;
}
.archive-body .list-filter-search .option-sort .sort-types li label,
.page-body .list-filter-search .option-sort .sort-types li label {
font-size: 14px;
}
}
@media screen and (max-width: 860px) {
.archive-body .list-filter-search,
.page-body .list-filter-search {
gap: 32px;
margin-top: 0;
}
.archive-body .list-filter-search .btn-bottom,
.page-body .list-filter-search .btn-bottom {
margin-top: 32px;
}
.archive-body .list-filter-search .btn-bottom button,
.page-body .list-filter-search .btn-bottom button {
color: #fff;
background-color: #000;
}
.archive-body .list-filter-search .filter-option,
.page-body .list-filter-search .filter-option {
position: static;
}
.archive-body .list-filter-search .option-name,
.page-body .list-filter-search .option-name {
font-size: 16px;
padding: 8px 24px 8px 0;
}
.archive-body .list-filter-search .option-date,
.page-body .list-filter-search .option-date {
top: calc(100% - 9px);
left: 0;
right: 0;
width: auto;
border-color: #999;
border-radius: 20px;
padding: 16px 24px 32px;
}
.archive-body .list-filter-search .option-date .option-header,
.page-body .list-filter-search .option-date .option-header {
align-items: center;
gap: 12px;
height: 46px;
font-size: 22px;
font-weight: 700;
letter-spacing: 0;
border-bottom: 1px solid #111;
margin-bottom: 23px;
}
.archive-body
.list-filter-search
.option-date
.option-header
.btn-filter-reset,
.page-body .list-filter-search .option-date .option-header .btn-filter-reset {
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
}
.archive-body .list-filter-search .option-date .option-sub-name,
.page-body .list-filter-search .option-date .option-sub-name {
display: block;
color: #333;
font-size: 16px;
font-weight: 600;
line-height: 1;
margin-bottom: 15px;
}
.archive-body .list-filter-search .option-date .date-item:not(:first-child),
.page-body .list-filter-search .option-date .date-item:not(:first-child) {
margin-top: 12px;
}
.archive-body .list-filter-search .option-date .date-item .label,
.page-body .list-filter-search .option-date .date-item .label {
width: 32px;
font-size: 14px;
padding-left: 8px;
}
.archive-body .list-filter-search .option-date .date-selector:nth-child(2),
.archive-body .list-filter-search .option-date .date-selector:nth-child(3),
.page-body .list-filter-search .option-date .date-selector:nth-child(2),
.page-body .list-filter-search .option-date .date-selector:nth-child(3) {
width: calc((100% - 32px - 10px) / 2);
}
.archive-body .list-filter-search .option-date .date-selector .selected-date,
.page-body .list-filter-search .option-date .date-selector .selected-date {
border-radius: 100px;
padding: 5px 0 5px 15px;
}
.archive-body
.list-filter-search
.option-date
.date-selector
.btn-selector::after,
.page-body
.list-filter-search
.option-date
.date-selector
.btn-selector::after {
top: 11px;
right: 11px;
width: 12px;
height: 12px;
background-image: url('data:image/svg+xml,');
}
.archive-body .list-filter-search .option-date .date-selector .date-list,
.page-body .list-filter-search .option-date .date-selector .date-list {
top: 0;
box-shadow: none;
min-height: 100px;
max-height: 40vh;
overflow-y: auto;
overscroll-behavior: none;
padding-top: 41px;
}
.archive-body
.list-filter-search
.option-date
.date-selector
.date-list
li:not(:first-child),
.page-body
.list-filter-search
.option-date
.date-selector
.date-list
li:not(:first-child) {
border-top: 1px solid #999;
}
.archive-body
.list-filter-search
.option-date
.date-selector
.date-list
button,
.page-body .list-filter-search .option-date .date-selector .date-list button {
height: 40px;
color: #111;
font-size: 16px;
font-weight: 500;
padding-left: 20px;
}
.archive-body
.list-filter-search
.option-date
.date-selector
.date-list.has-scroll,
.page-body
.list-filter-search
.option-date
.date-selector
.date-list.has-scroll {
max-height: 40vh;
}
.archive-body .list-filter-search .option-sort,
.page-body .list-filter-search .option-sort {
top: calc(100% - 9px);
border-color: #999;
}
.archive-body .list-filter-search .option-sort .sort-types,
.page-body .list-filter-search .option-sort .sort-types {
gap: 12px;
}
.archive-body .list-filter-search .date-list-label,
.page-body .list-filter-search .date-list-label {
display: none;
align-items: center;
gap: 8px;
position: absolute;
top: 1px;
left: 1px;
right: 1px;
height: 38px;
color: #999;
font-size: 16px;
font-weight: 500;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 1px solid #999;
background-color: #fff;
padding-left: 20px;
box-sizing: border-box;
z-index: 6;
}
.archive-body .list-filter-search .date-list-label::after,
.page-body .list-filter-search .date-list-label::after {
width: 15px;
height: 13px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
content: "";
}
.archive-body
.list-filter-search
.date-selector[data-selector-option-visible="true"]
.date-list-label,
.page-body
.list-filter-search
.date-selector[data-selector-option-visible="true"]
.date-list-label {
display: flex;
}
.archive-body .list-filter-search .btn-option-close,
.page-body .list-filter-search .btn-option-close {
position: absolute;
top: 31px;
right: 23px;
}
.archive-body .list-filter-search .btn-option-close::after,
.page-body .list-filter-search .btn-option-close::after {
display: block;
width: 18px;
height: 18px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
content: "";
}
}
.archive-body .btn-filter-toggle,
.page-body .btn-filter-toggle {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 40px;
color: #333;
font-size: 14px;
font-weight: 700;
border-radius: 24px;
border: 1px solid #999;
background-color: #fff;
padding: 0 19px;
box-sizing: border-box;
}
.archive-body .btn-filter-toggle::after,
.page-body .btn-filter-toggle::after {
width: 12px;
height: 12px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
content: "";
transition: all 0.3s;
}
.archive-body *[data-options-visible="true"] > .btn-filter-toggle::after,
.page-body *[data-options-visible="true"] > .btn-filter-toggle::after {
transform: rotateX(180deg);
}
.archive-body .filter-option-layer,
.page-body .filter-option-layer {
display: none;
position: absolute;
top: calc(100% + 10px);
left: 0;
width: calc(100vw - 44px);
border: 1px solid #999;
border-radius: 20px;
background-color: #fff;
padding: 16px 24px 32px;
box-sizing: border-box;
z-index: 39;
}
.archive-body .filter-option-layer .layer-header,
.page-body .filter-option-layer .layer-header {
display: flex;
align-items: center;
gap: 12px;
height: 46px;
border-bottom: 1px solid #111;
}
.archive-body .filter-option-layer .layer-header .title,
.page-body .filter-option-layer .layer-header .title {
color: #333;
font-size: 22px;
font-weight: 700;
line-height: 1;
border: 0;
padding: 0;
}
.archive-body .filter-option-layer .layer-header .btn-filter-reset,
.page-body .filter-option-layer .layer-header .btn-filter-reset {
position: static;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,');
}
.archive-body .filter-option-layer .layer-footer,
.page-body .filter-option-layer .layer-footer {
display: flex;
border-top: 1px solid #e8e8e8;
padding-top: 24px;
margin-top: 32px;
}
.archive-body .filter-option-layer .layer-footer .btn-filter-apply,
.page-body .filter-option-layer .layer-footer .btn-filter-apply {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 54px;
color: #fff;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
border-radius: 100px;
background-color: #000;
}
.archive-body .filter-option-layer .btn-layer-close,
.page-body .filter-option-layer .btn-layer-close {
position: absolute;
top: 31px;
right: 23px;
}
.archive-body .filter-option-layer .btn-layer-close::after,
.page-body .filter-option-layer .btn-layer-close::after {
display: block;
width: 18px;
height: 18px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
content: "";
}
.archive-body .filter-option-layer .filter-option-item,
.page-body .filter-option-layer .filter-option-item {
margin-top: 24px;
}
.archive-body .filter-option-layer .filter-option-item .option-name,
.page-body .filter-option-layer .filter-option-item .option-name {
letter-spacing: 0;
margin-bottom: 16px;
}
.archive-body .filter-option-layer .filter-option-item .option-list,
.page-body .filter-option-layer .filter-option-item .option-list {
display: flex;
flex-wrap: wrap;
gap: 8px 4px;
padding: 0;
}
.archive-body .filter-option-layer .filter-option-item .option-list li,
.page-body .filter-option-layer .filter-option-item .option-list li {
flex-shrink: 0;
margin: 0;
}
.archive-body .filter-option-layer .filter-option-item .option-list label,
.page-body .filter-option-layer .filter-option-item .option-list label {
color: #555;
font-size: 11px;
font-weight: 400;
line-height: 1;
border-radius: 20px;
background-color: #f2f2f2;
padding: 9px 18px;
transition: all 0.3s;
}
.archive-body
.filter-option-layer
.filter-option-item
.option-list
label::before,
.archive-body
.filter-option-layer
.filter-option-item
.option-list
label::after,
.page-body .filter-option-layer .filter-option-item .option-list label::before,
.page-body .filter-option-layer .filter-option-item .option-list label::after {
display: none;
}
.archive-body
.filter-option-layer
.filter-option-item
.option-list
input:checked
+ label,
.page-body
.filter-option-layer
.filter-option-item
.option-list
input:checked
+ label {
color: #fff;
background-color: #000;
}
.archive-body .filter-option-layer .filter-option-item .option-date,
.page-body .filter-option-layer .filter-option-item .option-date {
padding-left: 8px;
margin: 0;
}
.archive-body .filter-option-layer .filter-option-item .option-date .date-item,
.page-body .filter-option-layer .filter-option-item .option-date .date-item {
gap: 5px;
}
.archive-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.label,
.page-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.label {
width: 32px;
color: #666;
font-size: 14px;
}
.archive-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector,
.page-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector {
width: calc((100% - 32px - 8px - 5px) / 2);
}
.archive-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.selected-date,
.page-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.selected-date {
line-height: 24px;
border-radius: 100px;
padding: 5px 0 5px 15px;
}
.archive-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.btn-selector::after,
.page-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.btn-selector::after {
top: 11px;
right: 11px;
width: 12px;
height: 12px;
background-image: url('data:image/svg+xml,');
background-size: contain;
}
.archive-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.date-list-label,
.page-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.date-list-label {
display: none;
align-items: center;
gap: 15px;
position: absolute;
top: 1px;
left: 1px;
right: 1px;
height: 38px;
color: #999;
font-size: 16px;
font-weight: 500;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 1px solid #999;
background-color: #fff;
padding-left: 20px;
box-sizing: border-box;
z-index: 6;
}
.archive-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.date-list-label::after,
.page-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.date-list-label::after {
width: 15px;
height: 13px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
content: "";
}
.archive-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.date-list,
.page-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.date-list {
top: 0;
border-radius: 4px;
box-shadow: none;
min-height: 100px;
max-height: 40vh;
overflow-y: auto;
overscroll-behavior: none;
padding-top: 41px;
}
.archive-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.date-list
li:not(:first-child),
.page-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.date-list
li:not(:first-child) {
border-top: 1px solid #999;
}
.archive-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.date-list
button,
.page-body
.filter-option-layer
.filter-option-item
.option-date
.date-item
.date-selector
.date-list
button {
height: 40px;
color: #111;
font-size: 16px;
font-weight: 500;
padding-left: 20px;
}
.archive-body *[data-options-visible="true"] > .filter-option-layer,
.page-body *[data-options-visible="true"] > .filter-option-layer {
display: block;
}
.archive-body
*[data-options-visible="true"]
> .filter-option-layer
.option-date
.date-item
.date-selector[data-selector-option-visible="true"]
.date-list-label,
.page-body
*[data-options-visible="true"]
> .filter-option-layer
.option-date
.date-item
.date-selector[data-selector-option-visible="true"]
.date-list-label {
display: flex;
}
.archive-body .btn-selector-up,
.page-body .btn-selector-up {
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 50%;
background-color: transparent;
outline: 0;
}
.archive-body .btn-selector-up::after,
.page-body .btn-selector-up::after {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 7px;
background: url("./assets/images/icon_date_selector.png") no-repeat;
background-size: 8px 14px;
content: "";
}
.archive-body .btn-selector-up:hover,
.page-body .btn-selector-up:hover {
opacity: 0.5;
}
.archive-body .btn-selector-down,
.page-body .btn-selector-down {
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 50%;
background-color: transparent;
outline: 0;
}
.archive-body .btn-selector-down::after,
.page-body .btn-selector-down::after {
position: absolute;
bottom: 8px;
right: 8px;
width: 8px;
height: 7px;
background: url("./assets/images/icon_date_selector.png") no-repeat 0 100%;
background-size: 8px 14px;
content: "";
}
.archive-body .btn-selector-down:hover,
.page-body .btn-selector-down:hover {
opacity: 0.5;
}
@media screen and (max-width: 1280px) {
.archive-body .btn-selector-up,
.archive-body .btn-selector-down,
.page-body .btn-selector-up,
.page-body .btn-selector-down {
display: none;
}
}
.archive-body .layer-media-download,
.page-body .layer-media-download {
position: absolute;
top: 100%;
left: 0;
width: 234px;
border: 1px solid #999;
border-radius: 6px;
background-color: #fff;
margin-top: 8px;
box-sizing: border-box;
z-index: 10;
}
.archive-body .layer-media-download ul,
.page-body .layer-media-download ul {
display: flex;
flex-direction: column;
gap: 16px;
max-height: 338px;
overflow: hidden;
overflow-y: auto;
margin-right: 8px;
overscroll-behavior: contain;
}
.archive-body .layer-media-download ul::before,
.archive-body .layer-media-download ul::after,
.page-body .layer-media-download ul::before,
.page-body .layer-media-download ul::after {
flex-shrink: 0;
height: 8px;
content: "";
}
.archive-body .layer-media-download ul::-webkit-scrollbar,
.page-body .layer-media-download ul::-webkit-scrollbar {
width: 10px;
}
.archive-body .layer-media-download ul::-webkit-scrollbar-thumb,
.page-body .layer-media-download ul::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #999;
}
.archive-body .layer-media-download ul::-webkit-scrollbar-track,
.page-body .layer-media-download ul::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #eee;
margin: 8px 0;
}
.archive-body .layer-media-download ul li,
.page-body .layer-media-download ul li {
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
padding: 0 24px;
}
.archive-body .layer-media-download ul .item,
.page-body .layer-media-download ul .item {
width: 126px;
height: 70px;
overflow: hidden;
border-radius: 6px;
}
.archive-body .layer-media-download ul .item img,
.page-body .layer-media-download ul .item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.archive-body .layer-media-download ul .btn-item-remove,
.page-body .layer-media-download ul .btn-item-remove {
width: 20px;
height: 24px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
}
.archive-body .layer-media-download .layer-bottom,
.page-body .layer-media-download .layer-bottom {
display: flex;
border-top: 1px solid #ebebeb;
padding: 24px 0;
margin: 0 24px;
}
.archive-body .layer-media-download .btn-download-all,
.page-body .layer-media-download .btn-download-all {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
width: 100%;
height: 50px;
color: #000;
font-size: 18px;
font-weight: 700;
border: 1px solid #333;
border-radius: 36px;
background-color: #fff;
box-sizing: border-box;
}
@media screen and (max-width: 1280px) {
.archive-body .layer-media-download,
.page-body .layer-media-download {
width: 208px;
}
.archive-body .layer-media-download ul,
.page-body .layer-media-download ul {
max-height: 296px;
}
.archive-body .layer-media-download ul::-webkit-scrollbar,
.page-body .layer-media-download ul::-webkit-scrollbar {
width: 8px;
}
.archive-body .layer-media-download ul::-webkit-scrollbar-thumb,
.page-body .layer-media-download ul::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #999;
}
.archive-body .layer-media-download ul::-webkit-scrollbar-track,
.page-body .layer-media-download ul::-webkit-scrollbar-track {
border-radius: 8px;
background-color: #eee;
margin: 8px 0;
}
.archive-body .layer-media-download ul .item,
.page-body .layer-media-download ul .item {
width: 104px;
height: 58px;
}
.archive-body .layer-media-download ul .btn-item-remove,
.page-body .layer-media-download ul .btn-item-remove {
width: 18px;
height: 22px;
background-image: url('data:image/svg+xml,');
}
.archive-body .layer-media-download .btn-download-all,
.page-body .layer-media-download .btn-download-all {
height: 40px;
font-size: 16px;
}
.archive-body .layer-media-download .btn-download-all::after,
.page-body .layer-media-download .btn-download-all::after {
width: 18px;
height: 17px;
background-image: url('data:image/svg+xml,');
margin-right: -12px;
}
}
@media screen and (max-width: 860px) {
.archive-body .layer-media-download,
.page-body .layer-media-download {
top: auto;
bottom: 100%;
left: auto;
right: 0;
width: 232px;
border-radius: 4px;
margin: 0 0 8px 0;
}
.archive-body .layer-media-download ul,
.page-body .layer-media-download ul {
max-height: 338px;
}
.archive-body .layer-media-download ul .item,
.page-body .layer-media-download ul .item {
width: 126px;
height: 70px;
}
.archive-body .layer-media-download .btn-download-all,
.page-body .layer-media-download .btn-download-all {
height: 50px;
font-size: 18px;
}
.archive-body .layer-media-download .btn-download-all::after,
.page-body .layer-media-download .btn-download-all::after {
width: 20px;
height: 19px;
background-image: url('data:image/svg+xml,');
margin-right: -13px;
}
}
.archive-body .tab-sub-category,
.page-body .tab-sub-category {
box-sizing: border-box;
box-shadow: 0 -1px #e8e8e8 inset;
}
.archive-body .tab-sub-category ul,
.page-body .tab-sub-category ul {
display: flex;
justify-content: center;
gap: 8px;
}
.archive-body .tab-sub-category li,
.page-body .tab-sub-category li {
flex-shrink: 0;
}
.archive-body .tab-sub-category button,
.archive-body .tab-sub-category a,
.page-body .tab-sub-category button,
.page-body .tab-sub-category a {
display: flex;
justify-content: center;
align-items: flex-start;
width: 276px;
height: 39px;
color: #999;
font-size: 22px;
font-weight: 700;
line-height: 1;
box-sizing: border-box;
/* Divi 기본 button 스타일 reset */
background: none;
background-color: transparent;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.archive-body .tab-sub-category button[aria-selected="true"],
.archive-body .tab-sub-category a[aria-selected="true"],
.page-body .tab-sub-category button[aria-selected="true"],
.page-body .tab-sub-category a[aria-selected="true"] {
position: relative;
color: #111;
}
.archive-body .tab-sub-category button[aria-selected="true"]::after,
.archive-body .tab-sub-category a[aria-selected="true"]::after,
.page-body .tab-sub-category button[aria-selected="true"]::after,
.page-body .tab-sub-category a[aria-selected="true"]::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-bottom: 2px solid #111;
content: "";
}
.archive-body .tab-sub-category + .list-options,
.page-body .tab-sub-category + .list-options {
margin-top: 80px;
}
.archive-body .list-sub-category,
.page-body .list-sub-category {
margin-top: 40px;
}
.archive-body .list-sub-category ul,
.page-body .list-sub-category ul {
display: flex;
justify-content: center;
}
.archive-body .list-sub-category li,
.page-body .list-sub-category li {
padding: 0 57px;
}
.archive-body .list-sub-category li:not(:first-child),
.page-body .list-sub-category li:not(:first-child) {
border-left: 1px solid #e8e8e8;
}
.archive-body .list-sub-category a,
.page-body .list-sub-category a {
display: block;
color: #999;
font-size: 20px;
font-weight: 700;
line-height: 20px;
}
.archive-body .list-sub-category a[aria-selected="true"],
.page-body .list-sub-category a[aria-selected="true"] {
color: #111;
}
@media screen and (max-width: 1280px) {
.archive-body,
.page-body {
padding-bottom: 160px;
}
.archive-body .list-options.type-youtube,
.archive-body .list-options.type-media,
.page-body .list-options.type-youtube,
.page-body .list-options.type-media {
padding-left: 240px;
margin-top: 55px;
}
.archive-body .list-options.type-youtube + .search-result-none,
.archive-body .list-options.type-media + .search-result-none,
.page-body .list-options.type-youtube + .search-result-none,
.page-body .list-options.type-media + .search-result-none {
padding-left: 240px;
}
.archive-body .tab-sub-category ul,
.page-body .tab-sub-category ul {
gap: 0;
}
.archive-body .tab-sub-category li,
.page-body .tab-sub-category li {
flex-shrink: 0;
}
.archive-body .tab-sub-category button,
.archive-body .tab-sub-category a,
.page-body .tab-sub-category button,
.page-body .tab-sub-category a {
width: 157px;
height: 37px;
font-size: 20px;
}
.archive-body .tab-sub-category + .list-options,
.page-body .tab-sub-category + .list-options {
margin-top: 48px;
}
.archive-body .list-sub-category,
.page-body .list-sub-category {
margin-top: 32px;
}
.archive-body .list-sub-category li,
.page-body .list-sub-category li {
padding: 0 48px;
}
.archive-body .list-sub-category a,
.page-body .list-sub-category a {
font-size: 18px;
line-height: 1;
}
}
@media screen and (max-width: 860px) {
.archive-body,
.page-body {
padding-bottom: 120px;
}
.archive-body .list-options,
.page-body .list-options {
position: relative;
height: 44px;
}
.archive-body .list-options.type-youtube,
.archive-body .list-options.type-media,
.page-body .list-options.type-youtube,
.page-body .list-options.type-media {
flex-direction: row-reverse;
padding-left: 0;
margin-top: 32px;
}
.archive-body .list-options.type-youtube + .search-result-none,
.archive-body .list-options.type-media + .search-result-none,
.page-body .list-options.type-youtube + .search-result-none,
.page-body .list-options.type-media + .search-result-none {
padding-left: 0;
}
.archive-body .list-options.type-youtube .list-filter-media,
.page-body .list-options.type-youtube .list-filter-media {
width: 100%;
}
.archive-body .list-options.type-youtube .filter-option-layer,
.page-body .list-options.type-youtube .filter-option-layer {
width: 100%;
}
.archive-body .tab-sub-category ul,
.page-body .tab-sub-category ul {
justify-content: space-around;
overflow: hidden;
}
.archive-body .tab-sub-category ul li,
.page-body .tab-sub-category ul li {
width: 33.33%;
}
.archive-body .tab-sub-category ul li:nth-child(3),
.page-body .tab-sub-category ul li:nth-child(3) {
width: 33.34%;
}
.archive-body .tab-sub-category button,
.archive-body .tab-sub-category a,
.page-body .tab-sub-category button,
.page-body .tab-sub-category a {
width: 100%;
height: 29px;
font-size: 16px;
}
.archive-body .tab-sub-category + .list-options,
.page-body .tab-sub-category + .list-options {
margin-top: 32px;
}
.archive-body .tab-sub-category:has(.line-2) button,
.archive-body .tab-sub-category a,
.page-body .tab-sub-category:has(.line-2) button,
.page-body .tab-sub-category a {
display: flex;
align-items: center;
height: 49px;
line-height: 18px;
word-break: keep-all;
text-align: center;
padding-bottom: 13px;
}
.archive-body .list-sub-category,
.page-body .list-sub-category {
margin-top: 24px;
}
.archive-body .list-sub-category li,
.page-body .list-sub-category li {
padding: 0 24px;
}
.archive-body .list-sub-category a,
.page-body .list-sub-category a {
font-size: 14px;
line-height: 1;
}
}
@media screen and (max-width: 860px) {
.search-header + .archive-body .tab-sub-category ul {
display: flex;
justify-content: center;
}
.search-header + .archive-body .tab-sub-category li:nth-child(1),
.search-header + .archive-body .tab-sub-category li:nth-child(2),
.search-header + .archive-body .tab-sub-category li:nth-child(3) {
width: 33.33%;
}
.search-header + .archive-body .tab-sub-category button,
.search-header + .archive-body .tab-sub-category a {
display: flex;
align-items: center;
height: 49px;
line-height: 18px;
word-break: keep-all;
text-align: center;
padding-bottom: 13px;
}
.search-header
+ .archive-body
.tab-sub-category
button[aria-selected="true"]::after,
.search-header
+ .archive-body
.tab-sub-category
a[aria-selected="true"]::after {
left: 0;
right: 0;
}
}
.archive-list-wrap {
min-height: 700px;
}
@media screen and (max-width: 1280px) {
.archive-list-wrap {
min-height: 700px;
}
}
@media screen and (max-width: 860px) {
.archive-list-wrap {
min-height: 460px;
}
}
.archive-list-wrap .archive-list {
display: flex;
}
.archive-list-wrap .archive-list[data-list-type="grid"] {
flex-wrap: wrap;
gap: 80px 24px;
}
.archive-list-wrap .archive-list[data-list-type="grid"] > li {
flex-shrink: 0;
width: calc(33.33% - 16px);
}
.archive-list-wrap .archive-list[data-list-type="horizontal"] {
flex-direction: column;
}
.archive-list-wrap .archive-list[data-list-type="horizontal"] > li {
width: 100%;
}
@media screen and (max-width: 1280px) {
.archive-list-wrap .archive-list[data-list-type="grid"] {
gap: 60px 16px;
}
.archive-list-wrap .archive-list[data-list-type="grid"] > li {
width: calc(50% - 8px);
}
}
@media screen and (max-width: 860px) {
.archive-list-wrap .archive-list[data-list-type="grid"] {
gap: 50px 0;
}
.archive-list-wrap .archive-list[data-list-type="grid"] > li {
width: 100%;
}
}
.archive-list-wrap.type-media {
padding-left: 327px;
}
.archive-list-wrap.type-media .archive-list[data-list-type="grid"] {
gap: 80px 24px;
}
.archive-list-wrap.type-media .archive-list[data-list-type="grid"] > li {
width: calc(33.33% - 16px);
}
@media screen and (max-width: 1280px) {
.archive-list-wrap.type-media {
padding-left: 240px;
}
.archive-list-wrap.type-media .archive-list[data-list-type="grid"] {
gap: 60px 16px;
padding-top: 24px;
}
.archive-list-wrap.type-media .archive-list[data-list-type="grid"] > li {
width: calc(50% - 8px);
}
}
@media screen and (max-width: 860px) {
.archive-list-wrap.type-media {
padding-left: 0;
}
.archive-list-wrap.type-media .archive-list[data-list-type="grid"] {
gap: 50px 0;
}
.archive-list-wrap.type-media .archive-list[data-list-type="grid"] > li {
width: 100%;
}
}
.archive-list-wrap.type-youtube .archive-list[data-list-type="grid"] {
gap: 80px 24px;
}
.archive-list-wrap.type-youtube .archive-list[data-list-type="grid"] > li {
width: calc(33.33% - 16px);
}
@media screen and (max-width: 1280px) {
.archive-list-wrap.type-youtube .archive-list[data-list-type="grid"] {
gap: 60px 16px;
}
.archive-list-wrap.type-youtube .archive-list[data-list-type="grid"] > li {
width: calc(50% - 8px);
}
}
@media screen and (max-width: 860px) {
.archive-list-wrap.type-youtube .archive-list[data-list-type="grid"] {
gap: 50px 0;
}
.archive-list-wrap.type-youtube .archive-list[data-list-type="grid"] > li {
width: 100%;
}
}
/* .archive-list-wrap.type-shorts .archive-list[data-list-type=grid] {
gap: 60px 24px;
}
.archive-list-wrap.type-shorts .archive-list[data-list-type=grid] > li {
width: calc((100% - 96px) / 5);
}
.archive-list-wrap.type-shorts .archive-list[data-list-type=grid] > li .item .thumb {
aspect-ratio: 9/16;
}
@media screen and (max-width: 1280px) {
.archive-list-wrap.type-shorts .archive-list[data-list-type=grid] {
gap: 48px 16px;
}
.archive-list-wrap.type-shorts .archive-list[data-list-type=grid] > li {
width: calc((100% - 32px) / 3);
}
}
@media screen and (max-width: 860px) {
.archive-list-wrap.type-shorts {
margin: 0 -22px;
}
.archive-list-wrap.type-shorts .archive-list[data-list-type=grid] {
gap: 4px;
}
.archive-list-wrap.type-shorts .archive-list[data-list-type=grid] > li {
width: calc((100% - 8px) / 3);
}
.archive-list-wrap.type-shorts .archive-list[data-list-type=grid] > li .item .title {
display: none;
}
} */
.archive-list-wrap.type-instagram .archive-list {
padding-top: 80px;
}
.archive-list-wrap.type-instagram .archive-list[data-list-type="grid"] {
gap: 60px 24px;
}
.archive-list-wrap.type-instagram .archive-list[data-list-type="grid"] > li {
width: calc(33.33% - 16px);
}
@media screen and (max-width: 1280px) {
.archive-list-wrap.type-instagram .archive-list {
padding-top: 48px;
}
.archive-list-wrap.type-instagram .archive-list[data-list-type="grid"] {
gap: 60px 16px;
}
.archive-list-wrap.type-instagram .archive-list[data-list-type="grid"] > li {
width: calc(50% - 8px);
}
}
@media screen and (max-width: 860px) {
.archive-list-wrap.type-instagram .archive-list {
padding-top: 32px;
}
.archive-list-wrap.type-instagram .archive-list[data-list-type="grid"] {
gap: 32px 0;
}
.archive-list-wrap.type-instagram .archive-list[data-list-type="grid"] > li {
width: 100%;
}
}
.archive-list-wrap.type-series {
border-top: 1px solid #e8e8e8;
}
@media screen and (max-width: 860px) {
.archive-list-wrap.type-series {
border: 0;
}
}
.archive-list-wrap .check-download {
position: absolute;
top: 10px;
left: 10px;
overflow: hidden;
z-index: 1;
}
.archive-list-wrap .check-download input[type="checkbox"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
cursor: pointer;
}
.archive-list-wrap .check-download i {
display: none;
width: 26px;
height: 26px;
background: url("./assets/images/icon_check_download.png") no-repeat;
background-size: 26px 26px;
}
.archive-list-wrap .check-download i::before {
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
background-color: #fff;
transition: opacity 0.2s;
opacity: 1;
content: "";
}
.archive-list-wrap .check-download input[type="checkbox"]:checked + i {
display: block;
}
.archive-list-wrap .check-download input[type="checkbox"]:checked + i::before {
opacity: 0;
}
@media screen and (max-width: 1280px) {
.archive-list-wrap .check-download .check-download i {
display: block;
}
}
@media screen and (max-width: 860px) {
.archive-list-wrap .check-download .check-download i {
width: 24px;
height: 24px;
background-size: 24px 24px;
}
}
.archive-list-wrap:hover .check-download i {
display: block;
}
.archive-list-wrap .item {
position: relative;
width: 100%;
overflow: hidden;
}
.archive-list-wrap .item .item-link {
display: block;
}
.archive-list-wrap .item mark.hilite {
color: #608cba;
background-color: transparent;
}
@media screen and (min-width: 1280px) {
.archive-list-wrap .item .thumb img,
.archive-list-wrap .item .thumb video {
transition: transform 0.3s;
}
.archive-list-wrap .item .title .text-inner {
background-image: linear-gradient(
to top,
#555 0,
#555 1px,
transparent 1px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 0;
transition: background 0.5s;
}
.archive-list-wrap .item:hover .thumb img,
.archive-list-wrap .item:hover .thumb video {
transform: scale(1.06);
}
.archive-list-wrap .item:hover .title .text-inner {
background-size: 100%;
}
}
.archive-list-wrap ul[data-list-type="grid"] {
padding-top: 30px;
}
.archive-list-wrap ul[data-list-type="grid"] .item .thumb {
position: relative;
overflow: hidden;
border-radius: 6px;
background-color: #ddd;
aspect-ratio: 576/324;
}
.archive-list-wrap ul[data-list-type="grid"] .item .thumb img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.archive-list-wrap ul[data-list-type="grid"] .item .thumb video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.archive-list-wrap ul[data-list-type="grid"] .item .thumb .icon-play {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
}
@media screen and (max-width: 1280px) {
.archive-list-wrap ul[data-list-type="grid"] .item .thumb .icon-play {
top: 11px;
width: 32px;
height: 32px;
background-image: url('data:image/svg+xml,');
}
}
@media screen and (max-width: 860px) {
.archive-list-wrap ul[data-list-type="grid"] .item .thumb .icon-play {
top: 10px;
width: 36px;
height: 36px;
background-image: url('data:image/svg+xml,');
}
}
.archive-list-wrap ul[data-list-type="grid"] .item .thumb:has(video) {
background-color: #000;
}
.archive-list-wrap ul[data-list-type="grid"] .item .title {
max-height: 76px;
color: #111;
font-size: 26px;
font-weight: 600;
line-height: 38px;
letter-spacing: -0.01em;
padding-top: 30px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
.archive-list-wrap ul[data-list-type="grid"] .item .date {
color: #aaa;
font-size: 13px;
line-height: 1;
margin-top: 82px;
font-family: "Poppins", sans-serif;
}
.archive-list-wrap ul[data-list-type="grid"] .item .media-date .date {
margin-top: 15px;
}
.archive-list-wrap ul[data-list-type="grid"] .item .category {
display: flex;
flex-wrap: wrap;
gap: 4px;
position: absolute;
bottom: 56px;
left: 0;
right: 0;
overflow: hidden;
height: 25px;
font-family: "Poppins", sans-serif;
}
.archive-list-wrap ul[data-list-type="grid"] .item .category a {
display: flex;
justify-content: center;
align-items: center;
height: 24px;
color: #777;
font-size: 12px;
font-weight: 500;
line-height: 1;
border: 1px solid #777;
border-radius: 50px;
background-color: #fff;
padding: 0 11px;
box-sizing: border-box;
}
@media screen and (min-width: 1280px) {
.archive-list-wrap ul[data-list-type="grid"] .item .category a:hover {
color: #fff;
background-color: #777;
}
}
.archive-list-wrap ul[data-list-type="grid"] .item .tags {
display: flex;
flex-wrap: wrap;
position: absolute;
bottom: 24px;
left: 0;
gap: 12px;
overflow: hidden;
height: 19px;
right: 0;
}
.archive-list-wrap ul[data-list-type="grid"] .item .tags li {
display: flex;
flex-shrink: 0;
}
.archive-list-wrap ul[data-list-type="grid"] .item .tags a {
color: #333;
font-size: 16px;
line-height: 1;
}
.archive-list-wrap ul[data-list-type="grid"] .item .tags a::before {
content: "#";
}
.archive-list-wrap ul[data-list-type="grid"] .item.type-media .thumb {
overflow: hidden;
border-radius: 6px;
aspect-ratio: 467/263;
}
.archive-list-wrap
ul[data-list-type="grid"]
.item.type-media
.thumb:has(.vertical) {
background-color: transparent;
}
.archive-list-wrap
ul[data-list-type="grid"]
.item.type-media
.thumb
img.vertical {
-o-object-fit: contain;
object-fit: contain;
}
.archive-list-wrap ul[data-list-type="grid"] .item.type-series .description {
color: #333;
font-size: 18px;
font-weight: 400;
line-height: 26px;
margin-top: 16px;
}
@media screen and (max-width: 1280px) {
.archive-list-wrap ul[data-list-type="grid"] {
padding-top: 30px;
}
.archive-list-wrap ul[data-list-type="grid"] .item .title {
max-height: 56px;
font-size: 20px;
line-height: 28px;
padding-top: 24px;
}
.archive-list-wrap ul[data-list-type="grid"] .item .date {
color: #aaa;
font-size: 13px;
line-height: 1;
margin-top: 73px;
}
.archive-list-wrap ul[data-list-type="grid"] .item .media-date .date {
margin-top: 12px;
}
.archive-list-wrap ul[data-list-type="grid"] .item .category {
position: absolute;
bottom: 49px;
height: 24px;
}
.archive-list-wrap ul[data-list-type="grid"] .item .category a {
height: 23px;
font-size: 11px;
}
.archive-list-wrap ul[data-list-type="grid"] .item .tags {
bottom: 21px;
gap: 8px;
height: 17px;
}
.archive-list-wrap ul[data-list-type="grid"] .item .tags a {
font-size: 14px;
}
.archive-list-wrap ul[data-list-type="grid"] .item.type-series .description {
font-size: 16px;
line-height: 24px;
margin-top: 12px;
}
}
@media screen and (max-width: 860px) {
.archive-list-wrap ul[data-list-type="grid"] {
padding-top: 20px;
}
.archive-list-wrap ul[data-list-type="grid"] .item .title {
font-size: 18px;
padding-top: 16px;
}
.archive-list-wrap ul[data-list-type="grid"] .item .date {
font-size: 12px;
}
.archive-list-wrap ul[data-list-type="grid"] .item.type-series .description {
font-size: 14px;
line-height: 22px;
margin-top: 12px;
}
}
.archive-list-wrap ul[data-list-type="horizontal"] {
padding-top: 6px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item {
height: 288px;
border-bottom: 1px solid #e2e2e2;
padding: 24px 15.625vw 24px calc(426px + 7.66vw);
box-sizing: border-box;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .item-link::after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
content: "";
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .thumb {
position: absolute;
top: 24px;
left: 0;
width: 426px;
overflow: hidden;
border-radius: 6px;
aspect-ratio: 426/240;
z-index: 1;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .thumb img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .thumb video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .thumb .icon-play {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
}
@media screen and (max-width: 1280px) {
.archive-list-wrap ul[data-list-type="horizontal"] .item .thumb .icon-play {
top: 11px;
width: 32px;
height: 32px;
background-image: url('data:image/svg+xml,');
}
}
@media screen and (max-width: 860px) {
.archive-list-wrap ul[data-list-type="horizontal"] .item .thumb .icon-play {
top: 10px;
width: 36px;
height: 36px;
background-image: url('data:image/svg+xml,');
}
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .thumb:has(video) {
background-color: #000;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .title {
position: relative;
max-height: 96px;
color: #111;
font-size: 32px;
font-weight: 600;
line-height: 48px;
letter-spacing: -0.01em;
padding-top: 32px;
z-index: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .date {
position: absolute;
top: 74px;
right: 0;
color: #aaa;
font-size: 13px;
line-height: 1;
z-index: 1;
font-family: "Poppins", sans-serif;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .category {
display: flex;
flex-wrap: wrap;
gap: 4px;
position: relative;
overflow: hidden;
height: 25px;
margin-top: 20px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .category a {
display: flex;
justify-content: center;
align-items: center;
height: 24px;
color: #777;
font-size: 12px;
font-weight: 500;
line-height: 1;
border: 1px solid #777;
border-radius: 50px;
background-color: #fff;
padding: 0 11px;
box-sizing: border-box;
}
@media screen and (min-width: 1280px) {
.archive-list-wrap ul[data-list-type="horizontal"] .item .category a:hover {
color: #fff;
background-color: #777;
}
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .tags {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
position: relative;
margin-top: 19px;
z-index: 1;
height: 18px;
overflow: hidden;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .tags a {
display: block;
color: #333;
font-size: 16px;
line-height: 1;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .tags a::before {
content: "#";
}
.archive-list-wrap
ul[data-list-type="horizontal"]
.item:has(.category a[href*="/shorts"])
.thumb {
background-color: #000;
}
.archive-list-wrap
ul[data-list-type="horizontal"]
.item:has(.category a[href*="/shorts"])
.thumb
img {
-o-object-fit: contain;
object-fit: contain;
}
@media screen and (max-width: 1280px) {
.archive-list-wrap ul[data-list-type="horizontal"] {
padding-top: 4px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item {
height: 221px;
padding: 20px 15.625vw 20px calc(304px + 9.38vw);
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .thumb {
top: 20px;
width: 304px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .title {
max-height: 68px;
font-size: 22px;
line-height: 34px;
padding-top: 4px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .date {
top: 36px;
font-size: 12px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .category {
height: 23px;
margin-top: 12px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .category a {
height: 23px;
font-size: 11px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .tags {
gap: 4px 8px;
margin-top: 12px;
height: 16px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .tags a {
font-size: 14px;
}
}
@media screen and (max-width: 860px) {
.archive-list-wrap ul[data-list-type="horizontal"] {
gap: 24px;
padding-top: 20px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item {
height: 78px;
border: 0;
padding: 0 0 0 155px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .thumb {
top: 0;
width: 139px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .title {
max-height: 34px;
font-size: 13px;
line-height: 17px;
padding-top: 0;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .date {
top: auto;
bottom: 0;
right: auto;
left: 155px;
font-size: 8px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .category {
gap: 2px;
height: 14px;
margin-top: 6px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .category a {
height: 13px;
font-size: 7px;
border-radius: 99px;
padding: 0 7px;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .tags {
gap: 4px;
margin-top: 3px;
flex-wrap: wrap;
height: 9px;
overflow: hidden;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .tags li {
flex-shrink: 0;
display: flex;
}
.archive-list-wrap ul[data-list-type="horizontal"] .item .tags a {
font-size: 9px;
}
}
.archive-list-wrap .list-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 80px;
}
.archive-list-wrap .list-pagination .btn-nav {
flex-shrink: 0;
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-size: 32px 32px;
}
.archive-list-wrap .list-pagination .btn-nav.disabled {
cursor: default;
pointer-events: none;
}
.archive-list-wrap .list-pagination .btn-nav.prev,
.archive-list-wrap .list-pagination .btn-nav.next {
background-image: url("./assets/images/icon_btn_nav_next.png");
}
.archive-list-wrap .list-pagination .btn-nav.prev-10,
.archive-list-wrap .list-pagination .btn-nav.next-10 {
background-image: url("./assets/images/icon_btn_nav_next_10.png");
}
.archive-list-wrap .list-pagination .btn-nav.prev.disabled,
.archive-list-wrap .list-pagination .btn-nav.next.disabled {
background-image: url("./assets/images/icon_btn_nav_next_disabled.png");
}
.archive-list-wrap .list-pagination .btn-nav.prev-10.disabled,
.archive-list-wrap .list-pagination .btn-nav.next-10.disabled {
background-image: url("./assets/images/icon_btn_nav_next_10_disabled.png");
}
.archive-list-wrap .list-pagination .btn-nav.prev,
.archive-list-wrap .list-pagination .btn-nav.prev-10 {
transform: rotateY(180deg);
}
.archive-list-wrap .list-pagination .list-pages {
display: flex;
align-items: center;
gap: 32px;
padding: 0 32px;
}
.archive-list-wrap .list-pagination .list-pages > * {
color: #111;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.01em;
font-family: "Poppins", sans-serif;
}
.archive-list-wrap .list-pagination .list-pages > .current-page {
color: #ea002c;
font-weight: 700;
}
@media screen and (max-width: 1280px) {
.archive-list-wrap .list-pagination {
margin-top: 60px;
}
}
@media screen and (max-width: 860px) {
.archive-list-wrap .list-pagination {
gap: 4px;
margin-top: 50px;
}
.archive-list-wrap .list-pagination .btn-nav {
width: 26px;
height: 26px;
background-size: 26px 26px;
}
.archive-list-wrap .list-pagination .btn-nav.prev,
.archive-list-wrap .list-pagination .btn-nav.next {
background-image: url('data:image/svg+xml,');
}
.archive-list-wrap .list-pagination .btn-nav.prev-10,
.archive-list-wrap .list-pagination .btn-nav.next-10 {
background-image: url('data:image/svg+xml,');
}
.archive-list-wrap .list-pagination .btn-nav.prev.disabled,
.archive-list-wrap .list-pagination .btn-nav.next.disabled {
background-image: url('data:image/svg+xml,');
}
.archive-list-wrap .list-pagination .btn-nav.prev-10.disabled,
.archive-list-wrap .list-pagination .btn-nav.next-10.disabled {
background-image: url('data:image/svg+xml,');
}
.archive-list-wrap .list-pagination .btn-nav.prev.disabled,
.archive-list-wrap .list-pagination .btn-nav.prev-10.disabled {
transform: rotateY(0);
}
.archive-list-wrap .list-pagination .btn-nav.next.disabled,
.archive-list-wrap .list-pagination .btn-nav.next-10.disabled {
transform: rotateY(180deg);
}
.archive-list-wrap .list-pagination .list-pages {
gap: 16px;
padding: 0 12px;
}
}
#main-content {
position: relative;
margin-top : 100px;
}
/* .inner: 원본 사이트의 max-width 컨테이너 */
#main-content > .inner {
max-width: 1760px;
margin: 0 auto;
padding: 0 72px;
box-sizing: border-box;
}
@media screen and (max-width: 1280px) {
#main-content > .inner {
padding: 0 40px;
}
}
@media screen and (max-width: 860px) {
#main-content > .inner {
padding: 0 20px;
}
}
.page-header {
padding: 100px 0 80px;
}
@media screen and (max-width: 1280px) {
.page-header {
padding: 80px 0 60px;
}
}
@media screen and (max-width: 860px) {
.page-header {
padding: 50px 0;
}
}
.page-title {
color: #000;
font-size: 58px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
text-align: center;
font-family: "Poppins", sans-serif;
}
@media screen and (max-width: 1280px) {
.page-title {
font-size: 44px;
}
}
@media screen and (max-width: 860px) {
.page-title {
font-size: 28px;
}
}
@media screen and (max-width: 1280px) {
.archive-body, .page-body {
padding-bottom: 160px;
}
}
.archive-body, .page-body {
padding-bottom: 200px;
}
/* tab-sub-category: opacity:0 으로 시작, JS에서 is-ready 클래스 추가 후 fade-in */
.archive-body .tab-sub-category, .page-body .tab-sub-category {
box-sizing: border-box;
width: 100%;
box-shadow: 0 -1px #e8e8e8 inset;
background-color: #fff;
transition: opacity 0.15s ease;
}
.archive-body .tab-sub-category.is-ready, .page-body .tab-sub-category.is-ready {
opacity: 1;
border-top: 2px solid #fff;
box-shadow: 0 -1px #e8e8e8 inset, 0 3px 0 0 #fff;
}
/* =============================================
page-heritage-wrap / aside / contetns / tabs
(원본 사이트 스타일 - 이 테마에 정의 없음)
============================================= */
.page-heritage-wrap {
display: flex;
justify-content: space-between;
position: relative;
}
@media screen and (max-width: 1280px) {
.page-heritage-wrap {
flex-direction: column;
padding-top: 0;
}
}
@media screen and (max-width: 860px) {
.page-heritage-wrap {
padding-top: 0;
}
}
.page-heritage-aside {
width: 36.04%;
align-self: flex-start;
padding-top: 40px;
}
@media screen and (max-width: 1280px) {
.page-heritage-aside {
width: 100%;
padding: 40px 0;
box-sizing: border-box;
background-color: #fff;
outline: 2px solid #fff;
outline-offset: -2px;
border-right: 3px solid #fff;
}
}
@media screen and (max-width: 860px) {
.page-heritage-aside {
padding: 20px 0;
}
}
.page-heritage-contetns {
width: 57.77%;
padding-top: 0;
}
.page-heritage-contetns .heritage-item-group:first-of-type {
border-top: 1px solid #e2e2e2;
}
.page-heritage-contetns .heritage-item {
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
height: 86px;
border-bottom: 1px solid #e2e2e2;
}
.page-heritage-contetns .heritage-item .date {
flex-shrink: 0;
width: 150px;
color: #999;
font-size: 18px;
line-height: 1;
font-family: "Poppins", sans-serif;
}
.page-heritage-contetns .heritage-item .thumb {
flex-shrink: 0;
width: 126px;
height: 70px;
overflow: hidden;
}
.page-heritage-contetns .heritage-item .thumb div {
position: relative;
display: block;
height: 100%;
cursor: default;
}
.page-heritage-contetns .heritage-item .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: default;
}
@media screen and (max-width: 1279px) {
.page-heritage-contetns .heritage-item .thumb div {
cursor: pointer;
}
.page-heritage-contetns .heritage-item .thumb img {
cursor: pointer;
}
}
@media screen and (min-width: 1280px) {
.page-heritage-contetns .heritage-item {
overflow: hidden;
}
.page-heritage-contetns .heritage-item[data-item-highlight="true"] {
background-color: #f9f9f9;
}
}
.page-heritage-contetns .heritage-item .title {
display: flex;
justify-content: flex-start;
width: calc(100% - 126px - 150px);
padding-right: 19px;
box-sizing: border-box;
}
.page-heritage-contetns .heritage-item .title .text-inner {
position: relative;
max-width: 100%;
color: #111;
font-size: 22px;
font-weight: 500;
line-height: 30px;
letter-spacing: -0.01em;
padding-right: 30px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.page-heritage-contetns .heritage-item .title a::after {
position: absolute;
top: 3px;
right: 0;
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
content: "";
}
@media screen and (max-width: 1280px) {
.page-heritage-contetns {
width: 100%;
padding-top: 0;
overflow: hidden;
isolation: isolate;
}
.page-heritage-contetns .heritage-item {
height: auto;
padding: 8px 0;
}
.page-heritage-contetns .heritage-item .date {
width: 161px;
font-size: 14px;
}
.page-heritage-contetns .heritage-item .thumb {
width: 104px;
height: 58px;
}
.page-heritage-contetns .heritage-item .title {
width: calc(100% - 104px - 161px);
padding-right: 40px;
}
.page-heritage-contetns .heritage-item .title .text-inner {
font-size: 18px;
line-height: 26px;
padding-right: 29px;
}
}
@media screen and (max-width: 860px) {
.page-heritage-contetns .heritage-item {
align-items: flex-start;
height: auto;
border-bottom: 1px solid #e2e2e2;
padding: 24px 0;
}
.page-heritage-contetns .heritage-item .date {
width: 71px;
font-size: 12px;
margin-top: 5px;
}
.page-heritage-contetns .heritage-item .thumb {
width: 61px;
height: 40px;
margin-top: 5px;
}
.page-heritage-contetns .heritage-item .title {
width: calc(100% - 61px - 71px);
padding-right: 10px;
}
.page-heritage-contetns .heritage-item .title .text-inner {
font-size: 14px;
line-height: 22px;
padding-right: 0;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.page-heritage-contetns .heritage-item .title a::after {
display: inline-block;
position: static;
width: 16px;
height: 16px;
background-size: contain;
margin-left: 2px;
vertical-align: -3px;
}
}
.page-heritage-tabs {
/* sticky 동작은 JS(updateStickyPosition)가 처리 */
padding-top: 0;
}
.page-heritage-tabs ul {
list-style: none;
margin: 0;
padding: 0;
}
.page-heritage-tabs li {
display: flex;
justify-content: flex-start;
}
.page-heritage-tabs li:not(:first-child) {
margin-top: 24px;
}
.page-heritage-tabs .tab {
display: block;
position: relative;
overflow: hidden;
color: #999;
font-size: 26px;
font-weight: 300;
line-height: 1;
letter-spacing: 0.06em;
transition: font-size 0.2s;
}
.page-heritage-tabs .tab[aria-selected="true"] {
color: #111;
font-size: 64px;
font-weight: 400;
letter-spacing: -0.01em;
height: auto;
overflow: visible;
}
.page-heritage-tabs .btn-toggle-selector {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 60px 0 0;
box-sizing: border-box;
z-index: 1;
/* Divi 기본 button 스타일 reset */
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.page-heritage-tabs .btn-toggle-selector::after {
position: absolute;
top: 50%;
right: 0;
width: 48px;
height: 48px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
margin-top: -24px;
content: "";
transition: transform 0.2s;
}
.page-heritage-tabs .page-heritage-selector {
display: none;
position: absolute;
top: 100%;
right: 12px;
width: 200px;
border: 1px solid #999;
border-radius: 4px;
background-color: #fff;
margin-top: 20px;
box-sizing: border-box;
z-index: 11;
padding: 30px 0;
}
.page-heritage-tabs .page-heritage-selector li:not(:first-child) {
margin-top: 24px;
}
.page-heritage-tabs .page-heritage-selector li .tab {
display: block;
width: 100%;
height: 24px;
color: #999;
font-size: 24px;
font-weight: 275;
line-height: 1;
text-align: center;
/* Divi 기본 button 스타일 reset */
background: none;
background-color: transparent;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
font-family: inherit;
box-sizing: border-box;
}
.page-heritage-tabs[data-selector-visible="true"] .page-heritage-selector {
display: block;
}
.page-heritage-tabs[data-selector-visible="true"] .page-heritage-selector li .tab[aria-selected="true"] {
color: #333;
font-weight: 600;
}
.page-heritage-tabs[data-selector-visible="true"] .btn-toggle-selector::after {
transform: rotateX(180deg);
}
@media screen and (max-width: 1280px) {
.page-heritage-tabs {
position: relative;
top: auto;
width: fit-content;
padding-top: 0;
padding-right: 60px;
}
.page-heritage-tabs li:not(:first-child) {
margin: 0;
}
.page-heritage-tabs .tab {
display: none;
}
.page-heritage-tabs .tab[aria-selected="true"] {
display: block;
font-size: 56px;
font-weight: 500;
letter-spacing: -0.01em;
height: auto;
overflow: visible;
}
.page-heritage-tabs .btn-toggle-selector {
display: block;
}
.page-heritage-tabs .page-heritage-selector {
right: 12px;
width: 200px;
padding: 30px 0;
margin-top: 20px;
}
}
@media screen and (max-width: 860px) {
.page-heritage-tabs {
padding-right: 42px;
}
.page-heritage-tabs .tab[aria-selected="true"] {
font-size: 48px;
}
.page-heritage-tabs .btn-toggle-selector {
padding-right: 42px;
}
.page-heritage-tabs .btn-toggle-selector::after {
width: 30px;
height: 30px;
background-image: url('data:image/svg+xml,');
margin-top: -15px;
}
.page-heritage-tabs .page-heritage-selector {
right: 0;
width: 176px;
padding: 24px 0;
margin-top: 16px;
}
.page-heritage-tabs .page-heritage-selector .tab {
height: 22px;
font-size: 22px;
}
}
@media screen and (min-width: 861px) {
.page-heritage-tabs:not([data-selector-visible="true"]) .page-heritage-selector {
display: none !important;
}
}
.image-heritage-preview {
display: none;
position: relative;
width: 100%;
margin-top: 24px;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.image-heritage-preview.is-visible {
display: block;
}
.image-heritage-preview img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
@media screen and (max-width: 1280px) {
.image-heritage-preview,
.image-heritage-preview.is-visible {
display: none;
}
}
.heritage-img-layer {
display: none;
flex-direction: column;
align-items: flex-end;
position: relative;
width: 100%;
margin-top: 8px;
margin-bottom: 16px;
}
.heritage-img-layer figure {
width: 100%;
}
.heritage-img-layer figure img {
width: 100%;
height: 100%;
object-fit: contain;
}
.heritage-img-layer .btn-close {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
background-image: url('data:image/svg+xml,') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
cursor: pointer;
}
.heritage-img-layer a[download] {
display: flex;
align-items: center;
gap: 12px;
color: #666;
font-size: 16px;
font-weight: 600;
line-height: 1;
margin-top: 20px;
}
.heritage-img-layer a[download]::before {
flex-shrink: 0;
width: 20px;
height: 15px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
content: "";
}
@media screen and (min-width: 1280px) {
.heritage-img-layer {
display: none !important;
}
}
.heritage-img-layer[data-image-layer-visible="true"] {
display: flex;
}
/* heritage 페이지 전용: 헤더 그림자 제거 */
#main-header,
#main-header.headerFixed,
#main-header.onHover,
#main-header.et-fixed-header {
box-shadow: none !important;
}
/* heritage 페이지 전용: onHover 시 반투명/블러 제거 */
#main-header.onHover {
background-color: rgb(255, 255, 255) !important;
backdrop-filter: none !important;
}