:root {
	--vh: 1vh;
	--color-olive: #5A6463;
	--color-olive-multy: #514f4d;
	--color-olive-hover-overlay: #514f4dcc;  /* 半透明遮罩（僅用於圖片 hover overlay）*/
	--color-olive-pass: #767170;
	--color-olive-border: #514f4d88;
	--color-plum-text: #b84b4b;
	--color-plum: #ff8a8a;
	--color-plum-border: #ff8a8a88;
	--color-mango: #FFBA7A;
	--color-mango-pass: #ffce7a55;
	--color-white-pass: rgba(255, 255, 255, 0.2);
	--color-dirty-pink: #DBD0D3;
	--color-dirty-pink-pass: rgba(199, 156, 153, 0.4);
	--color-dirty-pink-pass-2: rgba(199, 156, 153, 0.1);
	--color-pink: #F6E3DD;
	--color-violet-border: #98a0ea;
	--border-img-olive: url('../img/texture/stroke_olive.png') 33.3% round;
	--border-img-plum: url('../img/texture/stroke_plum.png') 33.3% round;
	--border-img-plum-pass: url('../img/texture/stroke_plum_05.png') 33.3% round;
	--border-img-violet: url('../img/texture/stroke_violet.png') 33.3% round;
	--border-img-violet-dashed: url('../img/texture/stroke_violet_dashed.png') 5% round;
	--bg-img-olive: url('../img/texture/stroke_olive_05.png');
	--bg-img-plum: url('../img/texture/bg_pink.jpg');
	--bg-img-plum-pass: url('../img/texture/bg_pink_05.png');
}

html, body {
	overflow-x: hidden;
}
body {
	font-family: 'Arial', 'Noto Sans TC', 'Noto Sans CJK TC', 'PingFang TC', 'Heiti TC', source-han-sans-traditional, 'Microsoft JhengHei', sans-serif;
	font-weight: 400;
	background: var(--bg-img-plum);
	color: var(--color-olive);
	padding-top: 80px;
}
body.loaded {
}
h3, h4, h5, h6, p {
	line-height: 1.7;
	font-weight: 400;
}
h1, h2 {
	line-height: 1.3;
	font-weight: 400;
}
p + p {
	margin-top: 1em;
}
.t-serif {
	font-family: 'Brygada 1918', 'Noto Serif TC', serif;
}
a {
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}
a:focus, button:focus {
	/* outline: 1px solid var(--color-plum); */
}

a, button, input[type="submit"], input[type="button"] {
	cursor: pointer;
}
input, select, textarea, button {
	font-family: 'Arial', 'Noto Sans CJK TC', 'PingFang TC', 'Heiti TC', 'Noto Sans TC', source-han-sans-traditional, 'Microsoft JhengHei', sans-serif;
	font-weight: 400;
}
img {
	max-width: 100%;
	width: auto;
	height: auto;
}


/* layout */
.container {
	padding: 4em 2em 4em;
	max-width: 1080px;
	width: 100%;
	margin: 0 auto;
}
.container.wide {
	max-width: 1600px;
}
.container.midwide {
	max-width: 1260px;
}
header .container {
	padding: 0 0 0 2em;
}
footer .container {
	padding: 1em 7em 2em 2em;
}

.block-right {
	max-width: calc(60% - 2em);
}

.max-w10 {max-width: 1080px;}
.max-w9-8 {max-width: 980px;}
.max-w9-2 {max-width: 920px;}
.max-w9 {max-width: 900px;}
.max-w8 {max-width: 840px;}
.max-w7 {max-width: 680px;}
.max-w6 {max-width: 580px;}
.max-w5-4 {max-width: 540px;}
.max-w5 {max-width: 500px;}
.max-w4 {max-width: 400px;}
.max-w3 {max-width: 320px;}
.max-w2-5 {max-width: 250px;}
.max-w2 {max-width: 200px;}
.max-w1 {max-width: 120px;}

.min-h-90 { min-height: 60vw; }
.min-h-100vh { min-height: 100vh; }

.w100 { width: 100%; }
.w50 { width: 50%; }
.h100 { height: 100%; }

.col-2 { width: 20%; }
.col-3 { width: 30%; }
.col-4 { width: 40%; }
.col-5 { width: 50%; }
.col-6 { width: 60%; }
.col-7 { width: 70%; }
.col-8 { width: 80%; }

.col {
	display: inline-block;
}
.block {
	display: block;
}
.flex {
	display: flex;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}
.d-table {
	display: table;
}
.d-row {
	display: table-row;
}
.d-cell {
	display: table-cell;
}
.mt-xs { margin-top: 4px; }
.mt-s {	margin-top: 8px; }
.mt-1 {	margin-top: 0.8em; }
.mt-2 {	margin-top: 1.4em; }
.mt-3 {	margin-top: 2em; }
.mt-4 {	margin-top: 4em; }
.mt-5 {	margin-top: 6em; }
.mb-1 {	margin-bottom: 0.8em; }
.mb-2 {	margin-bottom: 1.4em; }
.mb-3 {	margin-bottom: 2em; }
.mb-4 {	margin-bottom: 4em; }
.mb-xs { margin-bottom: 5px; }
.mb-s { margin-bottom: 10px; }
.ml-s { margin-left: 10px; }
.ml-1 { margin-left: 1em; }
.ml-2 { margin-left: 1.8em; }
.mr-1 { margin-right: 1em; }
.mr-2 { margin-right: 2em; }

.my-1 { margin-top: 0.5em; margin-bottom: 0.5em;}

.pt-s { padding-top: 4px; }
.pt-1 { padding-top: 0.8em; }
.pt-2 { padding-top: 1.4em; }
.pt-4 { padding-top: 4em; }
.pb-0 { padding-bottom: 0em; }
.pb-1 { padding-bottom: 1em; }
.pb-2 { padding-bottom: 2em; }
.pb-4 { padding-bottom: 4em; }
.px-1 { padding-left: 0.8em; padding-right: 0.8em; }
.pr-2 { padding-right: 2em; }
.py-0 { padding-top: 0; padding-bottom: 0; }

/* position */
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.ab-center {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
.ab-left {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto 0;
	z-index: -1;
}
.ab-right {
	position: absolute;
	right: 0;
	bottom: 0;
}
.ab-righttop {
	position: absolute;
	right: 0;
	top: 0;
}
.fixed-right {
	position: fixed;
	right: 35px;
	top: 0;
	bottom: 0;
	z-index: 80;
}
.flex-column {
	flex-direction: column;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-middle {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.flex-space {
	display: -webkit-flex;
    display: flex;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.flex-around {
	display: -webkit-flex;
    display: flex;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
.flex-al-start {
	-webkit-align-items: flex-start;
    align-items: flex-start;
}
.flex-al-center {
	-webkit-align-items: center;
    align-items: center;
}
.flex-al-end {
	-webkit-align-items: flex-end;
    align-items: flex-end;
}
.flex-right {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.flex-left {
	display: -webkit-flex;
    display: flex;
	-webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.flex-left.flex-column {
	-webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: center;
    justify-content: center;
}
.flex-top {
	display: -webkit-flex;
    display: flex;
	-webkit-align-items: flex-start;
    align-items:  flex-start;
}
.flex-bottom {
	display: -webkit-flex;
    display: flex;
	-webkit-align-items: flex-end;
    align-items:  flex-end;
}
.flex-shrink-1 {
	flex-shrink: 1;
}
.flex-gap-05 > * + * {
	margin-left: 1em;
}
.flex-gap-1 > * + * {
	margin-left: 2em;
}
.flex-gap-1.flex-column > * + * {
	margin-top: 1em;
	margin-left: 0;
}
.flex-gap-2 > * + * {
	margin-left: 4em;
}
.flex-gap-2.flex-column > * + * {
	margin-left: 0em;
	margin-top: 2em;
}
.flex-gap-3 > * + * {
	margin-left: 8em;
}
.flex-list-gap > * {
	margin-bottom: 4em;
}
.flex-around:not(.flex-wrap) > * {
	flex: 1 1 0px;
} 
.zindex-1 {
	z-index: 1;
}

.no-pe {
	pointer-events: none;
}

.nowrap {
	white-space: nowrap;
}

/* color */
.bg-no {
	background: transparent;
}
.bg-lightgray {
	background-color: #f2f2f2;
}
.bg-gray {
	background-color: #1a1a1a;
}
.bg-lineargreen {
	background: rgb(38,68,40);
	background: radial-gradient(circle, rgba(38,68,40,1) 0%, rgba(19,44,24,1) 100%);
}
.bg-green {
	background-color: #132c18;
}
.bg-hand {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-repeat: no-repeat;
	background-image: url('../img/left_hand.png'), url('../img/right_hand.png');
	background-position: 5% 68vh, 95% 150vh;
	pointer-events: none;
}
.bg-dice {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-repeat: no-repeat;
	background-image: url('../img/dice.png'), url('../img/s2.png');
	background-position: 95% 5vh, 5% 85%;
	pointer-events: none;
}
.bg-gallery {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-repeat: no-repeat;
	background-image: url('../img/s1.png');
	background-position: 2% 65vh;
	pointer-events: none;
}
.black { color: #1a1a1a; }
.white { color: #fff; }
.red { color: #ff7077; }
.gray { color: #4d4d4d; }
.gray2 { color: #ccc; }
.olive { color: var(--color-olive); }

.opacity3 { opacity: 0.3; }
.opacity6 { opacity: 0.6; }

.border { border: 2px solid; }

/* text */
.material-icons-outlined {
	font-size: inherit;
}
.t-xxl { font-size: 46px; /* 30px */ }
.t-xl { font-size: 2em; /* 30px */ }
.t-lg { font-size: 1.75em; /* 26px */ }
.t-ml, h1 { font-size: 1.5em; /* 22px */ }
.t-md, h2, h3 { font-size: 1.125em; /* 18px */ }
h4 { font-size: 1em; }
.t-sm { font-size: 0.875em; /* 16px */ }
.t-xs { font-size: 0.75em; /* 14px */ }
.t-xxs { font-size: 0.5em; /* 14px */ }

.t-center { text-align: center; }
.t-left { text-align: left; }
.t-right { text-align: right; }
.t-justify { text-align: justify; }

.bold { font-weight: 700; }
.font-w4 { font-weight: 400; }
.font-w5 { font-weight: 500; }

.lh-13 { line-height: 1.3; }
.lh-15 { line-height: 1.5; }
.lh-18 { line-height: 1.8; }
.lh-20 { line-height: 2; }

.ls-1 { letter-spacing: 1px; }
.show-sm, .show-mid { display: none !important; }

.vt-middle { vertical-align: middle; }
.vt-bottom { vertical-align: bottom; }

hr {
	border: 0;
	border-bottom-width: 2px;
	border-bottom-style: solid;
}
.link {
	text-decoration: underline;
	text-underline-offset: 6px;
}
.link:hover {
	opacity: 0.9;
}
/* fadein */
.fadein {
	opacity: 0;
	transition: opacity 0.8s ease;
}
.fadein.show {
	opacity: 1;
}

/* btn */
.btn {
	display: inline-block;
	padding: 10px 42px 10px;
	background-color: var(--color-olive-multy);
	font-size: 15px;
	color: #fff;
	border-radius: 2px;
	border: 0;
	border-right: 3px solid #514f4d33;
    border-bottom: 3px solid #514f4d33;
    white-space: nowrap;
}
.btn-midwide {
	padding: 10px 50px 10px;
}
.top-banner .btn {
	padding: 20px 42px 20px;
}
.box-shadow {
	box-shadow: 2px 2px 0 #000;
}
.btn-trans {
	background: transparent;
	border: none;
}
.btn-small {
	font-size: 0.75em;
	font-weight: 300;
	letter-spacing: 2px;
	padding: 2px 4px 2px 6px;
}
.btn-circle {
	border-radius: 50%;
	width: 75px;
	height: 75px;
	display: inline-block;
	margin-bottom: 0.75em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	position: relative;
}
.btn-circle.active {
	display: none;
}
.btn-circle .dialog {
	background: var(--color-olive-multy);
	color: #fff;
	border-radius: 2px;
	position: absolute;
	white-space: nowrap;
	padding: 7px 15px 8px;
	top: 21px;
    right: 80px;
    opacity: 0.001;
    transition: 0.2s;
    z-index: 91;
    pointer-events: none;
    font-size: 14px;
}
.btn-circle:hover .dialog {
	opacity: 1;
}
.big-dialog {
	background-image: url('../img/big-dialog.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 3em 4em;
}

/* lodaer */
body {
	max-height: calc(var(--vh) * 100);
	overflow: hidden;
}
body.loaded {
	max-height: none;
	overflow: auto;
}
.loader-wrap {
	position: fixed;
	width: 100%;
	height: 100vh;
	height: calc(var(--vh) * 100);
	background-image: var(--bg-img-plum);
	background-color: var(--color-pink);
	z-index: 999;
	top: 0;
}
body.loaded .loader-wrap {
}

/* header */
.header {
	width: 100%;
    transition: transform 0.2s ease, background-color 0.2s ease, height 0.2s ease-in-out;
    background: var(--bg-img-plum-pass);
    white-space: nowrap;
    border-bottom: 1px solid var(--color-plum-border);
  	position: fixed;
  	z-index: 100;
  	top: 0;
}
.main-title {
	line-height: 1;
}
.navbar {
}
.navbar li {
	display: inline-block;
}
.navbar li a {
	display: inline-flex;
	align-items: center;
	position: relative;
	height: 79px;
	color: var(--color-olive);
	border-left: 1px solid var(--color-plum-border);
  	letter-spacing: 1px;
}
.navbar li a.hover-switch-img {
	padding: 13px 30px 10px;
}
.navbar li a span {
	width: 100%;
	height: 100%;
	display: inline-flex;
	align-items: center;
	padding: 13px 20px 10px 18px;
}
.navbar li a:hover,
.navbar li a:focus,
.navbar li a.active {
	color: var(--color-olive-pass);
}
.navbar li a.active {
	pointer-events: none;
}
.hover-switch-img {
	position: relative;
}
.hover-switch-img img {
	transition: opacity 0.2s linear;
}
.hover-switch-img img:nth-of-type(1) {
	opacity: 1;
}
.hover-switch-img:hover img:nth-of-type(1) {
	opacity: 0;
}
.hover-switch-img img:nth-of-type(2) {
	position: absolute;
	opacity: 0;
}
.hover-switch-img:hover img:nth-of-type(2) {
	opacity: 1;
}
/* navbar toggle */
.hbg-btn {
	border: 1px solid rgba(255, 255, 255, 0.6);
	border: 0;
	height: 50px;
	width: 50px;
	border-radius: 5px;
	vertical-align: top;
	display: none;
	transition: margin 0.2s ease;
	margin-right: -15px;
	position: absolute;
	top: 4px;
	right: 2em;
}
header.detached .hbg-btn {
	margin-top: 0;
}
.icon-hbg,
.icon-hbg::before,
.icon-hbg::after {
	content: "";
	display: block;
	margin: 0 auto;
	width: 25px;
	height: 3px;
	background-color: #000;
	border-radius: 2px;
	position: relative;
}
.icon-hbg::before {
	position: absolute;
	top: -8px;
}
.icon-hbg::after {
	position: absolute;
	bottom: -8px;
}

/* nav kits */
.nav-kits a {
	transition: all 0.4s ease;
}
.nav-kits:hover a {
	opacity: 0.7;
}
.nav-kits a:hover {
	opacity: 1;
	transform: scale(1.05);
}
/* video */
video {
	width: 100%;
	height: auto;
}
/* main */
.topsec {
	
}
.topsec .top-banner {
	flex: 1;
	width: 100%;
	height: 100vh;
	max-height: calc((var(--vh, 1vh) * 100) - 80px);
	position: relative;
	overflow: hidden;
}
.topsec .top-banner a {
	position: absolute;
	bottom: 40px;
	left: 0;
	right: 0;
	width: 167px;
	margin: auto;
}
.video-bg video {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center;
	background-color: var(--bg-img-plum);
}

/* items */
.info-block {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.info-block .dashed-line {
	position: absolute;
	display: inline-block;
	width: 80%;
    height: 0;
    border-top: 1px dashed var(--color-olive);
    top: 51px;
    z-index: -1;
    left: -55%;
}
.circle {
	background: var(--color-olive-pass);
	color: #fff;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 1px;
}
.num-circle {
	background: var(--color-olive-pass);
	color: #fff;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	position: relative;
}
.num-circle span.unit {
	font-size: 14px;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	bottom: 18px;
	margin: 0 auto;
}
.icon-circle {
	background: #eeeeee;
	border-radius: 50%;
	width: 80px;
	height: 80px;
	padding: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.icon-svg img {
	width: 1em;
}
.title-block {
	line-height: 1;
	display: inline-block;
	padding: 23px 50px 20px;
	background-color: var(--color-mango-pass);
	letter-spacing: 0.16em;
}
.sub-title {
	line-height: 1;
	display: inline-block;
	padding: 13px 23px 10px;
	background-color: var(--color-olive-pass);
	color: #fff;
}

.pass-card {
	background: var(--color-white-pass);
	padding: 50px 75px;
	position: relative;
}
.pass-title {
	background: var(--color-dirty-pink-pass);
	padding: 8px 20px 5px 26px;
	letter-spacing: 0.35em;
	position: absolute;
	top: -33px;
}
.pass-title.left {
	left: 40px;
}
.pass-title.right {
	right: 40px;
}
.dec-stairs {
	position: relative;
}
.dec-stairs::before {
	content: '';
	position: absolute;
	background-repeat: no-repeat;
	pointer-events: none;
	background-size: contain;
}
.stairs-1::before {
	background-image: url('../img/stairs_1.png');
	width: 189px;
	height: 253px;
}
.stairs-2::before {
	background-image: url('../img/stairs_2.png');
	width: 305px;
	height: 210px;
}
.stairs-3::before {
	background-image: url('../img/stairs_3.png');
	width: 249px;
	height: 255px;
}
.stairs-rt-1::before { right: -130px; top: -150px; }
.stairs-lb-1::before { left: -190px; bottom: -60px; }
.stairs-rt-2::before { right: -190px; top: -150px; }
.stairs-rt-3::before { right: -90px; top: -220px; }
.stairs-lt-1::before { left: -75px; top: -170px; }
.stairs-rt-4::before { right: -15px; top: -190px; }
.stairs-lt-2::before { left: -75px; top: -250px; }
.stairs-rt-5::before { right: -155px; top: -200px; }

.card {
	position: relative;
}
.card-title {
	background-color: var(--color-dirty-pink-pass);
	display: inline-block;
	padding: 0.5em 0.8em 0.25em 1em;
    letter-spacing: 0.22em;
    font-size: 15px;
    text-align: center;
    width: 103px;
    height: 36px;
    white-space: nowrap;
}
.card-small .card-title {
    margin-bottom: 0.6em;
}
.card-small {
	display: inline-block;
}

.card-small .card-content {
	display: inline-block;
}
.person-info {
	display: inline-block;
	border: 2px solid var(--color-plum-border);
	margin-bottom: 2px;
}

.person-info.small {
	max-width: 50px;
}
.person-info.small .name-block {
	padding: 0;
}
.portait {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	overflow: hidden;
	margin: 5px;
}
.portait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.name-block {
	padding: 5px;
	border-top: 2px solid var(--color-plum-border);
	text-align: center;
}
.list-dot {
	list-style-type: disc;
	padding-left: 1em;
}
.kits-list {
	position: absolute;
	right: -30px;
	bottom: 4px;
	transform: translateX(100%);
}
.kits-list li {
	padding: 5px 15px;
	border: 2px solid var(--color-olive-border);
	margin-top: 0.85em;
	text-align: center;
}
.img-list, .qa-list p {
    position: relative;
}
.img-list span, .qa-list p span {
	position: absolute;
    left: 0;
}
.qa-list .answer span {
	left: 1em;
}
.img-list li + li, .qa-list li + li {
	margin-top: 0.5em;
}
.answer-close {
	position: absolute;
	right: 2.7em;
	top: 1em;
	font-size: 18px;
}

.qa-item .answer {
    max-height: 0;
    padding: 0;
    overflow: hidden;
    background: var(--color-dirty-pink-pass-2);
}
.question {
	display: block;
	background: var(--color-white-pass);
	border: 1px solid #DBD0D3;
	padding: 18px 25px 18px;
	position: relative;
}
.qa-arrow {
	position: absolute;
	right: 25px;
	top: 20px;
}
.question.active + .answer {
    padding: 30px 25px;
    max-height: 800px;
}
.question.active .qa-arrow img {
	transform: rotate(180deg);
}
.tag {
	box-sizing: border-box;
	display: inline-block;
	background: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--color-dirty-pink);
    padding: 7px 17px 7px;
    border-radius: 2px;
    font-size: 14px;
}
.tag + .tag {
	margin-left: 0.7em;
}
.tag.active {
	background: var(--color-dirty-pink-pass);
	box-shadow: inset 0px 0.5px 2px rgba(0, 0, 0, 0.35);
	color: #fff;
	pointer-events: none;
	border: 0;
	padding: 8px 18px 8px;
}
.select {
	border: 1px solid var(--color-dirty-pink);
	padding: 9px 10px 9px;
	font-size: 14px;
	color: #fff;
	cursor: pointer;
	border-radius: 2px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url('../img/icon/scroll_downicon_white.png') 94% / 10% no-repeat var(--color-olive-pass);
	margin-left: 0.7em;
}
.select:focus {
	outline-color: var(--color-plum);
}
/* CAUTION: Internet Explorer hackery ahead */
.select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    .select {
        background: none\9;
        padding: 8px\9;
    }
}

article .img-hover-info {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1em;
    background: var(--color-olive-hover-overlay);
    color: #fff;
    transition: opacity 0.2s ease;
    opacity: 0.001;
}
article:hover .img-hover-info {
	opacity: 1;
}
.folder {
	padding: 1.2em 1.5em;
    border: 2px solid;
    position: relative;
}
.folder-title {
	position: absolute;
    top: -29px;
    border: 2px solid;
    background: #ccc;
    padding: 3px 10px;
}
.border-block {
	border: 2px solid;
	padding: 5px 10px;
}


/* kits */
.kits-wrap {
	background-image: url('../img/main_box_2x.png');
	background-repeat: no-repeat;
	background-position: center 0%;
    background-size: 50%;
    width: 100%;
    max-height: calc(100vh - 80px);
    padding-top: 48%;
    position: relative;
    margin: 0 auto 40px;
}
.item-kit {
	position: relative;
	display: inline-block;
}

.kits-wrap .item-kit {
	position: absolute;
	width: 22%;
}
.kits-wrap .item-kit img {
	width: 100%;
	height: auto;
}
.item-kit .kit-num {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}
.item-kit .dialog {
	position: absolute;
	white-space: nowrap;
	background-color: var(--color-olive-multy);
	color: #fff;
	border-radius: 2px;
	padding: 10px 20px;
	right: 20%;
    bottom: 30%;
    opacity: 0.001;
    transition: 0.2s;
    font-size: 15px;
    letter-spacing: 1px;
}
.item-kit#kit-05 .dialog {
	right: auto;
	left: 10%;
}
.item-kit:hover .dialog {
	opacity: 1;
}

#kit-01 { top: 6%; left: 12%; }
#kit-02 { top: 6%; right: 14%; }
#kit-03 { top: 29%; right: 0%; }
#kit-04 { bottom: 0%; left: 27%;}
#kit-05 { top: 44%; left: 3%; width: 18%;}
#kit-06 { bottom: 6%; right: 4%; width: 24%; }

/* form */
.search-input {
	border: 0;
	background: url('../img/search-border.png') no-repeat;
	background-size: 100% 100%;
	width: 121px;
	height: 26px;
	padding: 5px 0px 5px 25px;
}
.search-btn {
	background: transparent;
	border: 0;
	position: absolute;
	left: 8px;
	top: 7px;
}

/* postlist */
.post-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
	word-break: break-all;
}
.post-list.gap-80 {
	grid-gap: 80px;
	grid-row-gap: 40px;
}
.post-list article > a {
	/* display: inline-block; */
}
.post-list article.news a {
	padding: 20px 25px;
	background: var(--color-white-pass);
}
.post-list-3c {
	grid-template-columns: repeat(3, 1fr);
}
.post-img {
	position: relative;
	width: 100%;
	padding-top: 57.25%;
}
.post-img img {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.post-img.book {
	padding-top: 70%;
}
.post-img.book img {
	object-fit: contain;
}
.img-shadow {
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);
}
.border-violet {
	position: relative;
	border: 1px solid var(--color-violet-border);
	border-radius: 10px;
}

.news-vertical {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.news-img img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

.news-text {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

article.violet-card a {
	padding: 20px;
	position: relative;
	background: var(--bg-img-plum);
	border-radius: 10px;
	border: 1px solid var(--color-violet-border);
	display: block;
	height: 100%;
}
article.violet-card a::before,
.border-violet::before {
	/* content: ''; */
	position: absolute;
	z-index: -1;
	left: -1px;
	top: -1px;
	bottom: -1px;
	right: -1px;
	border-radius: 11px;
	/* background: var(--border-img-violet); */
}
.dashed-top-violet {
	border-top: 1px dashed var(--color-violet-border);
}
.plum-card {
	display: inline-block;
	border: 2px solid var(--color-plum-border);
	padding: 1.5em;
}
.plum-card.small {
	padding: 6px;
}
.line-clamp {
	display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    height: 8em;
    overflow: hidden;
}
.border-violet .card-content {
	padding: 45px;
}
/* temp items */
.imgtag {
	display: inline-block;
	background-color: #fff;
	border: 2px solid #000;
	background: url('../img/pic.jpg');
	background-size: 101% 101%;
	background-position: center;
	position: relative;
}
.imgtag + .imgtag {
	margin-top: -6px;
}
.logo {
	height: 40px;
	width: 80px;
}
.img-lg {
	width: 100%;
	padding-top: 66%;
}
.img-squere {
	width: 100%;
	padding-top: 90%;
}
.bg-right {
	background: url('../img/pic.jpg') no-repeat;
	background-size: 100% 100%;
	background-position: center;
	width: 85%;
	padding-top: 50%;
	margin-left: 15%;
	margin-top: 5%;
	position: absolute;
	z-index: -1;
}
.hoverblack {
}
.hoverblack::after {
	content: '';
	width: 100%;
	height: 100%;
	background-color: #99999944;
	position: absolute;
	top: 5px;
	left: 0px;
}

/* footer */
.footer {
	background: url('../img/dots.png') no-repeat;
	background-position: 99% center;
	background-size: contain;
}
.icon-links {
	margin-top: 0;
}
.icon-links a + a {
	margin-left: 0.4em;
}
/* popup */
.hide {
	display: none;
}
.show {
	display: block;
}
.popup-wrap {
	position: fixed;
	z-index: 200;
	top: 0px;
	background: #DBD0D366;
	width: 100%;
	height: calc(100vh);
	max-height: calc((var(--vh, 1vh) * 100));
	overflow-y: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}
.popup-wrap.active {
	opacity: 1;
	pointer-events: auto;
}
.popup-card {
	border-radius: 2px;
	margin: 40px auto;
	position: relative;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.popup-card.popup-img-card {
	max-height: calc(100vh - 80px);
	max-height: calc((var(--vh, 1vh) * 100) - 80px);
}

.popup-card.active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.popup-card::before {
	content: '';
	background: var(--bg-img-olive);
    background-size: 30px;
    display: inline-block;
    position: absolute;
    z-index: -1;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 2px;
}
.popup-content {
	position: relative;
	z-index: 1;
	background: #fff;
	padding: 80px 30px;
}
.popup-card.popup-img-card .popup-content {
	height: 100%;
	padding: 40px 50px 40px;
}
.popup-card .post-date {
	position: absolute;
	top: 20px;
	left: 30px;
}
.popup-close {
	position: absolute;
	top: 30px;
	right: 30px;
}
.popup-card.popup-img-card .popup-close {
	top: 20px;
	right: 20px;
}
.popup-share {
	position: absolute;
	bottom: 50px;
	right: 30px;
}
.card-share {
	position: absolute;
	bottom: 30px;
	right: 30px;
}
.popup-card .material-icons-outlined {
	font-size: 24px;
}
body.on-popup-opan {
	overflow: hidden;
	height: 100vh;
	padding-right: 17px;
}
body .popup-wrap.active {
	padding: 0;
}
body.on-popup-opan .popup-wrap.active {
	padding: 0 17px 0 0;
}

/* page btn */
.page-btns-wrap {
	position: fixed;
}
.page-btns-wrap a {
	z-index: 1;
	position: fixed;
	display: inline-flex;
	width: 40px;
	height: 40px;
	top: 0;
	bottom: 0;
	margin: auto;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 9999px;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center;
}
.page-btns-wrap a:nth-of-type(1) {
	background-image: url('../img/icon/scroll_lefticon.png');
	left: 30px;
}
.page-btns-wrap a:nth-of-type(2) {
	background-image: url('../img/icon/scroll_righticon.png');
	right: 30px;
}


/*===================*/
/* BOB
/*===================*/

@keyframes bob-on-hover {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

.bob-on-hover {
	transition: all 0.3s ease;
}
.bob-on-hover:hover, .bob-on-hover:focus, .bob-on-hover:active {
  -webkit-animation: bob-on-hover 1.5s .3s ease-in-out infinite alternate;
  animatione: bob-on-hover 1.5s .3s ease-in-out infinite alternate;
  transform: translateY(-8px);
}

/* filter */
input[type="checkbox"] {
	width: 0;
	height: 0;
	overflow: hidden;
	border: 0;
	opacity: 0;
	visibility: hidden;
}
.filter-checkbox-label {
	cursor: pointer;
}
input[type="checkbox"]:checked + .tag.filter-checkbox-label {
	background: var(--color-dirty-pink-pass);
	box-shadow: inset 0px 0.5px 2px rgba(0, 0, 0, 0.35);
	color: #fff;
	border: 0;
	padding: 8px 18px 8px;
}
.filter-item {
	display: none;
}
.filter-item.show {
	display: inline-block;
}

/* ===== ACCESSIBILITY ===== */

/* Skip navigation link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
}
.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    overflow: visible;
    z-index: 9999;
    padding: 12px 24px;
    background: #132c18;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    outline: 3px solid #fff;
}

/* Visually hidden (screen reader only) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible */
*:focus-visible {
    outline: 2px solid var(--color-olive);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fadein {
        opacity: 1 !important;
        transition: none !important;
    }
    .visible,
    .hidden {
        opacity: 1 !important;
        transition: none !important;
    }
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}