.blog footer {
    display: none;
}

.blog {
    overflow: hidden;
}

.blog .page-wrapper {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}

.blog .page-wrapper .page-title {
    position: fixed;
    display: block;
    width: fit-content;
    height: fit-content;
    /*top: 7.5vw;*/
    top: 123px;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 3;
}

.blog .page-wrapper .page-inner {
    position: relative;
    display: block;
    width: 100vw;
    height: 100vh;
    position: relative;
    /*overflow: hidden;*/
    padding: 0 calc( (100% - var(--postArchiveContainer)) / 2); 
}

.blog .page-wrapper .page-inner .inner {
    /*width: max-content;*/
    height: 100vh;
    display: flex;
    width: calc( (var(--postArchiveContainer) * var(--counter)) + ( ( (100vw - var(--postArchiveContainer)) / 2)  * 2) );
    align-items: center;
    padding-top: 6.48vw;
}

.blog .page-wrapper .inner .post {
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    /*padding-top: 12vw;*/
    padding: 0;
    justify-content: flex-start;
    transform: translateZ(0);
    width: var(--postArchiveContainer);
    /*height: 100vh;*/
    height: fit-content;
    flex-shrink: 0;
    pointer-events: none !important;
}

.blog .page-wrapper .inner .post.current {
    pointer-events: all !important;
}

.blog .page-wrapper .inner .post a {
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    justify-content: flex-start;
    transform: translateZ(0);
    width: fit-content;
    height: fit-content;
}

.blog .page-wrapper .page-inner .post .thumbnail {
    position: relative;
    display: block;
    width: 14.58vw; /*252px*/
    height: 17.12vw; /*296px*/
    margin-bottom: 3.32vw; /*66px*/
    transition: transform 1s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

.blog .page-wrapper .page-inner .post .thumbnail picture {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(var(--rot, 0deg));
}

.blog .page-wrapper .page-inner .post .thumbnail img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: .57vw solid var(--beige);
    transition: all .6s ease;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
}

.blog .page-wrapper .page-inner .post a:hover .thumbnail img {
    border: .57vw solid var(--brown-deep);
}

.blog .page-wrapper .page-inner .post .title {
    position: relative;
    padding-bottom: 1.67vw; /*29px*/
    width: 35.34vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s cubic-bezier(.22,.61,.36,1);
}

.blog .page-wrapper .page-inner .post.current .title {
    opacity: 1;
    pointer-events: all;
}

.blog .page-wrapper .page-inner .post .excerpt {
    position: relative;
    display: block;
    width: 20.89vw; /*361px*/
    height: fit-content;
    padding-bottom: 2.43vw; /*42px*/
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s cubic-bezier(.22,.61,.36,1);
}

.blog .page-wrapper .page-inner .post.current .excerpt {
    opacity: 1;
    pointer-events: all;
}

.blog .page-wrapper .page-inner .post .link {
	text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .35vw; /*7px*/
    text-decoration-color: rgba(50, 28, 22, .4);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s cubic-bezier(.22,.61,.36,1);
}

.blog .page-wrapper .page-inner .post.current .link {
    opacity: 1;
    pointer-events: all;
}

.blog .page-wrapper .timeline {
    position: fixed;
    display: flex;
    height: fit-content;
    z-index: 2;
    top: calc(100vh - 3.28vw); /*74px*/
    justify-content: space-between;
    align-items: center;
    padding: 0px 0 2.02vw; /*0px 0 35px*/
    height: 4.28vw; /*74px*/
    width: 100%;
    background-color: var(--beige-white);
}

.timeline .trak {
    position: relative;
    display: block;
    width: 1px;
    height: .81vw; /*14px*/
    background-color: #BAB1A8;
	transition: height .1s ease;
	-webkit-transition: height .1s ease;
	-moz-transition: height .1s ease;
	-o-transition: height .1s ease;
}

.timeline .trak.prev,
.timeline .trak.next {
    height: 1.09vw; /*19px*/
    background: #93867C;
}

.timeline .trak.active {
    height: 1.44vw; /*25px*/
    background: #000;
}

.timeline .trak.marker::after {
    content: "";
    position: absolute;
    display: block;
    height: .17vw; /*3px*/
    width: .17vw; /*3px*/
    border-radius: 100%;
    overflow: hidden;
    background-color: #BAB1A8;
    left: 50%;
    transform: translate(-50%,0);
    bottom: .92vw; /*-16px*/
}

.timeline .trak.marker.active::after {
    background: #000;
}

/* SM */
.blog .page-wrapper-sm {
    display: none;
}



@media screen and (max-height: 1728px) {
    .blog .page-wrapper .page-inner .inner {
        padding-top: 112px;
    }

    .blog .page-wrapper .page-inner .post .link {
        text-underline-offset: 7px;
    }
}


@media screen and (max-height: 970px) {
    .blog .page-wrapper .page-inner .post .thumbnail {
        margin-bottom: 2.5vw;
    }

    .blog .page-wrapper .page-inner .post .excerpt {
        padding-bottom: 1.9vw;
    }
}


@media only screen and (max-width: 740px) {
    .blog .page-wrapper-lg {
        display: none;
    }

    .blog .page-wrapper-sm {
        display: block;
    }

    .blog .page-wrapper {
        height: 100vh;
        padding-top: 64px;
    }

    .blog .page-wrapper .page-title {
        position: relative;
        display: block;
        width: 100%;
        height: fit-content;
        text-align: center;
        top: auto;
        left: auto;
        text-align: center;
        transform: translate(0,0);
        z-index: 3;
    }

    .blog .page-wrapper .post-archive-swiper {
        position: relative;
        display: flex;
        width: 100%;
        height: calc(100vh - 64px);
        padding: 0 calc( (100% - 73.84vw) / 2 );
        align-items: center;

        flex-flow: column;
        justify-content: center;
        row-gap: 40px;
    } 

    .blog .page-wrapper .post-archive-swiper .swiper-wrapper {
        align-items: flex-start !important;
        height: fit-content;
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        width: 73.84vw !important; /*288px*/
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide:last-child {
        margin-right: calc( (100% - 73.84vw) / 2 ); /*calc( (100% - 288px) / 2 )*/
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide .swiper-slide-inner {
        position: relative;
        display: flex;
        flex-flow: column;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide .swiper-slide-inner .thumbnail {
        position: relative;
        display: block;
        width: 58.97vw; /*230px*/
        height: 69.2vw; /*270px*/
        margin-bottom: 8.97vw; /*270px*/
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide .swiper-slide-inner .thumbnail picture {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        transform: rotate(var(--rot, 0deg));
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide .swiper-slide-inner .thumbnail picture img {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border: 2.05vw solid var(--beige); /*8px*/
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide .swiper-slide-inner .title {
        transition: opacity .4s cubic-bezier(.22,.61,.36,1);
        padding-bottom: 8.2vw; /*32px*/
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide .swiper-slide-inner .excerpt {
        transition: opacity .4s cubic-bezier(.22,.61,.36,1);
        display: none;
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide .swiper-slide-inner .link {
        transition: opacity .4s cubic-bezier(.22,.61,.36,1);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 1.538vw; /*6px*/
        text-decoration-color: rgba(50, 28, 22, .4)
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide:not(.swiper-slide-active) .swiper-slide-inner .title {
        opacity: 0;
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide:not(.swiper-slide-active) .swiper-slide-inner .link {
        opacity: 0;
    }

    .swiper-notification {
        position: absolute;
    }
    
    .carousel-pagination {
        position: absolute !important;
        top: auto !important;
        bottom: 30px !important;
        gap: 0 !important;
        margin-top: 0px;
        padding-bottom: 4.87vw; /*19px*/
    }

    .carousel-pagination .before-pagination,
    .carousel-pagination .after-pagination {
        position: absolute;
        display: flex;
        height: 100%;
        top: 0px;
        z-index: 20;
        justify-content: space-between;
        align-items: flex-end;
    }

    .carousel-pagination .before-pagination {
        width: 30vw;
        left: 0;
        transform: translate(-100%,0);
    }

    .carousel-pagination .after-pagination {
        width: calc(30vw - 1px);
        right: 0;
        transform: translate(100%,0);
    }

    .carousel-pagination .swiper-pagination-bullet {
        display: inline-flex;
        width: 40vw !important;
        border-radius: 0 !important;
        transform: scale(1) !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: space-between;
        align-items: flex-end;
        height: 6.15vw !important; /*24px*/
        background-color: transparent !important;
        opacity: 1 !important;
        transition: .6s transform, .6s left !important;
    }

    .carousel-pagination .swiper-pagination-bullet .trak {
        position: relative;
        display: block;
        width: 1px;
        height: 3.58vw; /*14px*/
        background-color: #BAB1A8;
        transition: all .6s ease;
        -webkit-transition: all .6s ease;
        -moz-transition: all .6s ease;
        -o-transition: all .6s ease;
    }

    .carousel-pagination .swiper-pagination-bullet .trak:last-child {
        opacity: 0;
    }

    .carousel-pagination .swiper-pagination-bullet .after-pagination .trak:first-child {
        opacity: 0;
    }

    .carousel-pagination .swiper-pagination-bullet .after-pagination .trak:last-child {
        opacity: 1;
    }

    .carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .trak.current {
        height: 6.15vw; /*24px*/
        background: #000;
    }
    
    .carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .trak.prev,
    .carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .trak.next {
        height: 4.87vw; /*19px*/
        background: #93867C;
    }

    .carousel-pagination .swiper-pagination-bullet .trak .circle {
        position: absolute;
        display: block;
        width: 3px;
        height: 3px;
        background-color: #BAB1A8;
        bottom: -4.1vw;  /*-16px*/
        left: 50%;
        transform: translate(-50%,0);
        border-radius: 100%;
        transition: all .6s ease;
        -webkit-transition: all .6s ease;
        -moz-transition: all .6s ease;
        -o-transition: all .6s ease;
    }

    .carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .trak .circle {
        background: #000;
    }
}


@media only screen and (max-width: 550px) {
    
    .blog .page-wrapper .page-title {
       
    }

    .blog .page-wrapper .post-archive-swiper {
        padding: 0 calc( (100% - 288px) / 2 );
    }

    /*
    .blog .page-wrapper .post-archive-swiper .swiper-slide {
        width: 288px !important;
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide:last-child {
        margin-right: calc( (100% - 288px) / 2 );
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide .swiper-slide-inner .thumbnail {
        width: 230px;
        height: 270px;
        margin-bottom: 35px;
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide .swiper-slide-inner .thumbnail picture img {
        border: 8px solid var(--beige);
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide .swiper-slide-inner .title {
        padding-bottom: 32px;
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide .swiper-slide-inner .excerpt {
        display: none;
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide .swiper-slide-inner .link {
        text-decoration-thickness: 1px;
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide:not(.swiper-slide-active) .swiper-slide-inner .title {
        opacity: 0;
    }

    .blog .page-wrapper .post-archive-swiper .swiper-slide:not(.swiper-slide-active) .swiper-slide-inner .link {
        opacity: 0;
    }

    .carousel-pagination {
        margin-top: 40px;
        padding-bottom: 19px;
    }
    */

    .carousel-pagination .before-pagination {
        width: 30vw;
    }

    .carousel-pagination .after-pagination {
        width: calc(30vw - 1px);
    }

    .carousel-pagination .swiper-pagination-bullet {
        width: 40vw !important;
        height: 24px !important;
    }

    .carousel-pagination .swiper-pagination-bullet .trak {
        width: 1px;
        height: 14px;
    }

    .carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .trak.current {
        height: 24px;
    }
    
    .carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .trak.prev,
    .carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .trak.next {
        height: 19px;
        background: #93867C;
    }

    .carousel-pagination .swiper-pagination-bullet .trak .circle {
        width: 3px;
        height: 3px;
        bottom: -16px;
    }
}