.history {padding:170px 0px 80px 60px; overflow: hidden;}
.history .wid {max-width:1700px; margin:0 auto; position: relative;}

.history h1 {font-size:60px; color:#111; font-family: 'Paperlogy-9Black';}
.history ul.menu {width:540px; margin:0 auto; position:absolute; right:0; top:2px; padding:6px; background:#f3f3f3; border-radius:50px; }
.history ul.menu:after {content:''; clear:both; display: table;}
.history ul.menu li {float:left; width:50%; border-radius:50px; font-size:20px; color:#111; font-weight:500; height:55px; line-height:55px; text-align: center; cursor: pointer;}
.history ul.menu li.on {background:#111; color:#fff;}

.history .swiper-container {float:right; max-width:1480px; width:calc(100% - 200px); margin-top:100px; overflow: hidden; min-height:580px;}
.history .swiper-container .swiper-slide {width:100% !important; padding-top:60px; padding-left:50px;}
.history .swiper-container .swiper-slide .box {margin-top:45px; width:540px;}
.history .swiper-container .swiper-slide .box:first-child {margin-top:0;}
.history .swiper-container .swiper-slide .box p {font-size:28px; color:#202020; font-weight:800; margin-bottom:5px;}
.history .swiper-container .swiper-slide .box span {display: inline-block; margin-top:10px; line-height:1.36em; font-size:16px; color:#141414; font-weight:400; width:100%; position: relative; padding-left:12px;}
.history .swiper-container .swiper-slide .box span:after {content:''; position: absolute; left:0; top:7px; width:5px; height:5px; background:#444; border-radius:50%;}
.history .swiper-container .swiper-slide .img {position: absolute; right:0; top:0; width:calc(100% - 560px); border-radius:50px 0 0 50px; padding:45px; background:#fff; border:8px solid rgba(238, 238, 238, 1); max-width:785px; border-right:none;}
.history .swiper-container .swiper-slide .img:after {content:''; clear:both; display: table;}
.history .swiper-container .swiper-slide .img img {float:left; width:calc((100% - 20px) / 2); box-shadow: 0 0 20px rgba(0,0,0,0.1)}
.history .swiper-container .swiper-slide .img img:last-child {float:right;}


.history .pager_txt {position: absolute; left:-5px !important; top:350px !important; z-index: 1 !important; width:200px !important; background:#fcfcfc; padding-left:50px; padding-top:50px; transition: .3s; height:500px;}
.history .pager_txt p {width:100% !important; opacity: 1 !important;background:none !important; height:auto !important; margin-top:30px !important; border:none !important; border-radius:0 !important; position: relative !important; transition: .3s !important;}
.history .pager_txt p:after {content:''; position: absolute; left:-50px; top:9px; height:2px; background:#fff; width:35px; transition: .3s;}
.history .pager_txt p span:first-child {display: none;}
.history .pager_txt p span {font-size:18px; color:#202020; font-weight:400;}
.history .pager_txt p.on span {font-weight:800;}
.history .pager_txt p.on:after { background:#111;}

@media screen and (max-width:1279px) { 
	.history .swiper-container {padding-right:50px;}
	.history .swiper-container .swiper-slide .img {position: relative; width:100%; border-radius:30px;  border:8px solid rgba(238, 238, 238, 1); max-width:100%; margin-top:35px; padding:35px;}
	.history .pager_txt {padding-top:26px;}
	.history .swiper-container {width:calc(100% - 120px);}

	.history ul.menu {right:60px; left:initial; transform: initial;}
}
@media screen and (max-width:1279px) {
	.history ul.menu {position: relative; top:0; right:0; width:100%; margin-top:20px;}
}


	@media screen and (max-width:767px) {
	.history {padding:120px 25px 60px 25px;}
	.history h1 {font-sizE:40px;}

	.history ul.menu li {font-size:13px; height:40px ;line-height:40px;}
	.history .pager_txt {padding-left:20px; width:115px !important; padding-top:0; top:255px !important;}
	.history .pager_txt p:after {left:-20px; width:15px; top:7px;}
	.history .pager_txt p span {font-size:14px;}
	.history .pager_txt p {margin-top:15px !important;}

	.history .swiper-container {margin-top:0; padding:0; width:calc(100% - 80px)}
	.history .swiper-container .swiper-slide {padding:30px 0 0 25px;}
	.history .swiper-container .swiper-slide .box {width:100%;}
	.history .swiper-container .swiper-slide .box p {font-size:22px; margin-bottom:1px;}
	.history .swiper-container .swiper-slide .box span {font-size:13px; margin-top:6px; padding-left:9px;}
	.history .swiper-container .swiper-slide .img {margin-top:25px; padding:15px; border-radius:15px; }
	.history .swiper-container .swiper-slide .img img {width:100%; }
	.history .swiper-container .swiper-slide .img img:last-child {margin-top:15px;}
	.history .swiper-container .swiper-slide .box span:after {width:4px; height:4px; top:6px; background:#222;}
}