/* PC版 */
@media screen and (min-width: 751px){


	/*banner*/
	.overseas_banner{ height: 600px; background: url(../Images/overseas/overseas_banner.jpg) center no-repeat; }
	.overseas_banner h1{ font-size: 60px;color: #fff;text-align: center;padding-top: 200px; }
	
	/*正文内容*/
	.content{ width: 1200px;margin: 50px auto 180px; }
	.content .country{ cursor: pointer;float: left;width: 530px; height:199px;border-top: 1px solid #e1e1e1;margin: 0 35px;}
	.content .country .country-img{ float: left;width: 130px;}
	.content .country .country-img img{ width: 128px;height: 128px; } 
	.content .country .country-txt{ float: right; width: 380px;margin-left: 20px;}
	.content .country .country-txt h2{ font-size: 20px;color: #2b2b2b;margin-bottom: 10px;}
	.content .country .country-txt p{ font-size: 14px;color: #909090;line-height: 22px;height: 66px;
	overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;}
	.content .country .country-txt .btn{ margin-top: 15px;cursor: pointer;float: right;line-height: 28px;text-align: center;color: #487cb0;font-size:12px;width: 78px;height: 28px; border-radius: 15px;border:1px solid rgb(72, 124, 176);}
	.content .country:hover{ border-top: 2px solid #487cb0;height: 198px;}
	.content .country:hover .country-txt .btn{ background: #487cb0; color: #fff;}
	.content .country .country-img,.content .country .country-txt{ margin-top: 20px; transition:margin-top 0.3s; }
	.content .country:hover .country-img,.content .country:hover .country-txt{ margin-top: 30px; }


	/*遮罩层*/
	#showbg{ 
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		z-index: 999;
		overflow: hidden;
		display: none;
	}

	/*遮罩层里的内容*/
	#showcon{
		position: fixed;    
		left: 50%;
		bottom: 0;
		margin-left: -565px; 
		width: 1130px; 
		height: 100%;
		background-color: #fff;  
		z-index:1002; 
		display: none;
		border-radius: 5px;
	}

	/* 遮罩层里的按钮 */
	#showcon .close{
	  border-radius: 50%;
	  background-color: rgb(248, 248, 248);
	  position: absolute;
	  right: 136px;
	  top: 50px;
	  width: 36px;
	  height: 36px;
	  font-size: 30px;
	  color: #a1a1a1;
	  text-align: center;
	  line-height: 33px;
	  cursor: pointer;

	}

	/*------------左侧内容------------*/
	#showcon .left-con{
		width: 249px;
		height: 100%;
		border-right: 1px solid #e1e1e1;
		float: left;
		padding-right: 30px;
	}
	#showcon .left-con .flag{
		float: right;
		width: 100%;
		margin:100px 0 30px; 
	}
	#showcon .left-con .flag img{
		float: right;
		width: 128px;
		height: 128px;
	}
	#showcon .left-con ul{
		float: right;
	}
	#showcon .left-con ul li a{
		font-size: 12px;
		color: #909090;
		text-decoration: none;
		line-height: 30px;
	}
	#showcon .left-con ul li.active a{
		font-size: 14px;
		color: #487cb0;
	}
	#showcon .left-con ul li{
		position: relative;
	}
	#showcon .left-con ul li .line{
		width: 15px;
		height: 1px;
		background: #487cb0;

		position: absolute;
		right: -28px;
		top: 50%;
		display: none;
	}
	#showcon .left-con ul li .circle{
		width: 5px;
		height: 5px;
		background:#487cb0; 
		border-radius: 50%;

		position: absolute;
		right: -33px;
		top: 43%;
		display: none;
	}
	#showcon .left-con ul li.active .line,#showcon .left-con ul li.active .circle{ display: block; }




	/*-------------右边内容-------------*/

	/******设置滚动条样式  目前只支持webkit内核的浏览器*******/
	.right-con::-webkit-scrollbar {
		  width: 7px;
	} /* 这是针对缺省样式 (必须的) */

	.right-con::-webkit-scrollbar-track {
		  background-color: rgba(0,0,0,0);
	} /* 滚动条的滑轨背景颜色 */

	.right-con::-webkit-scrollbar-thumb {
		  border-radius: 20px;
		  background-color: rgba(0, 0, 0, 0.2); 
	} /* 滑块颜色 */

	.right-con::-webkit-scrollbar-button {
		  background-color: rgba(0,0,0,0);
	} /* 滑轨两头的监听按钮颜色 */

	#showcon .right-con{
		width: 600px;
		padding: 0 50px;
		float: left;
		height: 55%;
		overflow-y: auto;
		overflow-x: hidden;
		margin-top: 100px;
	}
	#showcon .right-con h2{
		font-size: 20px;
		color: #2b2b2b;
	}
	#showcon .right-con h3{
		font-size: 14px;
		color: #2b2b2b;
		margin: 30px 0 10px;
	}
	/*#showcon .right-con ul{ list-style:disc inside; }*/
	#showcon .right-con ul,#showcon .right-con ol, #showcon .right-con .project p, #showcon .right-con .cost p{
		font-size: 12px;
		color: #909090;
		line-height: 25px;
	}
    #showcon .right-con .project_sum .project{ margin-top:15px;}
    
    #showcon .right-con .project_sum .project .project-img{
        width:100px;
        height:100px;    
		float: left;
		margin-right: 30px;
	}
    #showcon .right-con .project_sum .project .project-img img{ 
        width:100px;
        height:100px;    
	}
	#showcon .right-con .project h4{
		font-size: 14px;
		color:#487cb0;
	}
	#showcon .right-con h5, #showcon .right-bottom h5{
		color: #e62f17;
		font-size: 14px;
		font-weight: normal;
	}

	#showcon .right-con .project .project-txt{
		float: left;
		position: relative;
	}
	#showcon .right-con .project .project-txt p{
		width: 340px;
		margin: 5px 0 10px;
		height: 50px;
		overflow : hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	}
	#showcon .right-con .project .project-txt .btn{ 
		cursor: pointer;
		line-height: 28px;
		text-align: center;
		color: #487cb0;
		font-size:12px;
		width: 78px;
		height: 28px; 
		border-radius: 15px;
		border:1px solid rgb(72, 124, 176);
		position: absolute;
		right: -120px;
		top: 50px;
	}
	#showcon .right-con .project .project-txt .btn:hover{
		background: #487cb0; 
		color: #fff;
	}
	
	#showcon .right-con a{
		text-decoration: none;
	}



	/*--------右下部---------*/
	#showcon .right-bottom{
		float: left;
		margin-left: 50px;
	}
	#showcon .right-bottom a { text-decoration: none; }
	#showcon .right-bottom .estimate-btn{
		border-radius: 19px;
		width: 123px;
  		height: 39px;
  		background-color: rgb(72, 124, 176);
  		color: #fff;
  		font-size: 14px;
  		border:0;
  		text-align: center;
  		line-height: 39px;
  		margin: 50px 0 20px;
	}

}

/* 移动端适配版 */
@media screen and (max-width: 750px){
	/*banner*/
	.overseas_banner{ height: 600px;margin-top: 50px;background: url(../Images/overseas/overseas_banner.jpg) center no-repeat; }
	.overseas_banner h1{ font-size: 40px;color: #fff;text-align: center;padding-top: 200px; }
	
	/*正文内容*/
	.content{ width: 90%;margin: 50px auto; }
	.content .country{ cursor: pointer;width: 100%; height:198px;border-top: 1px solid #e1e1e1;}
	.content .country .country-img{ float: left;width: 25%;}
	.content .country .country-img img{ width: 100%; } 
	.content .country .country-txt{ float: right; width: 70%;}
	.content .country .country-txt h2{ font-size: 18px;color: #2b2b2b;margin-bottom: 10px;}
	.content .country .country-txt p{ font-size: 14px;color: #909090;min-height: 63px;
	overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;}
	.content .country .country-txt .btn{ margin-top: 10px;cursor: pointer;float: right;line-height: 25px;text-align: center;color: #487cb0;font-size:12px;width: 68px;height: 25px; border-radius: 15px;border:1px solid rgb(72, 124, 176);}
	.content .country .country-img,.content .country .country-txt{ margin-top: 20px; }


	/*遮罩层*/
	#showbg{ 
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		z-index: 999;
		overflow: hidden;
		display: none;
	}

	/*遮罩层里的内容*/
	#showcon{
		position: fixed;    
		left: 5%;
		bottom: 0;
		width: 90%; 
		height: 94%;
		margin: 3% auto;
		background-color: #fff;  
		z-index:1002; 
		display: none;
		border-radius: 5px;
	}

	/* 遮罩层里的按钮 */
	#showcon .close{
	  border-radius: 50%;
	  background-color: rgb(248, 248, 248);
	  position: absolute;
	  right: 2%;
	  top: 1%;
	  width: 36px;
	  height: 36px;
	  font-size: 30px;
	  color: #a1a1a1;
	  text-align: center;
	  line-height: 33px;
	  cursor: pointer;

	}

	/*--------------左侧内容--------------*/
	#showcon .left-con{
		width: 30%;
		height: 100%;
		border-right: 1px solid #e1e1e1;
		float: left;
		padding-right: 20px;
	}
	#showcon .left-con .flag{
		float: right;
		width: 80%;
		margin:60px 0 30px; 
	}
	#showcon .left-con .flag img{
		float: right;
		width: 100%;
	}
	#showcon .left-con ul{
		float: right;
		width: 80%;
		text-align: right;
	}
	#showcon .left-con ul li a{
		font-size: 12px;
		color: #909090;
		text-decoration: none;
		line-height: 30px;
	}
	#showcon .left-con ul li.active a{
		font-size: 14px;
		color: #487cb0;
	}
	#showcon .left-con ul li{
		position: relative;
	}
	#showcon .left-con ul li .line{
		width: 8px;
		height: 1px;
		background: #487cb0;

		position: absolute;
		right: -18px;
		top: 50%;
		display: none;
	}
	#showcon .left-con ul li .circle{
		width: 5px;
		height: 5px;
		background:#487cb0; 
		border-radius: 50%;

		position: absolute;
		right: -23px;
		top: 43%;
		display: none;
	}
	#showcon .left-con ul li.active .line,#showcon .left-con ul li.active .circle{ display: block; }




	/* --------------右边内容--------------*/
	#showcon .right-con{
		width: 50%;
		padding:0 5%;
		float: left;
		height: 65%;
		overflow-x: hidden;
		overflow-y: auto;
		margin-top: 20%;
	}
	#showcon .right-con h2{
		font-size: 18px;
		color: #2b2b2b;
	}
	#showcon .right-con h3{
		font-size: 14px;
		color: #2b2b2b;
		margin: 30px 0 10px;
	}
	/*#showcon .right-con ul{ list-style:disc inside; }*/
	#showcon .right-con ul,#showcon .right-con ol, #showcon .right-con .project p, #showcon .right-con .cost p{
		font-size: 12px;
		color: #909090;
	}

	#showcon .right-con .project h4{
		font-size: 14px;
		color:#487cb0;
	}
	#showcon .right-con h5{
		color: #e62f17;
		font-size: 14px;
		font-weight: normal;
	}
	#showcon .right-con .project{ width: 100%; margin-bottom: 40px;}
	#showcon .right-con .project .project-img{
		float: left;
		width: 55%;
	}
	#showcon .right-con .project .project-img img{width: 100%;}
	#showcon .right-con .project .project-txt{
		float: left;
		position: relative;
		width: 100%;
	}
	#showcon .right-con .project .project-txt p{
		width: 100%;
		margin: 5px 0 10px;
		height: 64px;
		overflow : hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 4;
	    -webkit-box-orient: vertical;
	}
	#showcon .right-con .project .project-txt .btn{ 
		cursor: pointer;
		line-height: 25px;
		text-align: center;
		color: #487cb0;
		font-size:12px;
		width: 68px;
		height: 25px; 
		border-radius: 15px;
		border:1px solid rgb(72, 124, 176);
		margin-top: 10px;
		float: left;
	}
	#showcon .right-con .project .project-txt .btn:hover{
		background: #487cb0; 
		color: #fff;
	}
	#showcon .right-con a{
		text-decoration: none;
	}




	/*--------右下部---------*/
	#showcon .right-bottom .estimate-btn{
		border-radius: 19px;
		width: 100px;
  		height: 30px;
  		background-color: rgb(72, 124, 176);
  		color: #fff;
  		font-size: 12px;
  		border:0;
  		text-align: center;
  		line-height: 30px;
  		margin: 30px 0 10px;
	}
	#showcon .right-bottom{
		float: left;
		width: 50%;
		padding: 0 5%;
	}
	#showcon .right-bottom a { text-decoration: none; }
	#showcon .right-bottom h5{ font-size: 12px;color: #e62f17;font-weight: normal; }

}