/*---------------Highlight---------------*/
.highlight{margin: 0 auto 30px; color:#6A3A07; font-weight: bold}
.highlight figure{margin: 0 0 20px;}
.highlight figure img{width: 100%;}
.highlight h2{font-size: 24px; padding: 0 0 10px;}
.highlight p{font-size: 18px;}
.text-green h2{color:#66A9AF; letter-spacing: 10px;}
.text-red h2{color:#BF4F5F; letter-spacing: 10px;}

/*---------------About-Detail---------------*/
.about-detail{display: flex; color: #6A3A07; color:#6A3A07; font-weight: bold; margin: 0 0 30px;}
.about-detail div{width: 40%; display: inline-block; margin: 0 0 20px;}
.about-detail div strong{display:block; font-size: 20px; letter-spacing: 5px; margin: 0 0 5px;}
.about-detail figure img{width: 100%;}
.about-detail p{display: inline-block; width: 60%; padding: 40px 0 0 15px; font-size: 16px; line-height: 20pt;}

.title-green{background: #D8E9BE; border-left:5px solid #66A9AF;}
.title-green span{border-left:5px solid #FFF; display: inline-block; padding: 5px 10px;}

.title-red{background: #FBDFD9; border-left:5px solid #BF4F5F;}
.title-red span{border-left:5px solid #FFF; display: inline-block; padding: 5px 10px;}

/*---------------Reliable---------------*/
.reliable h2{background: url(/maintenance/images/bg-title-brown.png) no-repeat; margin: 0 0 10px; color: #FFF; font-weight: bold; height: 60px; font-size: 20px; padding: 0 0 0 50px; line-height: 42pt;}
.reliable div{color: #938472; margin: 0 0 20px;}
.reliable div strong{display: block; height: 52px; background: url(/maintenance/images/bg-title-dot.png) no-repeat; font-size: 20px; font-weight: bold; line-height: 36pt;}

/*---------------User-Voice---------------*/
.user-voice{background: url(/maintenance/images/bg-pattern-title.png) no-repeat; color: #938472; margin: 0 auto 40px; padding:60px 0 0; position: relative;}
.user-voice figure{position: absolute; right: 0; top:0;}
.user-detail{width: 60%; margin: 0 0 10px;}
.user-detail p{background: url(/maintenance/images/icon-spiral.png) no-repeat 0 0; padding: 0 0 5px 25px;}
.user-detail{background: url(/maintenance/images/line-pattern.png) repeat-x bottom; padding: 0 0 10px;}
.user-detail strong{display: block; text-align: right;}
.user-detail strong span{display: inline-block; width: 30%; text-align: left;}


/*------------------tab------------------*/
.content-tab{ }
.content-tab .tabs { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }
.content-tab .tabs li { color:#fff; display: block; padding: 8px; text-align: center; width: 48%; cursor: pointer; font-weight: bold; background: #D4D4D4; margin: 0 1%;
    border-top-left-radius: 6px; border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
		-webkit-border-top-right-radius: 6px;
		-moz-border-radius-topleft: 6px;
		-moz-border-radius-topright: 6px;}

.content-tab .tabs li.current { background: #5B3010; color: #fff;}
.content-tab .tab-pane { display: none; margin: 0 auto;}
.content-tab .tab-pane.current { display: block;}
.content-tab .tab-contents{ /*border-top: 2px solid #5B3010; padding: 12px; */background: #fff; font-weight: normal; margin: 20px 0 0 0;}



/*---------------Responsive---------------*/
@media (max-width:1000px){
	.user-voice{padding: 0 10px;}
	.user-voice figure{position: relative; text-align: center; margin:0 0 10px;}
	.user-voice figure img{max-width: 100%;}
	.user-detail{width: 100%;}
	}
	
	@media (max-width:680px){
		.about-detail {flex-wrap: wrap; margin: 0 0 30px;}
		.about-detail div,.about-detail p{width: 100%;}
		.about-detail p{padding: 0;}
		}
		
		
	
	@media (max-width:560px){
	.service-photo figure{display: none;}
	.service-photo span{display:block;}
	
	}
	
	@media (max-width:480px){
	.reliable div strong{line-height: 20pt;}
	.user-detail strong span{width: 55%;}
	}