/*!
 _ _  _
| | || | ticket-mobile
| | || | INTERPARK UI Development Team
`___'|_| 0.13.1

*/
.pageMaskLayer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 995;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.5);
  display: none;
}

.pageMaskLayer.visible {
  display: block;
}

.sideMenuWrapper {
  position: fixed;
  top: 0;
  z-index: 996;
  width: 100%;
  min-height: 100%;
  background: #fff;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.sideMenuWrapper.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.sideMenuWrapper .sideContentsWrapper {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.sideMenuWrapper .sideContentsWrapper .innerContents {
  padding-bottom: 45px;
}

.sideMenuWrapper .myWrapper {
  box-sizing: border-box;
  padding: 31px 25px 0;
  width: 100%;
  white-space: nowrap;
}

.sideMenuWrapper .myWrapper a {
  display: block;
  padding: 9px 0;
}

.sideMenuWrapper .myWrapper.logIn a .col {
  display: inline-block;
  vertical-align: top;
}

.sideMenuWrapper .myWrapper.logIn a .col:first-child {
  padding-right: 8px;
}

.sideMenuWrapper .myWrapper.logIn a .name {
  padding: 4px 0 3px;
  font-size: 22px;
  line-height: 1;
  color: #2e2e2e;
}

.sideMenuWrapper .myWrapper.logIn a .name span {
  font-weight: bold;
}

.sideMenuWrapper .myWrapper.logIn a .grade {
  display: block;
  width: 29px;
  height: 29px;
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: auto 100%;
  font-size: 0;
  font-weight: bold;
  text-transform: uppercase;
}

.sideMenuWrapper .myWrapper.logIn a .grade.vvip {
  color: #491d76;
  background-image: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/snb/icons_vvip.png");
}

.sideMenuWrapper .myWrapper.logIn a .grade.vip {
  color: #089b97;
  background-image: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/snb/icons_vip.png");
}

.sideMenuWrapper .myWrapper.logIn a .grade.family {
  color: #dd1f1f;
  background-image: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/snb/icons_family.png");
}

.sideMenuWrapper .myWrapper.logIn a .grade.welcome {
  color: #898989;
  background-image: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/snb/icons_welcome.png");
}

.sideMenuWrapper .myWrapper.logOut a span {
  position: relative;
  display: inline-block;
  padding: 3px 14px 0 32px;
  font-size: 18px;
  color: #2e2e2e;
  background: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/snb/icon_logOut.png") no-repeat 0 50%;
  background-size: auto 90%;
  line-height: normal;
}

.sideMenuWrapper .myWrapper.logOut a span:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 6px;
  height: 6px;
  margin: auto 0;
  border: 1px solid #888;
  border-left: 0;
  border-bottom: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  pointer-events: none;
}

.sideMenuWrapper .ticketStateWrapper {
  padding: 0 25px;
  overflow: hidden;
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-bottom: 1px solid #d8d8d8;
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap .col {
  display: table-cell;
  vertical-align: top;
  text-align: center;
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap .col:first-child {
  text-align: left;
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap .col:last-child {
  text-align: right;
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap a {
  display: block;
  padding: 11px 0;
  font-size: 12px;
  color: #2e2e2e;
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap a .name {
  position: relative;
  display: inline-block;
  padding: 3px 0 3px 31px;
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: auto 100%;
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap a .name em {
  white-space: nowrap;
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap a .name .counter {
  display: block;
  position: absolute;
  top: -8px;
  left: 15px;
  min-width: 9px;
  border-radius: 7.5px;
  background-color: #f8524a;
  padding: 1px 3px;
  font-size: 10px;
  text-align: center;
  color: #fff;
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap a:active {
  background-color: rgba(238, 238, 238, 0.7);
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap a.reserveCancel .name {
  background-image: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/snb/icons_checkCancel.png");
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap a.reserveWaiting .name {
  background-image: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/snb/icons_reserve.png");
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap a.coupons .name {
  background-image: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/snb/icons_coupons.png");
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap a.like .name {
  background-image: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/snb/icons_like.png");
}

.sideMenuWrapper .ticketStateWrapper .ticketStateWrap a.alarm .name {
  background-image: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/snb/icons_alarm.png");
}

.sideMenuWrapper .prodCategoryWrapper {
  padding: 14px 0 15px;
}

.sideMenuWrapper .prodCategoryWrapper .titleWrap {
  padding: 13px 25px;
}

.sideMenuWrapper .prodCategoryWrapper .titleWrap .title {
  font-size: 16px;
  font-weight: normal;
  color: #2e2e2e;
}

.sideMenuWrapper .prodCategoryWrapper .categoriesList {
  padding: 0 15px;
}

.sideMenuWrapper .prodCategoryWrapper .categoriesList ul {
  overflow: hidden;
}

.sideMenuWrapper .prodCategoryWrapper .categoriesList ul.cell5 li {
  width: 20%;
}

.sideMenuWrapper .prodCategoryWrapper .categoriesList ul.cell5 li a .icons {
  width: 45px;
  height: 45px;
  padding: 0;
}

.sideMenuWrapper .prodCategoryWrapper .categoriesList ul li {
  float: left;
  width: 25%;
  text-align: center;
}

.sideMenuWrapper .prodCategoryWrapper .categoriesList ul li a {
  display: block;
  padding: 9px 0;
  background-repeat: no-repeat;
  background-position: 50% 10px;
  background-size: auto 50%;
  font-size: 12px;
  color: #2e2e2e;
  text-align: center;
}

.sideMenuWrapper .prodCategoryWrapper .categoriesList ul li a .icons {
  width: 50px;
  height: 50px;
  margin: 0 auto 7px;
  padding: 0 10px;
}

.sideMenuWrapper .prodCategoryWrapper .categoriesList ul li a .icons img {
  display: block;
  width: 100%;
}

.sideMenuWrapper .prodCategoryWrapper .categoriesList ul li a .name {
  display: block;
  white-space: nowrap;
}

.sideMenuWrapper .prodCategoryWrapper .categoriesList ul li a:active {
  border-radius: 3px;
  background-color: rgba(238, 238, 238, 0.7);
}

.sideMenuWrapper .pointBannerWrapper {
  padding: 0 15px;
}

.sideMenuWrapper .pointBannerWrapper .pointBannerWrap a {
  display: block;
}

.sideMenuWrapper .pointBannerWrapper .pointBannerWrap a img {
  display: block;
  width: 100%;
}

.sideMenuWrapper .pointServiceWrapper {
  padding: 19px 0 20px;
}

.sideMenuWrapper .pointServiceWrapper .titleWrap {
  padding: 13px 25px;
}

.sideMenuWrapper .pointServiceWrapper .titleWrap .title {
  font-size: 16px;
  font-weight: normal;
  color: #2e2e2e;
}

.sideMenuWrapper .pointServiceWrapper .serviceList ul {
  overflow: hidden;
}

.sideMenuWrapper .pointServiceWrapper .serviceList ul li {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding: 0 20px;
}

.sideMenuWrapper .pointServiceWrapper .serviceList ul li a {
  position: relative;
  display: block;
  padding: 7px 5px;
  font-size: 14px;
  color: #2e2e2e;
}

.sideMenuWrapper .pointServiceWrapper .serviceList ul li a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
  display: block;
  width: 8px;
  height: 8px;
  margin: auto 0;
  border: 1px solid #9b9b9b;
  border-left: 0;
  border-bottom: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.sideMenuWrapper .pointServiceWrapper .serviceList ul li a:active {
  border-radius: 3px;
  background-color: rgba(238, 238, 238, 0.7);
}

.sideMenuWrapper .pointServiceWrapper + .recentProdListWrapper {
  border-top: 1px solid #d8d8d8;
}

.sideMenuWrapper .noticeWrapper {
  padding: 10px 25px;
  background-color: #fafafa;
}

.sideMenuWrapper .noticeWrapper .titleWrap {
  font-size: 0;
  overflow: hidden;
  line-height: normal;
}

.sideMenuWrapper .noticeWrapper .noticeListWrap {
  position: relative;
}

.sideMenuWrapper .noticeWrapper .noticeListWrap .tag {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  min-width: 12px;
  padding: 4.5px 5px 3.5px;
  margin: auto 0;
  border-radius: 10px;
  border: .1rem solid #f8524a;
  vertical-align: top;
  font-size: 10px;
  text-align: center;
  line-height: 1;
  color: #f8524a;
}

.sideMenuWrapper .noticeWrapper .noticeListWrap .noticeList {
  padding-left: 35px;
  height: 20px;
  overflow: hidden;
}

.sideMenuWrapper .noticeWrapper .noticeListWrap .noticeList ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.sideMenuWrapper .noticeWrapper .noticeListWrap .noticeList ul li {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  position: relative;
  white-space: nowrap;
  font-size: 0;
}

.sideMenuWrapper .noticeWrapper .noticeListWrap .noticeList ul li a {
  display: block;
}

.sideMenuWrapper .noticeWrapper .noticeListWrap .noticeList ul li a .text {
  box-sizing: border-box;
  width: 85%;
  padding: 4px 30px 4px 4px;
  vertical-align: top;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1;
  color: #2e2e2e;
}

.sideMenuWrapper .noticeWrapper .noticeListWrap .noticeList ul li a .date {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  margin: auto 0;
  padding: 4px 0;
  font-size: 12px;
  line-height: 1;
  color: #888;
}

.sideMenuWrapper .noticeWrapper .noticeListWrap .noticeList ul li a:active {
  background-color: #f1f1f1;
}

.sideMenuWrapper .recentProdListWrapper {
  padding: 14px 0 10px;
}

.sideMenuWrapper .recentProdListWrapper .titleWrap {
  padding: 13px 25px;
}

.sideMenuWrapper .recentProdListWrapper .titleWrap .title {
  font-size: 16px;
  font-weight: normal;
  color: #2e2e2e;
}

.sideMenuWrapper .recentProdListWrapper .recentProdList {
  height: 98px;
  box-sizing: border-box;
  padding: 4px 25px 0;
  overflow: hidden;
}

.sideMenuWrapper .recentProdListWrapper .recentProdList ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.sideMenuWrapper .recentProdListWrapper .recentProdList ul li {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  position: relative;
  width: 72px;
  height: 93px;
  overflow: hidden;
}

.sideMenuWrapper .recentProdListWrapper .recentProdList ul li a {
  display: block;
}

.sideMenuWrapper .recentProdListWrapper .recentProdList ul li a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sideMenuWrapper .recentProdListWrapper .recentProdList ul li .deleteBtn {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

.sideMenuWrapper .recentProdListWrapper .recentProdList ul li .deleteBtn:before, .sideMenuWrapper .recentProdListWrapper .recentProdList ul li .deleteBtn:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 1px;
  height: 12px;
  margin: auto;
  background-color: transparent;
  pointer-events: none;
}

.sideMenuWrapper .recentProdListWrapper .recentProdList ul li .deleteBtn:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.3);
}

.sideMenuWrapper .recentProdListWrapper .recentProdList ul li .deleteBtn:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-shadow: -0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.3);
}

.sideMenuWrapper .recentProdListWrapper .recentProdList ul li .deleteBtn span {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  vertical-align: top;
  font-size: 0;
  overflow: hidden;
}

.sideMenuWrapper .recentProdListWrapper .recentProdList ul li .deleteBtn span:before, .sideMenuWrapper .recentProdListWrapper .recentProdList ul li .deleteBtn span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 1px;
  height: 12px;
  margin: auto;
  background-color: #fff;
  pointer-events: none;
  z-index: 1;
}

.sideMenuWrapper .recentProdListWrapper .recentProdList ul li .deleteBtn span:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.sideMenuWrapper .recentProdListWrapper .recentProdList ul li .deleteBtn span:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.sideMenuWrapper .recentProdListWrapper .recentProdList ul li .deleteBtn:active span {
  background-color: #222222;
}

.sideMenuWrapper .recentProdListWrapper .noRecentProdWrap {
  height: 98px;
}

.sideMenuWrapper .recentProdListWrapper .noRecentProdWrap p {
  padding: 42px 0;
  font-size: 13px;
  line-height: 1;
  color: #888;
  text-align: center;
}

.sideMenuWrapper .serviceLinkWrapper {
  padding: 14px 25px 27px;
}

.sideMenuWrapper .serviceLinkWrapper .serviceLink {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.sideMenuWrapper .serviceLinkWrapper .serviceLink .col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.sideMenuWrapper .serviceLinkWrapper .serviceLink .col a {
  display: block;
  padding: 5px 0;
  font-size: 12px;
  color: #2e2e2e;
  text-align: center;
}

.sideMenuWrapper .serviceLinkWrapper .serviceLink .col a .imgWrap {
  display: block;
  width: 35px;
  height: 35px;
  margin: 0 auto;
  padding-bottom: 9px;
}

.sideMenuWrapper .serviceLinkWrapper .serviceLink .col a .imgWrap img {
  display: block;
  width: 100%;
}

.sideMenuWrapper .serviceLinkWrapper .serviceLink .col a .name {
  white-space: nowrap;
}

.sideMenuWrapper .serviceLinkWrapper .serviceLink .col a:active {
  border-radius: 3px;
  background-color: rgba(238, 238, 238, 0.7);
}

.sideMenuWrapper .infoMenuWrapper {
  position: relative;
  padding: 0 25px 50px;
}

.sideMenuWrapper .infoMenuWrapper:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  display: block;
  width: 110px;
  height: 17px;
  margin: 0 auto;
  background: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/snb/logo_interparkTicket.png") no-repeat 50% 50%;
  background-size: 95% auto;
}

.sideMenuWrapper .infoMenuWrapper .infoMenu {
  padding-top: 12px;
  border-top: 1px solid #e5e5e5;
}

.sideMenuWrapper .infoMenuWrapper .infoMenu ul {
  text-align: center;
  font-size: 0;
}

.sideMenuWrapper .infoMenuWrapper .infoMenu ul li {
  display: inline-block;
  vertical-align: middle;
}

.sideMenuWrapper .infoMenuWrapper .infoMenu ul li + li {
  font-size: 0;
}

.sideMenuWrapper .infoMenuWrapper .infoMenu ul li + li:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 9px;
  vertical-align: middle;
  background-color: #ddd;
}

.sideMenuWrapper .infoMenuWrapper .infoMenu ul li a {
  vertical-align: middle;
  display: inline-block;
  padding: 6px 12px 6px 14px;
  font-size: 11px;
  color: #888;
}

.sideMenuWrapper .infoMenuWrapper .infoMenu ul li a:active {
  border-radius: 5px;
  background-color: rgba(238, 238, 238, 0.5);
}

.sideMenuWrapper .closeBtnWrapper {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  font-size: 0;
}

.sideMenuWrapper .closeBtnWrapper button {
  position: relative;
  width: 100%;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: #000;
  overflow: inherit;
}

.sideMenuWrapper .closeBtnWrapper button:before, .sideMenuWrapper .closeBtnWrapper button:after {
  content: "";
  position: absolute;
  top: -5px;
  box-sizing: border-box;
  display: block;
  width: 50%;
  height: 0;
  border: 5px solid #000;
  border-top: 0;
  pointer-events: none;
}

.sideMenuWrapper .closeBtnWrapper button:before {
  left: 0;
  border-right-color: transparent;
}

.sideMenuWrapper .closeBtnWrapper button:after {
  right: 0;
  border-left-color: transparent;
}

.sideMenuWrapper .closeBtnWrapper button span {
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
  font-size: 0;
  pointer-events: none;
}

.sideMenuWrapper .closeBtnWrapper button span:before, .sideMenuWrapper .closeBtnWrapper button span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 2px;
  height: 18px;
  margin: auto;
  background-color: #fff;
  pointer-events: none;
}

.sideMenuWrapper .closeBtnWrapper button span:before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.sideMenuWrapper .closeBtnWrapper button span:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.navigationBar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 900;
  width: 100%;
  height: 45px;
  background-color: #000;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: -webkit-transform .4s ease;
  transition: -webkit-transform .4s ease;
  transition: transform .4s ease;
  transition: transform .4s ease, -webkit-transform .4s ease;
}

.navigationBar.hidden {
  -webkit-transform: translate(0, 100%);
  transform: translate(0, 100%);
}

.navigationBar .navWrapper ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.navigationBar .navWrapper ul li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  font-size: 10px;
  text-align: center;
}

.navigationBar .navWrapper ul li a {
  display: block;
  padding: 5px 0 3px;
  color: #949494;
}

.navigationBar .navWrapper ul li a .name {
  position: relative;
  display: inline-block;
  width: 23px;
  padding-top: 24px;
}

.navigationBar .navWrapper ul li a .name:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 21px;
  height: 21px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100%;
}

.navigationBar .navWrapper ul li a:active {
  background-color: #111;
}

.navigationBar .navWrapper ul li.current a {
  color: #fff;
}

.navigationBar .navWrapper ul li.current a .name:before {
  background-position: 0 100%;
}

.navigationBar .navWrapper ul li.home a .name:before {
  background-image: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/navigationBar/icons_home.png");
}

.navigationBar .navWrapper ul li.menu a .name:before {
  background-image: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/navigationBar/icons_menu.png");
}

.navigationBar .navWrapper ul li.search a .name:before {
  background-image: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/navigationBar/icons_search.png");
}

.navigationBar .navWrapper ul li.mypage a .name:before {
  background-image: url("//ticketimage.interpark.com/TicketImage/uidev/mticket/images/common/navigationBar/icons_my.png");
}