main {
    max-width: 1370px;   /* 限制最大寬度 */
    margin: 0 auto;      /* 置中 */
    max-height: 100vh;
}

.container {
    width: 100%;
    max-width: 1370px; /* 或你想要的寬度 */
    margin: 0 auto;    /* 水平置中 */
    max-height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
  }
.row{
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 100%;
    flex-wrap: wrap;
}
.col-2{
	width: 50%;
    
}
.col-3{
    width: 33.3333333%;


}
.col-4{
    width: 25%;


}
section{
    height: 100vh;
    width: 100%;
    max-width: 1370px;
    background-color: rgb(189, 179, 179);
}
/* –––––––––––––––––––––––––––guidline */
.column-center{
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.fa-fw{
    width: 1.6em;
}
/* ------------------------------------------photo */
.out-ratio{
	width: 100%;          /* 決定大小 */
}
.ratio{
	width: 100%;

}
.ratio:before{
	content: '';
	display: block;
	width: 100%;
    padding-top: 50%;    /* 決定比例 */
	/*border: 5px solid green;*/
}
.ratio .ratio-img{
	background-repeat: no-repeat;
    background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background-position: center;

}
/* -----------------------------*/
.out-ratio.out-ratio-20{width: 20%; 
}.out-ratio.out-ratio-30{width: 30%;
}.out-ratio.out-ratio-40{width: 40%; 
}.out-ratio.out-ratio-50{width: 50%; 
}.out-ratio.out-ratio-60{width: 60%;
}.out-ratio.out-ratio-70{width: 70%;
}.out-ratio.out-ratio-80{width: 80%;
}.out-ratio.out-ratio-90{width: 90%;
}

.ratio.ratio-1-1:before{padding-top: 100%;
}.ratio.ratio-2-3:before{padding-top: 150%;
}.ratio.ratio-3-2:before{padding-top: 66.67%;
}.ratio.ratio-3-4:before{padding-top: 133.33%;
}.ratio.ratio-4-3:before{padding-top: 75%;
}.ratio.ratio-16-9:before{padding-top: 56.25%;
}.ratio.ratio-9-16:before{padding-top: 177.78%;
}