@charset "UTF-8";
/*@mixin img-replace($img, $w: image-width($img), $h: image-height($img), $disp: block) {
    background: image-url($img) no-repeat;
    width: $w;
    height: $h;
    display: $disp;
}*/
/*color-set*/
/*mixin-set*/
/*@mixin bgblur($x) {
    filter: blur($x+px);
    -webkit-filter: blur($x+px);
    -moz-filter: blur($x+px);
    -ms-filter: blur($x+px);
    -o-filter: blur($x+px);
}*/
/*url*/
/*style set*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;500&display=swap");
html,
body {
  background: #d9d9d9;
  box-sizing: border-box;
  letter-spacing: 1px;
  -webkit-overflow-scrolling: touch;
  color: #000;
  font-size: 16px;
}
html a,
body a {
  box-sizing: border-box;
  text-decoration: none;
  display: block;
}

.hide {
  display: none !important;
}

.alcenter, .popup, #cboxClose:before, .popup--close:before, .header--container .logobox img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.fit {
  width: 100%;
  display: block;
}

/*font*/
@font-face {
  font-family: armin;
  src: url(../font/JohnnieWalkerSerif-Book.otf);
}
@font-face {
  font-family: armin;
  src: url(../font/NotoSerifTC-SemiBold.otf);
}
@font-face {
  font-family: dancing;
  src: url(../font/DancingScript-Regular.ttf);
}
@font-face {
  font-family: dancing;
  src: url(../font/ARXingShuB5Medium.otf);
}
.armin, .popup, .invoice--item--title, .orderform--item--title, .orderpage .order--title, .orderpage h1, .event-main .formbox .form h1, .event-main .showbox--menu--btn, .header--container .nav--menu--btn, .btn-main-s, .btn-main, .event-main .formbox .form input[type=submit], .note-highlight, h2, h1.title {
  font-family: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  /*font-family: ar-mingb5std , serif !important;*/
  /*font-family: ar-mingb5std,serif;*/
  font-weight: 500;
  font-style: normal;
}

.fonta {
  font-family: "dancing", serif !important;
  font-weight: 500;
}

.fontb {
  font-family: "armin" !important;
  font-weight: 500;
}

body {
  font-family: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-weight: 300;
}

.f-48, h1.title {
  font-size: 3rem;
  letter-spacing: 1px;
  /*<1280*/
  /*<1280*/
}
@media (max-width: 1279px) {
  .f-48, h1.title {
    font-size: 2rem;
  }
}
@media (max-width: 1279px) {
  .f-48, h1.title {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

h1.form--item--title {
  /*<1280*/
}
@media (max-width: 1279px) {
  h1.form--item--title {
    font-size: 1.5rem;
  }
}

.f-32 {
  font-size: 2rem;
  line-height: 2.8rem;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  .f-32 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
}

.f-24, .popup--title, .orderform, .orderpage .order--title, .btn-main-s, .btn-main, .event-main .formbox .form input[type=submit], h2 {
  font-size: 1.5rem;
  letter-spacing: 2px;
  /*<1280*/
}
@media (max-width: 1279px) {
  .f-24, .popup--title, .orderform, .orderpage .order--title, .btn-main-s, .btn-main, .event-main .formbox .form input[type=submit], h2 {
    font-size: 1.2rem;
  }
}

.f-18, .popup .popupcontent .genuine--brief, .ctabox .ordernum, .invoice, .orderpage .order--info, .orderpage .order .col-3 .quantity, .event-main .formbox .form input, .event-main .formbox .form select, .event-main .formbox .form .radiotext, .header--container .nav--menu--btn, .btn-text {
  font-size: 1.25rem;
  line-height: 1.5rem;
}
@media (max-width: 1023px) {
  .f-18, .popup .popupcontent .genuine--brief, .ctabox .ordernum, .invoice, .orderpage .order--info, .orderpage .order .col-3 .quantity, .event-main .formbox .form input, .event-main .formbox .form select, .event-main .formbox .form .radiotext, .header--container .nav--menu--btn, .btn-text {
    font-size: 1rem;
  }
}

p, .textfont {
  font-size: 1.1rem;
  letter-spacing: 1px;
  line-height: 2.4rem;
}
@media (max-width: 1023px) {
  p, .textfont {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/*uiset*/
html,
body {
  position: relative !important;
}
html.noscroll,
body.noscroll {
  overflow: hidden;
}
@media (max-width: 767px) {
  html,
body {
    /*position:fixed !important;*/
  }
}

.main {
  overflow: hidden;
}

.page {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background: url("../images/bg-main.jpg") center center no-repeat;
  background-size: cover;
  padding-bottom: 160px;
}
.page.rulebox {
  background: url("../images/bg-rule.jpg") center center no-repeat;
  background-size: cover;
}

.event {
  width: 100%;
  min-height: 100vh;
  background: url("../images/bg-main.jpg") center center no-repeat;
  background-size: 100% 100%;
}

h1.title {
  width: 100%;
  font-weight: 500;
  text-align: center;
  letter-spacing: 2px;
  color: #fff;
}

h2 {
  width: 100%;
  text-align: center;
  color: #fff;
}

p {
  width: 100%;
  color: #fff;
  text-align: center;
  font-weight: 500;
}

p.mark {
  font-size: 14px;
}

.centa {
  text-align: center;
  width: 100%;
}

.note-highlight {
  font-size: 18px;
  line-height: 24px;
  width: 90%;
  margin: -48px auto 0 auto;
  color: #c5cfe8;
  text-align: center;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  .note-highlight {
    font-size: 13px;
    width: 250px;
    margin: -4vh auto 0 auto;
  }
}

.popup .note-highlight {
  margin: 60px auto;
}

.btn-main, .event-main .formbox .form input[type=submit] {
  display: flex;
  width: 280px;
  height: 82px;
  background: url("../images/btn-main.png") center center no-repeat;
  background-size: contain;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  color: #fff;
  transition: 0.3s;
  padding-top: 4px;
}
.btn-main:hover, .event-main .formbox .form input[type=submit]:hover {
  color: #b7962e;
}

.btn-main-s {
  display: flex;
  width: 181px;
  height: 82px;
  background: url("../images/btn-main-s.png") center center no-repeat;
  background-size: contain;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  color: #fff;
  transition: 0.3s;
  padding-top: 4px;
}
.btn-main-s:hover {
  color: #b7962e;
}

.btn-text {
  display: block;
  padding: 8px 16px;
  color: #b7962e;
  transition: 0.3s;
}
.btn-text:hover {
  color: #fff;
}

input[type=radio] {
  display: none;
}
input[type=radio]:not(:disabled) ~ label {
  cursor: pointer;
}
input[type=radio]:disabled ~ label {
  border-color: #b7962e;
  box-shadow: none;
  cursor: not-allowed;
}

label {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #b7962e;
  border-radius: 4px;
  padding: 0 1rem;
  text-align: center;
  position: relative;
  transition: 0.3s;
}
label:hover {
  background: #b7962e;
}
label.check-popup {
  border: none;
  justify-content: flex-start;
}

input[type=radio]:checked + label {
  background: #b7962e;
  color: hsl(215deg, 0%, 100%);
}

input[type=radio]#control_05:checked + label {
  background: red;
  border-color: red;
}

input[type=submit],
.removebtn {
  transition: 0.3s;
  height: 50px;
}
input[type=submit]:hover,
.removebtn:hover {
  cursor: pointer;
  background: #b7962e !important;
}

select {
  min-width: 100px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/*shiningborder*/
.shiningborder, .popup, .ctabox, .orderform, .orderpage .order {
  position: relative;
  border: solid 1px #c9c9ab;
  box-shadow: -1px 0 1px 0 #c9c9ab;
  border-radius: 4px;
}
.shiningborder:before, .popup:before, .ctabox:before, .orderform:before, .orderpage .order:before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: url("../images/spotlight.png") center center no-repeat;
  background-size: contain;
  position: absolute;
  top: -25px;
  left: -25px;
}
.shiningborder:after, .popup:after, .ctabox:after, .orderform:after, .orderpage .order:after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: url("../images/spotlight.png") center center no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -25px;
  right: -25px;
}

/*slick*/
.slick-list {
  overflow: hidden;
  z-index: 2;
}

.slick-arrow {
  border-radius: 50%;
  text-indent: -5000px;
  width: 40px;
  height: 40px;
  border: solid 2px #b7962e;
  position: absolute;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 50%;
  cursor: pointer;
  transition: 0.3s;
  z-index: 99;
}
.slick-arrow.slick-prev {
  left: 0;
  background: #09192f url("../images/arrow-prev.png") center center no-repeat;
  background-size: 8px 8px;
}
.slick-arrow.slick-prev:hover {
  background: #b7962e url("../images/arrow-prev.png") center center no-repeat;
  background-size: 8px 8px;
}
.slick-arrow.slick-next {
  background: #09192f url("../images/arrow-next.png") center center no-repeat;
  background-size: 8px 8px;
  right: 0;
}
.slick-arrow.slick-next:hover {
  background: #b7962e url("../images/arrow-next.png") center center no-repeat;
  background-size: 8px 8px;
}

/*scroll*/
/* width */
.popup--container::-webkit-scrollbar, .form::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.popup--container::-webkit-scrollbar-track, .form::-webkit-scrollbar-track, select::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: none;
}

/* Handle */
.popup--container::-webkit-scrollbar-thumb, .form::-webkit-scrollbar-thumb, select::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: none;
}

/* Handle on hover */
.popup--container::-webkit-scrollbar-thumb:hover, .form::-webkit-scrollbar-thumb:hover {
  background: #b7962e;
}

/*select*/
select {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
select option {
  color: #09192f !important;
}

select::-webkit-scrollbar {
  display: none;
}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  max-width: none;
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
}

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left;
}

#cboxContent {
  position: relative;
}

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#cboxTitle {
  margin: 0;
}

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer;
}

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic;
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 16px;
}

#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
  background: #000;
}

#colorbox {
  outline: 0;
}

#cboxTopLeft {
  background: none;
}

#cboxTopRight {
  background: none;
}

#cboxBottomLeft {
  background: none;
}

#cboxBottomRight {
  background: none;
}

#cboxMiddleLeft {
  background: none;
}

#cboxMiddleRight {
  background: none;
}

#cboxTopCenter {
  background: none;
}

#cboxBottomCenter {
  background: none;
}

#cboxContent {
  background: transparent;
  overflow: hidden;
}

.cboxIframe {
  background: transparent;
}

#cboxError {
  padding: 50px;
  border: 1px solid #ccc;
}

#cboxTitle {
  position: absolute;
  bottom: 4px;
  left: 0;
  text-align: center;
  width: 100%;
  color: #949494;
}

#cboxCurrent {
  position: absolute;
  bottom: 4px;
  left: 58px;
  color: #949494;
}

#cboxLoadingOverlay {
  display: none !important;
}

#cboxLoadingGraphic {
  display: none !important;
}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  width: auto;
  background: none;
}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0;
}

#cboxSlideshow {
  position: absolute;
  bottom: 4px;
  right: 30px;
  color: #0092ef;
}

#cboxPrevious {
  display: none;
}

#cboxNext {
  display: none;
}

#cboxClose {
  position: absolute;
  top: 10px;
  right: 10px;
  background: red no-repeat 0px 0px;
  width: 30px;
  height: 30px;
  z-index: 1000;
  cursor: pointer;
}

.article #cboxClose {
  top: 56px;
}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
}

/*header*/
.header {
  width: 100%;
  height: 90px;
  background: #09192f;
  border-bottom: solid 4px #b7962e;
  position: fixed;
  z-index: 999;
  transition: 0.3s;
  /*<1280*/
}
.header--container {
  width: 90%;
  height: 90px;
  max-width: 1680px;
  margin: 0 auto;
}
.header--container .logobox {
  width: auto;
  height: 100%;
  display: block;
  box-sizing: border-box;
  padding-top: 10px;
  position: relative;
  float: left;
  margin-left: 24px;
}
.header--container .logobox img {
  height: 80%;
}
.header--container .logobox img.logo {
  display: block;
}
.header--container .logobox img.logobk {
  display: none;
}
.header--container .nav .ham {
  display: none;
  width: 60px;
  height: 60px;
  position: absolute;
  right: 0;
  top: 0px;
  padding-top: 16px;
  cursor: pointer;
  box-sizing: border-box;
}
.header--container .nav .ham--line {
  display: block;
  border-radius: 20px;
  width: 20px;
  height: 2px;
  margin: 6px auto;
  background: #b7962e;
}
.header--container .nav--menu {
  display: flex;
  flex-wrap: wrap;
  height: 90px;
  justify-content: flex-end;
}
.header--container .nav--menu--btn {
  color: #fff;
  font-weight: 500;
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0 44px;
  position: relative;
  transition: 0.3s;
}
.header--container .nav--menu--btn:hover {
  color: #b7962e;
}
.header--container .nav .num {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #b7962e;
  color: #fff;
  font-size: 0.8rem !important;
  font-weight: bold;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 8px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: calc(50% + 70px);
}
.header.bgshow {
  transition: 0.3s;
  background: #fff;
}
.header.bgshow .header--container .logobox img.logo {
  display: none;
}
.header.bgshow .header--container .logobox img.logobk {
  display: block;
}
.header.bgshow .header--container .nav--menu--btn {
  color: #000;
  font-weight: 500;
}
@media (max-width: 1279px) {
  .header {
    width: 100%;
    height: 60px;
  }
  .header--container {
    height: 60px;
  }
  .header--container .nav--menu {
    height: 60px;
  }
  .header--container .nav--menu--btn {
    margin: 0 24px;
  }
}
@media (max-width: 767px) {
  .header {
    width: 100%;
    height: 60px;
  }
  .header--container {
    height: 60px;
  }
  .header--container .nav .ham {
    display: block;
  }
  .header--container .nav--menu {
    height: 0;
    overflow: hidden;
    background: #09192f;
    position: absolute;
    width: 100%;
    left: 0;
    top: 64px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transition: 0.3s;
  }
  .header--container .nav--menu--btn {
    width: 100%;
    height: 80px;
    margin: 0;
    justify-content: center;
  }
  .header--container .nav--menu.active {
    height: 100vh;
  }
}

/*footer*/
.footer {
  text-align: center;
  padding: 20px 0;
}

/*index*/
.deco {
  display: none;
}

.kv {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  /*picture{
      display:block;
      width:100%;
      height:100%;
  }

  .kv--img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }


  @include rwd-mobile {
      height: calc(100vh - 64px);
      padding-top:64px;
  }*/ /*<1280*/
}
.kv--desktop {
  display: block;
  width: 100%;
  height: 100%;
}
.kv--desktop .kv--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.kv--mobile {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
}
.kv--mobile--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.kv--mobile--title {
  width: 80%;
  max-width: 560px;
  position: absolute;
  top: calc(90px + 5%);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 50%;
}
.kv--mobile--title--img {
  width: 100%;
  display: block;
}
.kv--mobile--title--btn {
  position: absolute;
  right: -32px;
  margin-top: 8px;
}
@media (max-width: 1279px) {
  .kv--desktop {
    display: none;
  }
  .kv--mobile {
    display: block;
  }
}

.warning {
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: 14px;
  z-index: 98;
  background: #09192f;
  padding-top: 10px;
}
.warning--box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 90%;
  max-width: 1680px;
  margin: 0 auto;
}
.warning--box--item {
  height: 32px;
  display: flex;
  align-items: center;
  margin: 0 16px 16px 16px;
  color: #fff;
}
.warning--box--item span {
  margin-right: 8px;
}
.warning--box--item .icon {
  height: 18px;
  margin: 0 8px;
}
.warning--box--item .icon img {
  display: block;
  height: 100%;
}
.warning--box--item a {
  display: block;
  color: #fff;
}
.warning--box--item:nth-child(1) {
  font-size: 18px;
}
.warning--alert {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .warning {
    font-size: 14px;
  }
  .warning--box {
    width: 100%;
  }
  .warning--box--item {
    height: 24px;
    margin: 0px 4px 8px 0px;
  }
  .warning--box--item span {
    margin-right: 4px;
    letter-spacing: 0;
  }
  .warning--box--item .icon {
    height: 14px;
    margin: 0 4px 0 0;
  }
  .warning--box--item:nth-child(1) {
    font-size: 16px;
  }
}

.rulebox {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rulebox .title {
  color: #b7962e;
  margin-bottom: 24px;
}
.rulebox .sub-title {
  letter-spacing: 17px;
  margin-top: 0px;
  margin-bottom: 30px;
}
.rulebox .sub-title span {
  padding-left: 30px;
}
.rulebox .deco {
  width: 50%;
  position: absolute;
  top: -9vw;
}
.rulebox .stepbox {
  width: 90%;
  max-width: 1280px;
  margin: 26px auto 48px auto;
  overflow: hidden;
}
.rulebox .stepbox--container {
  justify-content: center;
  width: 100%;
}
.rulebox .stepbox--container .stepbox--item {
  position: relative;
  box-sizing: border-box;
  padding: 0 50px;
}
.rulebox .stepbox--container .stepbox--item--img {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border-radius: 100%;
  overflow: hidden;
  display: none;
}
.rulebox .stepbox--container .stepbox--item--title {
  display: block;
  margin: 16px 0 22px 0;
  text-align: center;
  font-weight: 500;
  color: #b7962e;
}
.rulebox .stepbox--container .stepbox--item--title span {
  padding-left: 8px;
}
.rulebox .stepbox--container .stepbox--item p {
  line-height: 1.5rem;
  margin-top: 0px;
  letter-spacing: 1px;
  font-weight: 300;
}
.rulebox .stepbox--container .stepbox--item:nth-child(1), .rulebox .stepbox--container .stepbox--item:nth-child(2), .rulebox .stepbox--container .stepbox--item:nth-child(3) {
  margin-right: 72px;
}
.rulebox .stepbox--container .stepbox--item:nth-child(1):after, .rulebox .stepbox--container .stepbox--item:nth-child(2):after, .rulebox .stepbox--container .stepbox--item:nth-child(3):after {
  content: "";
  display: block;
  width: 16px;
  height: 21px;
  background: url("../images/icon-steparrow.png") center center no-repeat;
  background-size: contain;
  position: absolute;
  right: -24px;
  top: 16px;
}
@media (max-width: 1023px) {
  .rulebox .sub-title {
    letter-spacing: 8px;
  }
  .rulebox .sub-title {
    margin-bottom: 16px;
  }
  .rulebox .stepbox {
    width: 90%;
    margin: 24px auto;
  }
  .rulebox .stepbox--item {
    width: 210px;
  }
  .rulebox .stepbox--item:after {
    display: none !important;
  }
}

.event {
  padding-bottom: 220px;
}
.event--box {
  position: relative;
  padding-top: 10vh;
  height: 100vh;
  min-height: 1000px;
}
.event--box .title {
  margin-top: 0;
  margin-bottom: 0;
  color: #b7962e;
  display: none;
}
.event--box .rtlight {
  position: absolute;
  display: block;
  height: 70vh;
  max-height: 660px;
  top: 0;
  right: 0;
  z-index: 1;
}
.event--box .service--box {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.event--box .service--box--item {
  width: 20vw;
  height: 70vh;
  max-height: 660px;
  padding-top: 8vw;
}
.event--box .service--box--item img {
  display: block;
  height: 70%;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto;
}
.event--box .service--box--item .service--box--item--info {
  margin: -10% auto 0 auto;
}
.event--box .service--box--item .btn-main, .event--box .service--box--item .event-main .formbox .form input[type=submit], .event-main .formbox .form .event--box .service--box--item input[type=submit] {
  width: 90%;
  max-width: 280px;
}
.event--box .service--box:after {
  content: "";
  display: block;
  width: 100%;
  height: 100px;
  background: url(../images/bg-top.png) top center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 64%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 50%;
}
@media (max-width: 1023px) {
  .event--box .service--box--item {
    height: 80vh;
  }
  .event--box .service--box--item img {
    display: block;
    height: 80%;
    -o-object-fit: contain;
       object-fit: contain;
    margin: 0 auto;
  }
}

.whisky--box {
  width: 70%;
  max-width: 1340px;
  margin: 64px auto;
  position: relative;
  margin-top: 10vh;
  margin-bottom: 30vh;
  /*<1680*/
  /*<1280*/
}
.whisky--box:nth-child(4) {
  margin-bottom: 0;
}
.whisky--box .mainimg {
  width: 70%;
  height: 80vh;
  max-height: 520px;
  position: relative;
  border-top: solid 1px #c9c9ab;
  border-left: solid 1px #c9c9ab;
  border-right: none;
  border-bottom: solid 1px #c9c9ab;
  box-shadow: -1px 0 1px 0 #c9c9ab;
  border-radius: 4px;
  z-index: 2;
}
.whisky--box .mainimg .spotlight {
  display: block;
  width: 50px;
  height: 50px;
  background: url("../images/spotlight.png") center center no-repeat;
  background-size: contain;
  position: absolute;
}
.whisky--box .mainimg .spotlight.tl {
  top: -25px;
  left: -25px;
}
.whisky--box .mainimg .spotlight.br {
  bottom: -25px;
  right: -25px;
}
.whisky--box .mainimg img {
  display: block;
  width: 30%;
  position: absolute;
  bottom: 0px;
  left: 10%;
}
.whisky--box .mainimg:before {
  content: "";
  display: block;
  width: 1px;
  height: 25px;
  background: #c9c9ab;
  position: absolute;
  top: 1px;
  right: 0;
  box-shadow: 0 0 5px 0 #c9c9ab;
}
.whisky--box .mainimg:after {
  content: "";
  display: block;
  width: 1px;
  height: 25px;
  background: #c9c9ab;
  position: absolute;
  bottom: 1px;
  right: 0;
  box-shadow: 0 0 5px 0 #c9c9ab;
}
.whisky--box .maininfo {
  width: 57%;
  min-width: 764px;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 48%;
  left: 70%;
  z-index: 2;
}
.whisky--box .maininfo h2 {
  color: #b7962e;
}
.whisky--box:nth-child(3) .mainimg {
  margin-left: 30%;
  border-right: solid 1px #c9c9ab;
  border-left: none;
  box-shadow: 1px 0 1px 0 #c9c9ab;
}
.whisky--box:nth-child(3) .mainimg img {
  left: auto;
  right: 10%;
}
.whisky--box:nth-child(3) .mainimg .spotlight.tl {
  top: -25px;
  left: -25px;
}
.whisky--box:nth-child(3) .mainimg .spotlight.br {
  bottom: -25px;
  right: -25px;
}
.whisky--box:nth-child(3) .mainimg:before {
  left: 0;
}
.whisky--box:nth-child(3) .mainimg:after {
  left: 0;
}
.whisky--box:nth-child(3) .maininfo {
  top: 50%;
  left: 30%;
}
@media (max-width: 1679px) {
  .whisky--box {
    width: 80%;
  }
  .whisky--box .mainimg img {
    width: 36%;
  }
  .whisky--box .maininfo {
    width: 62%;
  }
}
@media (max-width: 1279px) {
  .whisky--box {
    width: 80%;
  }
  .whisky--box .mainimg img {
    width: 43%;
  }
  .whisky--box .maininfo {
    width: 70%;
    min-width: 600px;
    width: 600px;
  }
}
@media (max-width: 1023px) {
  .whisky--box {
    width: 80%;
  }
  .whisky--box .mainimg img {
    width: 40%;
  }
  .whisky--box .maininfo {
    width: 60%;
    min-width: 400px;
    width: 400px;
  }
}
@media (max-width: 767px) {
  .whisky--box {
    width: 100%;
    margin-top: 10vh;
    margin-bottom: 40vh;
  }
  .whisky--box .mainimg {
    width: 80%;
    height: 20vh;
    border: solid 1px #c9c9ab !important;
    left: auto !important;
    right: auto !important;
    margin: 0 auto !important;
  }
  .whisky--box .mainimg img {
    width: 50%;
    -webkit-transform: translateX(-50%) !important;
            transform: translateX(-50%) !important;
    left: 50% !important;
    bottom: -30px;
  }
  .whisky--box .mainimg:before, .whisky--box .mainimg:after {
    display: none;
  }
  .whisky--box .maininfo {
    position: relative;
    -webkit-transform: none !important;
            transform: none !important;
    min-width: 305px;
    width: 305px;
    top: auto !important;
    left: auto !important;
    margin: 0 auto !important;
  }
  .whisky--box .maininfo .widthset {
    letter-spacing: 0;
  }
}

.whisky--box {
  position: relative;
}
.whisky--box.blue:after {
  content: "";
  display: block;
  width: 38vw;
  height: 62vw;
  background: url("../images/ribbon_BL.png") center center no-repeat;
  background-size: contain;
  position: absolute;
  left: calc(-8vw - (100vw - 1340px) / 2);
  bottom: 20%;
  z-index: 0;
  /*<1680*/
}
@media (max-width: 1679px) {
  .whisky--box.blue:after {
    left: -12vw;
  }
}
@media (max-width: 767px) {
  .whisky--box.blue:after {
    left: -12vw;
    width: 120vw;
    height: 100vh;
  }
}
.whisky--box.XR23:after {
  content: "";
  display: block;
  width: 57vw;
  height: 33vw;
  background: url("../images/Ribbon_XR23.png") center center no-repeat;
  background-size: contain;
  position: absolute;
  right: -20vw;
  bottom: 20%;
  z-index: 0;
  /*<1680*/
}
@media (max-width: 1679px) {
  .whisky--box.XR23:after {
    right: -12vw;
    width: 80vw;
    height: 46vh;
  }
}
@media (max-width: 767px) {
  .whisky--box.XR23:after {
    right: -12vw;
    bottom: 0%;
    width: 120vw;
    height: 100vh;
  }
}
.whisky--box.XR21:after {
  content: "";
  display: block;
  width: 70vw;
  height: 29vw;
  background: url("../images/Ribbon_XR21.png") center center no-repeat;
  background-size: contain;
  position: absolute;
  left: -5vw;
  bottom: 30%;
  z-index: 0;
  /*<1680*/
}
@media (max-width: 1679px) {
  .whisky--box.XR21:after {
    left: 0;
  }
}
@media (max-width: 767px) {
  .whisky--box.XR21:after {
    left: 0;
    bottom: 0%;
    width: 150vw;
    height: 100vh;
  }
}

.kvarrow {
  display: none;
}

.indexpage .kvarrow {
  display: block;
  width: 44px;
  height: 28px;
  text-indent: -5000px;
  background: url("../images/arrow-kv.png") center center no-repeat;
  background-size: contain;
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 50%;
  top: -32px;
  cursor: pointer;
  -webkit-animation: arrowani 1s normal 0s infinite ease-in-out;
  animation: arrowani 1s normal 0s infinite ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes arrowani {
  0% {
    top: -32px;
  }
  50% {
    top: -37px;
  }
  100% {
    top: -32px;
  }
}
@keyframes arrowani {
  0% {
    top: -32px;
  }
  50% {
    top: -37px;
  }
  100% {
    top: -32px;
  }
}

/*event*/
.event-main {
  padding-top: 94px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  /*<1280*/
}
.event-main > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.event-main .showbox {
  width: 30%;
  height: 72vh;
  margin-right: 5%;
  transition: 1s;
  pointer-events: none;
}
.event-main .showbox--main {
  width: 100%;
  height: 90%;
  position: relative;
}
.event-main .showbox--main--item {
  width: 100%;
  height: 100%;
  display: none;
  position: relative;
}
.event-main .showbox--main--item img {
  display: block;
  width: 100%;
  position: relative;
}
.event-main .showbox--main--item .simulation {
  height: 100%;
  overflow: hidden;
  position: relative;
}
.event-main .showbox--main--item .simulation--img {
  display: block;
  width: auto;
  height: 100%;
  position: absolute;
  bottom: 0px;
}
.event-main .showbox--main--item .simulation--img.nomargin {
  margin-top: 0;
}
.event-main .showbox--main--item .simulation.xr .simulation--img.nomargin {
  height: 120%;
}
.event-main .showbox--main--item .simulation .roominbox {
  width: 96%;
  max-width: 300px;
  height: 30%;
  max-height: 233px;
  overflow: hidden;
  position: absolute;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
  top: 65%;
  border-radius: 4px;
  border: solid 1px #c9c9ab;
  box-shadow: 0 0 10px 0 #c9c9ab;
  background: #09192f;
}
.event-main .showbox--main--item .simulation .roominbox img {
  display: block;
  width: 100%;
  position: absolute;
  bottom: -50vh;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.event-main .showbox--main--item .simulation .roominbox--text {
  z-index: 9;
  color: #fff;
  width: 220px;
  text-align: center;
  text-shadow: 2px 2px 2px #000;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 4px;
}
.event-main .showbox--main--item .simulation .roominbox--text.fontb {
  letter-spacing: 3px;
}
.event-main .showbox--main--item.active {
  display: block;
}
.event-main .showbox--main .color, .event-main .showbox--main .cardempty, .event-main .showbox--main .cardinit {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.event-main .showbox--main .color.active, .event-main .showbox--main .cardempty.active, .event-main .showbox--main .cardinit.active {
  display: flex;
}
.event-main .showbox--main .color .beltcolor {
  position: absolute;
  display: none;
}
.event-main .showbox--main .color .beltcolor.selected {
  display: block;
}
.event-main .showbox--menu {
  width: 100%;
  /*display:flex;*/
  display: none;
  justify-content: space-between;
  margin-top: -3vh;
  position: relative;
  z-index: 1;
}
.event-main .showbox--menu--btn {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: solid 1px #c9c9ab;
  box-shadow: 0 0 1px 0 #c9c9ab;
  border-radius: 50%;
  color: #fff;
  border: solid 2px #b7962e;
  background: #09192f;
  box-shadow: 0 0 5px 0 #c9c9ab;
  cursor: pointer;
  transition: 0.3s;
}
.event-main .showbox--menu--btn:hover {
  background: #b7962e;
}
.event-main .formbox {
  width: 50%;
  max-width: 727px;
  box-sizing: border-box;
}
.event-main .formbox .title {
  font-size: 2rem;
  line-height: 3rem;
  margin: 0 0 8px 0;
}
.event-main .formbox p.mark {
  margin-top: 0;
}
.event-main .formbox .form {
  overflow: auto;
  border-radius: 4px;
  border: solid 1px #09192f;
  box-shadow: 0 3px 20px 0 #c9c9ab;
  padding: 48px;
  position: relative;
}
.event-main .formbox .form h1, .event-main .formbox .form p {
  text-align: left;
}
.event-main .formbox .form h1 {
  color: #b7962e;
  margin: 0;
  width: 30%;
  font-weight: normal;
}
.event-main .formbox .form p {
  margin: 4px 0;
}
.event-main .formbox .form p.highlight {
  color: #b7962e;
  font-size: 14px !important;
  margin-bottom: 16px;
}
.event-main .formbox .form .radiotext {
  color: #fff;
  font-weight: 500;
}
.event-main .formbox .form input, .event-main .formbox .form select {
  border: solid 1px #b7962e;
  color: #fff;
  background: none;
  border-radius: 4px;
  height: 50px;
  padding: 0 16px;
  box-sizing: border-box;
  outline: none;
}
.event-main .formbox .form input {
  width: 100%;
}
.event-main .formbox .form select {
  text-align: center;
  height: 48px;
}
.event-main .formbox .form select.custext-cate {
  width: 30%;
  margin-right: 4%;
}
.event-main .formbox .form select.custext-words {
  width: 65%;
}
.event-main .formbox .form select option {
  color: #09192f;
}
.event-main .formbox .form input[type=submit] {
  border: none;
}
.event-main .formbox .form input[type=submit]:hover {
  background: url(../images/btn-main.png) center center no-repeat !important;
  background-size: contain !important;
}
.event-main .formbox .form .actbox {
  width: 100%;
  margin: 24px 0;
}
.event-main .formbox .form--item {
  margin-bottom: 32px;
}
.event-main .formbox .form--item--title {
  font-size: 24px !important;
}
.event-main .formbox .form .togglebox {
  width: 100%;
  display: flex;
}
.event-main .formbox .form .togglebox .form--item--title {
  width: 30%;
  display: flex;
  align-items: center;
}
.event-main .formbox .form .togglebox .form--item--set {
  width: 70%;
  display: flex;
  justify-content: space-between;
}
.event-main .formbox .form .togglebox .form--item--set .togglebox--item {
  width: 48%;
}
.event-main .formbox .form .beltColor, .event-main .formbox .form .quantity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 1279px) {
  .event-main .formbox .form .form--item--title {
    width: 100%;
    margin-bottom: 16px !important;
  }
  .event-main .formbox .form p {
    margin: 8px 0;
  }
  .event-main .formbox .form .togglebox {
    flex-wrap: wrap;
  }
  .event-main .formbox .form .togglebox--item {
    width: 49%;
  }
  .event-main .formbox .form .custext-cate, .event-main .formbox .form .custext-words {
    width: 100% !important;
    margin-bottom: 8px;
  }
}
@media (max-width: 1023px) {
  .event-main .formbox {
    margin-top: -10vh;
  }
  .event-main .formbox .form .form--item--title {
    width: 100% !important;
    margin-bottom: 16px !important;
  }
  .event-main .formbox .form p {
    margin: 8px 0;
  }
  .event-main .formbox .form .togglebox .form--item--set {
    width: 100%;
  }
  .event-main .formbox .form .togglebox .form--item--set .togglebox--item {
    width: 49%;
  }
  .event-main .formbox .form .custext-cate, .event-main .formbox .form .custext-words {
    width: 100% !important;
    margin-bottom: 8px;
  }
}
@media (max-width: 767px) {
  .event-main.simufixed {
    padding-top: 88vh;
  }
  .event-main.simufixed .showbox {
    position: fixed;
    top: -5vh;
    transition: 1s;
    z-index: 100;
  }
  .event-main.simufixed .showbox:before {
    content: "";
    display: block;
    width: 125%;
    height: 100%;
    position: absolute;
    left: -12.5%;
    bottom: 10%;
    background: linear-gradient(180deg, #09192F 90%, rgba(9, 25, 47, 0) 100%);
    transition: 0.3s;
  }
  .event-main .showbox {
    width: 80%;
    margin-right: 0;
    margin-top: 0;
  }
  .event-main .showbox--main--item .simulation {
    overflow: hidden;
  }
  .event-main .showbox--main--item .simulation .simulation--img {
    margin-top: -10vh;
  }
  .event-main .showbox--main--item .simulation .simulation--img.nomargin {
    margin-top: 0;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    left: 50%;
    top: 0px;
  }
  .event-main .showbox--main--item .simulation.xr .simulation--img.nomargin {
    bottom: 0px;
    top: auto;
  }
  .event-main .showbox--main--item .simulation .roominbox {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    left: 49%;
    top: 65%;
  }
  .event-main .showbox--menu {
    margin-top: 0vh;
  }
  .event-main .formbox {
    width: 96%;
  }
  .event-main .formbox .title {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  .event-main .formbox .form {
    height: auto;
    overflow: none;
    padding: 16px 24px 24px 24px;
    margin-top: 24px;
  }
  .event-main .formbox .form h1.form--item--title {
    font-size: 1.3rem !important;
    margin-bottom: 16px;
    width: 100% !important;
  }
  .event-main .formbox .form p {
    color: #b7962e;
    margin-bottom: 8px;
    margin-top: 16px;
    letter-spacing: 0;
  }
  .event-main .formbox .form p.mark {
    color: #fff;
    margin-top: 0;
    margin-bottom: 8px;
  }
  .event-main .formbox .form .togglebox .form--item--set {
    width: 100%;
  }
  .event-main .formbox .form .custext-box .custext-cate {
    width: 100%;
    margin-bottom: 16px;
  }
  .event-main .formbox .form .custext-box .custext-words {
    width: 100%;
  }
}

/*order*/
.orderpage {
  padding-top: 124px;
  padding-bottom: 240px;
}
.orderpage h1 {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  color: #b7962e;
  margin-bottom: 24px;
}
.orderpage .order {
  width: 90%;
  max-width: 1280px;
  margin: 16px auto;
  box-shadow: 0 0 5px 0 #c9c9ab;
  box-sizing: border-box;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
}
.orderpage .order--title {
  width: 100%;
  color: #b7962e;
  margin-bottom: 24px;
  text-align: center;
  font-weight: normal;
}
.orderpage .order .col {
  box-sizing: border-box;
  padding: 8px;
}
.orderpage .order .col-1 {
  width: 20%;
  text-align: center;
}
.orderpage .order .col-2 {
  width: 60%;
}
.orderpage .order .col-3 {
  width: 10%;
  text-align: center;
}
.orderpage .order .col-3 .quantity {
  width: 90%;
  min-width: auto;
  height: 50px;
  border: solid 1px #b7962e;
  color: #fff;
  background: none;
  border-radius: 10px;
  padding: 0 16px;
  box-sizing: border-box;
  outline: none;
  text-align: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.orderpage .order .col-4 {
  width: 10%;
  text-align: center;
}
.orderpage .order .col-4 .removebtn {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: solid 1px #b7962e;
  font-size: 14px;
  color: #fff;
  background: none;
  border-radius: 10px;
}
.orderpage .order--info {
  color: #fff;
  font-weight: 500;
  margin-bottom: 16px;
}
.orderpage .order--info > div {
  margin-bottom: 16px;
}
.orderpage .order--info img {
  display: block;
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .orderpage .order {
    padding: 8px;
    justify-content: space-between;
  }
  .orderpage .order .col-1 {
    width: 30%;
  }
  .orderpage .order .col-2 {
    width: 70%;
  }
  .orderpage .order .col-3 {
    width: 30%;
  }
  .orderpage .order .col-4 {
    width: 30%;
  }
  .orderpage .order .col-4 .order--title {
    text-indent: -5000px;
  }
  .orderpage .order--info img {
    display: block;
    width: 50%;
    margin: 0 auto;
  }
}
@media (max-width: 413px) {
  .orderpage .order {
    padding: 8px;
  }
  .orderpage .order .col-1 {
    width: 28%;
  }
  .orderpage .order .col-2 {
    width: 72%;
    padding: 8px 0;
  }
  .orderpage .order .col-3 {
    width: 30%;
  }
  .orderpage .order .col-4 {
    width: 30%;
  }
  .orderpage .order--info img {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
}
.orderpage .order.summary {
  flex-wrap: nowrap;
  justify-content: flex-end;
  border: none;
  box-shadow: none;
  position: relative;
}
.orderpage .order.summary:before {
  display: none;
}
.orderpage .order.summary:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../images/bg-top.png") top center no-repeat;
  background-size: 100% 50%;
  position: absolute;
  bottom: -80%;
  left: 0;
}
.orderpage .order.summary .col-1 {
  width: 20%;
}
.orderpage .order.summary .col-2 {
  width: 40%;
}
.orderpage .order.summary .col-2 .order--title {
  text-align: right;
}
.orderpage .order.summary .col-3 {
  width: 20%;
}
.orderpage .order.summary .col-3 .order--title {
  text-align: right;
}
.orderpage .order.summary .col-4 {
  width: 20%;
}
.orderpage .order.summary .col-4 .order--title {
  text-align: right;
}
@media (max-width: 767px) {
  .orderpage .order.summary .col-1 {
    width: 0%;
  }
  .orderpage .order.summary .col-2 {
    width: 40%;
  }
  .orderpage .order.summary .col-2 .order--title {
    text-align: right;
  }
  .orderpage .order.summary .col-3 {
    width: 20%;
  }
  .orderpage .order.summary .col-3 .order--title {
    text-align: right;
  }
  .orderpage .order.summary .col-4 {
    width: 40%;
  }
  .orderpage .order.summary .col-4 .order--title {
    text-align: right;
  }
}
.orderpage p.mark {
  width: 80%;
  max-width: 1024px;
  margin: 0 auto 32px auto;
  color: #b7962e;
  font-size: 14px;
}
@media (max-width: 767px) {
  .orderpage {
    padding-top: 84px;
  }
}

.orderform {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}
.orderform--item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
}
.orderform--item--title {
  color: #b7962e;
  width: 100%;
  margin-bottom: 8px;
}
.orderform--item input,
.orderform--item select {
  height: 50px;
  border: solid 1px #b7962e;
  border-radius: 4px;
  background: none;
  color: #fff;
  padding: 0 8px;
}
.orderform--item input {
  flex: 1;
  max-width: 98%;
}
.orderform--item select {
  text-align: center;
}
.orderform--item select option {
  color: #09192f;
}
.orderform--item .col-2 {
  width: 32%;
  margin-bottom: 8px;
}
.orderform--item .col-2:nth-child(3) {
  margin-left: 2%;
  margin-right: 2%;
}
.actbox {
  width: 90%;
  max-width: 1024px;
  margin: 24px auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.actbox .btn-main, .actbox .event-main .formbox .form input[type=submit], .event-main .formbox .form .actbox input[type=submit] {
  margin: 0;
}
@media (max-width: 767px) {
  .actbox .btn-main, .actbox .event-main .formbox .form input[type=submit], .event-main .formbox .form .actbox input[type=submit] {
    width: 33%;
    min-width: 200px;
  }
}

.invoice {
  width: 90%;
  max-width: 1280px;
  margin: 16px auto;
  padding: 16px;
  box-sizing: border-box;
  color: #fff;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
}
.invoice--item {
  box-sizing: border-box;
  padding: 8px 24px;
  margin-bottom: 16px;
}
.invoice--item--title {
  color: #b7962e;
  padding-bottom: 8px;
}
.checkcontainer {
  width: 90%;
  max-width: 1280px;
  margin: 16px auto;
  color: #fff;
}
.checkcontainer a {
  color: #b7962e;
  text-decoration: underline;
  padding-left: 4px;
}
.checkcontainer input {
  margin-right: 5px;
}
.checkcontainer .check-popup {
  flex-wrap: wrap;
  background: none !important;
  font-size: 14px;
}

.ctabox {
  width: 90%;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 0 2px 0 #b7962e;
  color: #fff;
  box-sizing: border-box;
  padding: 48px 45px;
}
.ctabox .ordernum {
  text-align: center;
  font-weight: 500;
}
.ctabox .ordernum span {
  color: #b7962e;
  padding-left: 8px;
}
.ctabox--brief {
  margin: 16px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
}
.ctabox--brief span {
  display: block;
  margin-bottom: 16px;
}
.ctabox--brief a {
  color: #b7962e;
  display: inline-block;
}
.ctabox--qrcode {
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
}
.ctabox--qrcode img {
  display: block;
  width: 100%;
}

/*popup*/
#cboxLoadedContent {
  position: relative;
  overflow: hidden !important;
}

#cboxClose, .popup--close {
  width: 40px;
  height: 40px;
  background: #09192f;
  border-radius: 100%;
  position: absolute;
  border: solid 1px #b7962e;
  right: 8px;
  top: 8px;
  transition: 0.3s;
  cursor: pointer;
}
#cboxClose:before, .popup--close:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url("../images/x.png") center center no-repeat;
  background-size: 50%;
}
#cboxClose:hover, .popup--close:hover {
  background: #fff;
}

/*.popup{
    color:#fff;
    width:98%;
    height:98%;
    margin:1%;
    box-sizing: border-box;
    background:$blue-dark;
    padding:16px 5%;
    @extend .shiningborder;
    box-shadow: 0 0 2px 0 $gold-sub;
    @extend .armin;
    &--container{
        height:100%;
        overflow:auto;
    }

    &--title{
        @extend .f-24;
        color:$gold-main;
        font-weight: bold;
        text-align: center;
        margin:24px auto;
    }
    .popupcontent{
        font-weight: bold;
        &--title{
            color:$gold-main;
            margin:16px 0;

            span{
                display:block;
                margin:8px 0;
            }
        }
        &--content{
            font-size:14px;
            line-height: 20px;
            ul{
                counter-reset: item;
                padding:0;
                li{
                    list-style-type: none;
                    margin:8px 0;
                    padding-left:20px;
                    &:before{
                        display: inline-block;
                        content: counter(item) "";
                        counter-increment: item;
                        color: $gold-main;
                        display: inline-block;
                        border-radius: 50%;
                        margin: 0 0 0 -18px;
                        padding: 0 5px;
                    };
                }
            }

        }
        .genuine{
                &--img{
                    width:45%;
                    max-width: 200px;
                    height:auto;
                    margin:0px auto 48px auto;
                    img{
                        display:block;
                        width:100%;
                    }
                }
                &--brief{
                    width:90%;
                    margin:0 auto;
                    @extend .f-18;
                    line-height: 2rem;
                    margin:24px auto;
                    text-align: center;
                }
                &--actbox{
                    display:flex;
                    flex-wrap: wrap;
                    .closepopup{
                        width:100%;
                        max-width:280px;
                        box-sizing: border-box;
                        display:flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .sendinvoice{
                        margin:0 !important;
                    }
                }
        }
    }
}*/
.flexset {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.popupwrap {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
}

.popup {
  color: #fff;
  width: 96%;
  height: 96%;
  max-width: 960px;
  max-height: 800px;
  box-sizing: border-box;
  background: #09192f;
  padding: 16px 0.5%;
  box-shadow: 0 0 2px 0 #c9c9ab;
  display: none;
}
.popup--container {
  height: 100%;
  overflow: auto;
}
.popup--container > .popupcontent--subtitle {
  padding: 0 16px;
}
.popup--title {
  color: #b7962e;
  font-weight: bold;
  text-align: center;
  margin: 24px auto;
}
.popup .popupcontent {
  padding: 0 16px;
}
.popup .popupcontent--title {
  color: #b7962e;
  margin: 16px 0;
}
.popup .popupcontent--title span {
  display: block;
  margin: 8px 0;
}
.popup .popupcontent--content {
  font-size: 14px;
  line-height: 20px;
}
.popup .popupcontent--content ul {
  counter-reset: item;
  padding: 0;
}
.popup .popupcontent--content ul li {
  list-style-type: none;
  margin: 8px 0;
  padding-left: 20px;
}
.popup .popupcontent--content ul li:before {
  content: "";
  display: inline-block;
  /*content: counter(item) "";
  counter-increment: item;
  color: $gold-main;*/
  width: 8px;
  height: 8px;
  background: #b7962e;
  border-radius: 50%;
  margin: 0 10px 0 -18px;
}
.popup .popupcontent .genuine--img {
  width: 45%;
  max-width: 200px;
  height: auto;
  margin: 0px auto 48px auto;
}
.popup .popupcontent .genuine--img img {
  display: block;
  width: 100%;
}
.popup .popupcontent .genuine--brief {
  width: 90%;
  margin: 0 auto;
  line-height: 2rem;
  margin: 24px auto;
  text-align: center;
}
.popup .popupcontent .genuine--actbox {
  position: relative;
}
.popup .popupcontent .genuine--actbox .closepopup {
  width: 100%;
  max-width: 280px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: calc(50% - 220px);
}
@media (max-width: 767px) {
  .popup .popupcontent .genuine--actbox .closepopup {
    top: 120%;
    left: 50%;
  }
}
.popup .popupcontent .genuine--actbox .sendinvoice {
  margin: 0 auto !important;
}
.popup.popupopen {
  display: block;
}
.popup.personal .popupcontent ul li:before {
  display: none;
}

#footer {
  padding-bottom: 143px;
}
@media (max-width: 767px) {
  #footer {
    padding-bottom: 95px;
  }
}