.sidebanner {
  position: relative;
}
.sidebanner img {
  width: 100%;
}
.sidebanner .txt {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
.sidebanner .wp {
  position: relative;
  z-index: 2;
}
.sidebanner h1,
.sidebanner h2 {
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  font-family: var(--font-family-1);
  text-shadow: 2px 2px 4px #666;
}
.sidebanner p {
  color: #fff;
  font-size: 15px;
  margin: 15px 0 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 2px 2px 4px #666;
}
.sidebanner p i {
  font-size: 15px;
  color: #fff;
}
.sidebanner p a {
  color: #fff;
  text-shadow: 2px 2px 4px #666;
}

@media screen and (min-width: 1200px){
	.sidebanner .txt {
	  position: absolute;
	  left: 0;
	  right: 0;
	  top: 0;
	  bottom: 0;
	}
	.sidebanner .txt::after {
	  content: "";
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background: rgba(0, 0, 0, 0.2);
	}
}
@media screen and (max-width: 1199px){
	.sidebanner .txt {
		padding: 12px 0;
		background-color: #ECECEC;
		color: #333;
	}
	.sidebanner p a,
	.sidebanner p i,
	.sidebanner p{
		color: #333;
		text-shadow:none
	}
	.sidebanner .txt h1{
		display: none;
	}
	.sidebanner .txt h2{
		font-size: 24px;
	}
	.sidebanner p{
		margin: 0;
	}
}
@media screen and (max-width: 768px) {
  .sidebanner .txt h2 {
    font-size: 22px
  }
}

@media screen and (max-width: 767px) {
  .sidebanner .txt h2 {
    font-size: 16px
  }
}