@charset "utf-8";

/* inner page */
.inner-content{position:relative; margin:166px auto 150px auto; width:100%; max-width:1920px; overflow:hidden;}

.left-blk{float:left; width:20%;}
	.l-menu{float:left; padding:10px; width:100%; min-height:480px; position:relative; overflow:hidden;}

	/* 左側選單-title */
	.l-title{position:relative; padding:6px 0 4px 0; width:100%; font-size:18px; font-weight:bold; color:#fff; text-align:center; background:#000; overflow:hidden;}

	/* Accordion */
	#nav-l{width:100%; margin:0 auto 30px auto; font-size:16px; /*border-bottom:#ccc 1px solid;*/}
	#nav-l > li{}
	#nav-l li a{position:relative; display:block; padding:10px 20px; padding-left:38px; background:#fff; text-decoration:none; color:#333; overflow:hidden; line-height:20px; border-left:#ccc 1px solid; border-right:#ccc 1px solid;}
	
	#nav-l li a{border-bottom:#ccc 1px solid;}
	
	#nav-l > li > a:after{content:'\26AC'; position:absolute; display:inline-block; top:0; bottom:0; left:10px; width:18px; height:18px; line-height:18px; font-size:16px; margin-top:auto; margin-bottom:auto; text-align:center; vertical-align:middle;}

	#nav-l > li > a#sub:after{content:'\002B'; position:absolute; display:inline-block; top:0; bottom:0; left:10px; width:18px; height:18px; line-height:18px; font-size:16px; margin-top:auto; margin-bottom:auto; text-align:center; vertical-align:middle;}		
	#nav-l > li > a:hover{color:#bf0d23;}
	#nav-l > li > a.onit{color:#bf0d23;}
	
	#nav-l li a.active{color:#bf0d23;}
	#nav-l li ul{display:none;}
	#nav-l li ul.onit{display:block;}
	#nav-l li ul li a{position:relative; background:#ededed; border-bottom:none; overflow:hidden; color:#666;}
	#nav-l > li > ul > li > a:hover{color:#bf0d23;}
	#nav-l > li > ul > li > a.onit{color:#bf0d23;}
	
	#nav-l > li > ul > li > a:before{content:'-'; position:absolute; display:inline-block; top:0; bottom:0; left:10px; width:18px; height:18px; line-height:18px; font-size:16px; margin-top:auto; margin-bottom:auto; text-align:center; vertical-align:middle;}


	#nav-l > li > ul > li:nth-last-child(1) > a{border-bottom:#ccc 1px solid;}






.right-blk{float:left; width:80%;}

	.right-content{margin:0 auto; padding:20px 10px; width:100%; text-align:center;}
	
		.r-txt-edit{position:relative; margin:0 auto 80px auto; padding:0 2% 2% 2%; width:100%; overflow:hidden;}
		.r-txt-edit > h1,
		.r-txt-edit > h2{margin:0 auto; padding:20px 0; font-size:32px; color:#000; letter-spacing:2px; font-family:"Arial", sans-serif, 微軟正黑體; font-weight:normal;}
		
		.r-txt-edit > h3,
		.r-txt-edit > h4,
		.r-txt-edit > h5,
		.r-txt-edit > h6{margin:10px auto; color:#3788cd; font-size:20px; text-align:left; font-weight:normal;}
		
		.r-txt-edit > p{margin:0 auto; font-size:16px; color:#666; text-align:left; line-height:200%;}
		.r-txt-edit > img{margin:0 auto;}		
		
			table.c-1 {margin:0 auto; width:100%; font-size:16px; text-align:left;}
			table.c-1 th{color:#666; font-size:14px;}
			table.c-1 td{color:#666;}
			table.c-1 th,
			table.c-1 td{vertical-align:top; padding:10px 8px;}

			table.c-1 .circle{
				display:inline-block;
				margin-right:8px;
				width:10px;
				height:10px;
				border:#999 1px solid;
				border-radius:50%;
				background:#fff;
				vertical-align:middle;
			}

			table.c-2 {margin:0 auto; width:100%; font-size:16px; text-align:left; color:#666;}
			table.c-2 th{font-weight:normal; color:#666;}
			table.c-2 td{color:#666;}
			table.c-2 th,
			table.c-2 td{vertical-align:top; padding:10px 8px;}


			table.c-3 {margin:0 auto; width:100%; font-size:16px; text-align:left;}
			table.c-3 th{color:#666; font-size:14px;}
			table.c-3 td{color:#666;}
			table.c-3 th,
			table.c-3 td{vertical-align:top; padding:6px; border:#C7E1FD 1px solid;}
				.tab-f1{color:#f2891d; font-size:13px;}





		.service-blk{position:relative; margin:0 auto 10px auto; padding:0 1% 20px 1%; width:100%; overflow:hidden; display:flex; flex-wrap:wrap;}
		.service-blk > h2{margin:0 auto 10px auto; padding:20px 0; font-size:32px; color:#000; letter-spacing:2px; font-family:"Arial", sans-serif, 微軟正黑體; font-weight:normal;}


		
		.service-blk .s-item{display:inline-block; margin:0 1% 10px 1%; width:31.3%; padding:6px; border:#fff 1px solid;}
		.service-blk .s-item:hover{background:#ededed;}
		.service-blk .s-item .si-pic{position:relative; height:0; padding-bottom:56.25%; overflow:hidden;}
		.service-blk .s-item .si-pic img{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; max-width:100%; max-height:100%;}
		.service-blk .s-item h2{display:block; padding:8px 0 10px 0; font-weight:bold; color:#000; font-size:18px; letter-spacing:1px; line-height:120%; height:50px; overflow:hidden;}
		.service-blk .s-item:hover h2{color:#bf0d23;}


		.service-blk .s-item-c{display:inline-block; margin:0 1% 10px 1%; width:31.3%; padding:6px; border:#fff 1px solid;}
		.service-blk .s-item-c:hover{background:#ededed;}
		.service-blk .s-item-c .si-pic{position:relative; height:0; padding-bottom:100%; overflow:hidden;}
		.service-blk .s-item-c .si-pic img{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; max-width:100%; max-height:100%;}
		.service-blk .s-item-c h2{display:block; padding:8px 0 10px 0; font-weight:bold; color:#000; font-size:18px; letter-spacing:1px; line-height:120%; height:50px; overflow:hidden;}
		.service-blk .s-item-c:hover h2{color:#bf0d23;}




		
		.service-blk.news .s-item{display:inline-block; margin:0 1% 10px 1%; width:31.3%; padding:6px; border:#fff 1px solid;}
		.service-blk.news .s-item:hover{border:#ccc 1px solid;}
		.service-blk.news .s-item img{margin:0 auto; width:100%;}
		.service-blk.news .s-item .date{display:block; font-size:16px; font-weight:bold; text-align:left; color:#3788cd;}
		.service-blk.news .s-item h2{display:block; padding:8px 0 10px 0; font-weight:normal; color:#666; font-size:16px; letter-spacing:0; line-height:120%; text-align:left; height:48px; overflow:hidden;}

		
		.service-blk .list-item{display:block; margin:0 1% 20px 1%; width:100%; padding:6px; border:#fff 1px solid; background:#ededed;}
		.service-blk .list-item:hover{border:#bf0d23 1px solid;}
		
		.service-blk .list-item .l-pic{position:relative; float:left; width:80px; margin-right:10px; overflow:hidden;}
		.service-blk .list-item .l-pic > img{display:block; max-width:100%; max-height:100%;}
		.service-blk .list-item .r-info{float:left; width:calc(100% - 90px);}
		.service-blk .list-item .r-info .date{display:block; font-size:16px; font-weight:bold; text-align:left; color:#bf0d23;}
		.service-blk .list-item .r-info > h2{padding:8px 0 10px 0; font-weight:normal; color:#666; font-size:17px; letter-spacing:1px; line-height:120%; text-align:left;}



		.service-blk .report-item{display:block; margin:0 1% 20px 1%; width:100%; padding:6px; border:#fff 1px solid; background:#ededed;}
		.service-blk .report-item:hover{border:#666 1px solid;}
		
		.service-blk .report-item .l-pic{position:relative; float:left; width:80px; margin-right:10px; overflow:hidden;}
		.service-blk .report-item .l-pic > img{display:block; max-width:100%; max-height:100%;}
		.service-blk .report-item .r-info{float:left; width:calc(100% - 90px);}
		.service-blk .report-item .r-info .date{display:block; font-size:16px; font-weight:bold; text-align:left; color:#000;}
		.service-blk .report-item .r-info > h2{padding:8px 0 10px 0; font-weight:normal; color:#666; font-size:17px; letter-spacing:1px; line-height:120%; text-align:left;}


		
		.showcase-blk{position:relative; margin:10px auto 30px auto; width:80%; overflow:hidden;}
		
		.video-container{position:relative; height:0; padding-bottom:56.25%; /*padding-bottom:75%;*/ overflow:hidden;}
		.video-container iframe,
		.video-container object,
		.video-container embed{position:absolute; top:0; left:0; width:100%; height:100%;}
		
		video{position:relative; width:100%; height:auto; overflow:hidden;}
		
		
	
		.case-title{display:table; width:100%;}
			.case-logo{display:table-cell; width:200px; vertical-align:middle; text-align:center;}
			.case-logo > img{display:block; max-width:100%; max-height:100%;}
			.case-txt{display:table-cell; width:calc(100% - 200px); vertical-align:middle; text-align:left;}
			.case-txt > h2{display:block; width:100%; font-size:22px;}
			
		.case-compare{display:block; margin:30px auto; width:100%; font-size:0;}
			.case-before{position:relative; display:inline-block; margin:0 1% 0 1%; width:48%; vertical-align:middle;}
			.case-before:after{display:block; position:absolute; bottom:0; left:0; right:0; width:100%; padding:4px 0; background:rgba(0,0,0,0.8); content:'處理前'; font-size:18px; font-weight:bold; color:#fff; overflow:hidden; line-height:28px;}
			.case-before > img{display:block; max-width:100%; max-height:100%;}
			
			.case-after{position:relative; display:inline-block; margin:0 1% 0 1%; width:48%; vertical-align:middle;}
			.case-after:after{display:block; position:absolute; bottom:0; left:0; right:0; width:100%; padding:4px 0; background:rgba(0,0,0,0.8); content:'處理後'; font-size:18px; font-weight:bold; color:#fff; overflow:hidden; line-height:28px;}
			.case-after > img{display:block; max-width:100%; max-height:100%;}



		#reserve-form{position:relative; margin:0 auto; padding:15px 20px; width:90%; overflow:hidden;}
		#reserve-form  h2{margin:20px 0 20px 0; width:100%; color:#4d75aa; font-size:18px /*1.8rem*/; font-weight:bold;}



		#reserve-form1{position:relative; margin:0 auto; padding:15px 20px; width:60%; overflow:hidden;}
		#reserve-form1  h2{margin:20px 0 20px 0; width:100%; color:#4d75aa; font-size:18px /*1.8rem*/; font-weight:bold;}


		
		.contact-blk{position:relative; margin:0 auto 20px auto; padding:15px 20px; width:90%; overflow:hidden;}

			.f-block{position:relative; width:100%; overflow:hidden; font-size:16px /*1.6rem*/; text-align:left;}

				.w-100{width:100%; border:#ccc 1px solid;}
				.b-ccc{border:#ccc 1px solid;}
				.b-b-c{border-bottom:#ededed 1px solid;}
				
							
				.h-colum{float:left; display:block; width:50%; padding:8px 0; line-height:24px;}
				.h-colum .h-type{float:left; padding:0 4px; width:20px; vertical-align:middle; color:#f00;}
				.h-colum .h-type-n{float:left; width:20px; vertical-align:middle;}
				.h-colum .h-title{float:left; width:120px; vertical-align:middle; color:#666;}
				.h-colum .h-field{float:left; padding:0 0 0 0; width:calc(100% - 148px); vertical-align:middle;}

				.f-colum{float:left; display:block; width:100%; padding:8px 0; line-height:24px;}


				.f-colum .c-title{float:left; width:120px; margin-right:8px; vertical-align:middle; line-height:40px; color:#666;}
				.f-colum .c-title > img{display:inline-block; vertical-align:middle; margin-top:-2px; margin-right:10px;}
				.f-colum .c-field{float:left; width:calc(100% - 128px); vertical-align:middle; line-height:40px; color:#666;}
				
				.f-colum .f-type{float:left; width:20px; vertical-align:middle; color:#f00; font-size:18px;}
				.f-colum .f-type-n{float:left; width:20px; vertical-align:middle;}
				.f-colum .f-title{float:left; width:120px; vertical-align:middle; color:#666;}
				.f-colum .f-field{float:left; padding:0 0 0 0; width:calc(100% - 148px); vertical-align:middle;}
				.f-colum .f-field img{vertical-align:middle; height:28px;}
				.f-colum .f-field .f-auth{margin:0 8px 8px 0; border:#ccc 1px solid;}
				.f-colum .f-field a{text-decoration:none;}
				.f-colum .f-field a .swap-t{display:inline-block; margin-left:8px; width:40px; color:#3788cd;}
				.f-colum .f-field .f-auth-pic{}
				

			.confirm-block{position:relative; padding:40px 10px; width:100%; overflow:hidden; font-size:16px /*1.6rem*/; text-align:center;}
			.confirm-block .form-btn{margin:2px 6px; padding:10px 24px; line-height:16px; color:#fff; border:none; background:#bf0d23; cursor:pointer;}
			.confirm-block .form-btn:hover{background:#000;}



				.download-area{position:relative; margin:0 auto 50px auto; padding:10px; width:100%; min-height:100px; overflow:hidden; text-align:left; font-size:0;}
				.download-area .d-title{display:block; width:100%; line-height:80px; color:#3788cd; font-size:18px; letter-spacing:1px; vertical-align:middle;}
				.download-area .d-title img{display:inline-block; vertical-align:middle; margin-right:8px;}
				.download-area .d-item{display:table; margin:0 10px 8px 0; padding:4px 6px 4px 4px; font-size:16px; background:#fff; border:#ccc 1px solid; text-decoration:none; font-weight:bold; box-shadow:#ccc 2px 2px 3px; max-width:280px;}
				.download-area .d-item:hover{box-shadow:#999 2px 2px 3px; border:#999 1px solid;}
				.download-area .d-item img{display:table-cell; margin-right:4px; vertical-align:middle; width:50px;}
				.download-area .d-item p{display:table-cell; width:calc(100% - 54px); color:#3788cd; vertical-align:middle;}



				.c-pager {position:relative; margin:0 auto; padding:10px; width:100%; overflow:hidden; text-align:center;}
				.c-pager .pager-num {display:inline-block; margin:4px; padding:4px 6px; width:32px; line-height:18px; font-size:0.875em; color:#666; text-decoration:none; background:#fff; border:#ccc 1px solid; cursor:pointer;}
				.c-pager .pager-num:hover {color:#fff; background:#666; border:#666 1px solid;}
				.c-pager .pager-num.onit {color:#fff; background:#bf0d23; border:#bf0d23 1px solid;}



				/* 服務流程-表格 */
				.schedule-table{margin:10px auto 30px auto; width:100%; border-collapse:collapse; text-align:center;}
				.schedule-table tr{width:100%;}
				.schedule-table tr td{padding:8px 12px; vertical-align:middle; line-height:28px;}
				.schedule-table tr td strong{font-weight:bold;}
				.schedule-table tr td .txt{display:block; width:100%;}
				.schedule-table tr td .txt .l-txt{display:block; float:left; min-width:20px; color:#666;}
				.schedule-table tr td .txt .r-txt{display:block; float:left; width:calc(100% - 20px); text-align:left; color:#666;}
				.schedule-table tr td .step-txt{display:inline-block; margin:4px; padding:8px 12px; min-width:100px; border-radius:4px; color:#3788cd; background:#e5f1fe;}

				.schedule-table tr td.td-1{width:50%; font-size:16px; color:#3788cd;}
				.schedule-table tr td.td-2{width:50%; font-size:16px;}


				.edit-pic-01{display:block; margin:0 auto 10px; width:100%; height:300px; background:url(../img/about_01.jpg) no-repeat top center; background-size:cover;}



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

}

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

.inner-content{margin:0 auto 30px auto;}

.left-blk{float:none; display:none;}
.right-blk{float:none; width:100%;}

		.r-txt-edit > h2{margin:20px auto; font-size:24px; letter-spacing:1px; line-height:100%;}

		.service-blk .s-item{width:48%; padding:6px;}
		.service-blk .s-item-c{width:48%; padding:6px;}

		.service-blk.news .s-item{width:48%; padding:6px;}

	.h-colum{width:100%;}
	
	.edit-pic-01{height:0; padding-bottom:56.25%;}


	.showcase-blk{margin:10px auto 20px auto; width:100%;}

	
}

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

		.r-txt-edit > table th,
		.r-txt-edit > table td{vertical-align:top; padding:10px 4px;}
		
		.service-blk .s-item{width:98%; padding:6px;}
		.service-blk .s-item-c{width:98%; padding:6px;}
		.service-blk.news .s-item{width:98%; padding:6px;}


		.service-blk .list-item .l-pic{display:none;}
		.service-blk .list-item .r-info {display:block; width:100%;}

		.service-blk .report-item .l-pic{display:none;}
		.service-blk .report-item .r-info {display:block; width:100%;}


		.case-title{display:block; width:100%;}
			.case-logo{display:block; width:200px; text-align:center; margin:10px auto;}
			.case-txt{display:block; width:100%; text-align:left; margin:10px auto;}


			.case-before{display:block; margin:30px 1%; width:98%;}
			
			.case-after{display:block; margin:30px 1%; width:98%;}


		#reserve-form {width:100%;}

		#reserve-form{padding:20px 10px;}
		#reserve-form  h2{margin:10px auto 20px auto;  text-align:center;}


		#reserve-form1 {width:100%;}

		#reserve-form1{padding:20px 10px;}
		#reserve-form1  h2{margin:10px auto 20px auto;  text-align:center;}

		.contact-blk{padding:20px 0; width:100%;}


			.h-colum .h-title{font-weight:bold; letter-spacing:1px;}
			.f-colum .f-title{font-weight:bold; letter-spacing:1px;}

			.h-colum .h-field{margin:10px auto 20px auto; width:100%;}
			.f-colum .f-field{margin:10px auto 20px auto; width:100%;}

			.f-colum .c-title{margin:0 auto 10px auto; width:100%}
			.f-colum .c-field{margin:0 auto 10px auto; width:100%}

}

@media screen and (max-width:480px){
	
	.f-colum .f-field select{margin:4px 0;}
			.confirm-block .form-btn{margin:4px 4px; padding:8px 10px;}

}