.area{
	width:79%;
	float:right;
	background: #f9f9f9;
    margin-top: 4%;
	}
html[lang="en"] .area{
    width: 73%;}
.area .pic{
    width: 30%;
    float: right;
    padding: 5%;
}
.area .list{
    padding: 4% 0;
}
.area .dimg{
	width: 90%;
    margin: auto;
}
.area .ll {
    font-size: 14px;
    margin: 1% auto;
    letter-spacing: 1px;
    margin-bottom: 2%;
    float: left;
    color: #0f1e79;
    margin-right: 4%;
    background: #f1f1f1;
    padding: 1% 4% 1% 3%;
	overflow:hidden;
}
.area .tab{
	text-indent:0;
	}
.yyimg{
	width:70%
}
.area .dimg h2:before{
    content: "";
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-left: 8px solid #9a0825;
    border-bottom: 7px solid transparent;
    position: absolute;
    left: 1%;
    bottom: 18px;
    /* margin-right: -4px; */
    display: block;
}
.area .dimg h2{
	padding: 0;
    text-align: left;
    color: #333;
    position: relative;
    padding-left: 32px;
    padding-bottom: 15px;
    padding-top: 1%;
    font-size: 16px;
    border-bottom: 2px solid #4b50a4;
}
.area .dimg .tx{
    margin-bottom: 20px;
}
.area .xq_all .xq_box{
  /*  width: 960px;*/
    z-index: 1101;
    /*position: absolute;
    top: 20%;
    left: 50%;*/
    /*margin-left: -480px;*/
    /*padding: 20px;*/
	/*opacity:0;*/
	overflow:initial
}
.area .xq_all .close{
	right:-27px;
	top:-27px;}
.g_case_list{
	background-color: #525b92;
    position: absolute;
    top: 0px;
    left: 0;
    width: 270px;
    height: 100%;
	border-left: 3px solid #4b50a4;
	border-top: 3px solid #4b50a4;
	box-sizing:border-box;
}
.g_case_list dd{
	display: block;
    padding: 10px 30px 10px 15px;
    color:#fff;
   background: #6b74a9;
    border-top: 1px solid #848cc1;
    /*border-bottom: 1px solid #53616f;*/
    font-size: 13px;
}
.g_case_list dd.active{
	 background: #5f68a2;
}
.g_case_list dd strong{
	width:16px;
	height:16px;
	display:block;
	float:left;
	text-align:center;
	line-height:16px;
	border-radius:50%;
	color:#fff;
	background:#4b50a4;
	font-size:11px;
	margin-right:10px;
	margin-top:1px;}
.g_case_list dd.active strong{
	background:#0f1e79;}
#g_case_content{
	width: 704px;
    position: relative;
   /* float: right;*/
	height:auto;
	/*background:#fff;
	margin:auto;*/
}
#g_case_content li{
	z-index:9;}
#g_case_content li:first-of-type{
	    position: absolute;
    right: 225px;
    top: 36px;
	}
#g_case_content li:nth-of-type(2){
	position:absolute;
    right: 91px;
    bottom: 176px;
	}
#g_case_content li:nth-of-type(3){
	position:absolute;
	left: 213px;
    top: 253px;
	}
#g_case_content li:nth-of-type(4){
	position:absolute;
	right: 102px;
    top: 147px;
	}
#g_case_content li:nth-of-type(5){
	position:absolute;
	right: 100px;
    bottom: 296px;
	}
#g_case_content li:nth-of-type(6){
	position:absolute;
	left: 168px;
    top: 96px;
	}
#g_case_content li{
	opacity: 0;
}
.history-circle{position:absolute; left:50%; top:0; display:inline-block; width:22px; height:22px; margin-left:-11px; }
.history-circle > span {
	border:1px solid rgba(255, 0, 0, 0.5) ;
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	position: absolute;
	left: 0;
	top: 0px;
	opacity: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	-webkit-animation: history-circle 1s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
	animation: history-circle 1s cubic-bezier(1, 2, 0.66, 3) infinite; 
	}
#g_case_content li:nth-of-type(2) .history-circle > span {
	-webkit-animation: history-circle 1.5s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
			animation: history-circle 1.5s cubic-bezier(1, 2, 0.66, 3) infinite; 
	}
#g_case_content li:nth-of-type(3) .history-circle > span {
	-webkit-animation: history-circle 1.8s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
			animation: history-circle 1.8s cubic-bezier(1, 2, 0.66, 3) infinite; 
	}
#g_case_content li:nth-of-type(4) .history-circle > span {
	-webkit-animation: history-circle 0.8s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
			animation: history-circle 0.8s cubic-bezier(1, 2, 0.66, 3) infinite; 
	}
.history-circle i{
	display:block; position:absolute; top:50%; left:50%; margin:-3px 0 0 -3px; width:8px; height:8px; background-color:red; 
	-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;
}

@keyframes history-circle {
  0% {
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	opacity: 0.5; 
   }
  50% {
	opacity: 1.0; 
   }
  100% {
	-webkit-transform: scale(1.2);
			transform: scale(1.2);
	opacity: 0; } 
}

#g_case_content .item{ 
	position:absolute;
	left:35%;
	top:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
#g_case_content .item b{
	display:block;
	position:absolute;
	left:0;
	top:0%;
	opacity:0;}
#g_case_content .item b:nth-of-type(2){
    z-index: 1;}
#g_case_content .item b:nth-of-type(3){
    z-index: 2;}
#g_case_content .item b:nth-of-type(4){
    z-index: 3;}
#g_case_content .item b:nth-of-type(5){
    z-index: 4;}
#g_case_content .item b:nth-of-type(6){
    z-index: 5;}
#g_case_content .item b:nth-of-type(7){
    z-index: 6;}
#g_case_content .item b:nth-of-type(8){
    z-index: 7;}
#g_case_content .item b:nth-of-type(9){
z-index: 8;}
#g_case_content .item b:nth-of-type(10){
z-index: 9;}
#g_case_content .txt{
	position:absolute;
	left:40px;
	top:43%;
	opacity:0;
	margin-top:20px;
	-webkit-transition:all 0.3s linear;
	transition:all 0.3s linear;
	z-index:8;
	}
/*#g_case_content .txt.active{
	opacity:1;
	margin-top:0;}*/
#g_case_content .txt h3{
	font-size:14px;
	color:#0f1e79;
	-webkit-transition:all 0.3s linear;
	transition:all 0.3s linear;
	}
#g_case_content .txt h6 span{
	position:relative;
	color: #dc880b;
}
#g_case_content .txt h6 span:hover img{
	top: 10px;
    left: 0;
	display:block;
}
.dimg .yyi{
	width:90px;
	margin-top: 10px;
	display:none;
	position: absolute;
}
#g_case_content .txt h3 strong{
	width:16px;
	height:16px;
	background:#0f1e79;
	border-radius:50%;
	display:block;
	float:left;
	text-align:center;
	line-height:16px;
	color:#fff;
	font-size:12px;
	margin:2px 5px;
	position:relative;
	z-index:2;
	}
#g_case_content .txt:before{
	    content: "";
    width: 70px;
    height: 157px;
    position: absolute;
    right: -100px;
    top: -72px;
    border: 1px solid #666;
    border-right: none;
    border-bottom: none;
	}
#g_case_content .txt:after{
	content:"";
	width:20px;
	height:1px;
	background:#666;
	position:absolute;
	right:-30px;
	top:10px;
	}
#g_case_content .txt:nth-of-type(3){
	top: 38px;
    left: 10px;
	}
#g_case_content .txt:nth-of-type(3):before{
	display:none;
	}
#g_case_content .txt:nth-of-type(3):after{
	    width: 150px;
    height: 1px;
    right: -160px;
    top: 10px;
	}
#g_case_content .txt:nth-of-type(4){
	top: 150px;
    right: -66px;
	left:inherit
	}
#g_case_content .txt:nth-of-type(4):before{
	display:none;
	}
#g_case_content .txt:nth-of-type(4):after{
/*	width:46px;
	left:-40px;*/
	    width: 60px;
    left: -65px;
	top:10px;
	}
#g_case_content .txt:nth-of-type(5){
	top:320px;
	right:0px;
	left:inherit
	}
#g_case_content .txt:nth-of-type(5):before{
	    top: 350px;
    right: -10px;
	border:1px solid #666;
	border-left:none;
	}
#g_case_content .txt:nth-of-type(5):after {
    width: 1px;
    height: 32px;
    left: 4px;
    top: -33px;
}
@media screen and (max-width: 767px){
.area {
    width: 100%;
	margin-top:0;}
.area .xq_all .xq_box{
	overflow-x: auto;
}
/* #g_case_content {
    width: 360px;
	margin:auto;
	}
#g_case_content .item {
    left: 20%;
    width: 100%;
	-webkit-transform:none;
	transform:none;
}
.area .dimg {
    width: 94%;}
#g_case_content .item b img{
	width:80%;
}
#g_case_content .txt h3 {
    font-size: 11px;
	line-height:14px;
	display:block;}
#g_case_content .txt h6 span {
    font-size: 8px;
	line-height:10px;
	display:block;
}
html[lang="en"] .area {
    width: 100%;
}
#g_case_content li:first-of-type {
    right: 38%;
    top: 42px;
}
#g_case_content .txt:nth-of-type(3):after {
    left: 130px;
    top: 8px;
    width: 30px;
}*/
.area .ll {
    padding: 3% 4% 1% 3%;} 
}