@charset "utf-8";


#topic {
	position: relative;
}

#trouble {
	position: relative;
	display: block;
	background-image: url("../images/trouble_bg_pc.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 1;
	padding: 5% 0;
}

#trouble h1 {
	font-size: 3.5rem;
	font-weight: 600;
	text-align: center;
	color: #eacd9b;
}

#trouble #trouble_process {
	position: relative;
	width: 80%;
	margin: 0 auto;
}


#trouble .trouble_slider {
	position: relative;
	padding: 5% 0;
	margin: 0;
}

#trouble .trouble_slider .slick-prev {
	top: 36%;
	left: -3%;
	z-index: 9;
}

#trouble .trouble_slider .slick-next {
	top: 36%;
	right: -3%;
	z-index: 9;
}

#trouble .trouble_slider .slick-prev:before,
#trouble .trouble_slider .slick-next:before {
	content: '';
}

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

#trouble .trouble_slider div img {
	width: 75%;
	margin: 0 auto;
}

#trouble .trouble_slider .slick-dots {
	bottom: 0%;
}

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

#trouble .trouble_slider .slick-dotted .slick-slider {
	margin: 0 0 0;
}

#trouble h2 {
	font-size: 2rem;
	text-align: center;
	color: #fff;
	line-height: 2;
	padding: 2% 0 0;
}


#house {
	position: relative;
	display: block;
	background-image: url("../images/house_bg.jpg");
	background-size: cover;
	background-repeat: repeat-y;
	z-index: 1;
	padding: 8% 0;
}

#house h1 {
	font-size: 3.5rem;
	font-weight: 600;
	text-align: center;
	color: #4d5366;
	line-height: 1.5;
}

#house img.main {
	width: 50%;
	margin: 5% auto 0%;
}

#house p {
	font-size: 1.5rem;
	text-align: center;
	color: #000;
	line-height: 2;
	padding: 3% 0;
}

#house .btn a{
	display: block;
	width: 30%;
	margin: 0 auto;
}

#vsvs {
	position: relative;
	background: #28272c;
	padding: 5% 0;
}

#vsvs h1 {
	font-size: 3.5rem;
	font-weight: 600;
	text-align: center;
	color: #e9cc9b;
	line-height: 1.5;
}

#vsvs #vsvs_process {
	position: relative;
	width: 80%;
	margin: 0 auto;
}


#vsvs .vsvs_slider {
	position: relative;
	padding: 5% 0;
	margin: 0;
}

#vsvs .vsvs_slider div h2 {
	font-size: 2rem;
	text-align: center;
	color: #e6c895;
	padding: 0 0 5%;
}

#vsvs .vsvs_slider div img {
	width: 75%;
	margin: 0 auto;
}

#vsvs .vsvs_slider div p {
	font-size: 1.5rem;
	text-align: center;
	color: #fff;
	line-height: 2;
	padding: 3% 0;
}

#vsvs .vsvs_slider div p span{
	color: #ff8180;
}

#vsvs h3 {
	font-size: 2rem;
	text-align: center;
	color: #fff;
	line-height: 2;
}

#type {
	position: relative;
	display: block;
	background-image: url("../images/type_bg.jpg");
	background-size: cover;
	background-repeat: repeat-y;
	z-index: 1;
	padding: 8% 0;
}

#type .five{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 60%;
	margin: 2% auto;
	padding: 1% 10% 1.5%;
	background: #1b2445;
	border-radius: 120px;
}

#type .five:nth-child(even){
	background: #3b446b;
}

#type .five .txt{
	display: block;
	width: 45%;
	margin: 1% 0;
}

#type .five .txt h1{
	font-size: 2.75rem;
	font-weight: 600;
	text-align: left;
	color: #e9cd9b;
}

#type .five .txt p{
	font-size: 1.35rem;
	text-align: left;
	color: #fff;
	padding: 1% 0;
	line-height: 1.5;
}

#type .five ul{
	display: flex;
	width: 40%;
	justify-content: flex-end;
	align-items: center;
}

#type .five ul li{
	width: 30%;
	margin: 0 auto;
}

#type .five ul li img{
	height: auto;
}

#type .five_slider {
	position: relative;
	padding: 2% 0 0;
	margin: 0;
	width: 40%;
}

#type .five_slider .slick-prev {
	top: 50%;
	left: -10%;
	z-index: 5;
}

#type .five_slider .slick-next {
	top: 50%;
	right: -10%;
	z-index: 5;
}

#type .five_slider .slick-prev:before,
#type .five_slider .slick-next:before {
	content: '';
}

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

#type .five_slider div img {
	width: 90%;
	margin: 0 auto;
}

#type p.last{
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
	color: #3a456b;
	padding: 3% 0 0;
	line-height: 1.5;
}

#different {
	position: relative;
	background: #28272c;
	padding: 5% 0;
}

#different h1 {
	font-size: 3.5rem;
	font-weight: 600;
	text-align: center;
	color: #eacd9b;
	line-height: 1.5;
}

#different h2 {
    font-size: 2rem;
    text-align: center;
    color: #fff;
    line-height: 2;
    padding: 0;
}

#different ul {
    position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 70%;
	margin: 5% auto 0;
}

#different ul li{
    width: 45%;
	margin: 0 0 5%;
}

#different h3{
	font-size: 2rem;
	text-align: center;
	color: #fff;
	line-height: 1.5;
	padding: 0 0 2%;
}

#different .btn a {
    display: block;
    width: 30%;
    margin: 2% auto 0;
}

#pertinent {
	position: relative;
	background: #28272c;
	padding: 5% 0;
}

#pertinent h1 {
	font-size: 3.5rem;
	font-weight: 600;
	text-align: center;
	color: #e9cc9c;
	line-height: 1.5;
}

#pertinent ul {
	position: relative;
	width: 70%;
	margin: 5% auto 0;
}

#pertinent ul li{
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0 0 5% 0;
}

#pertinent ul li img{
	width: 40%;
	margin: 0 2% 0 0;
}

#pertinent ul li .txt{
	margin: 2% 0 0;
}

#pertinent ul li .txt h2{
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: .5px;
    color: #b2bcd8;
}

#pertinent ul li .txt p{
	font-size: 1.35rem;
	color: #fff;
	line-height: 2;
	margin: 2% 0 0 2%;
}

#pertinent h3{
	font-size: 2rem;
	text-align: center;
	color: #fff;
	line-height: 1.75;
	padding: 2% 0;
}

#scale {
	position: relative;
	display: block;
	background-image: url("../images/scale_bg.jpg");
	background-size: cover;
	background-repeat: repeat-y;
	z-index: 1;
	padding: 8% 0;
}

#scale h1 {
	font-size: 3.5rem;
	font-weight: 600;
	text-align: center;
	color: #4c5366;
	line-height: 1.5;
}

#scale .scale_slider {
	position: relative;
	margin: 5% auto;
	width: 60%;
}

#scale .scale_slider div img {
	width: 80%;
	margin: 0 auto;
}

#scale .scale_slider div p {
	font-size: 1.25rem;
	font-weight: 600;
	color: #4c5366;
	line-height: 2;
	margin: 8% 0 0;
	text-align: center;
}

#scale h2{
	font-size: 2rem;
	font-weight: 600;
	line-height: 2;
	text-align: center;
    color: #c73b3c;
}

#parts {
	position: relative;
	background: #dddddd;
	padding: 8% 0;
}

#parts img {
	width: 70%;
	height: auto;
	margin: 0 auto;
}

#reply {
	position: relative;
	background: #28272c;
	padding: 5% 0;
}

#reply .reply_slider {
	position: relative;
	padding: 5% 0;
	margin: 0 auto;
	width: 80%;
}

#reply .reply_slider .slick-prev {
	top: 28%;
	left: -3%;
	z-index: 9;
}

#reply .reply_slider .slick-next {
	top: 28%;
	right: -3%;
	z-index: 9;
}

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

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

#reply .reply_slider div img.pc_cont {
	display: block;
	width: 85%;
	margin: 0 auto;
}

#reply .reply_slider div img.sp_cont {
	display: none;
	width: 75%;
	margin: 0 auto;
}

#reply .reply_slider .slick-dots {
	bottom: 0%;
}

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

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

#reply p{
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 2;
	text-align: center;
    color: #e9cd9b;
}

#track {
	position: relative;
	display: block;
	background-image: url("../images/track_bg.jpg");
	background-size: cover;
	background-repeat: repeat-y;
	z-index: 1;
	padding: 8% 0;
}

#track div {
	position: relative;
	padding: 5% 0;
	margin: 0 auto;
	background: #3b446b;
	width: 75%;
	border-radius: 30px;
}

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


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

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


#qa_list .qa_block ul {
	width: 100%;
}

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

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

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

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


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

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

#qa_list .qa_block ul li .ans{
	padding: 2% 0;
	display: none;
}

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

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

#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 .qa_btn {
	position: relative;
	display: block;
	width: 35%;
	margin: 0% auto;
}


#plan {
	position: relative;
	background: #dddddd;
	padding: 8% 0;
}

#plan img {
	width: 70%;
	height: auto;
	margin: 0 auto;
}












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


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

	#trouble h1,
	#vsvs h1,
	#different h1,
	#pertinent h1,
	#scale h1 {
		font-size: 3rem;
	}

	#trouble .trouble_slider .slick-dots {
		bottom: -5%;
	}

	#trouble h2,
	#vsvs .vsvs_slider div h2,
	#vsvs h3,
	#type p.last,
	#different h2,
	#different h3,
	#pertinent h3,
	#scale h2,
	#reply p {
		font-size: 1.75rem;
	}

	#trouble h2 {
		padding: 4% 0 0;
	}

	#house h1 {
		font-size: 2.75rem;
	}

	#house img.main {
		width: 60%;
	}

	#house p,
	#vsvs .vsvs_slider div p,
	#scale .scale_slider div p {
		font-size: 1.25rem;
	}

	#house p {
		width: 80%;
		margin: 0 auto;
		padding: 3% 0 5%;
	}

	#house .btn a,
	#different .btn a {
		width: 40%;
	}

	#type .five .txt h1 {
		font-size: 2.25rem;
	}

	#type .five .txt p,
	#pertinent ul li .txt p {
		font-size: 1.15rem;
	}

	#type .five ul,
	#type .five_slider {
		width: 45%;
	}

	#different ul,
	#pertinent ul {
		width: 80%;
	}

	#pertinent ul li .txt h2{
		font-size: 1.5rem;
	}

	#scale .scale_slider {
		width: 70%;
	}

	#track div p {
		font-size: 1.25rem;
		width: 80%;
		padding: 3% 0 0;
	}

	#qa_list .qa_block{
		width: 80%;
	}

	#qa_list .qa_block ul li .qu p,
	#qa_list .qa_block ul li .qu p.arrow{
		font-size: 1.25rem;
	}

	#qa_list .qa_block ul li .ans p {
		font-size: 1rem;
	}

	#plan img {
		width: 80%;
	}
}





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

	#trouble h1,
	#house h1,
	#vsvs h1,
	#different h1,
	#pertinent h1,
	#scale h1 {
		font-size: 4.5vw;
	}

	#trouble h2,
	#vsvs .vsvs_slider div h2,
	#vsvs h3,
	#type p.last,
	#different h2,
	#different h3,
	#scale h2,
	#reply p {
		font-size: 3vw;
	}

	#trouble {
		background-image: url(../images/trouble_bg_sp.jpg);
	}

	#trouble h2 {
        padding: 6% 0 0;
    }

	#trouble .trouble_slider .fa {
		font-size: 18px;
		color: #fff;
	}

	#house img.main {
        width: 80%;
    }

	#house p,
	#pertinent h3{
		font-size: 2.5vw;
	}

	#house .btn a,
	#different .btn a {
		width: 50%;
	}

	#vsvs .vsvs_slider .slick-prev:before,
	#vsvs .vsvs_slider .slick-next:before {
		content: '';
	}

	#vsvs .vsvs_slider .fa {
		font-size: 18px;
		color: #fff;
	}

	#vsvs .vsvs_slider .slick-dots {
		bottom: 2%;
	}

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

	#vsvs .vsvs_slider .slick-dotted .slick-slider {
		margin: 0 0 0;
	}

	#type .five{
		display: block;
		width: 70%;
		border-radius: 30px;
		padding: 3% 5% 5%;
		margin: 3% auto;
	}

	#type .five .txt {
		display: flex;
		align-items: center;
		width: 100%;
		margin: 1% 0;
	}

	#type .five .txt h1 {
		font-size: 4vw;
		text-align: center;
		width: 60%;
	}

	#type .five ul,
	#type .five_slider {
		width: 80%;
		margin: 0 auto;
	}

	#type .five:nth-child(5){
		padding: 3% 5% 8%;
	}

	#type .five:nth-child(5) .five_slider div img {
		width: 85%;
	}

	#type .five:nth-child(5) .five_slider .slick-dots {
		position: absolute;
		display: block;
		width: 100%;
		padding: 0;
		margin: 0;
		bottom: -30%;
	}

	#type .five:nth-child(5) .five_slider .slick-dots li {
		width: 20px;
		margin: 0 5px;
	}

	#type .five:nth-child(5) .five_slider .slick-dots li button:before {
		font-size: 10px;
		color: #fff;
	}

	#type .five:nth-child(5) .five_slider .slick-dotted .slick-slider {
		margin: 0 0 0;
	}

	#type .five:nth-child(5) .five_slider .fa {
		font-size: 18px;
	}


	#pertinent .pertinent_slider {
		position: relative;
		width: 80%;
		padding: 5% 0;
		margin: 0 auto;
	}

	#pertinent .pertinent_slider .slick-prev {
		top: 30%;
		left: -3%;
		z-index: 9;
	}

	#pertinent .pertinent_slider .slick-next {
		top: 30%;
		right: -3%;
		z-index: 9;
	}

	#pertinent .pertinent_slider .slick-prev:before,
	#pertinent .pertinent_slider .slick-next:before {
		content: '';
	}

	#pertinent .pertinent_slider .fa {
		font-size: 18px;
		color: #fff;
	}

	#pertinent .pertinent_slider div img {
		width: 80%;
		margin: 0 auto;
	}

	#pertinent .pertinent_slider .slick-dots {
		display: block;
		width: 100%;
		bottom: 0%;
	}

	#pertinent .pertinent_slider .slick-dots li{
		display: inline-block;
		margin: 0 5px;
	}

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

	#pertinent .pertinent_slider .slick-dotted .slick-slider {
		margin: 0 0 0;
	}

	#pertinent h3 {
		width: 80%;
		margin: 0 auto;
		padding: 0;
	}

	#scale {
		padding: 12% 0;
	}

	#scale .scale_slider {
        width: 80%;
		margin: 5% auto 8%;
    }

	#scale .scale_slider .slick-prev {
		top: 30%;
		left: -3%;
		z-index: 9;
	}

	#scale .scale_slider .slick-next {
		top: 30%;
		right: -3%;
		z-index: 9;
	}

	#scale .scale_slider .slick-prev:before,
	#scale .scale_slider .slick-next:before {
		content: '';
	}

	#scale .scale_slider .fa {
		font-size: 18px;
		color: #4d5365;
	}

	#scale .scale_slider div img {
		width: 60%;
		margin: 0 auto;
	}

	#scale .scale_slider .slick-dots {
		bottom: -25%;
	}

	#scale .scale_slider .slick-dots li button:before {
		font-size: 10px;
		color: #4d5365;
	}

	#scale .scale_slider .slick-dotted .slick-slider {
		margin: 0 0 0;
	}

	#scale h2 {
		padding: 6% 0 0;
	}

	#parts img {
		width: 80%;
	}

	#reply {
		padding: 5% 0 8%;
	}

	#reply .reply_slider div img.pc_cont {
		display: none;
	}

	#reply .reply_slider div img.sp_cont {
		display: block;
		width: 85%;
		margin: 0 auto;
	}

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

	#reply .reply_slider .slick-dots {
		bottom: -3%;
	}

	#reply p {
		margin: 8% 0 0;
	}

	#track div {
		width: 85%;
	}

	#track div p {
        width: 90%;
        padding: 3% 0 0;
    }

	#qa_list .qa_block {
        width: 85%;
    }

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

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

}
















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

	#trouble h1, 
	#house h1, 
	#vsvs h1, 
	#different h1, 
	#pertinent h1, 
	#scale h1 {
        font-size: 5.5vw;
    }

	#vsvs .vsvs_slider div h2,
	#different h2{
		font-size: 4.5vw;
	}

	#trouble .trouble_slider .slick-dots {
        bottom: -15%;
    }

	#trouble h2 {
        padding: 10% 0 0;
    }

	#house img.main {
        width: 90%;
    }

	#house p{
        font-size: 3.5vw;
		width: 90%;
    }

	#house .btn a, 
	#different .btn a {
        width: 60%;
    }
 
	#pertinent h3,
	#different h3{
        font-size: 3vw;
    }

	#vsvs .vsvs_slider .slick-dots {
        bottom: -2%;
    }

	#trouble h2,
	#vsvs h3,
	#vsvs .vsvs_slider div p,
	#scale h2,
	#reply p{
		font-size: 3.75vw;
	}

	#vsvs h3{
		margin: 5% 0 0;
	}

	#type .five {
        width: 75%;
        padding: 3% 5% 6%;
        margin: 8% auto;
    }

	#type .five .txt {
        display: block;
    }

	#type .five .txt h1 {
        font-size: 5vw;
        width: 100%;
    }

	#type .five .txt p{
        font-size: 3.5vw;
		margin: 2% 0 4%;
		padding: 0;
    }

	#type .five:nth-child(5) {
        padding: 3% 5% 12%;
    }

	#type .five:nth-child(5) .five_slider .slick-dots {
        bottom: -45%;
    }

	#type p.last{
		font-size: 3.75vw;
		padding: 0;
		line-height: 2;
	}

	#different ul, 
	#pertinent ul {
        width: 90%;
    }

    #scale .scale_slider {
        width: 70%;
    }

	#scale .scale_slider div p{
        font-size: 3vw;
    }

	#track div p {
        font-size: 3vw;
		width: 85%;
    }


}