/*
Theme Name: Motiva
Author: Fivement
Author URI: https://fivement.com
Description: An official website template of Motiva Korea.
Version: 1.0.0
Text Domain: motiva
*/

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    src: url('/static/content/themes/motiva/fonts/pretendard-regular.woff') format('font-woff');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 500;
	src: url('/static/content/themes/motiva/fonts/pretendard-medium.woff') format('font-woff');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 600;
	src: url('/static/content/themes/motiva/fonts/pretendard-semibold.woff') format('font-woff');
}

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    src: url('/static/content/themes/motiva/fonts/pretendard-bold.woff') format('font-woff');
}

/*--- Reset ---*/

:root {	
	--purple: #6b2670;
	--light-purple: #f0eaf0;
	--black: #000;
	--gray: #777;
	--light-gray: #f5f5f5;
	--white: #fff;
	
	--roundness: 4px;
	--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
	
	--header-main: 90px;
	--header-sub: 60px;
}

@media (max-width: 1100px) {
	:root {	
		--header-main: 80px;
		--header-sub: 50px;
	}
}

@media (max-width: 900px) {
	:root {	
		--header-main: 70px;
	}
}

@media (max-width: 600px) {
	:root {	
		--header-main: 60px;
	}
}

::-moz-selection {
	color: var(--purple);
	background: var(--light-purple);
}
  
::selection {
	color: var(--purple);
	background: var(--light-purple);
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure, img { 
	margin: 0; 
	padding: 0; 
}
html { 
	width: 100%; 
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
body { 
	background-color: #fff;
	color: var(--black);
	font-family: 'Pretendard', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.428;
	width: 100%;
	word-break: keep-all;
}

a {
	color: inherit;
	text-decoration: none;
}
ul, li {
	list-style: none;
}
h1 {
	font-size: 80px;
	line-height: 1.128;
}
h2 {
	font-size: 44px;
}
h3 {
	font-size: 32px;
}
h4 {
	font-size: 24px;
}
h5 {
	font-size: 20px;
}
h6 {
	font-size: 16px;
}
p {
	line-height: 1.6;
}
br.mobile-only {
	display: none;
}

@media (max-width: 600px) {
	body {
		font-size: 11px;
	}
	h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 24px;
	}
	h3 {
		font-size: 22px;
	}
	h4 {
		font-size: 18px;
	}
	h5, h6 {
		font-size: 15px;
	}
	br.mobile-only {
		display: block;
	}
}

input[type="text"],
input[type="password"] {
	background-color: var(--light-gray);
	border: 1px solid transparent;
	border-radius: var(--roundness);
	font-family: 'Pretendard', sans-serif;
	outline: none;
	padding: 16px;
}


/* input[type="checkbox"] {
	display: none;
} */
input[type="checkbox"] + label {
	padding-left: 22px;
	position: relative;
}
input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
	content: '';
	display: block;
	position: absolute;	
	border: 1px solid rgba(0,0,0,0.2);
	transform: translate3d(0,-50%,0);
	transition: background-color 0.1s ease-out;
	top: 50%;
	left: 0;
	
	border-radius: 3px;
	width: 16px;
	height: 16px;
}
/* input[type="radio"] + label::before {
	border-radius: 9px;
	width: 18px;
	height: 18px;
} */
input[type="checkbox"] + label::after,
input[type="radio"] + label::after {
	background-color: var(--purple);
	content: '';
	display: block;
	position: absolute;
	transform: translate3d(0,-50%,0) scale(0);
	transition: transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
	top: 50%;
	left: 4px;
	
	border-radius: 1px;
	width: 8px;
	height: 8px;
}
/* input[type="radio"] + label::after {
	border-radius: 5px;
	width: 10px;
	height: 10px;
} */
input[type="checkbox"]:checked + label::after,
input[type="radio"]:checked + label::after {
	transform: translate3d(0,-50%,0) scale(1);
}

.outer-margin {
	width: 100%;
	max-width: 1420px;
	margin: 0 auto;
	padding: 0 60px;
}

@media (max-width: 1100px) {
	.outer-margin {
		padding: 0 40px;
	}
}

@media (max-width: 900px) {
	.outer-margin {
		padding: 0 30px;
	}
}

@media (max-width: 600px) {
	.outer-margin {
		padding: 0 7%;
	}
}

/*--- Site header ---*/

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-main);
	overflow: hidden;
	z-index: 98;
	
	--logo-width: 120px;
}
.site-header.show-sub-menu {
	height: calc(var(--header-main) + var(--header-sub));
}
.site-header .site-header-background {
	background-color: rgba(255,255,255,0.9);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	transition: background-color 0.3s var(--ease-out);
	z-index: 1;
}
.site-header .site-header-background::after {
	background-color: rgba(0,0,0,0.1);
	content: '';
	position: absolute;
	top: var(--header-main);
	width: 100%;
	height: 1px;
}
.site-header .site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	height: var(--header-main);
	z-index: 2;
}
.site-header .site-nav .site-logo {
	background-image: url('../img/motiva-logo-sprite.png');
	background-size: 100% 300%;
	background-position: 0 0;
	display: block;
	width: var(--logo-width);
	height: calc(var(--logo-width) * 0.25);
}
.site-header .site-nav .menu {
	display: flex;
}
.site-header .site-nav .menu .menu-item {
	position: relative;
}
.site-header .site-nav .menu .menu-item + .menu-item {
	margin-left: var(--header-sub);
}
.site-header .site-nav .menu > .menu-item {
	height: var(--header-main);
	line-height: var(--header-main);
}
.site-header .site-nav .menu > .menu-item > a {
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}
.site-header .site-nav .menu > .current-menu-item > a,
.site-header .site-nav .menu > .current-menu-parent > a {
	font-weight: 700;
}
.site-header .site-nav .sub-menu {
	display: none;
	position: absolute;
	top: var(--header-main);
	left: 0;
	white-space: nowrap;
}
.site-header .site-nav .menu .menu-item:last-child .sub-menu {
	left: auto;
	right: 0;
}
.site-header .site-nav .sub-menu .menu-item {
	opacity: 0.6;
	height: var(--header-sub);
	line-height: var(--header-sub);
}
.site-header .site-nav .sub-menu .menu-item:hover,
.site-header .site-nav .sub-menu .current-menu-item {
	opacity: 1;
}
.site-header .site-nav .sub-menu .current-menu-item > a {
	font-weight: 600;
}
.site-header .site-nav .sub-menu .current-menu-item::after {
	background-color: var(--black);
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.site-header .site-nav .menu-item:hover .sub-menu {
		display: flex;
	}
}

@media (max-width: 900px) {
	.site-header {
		--logo-width: 108px;
	}
	.site-header .site-nav .menu .menu-item + .menu-item {
		margin-left: 30px;
	}
	.site-header .site-nav .menu > .menu-item > a {
		font-size: 14px;
	}
}

@media (max-width: 600px) {
	.site-header {
		--logo-width: 90px;
	}
	.site-header .site-nav .menu {
		display: none;
	}
}

.touch .sub-page .site-header {
	height: calc(var(--header-main) + 30px);
}
.touch .sub-page .site-header .site-header-background::after {
	display: none;
}

.no-touch .site-header {
	transition: height 0.4s var(--ease-out);
}
.no-touch .site-header.show-sub-menu {
	transition: height 0.6s var(--ease-out);
}

.header-on-hero:not(.nav-is-open) .site-header .site-nav .site-logo {
	background-position: 0 100%;
}
.header-on-hero .site-header .site-nav .menu-item a {
	color: #fff;
}
.header-on-hero:not(.nav-is-open) .site-header .site-header-background {
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: none;
}
.header-on-hero .site-header .site-header-background::after {
	background-color: rgba(255,255,255,0.4);
}
.transparent-header-background {
	background: linear-gradient(0deg, rgba(0,0,0,0) 10%, rgba(0,0,0,0.2) 100%);
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(var(--header-main) * 1.5);
	transform: translate3d(0,-100%,0);
	z-index: 2;
}
.header-on-hero .site-header + .transparent-header-background {
	transform: translate3d(0,0,0);
}
.header-on-hero .site-header .site-nav .sub-menu .current-menu-item::after {
	background-color: #fff;
}

.site-sub-header {
	display: none;
	position: fixed;
	top: var(--header-main);
	left: 0;
	width: 100%;
	transition: all 0.3s var(--ease-out);
	z-index: 99;
}
.touch .site-sub-header {
	display: block;
}
.site-sub-header .sub-menu {
	display: flex;
	justify-content: flex-end;
}
.site-sub-header .sub-menu .menu-item {
	height: 30px;
}
.site-sub-header .sub-menu .menu-item {
	opacity: 0.6;
	position: relative;
}
.site-sub-header .sub-menu .menu-item + .menu-item {
	margin-left: 40px;
}
.site-sub-header .sub-menu .current-menu-item {
	opacity: 1;
	font-weight: 600;
}
.site-sub-header .sub-menu .current-menu-item::after {
	background-color: var(--black);
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
}

.nav-is-open .site-header {
	height: 100% !important;
	transition: height 0.6s var(--ease-out);
}
.nav-is-open .site-header-background::after,
.nav-is-closing .site-header-background::after {
	display: none;
}
.nav-is-open .site-sub-header {
	opacity: 0;
	pointer-events: none;
	transform: translate3d(0,-10px,0);
}

.header-on-hero .site-sub-header .sub-menu .menu-item {
	color: #fff;
}
.header-on-hero .site-sub-header .sub-menu .current-menu-item::after {
	background-color: #fff;
}

@media (max-width: 900px) {
	.site-sub-header .sub-menu .menu-item {
		font-size: 14px;
	}
	.site-sub-header .sub-menu .menu-item + .menu-item {
		margin-left: 30px;
	}
}

@media (max-width: 600px) {
	.site-sub-header .sub-menu {
		justify-content: flex-start;
	}
	.site-sub-header .sub-menu .current-menu-item::after {
		display: none;
	}
}

/*--- Mobile navigator ---*/

.site-header .hamburger {
	display: none;
	border: 0;
	cursor: pointer;
	overflow: visible; 
	text-transform: none;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	width: 30px;
	height: 30px;
	padding: 5px;
	position: relative;
	right: -5px;
	z-index: 999;
	transition: background-color 0.2s ease-out;
}
.site-header .hamburger .bun {
	width: 20px;
	height: 20px;
	display: inline-block;
	position: relative;
	top: -1px;
}
.site-header .hamburger .patty {
	display: block;
	top: 50%;
}
.site-header .hamburger .patty, 
.site-header .hamburger .patty::before, 
.site-header .hamburger .patty::after {
	background-color: var(--purple);
	width: 100%;
	height: 1.5px;
	position: absolute;
	transition: transform 0.15s ease;
}
.site-header .hamburger .patty::before, 
.site-header .hamburger .patty::after {
	content: "";
	display: block; 
}
.site-header .hamburger .patty::before {
	top: -6px;
	transition: top 0.075s 0.12s ease, opacity 0.075s ease; 
}
.site-header .hamburger .patty::after {
	bottom: -6px;
	transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}

.header-on-hero:not(.nav-is-open) .site-header .hamburger .patty, 
.header-on-hero:not(.nav-is-open) .site-header .hamburger .patty::before, 
.header-on-hero:not(.nav-is-open) .site-header .hamburger .patty::after {
	background-color: #fff;
}

.nav-is-open .site-header .hamburger .patty {
	transform: rotate(45deg);
	transition-delay: 0.12s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
}
.nav-is-open .site-header .hamburger .patty::before {
	top: 0;
	opacity: 0;
	transition: top 0.075s ease, opacity 0.075s 0.12s ease; 
}
.nav-is-open .site-header .hamburger .patty::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 
}

@media (max-width: 600px) {
	.site-header .hamburger {
		display: block;
	}
}

.mobile-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: var(--header-main);
	position: fixed;
	top: var(--header-main);
	left: 0;
	width: 100%;
	height: calc(100% - var(--header-main));
	transform: translate3d(-100%,0,0);
	z-index: 999;
}
.mobile-nav .menu .menu-item {
	font-size: 24px;
	font-weight: 500;
	text-align: center;
	opacity: 0;
	transform: translate3d(0,20px,0);
	transition: all 0.6s var(--ease-out);
}
.mobile-nav .menu .menu-item + .menu-item {
	margin-top: 20px;
}
.mobile-nav .menu .current-menu-item,
.mobile-nav .menu .current-menu-parent {
	color: var(--purple);
	font-weight: 600;
}
.mobile-nav .sub-menu {
	display: none;
}

.nav-is-open .mobile-nav {
	transform: translate3d(0,0,0);
}
.nav-is-open .mobile-nav .menu .menu-item {
	opacity: 1;
	transform: translate3d(0,0,0);
	transition-delay: 0.08s;
}
.nav-is-open .mobile-nav .menu .menu-item:nth-child(2) {
	transition-delay: 0.16s;
}
.nav-is-open .mobile-nav .menu .menu-item:nth-child(3) {
	transition-delay: 0.24s;
}
.nav-is-open .mobile-nav .menu .menu-item:nth-child(4) {
	transition-delay: 0.32s;
}
.nav-is-open .mobile-nav .menu .menu-item:nth-child(5) {
	transition-delay: 0.4s;
}

/*--- Site main ---*/

.site-main {
	padding-top: calc(var(--header-main) + var(--header-sub));
	padding-bottom: 60px;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 100vh;
}

.section {
	background-color: #fff;
}
.section .copy {
	padding: 0 7%;
}

.hero {
	background-size: cover;
	background-position: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
}
.hero .container {
	/* background-color: rgba(0,0,0,0.12); */
}
.hero .copy h1 {
	color: #fff;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.428;
}
.hero .copy h1 br.for-mobile {
	display: none;
}
.hero + .section {
	background-color: transparent;
	padding-top: 100vh;
}
.hero + .section .container {
	background-color: #fff;
}

@media (max-width: 600px) {
	.hero .copy h1 {
		font-size: 24px;
	}
	.hero .copy h1 br.for-mobile {
		display: block;
	}
}

/*--- Site footer ---*/

.site-review-info {
	border-top: 1px solid rgba(0,0,0,0.2);
	color: var(--gray);
	font-size: 13px;
	padding: 24px 7%;
	text-align: center;
	white-space: pre-line;
}

.site-footer {
	background-color: #fff;
	border-top: 1px solid rgba(0,0,0,0.2);
	color: var(--gray);
	font-size: 13px;
	padding: 60px 0;
	position: relative;
	text-align: center;
	z-index: 9;
}
.site-footer .company-info {
	line-height: 1.8;
}
.site-footer .company-info .for-mobile {
	display: none;
}
.site-footer .company-info .bar {
	margin: 0 4px;
}
.site-footer .company-info a {
	text-decoration: underline;
}
.site-footer .copyright {
	margin-top: 8px;
}
.site-footer .footer-link {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 30px;
}
.site-footer .footer-link .footer-logo {
	background-image: url('../img/motiva-logo-sprite.png');
	background-size: 100% 300%;
	background-position: 0 200%;
	width: 96px;
	height: 24px;
	transform: translate3d(0,-2px,0);
}
.site-footer .footer-link .bar {
	background-color: var(--gray);
	display: block;
	width: 1px;
	height: 20px;
	margin: 0 20px;
}

.site-footer .footer-link .instagram {
	background-image: url('../img/instagram-icon.png');
	background-size: contain;
	width: 40px;
	height: 40px;
}

@media (max-width: 600px) {
	.site-review-info {
		font-size: 11px;
		padding: 20px 7%;
	}
	.site-footer {
		font-size: 11px;
		padding: 40px 0;
	}
	.site-footer .company-info .for-mobile {
		display: block;
	}
	.site-footer .company-info .for-desktop {
		display: none;
	}
}

.post-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -20px;
}
.post-grid .grid-item {
	width: 33.333%;
	padding: 20px;
}
.post-grid .grid-item .post-link {
	display: block;
	width: 100%;
	padding-top: 100%;
	position: relative;
	overflow: hidden;
}
.post-grid .grid-item .post-link .post-info {
	color: #fff;
	padding: 30px;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: opacity 0.3s var(--ease-out), transform 0.6s var(--ease-out);
	z-index: 3;
}
.post-grid .grid-item .post-link .post-thumbnail {
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scale(1.05);
	transition: transform 0.6s var(--ease-out);
	z-index: 1;
}
.post-grid .grid-item .post-link .post-thumbnail::after {
	background-color: rgba(0,0,0,0.35);
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.3s var(--ease-out);
	z-index: 2;
}
.post-grid .grid-item .post-link .post-info .date {
	display: inline-block;
	margin-bottom: 12px;
	position: relative;
}
.post-grid .grid-item .post-link .post-info .date::after {
	background-color: #fff;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	bottom: -2px;
	left: 0;
}

@media (hover: hover) and (pointer: fine) {
	.post-grid .grid-item .post-link:hover .post-info {
		opacity: 0;
		transform: translate3d(0,10px,0);
	}
	.post-grid .grid-item .post-link:hover .post-thumbnail {
		transform: scale(1);
	}
	.post-grid .grid-item .post-link:hover .post-thumbnail::after {
		opacity: 0;
	}
}

@media (max-width: 1100px) {
	.post-grid .grid-item {
		width: 50%;
	}
}

@media (max-width: 600px) {
	.archive .site-main .outer-margin {
		padding: 0;
	}
	.post-grid {
		margin: 0;
	}
	.post-grid .grid-item {
		width: 100%;
		padding: 0;
	}
	.post-grid .grid-item .post-link .post-info {
		color: var(--black);
		padding: 24px 7%;
		position: relative;
	}
	.post-grid .grid-item .post-link .post-info .date {
		opacity: 0.5;
		margin-bottom: 8px;
	}
	.post-grid .grid-item .post-link .post-info .date::after {
		background-color: var(--black);
	}
	.post-grid .grid-item .post-link .post-thumbnail {
		transform: scale(1);
		top: 0;
		padding-top: 100%;
		height: 0;
	}
	.post-grid .grid-item .post-link:hover .post-thumbnail::after {
		display: none;
	}
}

.post .article {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}
.post .article-header {
	margin-bottom: 60px;
}
.post .article-header .back-button {
	background-image: url('../img/post-back-icon.png');
	background-size: contain;
	display: none;
	width: 40px;
	height: 40px;
	margin-bottom: 20px;
	transform: translate3d(-12px,0,0);
}
.post .article-header .date {
	color: var(--gray);
	display: block;
	margin-top: 12px;
}
.post .article-content > * + * {
	margin-top: 20px;
}
.post .article-content .wp-block-image + *:not(.wp-block-image) {
	margin-top: 60px;
}
.post .article-content p.has-small-font-size {
	color: var(--gray);
	margin-top: 40px;
}

@media (max-width: 600px) {
	.post .article-header {
		margin-bottom: 40px;
	}
	.post .article-header .date {
		margin-top: 8px;
	}
	.post .article-content > * + * {
		margin-top: 12px;
	}
	.post .article-content .wp-block-image + *:not(.wp-block-image) {
		margin-top: 30px;
	}
	.post .article-content p.has-small-font-size {
		font-size: 12px !important;
		margin-top: 20px;
	}
}

/*--- Animate ---*/

.animate .animate-item {
	opacity: 0;
	transform: translate3d(0,60px,0);
}
.animated .animate-item {
	opacity: 1;
	transform: translate3d(0,0,0) !important;
	transition: opacity 0.6s var(--ease-out), transform 1.2s var(--ease-out);
}
.animated.animate-slower .animate-item {
	transition: opacity 1.2s var(--ease-out), transform 1.8s var(--ease-out);
}

.animate .animate-item.fade-in-left {
	transform: translate3d(-120px,0,0);
}
.animate .animate-item.fade-in-right {
	transform: translate3d(120px,0,0);
}

.animated .index-1 {
	transition-delay: 0.15s;
}
.animated .index-2 {
	transition-delay: 0.3s;
}
.animated .index-3 {
	transition-delay: 0.45s;
}
.animated .index-4 {
	transition-delay: 0.6s;
}
.animated .index-5 {
	transition-delay: 0.75s;
}
.animated .index-6 {
	transition-delay: 0.9s;
}
.animated .index-7 {
	transition-delay: 1.05s;
}
.animated .index-8 {
	transition-delay: 1.2s;
}
.animated .index-9 {
	transition-delay: 1.35s;
}

/*--- Privacy policy ---*/

.privacy-policy .site-main .outer-margin {
	max-width: 900px;
	margin: 0 auto;
}
.privacy-policy h3 {
	margin-bottom: 40px; 
}
.privacy-policy h4 {
	font-size: 16px;
	margin-top: 20px;
	margin-bottom: 12px;
}
.privacy-policy p + p {
	margin-top: 12px;
}