.main-content .boundary img { max-width:100%; }

.history { background-color:var(--green-ex-light); color:#FFF; margin:0; }
.history .boundary { padding:30px 0; }
.history .section-title { color:#FFF; }
.main-content.section img { width:100%; height:auto; }

.introduction-us { text-align:left; }
.introduction-us-image { text-align:right; }

.about { background-color:#E9FFEB; margin:0; }
.about .boundary { padding:30px 0; }
.about .about-items { margin:20px 0 0; }
.about .about-item { background-color:#FFF; border-radius:10px; box-shadow:0 0 15px #DDD; display:block; width:100%; margin:0 auto 20px; padding:20px; box-sizing:border-box; transition:all .3s; cursor:pointer; }

.about .about-item:hover { transform:translateY(-10px); }

.stop-points { position:relative; margin-top:100px; width:90%; }
.stop-points .stop-point { position:relative; width:15%; display:inline-block; vertical-align:top; }
.stop-points .status-line, .stop-points .status-line-bg { display:block; position:absolute; bottom:0; left:0; width:15%; height:2px; background-color:#FFF; transition:all .3s; }
.stop-points .status-line-bg { width:calc(100% + 30px); background-color:#666; }
.stop-points .stop-point a { display:inline-block; position:absolute; bottom:0; right:0; transform:translateX(50%); width:35px; height:44px; background:url(../images/stop-point.png) top left no-repeat; background-size:100%; z-index:1; opacity:.5; }
.stop-points .stop-point a.active, .stop-points .stop-point a:hover { opacity:1; }
.stop-points, .stop-points .stop-point, .stop-points .stop-point a { height:44px; }
.stop-points .stop-point a span { position:absolute; bottom:110%; left:50%; transform:translateX(-50%); font-weight:bold; }
.stop-points .stop-point-2 { width:35%; }
.stop-points .stop-point-3 { width:20% }
.stop-points .stop-point-4, .stop-points .stop-point-5 { width:15%; }
.stop-points .stop-point-4 { width:30%; } /* when hide point 5 */

.stop-points-content-container { position:relative; overflow:hidden; height:630px; }
.stop-points-content { position:absolute; display:flex; flex-direction:row; top:0; left:0; width:500%; transition:all .3s; height:auto; flex-wrap:nowrap; }
.stop-points-content [class^='stop-point-content-'] { display:flex; vertical-align:top; width:20%; padding:20px; box-sizing:border-box; }
.stop-points-content [class^='stop-point-content-'] .table .col { vertical-align:top; text-align:left; }
.stop-points-content [class^='stop-point-content-'] .table .col .square-image:before { padding-top:150%; }
.stop-points-content [class^='stop-point-content-'] .table .col img { width:100%; height:auto; margin-top:20px; }

.stop-points-content [class^='stop-point-content-'] .table .col.multi-h2 h2 { margin-bottom:20px; }

.stop-points-content h2 { line-height:1.3em; font-size:1em; }
.stop-points-content h2 span { display:block; margin-bottom:10px; }

.managers .manager-item { display:inline-block; vertical-align:top; width:49%; margin:0 2% 20px 0; text-align:center; }
.managers .manager-item:nth-child(2n+0) { margin-right:0; }
.managers .manager-item .square-image {margin-bottom:10px; }
.managers .manager-item .square-image:before { padding-top:150%; }
.managers .manager-item strong { display:block; margin-bottom:10px; }
.managers .manager-item strong span { display:block; }

.introduction { background: url(../images/services-bg.jpg) center no-repeat; background-size: cover; color:#FFF; }
.introduction .boundary { width:96%!important; padding:30px 0; padding-left:calc(50% - 570px)!important; }
.introduction .introduction-detail .col { text-align:left; color:#FFF; }
.introduction .introduction-detail h2, .introduction .introduction-detail h2 span { color:#FFF; }
.introduction.section .section-title { font-size:2.3em; }
.introduction ul { list-style-type:none; margin:20px 0 0; padding:0; }
.introduction ul li { padding:15px 0 0 0; font-weight:600; font-size:1.2em; }
.introduction ul li img { width:20px; height:auto; display:inline-block; vertical-align:top; margin-right:10px; }

.introduction .introduction-boxes { padding-right:0; }

.gallery .gallery-content {}
.gallery .table { border-collapse:separate; border-spacing:10px; }
.gallery .table .col { overflow:hidden; }
.gallery .table .col .table { width:calc(100% + 20px); margin-left:-10px; }
.gallery .table .col .table:last-child { margin-top:-10px; }

@media (min-width:576px){
	.managers .manager-item { width:23.5%; }
	.managers .manager-item:nth-child(2n+0) { margin-right:2%; }
	.managers .manager-item:nth-child(4n+0) { margin-right:0; }
}
@media (min-width:768px){
	.history .boundary { padding:50px 0; }
	
	.about .about-item { display:inline-block; width:32%; margin-right:2%; vertical-align:top; height:290px; }
	.about .about-item:nth-child(3n+0) { margin-right:0; }
	
	.stop-points .status-line-bg, .stop-points .status-line { height:3px; }
	.stop-points .stop-point a span { font-size:1.2em; }
	.stop-points-content h2 { font-size:2em; }
	.stop-points-content [class^='stop-point-content-'] .table .col:first-child { padding-right:20px; }
	
	.stop-points-content-container { height:460px; }
	
	.introduction .boundary { width:100%!important; }
	.introduction .introduction-boxes { padding:20px 30px; }
	
	.gallery .table .col .table { margin:-10px 0 0 -10px; }
}

@media (min-width:996px){
	.about .about-item { height:250px; }
	
	.stop-points-content-container { height:520px; }
	.stop-points, .stop-points .stop-point, .stop-points .stop-point a { height:73px; }
	.stop-points .stop-point a { width:58px; }
	.stop-points .status-line-bg, .stop-points .status-line { height:5px; }
	
	.stop-points .stop-point a span { font-size:1.5em; }
	
	.managers .manager-item strong span { display:inline-block; margin:0; }
	.managers .manager-item strong span:after { content:"\00a0"; }
	
	.introduction .introduction-boxes { padding:30px; }
	
	.introduction-us-image img { width:90%!important; height:auto; }
}

@media (min-width:1200px){
	.stop-points-content-container { height:480px; }
	.stop-points-content [class^='stop-point-content-'] .table .col .square-image:before { padding-top:75%; }
	.stop-points-content [class^='stop-point-content-'] .table .col .square-image.vertical-image { width:80%; }
	.stop-points-content [class^='stop-point-content-'] .table .col .square-image.vertical-image:before { padding-top:150%; }
	
	.introduction ul li { font-size:1.5em; }
	.introduction ul li img { width:25px; }
	
	.stop-points-content h2 { font-size:1.6em; }
}