@charset "utf-8";

main {
	position: relative;
}

#topic{
	position: relative;
	background: #000;
}

#topic ul.pc_cont{
	display: flex;
	width: 70%;
	margin: 0 auto;
}

#topic ul.sp_cont{
	display: none;
}

#topic ul li{
	width: 30%;
	margin: 0 1.5%;
}

#machine{
	position: relative;
	background: #000;
}

#machine .block{
	display: flex;
	width: 80%;
	margin: 0 auto;
	padding: 5% 0 0;
}

#machine .block img{
	width: 30%;
}

#machine .block .cont{
	width: 60%;
	margin: 0 auto;
}

#machine .block .cont ul{
	display: flex;
	margin: 0 auto;
}

#machine .block  .cont ul img{
	width: 30%;
	margin: 0 1.5%;
}

#machine .block .cont p{
	font-size: 1.5rem;
	line-height: 2;
	color: #fff;
	padding: 5% 2% 0;
}


#baf{
	position: relative;
	background: #e8e8e6;
	padding: 10% 0 0;
}


#baf h1{
	font-size: 3rem;
	font-weight: 600;
	font-family: "Noto Serif TC", serif;
	line-height: 1.5;
	text-align: center;
	color: #282828;
	margin: 0 auto 1.5%;
}

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

#baf .sample {
    width: 80%;
	margin: 2% auto 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: 1.05rem;
	line-height: 2;
	margin: 3% 0;
	color: #555;
}

#baf .btn{
	display: block;
	width: 40%;
	margin: 0 auto;
}


#compare{
	position: relative;
	background: #050505;
	z-index: 0;
}

#compare h1{
	width: 60%;
	margin: 0 auto;
}

#compare .cont{
	width: 80%;
	margin: 5% auto;
}

#compare .cont .describe h2{
	color: #fabf1b;
	font-size: 1.75rem;
	padding: 0 0 1%;
}

#compare .cont .describe p{
	font-size: 1.25rem;
	line-height: 2;
	color: #fff;
}

#compare .cont .way h3{
	font-size: 1.25rem;
	color: #fabf1b;
}

#compare .cont .way p{
	font-size: 1.25rem;
	line-height: 2;
	color: #fff;
}

#compare .cont p.red{
	font-size: 1.25rem;
	line-height: 2;
	color: #f00101;
}

#compare #no_sleep.cont .way{
	display: flex;
}

#compare #no_sleep.cont .way img{
	width: 45%;
	margin: 0 0 0 5%;
}

#compare h1.body{
	width: 70%;
	margin: 0 auto 2%;
}

#compare p.body_txt{
	width: 80%;
	margin: 0 auto;
	font-size: 1.25rem;
	line-height: 2;
	color: #fff;
}

#compare .btn{
	display: block;
	width: 40%;
	margin: 0 auto;
	padding: 5% 0 0;
}

#lati{
	position: relative;
	box-shadow: 0px 10px 10px #333;
}


#lati h1{
	position: absolute;
    top: 23%;
    right: 5%;
    width: 50%;
}

#lati .cont{
	position: absolute;
	bottom: 0;
	display: flex;
	align-items: center;
	width: 100%;
}

#lati .cont img{
	width: 28%;
	margin: 0 0 0 15%;
}

#lati .cont ul{
	margin: -2.5% 0 0 5%;
	width: 57%;
}

#lati .cont ul li{
	margin: 0 0 5% 0;
}

#lati .cont ul li h2{
	font-size: 1.5vw;
	color: #fabf1b;
	padding: 0 0 1% 0;
}

#lati .cont ul li p{
	font-size: 1.25vw;
	line-height: 2;
	color: #fff;
	padding: 0 0 0 4%;
}



#customization{
	position: relative;
	background: #e8e8e6;
	padding: 5% 0 0 0;
	z-index: 1;
}

#customization h1{
	font-size: 3rem;
	font-weight: 600;
	font-family: "Noto Serif TC", serif;
	line-height: 1.5;
	text-align: center;
	color: #000;
}

#customization h2{
	font-size: 2rem;
	font-weight: 600;
	font-family: "Noto Serif TC", serif;
	line-height: 1.5;
	text-align: center;
	color: #000;
	margin: 0 auto 1.5%;
}

#customization video{
	display: block;
	width: 50%;
	margin: 5% auto 0;
}


#customization .good_slider{
	width: 80%;
	margin: 5% auto 0;
	padding: 0 0 5% 0;
}

#customization .good_slider div img{
	width: 80%;
	margin: 0 10%;
}

#table{
	position: relative;
	background-image: url("../images/table_bg.jpg");
	background-repeat: no-repeat;
	background-position: 0% 0%;
	padding: 5% 0;
	z-index: 2;
}


#table h1{
	font-size: 3rem;
	font-weight: 600;
	font-family: "Noto Serif TC", serif;
	line-height: 1.5;
	text-align: center;
	color: #000;
}

#table h2{
	font-size: 2rem;
	font-weight: 600;
	font-family: "Noto Serif TC", serif;
	line-height: 1.5;
	text-align: center;
	color: #000;
	margin: 0 auto 3%;
}



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

#table ul li{
	display: flex;
	align-items: center;
	width: 100%;
	background: #000;
}	


#table ul li div{
	width: 40%;
	height: 140px;
	background-color: #f7f7f7;
	text-align: center;
	align-content: space-around;
}

#table ul li.first_line div.ttl,
#table ul li div.ttl{
	width: 20%;
	height: 100px;
	background-color: #000;
	text-align: center;
	align-content: space-around;
}

#table ul li.first_line div.ttl p,
#table ul li div.ttl p{
	color: #fff;
}



#table ul li.first_line div{
	width: 40%;
	height: 100px;
	justify-content: center;
	color: #fff;
	background-color: #000;
}

#table ul li.second_pic div{
	width: 40%;
	height: auto;
	background: transparent;
	justify-content: center;
	color: #fff;
	background-color: #000;
}

#table ul li.second_pic div.ttl{
	width: 20%;
	height: auto;
	text-align: center;
	background-color: #000;
	align-content: space-around;
}


#table ul li.long_txt div{
	height: 210px;
}


#table ul li div p{
	font-size: 1.25rem;
	padding: 10px;
}

#table ul li div.gray{
	background-color: #eceaeb;
}


#distortion{
	background: #f69707;
	padding: 10% 0 15%;
	z-index: 1;
}

#distortion h1{
	font-size: 3rem;
	font-weight: 600;
	font-family: "Noto Serif TC", serif;
	text-align: center;
	color: #fff;
}

#distortion .five{
	width: 70%;
	margin: 3% auto;
}

#distortion h2{
	font-size: 2rem;
	font-weight: 600;
	font-family: "Noto Serif TC", serif;
	line-height: 1.5;
	text-align: center;
	color: #fff;
	margin: 0 auto 3%;
}

.three_bg{
	position: relative;
	z-index: 2;
	margin: -15% 0 0 0;
}


#three{
	position: relative;
	background: #050505;
	padding: 0 0 10%;
}


#three h1{
	width: 60%;
	margin: 0 auto;
}

#three p{
	font-size: 1.5rem;
	width: 70%;
	margin: 0 auto;
	color: #fff;
	line-height: 2;
	padding: 2.5% 0 5%;
}

#three img.three_pic{
	width: 70%;
	margin: 0 auto;
}


#certification{
	position: relative;
	background: #000;
	padding: 0 0 5%;
}


.cer_slider{
	position: relative;
	display: block;
	padding: 5% 0 10%;
	width: 85%;
	margin: 0 auto;
	background: #000;
}

.cer_slider .slick-prev{
	left: -5.5%;
	top: 45%;
}

.cer_slider .slick-next{
	right: -5.5%;
	top: 45%;
}

.cer_slider .slick-dots{
	bottom: 12%;
}

.cer_slider .slick-dots li button:before{
	font-size: 10px;
	color: #fff;
    width: 30px;
    height: 30px;
}


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

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


.cer_slider div{
    text-align: center;
    margin: 0 1%;
}

#certification .btn {
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
    width: 45%;
}


#team{
	position: relative;
}


#team h1 {
	position: absolute;
    left: 52%;
    top: 52%;
    width: 40vw;
}

#team video {
    position: absolute;
    left: 50%;
    bottom: 5%;
	width: 45%;
}

#feedback{
	position: relative;
	background: #d6dfe6;
	padding: 10% 0 5%;
}


#feedback h1{
	font-size: 3rem;
	font-weight: 600;
	font-family: "Noto Serif TC", serif;
	text-align: center;
	color: #000;
}

#feedback h2{
	font-size: 2rem;
	font-weight: 600;
	font-family: "Noto Serif TC", serif;
	line-height: 1.5;
	text-align: center;
	color: #000;
	margin: 0 auto 3%;
}


.reply,
.good_slider{
	position: relative;
	display: block;
	padding: 0 0 5%;
	width: 80%;
	margin: 0 auto;
}

.reply .slick-prev,
.good_slider .slick-prev{
	left: -5.5%;
	top: 40%;
}

.reply .slick-next,
.good_slider .slick-next{
	right: -5.5%;
	top: 40%;
}

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

.reply .fa,
.good_slider .fa,
.cert_slider .fa{
	font-size: 28px;
	color: #000;
}

.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: #000;
}

#baf.baf2{
	background: #d6dfe6;
	padding: 0;
}


#qa_list{
	position: relative;
	background: #000;
}

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

#qa_list .qa_block_sp{
	display: none;
}


#qa_list .qa_block ul{
	width: 46%;
	margin: 0 2%;
}
  
#qa_list .qa_block ul li,
#qa_list .qa_block_sp ul li{
	margin: 0 auto 2.5%;
	padding: 2% 3%;
	width: 94%;
	margin: 0 0 3%;
	background: #fabf1b;
	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: #fabf1b;
}

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

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


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

#qa_list .qa_block ul li .qu p.arrow,
#qa_list .qa_block_sp ul li .qu p.arrow{
	color: #000;
	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,
#qa_list .qa_block_sp ul li .ans{
	padding: 2% 0;
	font-size: 1rem;
	display: none;
	opacity: .8;
}

#qa_list .qa_block ul li .ans p,
#qa_list .qa_block_sp ul li .ans p{
	color: #000;
	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,
#qa_list .qa_block_sp ul li.bg-brown,
#qa_list .qa_block_sp ul:last-child li.bg-brown{
	background: #fabf1b;
}

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

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


















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


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

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

	#machine .block .cont p {
		font-size: 1rem;
	}

	#compare h1 ,
	#three h1{
		width: 70%;
	}

	#compare .cont{
		margin: 5% auto 7.5%;
	}

	#compare .cont .describe h2{
		font-size: 1.5rem;
	}

	#compare .cont .describe p,
	#compare .cont .way p,
	#compare .cont .way h3,
	#compare .cont p.red,
	#compare p.body_txt,
	#three p {
		font-size: 1rem;
	}

	#lati h1 {
		top: 20%;
	}

	#lati .cont ul {
		margin: -2.5% 0 0 2%;
		width: 57%;
	}

	#lati .cont ul li h2{
		font-size: 1.75vw;
	}

	#lati .cont ul li p{
		font-size: 1.5vw;
	}

	#customization h1,
	#table h1,
	#distortion h1,
	#feedback h1,
	#baf h1{
		font-size: 2.5rem;
	}

	#customization h2,
	#table h2,
	#distortion h2,
	#feedback h2{
		font-size: 1.5rem;
	}

	#customization video {
		width: 70%;
	}

	#customization .good_slider {
		margin: 10% auto 0;
	}

	#table ul{
		width: 80%;
	}

	#qa_list .qa_block ul li .qu p, 
	#qa_list .qa_block_sp ul li .qu p,
	#qa_list .qa_block ul li .ans p, 
	#qa_list .qa_block_sp ul li .ans p{
		font-size: 1rem;
		letter-spacing: 1px;
	}

}








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

	#topic{
		background: #000;
		padding: 0 0 5% 0;
	}

	#topic ul.pc_cont{
		display: none;
	}

	#topic ul.sp_cont{
		display: flex;
		width: 70%;
		margin: 0 auto;
	}

	#topic ul.sp_cont li {
		width: 23%;
		margin: 0 5%;
	}

	#topic .btn,
	#baf .btn{
		width: 45%;
		margin: 10% auto 0;
	}
	
	#machine .block {
		display: block;
	}

	#machine .block img {
		width: 50%;
		margin: 0 auto;
	}

	#machine .block .cont {
		width: 100%;
		padding: 5% 0 10%;
	}

	#machine .block .cont p {
        font-size: 2.5vw;
    }


	#baf{
		padding: 10% 0% 2%;
	}

	#customization h1, 
	#table h1, 
	#distortion h1, 
	#feedback h1, 
	#baf h1 {
        font-size: 5.5vw;
    }

	#baf .sample{
		display: block;
	}

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

	#baf .sample li .before-after-container {
		width: 100%;
		height: 50vw;
	}

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

	#compare h1, 
	#three h1 {
        width: 80%;
		padding: 5% 0 0;
    }

	#compare .cont .describe h2,
	#lati .cont ul li h2 {
        font-size: 3vw;
    }

	#compare .cont .describe p, 
	#compare .cont .way p, 
	#compare .cont .way h3, 
	#compare .cont p.red, 
	#compare p.body_txt, 
	#three p {
        font-size: 2.5vw;
    }

	#compare .surgery{
		width: 80%;
		margin: 0 auto;
	}

	#compare h1.body{
		width: 60%;
		padding: 0 0 2.5% 0;
	}

	#lati {
		background: #050505;
		padding: 0 0 5%;
	}

	#lati .yellow{
		padding: 5% 0;
	}

	#lati h1 {
		top: 15%;
		right: 50%;
		transform: translateX(50%);
		width: 80%;
	}

	#lati .cont {
		position: relative;
		display: block;
		margin: 30% 0 0;
	}

	#lati .cont img {
		width: 45%;
		margin: 0 auto;
	}

	#lati .cont ul {
        margin: 5% auto;
        width: 80%;
    }

	#lati .cont ul li p {
		font-size: 2.5vw; 
		padding: 0 0 0 5.5%;
	}

	#customization h2, 
	#table h2, 
	#distortion h2, 
	#feedback h2 {
        font-size: 3vw;
    }


	#table ul{
		width: 80%;
	}

	#table ul li.first_line div {
		padding: 15px 0;
	}

	#table ul li div ,
	#table ul li div.gray{
		height: 150px;
	}

	#table ul li div p {
		font-size: 2.5vw;
	}

	#table ul li.long_txt div {
		height: 210px;
	}

	#distortion .five{
		width: 100%;
		text-align: center;
		overflow: auto;
		margin: 3% auto 10%;
	}

	#distortion .five img{
		width: 120%;
	}

	#distortion .five img.hand{
		position: absolute;
		bottom: 25%;
		left: 50%;
		transform: translateX(-50%);
		width: 15%;
		height: auto;
	}

	#three p {
		padding: 5% 0 7.5%;
	}

	#three img.three_pic{
		width: 80%;
	}

	.cer_slider{
		padding: 10% 0 15%;
	}

	.cer_slider .slick-dots {
		bottom: 9%;
	}

	#certification .btn {
		bottom: 1%;
		width: 50%;
	}

	#team h1 {
		position: absolute;
		left: 45%;
		top: 58%;
		width: 50vw;
	}


	#feedback .ttl {
		width: 80%;
		padding: 5% 0 3%;
	}

	.reply{
		padding: 0% 10% 10%;
		width: 100%;
	}

	.reply .slick-prev {
		left: 3.5%;
	}

	.reply .slick-next {
		right: 3.5%;
	}

	#baf.baf2 {
		padding: 0 0 5%;
	}

	#qa_list .qa_block{
		display: none;
	}

	#qa_list .qa_block_sp{
		display: block;
	}

	#qa_list .qa_block_sp ul{
		width: 80%;
		margin: 0 auto;
		padding: 7.5% 0;
	}

	#qa_list .qa_block_sp ul li {
		border-radius: 20px;
	}

	#qa_list .qa_block_sp ul li:nth-child(even){
		background: #fabf1b;
	}

	#qa_list .qa_block_sp ul li .qu p,
	#qa_list .qa_block_sp ul li .ans p,
	#qa_list .qa_block_sp ul li .qu p.arrow {
		font-size: 2.5vw;
	}

}







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

	#topic .btn, 
	#baf .btn,
	#compare .btn,
	#certification .btn {
        width: 55%;
    }

	#compare .cont .describe h2, 
	#lati .cont ul li h2 {
        font-size: 4vw;
    }

	#machine .block .cont p,
	#compare .cont .describe p, 
	#compare .cont .way p, 
	#compare .cont .way h3, 
	#compare .cont p.red, 
	#compare p.body_txt, 
	#three p ,
	#lati .cont ul li p{
        font-size: 3vw;
    }

	#table ul li div p {
        	font-size: 3vw;
    }

	#table ul li div, 
	#table ul li div.gray {
        height: 120px;
    }

	#table ul li.long_txt div ,
	#table ul li.long_txt div.gray {
        height: 190px;
    }

	.cer_slider .slick-dots {
		bottom: 5%;
	}


}