@charset "UTF-8";
/*-------------------------
 * 
 * 
 * 
 * Basic
 * 
 * 
 * 
-------------------------*/

#journalContentsWrapper {
    color: var(--black);
}

#journalContentsWrapper a:link,
#journalContentsWrapper a:visited {
	color: var(--black);
}

@media (any-hover: hover) {

	#journalContentsWrapper a:hover,
	#journalContentsWrapper a:active {
		color: var(--black);
	}
}

/*-------------------------
 * 
 * 
 * 
 * Layout
 * 
 * 
 * 
-------------------------*/

#journalContentsWrapper > .inner {
    width: 74%;
	margin: 0 10% 0 16%;
	padding: 240px 0 104px;
	display: flex;
	flex-direction: column;
}

@media (max-width: 1024px) {

    #journalContentsWrapper > .inner {
        width: 92%;
        margin: 0 auto;
        padding: 200px 0 0;
    }

}

@media (max-width: 640px) {

    #journalContentsWrapper > .inner {
        padding-top: 160px;
    }

}

/*-------------------------
 * 
 * 
 * 
 * Page Header
 * 
 * 
 * 
-------------------------*/

#journalContentsWrapper .pageHeader {
    width: 100%;
    position: sticky;
    top: 240px;
    z-index: 0;
}

#journalContentsWrapper .pageHeader > .inner {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#journalContentsWrapper .pageHeaderTitle {
    font-size: 144px;
    line-height: 1;
    opacity: 1;
    visibility: visible;
    transition: .5s ease;
}

#journalContentsWrapper .pageHeaderTitle.isPassive {
	opacity: .08;
}

#journalContentsWrapper .pageHeaderTitle.isHidden {
	opacity: 0;
	visibility: hidden;

}

@media (max-width: 1024px) {

    #journalContentsWrapper .pageHeader {
        top: 200px;
    }

    #journalContentsWrapper .pageHeaderTitle {
        font-size: 104px;
    }

}

@media (max-width: 640px) {

    #journalContentsWrapper .pageHeader {
        top: 160px;
    }

    #journalContentsWrapper .pageHeaderTitle {
        font-size: 64px;
    }

}

/*-------------------------
 * 
 * 
 * 
 * Page Body
 * 
 * 
 * 
-------------------------*/

#journalContentsWrapper .pageBody {
    width: 100%;
    position: relative;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translate(0,40px);
    transition: 1s ease;
}

#journalContentsWrapper .pageBody.isActive {
	opacity: 1;
	visibility: visible;
	transform: translate(0,0);
}

#journalContentsWrapper .pageBody > .inner {
    width: 100%;
}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {

}

/*-------------------------
 * 
 * 
 * 
 * Navigation
 * 
 * 
 * 
-------------------------*/

#journalNav {
    position: sticky;
    top: 120px;
    z-index: 1;
    /* margin: -56px 0 104px; */
    margin-top: -56px;
    /* overflow: hidden; */
    opacity: 1;
    visibility: visible;
    transition: .5s ease;
}

#journalNav.isHidden {
    opacity: 0;
    visibility: hidden;
}

#journalNav > .inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 40px;
    position: relative;
    margin: 0 0 104px;
    /* overflow: hidden; */
    /* transform: translate(0, 100%);
    transition: .5s ease; */
}

/* #journalNav.isActive > .inner {
    transform: translate(0,0);
} */

#journalNav .journalNavItems {
    height: 36px;
    overflow: hidden;
}

#journalNav .journalNavItems ul {
    display: flex;
    align-items: center;
    gap: 8px;
}

#journalNav .journalNavItem {
    transform: translate(0, 100%);
    transition: 1s ease;
}

#journalNav.isActive .journalNavItem {
    transform: translate(0, 0);
}

/* #journalNav .journalNavItem {
    transform: translate(0, 100%);
    transition: 1s ease;
} */

#journalNav .journalNavItem a {
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    padding: 0 32px;
    background: var(--white);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* transform: translate(0, 100%);
    transition: 1s ease; */
}

/* #journalNav.isActive .journalNavItem a {
    transform: translate(0, 0);
} */

#journalNav .journalNavItem a .journalNavItemSplit {
    line-height: 1;
    overflow: hidden;
}

#journalNav .journalNavSearchContainer {
    height: 36px;
    overflow: hidden;
}

#journalNav #journalNavSearch {
    display: block;
    width: 36px;
    height: 36px;
    position: relative;
    /* border-radius: 4px; */
    overflow: hidden;
    transform: translate(0, 100%);
    transition: 1s ease;
}

#journalNav.isActive #journalNavSearch {
    transform: translate(0, 0);
}

#journalNav #journalNavSearch button {
    all: unset;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--black);
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: .5s ease;
}

@media (any-hover: hover) {

	#journalNavSearch button:hover {
        background: var(--darkGray02);
    }

}

#journalNavSearch .searchBtn .journalNavSearchIcon {
    display: block;
    width: 15px;
    height: 15px;
    opacity: 1;
    visibility: visible;
    transition: .5s ease .3s;
}

#journalNavSearch .searchBtn.isActive .journalNavSearchIcon {
    opacity: 0;
    visibility: hidden;
}

#journalNavSearch .journalNavSearchIcon svg {
    width: 100%;
}

#journalNavSearch .journalNavSearchIcon svg path {
    fill: var(--white);
}

@media (max-width: 1024px) {

    #journalNav {
        top: 96px;
        margin-top: 32px;
    }

    #journalNav > .inner {
        justify-content: space-between;
        margin-bottom: 64px;
    }

}

@media (max-width: 640px) {

    #journalNav {
        top: 80px;
        margin-top: 24px;
    }

    #journalNav > .inner {
        justify-content: space-between;
        margin-bottom: 40px;
    }

}

/*-------------------------
 * 
 * 
 * 
 * Filter
 * 
 * 
 * 
-------------------------*/

#journalNavFilter {
    position: absolute;
    top: -8px;
    right: -8px;
    /* width: 100%; */
    width: calc(100% + 8px);
    max-width: 480px;
    background: rgba(26,26,26,.96);
    color: var(--white);
    border-radius: 8px;
    padding: 64px 0 40px;
    opacity: 0;
    visibility: hidden;
    transition: .5s ease;
}

#journalNavFilter.isActive {
    opacity: 1;
    visibility: visible;
}

#journalNavFilter > .inner {
    width: 100%;
}

#journalNavFilterClose {
    display: block;
    width: 36px;
    height: 36px;
    position: absolute;
    top: 8px;
    right: 8px;
    overflow: hidden;
}

#journalNavFilterClose .closeBtn {
    all: unset;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    background: var(--darkGray02);
    border-radius: 4px;
    overflow: hidden;
}

#journalNavFilter #journalNavFilterClose .closeBtn > span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease;
}

#journalNavFilter.isActive #journalNavFilterClose .closeBtn > span:nth-of-type(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

#journalNavFilter.isActive #journalNavFilterClose .closeBtn > span:nth-of-type(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#journalNavFilter .journalNavFilterBody {
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#journalNavFilter .journalNavFilterBody::-webkit-scrollbar {
	width: 7px;
}

#journalNavFilter .journalNavFilterBody::-webkit-scrollbar-track {
	background: transparent;
}

#journalNavFilter .journalNavFilterBody::-webkit-scrollbar-thumb {
	background: var(--gray01);
	border-radius: 100px;
}

#journalNavFilter .journalNavFilterBody > .inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#journalNavFilter .journalNavFilterBlock > .inner {
    width: 100%;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#journalNavFilter .searchForm {
    padding: 0;
}

#journalNavFilter .searchForm > .inner {
    width: 100%;
    height: 44px;
    position: relative;
    overflow: hidden;
}

#journalNavFilter .searchForm label {
    display: none;
}

#journalNavFilter .searchForm input[type=text] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    all: unset;
    font-family: inherit;
    font-size: 14px;
    color: var(--white);
    background: var(--darkGray02);
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding: 0 56px 0 24px;
    border-radius: 22px;
    border: none;
}

#journalNavFilter .searchForm input[type=text]:focus,
#journalNavFilter .searchForm input[type=text]:active {
    outline: 0;
    border: none;
}

#journalNavFilter ::placeholder {
	color: var(--lightGray01);
}

#journalNavFilter ::-ms-input-placeholder {
	color: var(--lightGray01);
}

#journalNavFilter .searchForm button[type='submit'] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    all: unset;
    width: 56px;
    height: 44px;
    line-height: 44px;
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}

#journalNavFilter .searchForm button[type='submit'] .iconSearch {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../images/common/icon/icon_search_w.svg) no-repeat center center / cover;
}

#journalNavFilter .journalNavFilterBlockHeading {
    font-size: 12px;
    line-height: 1;
    color: var(--gray02);
}

#journalNavFilter .journalNavFilterBlock ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#journalNavFilter .journalNavFilterBlockCategory a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 32px;
    line-height: 30px;
    background: var(--black);
    border-radius: 4px;
    overflow: hidden;
    color: var(--white);
    font-size: 12px;
    padding: 0 16px;
}

@media (any-hover: hover) {

    #journalNavFilter .journalNavFilterBlockCategory a:hover {
        background: var(--white);
        color: var(--black);
    }

}

#journalNavFilter .journalNavFilterBlockTag a {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    gap: .2em;
    height: 26px;
    line-height: 24px;
    border-radius: 4px;
    border: 1px solid var(--darkGray02);
    overflow: hidden;
    color: var(--white);
    font-size: 12px;
    padding: 0 12px;
}

#journalNavFilter .journalNavFilterBlockTag a::before {
    display: block;
    content: '#';
}

@media (any-hover: hover) {

	#journalNavFilter .journalNavFilterBlockTag a:hover {
        background: var(--white);
        color: var(--black);
    }

}

@media (max-width: 1024px) {

    #journalNavFilter .journalNavFilterBlock > .inner {
        padding: 0 40px;
        gap: 16px;
    }

}

@media (max-width: 640px) {

    #journalNavFilter .journalNavFilterBlock > .inner {
        padding: 0 24px;
        gap: 16px;
    }

}

/*-------------------------
 * 
 * 
 * 
 * Feature
 * 
 * 
 * 
-------------------------*/

#journalContents {
    position: relative;
    z-index: 0;
}

#journalContents > .inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 104px;
}

@media (max-width: 1024px) {

    #journalContents > .inner {
        gap: 64px;
    }

}

@media (max-width: 640px) {

    #journalContents > .inner {
        gap: 48px;
    }

}

/*-------------------------
 * 
 * 
 * 
 * Post
 * 
 * 
 * 
-------------------------*/

.journalPost .journalPostDesc > .inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.journalPost .journalPostDescContainer {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.journalPost .journalPostTitle {
    font-size: 16px;
    line-height: 1.75;
}

.journalPost .journalPostLead {
    font-size: 16px;
    line-height: 1.75;
}

.journalPost .journalPostMeta {
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: .5;
    transition: .5s ease;
}

.journalPost .journalPostDate {
    font-size: 14px;
    flex-shrink: 0;
}

.journalPost .journalPostCats {
    display: flex;
    align-items: center;
    gap: 8px;
}

.journalPost .journalPostCat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	line-height: 24px;
	padding: 1px 12px 0;
	border: 1px solid var(--black);
	border-radius: 4px;
	transition: .5s ease;
}

@media (max-width: 1024px) {

    .journalPost .journalPostLead {
        font-size: 14px;
    }

}

@media (max-width: 640px) {

}

/*-------------------------
 * 
 * 
 * 
 * Archive Heading
 * 
 * 
 * 
-------------------------*/

.journalArchiveSectionHeading {
	font-size: 40px;
	line-height: 1;
}

.journalArchiveSectionHeading a {
    display: flex;
    align-items: center;
    gap: 16px;
}

.journalArchiveSectionHeading a .journalArchiveSectionHeadingArrow {
    display: block;
    width: 10px;
    height: 16px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: .5s ease;
}

.journalArchiveSectionHeading a:hover .journalArchiveSectionHeadingArrow {
    left: 4px;
    opacity: .5;
}

.journalArchiveSectionHeadingArrow svg {
    width: 100%;
}

.journalArchiveSectionHeadingArrow svg path {
    fill: var(--black);
}

@media (max-width: 1024px) {

    .journalArchiveSectionHeading {
        font-size: 36px;
    }

}

@media (max-width: 640px) {

    .journalArchiveSectionHeading {
        font-size: 28px;
    }

    .journalArchiveSectionHeading a {
        gap: 12px;
    }

}

/*-------------------------
 * 
 * 
 * 
 * Feature
 * 
 * 
 * 
-------------------------*/

#feature > .inner {
    width: 100%;
}

#feature > .inner .journalPost {
    min-height: 420px;
}

#feature > .inner .journalPost a {
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--black);
    text-decoration: none;
    display: flex;
    transition: .5s ease;
}

#feature .journalPost .journalPostThumb {
    width: 56%;
    flex-shrink: 0;
    border-radius: 8px;
}

#feature .journalPost .journalPostThumbImg {
    /* height: 100%;
    padding-top: 0; */
    padding-top: 66.66%;
}

#feature .journalPost .journalPostDesc > .inner {
    /* padding: 28px 40px 40px 40px; */
    padding: 28px 0 40px 40px;
    gap: 20px;
}

#feature .journalPost .journalPostTitle {
    font-size: 32px;
}

@media (max-width: 1024px) {

    #feature > .inner .journalPost a {
        flex-direction: column;
    }

    #feature .journalPost .journalPostThumb {
        width: 100%;
    }

    #feature .journalPost .journalPostDesc > .inner {
        padding: 24px 40px 24px 0;
        gap: 20px;
    }

    #feature .journalPost .journalPostTitle {
        font-size: 24px;
    }

}

@media (max-width: 640px) {

    #feature .journalPost .journalPostThumb {
        border-radius: 4px;
    }

    #feature .journalPost .journalPostDesc > .inner {
        padding: 20px 0;
        gap: 12px;
    }

    #feature .journalPost .journalPostTitle {
        font-size: 18px;
    }

}

/*-------------------------
 * 
 * 
 * 
 * Latest
 * 
 * 
 * 
-------------------------*/

#latest > .inner {
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 56px;
	/* padding: 0 0 160px; */
}

#latest .journalArchiveSectionHeader {
	width: 95.24%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

#latest .latestSliderArrows {
	overflow: hidden;
}

#latest .latestSliderArrows > .inner {
	width: 100%;
	background: rgba(26,26,26,.08);
	border-radius: 4px;
	padding: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	/* transform: translate(0, 100%); */
	transition: 1s ease;
}

/* #latest.isActive .latestSliderArrows > .inner {
	transform: translate(0, 0);
} */

#latest .latestSliderArrow {
	width: 40px;
	height: 40px;
	background: var(--white);
	border-radius: 3px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: .3s ease;
}

@media (any-hover: hover) {

    #latest .latestSliderArrow:hover {
        background: var(--black);
    }

}

#latest .latestSliderArrowInner {
	width: 16px;
	height: 16px;
	position: relative;
	overflow: hidden;
}

#latest .latestSliderArrowPrevBefore,
#latest .latestSliderArrowPrevAfter {
	display: block;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 0;
	left: 0;
	animation-fill-mode: forwards;
	animation-duration: 0.6s;
}

#latest .latestSliderArrowPrevAfter {
	transform: translateX(100%);
}

@media (any-hover: hover) {

    #latest .latestSliderArrow:hover .latestSliderArrowPrevBefore {
    animation-name: latestSliderArrowPrevFromRightToLeft;
    animation-delay: 0s;
    }

    #latest .latestSliderArrow:hover .latestSliderArrowPrevAfter {
    animation-name: latestSliderArrowPrevFromLeftToRight;
    animation-delay: 0.2s;
    }

}

@keyframes latestSliderArrowPrevFromLeftToRight {
	0% {
		transform: translate(100%, 0);
	}
	100% {
		transform: translate(0);
	}
}

@keyframes latestSliderArrowPrevFromRightToLeft {
	0% {
		transform: translate(0);
	}
	100% {
		transform: translate(-100%, 0);
	}
}

#latest .latestSliderArrowNextBefore,
#latest .latestSliderArrowNextAfter {
	display: block;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 0;
	left: 0;
	animation-fill-mode: forwards;
	animation-duration: 0.6s;
}

#latest .latestSliderArrowNextAfter {
	transform: translateX(-100%);
}

@media (any-hover: hover) {

    #latest .latestSliderArrow:hover .latestSliderArrowNextBefore {
    animation-name: latestSliderArrowNextFromRightToLeft;
    animation-delay: 0s;
    }

    #latest .latestSliderArrow:hover .latestSliderArrowNextAfter {
    animation-name: latestSliderArrowNextFromLeftToRight;
    animation-delay: 0.2s;
    }

}

@keyframes latestSliderArrowNextFromLeftToRight {
	0% {
		transform: translate(-100%, 0);
	}
	100% {
		transform: translate(0);
	}
}

@keyframes latestSliderArrowNextFromRightToLeft {
	0% {
		transform: translate(0);
	}
	100% {
		transform: translate(100%, 0);
	}
}

#latest .latestSliderArrow svg {
	width: 100%;
}

#latest .latestSliderArrow svg path {
	fill: var(--black);
	transition: .5 ease;
}

@media (any-hover: hover) {

    #latest .latestSliderArrow:hover svg path {
        fill: var(--white);
    }

}

#latest .latestContents {
	width: 2320px;
	overflow: hidden;
	position: relative;
	/* transform: translate(40px, 0); */
	transition: 1s ease;
}

#latest.isActive .latestContents {
	/* opacity: 1;
	visibility: visible; */
	/* transform: translate(0, 0); */
}

#latest .latestSlide a {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	/* border-radius: 16px; */
	overflow: hidden;
	/* background: var(--black); */
	color: var(--black);
	text-decoration: none;
}

#latest .latestSlide .latestSlideThumb {
	width: 100%;
	border-radius: 4px;
}

#latest .latestSlide .latestSlideThumbImg {
	height: 0;
	padding-top: 66.66%;
}

#latest .latestSlide .latestSlideDesc > .inner {
	width: 100%;
	height: 100%;
	position: relative;
	/* padding: 20px 72px 24px 20px; */
	padding: 24px 12% 24px 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#latest .latestSlide .latestSlideTitle {
	/* font-size: 14px; */
	font-size: 16px;
	/* line-height: 1.5; */
	line-height: 1.75;
}

#latest .latestSlide .latestSlideMeta {
	/* font-size: 12px;
	line-height: 1;
	color: var(--gray02);
	display: flex;
	gap: 12px; */
	color: var(--black);
	display: flex;
	align-items: center;
	gap: 12px;
	opacity: .5;
	transition: .5s ease;
}

#latest .latestSlide .latestSlideDate {
	font-size: 14px;
	flex-shrink: 0;
}

#latest .latestSlide .latestSlideCats {
	/* flex-grow: 1; */
	/* overflow: hidden; */
	display: flex;
	/* flex-wrap: wrap; */
	align-items: center;
	gap: 8px;
	/* height: 12px; */
}

#latest .latestSlide .latestSlideCat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	line-height: 24px;
	padding: 1px 12px 0;
	border: 1px solid var(--black);
	border-radius: 4px;
	transition: .5s ease;
}

#latest .latestSlide .latestSlideCat::before {
	display: none;
}

#latest .latestSlide a .latestSlideArrow {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 28px;
	height: 28px;
	background: var(--black);
	border: 1px solid var(--darkGray02);
	border-radius: 4px;
	overflow: hidden;
	display: none;
	transition: .3s ease;
}

@media (any-hover: hover) {

    #latest .latestSlide a:hover .latestSlideArrow {
        background: var(--darkGray02);
        border-color: var(--darkGray02);
    }

}

#latest .latestSlide a .latestSlideArrowInner {
	width: 11px;
	height: 11px;
	position: relative;
	overflow: hidden;
}

#latest .latestSlide a .latestSlideArrowBefore,
#latest .latestSlide a .latestSlideArrowAfter {
	display: block;
	width: 11px;
	height: 11px;
	position: absolute;
	top: 0;
	left: 0;
	animation-fill-mode: forwards;
	animation-duration: 0.6s;
}

#latest .latestSlide a .latestSlideArrowAfter {
	transform: translateX(-100%);
}

@media (any-hover: hover) {

    #latest .latestSlide a:hover .latestSlideArrowBefore {
    animation-name: latestSlideArrowFromRightToLeft;
    animation-delay: 0s;
    }

    #latest .latestSlide a:hover .latestSlideArrowAfter {
    animation-name: latestSlideArrowFromLeftToRight;
    animation-delay: 0.2s;
    }

}

@keyframes latestSlideArrowFromLeftToRight {
	0% {
		transform: translate(-100%, 100%);
	}
	100% {
		transform: translate(0);
	}
}

@keyframes latestSlideArrowFromRightToLeft {
	0% {
		transform: translate(0);
	}
	100% {
		transform: translate(100%, -100%);
	}
}

#latest .latestSlide a .latestSlideArrow svg path {
	fill: var(--white);
}

@media (max-width: 1024px) {

    #latest .journalArchiveSectionHeader {
        width: 100%;
    }

}

@media (max-width: 640px) {

    #latest > .inner {
        gap: 32px;
    }

    /* #latest .latestSliderArrow {
        width: 36px;
        height: 36px;
    }

    #latest .latestSliderArrowInner {
        width: 14px;
        height: 14px;
    }

    #latest .latestSliderArrowPrevBefore,
    #latest .latestSliderArrowPrevAfter {
        width: 14px;
        height: 14px;
    }

    #latest .latestSliderArrowNextBefore,
    #latest .latestSliderArrowNextAfter {
        width: 14px;
        height: 14px;
    } */

    #latest .latestContents {
        width: 1760px;
    }

    #latest .latestSlide .latestSlideDesc > .inner {
        padding: 20px 12% 20px 0;
        gap: 12px;
    }

    #latest .latestSlide .latestSlideTitle {
        font-size: 14px;
    }

}

/*-------------------------
 * 
 * 
 * 
 * General
 * 
 * 
 * 
-------------------------*/

#general > .inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 7.5%;
}

#generalHeader {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
}

#generalHeader .generalType {
    font-size: 14px;
    line-height: 1;
}

#generalHeader .generalTitle {
    font-size: 40px;
    line-height: 1.5;
}

@media (max-width: 1024px) {

    #general > .inner {
        flex-direction: column-reverse;
        gap: 64px;
    }

}

@media (max-width: 640px) {

}

/*-------------------------
 * 
 * 
 * Sidebar
 * 
 * 
-------------------------*/

#sidebar {
    width: 30%;
    max-width: 340px;
    flex-shrink: 0;
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (max-width: 1024px) {

    #sidebar {
        width: 100%;
        max-width: initial;
    }

}

@media (max-width: 640px) {

}

/*-------------------------
 * 
 * Cateogry List
 * 
-------------------------*/

#sidebar .categoryItems {
    background: #d5d5d5;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    /*gap: 16px;*/
	gap: 4px;
}

#sidebar .categoryItems ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#sidebar .categoryItem {
    width: 100%;
}

#sidebar .categoryItem a {
    display: block;
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    border-radius: 4px;
    color: var(--black);
    position: relative;
    overflow: hidden;
}

#sidebar .categoryItem a::before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    transition: .3s ease;
    transform: translate(-100%, 0);
}

@media (any-hover: hover) {

	#sidebar .categoryItem a:hover {
        /* background: var(--white); */
        color: var(--black);
        padding: 0 16px;
    }

    #sidebar .categoryItem a:hover::before {
        background: var(--white);
        transform: translate(0, 0);
    }

}

#sidebar .categoryItem.current-menu-item a {
    /* background: var(--black); */
    color: var(--white);
    padding: 0 16px;
}

#sidebar .categoryItem.current-menu-item a::before {
    background: var(--black);
    transform: translate(0, 0);
}

@media (any-hover: hover) {

    #sidebar .categoryItem.current-menu-item a:hover {
        /* background: var(--black); */
        color: var(--white);
        padding: 0 16px;
    }

}

#sidebar .categoryItem a::after {
    display: block;
    content: '';
    width: 6px;
    height: 10px;
    background: url(../images/common/arrow/arrow_03_k.svg) no-repeat center center / cover;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translate(0, -50%);
    opacity: 0;
    visibility: hidden;
    transition: .5s ease;
}

@media (any-hover: hover) {

    #sidebar .categoryItem a:hover::after {
        opacity: 1;
        visibility: visible;
        right: 12px;
    }

}

#sidebar .categoryItem.current-menu-item a::after {
    background-image: url(../images/common/arrow/arrow_03_w.svg);
    opacity: 1;
    visibility: visible;
    right: 12px;
}

@media (any-hover: hover) {
    
    #sidebar .categoryItem.current-menu-item a:hover::after {
        background-image: url(../images/common/arrow/arrow_03_w.svg);
        opacity: 1;
        visibility: visible;
        right: 12px;
    }

}

#sidebar .categoryItem a > span {
    position: relative;
}

@media (max-width: 1024px) {

    #sidebar .categoryItems {
        display: none;
    }

}

@media (max-width: 640px) {

}

/*-------------------------
 * 
 * CTA
 * 
-------------------------*/

#sidebar .cta {
    background: var(--black);
    border-radius: 8px;
    overflow: hidden;
    color: var(--white);
}

#sidebar .cta > .inner {
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

#sidebar .ctaHeader > .inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

#sidebar .ctaHeaderTitle {
    font-size: 40px;
    line-height: 1;
}

#sidebar .ctaHeaderBy {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 12px;
    padding: 0 4px 0 0;
}

#sidebar .ctaHeaderBy .logo {
    display: block;
    width: 96px;
    height: 12px;
}

#sidebar .ctaHeaderBy .logo svg {
    width: 100%;
}

#sidebar .ctaHeaderBy .logo svg path {
    fill: var(--white);
}

#sidebar .ctaBody {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

#sidebar .ctaDesc p {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

#sidebar .ctaDesc p > span > span {
    margin: 0 .25em;
}

#sidebar .ctaBtn a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    line-height: 44px;
    padding: 0 32px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--white);
    color: var(--black);
}

#sidebar .ctaBtn a .ctaBtnTextLine {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.25;
}


.ctaBtn a .ctaBtnText > span:nth-of-type(2) > span {
    position: relative;
    top: auto;
    left: auto;
    transform: translate(0, 0);
}

#sidebar .ctaBtn a .icon {
    width: 18px;
    height: 16px;
}

#sidebar .ctaBtn a .icon svg {
    width: 100%;
}

#sidebar .ctaBtn a .icon svg path {
    fill: var(--black);
}


@media (max-width: 1024px) {

    #sidebar .ctaDesc p {
        align-items: center;
    }

}

@media (max-width: 640px) {

}

/*-------------------------
 * 
 * 
 * Contents
 * 
 * 
-------------------------*/

#generalContents {
    width: 62.5%;
}

#generalContents > .inner {
    width: 100%;
}

#generalContents .generalPosts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#generalContents .journalPost {
    width: 100%;
}

#generalContents .journalPost a {
    width: 100%;
    display: flex;
    align-items: flex-start;
}

#generalContents .journalPostThumb {
    width: 40%;
    max-width: 280px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

#generalContents .journalPostThumb > .img {
    padding-top: 66.66%;
}

#generalContents .journalPostDesc {
    flex-grow: 1;
}

#generalContents .journalPostDesc > .inner {
    width: 100%;
    /* height: 100%; */
    position: relative;
    /* padding: 20px 40px 24px 20px; */
    padding: 20px 0 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/*#generalPostsContainer .btnMore {
    display: flex;
    justify-content: center;
    margin-top: 64px;
}

#generalPostsContainer .btnMore a {
    font-size: 16px;
    height: 44px;
    line-height: 44px;
    padding: 0 32px;
    background: var(--black);
    color: var(--white);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

#generalPostsContainer .btnMore a .btnMoreSplit {
    line-height: 1;
    overflow: hidden;
}*/

#journalContentsWrapper .btnMore {
    display: flex;
    justify-content: center;
    margin-top: 64px;
}

.notFound #journalContentsWrapper .btnMore {
    margin-top: 32px;
	margin-bottom: 24px;
}

#journalContentsWrapper .btnMore a {
    font-size: 16px;
    height: 44px;
    line-height: 44px;
    padding: 0 32px;
    background: var(--black);
    color: var(--white);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

#journalContentsWrapper .btnMore a .btnMoreSplit {
    line-height: 1;
    overflow: hidden;
}

@media (max-width: 1024px) {

    #generalContents {
        width: 100%;
    }

}

@media (max-width: 640px) {

    #generalContents .generalPosts {
        gap: 16px;
    }

    #generalContents .journalPost a {
        flex-direction: column;
    }

    #generalContents .journalPostThumb {
        width: 100%;
        max-width: initial;
    }

    #generalContents .journalPostDesc > .inner {
        padding: 20px 0;
        gap: 12px;
    }

    /*#generalPostsContainer .btnMore {
        margin-top: 40px;
    }*/
	
	#journalContentsWrapper .btnMore {
        margin-top: 40px;
    }
	
	.notFound #journalContentsWrapper .btnMore {
        margin-top: 16px;
		margin-bottom: 16px;
    }

}

/*-------------------------
 * 
 * 
 * 
 * Page Navigation
 * 
 * 
 * 
-------------------------*/

#pageNav > .inner {
    width: 100%;
    margin: 64px 0 0;
    display: flex;
    justify-content: center;
}

#pageNav .wp-pagenavi {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wp-pagenavi a,
.wp-pagenavi span.current {
    border-radius: 4px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--black);
    background: var(--white);
}

.wp-pagenavi span.current {
    color: var(--white);
    background: var(--black);
}

@media (any-hover: hover) {

    #pageNav .wp-pagenavi a:hover,
    #pageNav .wp-pagenavi a:active {
        color: var(--white);
        background: var(--black);
    }

}

#pageNav .wp-pagenavi .previouspostslink::before,
#pageNav .wp-pagenavi .nextpostslink::before {
    display: block;
    content: '';
    width: 6px;
    height: 10px;
    background: no-repeat center center / cover;
    transition: .5s ease;
}

#pageNav .wp-pagenavi .previouspostslink::before {
    background-image: url(../images/common/arrow/arrow_03_k_L.svg);
}

#pageNav .wp-pagenavi .previouspostslink:hover::before {
    background-image: url(../images/common/arrow/arrow_03_w_L.svg);
}

#pageNav .wp-pagenavi .nextpostslink::before {
    background-image: url(../images/common/arrow/arrow_03_k.svg);
}

#pageNav .wp-pagenavi .nextpostslink:hover::before {
    background-image: url(../images/common/arrow/arrow_03_w.svg);
}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {

}

/*-------------------------
 * 
 * 
 * 
 * Single
 * 
 * 
 * 
-------------------------*/

#journalPostContainer {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    color: var(--black);
}

#journalPostContainer > .inner {
    width: 100%;
}

#journalPost .journalPostHeader > .inner {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px 0;
}

.notFound #journalPost .journalPostHeader > .inner {
    padding-bottom: 0;
}

#journalPost .journalPostTitle {
    font-size: 2em;
    line-height: 1.5;
}

#journalPost .journalPostMeta {
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: .5;
}

#journalPost .journalPostDate {
    font-size: 14px;
    flex-shrink: 0;
}

#journalPost .journalPostCats {
    display: flex;
    align-items: center;
    gap: 8px;
}

#journalPost .journalPostCat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	line-height: 24px;
	padding: 1px 12px 0;
	border: 1px solid var(--black);
	border-radius: 4px;
}

#journalPost .journalEyecatch > .img {
    padding-top: 66.66%;
}

#journalPost .journalPostBody > .inner {
    width: 90%;
    padding: 40px 0;
}

#journalPost .journalPostBody .post {
    padding: 0 0 24px;
    position: relative;
}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {

    #journalPost .journalPostHeader > .inner {
        gap: 12px;
        padding: 28px 0 24px;
    }

    #journalPost .journalPostTitle {
        font-size: 1.72em;
    }

    #journalPost .journalPostBody > .inner {
        padding: 32px 0 16px;
    }

    #journalPost .journalPostBody .post {
        padding-bottom: 16px;
    }

}

/*-------------------------
 * 
 * 
 * Tags
 * 
 * 
-------------------------*/

#journalPostTags {
    margin-top: 3em;
}

#journalPostTags ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#journalPostTags a {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    gap: .2em;
    height: 26px;
    line-height: 24px;
    border-radius: 4px;
    border: 1px solid var(--lightGray02);
    overflow: hidden;
    color: var(--black);
    font-size: 12px;
    padding: 0 12px;
}

#journalPostTags a::before {
    display: block;
    content: '#';
}

@media (any-hover: hover) {

	#journalPostTags a:hover,
    #journalPostTags a:active {
        background: #e2e2e2;
        /* border-color: #ddd; */
    }

}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {

    #journalPostTags {
        margin-top: 2.5em;
    }

}

/*-------------------------
 * 
 * 
 * Post Info Heading
 * 
 * 
-------------------------*/

.journalPostInfo > .inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px 0;
    position: relative;
}

.journalPostInfo > .inner::before {
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background: var(--lightGray02);
    position: absolute;
    top: 0;
    /* bottom: 0; */
    left: 50%;
    transform: translate(-50%, 0);
}

.journalPostInfo .journalPostInfoHeading {
    font-size: 1.3125em;
    line-height: 1.5;
}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {

    .journalPostInfo > .inner {
        gap: 20px;
        padding: 32px 0;
    }

}

/*-------------------------
 * 
 * 
 * Author
 * 
 * 
-------------------------*/

#journalPostAuthor .journalPostInfoBody {
    background: rgba(26, 26, 26, .04);
    border-radius: 8px;
    overflow: hidden;
}

#journalPostAuthor .journalPostInfoBody > .inner {
    width: 100%;
    padding: 32px 32px 24px;
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

#journalPostAuthor .journalPostAuthorThumb {
    flex-shrink: 0;
}

#journalPostAuthor .journalPostAuthorThumbImg {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    overflow: hidden;
}

#journalPostAuthor .journalPostAuthorThumbImg > .img {
    padding: 0;
    width: 100%;
    height: 100%;
}

#journalPostAuthor .journalPostAuthorDesc {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#journalPostAuthor .journalPostAuthorDesc > .inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#journalPostAuthor .journalPostAuthorName {
	font-size: 16px;
	line-height: 1;
}

#journalPostAuthor .journalPostAuthorText {
	font-size: 14px;
}

#journalPostAuthor .journalPostAuthorSns ul {
    display: flex;
    align-items: center;
    gap: 16px;
}

#journalPostAuthor .journalPostAuthorSnsItem {
    overflow: hidden;
}

#journalPostAuthor .journalPostAuthorSnsItem a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 28px;
	/* transform: translate(0, 100%); */
	/* transition: transform 1s ease; */
}

#journalPostAuthor .journalPostAuthorSnsItem a .journalPostAuthorSnsItemIcon > span:nth-of-type(1),
#journalPostAuthor .journalPostAuthorSnsItem a .journalPostAuthorSnsItemIcon > span:nth-of-type(2) {
	height: 28px;
}

#journalPostAuthor .journalPostAuthorSnsItem a svg path {
	fill: var(--black);
	/* transition: .5s ease; */
}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {

    #journalPostAuthor .journalPostInfoBody > .inner {
        padding: 32px 20px 24px;
        flex-direction: column;
        align-items: center;
        gap: 28px;
    }

}

/*-------------------------
 * 
 * 
 * Other Articles
 * 
 * 
-------------------------*/

#journalPostOther > .inner {
    padding-bottom: 0;
}

#journalPostOther .journalPostInfoBody > .inner {
    width: 100%;
}

#journalPostOther .otherPosts {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

#journalPostOther .otherPost {
    width: calc(calc(100% - 24px) / 2);
}

#journalPostOther .otherPost a {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: var(--black);
	text-decoration: none;
}

#journalPostOther .otherPost .otherPostThumb {
	width: 100%;
	border-radius: 4px;
}

#journalPostOther .otherPost .otherPostThumbImg {
	height: 0;
	padding-top: 66.66%;
}

#journalPostOther .otherPost .otherPostDesc > .inner {
	width: 100%;
	height: 100%;
	position: relative;
	padding: 24px 12% 24px 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#journalPostOther .otherPost .otherPostTitle {
	font-size: 16px;
	line-height: 1.75;
}

#journalPostOther .otherPost .otherPostMeta {
	color: var(--black);
	display: flex;
	align-items: center;
	gap: 12px;
	opacity: .5;
	transition: .5s ease;
}

#journalPostOther .otherPost .otherPostDate {
	font-size: 14px;
	flex-shrink: 0;
}

#journalPostOther .otherPost .otherPostCats {
	display: flex;
	align-items: center;
	gap: 8px;
}

#journalPostOther .otherPost .otherPostCat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	line-height: 24px;
	padding: 1px 12px 0;
	border: 1px solid var(--black);
	border-radius: 4px;
	transition: .5s ease;
}

#journalPostOther .otherPost .otherPostCat::before {
	display: none;
}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {

    #journalPostOther .otherPosts {
        flex-direction: column;
        gap: 12px;
    }

    #journalPostOther .otherPost {
        width: 100%;
    }

    #journalPostOther .otherPost .otherPostDesc > .inner {
        padding: 20px 12% 20px 0;
        gap: 12px;
    }

    #journalPostOther .otherPost .otherPostTitle {
        font-size: 14px;
    }

}

/*-------------------------
 * 
 * 
 * 
 * Footer
 * 
 * 
 * 
-------------------------*/

#footer.isActive .footerSocialItem a svg path {
	fill: var(--black);
}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {

}