section.section{margin: 6.25rem 0}

@media screen and (max-width:1280px){
	section.section{margin: 3.33rem 0}
}


section#section1 h2.sect-title{text-align: center}

section#section1 strong.sect-title {position:relative; word-break: keep-all; text-align: center; margin: 3.125rem 0}

section#section1 div.sect-content{display: flex; flex-wrap: wrap; align-items: center; gap: 3.125rem}
section#section1 div.sect-content div{width: calc((100% - 3.125rem) / 2)}
section#section1 h3.sect-title{white-space: pre-line; margin-bottom:0.94rem}
section#section1 div.sect-content div.img{display: flex;  justify-content: flex-end}
section#section1 div.sect-content div.img img{max-width:100%}

@media screen and (min-width:1281px){
	section#section1 strong.sect-title:before{content: ''; position: absolute; width: 25%; height: 1px; background: #222; left: 0; top: 50%; transform: translate(0, -50%)}
	section#section1 strong.sect-title:after{content: ''; position: absolute; width: 25%; height: 1px; background: #222; right: 0; top: 50%; transform: translate(0, -50%)}
}
@media screen and (max-width:1280px){
	section#section1 strong.sect-title {margin: 2rem 0; background: var(--color-background-primary); padding: 5px 10px}

	section#section1 div.sect-content{gap: 2rem}
	section#section1 div.sect-content div{width: calc((100% - 2rem) / 2)}
	section#section1 h3.sect-title{margin-bottom:10px}

}

@media screen and (max-width:767px){
	section#section1 h3.sect-title{text-align:center}
	section#section1 p.sect-desc{text-align:center}
	section#section1 div.sect-content div{width: 100%}
	section#section1 div.sect-content div.img img{width:100%}
}
section#section2{background: url(/image/about/sect2_backimg.jpg) no-repeat 50% 0; padding: 50px 0 60px; background-size: cover}
section#section2 h2.sect-title {color:#fff; text-align: center; margin-bottom:15px}
section#section2 p.sect-desc {color:#fff; text-align: center; margin-bottom:10px; white-space:pre-line}

@media screen and (max-width:1280px){
	section#section2{padding: 2rem}
	section#section2 h2.sect-title {margin-bottom:10px}
}


section#section3 div.sect-title-wrap{display: flex; margin-bottom: 6.25rem; gap: 3.125rem}
section#section3 h2.sect-title{width:40%}
section#section3 div.sect-desc{width:60%}
section#section3 h3.sect-title{margin-bottom: 10px}
ul.sect3-list{display: flex; flex-direction: column; gap: 3.125rem}
li.sect3-list{display: flex; flex-wrap: wrap}
div.sect3-list-text{display: flex; justify-content: center; flex-direction: column; text-align: center; padding: 0 20px; background-color: var(--color-background-primary); width: 50%; box-sizing: border-box;}
h4.sect3-list-text{font-size: 1.25rem; margin-bottom: 10px}
div.sect3-list-img{width: 50%; overflow: hidden}

@media screen and (max-width:1280px){
	section#section3 div.sect-title-wrap{margin-bottom: 3.33rem; gap: 2rem}
	ul.sect3-list{gap: 2rem}
	div.sect3-list-text{padding: 0 2rem}
	h4.sect3-list-text{font-size: 1.07rem}
	div.sect3-list-img img{width: 100%}
	
}

@media screen and (max-width:767px){
	li.sect3-list:nth-child(1), li.sect3-list:nth-child(3) {
		flex-direction: column-reverse;
	}
	div.sect3-list-text{padding: 2rem; width:100%}
	div.sect3-list-img{width: 100%}
	
}

section#section4 div.sect-title-wrap{padding: 50px 0; background: url(/image/about/sect4_backimg.jpg) no-repeat 50% 0; background-size: cover}
section#section4 h3.sect-title{white-space: pre-line; text-align: center; color:#fff}

@media screen and (max-width:1280px){
	section#section4 div.sect-title-wrap{padding: 2rem 0}
}

section#section5 div.sect-title-wrap{margin-bottom: 3.125rem}
section#section5 h2.sect-title{text-align: center; margin-bottom:20px}
section#section5 div.sect-title-wrap p.sect-desc{text-align: center}
ul.sect5-list{display: flex; flex-direction: column; gap: 3.125rem}
li.sect5-list{display: flex; justify-content: space-between; gap:6.25rem}
div.sect5-list-img{overflow: hidden}
div.sect5-list-text{display: flex; flex-direction: column; justify-content: center; box-sizing: border-box} 
h4.sect5-list-text{font-size: 20px; margin-bottom: 15px}

@media screen and (max-width:1280px){
	section#section5 div.sect-title-wrap{margin-bottom: 2rem}
	section#section5 h2.sect-title{margin-bottom:1rem}
	ul.sect5-list{gap: 2rem}
	li.sect5-list{gap:2rem}
	div.sect5-list-img{width: 50%}
	div.sect5-list-text{width: 50%}
	h4.sect5-list-text{font-size: 1.07rem; margin-bottom: 10px}
}
@media screen and (max-width:767px){
	li.sect5-list{flex-direction: column}
	li.sect5-list:nth-child(2){flex-direction: column-reverse}
	div.sect5-list-img{width: 100%;height: 250px; display: flex; align-items: center}
	div.sect5-list-img img{width: 100%}
	div.sect5-list-text{width: 100%}
}
section#section6{margin-bottom:0; padding: 6.25rem 0; background: url(/image/about/sect6_backimg.jpg) no-repeat 50% 0; background-size: cover}
section#section6 h2.sect-title{white-space: pre-line; text-align: center; color:#fff;}

@media screen and (max-width:1280px){
	section#section6{padding: 3.33rem 0}
}