@media screen and (max-width: 1280px) {
	
}
@media screen and (max-width: 1024px) {
	:root {
		--fs-5xl: 60px;
		--fs-4xl: 40px;
		--fs-3xl: 30px;
		--fs-2xl: 28px;
		--fs-xl: 24px;
		--fs-lg: 22px;
		--fs-md: 18px;
		--fs-sm: 16px;
		--fs-xs: 14px;
		--serif: 'Noto Serif TC', serif;
	}
	
	.hide-sm {
		display: none;
	}
	.show-sm {
		display: block !important;
	}
	.flex-column-sm {
		flex-direction: column;
	}
	
	.hbg-btn {
		display: inline-block;
	}
	
	
	.header {
		position: fixed;
		overflow: hidden;
		height: auto;
		max-height: 48px;
		right: 0;
		top: 0;
		width: 100%;
		display: block;
		transition: all 0.6s ease;
	}
	.header::before, .header::after {
		width: 100%;
		position: absolute;
		bottom: 2px;
		top: 0;
		z-index: -1;
	}
	.header::after {
		bottom: 0;
		top: auto;
		z-index: 0;
		height: 2px;
		background: linear-gradient(90deg, var(--gold-gradient));
	}
	.header.active {
		background-color: #000000;
		color: var(--gray-300);
		max-height: 500px;
	}
	.header.detachedHide {
		/* transform: translateY(-100%); */
	}
	.header.detached {
		max-height: 48px;
	}
	.header.detached.active {
		max-height: 500px;
	}
	header.active .icon-hbg,
	header.active .icon-hbg::before,
	header.active .icon-hbg::after {
		background: var(--yellow-600);
	}
	.header .flex-right {
		justify-content: flex-start;
	}
	.navbar {
		flex-direction: column;
		padding-bottom: 16px;
	}
	.navbar li {
	    display: block;
	    padding: 0;
	    margin-bottom: 0;
	    margin-top: 0px;
	}
	.navbar li + li {
		margin-left: 0;
	}
	.navtop.container {
		padding-top: 0px;
		padding-left: 1em;
		flex-direction: column-reverse;
		align-items: flex-start;
	}
	.header.detached .navtop.container {
	}
	.nav-logo {
		height: 48px;
		align-items: center;
		padding-left: 16px;
	}
	.nav-logo li {
	}
	
	/* layout */
	.container {
		padding: 4em 1em;
	}
	.bg-w-sm {
		padding: 15px;
		margin: 0 -15px;
	}
	.text-center-sm {
		text-align: center;
	}
	.mx-auto-sm {
		margin-left: auto;
		margin-right: auto;
	}
	.block-sm {
		display: block;
	}
	
	.mt-3 {
		margin-top: 1em;
	}
	.mr-0-sm {
		margin-right: 0em;
	}
	.mb-1-sm {
		margin-bottom: 1em;
	}
	.mb-2-sm {
		margin-bottom: 2em;
	}

	/* sec */
	#top-sec .container {
		flex-direction: column-reverse;
		padding-bottom: 4em;
	}
	.img-book-wrap {
		margin-bottom: 50px;
	}
	.top-content {
		text-align: center;
		padding-bottom: 0;
	}
	#video-sec .container {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	#video-sec .left-block {
		width: 100%;
		max-width: 720px;
	}
	
	
	.swiper-brave {
		height: 760px;
		max-height: none;
	}
	.swiper-brave .swiper-button-next {
		margin-right: 0;
	}
	.swiper-brave .slide-img img {
		width: 120%;
		height: 55%;
		inset: auto 0 0 0;
		max-width: none;
		margin-left: -20%;
		object-position: 30% 50%;
	}
	.swiper-brave .slide-img::after {
		inset: 45% 0 40% 0;
    	background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);
	}
	#brave-sec .container {
		position: absolute;
		inset: 0 0 auto 0;
	}
	.swiper-brave .slide-content {
		padding: 30px;
    	width: 320px;
		height: 320px;
		gap: 20px;
		inset: 8em 2em auto auto;
		margin: auto;
	}
	.card-review-list {
		grid-template-columns: 1fr;
	}
	.card-review {
		max-width: 360px;
		margin: 0 auto;
	}
	.list-review {
		grid-template-columns: 1fr;
		width: fit-content;
		margin: 40px auto 0;
		gap: 12px;
	}
	#select-sec .sec-bg::after {
		inset: 0 0% 0 50%;
    	background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.4) 100%);
	}
	#select-sec p {
		width: 100%;
		text-align: justify;
	}
	/*  */
	.long-btn {
	    height: 135px;
	    width: 36px;
	    padding: 7px;
	    letter-spacing: 3px;
	    font-size: 19px;
	    line-height: 25px;
	}
	.top-btn {
		width: 45px;
		height: 45px;
		padding: 18px 12px;
		background-color: rgba(0, 0, 0, 0.8);
	}
	
	
	.flex-space {
		display: block;
		text-align: center;
	}
	.hideontop.show {
		opacity: 0.6;
	}

	.ml-2 {
		margin-left: 6px;
	}
	
	.hideontop {
	    transform: scale(0.75);
	    transform-origin: right bottom;
	}
	.hideontop.show {
	    opacity: 0.8;
	    transform: scale(0.75);
	}
	.fixed-right {
		right: 20px;
		top: auto;
		bottom: 40px;
	}

	footer {
		margin-top: -1px;
	}
	footer .container {
		text-align: center;
		padding: 1em ;
	}
	footer .container span {
		display: block;
		margin-top: 2em;
	}
	footer .container .flex {
		display: block;
	}
	.logolinks {
		margin-bottom: 20px;
	}
	.logo {
		margin-left: 0;
	}

	.popup-content {
		flex-direction: column;
	}
	.popup-close {
		margin: 0;
		padding: 0.5em 1.5em;
		background-color: #000;
		width: 100%;
		text-align: left;
	}
	.popup-content article {
		width: 100%;
	}

}

@media screen and (max-width: 576px) {
	:root {
		--fs-5xl: 45px;
		--fs-4xl: 32px;
		--fs-3xl: 26px;
		--fs-2xl: 24px;
		--fs-xl: 22px;
		--fs-lg: 20px;
		--fs-md: 18px;
		--fs-sm: 16px;
		--fs-xs: 14px;
		--serif: 'Noto Serif TC', serif;
	}

	.swiper-brave .container {
		text-align: center;
	}
	.swiper-brave .swiper-button-wrap {
		width: 100%;
		text-align: right;
	}
	.swiper-brave .swiper-button-next, .swiper-brave .swiper-button-prev {
		margin-top: 1em;
	}
	.swiper-brave .swiper-pagination {
		position: absolute;
		
	}
	.swiper-brave .slide-content {
		width: 300px;
		height: 300px;
	}
	.list-raise li {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.card-form {
		padding: 30px;
	}
	.form-item input {
		width: 70%;
	}
}