.travelagent{
	.top{
		background: url($img_dir + 'travelagent-bg.jpg') no-repeat center top;
		background-size: cover;
		@include br3{
			background-position: 70% top;
		}
		header{
			background: transparent;
			padding-bottom: 35rem;
			@include br1{
				padding-bottom: 25rem;
			}
			@include br3{
				padding-bottom: 15rem;
			}
		}
	}
	.fly{
		@extend %fly;
	}
	.blue-head{
		display: flex;
		align-items: center;
		margin-bottom: 3rem;
		flex-wrap: wrap;
		@include br3{
			justify-content: center;
		}
	}
	.avatar{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 135px;
		height: 135px;
		border: 3px solid #269cd4;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 3rem;
		@include br3{
			margin: 1rem;
		}
		img{
			max-width: 70px;
		}
	}
	.info{
		background: url($img_dir + 'travelagent-info-bg.jpg') no-repeat center 100.1%;
		background-size: 100% auto;
		padding-bottom: 40%;
		.info-content{
			color: #000;
			.phone{
				border: 1px solid rgba(24,24,24,.3);
				margin-bottom: 15px;
				padding: 15px 10px;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				@include br3{
					justify-content: center;
				}
				.img{
					padding: 2rem 3rem;
					border-right: 1px solid rgba(24,24,24,.3);
					width: 96px;
					@include br3{
						width: 100%;
						border-bottom: 1px solid rgba(24,24,24,.3);
						border-right: none;
						text-align: center;
						padding: 2rem 3rem 3.5rem;
					}
				}
				.phone-text{
					padding: 1rem 3rem;
					font: 36px/1.2 $HL;
					color: #000000;
					width: calc(100% - 96px);
					@include br3{
						width: 100%;
						text-align: center;
						font-size: 30px;
						padding: 2rem 3rem 0.5rem;
					}
					a{
						color: #000000;
						font-family: $HB;
						&:hover{
							text-decoration: none;
						}
					}
				}
			}
		}
	}
}