@charset "utf-8";

main {
	position: relative;
}

#topic{
	position: relative;
}

#topic .topic_btn{
	position: absolute;
	bottom: 3%;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: 60%;
	animation: scaleFadeBlink 1.2s infinite ease-in-out;
}

@keyframes scaleFadeBlink {
	0%, 100% {
		transform: translateX(-50%) scale(1);
		opacity: 1;
	}
	50% {
		transform: translateX(-50%) scale(1.1);
		opacity: 0.6;
	}
}



#bad{
	position: relative;
	background-image: url("../images/bg_bad.jpg");
	background-size: cover;
	background-position: 0% 0%;
	padding: 5% 0;
}

#bad h1{
	position: relative;
	font-size: 3rem;
	text-align: center;
	color: #fff;
	padding: 2.5% 0;
}

#bad .bad_slider{
	width: 80%;
	margin: 0 auto;
}

#bad .bad_slider img{
	width: 90%;
	margin: 0 auto;
}

#ad{
	background: #f1e7de;
	padding: 8% 0;
}

#ad img{
	width: 80%;
	margin: 0 auto;
}

#reason{
	position: relative;
	background: #cc8394;
	padding: 5% 0 0;
}

#reason .hand{
	position: absolute;
	top: 0;
	left: 10%;
	width: 13%;
	height: auto;
}

#reason h1{
	position: relative;
	font-size: 3rem;
	text-align: center;
	color: #fff;
	padding: 2.5% 0;
}

#reason .cont{
	position: relative;
	display: flex;
	align-items: center;
	width: 80%;
	margin: 2.5% auto 0;
}

#reason .cont .txt{
	width: 45%;
	padding: 0 5% 0 0;
}

#reason .cont .txt p{
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 3px;
	color: #fff;
	margin: 0 0 7.5% 0;
}

#reason .cont .txt img{
	height: auto;
}

#reason .cont video{
	width: 50%;
}


#star .star_btn {
    position: absolute;
    bottom: 12%;
    left: 17%;
    width: 30%;
    height: auto;
}

#type{
	position: relative;
	background-image: url("../images/bg_type.png");
	background-position: 0% 0%;
	background-size: cover;
	height: auto;
	margin: -16% 0 0;
}

#type .type_block{
	margin: 0% 0 0 0;
}

#type .type_block h1{
	position: relative;
	font-size: 3rem;
	text-align: center;
	color: #fff;
	padding: 18% 0 0;
}

#type .table_pic {
    position: relative;
	display: flex;
	width: 80%;
	margin: 5% auto 2%;
	border-radius: 30px;
	text-align:center;
}

#type .table_pic li{
    padding: 0 2%;
}

#type .table {
    position: relative;
	display: block;
	width: 80%;
	margin: 0 auto 5%;
	border-radius: 30px;
	text-align:center;
}

#type .table li{
	display: flex;
	align-items: center;
	width: 100%;
}	

#type .table li div{
	width: 20%;
	height: 50px;
	border: 2px solid transparent;
	display: flex;
	background-color: #f7f7f7;
	padding: 1%;
}

#type .table li div.gray{
	width: 20%;
	height: 50px;
	border: 2px solid transparent;
	display: flex;
	background-color: #eceaeb;
	padding: 1%;
}

#type .table li.short div{
	width: 20%;
	height: 70px;
	border: 2px solid transparent;
	display: flex;
	padding: 1%;
}

#type .table li.short:last-child div{
	border-bottom: 2px solid transparent;
}


#type .table li:first-child div{
	height: auto;
	padding: 20px 0;
	justify-content: center;
	color: #fff;
	background-color: #cc8394;
	border-right: 3px solid #fff;
}

#type .table li div:first-child{
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: #cc8394;
	border-bottom: 1px solid #fff;
}

#type .table li div:last-child{
	border-right: 3px solid transparent;
}

#type .table li:first-child div p,
#type .table li div:first-child p{
	color: #fff;
}


#type .table li div p{
	color: #000;
	font-size: 1.15rem;
}

#type .table li div p.txt{
	text-align: center;
}

#type h2{
	position: relative;
	font-size: 2rem;
	text-align: center;
	color: #fff;
	padding: 0 0 3% 0;
}

#type .btn{
	position: relative;
	display: block;
	width: 30%;
	margin: 0 auto;
}

.mode_block h1{
	position: relative;
	font-size: 3rem;
	text-align: center;
	color: #fff;
	padding: 5% 0 2.5%;
}


.mode_block .mode_table {
    position: relative;
	display: block;
	width: 70%;
	margin: 0 auto;
	padding: 0 0 10% 0;
	border-radius: 30px;
	text-align:center;
}

.mode_block .mode_table li{
	display: flex;
	align-items: center;
	width: 100%;
}

.mode_block .mode_table li.pic{
	background-color: #eceaeb;
}

.mode_block .mode_table li.pic img{
	height: 175px;
	padding: 1%;
}

.mode_block .mode_table li div{
	width: 25%;
	border: 2px solid #daafb8;
	display: flex;
	background-color: #f7f7f7;
	padding: 1%;
}

.mode_block .mode_table li.pic div{
	padding: 0%;
}

.mode_block .mode_table li div.gray{
	width: 25%;
	border: 2px solid #daafb8;
	display: flex;
	background-color: #eceaeb;
	padding: 1%;
}

.mode_block .mode_table li.short div{
	width: 25%;
	height: 70px;
	border: 2px solid #daafb8;
	display: flex;
	padding: 1%;
}


.mode_block .mode_table li:first-child div{
	height: 55px;
	padding: 20px 0;
	justify-content: center;
	color: #fff;
	background-color: #cc8394;
	border-right: 3px solid #daafb8;
}

.mode_block .mode_table li div:first-child{
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: #cc8394;
	border-bottom: 1px solid #daafb8;
}

.mode_block .mode_table li:first-child div p,
.mode_block .mode_table li div:first-child p{
	color: #fff;
}


.mode_block .mode_table li div p{
	color: #000;
	font-size: 1.15rem;
}

.mode_block .mode_table li div p.txt{
	text-align: center;
}

#vsvs{
	background: #dcaeb9;
}

#vsvs .vsvs_block{
	padding: 10% 0;
}

#vsvs .vsvs_block h1{
	position: relative;
	font-size: 3rem;
	text-align: center;
	color: #fff;
}

#vsvs .table {
    position: relative;
	display: block;
	width: 80%;
	margin: 5% auto;
	border-radius: 30px;
	text-align:center;
}

#vsvs .table li{
	display: flex;
	align-items: center;
	width: 100%;
}	

#vsvs .table li div{
	width: 20%;
	height: 50px;
	border: 2px solid transparent;
	display: flex;
	justify-content: center;
	background-color: #f7f7f7;
	padding: 1%;
}

#vsvs .table li div.gray{
	width: 20%;
	height: 50px;
	border: 2px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eceaeb;
	padding: 1%;
}

#vsvs .table li.short div{
	width: 20%;
	height: 70px;
	border: 2px solid transparent;
	display: flex;
	align-items: center;
	padding: 1%;
}

#vsvs .table li.short:last-child div{
	border-bottom: 2px solid transparent;
}


#vsvs .table li:first-child div{
	height: auto;
	padding: 20px 0;
	justify-content: center;
	color: #fff;
	background-color: #cc8394;
	border-right: 3px solid #dcaeb9;
}

#vsvs .table li div:first-child{
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: #cc8394;
	border-bottom: 1px solid #dcaeb9;
}

#vsvs .table li div:last-child{
	border-right: 3px solid transparent;
}

#vsvs .table li:first-child div p,
#vsvs .table li div:first-child p{
	color: #fff;
}


#vsvs .table li div p{
	color: #000;
	font-size: 1.15rem;
}

#vsvs .table li div p.txt{
	text-align: center;
	align-self: center;
}

#vsvs h2{
	position: relative;
	font-size: 2rem;
	text-align: center;
	color: #fff;
	padding: 0 0 3% 0;
}

#vsvs .btn{
	position: relative;
	display: block;
	width: 30%;
	margin: 0 auto;
}



#feedback{
	position: relative;
	background-image: url("../images/bg_reply.jpg");
	background-repeat: repeat-y;
	background-position: 0% 0%;
	padding: 0 0 5%;
}


#feedback h1{
	position: relative;
	font-size: 3rem;
	text-align: center;
	color: #fff;
	padding: 5% 0 2.5%;
}

.reply{
	position: relative;
	display: block;
	padding: 0 0 5%;
}

.reply .slick-prev{
	left: 6.5%;
	top: 40%;
}

.reply .slick-next{
	right: 6.5%;
	top: 40%;
}

.reply .slick-prev:before,
.reply .slick-next:before{
  content: '';
}

.reply .fa{
	font-size: 28px;
	color: #fff;
}

.reply .re_cont{
	text-align: center;
	margin: 0 0.4%;
}

.reply .slick-dots{
	bottom: 5%;
	left: 0;
}

.reply .slick-dots li button:before{
	font-size: 10px;
	color: #fff;
}

.reply.slick-dotted.slick-slider{
	margin: 0 0 0;
}

#baf{
	position: relative;
	background-image: url("../images/bg_reply.jpg");
	background-repeat: repeat-y;
	background-position: 0% 0%;
}


#baf .ttl{
	position: relative;
	width: 80%;
	margin: 0 auto;
}

#baf .ttl h1{
	font-size: 3.5rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	color: #fff;
	margin: 0 auto 1.5%;
}

#baf .ttl h2{
	font-size: 3rem;
	text-align: center;
	line-height: 1.5;
	color: #fff;
}

#baf .sample {
    width: 80%;
	margin: 5% auto 0;
	padding: 0 0 5% 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#baf .sample li{
    width: 46%;
	margin: 0 auto 3.5%;
}

#baf .sample li .before-after-container {
	position: relative;
	width: 100%;
	height: 23.5vw;
	user-select: none; 
	overflow: hidden;
}

#baf .sample li .before-image, 
#baf .sample li .after-image {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#baf .sample li .after-image {
	clip-path: inset(0 0% 0 50%); /* 初始顯示一半圖片 */
}

#baf .sample li .slider {
	position: absolute;
	top: 0;
	left: 50%; /* 初始位置為中間 */
	width: 2px;
	height: 100%;
	background-color: #fff; /* 滑桿顏色 */
	cursor: ew-resize;
}

#baf .sample li .handle {
	position: absolute;
	top: 50%;
	left: 50%; /* 偏移量讓 handle 居中 */
	width: 40px;
	height: 40px;
	background-color: #fff; /* 圓形把手 */
	border-radius: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

#baf .sample li .handle i{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

#baf .sample li p{
	font-size: .75rem;
	line-height: 2;
	margin: 3% 0;
	color: #fff;
}

#approve{
	position: relative;
	background: #a75a6e;
	padding: 5% 0 8%;
}

#approve h1{
	position: relative;
	font-size: 3rem;
	text-align: center;
	color: #fff;
	padding: 0 0 2.5%;
}

#approve .approve_slider{
	width: 80%;
	margin: 0 auto;
}


#approve .approve_slider img{
	width: 90%;
	margin: 0 auto;
}



#qa_list{
	position: relative;
	background-image: url("../images/bg_qa.jpg");
	background-position: 0% 0%;
	background-size: cover;
	height: auto;
	padding:0 0 5% 0;
}

#qa_list .qa_block{
	width: 80%;
	margin: 0 auto;
	padding: 5% 0%;
}

#qa_list .qa_block ul{
	width: 96%;
	margin: 0 2%;
}
  
#qa_list .qa_block ul li{
	padding: 1.5% 3%;
	width: 94%;
	margin: 0 auto 2%;
	background: #317671;
	transition: all 0.5s;
	border-radius: 10px;
}

#qa_list .qa_block ul li:nth-child(even),
#qa_list .qa_block ul:last-child li:nth-child(odd){
	background: #bb818f;
}

#qa_list .qa_block ul:last-child li:nth-child(even){
	background: #dcaeb9;
}

#qa_list .qa_block ul li .qu{
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #2a668f;
}


#qa_list .qa_block ul li .qu p{
	color: #fff;
	line-height: 1.5;
	font-size: 1.15rem;
    letter-spacing: 3px;
}

#qa_list .qa_block ul li .qu p.arrow{
	color: #fff;
	cursor: pointer;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1;
	transform: rotate(0deg);
	transition: all 0.5s;
}

#qa_list .qa_block ul li .ans{
	padding: 2% 0;
	font-size: 1rem;
	display: none;
	opacity: .8;
}

#qa_list .qa_block ul li .ans p{
	color: #fff;
	line-height: 1.5;
	font-size: 1.05rem;
	padding: 0;
}

#qa_list .qa_block ul li.bg-brown,
#qa_list .qa_block ul:last-child li.bg-brown{
	background: #995868;
}

#qa_list .qa_block ul li.bg-brown .qu p{
	color: #fff;
}

#qa_list .qa_block ul li.bg-brown .qu p.arrow{
	transform: rotate(90deg);
	transition: all 0.5s;
}

#qa_list h2{
	position: relative;
	font-size: 2rem;
	line-height: 1.5;
	text-align: center;
	color: #908e8f;
	padding: 0 0 2.5%;
}


#qa_list .btn{
	position: relative;
	display: block;
	width: 30%;
	margin: 0 auto;
}














/*------------------------------------------
 *             tablet 、 Mobile
 *------------------------------------------*/


@media screen and (max-width:1200px) {

    main {
        max-width: none;
        width: 100%;
    } 
}


@media screen and (max-width:850px) {

	#topic .topic_btn {
		bottom: 6%;
		width: 70%;
	}

	#bad{
		background-image: url("../images/bg_bad_sp.jpg");
		padding: 15% 0;
	}

	#bad h1 {
		font-size: 4vw;
	}

	#bad .bad_slider .slick-prev:before, 
	#bad .bad_slider .slick-next:before {
		content: '';
	}

	#bad .bad_slider .fa {
		font-size: 28px;
		color: #fff;
	}

	#ad {
		background: #bea085;
		padding: 0;
	}

	#ad img {
		width: 100%;
		margin: 0 auto;
	}

	#reason .hand {
		width: 20%;
	}

	#reason h1 {
		font-size: 5vw;
	}

	#reason .cont{
		display: block;
	}

	#reason .cont .txt {
		width: 90%;
		padding: 0 5% 10%;
	}

	#reason .cont .txt p{
		line-height: 2;
	}

	#reason .cont video {
		width: 100%;
	}

	#star .star_btn {
		bottom: 20%;
		left: 50%;
		transform: translateX(-50%);
		width: 60%;
	}

	#type {
		position: relative;
		background-image: url(../images/bg_type.png);
		background-position: 0% 0%;
		background-size: cover;
		height: auto;
		margin: -39% 0 0;
	}

	#type .type_block h1 {
		position: relative;
		font-size: 6vw;
		text-align: center;
		color: #fff;
		padding: 38% 0 0;
	}

	#type .table li:first-child div {
		padding: 10px 0;
		border-right: 1px solid #fff;
	}

	#type .table li div p {
        font-size: 2vw;
    }

	#type .table li div,
	#type .table li.short div,
	#type .table li div.gray{
		height: 95px;
	}

	#type h2 {
		font-size: 5vw;
		padding: 0 0 3% 0;
	}

	#type .btn {
		width: 55%;
	}

	.mode_block h1 {
		font-size: 5vw;
		padding: 5% 0 2.5%;
	}

	.mode_block .mode_table {
		width: 90%;
	}
	

	.mode_block .mode_table li.pic img {
		height: 100%;
		padding: 0%;
	}

	.mode_block .mode_table li div p.txt,
	.mode_block .mode_table li div p {
		font-size: 2.5vw;
		text-align: left;
	}
	

	.mode_block .mode_table li:first-child div {
		border-right: 1px solid #daafb8;
	}

	.mode_block .mode_table li div,
	.mode_block .mode_table li div:first-child,
	.mode_block .mode_table li.short div{
		border: 1px solid #daafb8;
	}

	#vsvs .table li{
		border: 1px solid #daafb8;
	}

	#vsvs .table li div p {
		font-size: 2vw;
	}

	#vsvs .table li div,
	#vsvs .table li.short div,
	#vsvs .table li div.gray{
		height: 70px;
        border-right: 2px solid #daafb8;
		padding: 1%;
	}

	#vsvs .table li div:last-child {
		border-right: none;
	}

	#vsvs h2 {
		font-size: 3.5vw;
	}

	#vsvs .btn {
		width: 55%;
	}

	#baf .sample {
		width: 90%;
		display: block;
	}

	#baf .sample li {
		width: 100%;
		margin: 0 auto 10%;
	}

	#baf .sample li .before-after-container {
		height: 51vw;
	}

	#baf .sample li p {
		font-size: 2.5vw;
	}

	#approve h1 {
		font-size: 5vw;
		padding: 0 0 5%;
	}

	#approve .approve_slider .slick-prev:before, 
	#approve .approve_slider .slick-next:before {
		content: '';
	}

	#approve .approve_slider .fa {
		font-size: 28px;
		color: #fff;
	}

	#approve {
		position: relative;
		background: #a75a6e;
		padding: 8% 0 12%;
	}

	#feedback h1 {
		font-size: 5vw;
		padding: 10% 0 2.5%;
	}

	#baf .ttl h1,
	#baf .ttl h2{
		font-size: 5vw;
	}

	.approve_slider .slick-dots {
		bottom: -15%;
		left: 0;
	}

	.reply .slick-dots {
		bottom: 0;
		left: 0;
	}

	#qa_list {
		padding:5% 0;
	}

	#qa_list .qa_block {
		width: 90%;
		margin: 0 auto;
		padding: 5% 0 0;
	}

	#qa_list .qa_block ul li .qu p,
	#qa_list .qa_block ul li .ans p{
		font-size: 3vw;
	}

	#qa_list .qa_block ul li {
		margin: 0 auto 5%;
	}

	#qa_list h2 {
		font-size: 3.5vw;
		padding: 5% 0;
	}

	#qa_list .btn {
		width: 55%;
	}
    
}
















@media screen and (max-width:500px) {

	#reason .cont .txt p{
		font-size: 4vw;
	}

	#star .star_btn {
        bottom: 23%;
    }

	#type {
        margin: -45% 0 0;
    }

	#type .table li div, 
	#type .table li.short div, 
	#type .table li div.gray {
        height: 50px;
    }

	.mode_block h1 {
        font-size: 5vw;
        padding: 10% 0 2.5%;
    }

	.mode_block .mode_table li:first-child div {
		height: 28px;
	}

	.mode_block .mode_table li.short div {
        height: 30px;
    }

	.mode_block .mode_table li div p.txt {
		text-align: left;
	}

	#vsvs .vsvs_block h1 {
		font-size: 5.5vw;
	}

	#vsvs .table {
		width: 90%;
		margin: 5% auto;
	}

	#vsvs .table li div p {
        font-size: 1.95vw;
    }

	#vsvs .table li:first-child div {
		padding: 3% 0;
		border-right: 1px solid #dcaeb9;
	}


	#vsvs .table li div, 
	#vsvs .table li.short div, 
	#vsvs .table li div.gray {
        height: 30px;
        padding: 1%;
		border: none;
		border-right: 1px solid #daafb8;
    }

	#vsvs .table li div:first-child {
		border-right: none;
		border-bottom: none;
	}

	#vsvs h2 {
        font-size: 3.5vw;
		width: 90%;
		margin: 0 auto;
    }

	.reply .slick-prev{
		left: 2.5%;
		top: 50%;
	}

	.reply .slick-next {
		right: 2.5%;
		top: 50%;
	}

	

}