@charset "utf-8";

:root {
    --skl-base: #d8d8d8;
    --skl-sweep: #bdbdbd;
    --skl-speed: 1.6s;
    --skl-band: 800px;
    --skl-sweep-w: 160px;
    --skl-tilt: 100deg;
    --skl-fade: 0.35s;
    --skl-thumb-ratio: 100 / 140;
    --skl-grad: linear-gradient(var(--skl-tilt), var(--skl-base) 0, var(--skl-sweep) calc(var(--skl-sweep-w) / 2), var(--skl-base) var(--skl-sweep-w), var(--skl-base) 100%);
}

.mainpage_area.skl-on { --skl-anim: skl-shimmer; }

.main_statistics_area { --skl-base: rgba(255,255,255,0.08); --skl-sweep: rgba(255,255,255,0.22);
    --skl-grad: linear-gradient(var(--skl-tilt), var(--skl-base) 0, var(--skl-sweep) calc(var(--skl-sweep-w) / 2), var(--skl-base) var(--skl-sweep-w), var(--skl-base) 100%); }

@keyframes skl-shimmer { from { background-position: calc(var(--skl-sweep-w) * -1) 0; } to { background-position: 100vw 0; } }
@keyframes skl-fadein { from { opacity: 0; } to { opacity: 1; } }

.mainpage_area .main_visual .visual_item:not(.skl-done),
.mainpage_area .main_newArrival_area .thumb_wrap:not(.skl-done),
.mainpage_area .main_article_area .article_item .thumb_wrap:not(.skl-done),
.mainpage_area .main_writer_area .writer_profile:not(.skl-done),
.mainpage_area .main_writer_area .writer_contents_wrap .thumb_wrap:not(.skl-done),
.mainpage_area .main_review_area .thumb_wrap .thumb:not(.skl-done),
.mainpage_area .main_column_area .column_box .thumb:not(.skl-done),
.mainpage_area .main_10ago_area .main_10ago_swiper .item .thumb:not(.skl-done) { background-color: var(--skl-base); }

.mainpage_area .skl-offscreen { --skl-play: paused; }

.mainpage_area.skl-on .main_newArrival_area .newArrival_list_wrap.pc .newArrival_list { animation-play-state: paused; }

.skl-thumb { background-color: var(--skl-base); }
.skl-line,
.skl-line-s { background-color: var(--skl-base); background-image: var(--skl-grad); background-size: var(--skl-band) 100%; background-repeat: no-repeat; background-attachment: fixed; animation: var(--skl-anim, none) var(--skl-speed) linear infinite; animation-play-state: var(--skl-play, running); }

.mainpage_area .main_newArrival_area .newArrival_list .item_box .thumb_wrap,
.mainpage_area .main_article_area .article_item .item_box .thumb_wrap { aspect-ratio: var(--skl-thumb-ratio); height: auto; }

.mainpage_area .main_newArrival_area .newArrival_list .item_box .thumb_wrap > img.thumb,
.mainpage_area .main_article_area .article_item .item_box .thumb_wrap > img.thumb { width: 100%; height: 100%; object-fit: cover; }

.mainpage_area img.skl-img-hide { opacity: 0; }
.mainpage_area img.skl-img-in { animation: skl-fadein var(--skl-fade) ease-in-out both; }

.mainpage_area .swiper-slide:nth-child(2) img.skl-img-in,
.mainpage_area li:nth-child(2) img.skl-img-in { animation-delay: 30ms; }
.mainpage_area .swiper-slide:nth-child(3) img.skl-img-in,
.mainpage_area li:nth-child(3) img.skl-img-in { animation-delay: 60ms; }
.mainpage_area .swiper-slide:nth-child(4) img.skl-img-in,
.mainpage_area li:nth-child(4) img.skl-img-in { animation-delay: 90ms; }
.mainpage_area .swiper-slide:nth-child(5) img.skl-img-in,
.mainpage_area li:nth-child(5) img.skl-img-in { animation-delay: 120ms; }
.mainpage_area .swiper-slide:nth-child(n+6) img.skl-img-in,
.mainpage_area li:nth-child(n+6) img.skl-img-in { animation-delay: 150ms; }

:is(.skl-text, html.skl-pre .mainpage_area) :is(.item_title, .item_date, .item_content, .icon_new, .item_info > span,
              .title > span, .desc, .tit > span, .detail_info > *, .more_info span, .text_wrap > .writer, .text_wrap > .publisher,
              .search_word_item),
:is(.skl-text, html.skl-pre .mainpage_area) :is(.item_title, .item_date, .item_content, .icon_new, .item_info > span,
              .title > span, .desc, .tit > span, .detail_info > *, .more_info span, .text_wrap > .writer, .text_wrap > .publisher,
              .search_word_item) * { color: transparent !important; }

:is(.skl-text, html.skl-pre .mainpage_area) :is(.item_title, .item_date, .item_content, .icon_new, .item_info > span,
              .title > span, .desc, .tit > span, .detail_info > *, .more_info span, .text_wrap > .writer, .text_wrap > .publisher) { position: relative; }

:is(.skl-text, html.skl-pre .mainpage_area) :is(.item_title, .item_date, .item_content, .icon_new, .item_info > span,
              .title > span, .desc, .tit > span, .detail_info > *, .more_info span, .text_wrap > .writer, .text_wrap > .publisher)::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 62%; min-height: 14px; max-height: 22px; border-radius: 4px; background-color: var(--skl-base); background-image: var(--skl-grad); background-size: var(--skl-band) 100%; background-repeat: no-repeat; background-attachment: fixed; animation: var(--skl-anim, none) var(--skl-speed) linear infinite; animation-play-state: var(--skl-play, running); }

:is(.skl-text, html.skl-pre .mainpage_area) .desc { overflow: hidden; }
:is(.skl-text, html.skl-pre .mainpage_area) .desc::before { top: 4px; transform: none; }
:is(.skl-text, html.skl-pre .mainpage_area) .desc::after { content: ''; position: absolute; left: 0; top: 32px; width: 68%; height: 18px; border-radius: 4px; background-color: var(--skl-base); background-image: var(--skl-grad); background-size: var(--skl-band) 100%; background-repeat: no-repeat; background-attachment: fixed; animation: var(--skl-anim, none) var(--skl-speed) linear infinite; animation-play-state: var(--skl-play, running); }

.mainpage_area .visual_search_wrap :is(.skl-text, html.skl-pre .mainpage_area) .search_word_item { min-width: 70px; }

.skl-text .item_info .writer:after,
.skl-text .text_wrap .detail_info .writer:after,
.skl-text .item_state .icon_state { opacity: 0; }

.skl-text-in { animation: skl-fadein var(--skl-fade) ease-in-out both; }

.mainpage_area .swiper.skl-swiper-pending .swiper-button-prev,
.mainpage_area .swiper.skl-swiper-pending .swiper-button-next,
.mainpage_area .swiper.skl-swiper-pending .swiper-pagination { opacity: 0; }
.mainpage_area .swiper .swiper-button-prev,
.mainpage_area .swiper .swiper-button-next,
.mainpage_area .swiper .swiper-pagination { transition: opacity var(--skl-fade) ease-in-out; }

.skl { display: block; border-radius: 4px; }
.skl-card .item_box { pointer-events: none; }
.skl-thumb { width: 100%; aspect-ratio: var(--skl-thumb-ratio); border-radius: 0; }
.skl-card .item_title { height: 38px; display: flex; align-items: center; }
.skl-card .item_info { height: 27px; display: flex; align-items: center; }
.skl-line { height: 20px; width: 100%; }
.skl-line-s { height: 16px; width: 45%; }

.newArrival_list .skl-error { width: 100%; margin-left: 0; }
.skl-error-box { text-align: center; padding: 50px 20px; }
.skl-error-msg { font-size: 17px; color: #333; margin-bottom: 20px; }
.skl-retry-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 26px; border: 2px solid var(--color1); border-radius: 50px; background: transparent; color: var(--color1); font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.25s ease-in-out; }
.skl-retry-btn:hover { background: var(--color1); color: #fff; }