.ui-fol-wp{
	width: 1103px;
	height: 900px;
	/*background-color: red;*/
	padding-left: 18px;
	margin:0 auto;

}

.ui-year-block{
	width: 121px;
	height: 30px;
	margin: 0 auto;
}

.ui-port-content{
	width:1200px;
	height: 860px;
	float: left;
	overflow: hidden;
	/*background-color: green;*/
}
.ui-port-w{
	width: 1200px;
	height: 860px;
	float: left;
	display: none;
	transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
	overflow-y: scroll;
}

.wwww{
	width: 1200px;
	height: auto;
	float: left;
	overflow: hidden;

}

.fol-toggle{
	width: 70px;
	height: 100px;
	/*background: red;*/
	position: absolute;
	margin-left: 33px;
	display: none;
	margin-top: 30px;
	z-index: 2;
}

.fol-toggle .fol-btn{
	margin-top: 10px;
}
.fol-btn{
  border: none;
  outline: none;
  background-color: #d0d0d0;
  cursor: pointer;
  width: 70px;
  height: 30px;
  border-radius: 5px;
  font-family: CGFontB;
  color: #767575;
  line-height: 30px;
  float: left;

}

.fol-active, .fol-btn:hover {
  background-color: #bb020f;
  color: white;
}

.fol-prev{
	width: 7px;
	height: 20px;
	float: left;
	background: url('../image/arrow-port.png')no-repeat;
	border:0;
	margin-right: 10px;
	background-position: left;
	cursor: pointer;
	margin-top: 5px;
	margin-left: 8px;
}

.fol-prev:hover,.fol-next:hover{
	background: url('../image/arrow-portred.png')no-repeat;

}
.fol-next{
	width: 7px;
	height: 20px;
	float: left;
	background: url('../image/arrow-port.png')no-repeat;
	border:0;
	margin-left: 10px;
	background-position: left;
	cursor: pointer;
	margin-top: 5px;
	transform: rotate(180deg);
}


.dg-left, .dg-right{
	width: 553px;
	height: 850px;
	float: left;
	/*background-color: red;*/
}

.dg-line{
	width: 3px;
	height: auto;
	background-color: #0681c6;
	float: left;

}

.dg-circle:first-child{
	width: 5px;
	height: 5px;
	border: 3px solid #f3f3f3;
	float: left;
	background-color: #bb020f;
	border-radius: 50%;
	margin-left: -4px;
	margin-top: 137px;
}

.dg-circle{
	width: 5px;
	height: 5px;
	border: 3px solid #f3f3f3;
	float: left;
	background-color: #bb020f;
	border-radius: 50%;
	margin-left: -4px;
	margin-top: 67px;
}

.dg-circle:nth-child(3){
	width: 5px;
	height: 5px;
	border: 3px solid #f3f3f3;
	float: left;
	background-color: #bb020f;
	border-radius: 50%;
	margin-left: -4px;
	margin-top: 153px;
	
}

.dg-circle:nth-child(5){
	width: 5px;
	height: 5px;
	border: 3px solid #f3f3f3;
	float: left;
	background-color: #bb020f;
	border-radius: 50%;
	margin-left: -4px;
	margin-top: 153px;
	
}

.dg-circle:nth-child(7),.dg-circle:nth-child(9),.dg-circle:nth-child(11),.dg-circle:nth-child(13),
.dg-circle:nth-child(15),.dg-circle:nth-child(17),.dg-circle:nth-child(19),.dg-circle:nth-child(21){
	width: 5px;
	height: 5px;
	border: 3px solid #f3f3f3;
	float: left;
	background-color: #bb020f;
	border-radius: 50%;
	margin-left: -4px;
	margin-top: 153px;
	
}

.port-wp-left{
	margin-right: 20px;
	margin-top: 82px;
	float: right;
}

.port-bubble-left { 
	position: relative; 
	background: #fff; 
	width: 487px;
	height: 132px;
	float: right;
	border: 1px solid #c7c5c5;
	

} 

.port-bubble-left:after { 
	content: ''; 
	position: absolute; 
	right: -14px; 
	top: 20px; 
	/*left: 20px;*/
	width: 0; 
	height: 0; 
	border: 14px solid transparent; 
	border-left-color: #c7c5c5; 
	border-right: 0; 
	
}

.port-name-yr{
	float: right;
	width: 100%;
	height: 25px;
	/*background-color: red;*/
	text-align: right;
	color: #4b4b4b;
	font-family: CGFontB;
	font-size: 10.3pt;
	text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.port-name-yl{
	/*float: right;*/
	width: 336px;
	height: 25px;
	/*background-color: red;*/
	text-align: right;
	color: #4b4b4b;
	font-family: CGFontB;
	font-size: 10.3pt;
		text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.port-p-img{
	width: 89px;
	height: 89px;
	background-color: #0681c6;
	content: 'Image here';
	float: left;
	margin-top: 8px;
	margin-left: 8px;
}

.port-data-p{
	margin-left: 8px;
	width: 373px;
	height: 131px;
	/*background-color: red;*/
	float: left;
	
}

.port-data-p table{
	border-collapse: collapse;
	font-family: CGFont;
	text-align: right;
	width: 367px;
	margin-top: 8px;
	margin-right: 10px;
	float: left;
}

.port-data-p tr:nth-child(odd){
	color: #8a8888;
	font-family: CGFont;
	text-transform: uppercase;
	font-size: 7pt;
	letter-spacing: 1px;
	height: 15px;
	vertical-align: bottom;
}

.port-data-p tr:nth-child(even){
	/*border:1px solid;*/
	color: #0681c6;
	font-size: 9pt;
	height: 23px;
	vertical-align: top;
	
	/*font-family: CGFontB;*/

}

.port-data-p tr:nth-child(even) td{
  	max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.port-bubble-right { 
	background: #fff; 
	width: 487px;
	height: 132px;
	float: right;
	border: 1px solid #c7c5c5;
	position: relative;
	margin-right: 35px;
} 

.port-bubble-right:after { 
	content: ''; 
	position: absolute; 
	left: -14px; 
	top: 25px; 
	width: 0; 
	height: 0; 
	border: 14px solid transparent; 
	border-right-color: #c7c5c5; 
	border-left: 0; 

	
}

.port-wp-right:first-child{
	margin-top: 155px;
	float: right;
}

.port-wp-right{
	margin-top: 80px;
	float: right;
}

.port-wp-right a{
	text-decoration: none;
}

.port-wp-right .port-name-yl{
	text-align: left;
}

.port-bubble-right .port-data-p table{
	border-collapse: collapse;
	font-family: CGFont;
	text-align: left;
	width: 210px;
	margin-top: 8px;
	/*margin-left: 12px;*/
	float: left;
}

.port-bubble-right .port-p-img{
	width: 89px;
	height: 89px;
	background-color: #0681c6;
	content: 'Image here';
	float: left;
	margin-left: 8px;
	/*margin-top: 15px;*/
	/*margin-right: 5px	*/
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn .5s ease-in 1 forwards;
}

.is-paused {
  animation-play-state: paused;
}