/* --------- sec_top --------- */
	.sec_top{
		width: 100%;
		height: 298px;
		padding:150px 0 50px;
		box-sizing: border-box;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
/* --------- END sec_top --------- */
/* --------- sec_menu --------- */
	.sec_menu{		
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
	.sec_menu .container{
		width: 1380px;
		height: 100px;
	}
	.sec_menu h3{
		display: inline-block;
		margin-left: -5px;
		font-weight: bold;
		font-size: 1.25em;
		letter-spacing: 7px;
		width: 14.2857%;
		height: 100px;
		line-height: 100px;
		text-align: center;
		cursor: pointer;
		-webkit-transition: all .5s ease;
		   -moz-transition: all .5s ease;
		    -ms-transition: all .5s ease;
		     -o-transition: all .5s ease;
		        transition: all .5s ease;
	}
	.sec_menu h3:first-child{
		/*margin-left: 0;*/
	}
	.sec_menu h3:hover{
		background:rgba(255,255,255,.7);
		color:#646464;
	}
	.sec_menu h3.active{
		background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.7),rgba(255,255,255,.5));
		color:#646464;
	}
/* --------- END sec_menu --------- */
/* --------- sec_content --------- */
	.sec_content .container{
		width: 920px;
		padding:70px 0;
		overflow: hidden;
	}
	.sec_content .page_title_zh{
		font-weight: bold;
	}
	.sec_content .page_title_zh:before,
	.sec_content .page_title_zh:after{
		width: 35%;
	}
	.sec_content .page_title_zh:before{
		left: 0;
	}
	.sec_content .page_title_zh:after{
		right: 0;
	}
	.sec_content p{
		text-align: center;
		margin:20px 0 70px;
		letter-spacing: 3px;
	}
	.compare_img,
	.one_img {
		width: 425px;
		height: 425px;
		display: inline-block;
	}
	.compare_img > img,
	.one_img > img{
		width: 100%;
	}
	.compare_img > img:first-child{
		-webkit-filter: brightness(80%); /* Chrome, Safari, Opera */
    	filter: brightness(80%);
	}
	.twentytwenty-wrapper:nth-last-child(2),
	.one_img:nth-last-child(2){
		position: absolute;
		right: 0;
	}
	.mix{
		/*display: none;*/
	}
	.mix h3{
		display: inline-block;
		width: 50%;
		text-align: center;
		margin:5px 0;
	}
	.mix h3:last-child{
		margin-left: -5px;
	}

	/* ---------- compare plugin ---------- */
		.twentytwenty-wrapper{
			display: inline-block;
			min-height: 280px;
		}
		.twentytwenty-overlay:hover{
			background: rgba(0,0,0,.2);
		}
		.twentytwenty-horizontal .twentytwenty-handle:before, /*線條*/
		.twentytwenty-horizontal .twentytwenty-handle:after{
			display: none;
		}
		.twentytwenty-handle{
			background:white;
		}
		.twentytwenty-left-arrow{
			border-right-color:#646464;
		}
		.twentytwenty-right-arrow {
			border-left-color:#646464;
		}
		.twentytwenty-horizontal .twentytwenty-before-label:before,
		.twentytwenty-horizontal .twentytwenty-after-label:before{
			top:auto;
			bottom:10px;
		}
		.twentytwenty-before-label,
		.twentytwenty-after-label{
			opacity: 1;
		}
		.twentytwenty-before-label:before{
			content:"清潔前";
			font-size: 1.2em;
			letter-spacing: 5px;
			background:transparent;
		}
		.twentytwenty-after-label:before{
			content:"清潔後";
			font-size: 1.2em;
			letter-spacing: 5px;
			background:transparent;
		}
	/* ---------- END compare plugin ---------- */
/* --------- END sec_content --------- */
/* --------- RWD --------- */
	@media only screen and (max-width: 1380px){
		.sec_menu .container{
			width: 100%;
		}
	}
	@media only screen and (max-width: 1250px){
		.container{
			width: 90%;
		}
		.sec_menu h3{
			font-size: 1em;
			/*width: 14.38%;*/
		}
	}
	@media only screen and (max-width: 980px){
		.sec_menu .container{
			height: auto;
		}
		.sec_menu h3{
			width: 100%;
			height: 40px;
			line-height: 40px;
			display: block;
			margin-left: 0;
		}
		.sec_content .container{
			width: 90%;
		}
		.compare_img,
		.one_img {
			width: 330px;
			height: 330px;
		}
		.mix h3{
			width: 330px;
		}
		.mix h3:last-child{
			position: absolute;
			right: 0;
		}
	}
	@media only screen and (max-width: 768px){
		.sec_content .page_title_zh:before, .sec_content .page_title_zh:after{
			width: 30%;
		}
		.twentytwenty-wrapper{
			display: block;
			text-align: center;
		}
		.one_img{
			display: block;
			margin:0 auto;
		}
		.twentytwenty-wrapper:nth-last-child(2),
		.one_img:nth-last-child(2){
			position: relative;
			margin-top: 80px;
		}
		.mix h3{
			width: 100%;
		}
		.mix h3:first-child{
			top:-410px;
		}
		.mix h3:last-child{
			position: relative;
			top:-50px;
			right: 0;
		}
		
	}
	@media only screen and (max-width: 390px){
		.sec_top{
			padding:100px 0 50px;
		}
		.sec_content .page_title_zh:before, .sec_content .page_title_zh:after{
			width: 20%;
		}
		.compare_img,
		.one_img {
			width: 280px;
			height: 280px;
		}
		.mix h3:first-child{
			top:-360px;
		}
	}

/* --------- END RWD --------- */