﻿

/*** HEADER ***/

@media(max-width:767px) {
    .mobile-headline-nav { display: flex; }
    .mobile-headline-nav button { transform: rotate(180deg); display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; }
    .submenu-toggle { width: 20px; }
}

/***TO MOVE*/
.general-form { position: relative; }
.general-form .form-messages { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: #f7f7f7; }
.general-form .form-messages, .general-form .form-messages .loading, .general-form .form-messages .success, .general-form .form-messages .error { display: none; z-index: 9999; font-weight: 500; }
.general-form .form-messages .loading, .general-form .form-messages .success, .general-form .form-messages .error { position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateY(-50%); padding: 0; right: 0; }
.general-form .form-messages, .general-form .form-messages .loading, .general-form .form-messages .success, .general-form .form-messages .error { display: none; z-index: 9999; }
.form-group { display: flex; justify-content: flex-start; align-items: center; gap: 1.667vw; width: 100%; }

@media(max-width:1024px) {
    .form-group { flex-direction: column; gap: 20px; }
    .general-form .form-messages .loading, .general-form .form-messages .success { left: 0; text-align: center; }
}



form label.error { position: absolute; display: inline-block; height: auto; left: 10px; color: red; bottom: 0; font-size: clamp(0.65rem,0.781vw,100rem); }
.newsletter-input-wrapper input { border-radius: 0; }


.title-desktop { font-size: clamp(0.75rem,0.938vw,100rem); font-family: var(--SecFont); line-height: 0.95; letter-spacing: 0.18px; }

/*** HOME PAGE**/
.home-writers { background: var(--grey-2, #F8F8F8); padding: 3.75vw 0; justify-content: center; }
.home-writers-inner { margin: 0 9.896vw; align-items: center; }
.home-writers .series-box-img { width: 6.25vw; height: 6.25vw; padding: 0; }

.home-writers-boxes-wrapper .writers-boxes { gap: 2.083vw; }

.pop-up-gallery .swiper-slide { position: relative; }

@media(max-width:1024px) {
    .home-writers .series-box-img { width: 86px; height: 86px; }
    .general-boxes-wrapper.writers-boxes.gap-24-m { flex-direction: row; flex-wrap: unset; width: max-content; gap: 8px; }
    .home-writers-inner { margin: 0; }
    .home-writers { padding: 40px 0; }



    .home-writers { padding-block: 40px 20px; }
    .home-writers .writers-boxes { padding: 0; width: max-content; flex-wrap: nowrap; padding-inline: 20px; gap: 10px; }
    .home-writers-inner { margin: 0; }
    .home-writers-inner > h2 { width: 100%; padding-inline: 20px; text-align: center; }
    .home-writers-boxes-wrapper { width: 100%; display: flex; overflow: auto; }
    .home-writers-inner a.general-button { width: calc(100% - 40px); }


    .writer-lobby .general-boxes-wrapper.writers-boxes { flex-wrap: wrap; width: 100%; padding-inline: 15px; gap: 24px; }
    .writer-lobby div:is(.general-boxes-wrapper,.tags-series-wrapper) .general-box.writer-box { }
    .writer-lobby#WritersLobby article.writer-box .series-box-img { margin-bottom: 10px; }
    .writer-lobby#WritersLobby article.writer-box .asH3 { font-size: 0.9rem; font-family: var(--SecFont); line-height: 0.95; letter-spacing: 0.18px; }
    .writer-lobby { gap: 58px; }
    .writer-lobby .split-header { }
    .writer-lobby .split-header h1 { margin-bottom: 7px; }
    .writer-lobby .split-header .vertical-line-seperator { width: 100%; height: 1px; margin-bottom: 13px; }
}


.main-video-wrapper { height: calc(var(--app-height)); overflow: hidden; }
.main-video-link { position: absolute; bottom: 28px; color: #fff; text-align: right; line-height: 1.2; right: 20px; left: 20px; font-size: 18px; text-decoration: none; z-index: 1; }
.main-video-wrapper .writer-image { display: none; }
.main-video-link .article-top-info { color: #fff; }
.main-video-link .dot-seperator { background-color: #fff; }
.main-video-link .asH4-m { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.muted-icon { position: absolute; bottom: 120px; z-index: 1; width: 40px; height: 40px; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.35); border-radius: 50%; right: 20px; }
.muted .muted-icon { display: flex; }
.muted-icon svg { width: 30px; height: 30px; }
.main-video-link .article-top-info { font-size: 0.6rem; margin-bottom: 16px; }
.main-video-wrapper .video-js .vjs-big-play-button { display: none; }
.main-video-wrapper .video-js .vjs-tech { position: unset; transform: scale(1.2); }
.main-video-wrapper .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { display: none; }
.main-video-wrapper .back-drop { background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.90) 100%); z-index: 1; position: absolute; bottom: 0; left: 0; right: 0; height: 214px; }
.un-mute-layer { bottom: 110px; }
.main-video-link { left: auto; width: calc(78vw); }
.main-video-scroll-down { position: absolute; bottom: 28px; color: #fff; text-align: right; line-height: 1.2; left: 0; font-size: 18px; width: 64px; height: 24px; z-index: 1; display: flex; justify-content: center; }

.main-video-scroll-down svg { width: 14px; }

/*.macOs .main-video-link, .macOs .main-video-scroll-down { bottom: 100px; }
.macOs .muted-icon { bottom: 160px }*/
@media(max-width:1024px) {
    .muted-icon svg { width: 20px; height: 20px; }
    a.gallery-short-scroll-down { position: absolute; bottom: 50px; z-index: 2; left: 10px; }
}







.selecter-wrapper { width: 100%; }

@media(max-width:1024px) {
    #SeriesLobby { width: 100%; }
    #SeriesLobby .line-seperator { display: none; }
    #SeriesView .posts-wrapper article.box { width: 100%; display: block; }
    #SeriesView { width: 100%; }
    #SeriesView .line-seperator { display: none; }
}



@media(max-width:1024px) {
    .series-boxes { padding: 0 12px; }
    .series-boxes .series-box a { width: 100%; }
    .series-boxes .series-box { width: calc(50% - 12px); }
    .series-box-img { width: 100%; height: auto; }
    #SeriesView .line-seperator.mobile { display: block; }
}



#WriterView .writer-img { width: 9.375vw; }
#WriterView .writer-img img { max-width: none; width: 100%; border-radius: 50%; }
#WriterView .tags-hashtags ul { justify-content: flex-start; }
.WriterView-top .flex-column { max-width: 360px; }

@media(max-width:1024px) {
    #WriterView { width: 100vw; }
    #WriterView .writer-img { width: 140px; }
    .WriterView-top { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .writers-boxes { padding: 0 12px; }
    .writers-boxes .writer-box a { width: 100%; }
    .writers-boxes .writer-box { width: calc(50% - 12px); }
    .writer-box-img { width: 100%; height: auto; }
    .contents-wrapper { display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; overflow: auto; }
    .contents-wrapper .posts-wrapper { flex-direction: row; flex-wrap: unset; width: max-content; padding-inline: 20px; gap: 8px; }
    .contents-wrapper .posts-wrapper .box-short { width: 43.467vw; }
    .contents-wrapper .posts-wrapper .box-short .image { height: 77.333vw; min-height: 0; }

    .contents-wrapper .posts-wrapper .box:is(.box-article,.box-video) { width: 73.9vw; }
    .contents-wrapper .posts-wrapper .box:is(.box-article,.box-video) .box-inner .image { height: 46vw; }


    .contents-wrapper .posts-wrapper article.box-shorts .info-wrapper { width: 90%; }
    .contents-wrapper .posts-wrapper article.box-short .info-wrapper .article-top-info { flex-direction: column; gap: 2px; text-align: right; align-items: flex-start; }
    .contents-wrapper .posts-wrapper article.box-short .info-wrapper .article-top-info > span.dot-seperator { display: none; }
    .contents-wrapper .posts-wrapper article.box-shorts .info-wrapper tags-bottom { width: 125%; }

    .contents-wrapper article.box-short .box-inner .image a.share-link { z-index: 10; position: absolute; bottom: 4px; right: 4px; left: unset; background-color: transparent; border: 0; height: auto; width: auto; }
    .contents-wrapper article.box-short .box-inner .image a.share-link svg path { fill: #fff; stroke: #fff; }
    .contents-wrapper article.box-short .info-wrapper .content-info-wrapper { width: 100%; }
}

.video-js .vjs-play-progress { background-color: #ffae00; }
.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { opacity: 1; }
.main-video-wrapper { position: relative; display: inline-block; height: 100vh; }
.macOs .main-video-wrapper { height: calc(100vh - 70px); width: 100vw; }
a.main-video-link { position: absolute; bottom: 40px; color: #fff; text-align: right; line-height: 1.2; right: 20px; left: 20px; font-size: 18px; text-decoration: none; }
a.main-video-link span { font-size: 14px; display: block; }
.main-video-wrapper h1 { position: absolute; color: #fff; z-index: 1; font-family: arial; right: 20px; }
.un-mute-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 100px; z-index: 1; }
.video-js .vjs-volume-panel,
.video-js .vjs-picture-in-picture-control,
.video-js .vjs-fullscreen-control,
.video-js .vjs-time-control,
.video-js .vjs-play-control { display: none; }

/*HOMEPAGE*/
@media(max-width:1024px) {
    .muted-icon { position: absolute; }
    .home-page .breadcrumb { display: none; }
    .home-page #SiteGrid { margin: 0px; }
    .un-mute-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 100px; z-index: 1; }
    .swiper-wrapper .un-mute-layer { bottom: 0; }
}

.swiper-button-next{ position: absolute; z-index: 2; bottom: 65px; padding: 15px; left: 10px; }

.tags-hashtags ul { gap: clamp(5px,0.625vw,100px); list-style: none; padding: 0; margin: 0; }
li.slick-slide:has(a.tag-hashtag-item) { margin-inline: 6px; }
a.tag-hashtag-item { padding-inline: 1.25vw; height: 2.344vw; min-height: 35px; border-radius: 4px; border: 1px solid var(--grey); background: #fff; transition: all 0.35s ease; display: flex; align-items: center; justify-content: center; font-family: var(--SecFont); line-height: 0.95; letter-spacing: 0.18px; white-space: nowrap; }
a.tag-hashtag-item.disabled { opacity: 0.4; pointer-events: none; }
a.tag-hashtag-item.active, a.tag-hashtag-item:hover { background-color: #000; color: #fff; text-decoration: none; }

.tags-hashtags:has(.slick-slider) { width: 100%; }
.tags-hashtags ul.slick-initialized.slick-slider { width: 100%; }
.tags-hashtags .slick-track { display: flex; justify-content: flex-start; left: auto; right: 0; }
.tags-hashtags .slick-list.draggable { display: flex; justify-content: flex-start; }

.search-page article.general-box.tag-box { width: 100%; display: flex; justify-content: space-between; }
@media(max-width:1024px) {
    .tags-hashtags:not(.search) { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; border-radius: 4px; border: 1px solid var(--grey, #E8E8E8); background: var(--white, #FFF); max-height: 52px; overflow: hidden; padding-block: 5px; }
    .tags-hashtags.open:not(.search) { max-height: 100vh; }
    .tags-hashtags:not(.search) ul { flex-direction: column; width: 100%; gap: 0; }
    .tags-hashtags:not(.search) ul li:has(.active) { display: none; }
    .tags-hashtags:not(.search) ul a.tag-hashtag-item { border: 0; background: transparent; color: #000; font-size: 0.85rem; font-family: var(--FirstFont); letter-spacing: 0.17px; line-height: 0.65; min-height: 0; padding-block: 15px; height: auto; }
    .tags-hashtags:not(.search) .selected { display: flex; align-items: center; justify-content: center; width: 100%; }
    .selected-wrapper { width: 100%; padding-block: 12px; position: relative; }
    .selected-wrapper span.arrow { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); transition: all 0.35s ease; }
    .open > .selected-wrapper span.arrow { transform: translateY(-50%) rotate(180deg); }
    .open > .selected-wrapper { padding-bottom: 10px; }


    .tags-hashtags.search ul { gap: 8px; }
    .tags-hashtags.search ul a.tag-hashtag-item { padding-inline: 20px; font-size: 1rem; border: 0; }
    .tags-hashtags.search ul li:not(:last-of-type):after { content: ''; display: inline-block; position: relative; height: 16px; width: 1px; margin-right: 8px; background: var(--grey, #E8E8E8); }
    .tags-hashtags.search ul li { display: flex; align-items: center; justify-content: center; }

    .search-page .tags-hashtags ul { justify-content: flex-start; flex-wrap: nowrap; overflow-y: auto; }

    .search-page .contents-wrapper .posts-wrapper:has(.general-box) { width: 100%; }
}


.HashtagsView .WriterView-top .flex-column { flex-direction: row !important; max-width: max-content; gap: 1.667vw; }
.HashtagsView .WriterView-top .flex-column .body-text-m { max-width: 500px; }
.HashtagsView .WriterView-top .flex-column h1::before { content: '#'; display: block; position: relative; color: var(--drak-grey); }
.HashtagsView .WriterView-top .flex-column h1 { display: flex; justify-content: flex-start; align-items: flex-start; }

@media(max-width:1024px) {
    .HashtagsView .WriterView-top .flex-column { flex-direction: column !important; gap: 10px; text-align: right; }
}


.big-contents-wrapper.hideMe { opacity: 0; }

@media(min-width:1025px) {
    .big-contents-wrapper .contents-wrapper-inner { gap: 1.2vw; }
    .big-contents-wrapper { width: 100%; }
}

@media(max-width:1024px) {
    .big-contents-wrapper > .contents-wrapper .posts-wrapper { flex-direction: column; gap: 48px; }
    .big-contents-wrapper > .contents-wrapper .posts-wrapper .box { width: 100%; }
}

.search-view-title h1 { color: var(--drak-grey); text-align: right; }
.search-word { color: var(--black); }
.search-selectes { display: flex; flex-direction: column; gap: 1.667vw; }
.select-filters-wrapper { display: flex; justify-content: flex-start; align-items: flex-start; gap: 10px; }
.selected-subjects-wrapper, .selected-years-wrapper { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; border-radius: 4px; border: 1px solid var(--grey, #E8E8E8); background: var(--white, #FFF); height: 2.708vw; min-height:38px; overflow: hidden; padding-block: 0.26vw; width: 12.24vw; /* top: 2.708vw; */ }

.selected-subjects-wrapper.open, .selected-years-wrapper.open { overflow: visible; border-radius: 4px 4px 0 0; border-bottom: 0; height: auto; }

.selected-subjects-wrapper .selected-wrapper,
.selected-years-wrapper .selected-wrapper { width: 100%; padding-block: 0.781vw; position: relative; }

.selected-subjects-wrapper .selected,
.selected-years-wrapper .selected { display: flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }

.selected-subjects-wrapper .selected-wrapper span.arrow,
.selected-years-wrapper .selected-wrapper span.arrow { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); transition: all 0.35s ease; pointer-events: none; }

.selected-subjects-wrapper.open .selected-wrapper span.arrow,
.selected-years-wrapper.open .selected-wrapper span.arrow { transform: translateY(-50%) rotate(-180deg); }

.selected-subjects-wrapper .selected-wrapper span.arrow svg,
.selected-years-wrapper .selected-wrapper span.arrow svg { width: 0.781vw; min-width:12px; }

.selected-subjects-wrapper .tags-hashtags ul li:has(.active),
.selected-years-wrapper .tags-hashtags ul li:has(.active) { display: none; }

.selected-subjects-wrapper ul,
.selected-years-wrapper ul { flex-direction: column; width: 100%; gap: 0; display: flex; padding: 0; margin: 0; list-style: none; border-top: 0; border-radius: 0 0 4px 4px; background: #fff; }

.Filter-Wrapper { max-height: 200px; overflow: hidden; overflow-y: auto; position: absolute; z-index: 2; padding: 0 !important; border: 1px solid var(--grey); width: 100%; width: calc(100% + 2px); background: #fff; top: 100%; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--grey); }
::-webkit-scrollbar-thumb { background: var(--drak-grey); }
::-webkit-scrollbar-thumb:hover { background: var(--drak-grey); }

.search-selectes .selected-subjects-wrapper a.tag-hashtag-item,
.search-selectes .selected-years-wrapper a.tag-hashtag-item { border: 0; background-color: transparent; color: var(--black); font-family: var(--FirstFont); font-size: clamp(0.7rem,0.885vw,100rem); }

@media(max-width:1024px) {
    .search-selectes { gap: 24px; width: 100%; }
    .selected-subjects-wrapper, .selected-years-wrapper { width: 50%; height: 50px; }
    .search-selectes .selected-subjects-wrapper a.tag-hashtag-item,
    .search-selectes .selected-years-wrapper a.tag-hashtag-item { }
    ::-webkit-scrollbar { height: 0; padding: 0; }
}

@media(max-width:1024px) {
    #ArchivePage { gap: 35px; }
    #ArchivePage .articles-top { padding-inline: 20px; }
    #ArchivePage .articles-top h1 { margin-bottom: 8px; }
    #ArchivePage .articles-top .vertical-line-seperator { width: 100%; height: 1px; }
    #ArchivePage .articles-top .body-text-m { margin-top: 14px; }
}

.thanks-page #SiteGridContainer { min-height: calc(100vh - var(--footerHeight) - var(--headerHeight)); }
.thanks-page #SiteSystemContainer { display: none; }
.thanks-page nav.breadcrumbs { display: none; }
main#ThanksPage { justify-content: flex-start; align-items: center; text-align: center; margin-top: 6.771vw }
main#ThanksPage > div { flex-direction: column; align-items: center; /* gap: 0; */ }
.general-centent-text { margin-bottom: 0.5vw; }


@media(max-width:1024px) {
    main#ThanksPage { margin-block: 100px 36px; width: 100%; }
    .general-centent-text { margin-bottom: 5px; }
}
