.wid {max-width:1920px; width:100%; margin:0 auto; padding:0 60px;}
@media screen and (min-width:1920px) {
	.wid {max-width:100%;}
}

.history {padding:60px 90px 90px 90px;  }
.history:after {content:''; clear:both; display: table;}

.history h3 {font-size:14px; color:#d7d7d7;}
.history h2 {font-size:25px; margin-top:12px; color:#111; font-weight:500; }
.history h4 {margin-top:10px; font-size:15px; color:#222; font-weight:300;}
.history h4 b {font-weight:700;}

.history .box1 {float:left; width:480px; }
.history .box1 ul {margin-top:160px;}
.history .box1 ul li {margin-top:17px; font-size:18px; color:#222; font-weight:300; position: relative; cursor: pointer; transition: .3s; letter-spacing: 4px;}
.history .box1 ul li b {font-weight:300;}
.history .box1 ul li:before {content:''; position: relative; display: inline-block; width:0px; height:3px; margin-right:10px; background:#444; position: relative; top:-5px;transition: .3s;}
.history .box1 ul li.on {font-weight:700;}
.history .box1 ul li.on:before {width:24px;}


.history .box2 {float:right; width:calc(100% - 480px); margin-top:22px;}
.history .box2:after {content:''; clear:both; display: table;}
.history .box2 .per {float:left; width:calc((100% - 465px) / 5); margin-right:20px; height:455px; border-radius:20px; position: relative; transition: .3s; cursor:pointer;}
.history .box2 .per.on {width:365px;}
.history .box2 .per:last-child {margin-right:0;}

.history .box2 .per .txt {position: absolute; width:148px; bottom:88px; transform: rotate(90deg); left:-46px; z-index: 1; transition: .3s; }
.history .box2 .per .txt b {display: none;}
.history .box2 .per .txt span {display: none;}
.history .box2 .per .txt p {color:#fff; font-weight:500; font-size:14px; text-align: right;}


.history .box2 .per.on .txt {position: absolute; width:260px; bottom:20px; left:-13px; z-index: 1;border-radius:10px;padding:11px 15px 0 70px; background:rgba(255,255,255,.7); backdrop-filter: blur(10px); height:54px; transform: rotate(0deg);}
.history .box2 .per.on .txt b {position: absolute; left:0; top:0; width:54px; height:54px; border-radius:10px 0 0 10px; background:#222; color:#fff; line-height:58px; font-weight:400; text-align: center; font-size:23px; font-family: 'GmarketSansBold'; display: block;}
.history .box2 .per.on .txt span {display: inline-block; width:100%; font-size:12px; color:#666;  display: block;}
.history .box2 .per.on .txt p {margin-top:1px; color:#111; font-weight:500; font-size:15px; text-align: left;}

.history .box2 .per:nth-child(1) {background:url('../img/his_img1.jpg')no-repeat center; background-size:cover;}
.history .box2 .per:nth-child(2) {background:url('../img/his_img5.jpg')no-repeat center #eee; background-size:cover;}
.history .box2 .per:nth-child(3) {background:url('../img/his_img6.jpg')no-repeat center #eee; background-size:cover;}
.history .box2 .per:nth-child(4) {background:url('../img/his_img2.jpg')no-repeat center; background-size:cover;}
.history .box2 .per:nth-child(5) {background:url('../img/his_img3.jpg')no-repeat center; background-size:cover;}
.history .box2 .per:nth-child(6) {background:url('../img/his_img4.jpg')no-repeat center; background-size:cover;}


@media screen and (max-width:1500px) {
	.history {padding:50px 60px;}

	.history .box1 {width:350px;}
	.history .box2 {width:calc(100% - 350px); }
}


@media screen and (max-width:1200px) {
	.wid {padding:0 25px;}
	.history {padding:40px 40px;}

	.history .box2 {width:400px;}
	.history .box2 .per {width:0; margin-right:0; }
	.history .box2 .per .txt p {display: none;}
	.history .box2 .per.on .txt p {display: block;}
}

@media screen and (max-width:1024px) {
	.history .box1 {width:100%;}
	.history .box1 ul {margin-top:15px;}
	.history .box1 ul li {float:left; width:calc((100% - 20px) / 3); margin-right:10px; text-align: center; font-size:15px; background:#f8f8f8; color:#777; letter-spacing: 0; padding:8px 0 11px 0; margin-top:10px; border-radius:10px; height:40px;}
	.history .box1 ul li:nth-child(3n) {margin-right:0;}
	.history .box1 ul li:before {content:none;}
	.history .box1 ul li.on {background:#222; color:#fff;}

	.history .box2 {width:100%;}
	.history .box2 .per {width:calc((100% - 350px) / 5); height:375px; margin-right:10px;}
	.history .box2 .per:last-child {margin-right:0;}
	.history .box2 .per.on {width:300px;}
}



@media screen and (max-width:767px) {
	.wid {padding:0 0px;}
	.history {padding:30px 25px 60px 25px;}
	.history h2 {margin-top:0px; position: fixed; z-index: -1; top:127px; left:0; width:100%; color:#fff; text-align: center; display: block;}
	.history h3 { margin-top:0px; position: fixed; z-index: -1; top:106px; left:0; width:100%; color:#fff; text-align: center; font-weight:500; color:rgba(255,255,255,.8); display: block;}

	.history .box1 ul li {width:calc((100% - 10px) / 2); margin-right:10px; height:57px;}
	.history .box1 ul li span {display: none;}
	.history .box1 ul li b {display: inline-block; width:100%;}
	.history .box1 ul li:nth-child(3n) {margin-right:10px;}
	.history .box1 ul li:nth-child(2n) {margin-right:0;}
	.history h4 {font-size:18px; text-align: center; margin-top:0;}

	.history .box2 {margin-top:10px;}
	.history .box2 .per {margin-right:0; width:0; height:auto; padding-top:125%;}
	.history .box2 .per.on {width:100%;}
}