*{
	margin: 0;
	padding: 0;
	list-style:none;
	text-decoration: none;
	box-sizing: border-box;
	font-family: 'Noto Sans TC', sans-serif;
}
:root {
    --swiper-theme-color: #000;
}
html{
	position: relative;
	height: 100%;
	width: 100%;
	font-size: 1.2rem;
	/* border: 1px solid #000; */
}
body{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
p{
	margin: 0 0 0px;
}
a{
	outline: none;
	text-decoration: none;
}

.share-line {
    position: absolute;
    display: block;
    z-index: 1;
    opacity: 0;
}
.page{
	position: relative;
	display: block;
	width: 100%;
	top: 0;
	overflow: hidden;
}
.nav_bar,.page,.footer{
	-webkit-animation: first_fadein_ani 0.5s 0.5s forwards ease-in-out;
	-moz-animation: first_fadein_ani 0.5s 0.5s forwards ease-in-out;
	-ms-animation: first_fadein_ani 0.5s 0.5s forwards ease-in-out;
	animation: first_fadein_ani 0.5s 0.5s forwards ease-in-out;
	opacity: 0;
}
@-webkit-keyframes first_fadein_ani{
	0%{opacity:0;}
	100%{opacity:1;}
}
@-moz-keyframes first_fadein_ani{
	0%{opacity:0;}
	100%{opacity:1;}
}
@-o-keyframes first_fadein_ani{
	0%{opacity:0;}
	100%{opacity:1;}
}
@-ms-keyframes first_fadein_ani{
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes first_fadein_ani{
	0%{opacity:0;}
	100%{opacity:1;}
}

/*gsap 動畫 class*/
.gs_reveal {
	opacity: 0;
	visibility: hidden;
}
.img_reveal{
	opacity: 0;
	visibility: hidden;
}

/*fixed area*/
.fixed_area{
	position: fixed;
	display: none;
	z-index: 10;
	top: 75%;
	right: 1%;
	text-align: center;
}
.fixed_area > a{
	position: relative;
	display: block;
	padding: 1rem 0.1rem;
	text-align: center;
	overflow: hidden;
	text-decoration: none;
}
.fixed_area p{
	position: relative;
	display: block;
	color: #000;
	font-size: 1.1rem;
	z-index: 2;
}
.goToTop_btn{
	position: relative;
	display: block;
	margin: 0 auto;
}
.goToTop_btn i{
	color: #e3474c;
	font-size: 4rem;
}

/*page_main_area*/
.page_main_area{
	position: relative;
	display: block;
	width: 100%;
	/* border: 1px solid #f00; */
	overflow: hidden;
}
.page_main_bg{
	position: absolute;
	display: block;
	z-index: 1;
	top: 0;
	width: 100%;
	/* transform: scale(1,1);
    -webkit-animation: page1_bg_ni 13s forwards linear;
	-moz-animation: page1_bg_ni 13s forwards linear;
	-ms-animation: page1_bg_ni 135s forwards linear;
	animation: page1_bg_ni 13s forwards linear; */
	mask: linear-gradient(0deg, transparent 0%, #000 10%, #000 100%);
	-webkit-mask: linear-gradient(0deg, transparent 0%, #000 10%, #000 100%);
}
@-webkit-keyframes page1_bg_ni{
	0%{
        transform: scale(1,1);
    }
    100%{
        transform: scale(1.15,1.15);
    }
}
@-moz-keyframes page1_bg_ni{
    0%{
        transform: scale(1,1);
    }
    100%{
        transform: scale(1.15,1.15);
    }
}
@-o-keyframes page1_bg_ni{
	0%{
        transform: scale(1,1);
    }
    100%{
        transform: scale(1.15,1.15);
    }
}
@-ms-keyframes page1_bg_ni{
	0%{
        transform: scale(1,1);
    }
    100%{
        transform: scale(1.15,1.15);
    }
}
@keyframes page1_bg_ni{
    0%{
        transform: scale(1,1);
    }
    100%{
        transform: scale(1.15,1.15);
    }
}
.page_main_mask{
	position: absolute;
	display: block;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	margin: auto;
}

/*page1*/
.page1{
	position: relative;
	display: block;
	width: 100%;
	z-index: 3;
	/* border: 1px solid #f00; */
	background-color: #f3f3f3;
}
.page1_piece{
    position: absolute;
    display: none;
    left: -9%;
    top: 13%;
    width: 30%;
    z-index: 2;
}
.page1_piece2{
	position: absolute;
	display: none;
    width: 24%;
    top: 13%;
	right: 0;
	z-index: 2;
}
.logo{
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
    height: 78%;
	margin-top: auto;
	margin-bottom: auto;
}
.logo1{
	width: 5%;
	z-index: 3;
	margin-left: 4rem;
	background: url('../img/bt_logo.png') center center no-repeat;
	background-size: contain;
}
.logo2{
	width: 7%;
	z-index: 3;
	margin-left: 11rem;
	background: url('../img/life_logo.png') center center no-repeat;
	background-size: contain;
}
.logo a{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}
.sandwich_box{
	position: absolute;
	display: none;
	z-index: 2;
	top: 10%;
	right: 2%;
	width: 8%;
	height: 0;
	padding-bottom: 8%;
	/* border: 1px solid #f00; */
}
.sandwich_box img{
	position: absolute;
	display: block;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.menu_close_box{
	position: absolute;
	display: none;
	z-index: 2;
	top: 1%;
	right: 2%;
	width: 10%;
	height: 0;
	padding-bottom: 10%;
	/* border: 1px solid #fff; */
}
.menu_close_box svg{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	color: #e3474c;
}
.nav_bar{
	position: fixed;
	display: block;
	z-index: 11;
	top: 0;
	width: 100%;
	height: 75px;
	opacity: 0;
}
.header_bg{
	position: absolute;
	display: block;
	z-index: 1;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 1;
	pointer-events: none;
	transition: .3s;
}
.menu_list{
	position: absolute;
	display: none;
	z-index: 2;
	left: 0;
	right: 0;
	height: 100%;
	margin: 0 auto;
	width: 75%;
	font-size: 0;
	text-align: center;
	/* border: 1px solid #0f0; */
}
.menu_list_pc{
	display: block;
}
.menu_list_mb{
	display: none;
}
.menu_list li{
	position: relative;
	display: inline-block;
	/* border: 1px solid #0f0; */
	height: 100%;
	margin: 0 3rem;
}
.menu_list li.active .red_bottom_bar{
	display: block;
}
.menu_list li span{
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.menu_list li::before{
	content: '';
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 100%;
}
.menu_list li span p{
	color: #e3474c;
	white-space:nowrap;
	font-family: 'Noto Sans TC', sans-serif;
}
.menu_list li span p:nth-child(1){
	font-size: 1.2rem;
	margin-bottom: 0.2rem;
}
.menu_list li span p:nth-child(2){
	font-size: 0.8rem;
	letter-spacing: 0.1rem;
}
.menu_list li:hover{
	cursor: pointer;
}
.menu_list li:hover span p{
	color: #f5b1c6;
}
.mb_item{
	margin: auto;
	text-align: center;
	padding-top: 0 !important;
}
.mb_item::before{
	content:'';
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}
.review_area{
	position: relative;
	display: none;
	width: 100%;
	background-color: #e3474c;
}
.review_area > div{
	position: relative;
	display: inline-block;
	padding: 2% 4%;
}
.review_area > div a{
	text-decoration: none;
	color: #fff;
	font-size: 1.5rem;
	white-space:nowrap;
	font-family: 'Noto Sans TC', sans-serif;
}
.mb_header_social_area{
	position: absolute;
	display: block;
	width: 100%;
	top: 20%;
}
.mb_header_social_area a{
	position: relative;
	display: inline-block;
    width: 7%;
    height: 0;
    padding-bottom: 7%;
	margin: 0 auto;
}
.mb_header_social_area a:nth-child(1){
	margin-right: 4%;
	background: url('../img/social_btn_fb.png') center center no-repeat;
	background-size: contain;
}
.mb_header_social_area a:nth-child(2){
	background: url('../img/social_btn_line.png') center center no-repeat;
	background-size: contain;
}
.header_social_area{
	position: absolute;
	display: block;
	z-index: 3;
	top: 0;
	bottom: 0;
    right: 5%;
    width: 9%;
    height: 60%;
	margin-top: auto;
	margin-bottom: auto;
	/* border: 1px solid #fff; */
	font-size: 0;
	text-align: center;
}
.header_social_area a{
	position: relative;
	display: inline-block;
	width: 19%;
	height: 100%;
	outline: none;
}
.header_social_area a:hover{
	opacity: .5;
}
.header_social_area a:nth-child(1){
	margin-right: 10%;
	background: url('../img/social_btn_fb.png') center center no-repeat;
	background-size: contain;
}
.header_social_area a:nth-child(2){
	margin-right: 10%;
	background: url('../img/social_btn_line.png') center center no-repeat;
	background-size: contain;
}
.item8:hover .dropdown_area{
	display: none;
}
.dropdown_area{
	position: absolute;
	display: none;
	width: 100%;
	top: 100%;
	padding-left: 0;
}
.dropdown_area li{
	position: relative;
	display: block;
	z-index: 2;
	width: 100%;
	padding: 0.3rem;
	text-align: center;
}
.dropdown_area li a{
	position: relative;
	display: block;
	font-size: 1.2rem;
	color: rgb(58, 58, 58);
	font-family: 'Noto Sans TC', sans-serif;
	text-decoration: none;
	padding: 0.3rem;
}
.dropdown_area li:hover a{
	color: #f5b1c6;
}
.dropdown_area_bg{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	background-color: rgb(255, 255, 255);
}

.page1_main_box{
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}

.main_text{
	position: absolute;
	display: block;
	z-index: 4;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto auto auto auto;
    width: 71%;
    height: 76%;
	opacity: 1;
	text-align: center;
	/* transform: scale(0.9,0.9); */
	/* border: 1px solid #0f0; */
}
.main_text2{
	position: absolute;
	display: block;
	z-index: 5;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    width: 71%;
    height: 76%;
	text-align: center;
	margin: 2% auto 0 auto;
	/* border: 1px solid #f00; */
}

.main_text svg {
	position: relative;
	display: block;
	z-index: 4;
	width: 100%;
	height: 100%;
	margin: -11% auto 0 auto;
	transform: scale(0.6,0.6);
}
.svg_box {
	opacity: 0;
}
.squiggle1 {
	stroke-dasharray: 3600;
	stroke-dashoffset: 3600;
	/* animation: draw 2s linear infinite alternate; */
	animation: draw 6s linear forwards;
}

.squiggle2 {
	stroke-dasharray: 30000;
	stroke-dashoffset: 30000;
	/* animation: draw 2s linear infinite alternate; */
	animation: draw 10s linear forwards;
}

.squiggle3 {
	stroke-dasharray: 30000;
	stroke-dashoffset: 30000;
	/* animation: draw 2s linear infinite alternate; */
	animation: draw 15s linear forwards;
}

@keyframes draw {
	0% {}

	20% {}

	100% {

		stroke-dashoffset: 0;
	}
}

.page1_tittle{
	position: absolute;
	display: block;
	width: 70%;
	left: 0;
	right: 0;
	bottom: 9%;
	margin: 0 auto;
}


/*page2*/
.page2{
	z-index: 3;
	font-size: 0;
	padding: 10rem 0 10rem 0;
	background-color: #f3f3f3;
	/* border-bottom: 1px solid #d3d5d7; */
}
.page_text_area{
	position: relative;
	display: block;
	z-index: 2;
	width: fit-content;
	margin: 0 auto 4rem auto;
	padding-bottom: 0.1rem;
}
/* .page_text_area::before{
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	content: '';
	width: 7rem;
	border-bottom: 5px solid rgb(86 86 86);;
} */
.page_title{
	text-align: center;
	font-size: 2.2rem;
	font-weight: bold;
	color: #e3484d;
}
.page_title::before{
	content: '';
	position: absolute;
	display: block;
	left: -3rem;
	transform: translate(0,-1.5rem);
    width: 2rem;
    height: 5rem;
	background: url("../img/cup.png") center center no-repeat;
	background-size: contain;
}
.first_page_title::before,.last_page_title::before{
	display: none;
}
.page2_text_area{
	font-size: 1.4rem;
	font-weight: 500;
	text-align: justify;
	letter-spacing: 0.1rem;
}
.page2_text_area_pc{
	display: block;
}
.page2_text_area_mb{
	display: none;
}
.page2_text_area p{
	text-align: justify;
	margin-bottom: 0.5%;
	color: rgb(86, 86, 86);
}

/*page3*/
.page3{
	font-size: 0;
	padding: 10rem 0 10rem 0;
	background-color: #fff;
	border-bottom: 1px solid #d3d5d7;
}
.article_area{
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 12rem;
}
.article_area:last-child{
	margin-bottom: 0;
}
.article_box{
	position: relative;
	display: block;
	width: 100%;
}
.article_tittle_area{
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 2rem;
}
.article_tittle_area h1{
	font-size: 1.8rem;
	color: rgb(41, 41, 41);
	text-align: justify;
}
.article_describe_area{
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 2rem;
}
.article_describe_area p{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: 1.4rem;
	color: rgb(86, 86, 86);
	text-align: justify;
}
.read_more_btn{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	padding: 0.1rem 0.4rem;
	background-color: #eee;
	color: #e3474c;
	font-size: 1rem;
}
.read_more_btn:hover{
	cursor: pointer;
	color: #e3474c;
}
.read_more_btn p{
	font-size: 1.2rem;
}
.article_image_area{
	position: relative;
	display: block;
	width: 100%;
}
.article_img_href{
	position: relative;
	display: block;
	width: 100%;
}
.article_image{
	width: 100%;
}

/*page4*/
.page4{
	font-size: 0;
	padding: 10rem 0 10rem 0;
	background-color: #fff;
	border-bottom: 1px solid #d3d5d7;
}

/*page5*/
.page5{
	font-size: 0;
	padding: 10rem 0 10rem 0;
	background-color: #fff;
	border-bottom: 1px solid #d3d5d7;
}

/*page5*/
.page6{
	font-size: 0;
	padding: 10rem 0 10rem 0;
	background-color: #fff;
}
.subscription_banner_href{
	position: relative;
	display: block;
	width: 100%;
}
.subscription_banner{
	position: relative;
	display: block;
	width: 100%;
}

/*page8*/
.page8{
	font-size: 0;
	background-color: #fff;
	padding: 10rem 0 10rem 0;
}
.page8_piece{
	position: absolute;
	display: block;
	width: 8%;
	bottom: 2%;
	left: -2%;
}
/*swiper*/
.swiper {
	width: 100%;
	height: 100%;
	padding-bottom: 2%;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-weight: bold;
}
.swiper-button-prev{
	left: -10%;
}
.swiper-button-next{
	right: -10%;
}
.swiper-pagination-bullets.swiper-pagination-horizontal{
	bottom: -10%;
}
.swiper-pagination-bullet-active{
	background-color: #ffd42a;
}
.swiper_img_box{
	position: relative;
	display: block;
	width: 100%;
}
.swiper_title_area{
	position: absolute;
	display: block;
	width: 100%;
	min-height: 5rem;
	z-index: 2;
	bottom: 0;
	padding: 0.5rem 1rem;
}
.swiper_title_area p{
	position: relative;
	display: block;
	z-index: 2;
	color: #fff;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: justify;
}
.swiper_title_area_bg{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background-color: #000;
	opacity: .7;
}
.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page8_slider_area{
	position: relative;
	display: block;
	width: 80%;
	margin: 0 auto;
}
.page8_slider_area .item_box{
	text-decoration: none;
	padding-bottom: 7%;
}
.page8_slider_area .item_box:hover > p{
	color: #383838;
}
.page8_slider_area .item_box > img{
	margin-bottom: 5%;
}
.page8_slider_area .item_box > p{
	font-family: 'Noto Sans TC', sans-serif;
	padding: 0 0;
	text-align: justify;
	font-size: 1.1rem;
	color: rgb(0, 0, 0);
}
.page8_learn_more_btn{
	position: absolute;
	display: block;
	z-index: 2;
	background-color: #6ab9b1;
	bottom: -5%;
	right: 0;
	padding: 1% 4%;
}
.page8_learn_more_btn p{
	font-family: 'Noto Sans TC', sans-serif;
	color: #fff;
	font-size: 1.1rem;
}


/*footer*/
footer{
	position: relative;
	display: block;
	width: 100%;
	background-color: #272727;
	padding: 2rem 0 2rem 0;
	text-align: center;
}
.footer_line{
	border-bottom: 1px solid #fff;
	width: 40rem;
	margin: 1.5rem auto 1.5rem auto;
}
footer p{
	font-family: 'Noto Sans TC', sans-serif;
	color: #fff;
	font-size: 1rem;
	margin-bottom: 0.5rem;
}
footer p:last-child{
	margin-bottom: 0%;
}


@media screen and (max-width:2250px){
	
}
@media screen and (max-width:2150px){
	
}
@media screen and (max-width:1920px){
	html{
		font-size: 1rem;
	}
}
@media screen and (max-width:1770px){
	html{
		font-size: 0.9rem;
	}
}
@media screen and (max-width:1600px){
	html{
		font-size: 0.8rem;
	}
}
@media screen and (max-width:1460px){
	html{
		font-size: 0.7rem;
	}
}
@media screen and (max-width:1280px){
	html{
		font-size: 0.6rem;
	}
}
@media screen and (min-width:1025px){
	
}
@media screen and (max-width:1024px){
	html{
		font-size: 1rem;
	}

	.header_social_area{
		display: none;
	}

	.nav_bar{
		height: 70px;
	}
	.header_bg{
		opacity: 1;
		background-color: #fff;
	}

	/*fiexd area*/
	.apply_icon{
		width: 3rem;
	}
	.file_icon{
		width: 2rem;
	}

	/*page_main_area*/
	.page_main_bg{
		position: absolute;
		display: block;
		top:50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: auto;
		height: 100%;
		content: url("../img/mb/page1_bg_1024.png");
	}

	/*page1*/
	.page1{
		height: 130vw;
	}
	.page1_piece{
		display: block;
	}
	.page1_piece2{
		display: block;
	}
	.main_text{
		width: 95%;
		height: 42%;
	}
	.main_text svg{
		margin: 11% auto 0 auto;
		transform: scale(0.9,0.9);
	}
	.main_text2{
		width: 95%;
		height: 42%;
		margin: 15% auto 0 auto;

	}
	.page1_tittle{
		width: 100%;
	}
	.logo {
		width: 18%;
		height: 59%;
		margin-left: 1%;
	}
	.logo1{
		width: 6rem;
		z-index: 3;
		margin-left: 4rem;
	}
	.logo2{
		width: 10rem;
		z-index: 3;
		margin-left: 11rem;
	}
	.sandwich_box{
		display: block;
		top: 0rem;
		width: 3rem;
		height: 3rem;
	}
	.menu_close_box{
		display: block;
	}
	.menu_list{
		position: fixed;
		display: block;
		z-index: 10;
		top: 0;
		left: -200%;
		width: 100%;
		height: 100%;
		background-color: rgb(255, 255, 255);
		padding-top: 8%;
		padding-left: 0;
		transition: .3s;
	}
	.menu_list_pc{
		display: none;
	}
	.menu_list_mb{
		display: block;
	}
	.menu_list li{
		display: block;
		height: 10%;
		width: 100%;
		border-bottom: 1px solid #f3a0a3;
		margin: 0;
	}
	.menu_list li:nth-child(3), .menu_list li:nth-child(4){
		width: 100%;
	}
	.menu_list li:last-child{
		border-bottom: 0;
	}
	.menu_list li p{
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 1.5rem;
		color: #e3474c;
		display: inline-block;
		vertical-align: middle;
	}

	.main_text {
		margin: 19% auto auto auto;
	}
	.main_text > svg{
		margin: 2% auto 0 auto;
		transform: scale(2.5,2.5);
	}
	.page1_main_box{
		padding-bottom: 131.3%;
		width: 100%;
		height: 100%;
		/* transform: scale(1,1) rotate(90deg);
		-webkit-animation: page1_bg_ni 15s forwards linear;
		-moz-animation: page1_bg_ni 15s forwards linear;
		-ms-animation: page1_bg_ni 15s forwards linear;
		animation: page1_bg_ni 15s forwards linear; */
	}
	@-webkit-keyframes page1_bg_ni{
		0%{
			transform: scale(1,1);
		}
		100%{
			transform: scale(1.2,1.2);
		}
	}
	@-moz-keyframes page1_bg_ni{
		0%{
			transform: scale(1,1);
		}
		100%{
			transform: scale(1.2,1.2);
		}
	}
	@-o-keyframes page1_bg_ni{
		0%{
			transform: scale(1,1);
		}
		100%{
			transform: scale(1.2,1.2);
		}
	}
	@-ms-keyframes page1_bg_ni{
		0%{
			transform: scale(1,1);
		}
		100%{
			transform: scale(1.2,1.2);
		}
	}
	@keyframes page1_bg_ni{
		0%{
			transform: scale(1,1);
		}
		100%{
			transform: scale(1.2,1.2);
		}
	}
	
	/*page2*/
	.page2 {
		padding: 6rem 2rem 6rem 2rem;
	}
	.page_title{
		font-size: 2.3rem;
	}
	.page2_text_area{
		font-size: 1.6rem;
	}
	.page2_text_area_pc{
		display: none;
	}
	.page2_text_area_mb{
		display: block;
	}
	

	/*page3*/
	.article_tittle_area h1{
		font-size: 1.8rem;
	}
	.article_describe_area p{
		font-size: 1.6rem;
	}

	/*page4*/
	

	/*page5*/
	
	/*page6*/
	

	/*page8*/
	.swiper {
		padding-bottom: 6%;
	}
	.swiper-button-prev{
		left: -10%;
	}
	.swiper-button-next{
		right: -10%;
	}
	.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
		width: 4%;
		height: 0;
		padding-bottom: 4%;
	}
	.swiper-pagination-bullet-active{
		width: 4%;
		height: 0;
		padding-bottom: 4%;
	}

}
@media screen and (max-width:991px){
	html{
		font-size: 0.9rem;
	}
}
@media screen and (max-width:767px){
	html{
		font-size: 0.9rem;
	}

	.nav_bar{
		height: 55px;
	}

	/*page1*/
	.page1{
		height: 150vw;
	}
	.sandwich_box{
		top: 0rem;
	}

	/*page_main_area*/
	.page_main_bg{
		content: url("../img/mb/page1_bg_768.png");
	}

	/*page2*/
	

	/*page4*/
	

	/*page6*/
	

	/*page7*/
	
	/*page8*/
	
	.swiper_title_area p{
		font-size: 1.8rem;
	}
	.page8_slider_area .item_box > p{
		font-size: 1.8rem;
	}

	/*page9*/
	

	/*page10*/
	

	/*page12*/
	
}
@media screen and (max-width:630px){
	html{
		font-size: 0.8rem;
	}
	.sandwich_box{
		top: 0.5rem;
	}
}
@media screen and (max-width:575px){
	html{
		font-size: 0.6rem;
	}
	.sandwich_box{
		top: 1rem;
	}
}
@media screen and (max-width:375px){
	html{
		font-size: 0.5rem;
	}
}
@media screen and (max-width:360px){
	html{
		font-size: 0.4rem;
	}
}
@media screen and (max-width:320px){
	html{
		font-size: 0.4rem;
	}
}
@media screen and (orientation: landscape) and (max-width:1024px) {
	/* body{
		min-height: 95em;
	} */
}
@media screen and (orientation: landscape) and (max-width:980px) {
	/* body{
		min-height: 95em;
	} */
}
@media screen and (orientation: landscape) and (max-width:846px) {/*阿頡*/
	/* html{
	    font-size: 1.3rem;
	} */
}
@media screen and (orientation: landscape) and (max-width:812px) {
	/* body{
		min-height: 75em;
	} */
}
@media screen and (orientation: landscape) and (max-width:720px) {
	/* body{
		min-height: 65em;
	} */
}
@media screen and (orientation: landscape) and (max-width:640px) {
	/* body{
		min-height: 69em;
	} */
}
@media screen and (orientation: landscape) and (max-width:620px) {
	/* body{
		min-height: 69em;
	} */
}
@media screen and (orientation: landscape) and (max-width:375px) {
	/* body{
		min-height: 69em;
	} */
}