@import '../head.spe.css';
.banner { position: relative; overflow: hidden; width: 100%; background: url('/images/aboutus/process/banner.jpg') center no-repeat; background-size: cover; user-select:none;}
.banner .auto-box {height:650px;position:relative;}
.banner .auto-box > div { position: absolute; top:50%;margin-top:-80px; left:1%; color: #fff; text-shadow: rgba(0,0,0,0.8) 3px 3px 3px; }
.banner .auto-box > div > h6 {/*width: 160px; height: 140px;*/font-family: 'Wulkan Display Italic'; font-size: 56px;font-style:italic; line-height: 2em; position: relative; font-weight:400;}
.banner .auto-box > div > h6::before { content: ''; display: none; position: absolute; top: 50%; margin-left: -25px; width: 220px; height: 1px; background: #fff; transform: rotateZ(-45deg); box-shadow: rgba(0,0,0,0.8) 1px 1px 3px; }
.banner .auto-box > div p.txt { margin-top: 30px; font-size: 48px; line-height: 1.2em; font-style: italic; font-family: 'Wulkan Display Italic';text-align:center;display:none}

/*our process*/
.our-process { padding:80px 0; overflow:hidden;}
.our-process .item { position: relative; display: flex;padding:30px 0;}
.our-process .item .bg { width: 50%; height: 574px; background-position:center;background-repeat:no-repeat;background-size:cover;box-shadow:rgba(0,0,0,0.5) 0 0 10px;}
.our-process .item .cont { width:50%; padding:5.5vw 7.5vw 0 7.5vw; }
.our-process .item .cont h6 {font-size:22px;line-height:3em;font-weight:400;}
.our-process .item .cont p {font-size:16px;line-height:1.6em;font-weight:300;}

.our-process .item:nth-child(2n+1) .bg {border-radius:0 100px 100px 0;}
.our-process .item:nth-child(2n) .bg {border-radius:100px 0 0 100px;}
.our-process .item:nth-child(2n) {flex-direction:row-reverse;}

@media only screen and (max-width:1640px)
{
	.banner .auto-box {height: 41vw;min-height:240px;}
	.banner .auto-box > div {margin-top:-5vw;}
	.banner .auto-box > div > h6 {font-size:3.5vw;}

	.our-process .item .cont { padding:3vw 5vw 0 5vw; }
}
@media only screen and (max-width:1400px){
	.banner .auto-box > div > h6::before {transform:rotateZ(-35deg);}
}
@media only screen and (max-width:1280px){
	.our-process .item .cont { padding:2vw 2vw 0 2vw; }
	.our-process .item .cont h6 {font-size:20px;}

}
@media only screen and (max-width:1080px){
	.our-process .item {display:block;}
	.our-process .item .bg { width: 100%; height:40vw; }
	.our-process .item .cont {width:100%;padding-bottom:8vw;}

}
@media only screen and (max-width:768px){
	.banner .auto-box > div > h6 {font-size:22px;text-indent:20px;}
}
@media only screen and (max-width:560px){
	.banner .auto-box > div {margin-top:-28px;}
}