@import '../head.spe.css';

.banner { position: relative; overflow: hidden; width: 100%; background: url('/images/aboutus/ourValue/banner.jpg') top 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:-120px; 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;}

.our-value-content {font-size:30px;line-height:1.6em;font-style: italic; font-family: 'Wulkan Display Italic';text-align:center;width:60%;padding:0 1%;margin:0 auto;}

.our-value-list { display: flex; justify-content: right; background:#ededed;}
.our-value-list .left-part { width: 50%;background:url('/images/aboutus/ourValue/1.jpg') center no-repeat; background-size: cover;height:720px;}

.our-value-list .right-part { width: 50%;padding:110px 0 0 75px }
.our-value-list .right-part ul {border-bottom: 1px solid #333;}
.our-value-list .right-part ul li { padding: 20px 0; border-top: 1px solid #333; }
.our-value-list .right-part ul li > div.title { width: 100%; max-width: 800px; font-size: 26px; line-height: 2em; position: relative; }
.our-value-list .right-part ul li > div.title > span { display: block; position: absolute; right: 15px; top: 0vw; width: fit-content; transform: rotateZ(-90deg); transition: all .3s; }
.our-value-list .right-part ul li > div.txt { font-size: 16px; line-height: 1.4em; padding: 0 1vw; font-style: italic; height: 0; opacity: 0; overflow: hidden; transition: all .3s; }
.our-value-list .right-part ul li.hover > div.txt { height: fit-content; opacity: 1; color: #888; }
.our-value-list .right-part ul li.hover > div.title > span { transform: rotateZ(90deg); }


@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-value-content {font-size:1.875vw;}

	.our-value-list { display: flex; justify-content: right; background:#ededed;}
	.our-value-list .left-part {height:45vw;}

	.our-value-list .right-part {padding:6.875vw 0 0 4.7vw; }
	.our-value-list .right-part ul li { padding:1.25vw 0; }
	.our-value-list .right-part ul li > div.title { font-size:1.6vw;}
	.our-value-list .right-part ul li > div.title > span { right:1vw;}
	.our-value-list .right-part ul li > div.txt { font-size:1vw; }
}
@media only screen and (max-width:768px){
	.banner .auto-box > div > h6 {font-size:22px;text-indent:20px;}

	.our-value-content {font-size:16px;width:80%;padding:2% 0;}

	.our-value-list .right-part {padding-top:0;padding-left:2vw;}
	.our-value-list .right-part ul li > div.title {font-size:18px;}
	.our-value-list .right-part ul li.hover > div.txt {font-size:14px;line-height:1.2em;}
}
@media only screen and (max-width:560px) {
	.banner > .content { bottom:70px;}
	.banner > .content h1 {font-size:20px; }

	.our-value-content {font-size:14px;}

	.our-value-list {display:block;}
	.our-value-list .left-part {height:200px;width:100%;}

	.our-value-list .right-part {width:100%;padding:0 0 0 0; }
	.our-value-list .right-part ul li { padding:10px 15px; }
	.our-value-list .right-part ul li > div.title { font-size:18px;}
	.our-value-list .right-part ul li > div.title > span { right:1vw;}
	.our-value-list .right-part ul li > div.txt { font-size:14px; }
}