section {
  width: 100%;
  height: auto;
  margin: 0 auto;
  position: relative;
}

li {
  display: inline-block;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  overflow: hidden;
}

li p {
  color: white;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  margin-top: 1.175em;
}

.items {
  position: absolute;
  left: calc(50% - 481px);
  top:0;
}

.main-pos {
  z-index: 300;
  box-shadow:0 0 30px rgba(0,0,0,.3);
  max-width:90%;
}
	.main-pos img {
		width:100%;
	}

.left-pos {
  opacity: .5;
  margin-left: -50em !important;
  z-index: 100;
  -webkit-transform: scale(.75);
  -moz-transform: scale(.75);
  transform: scale(.75);
  box-shadow:inset 0 0 20px #000;
}

.back-pos {
  margin-left: 2em !important;
  opacity: .05;
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
  transform: scale(.5);
}

.right-pos {
  opacity: .5;
  margin-left:  50em !important;
  z-index: 100;
  -webkit-transform: scale(.75);
  -moz-transform: scale(.75);
  transform: scale(.75);
  box-shadow:inset 0 0 20px #000;
}

span {
  position: relative;
  margin: 0 auto;
  z-index:9999;
}

#prev {
	background:url(../../images/arrow_01.png) top left no-repeat;
	background-size:auto;
	width:70px;
	height:70px;
	position:absolute;
	top:38%;
	left:23%;
	z-index:400;
	border:0;
}
#next {
	background:url(../../images/arrow_02.png) top right no-repeat;
	background-size:auto;
	width:70px;
	height:70px;
	position:absolute;
	top:38%;
	right:23%;
	z-index:400;
	border:0;
}

/*htbnb*/
.htbnb {
	height:40em;
}
	@media screen and (max-width:1600px) {
		#next {
			right:17%;
		}
		#prev {
			left:17%;
		}
	}
	@media screen and (max-width:1400px) {
		#next {
			right:13%;
		}
		#prev {
			left:13%;
		}
	}
	@media screen and (max-width:1175px) {
		#next {
			right:6%;
		}
		#prev {
			left:6%;
		}
	}
	@media screen and (max-width:1065px) {
		#next {
			right:2%;
		}
		#prev {
			left:2%;
		}
		.items {
			left:5%;
		}
		.items img {
			width:100%;
		}
		.right-pos,.left-pos {
			width:100%;
		}
	}
	@media screen and (max-width:900px) {
		.htbnb_title img {
			width:32%;
		}
		#next {
			background-size:contain;
			width:50px;
			height:50px;
			right:1%;
		}
		#prev {
			background-size:contain;
			width:50px;
			height:50px;
			left:1%;
		}
		.main-pos {
			max-width:100%;
			width:96%;
			left:0;
			margin:0 2%;
		}
		.right-pos {
			margin-left: 20em !important;
		}
		.left-pos {
			margin-left: -20em !important;
		}
		.back-pos {
			width:100%;
		}
		.htbnb {
			height: 35em;
		}
	}
	@media screen and (max-width:830px) {
		.htbnb {
			height: 32em;
		}
	}
	@media screen and (max-width:730px) {
		.htbnb {
			height: 29em;
		}
	}
	@media screen and (max-width:630px) {
		.htbnb {
			height: 26em;
		}
		#next,#prev {
			width:45px;
			height:45px;
		}
	}
	@media screen and (max-width:530px) {
		.htbnb {
			height: 23em;
		}
	}
	@media screen and (max-width:430px) {
		.htbnb {
			height: 18em;
		}
		#next,#prev {
			width:35px;
			height:35px;
		}
		.htbnb_title img {
			width:40%;
		}
	}
	@media screen and (max-width:375px) {
		.htbnb {
			height: 15em;
		}
	}
	@media screen and (max-width:320px) {
		.htbnb {
			height: 13em;
		}
	}