.container { width: 100%; position: relative; }
.visual img { height: auto; min-width: 100%; object-fit: cover; }
.main-background-con { width: 100%; height: 390px; position: absolute; left: 0; top: 0; }
.main-background-con .main-background-image { display: none; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; }
.main-background-con .main-background-image.pc { display: block; }

.main-slide-con { max-width: 1040px; width: 100%; padding: 0 30px; margin: 30px auto 0; z-index: 100; }
.main-slide-con img { width: 100%; }
.main-swiper { width: 100%; height: 100%; }
.main-swiper .swiper-slide a { display: block; width: 100%; height: 100%; }
.swiper-button-next, .swiper-button-prev { width: 30px; height: 30px; position: absolute; top: 50%; transform: translate(0, -50%); margin-top: 0; }
.swiper-button-prev { left: 15px; background: url(../img/btn-back.png) no-repeat center / 100%; }
.swiper-button-next { right: 15px; background: url(../img/btn-next.png) no-repeat center / 100%; }
.swiper-pagination-bullet { width: 10px; height: 10px; background-color: #fff; opacity: 1; }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; }
.swiper-pagination-bullet-active { background-color: #00afff; }

.main-ticket-con { max-width: 1040px; width: 100%; position: relative; margin: 0 auto; padding: 30px 30px 0; }
.ticket-item { position: relative; width: 100%; margin-bottom: 30px; }
.ticket-item a { display: block; width: 100%; position: relative; padding-left: 48%; border-radius: 10px; box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.09); background-color: #fff; overflow: hidden; }
.ticket-item .ticket-thumb { width: 48%; height: 100%; position: absolute; left: 0; top: 0; background-repeat: no-repeat; background-position: center; background-size: cover; }
.ticket-item .ticket-info { width: 100%; height: 100%; padding: 35px 30px 30px; }
.ticket-item .ticket-name { font-size: 30px; line-height: 40px; letter-spacing: -1.5px; font-weight: 700; margin-bottom: 20px; }
.ticket-item .ticket-name em { display: block; }
.ticket-item .ticket-desc { font-size: 18px; line-height: 40px; letter-spacing: -0.9px; color: #888; padding-bottom: 25px; border-bottom: 1px solid #e8e8e8; word-break:break-all; }
.ticket-item .ticket-price { padding-top: 20px; }
.ticket-item .ticket-price:after { content: ""; display: block; clear: both; }
.ticket-item .ticket-price .sale-price { font-size: 25px; letter-spacing: 0.25px; color: #ff124a; font-weight: 700; padding-right: 10px; float: left; }
.ticket-item .ticket-price .price { font-size: 17px; letter-spacing: 0.17px; position: relative; float: left; padding-top: 7px; }
.ticket-item .ticket-price .price:after { content: ""; width: 100%; height: 1px; background-color: #000; position: absolute; left: 0; top: 65%; transform: translate(0, -50%); }

.main-search-con { max-width: 1040px; width: 100%; margin: -15px auto; padding: 0 30px 30px; }
.search-swiper { margin: 0 -15px; }
.search-swiper .swiper-wrapper { display: block; }
.search-swiper .swiper-slide { width: 25%; padding: 15px; float: left; }
.search-swiper .swiper-slide a { display: block; width: 100%; height: 320px; position: relative; padding-bottom: 203px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.09); overflow: hidden; transform: skew(-0.03deg); }
.search-swiper .swiper-slide .item-name { padding: 10% 5% 5px 5%; font-size: 27px; line-height: 35px; letter-spacing: -1.6px; font-weight: 700; }
.search-swiper .swiper-slide .item-name em { display: block; letter-spacing: -0.5px; }
.search-swiper .swiper-slide .item-name small { font-size: 20px; letter-spacing: -0.4px; }
.search-swiper .swiper-slide .item-thumb { width: 100%; height: 203px; position: absolute; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; }

@media all and (max-width: 1040px) {
	 .main-background-con .main-background-image { background-position: 55% 0%; }
	 .ticket-item .ticket-desc { line-height: 30px; }
}

@media all and (max-width: 940px) {
	 .main-ticket-con { padding-top: 30px; }
	 .search-swiper .swiper-slide { width: 50%; }
	 .search-swiper .swiper-slide a { height: 145px; padding-right: 48%; padding-bottom: 0; }
	 .search-swiper .swiper-slide .item-thumb { width: 48%; right: 0; }
	 .search-swiper .swiper-slide .item-name { font-size: 20px; padding-left: 10%; }
	 .search-swiper .swiper-slide .item-name small { font-size: 14px; }
}

@media all and (max-width: 900px) {
	 .main-background-con { height: 285px; }
	 .main-background-con .main-background-image { background-position: 60% 0%; }
}

@media all and (max-width: 800px) {
	 .main-background-con { height: 165px; }
	 .main-background-con .main-background-image.pc { display: none; }
	 .main-background-con .main-background-image.tablet { display: block; background-position: center; }

	 .swiper-button-next, .swiper-button-prev { width: 20px; height: 20px; }
	 .ticket-item { margin-bottom: 20px; }
	 .ticket-item .ticket-info { padding: 25px; }
	 .ticket-item .ticket-name { font-size: 22px; line-height: 30px; letter-spacing: -1.1px;  margin-bottom: 10px; }
	 .ticket-item .ticket-desc { font-size: 13px; line-height: 1.4; letter-spacing: -0.6px; padding-bottom: 10px; }
	 .ticket-item .ticket-price { padding-top: 20px; }
	 .ticket-item .ticket-price .sale-price { font-size: 18px; letter-spacing: 0.18px; padding-right: 5px; }
	 .ticket-item .ticket-price .price { font-size: 16px; letter-spacing: 0.12px; position: relative; padding-top: 2px; }
	 .ticket-item .ticket-price .price:after { top: 50%; margin-top: 2px; }
}

@media all and (max-width: 740px) {
	 .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 20px; }
	 .swiper-pagination-bullet { width: 6px; height: 6px; }
	 .main-ticket-con { padding: 40px 20px 0; z-index: 200; }
	 .ticket-item { margin-bottom: 40px; }
	 .ticket-item a { padding-left: 0; padding-top: 50vw; }
	 .ticket-item .ticket-thumb { width: 100%; height: 50vw; }
	 .ticket-item .ticket-info { width: 100%; padding: 15px 25px 25px; float: none; }
	 .ticket-item .ticket-name { font-size: 24px; line-height: 1.3; letter-spacing: -1.5px; margin-bottom: 10px; }
	 .ticket-item .ticket-desc { font-size: 16px; transform: skew(-0.04deg); padding-bottom: 10px; }
	 .ticket-item .ticket-price { padding-top: 10px; }
	 .ticket-item .ticket-price .sale-price { font-size: 20px; }
	 .ticket-item .ticket-price .price { padding-top: 3px; }

	 .main-search-con { padding: 0 20px; margin-bottom: 25px; }
	 .search-swiper .swiper-slide { width: 33.33%; }

	 .time-deal { bottom: 5%; left: 2%; }
	 .ticket-sticker { top: 5%; right: 2%; }
}

@media all and (max-width: 700px) {
	 #container { padding-bottom: 0; }
	 .search-swiper { margin: 0 -10px; padding: 15px 10px; }
	 .search-swiper .swiper-wrapper { display: flex; }
	 .search-swiper .swiper-slide { width: 220px; float: none; padding: 0; }
	 .search-swiper .swiper-slide a { height: 200px; padding-right: 0; padding-bottom: 110px; position: relative; }
	 .search-swiper .swiper-slide .item-thumb { width: 100%; height: 110px; bottom: 0; }
	 .search-swiper .swiper-slide .item-thumb img { clip: rect(0, 0, 110px, 0); }
	 .search-swiper .swiper-slide .item-name { padding: 20px 30px; line-height: 26px; }
	 .search-swiper .swiper-slide .item-name small { font-size: 15px; }
}

@media all and (max-width: 600px) {
	 .visual img { object-position: left; }
	 .main-background-con { height: 180px; }
	 .main-background-con .main-background-image.tablet { display: none; }
	 .main-background-con .main-background-image.mobile { display: block; background-position: left 70%; }
	 .main-slide-con { margin: 0; padding: 0; }
	 .swiper-button-next, .swiper-button-prev  { display: none; }
}

@media all and (max-width: 480px) {
	 .time-deal { padding: 0 140px 0 40px; width: 200px; height: 40px; line-height: 40px; font-size: 17px; background-position: 12px; background-size: 22px; }
	 .ticket-sticker { max-width: 70px; }
}