@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap");
.f-14, .sec-exhibition--list .card-item .card-info .period--date, .heroarea--brand .infobox .contact .contact-link, .header .logobox--lan, .infoLan--item {
  font-size: 14px;
  line-height: 20.3px;
}

.f-14-m, .step .step-container .step-item, .expo-list .item .item-main .expo-info .expo-date {
  font-size: 14px;
  line-height: 20.3px;
  font-weight: 500;
}

.f-16, .regFee.forrefund .regFee-booth .col .regFee-booth--item, .regFee.forrefund .regFee-booth .col .regFee-booth--item .item-title, .formbox {
  font-size: 15px;
  line-height: 21.75px;
}

.f-16-m, .midarea-item-brand.additem .showbox .logo span, .b-nav .nav-tri--item a, .btn {
  font-size: 15px;
  line-height: 21.75px;
  font-weight: 500;
}

.f-18, .addon-list .item .item-price {
  font-size: 18px;
  line-height: 26.1px;
}

.f-18-m, .regFee-booth--item, .midarea-item-brand .showbox .name, .company-item .company-info, .b-pd-list .item .title, .title-tri {
  font-size: 18px;
  line-height: 26.1px;
  font-weight: 500;
}

.f-20-m {
  font-size: 20px;
  line-height: 29px;
  font-weight: 500;
}

.f-24, .heroarea--brand .infobox .name {
  font-size: 24px;
  line-height: 34.8px;
  font-weight: 400;
}

.f-24-m, .cart-amount .amount-num, .addon-product .product-intro .product-price, .addon-product .product-intro .product-name, .regFee-booth--item.item-count, .regFee .title, .step .step-cancel, .expo-list .item .item-main .expo-info .expo-name, .midarea--header-sub .title, .midarea--header--container--info .name, .sayhi, .form-edit .form--use--exposp .regFee-box .title span, .modal .modalBox--title, .title-form, .title-sub {
  font-size: 24px;
  line-height: 34.8px;
  font-weight: 500;
}

.f-24-b, .card-item .card-info .card-title {
  font-size: 24px;
  line-height: 34.8px;
  font-weight: 700;
}

.f-32-b, .regFee-booth--amount .amount .amount-num, .member--avatar .textAvatar span, .title-large {
  font-size: 32px;
  line-height: 46.4px;
  font-weight: 700;
}

.br4 {
  border-radius: 4px;
}

.br6, .msg-replybox .msgBox--main, .msg-timeline--item .container .msg-content, .msg-type-tag span, .msgfunbox--search, .midarea.brandset .midarea--header--container--img, .midarea.companyset .midarea--header--container--img, .b-pd--info--main .b-pd--info--conbox .conbox--val .valbox--val, .b-pd-list .item .pri-box--item input, .infoLan--item, .infoLan--drop--container, .infoLan--drop--selected, .checkmark, .custom-select, .uploadbox .uploadbox--container .uploadbox--btn, .form-edit .autocomplete, .form-edit .form--use--orderInfo, .form-edit .form--use--select, .form-edit .form--use--check, .form-edit .form--use--radio, .form-edit .form--use--textarea, .form-edit .form--use--input, .form-edit .form--use--autolayout.uploaduse, .pagenation .page-btn, .formbox {
  border-radius: 6px;
}

.br8, .midarea-item-brand .showbox .logo, .midarea--nav--btn .msg-alert, .btn {
  border-radius: 8px;
}

.br12, .msglist--item--box, .midarea-item-brand, .logReg--box .form-message .title-sub, .show-flt .flt-tag--item, .form-edit .form--use--exposp, .note-ex {
  border-radius: 12px;
}

.br16, .card-item, .modal .modalBox {
  border-radius: 16px;
}

.shadow-main, .focus a .brandlogo, .modal .pdbox, .modal .modalBox {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
}

.hide {
  display: none !important;
}

.alcenter, .addon-list .item .item-cover img, .addon-product .product-slide--container .img-item .imgbox img, .step .step-container:after, .expo-list .item .item-main .imgbox img, .midarea-item-brand .showbox .logo img, .company-item .company-logo img, .company-item .company-logo .imgbox, .midarea--header--container--img img, .b-pd--info--main .b-pd--info--slider .thumb-box .thumb-box--item .imgcontainer img, .b-pd--info--main .b-pd--info--slider .img-box .img-box-popup .img-box-item img, .b-pd-list .item .imgbox img, .focus a .brandlogo, .heroarea--cover .imgbox img, .heroarea--brand .infobox .logobox img, .heroSlider--item--cta img, .checkNumBox.checked .expendcheck:after, .brand--item .brandInfo .imgLogo img, .brand--item .brandCover-s img, .brandSlider--item .brandInfo .imgLogo img, .brandSlider--item .brandCover-w img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.alhcenta {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.imgfull, .brand--item .brandInfo .imgLogo img, .brand--item .brandCover-s img, .brandSlider--item .brandInfo .imgLogo img, .brandSlider--item .brandCover-w img {
  display: block;
  width: 100%;
  height: 100%;
}

/*style set*/
html, body {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 21.75px;
  scroll-behavior: smooth;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: 1px;
  -webkit-overflow-scrolling: touch;
  word-wrap: break-word;
}
html a, body a {
  box-sizing: border-box;
  text-decoration: none;
  display: block;
}
html img, body img {
  display: block;
}
html p, body p {
  word-wrap: break-word;
  word-break: break-word;
}

.main {
  padding-top: 80px;
  padding-bottom: 48px;
}
@media (max-width: 1023px) {
  .main {
    padding-top: 50px;
  }
}
.main.btnone {
  padding-bottom: 0;
}
.main.main-gray {
  background: #FAFAFA;
}

.hide {
  display: none;
}

.colbox {
  width: 94%;
  max-width: 800px;
  margin: 0 auto;
}

.fcol-50 {
  width: 50%;
}

.flexbox {
  display: flex;
}
.flexbox.wrap {
  flex-wrap: wrap;
}

.w-full, .show-flt--container {
  width: 90% !important;
  max-width: 1280px !important;
  margin: 0 auto;
}

.w-wide {
  width: 90% !important;
  max-width: 1150px !important;
}

.w-xlwide {
  margin-left: auto;
  margin-right: auto;
  width: 94% !important;
  max-width: 1400px !important;
}

.fullbox {
  width: 100%;
}

.inner-post {
  width: 94%;
  max-width: 800px;
  margin: 24px auto;
}

.noscroll {
  overflow-y: hidden;
}

.pointer {
  cursor: pointer;
}

.highlight-gold {
  color: #A69A23;
}

.highlihgt-pink {
  color: #DE0065;
}

.text-center {
  text-align: center;
}

.title-max {
  font-size: 60px;
  line-height: 72.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: #000;
  text-align: center;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  .title-max {
    font-size: 32px;
    line-height: 46.4px;
  }
}

.title-large {
  letter-spacing: 0;
  color: #000;
  text-align: center;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  .title-large {
    font-size: 26px;
    line-height: 37.7px;
  }
}

.title-sub {
  text-align: center;
  margin: 24px 0;
}

.title-tri {
  margin: 24px 0;
}

.title-form {
  margin: 24px 0 8px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.title-form--word {
  margin-right: 24px;
}
.title-form--note {
  font-size: 14px;
  color: #DE0065;
  margin-bottom: -5px;
}

p.lightP {
  line-height: 26px;
  color: #3C3C3C;
}

.mt-16 {
  margin-top: 16px;
}

.justify-center {
  justify-content: center;
}

.socialbox {
  display: flex;
  margin-left: -16px;
  gap: 16px;
}
.socialbox a {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.socialbox a svg {
  fill: #9B9B9B !important;
}
.socialbox a:hover {
  border-color: #FFE800;
}
.socialbox a:hover svg {
  fill: #FFE800 !important;
}

.tag {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 3px 8px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 6px;
}
.tag.outline {
  border: solid 1px #FAFAFA;
  border-radius: 4px;
}
.tag.bggraylight {
  background: #FAFAFA;
}

.note-ex {
  background: #DE0065;
}
.note-ex.ex-easy-step {
  color: #fff;
  text-align: center;
  padding: 12px;
  margin-top: 24px;
}

.icon-must {
  position: relative;
}
.icon-must:after {
  content: "*";
  font-size: 12px;
  color: #DE0065;
  position: absolute;
  left: -7px;
  top: 2px;
}

.formbox {
  display: flex;
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  align-items: center;
}
.formbox.outline {
  border: solid 1px #CDCDCD;
}
.formbox.drop {
  justify-content: space-between;
}
.formbox.drop span {
  padding-right: 16px;
  color: #FFE800;
}
.formbox.drop img {
  display: block;
  width: 10px;
  height: 100%;
}
.formbox.inputText {
  background: none;
  color: #FFE800;
  outline: none;
}

.pagenation {
  width: 94%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 8px;
}
.pagenation .page-btn {
  padding: 8px 8px;
  background: #FAFAFA;
  color: #3C3C3C;
  transition: 0.3s;
}
.pagenation .page-btn.active, .pagenation .page-btn:hover {
  background: #645B1B;
  color: #FFE800;
}

.brandSlider--item {
  box-sizing: border-box;
  padding: 16px;
}
.brandSlider--item .brandCover-w {
  width: 100%;
  padding-bottom: 62%;
  display: block;
  position: relative;
}
.brandSlider--item .brandCover-w img {
  object-fit: cover;
}
.brandSlider--item .brandInfo {
  width: 100%;
  height: auto;
  background: #FAFAFA;
  padding: 24px 0;
}
.brandSlider--item .brandInfo .imgLogo {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto 8px auto;
  background: #fff;
  border: solid 1px #FAFAFA;
  box-sizing: border-box;
}
.brandSlider--item .brandInfo .imgLogo img {
  object-fit: contain;
}
.brandSlider--item .brandInfo .brandName {
  text-align: center;
  color: #3C3C3C;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  height: 40px;
  width: 94%;
  margin: 0 auto;
}

.brand--item {
  box-sizing: border-box;
  padding: 16px;
}
.brand--item .brandCover-s {
  width: 100%;
  padding-bottom: 100%;
  display: block;
  position: relative;
}
.brand--item .brandCover-s img {
  object-fit: cover;
}
.brand--item .brandInfo {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: -40px 0 16px 0;
}
.brand--item .brandInfo .imgLogo {
  width: 80px;
  height: 80px;
  position: relative;
  background: #fff;
  border-radius: 40%;
  padding: 8px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
.brand--item .brandInfo .imgLogo img {
  object-fit: contain;
}
.brand--item .brandInfo .brandName {
  color: #3C3C3C;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  width: 100%;
  text-align: center;
  padding: 8px 16px 0 16px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .brand--item .brandInfo .imgLogo {
    width: 60px;
    height: 60px;
  }
}

.modal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  transition: 0.3s;
  opacity: 0;
  display: none;
  z-index: 20;
}
.modal .modalBox {
  width: 86%;
  max-width: 500px;
  padding-bottom: 16px;
  background: #fff;
  overflow: hidden;
  position: relative;
}
.modal .modalBox--header {
  width: 100%;
  background: #F4F3E3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
  box-sizing: border-box;
}
.modal .modalBox--header img {
  width: 100px;
  height: auto;
  margin: 18px auto;
}
.modal .modalBox--title {
  text-align: center;
  margin: 32px auto;
  padding: 0 16px;
}
.modal .modalBox--title span {
  display: block;
}
@media (max-width: 767px) {
  .modal .modalBox--title {
    font-size: 20px;
    line-height: 29px;
  }
}
.modal .modalBox--actbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0 16px;
  justify-content: content;
  gap: 16px;
  justify-content: center;
  margin-bottom: 16px;
}
.modal .pdbox {
  width: 98%;
  max-width: 800px;
  background: #fff;
  overflow: hidden;
  position: relative;
}
.modal .pdbox img {
  width: 100%;
  height: auto;
}
.modal .modalClose {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  cursor: pointer;
  background: #9B9B9B;
  transition: 0.3s;
  position: absolute;
  right: 8px;
  top: 8px;
}
.modal .modalClose img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.modal .modalClose:hover {
  background: #000;
}
.modal.open {
  display: flex;
  opacity: 1;
}

.cus-slt .custom-select .select-selected {
  color: #FFE800;
}
.cus-slt .custom-select .select-items {
  background: #FAFAFA;
}
.cus-slt .custom-select .select-items div {
  color: #A69A23;
}

.form-org .form-item {
  width: 100%;
  letter-spacing: 0;
  margin-bottom: 12px;
}
.form-org .form-item--title {
  padding: 8px 0;
}
.form-org .form-item--title .note {
  font-size: 14px;
  padding-left: 4px;
}
.form-org .form-item .formbox {
  background: #fff;
}
.form-org .form-item .formbox input {
  width: 100%;
  border: none;
  outline: none;
  color: #645B1B;
  height: 30px;
}
.form-org .form-item .form-error {
  font-size: 14px;
  line-height: 20.3px;
  color: #DE0065;
  padding: 2px 8px;
  display: block;
  margin-top: 8px;
  position: relative;
}
.form-org .form-item .form-error:after {
  content: "*";
  font-size: 12px;
  color: #DE0065;
  position: absolute;
  left: 0px;
  top: 0;
}
.form-org .form-item.agreebox {
  margin-top: 16px;
}
.form-org .form-item.agreebox label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-org .form-item.agreebox input {
  width: 20px;
  height: 20px;
}
.form-org .form-item.agreebox span a {
  display: inline-block;
  text-decoration: underline;
  color: #645B1B;
  letter-spacing: 1px;
  padding: 0 3px;
}
.form-org .form-item.agreebox span a:hover {
  color: #000;
}
.form-org .form-actbox {
  display: flex;
  margin: 24px 0;
  justify-content: center;
}
.form-org .form-note {
  margin: 8px auto;
  text-align: center;
}
.form-org .form-note a {
  display: inline-block;
  text-decoration: underline;
  color: #645B1B;
  letter-spacing: 1px;
  padding: 0 3px;
}
.form-org .form-note a:hover {
  color: #000;
}

.form-edit .form--use {
  width: 100%;
  letter-spacing: 0;
  margin-bottom: 12px;
}
.form-edit .form--use--title {
  color: #645B1B;
  padding: 8px 0 12px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.form-edit .form--use--title.subcolor {
  color: #3C3C3C;
}
.form-edit .form--use--autolayout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.form-edit .form--use--autolayout.uploaduse {
  background: #fff;
  padding: 16px;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.form-edit .form--use--autolayout .upload .uploadbox input {
  color: inherit;
}
.form-edit .form--use--autolayout .pdSpec {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.form-edit .form--use--autolayout .pdSpec input::placeholder {
  color: #CDCDCD;
}
.form-edit .form--use--autolayout .pdSpec .grow {
  flex-grow: 1;
}
.form-edit .form--use--autolayout .pdSpec--item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.form-edit .form--use--autolayout .pdSpec--item--set {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-edit .form--use--autolayout .pdSpec--prize {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-edit .form--use--autolayout .pdSpec--prize .currency {
  min-width: 100px;
}
.form-edit .form--use--group {
  width: calc(50% - 4px);
}
@media (max-width: 479px) {
  .form-edit .form--use--group {
    width: 100%;
  }
}
.form-edit .form--use--input {
  background: #fff;
  padding: 8px 16px;
  box-sizing: border-box;
  border: solid 1px #F1F1F1;
}
.form-edit .form--use--input input {
  width: 100%;
  border: none;
  outline: none;
  color: #000;
  height: 100%;
}
.form-edit .form--use--input input.subcolor {
  color: #9B9B9B;
}
.form-edit .form--use--input.full {
  flex-grow: 1;
}
.form-edit .form--use--input.readonly {
  background: #F1F1F1;
}
.form-edit .form--use--input.readonly input {
  background: none;
}
.form-edit .form--use--textarea {
  background: #fff;
  padding: 8px;
  box-sizing: border-box;
  border: solid 1px #F1F1F1;
  width: 100%;
}
.form-edit .form--use--textarea textarea {
  border: none;
  width: 100%;
  min-height: 100px;
  outline: none;
}
.form-edit .form--use--radio {
  background: #fff;
  padding: 8px 16px;
  border: solid 1px #F1F1F1;
}
.form-edit .form--use--check {
  background: #fff;
  padding: 8px 16px;
  border: solid 1px #F1F1F1;
}
.form-edit .form--use--check input {
  width: 15px;
  height: 15px;
  margin-right: 4px;
}
.form-edit .form--use--select {
  background: #fff url(/images/icon/icon-arrow.svg) center right 12px no-repeat;
  background-size: 7px;
  padding: 8px 16px;
  border: solid 1px #F1F1F1;
  box-sizing: border-box;
  min-width: 120px;
}
.form-edit .form--use--select select {
  -webkit-appearance: none; /* Remove default arrow icon in iOS */
  appearance: none;
  border: none;
  outline: none;
  width: 100%;
  color: inherit;
  background: none !important;
}
.form-edit .form--use--select select.countrycode {
  min-width: 120px;
}
.form-edit .form--use--select select option {
  -webkit-text-fill-color: #3C3C3C;
  opacity: 1;
}
.form-edit .form--use--error {
  font-size: 14px;
  line-height: 20.3px;
  color: #DE0065;
  padding: 2px 8px;
  display: none;
  margin-top: 8px;
  position: relative;
}
.form-edit .form--use--error:after {
  content: "";
  font-size: 12px;
  color: #DE0065;
  position: absolute;
  left: 0px;
  top: 0;
}
.form-edit .form--use--error.show {
  display: block;
}
.form-edit .form--use--actbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}
.form-edit .form--use--actbox button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.form-edit .form--use--orderInfo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #3C3C3C;
  justify-content: space-between;
  margin-top: 16px;
  gap: 8px;
  padding: 12px;
  background: #fff;
  box-sizing: border-box;
}
.form-edit .form--use--orderInfo .title {
  padding-right: 8px;
  box-sizing: border-box;
}
.form-edit .form--use--orderInfo .content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-edit .form--use--orderInfo .order-num {
  width: 100%;
  display: flex;
}
.form-edit .form--use--orderInfo .order-type {
  display: flex;
}
.form-edit .form--use--orderInfo .order-act {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
@media (max-width: 767px) {
  .form-edit .form--use--orderInfo {
    justify-content: flex-start;
  }
}
.form-edit .form--use--subflex {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 24px;
}
.form-edit .form--use--subflex p {
  text-align: right;
  padding-right: 12px;
}
.form-edit .form--use.whbox {
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  border: solid 1px #F1F1F1;
  box-sizing: border-box;
}
.form-edit .form--use .exfull-m {
  width: 100%;
}
.form-edit .form--use .exfull-s {
  width: 100%;
}
.form-edit .form--use .subbox {
  display: flex;
  gap: 8px;
}
.form-edit .form--use .subbox.subbox-wrap {
  flex-wrap: wrap;
}
.form-edit .form--use .title-label {
  color: #3C3C3C;
}
.form-edit .form--use .disabled {
  background: #F1F1F1;
}
.form-edit .form--use .innertext {
  display: flex;
  align-items: center;
  color: #9B9B9B;
}
.form-edit .form--use--act {
  width: 100%;
  display: flex;
}
.form-edit .form--use--act.rend {
  justify-content: flex-end;
}
.form-edit .form--use--act.rcenta {
  justify-content: center;
}
.form-edit .form--use--exposp {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  margin-top: 24px;
}
.form-edit .form--use--exposp .expo-poster {
  width: 50%;
}
.form-edit .form--use--exposp .expo-poster img {
  display: block;
  width: 100%;
  height: auto;
}
.form-edit .form--use--exposp .regFee-box {
  width: 50%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
  background: #DE0065;
}
.form-edit .form--use--exposp .regFee-box .title {
  padding-bottom: 16px;
  border-bottom: solid 1px #FFE800;
}
.form-edit .form--use--exposp .regFee-box .title span {
  display: inline-block;
  color: #fff;
}
.form-edit .form--use--exposp .regFee-box .sumbox span {
  display: inline-block;
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  margin: 36px auto;
}
.form-edit .form--use--exposp .regFee-box .btn {
  width: 90%;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .form-edit .form--use--exposp .expo-poster {
    width: 100%;
  }
  .form-edit .form--use--exposp .regFee-box {
    width: 100%;
  }
}
.form-edit .form--use .inlineblock {
  display: inline-flex;
}
.form-edit .note {
  display: block;
  width: 100%;
  font-size: 14px;
  color: #9B9B9B;
}
.form-edit .autocomplete {
  font-size: 14px;
  padding: 4px 8px;
  background: #A69A23;
  margin-left: 8px;
  transition: 0.3s;
}
.form-edit .autocomplete a {
  color: #fff;
}
.form-edit .autocomplete:hover {
  background: #645B1B;
}

.expoinfo {
  padding: 0 16px 8px 16px;
  background: rgba(100, 91, 27, 0.05);
  border-radius: 8px;
  margin-bottom: 16px;
  border: solid 1px #F1F1F1;
}
.expoinfo .sltswitchbox--fillinfo {
  display: none;
}
.expoinfo .sltswitchbox--fillinfo.active {
  display: block;
}
.expoinfo .sltswitchbox--fillinfo .expo-booth {
  margin-bottom: 16px;
}
.expoinfo .sltswitchbox--fillinfo .form--use--title {
  padding: 16px 0;
}
.expoinfo .sltswitchbox--fillinfo .form--use--title.exponame {
  font-size: 20px;
}
.expoinfo .sltswitchbox--fillinfo .form--use--actbox {
  margin-top: 16px;
}
.expoinfo .sltswitchbox--fillinfo .form--use--actbox .btn.outline {
  color: #A69A23;
  border: solid 1px #A69A23;
}
.expoinfo .sltswitchbox--fillinfo .form--use--actbox .btn.outline:hover {
  background: #A69A23;
  color: #fff;
}

.checkNumBox {
  transition: 0.5s;
  max-height: 86px;
  overflow: hidden;
}
.checkNumBox .form--use--title {
  cursor: pointer;
  flex-wrap: nowrap;
}
.checkNumBox .form--use--title:nth-child(1) {
  margin-bottom: 24px;
}
.checkNumBox.checked {
  max-height: 300px;
}
.checkNumBox.checked .expendcheck:after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: #FFE800;
}

.expendcheck {
  display: block;
  position: relative;
  border: solid 1px #F1F1F1;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
}

.currency {
  padding-right: 6px;
}

input[type=radio]:checked + .expendcheck:after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: #FFE800;
}

.sayhi {
  width: 94%;
  max-width: 800px;
  margin: 0 auto 24px auto;
  text-align: center;
}
@media (max-width: 767px) {
  .sayhi {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
  }
}

.member--avatar {
  width: 120px;
  height: 120px;
  display: flex;
  position: relative;
  margin: 0 auto;
}
.member--avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  object-fit: cover;
}
.member--avatar .textAvatar {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background: #FFE800;
  justify-content: center;
  align-items: center;
}
.member--avatar .editicon {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  top: 0px;
}
@media (max-width: 767px) {
  .member--avatar {
    width: 80px;
    height: 80px;
  }
}

.uploadbox {
  font-size: 14px;
  color: #9B9B9B;
}
.uploadbox .uploadbox--container .uploadbox--btn {
  display: inline-block;
  padding: 8px 16px;
  color: #fff;
  background: #000;
  transition: 0.3s;
  cursor: pointer;
}
.uploadbox .uploadbox--container .uploadbox--btn:hover {
  background: #A69A23;
}
.uploadbox input {
  display: none;
}

.uploadimg {
  width: 50%;
  margin: 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.uploadimg--box {
  width: 100%;
  position: relative;
}
.uploadimg--box img {
  width: 100%;
  height: auto;
}
.uploadimg--box.pdcover {
  cursor: pointer;
}
.uploadimg--box.pdcover .uploadimg--box--setCover {
  opacity: 0;
  margin-top: 8px;
}
.uploadimg--box.pdcover .uploadimg--box--setCover .btn {
  height: auto;
  justify-content: center;
  padding: 4px;
}
.uploadimg--box.pdcover:hover .uploadimg--box--setCover, .uploadimg--box.pdcover.active .uploadimg--box--setCover {
  opacity: 1;
}
.uploadimg--box--del {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  flex-shrink: 0;
  cursor: pointer;
  background: #9B9B9B;
  transition: 0.3s;
  position: absolute;
  right: -10px;
  top: -10px;
}
.uploadimg--box--del img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.uploadimg--box--del:hover {
  background: #000;
}
.uploadimg.multipleupload {
  width: 100%;
}
.uploadimg.multipleupload .uploadimg--box {
  width: calc((100% - 80px) / 6);
}
@media (max-width: 767px) {
  .uploadimg.multipleupload .uploadimg--box {
    width: calc((100% - 32px) / 3);
  }
}

.sltswitchbox .sltswitchbox--fillinfo {
  display: none;
}
.sltswitchbox .sltswitchbox--fillinfo.active {
  display: block;
}

.imgbox-addon picture {
  width: 100%;
}
.imgbox-addon picture img {
  width: 100%;
}

.card-item {
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
  border: solid 1px #FAFAFA;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-item .card-cover {
  width: 100%;
  aspect-ratio: 426/304;
  overflow: hidden;
}
.card-item .card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-item .card-info {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card-item .card-info .card-title {
  height: 70px;
  color: #000;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.card-item .card-info .card-meta {
  display: flex;
  gap: 12px;
  color: #000;
}
.card-item .card-actbox {
  width: 100%;
  padding: 24px;
}
.card-item .card-actbox .btn {
  width: 200px;
  margin: 0 auto;
}
.card-item .card-actbox .btn span {
  width: 100%;
  text-align: center;
}

.btn {
  display: flex;
  align-items: center;
  height: 40px;
  box-sizing: border-box;
  padding: 0 24px;
  cursor: pointer;
  transition: 0.3s;
  flex-shrink: 0;
}
.btn.bgyel {
  border: none;
  background: #FFE800;
  color: #645B1B;
  transition: 0.3s;
}
.btn.bgyel:hover {
  background: #A69A23;
  color: #fff;
}
.btn.bgpink {
  border: none;
  background: #DE0065;
  color: #fff;
  transition: 0.3s;
}
.btn.bgpink:hover {
  background: #FF0074;
  color: #fff;
}
.btn.bgbk {
  border: none;
  background: #000;
  color: #FFE800;
  transition: 0.3s;
}
.btn.bgbk:hover {
  background: #FFE800;
  color: #000;
}
.btn.bggray {
  border: none;
  background: #9B9B9B;
  color: #fff;
  transition: 0.3s;
}
.btn.bggray:hover {
  background: #7A7A7A;
}
.btn.bggold {
  border: none;
  background: #A69A23;
  color: #fff;
  transition: 0.3s;
}
.btn.bggold:hover {
  background: #FFE800;
  color: #645B1B;
}
.btn.bggreen {
  border: none;
  background: #10C62D;
  color: #fff;
  transition: 0.3s;
}
.btn.bggreen:hover {
  background: #21E140;
}
.btn.outline {
  border: solid 1px #FAFAFA;
}
.btn.outline-gold {
  border: solid 1px #A69A23;
}
.btn.outline-gold span {
  color: #A69A23;
}
.btn.outline-gold:hover span {
  color: #fff;
}
.btn.hasiconR {
  padding: 0 8px 0 24px;
}
.btn.hasiconL {
  padding: 0 24px 0 24px;
  column-gap: 8px;
}
.btn.hasiconL img {
  width: 14px;
  height: 100%;
  object-fit: contain;
  order: -1;
}
.btn.bigicon img {
  width: 30px;
  height: 100%;
  object-fit: contain;
  order: -1;
}
.btn.w-mid {
  min-width: 30%;
  justify-content: center;
}
.btn.w-ex {
  width: 40%;
  height: auto;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  gap: 8px;
}
.btn.w-ex:hover .btn {
  background: #FFE800;
  color: #000;
}
.btn.w-xs {
  padding: 0;
  height: 32px;
}
.btn.f-max {
  width: 50%;
  max-width: 300px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.btn.tcenter {
  justify-content: center;
}
.btn.text-yel {
  color: #FFE800;
}
.btn.text-gold {
  color: #A69A23;
}

.custom-select {
  position: relative;
  font-family: Arial;
  height: 40px;
  padding-right: 24px;
  padding-left: 4px;
  box-sizing: border-box;
  border: solid 1px #CDCDCD;
}

.custom-select select {
  display: none;
  /*hide original SELECT element:*/
}

.select-selected {
  background-color: DodgerBlue;
  background: #000;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 15px;
  right: 10px;
  display: block;
  width: 10px;
  height: 8px;
  background: url(/images/icon/icon-arrow-yb.svg) center center no-repeat;
  background-size: contain;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  background: url(/images/icon/icon-arrow-yt.svg) center center no-repeat;
  background-size: contain;
}

/*style the items (options), including the selected item:*/
.select-items div,
.select-selected {
  color: #ffffff;
  padding: 8px 16px 8px 8px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.select-selected {
  height: 100%;
  box-sizing: border-box;
  border: none;
  overflow: hidden;
  line-height: 24px;
  white-space: nowrap;
}

.cus-checkbox {
  display: inline-flex;
  position: relative;
  height: auto;
  padding: 0 8px;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cus-checkbox .title-label {
  position: relative;
  z-index: 2;
  color: #A69A23;
}

/* Hide the browser's default checkbox */
.cus-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000;
  border: solid 1px #A69A23;
  transition: 0.3s;
}

/* On mouse-over, add a grey background color */
.cus-flt-check:hover input ~ .checkmark {
  border-color: #FFE800;
}

/* When the checkbox is checked, add a blue background */
.cus-checkbox input:checked ~ .checkmark {
  background-color: #FFE800;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.cus-checkbox input:checked ~ .checkmark:after {
  display: none;
}

/* Style the checkmark/indicator */
.cus-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.infoLan {
  position: relative;
  z-index: 10;
  margin-top: 24px;
  display: flex;
}
.infoLan--title {
  font-size: 14px !important;
  padding-top: 11px;
  padding-right: 8px;
  color: #3C3C3C;
}
.infoLan--drop {
  position: relative;
}
.infoLan--drop--selected {
  border: solid 1px #CDCDCD;
  position: relative;
}
.infoLan--drop--selected .infoLan--item .tag {
  opacity: 0;
}
.infoLan--drop--selected .infoLan--item.selected .tag {
  opacity: 1;
  background: #A69A23;
  color: #fff;
}
.infoLan--drop--container {
  overflow: hidden;
  max-height: 0;
  transition: 0.3s;
  position: absolute;
  top: 43px;
  z-index: 2;
  background: #fff;
  border: solid 1px #CDCDCD;
  opacity: 0;
}
.infoLan--drop--container .infoLan--item .tag:hover {
  background: #A69A23;
  color: #fff;
}
.infoLan--drop--container.open {
  max-height: 500px;
  opacity: 1;
}

.infoLan--item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #fff;
  cursor: pointer;
  transition: 0.3s;
}
.infoLan--item .lanName {
  flex-grow: 1;
  color: #3C3C3C;
  min-width: 70px;
}
.infoLan--item .tag {
  color: #A69A23;
}
.infoLan--item .tag.defaultOK {
  background: #A69A23;
  color: #fff;
}
.infoLan--item.active .tag {
  color: #fff;
  background: #A69A23;
  border-color: #A69A23;
}
.infoLan--item.defaultOK .tag {
  background: #A69A23;
  color: #fff;
}

.infoLan-dropIcon {
  position: absolute;
  right: 0;
  top: 0;
}

.slick-arrow {
  width: 50px !important;
  height: 50px !important;
  z-index: 10;
  position: absolute !important;
  text-indent: -5000px !important;
  border: none !important;
  border-radius: 100%;
  cursor: pointer;
}
.slick-arrow.slick-prev {
  background: url(/images/icon/icon-slickarrow-prev.png) center center no-repeat;
  background-size: contain;
  top: 50%;
  left: -48px;
  transition: 0.3s;
}
.slick-arrow.slick-next {
  background: url(/images/icon/icon-slickarrow-next.png) center center no-repeat;
  background-size: contain;
  top: 50%;
  right: -48px;
  transition: 0.3s;
}

.slick-dots {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  margin-top: -40px;
  display: flex !important;
  justify-content: center;
}
.slick-dots li {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
}
.slick-dots li button {
  width: 40px;
  height: 40px;
  display: block;
  position: relative;
  background: none !important;
  border: none;
  padding: 0;
  text-indent: -5000px;
}
.slick-dots li button:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #CDCDCD;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.slick-dots li.slick-active button:before {
  background: #DE0065;
}

.heroSlider .slick-arrow.slick-prev {
  left: 8px;
}
.heroSlider .slick-arrow.slick-next {
  right: 8px;
}

@media (max-width: 767px) {
  .media-list .slick-arrow {
    width: 40px !important;
    height: 40px !important;
  }
  .media-list .slick-arrow.slick-prev {
    left: -18px;
  }
  .media-list .slick-arrow.slick-next {
    right: -18px;
  }
}
.header {
  width: 100%;
  height: 80px;
  position: fixed;
  z-index: 11;
  background: #000;
  display: flex;
  justify-content: space-between;
  padding: 0 24px 0 48px;
  box-sizing: border-box;
}
.header .ham {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  row-gap: 4px;
  width: 40px;
  height: 100%;
  padding-left: 6px;
  box-sizing: border-box;
  position: absolute;
  left: 6px;
  z-index: 3;
}
.header .ham span {
  display: block;
  height: 2px;
  background: #FFE800;
  border-radius: 9999;
}
.header .ham span:nth-child(1) {
  width: 20px;
}
.header .ham span:nth-child(2) {
  width: 16px;
}
.header .ham span:nth-child(3) {
  width: 12px;
}
.header .logobox {
  display: flex;
  flex-direction: row;
  position: relative;
  flex-grow: 1;
  z-index: 2;
}
.header .logobox--logo {
  width: 225px;
  height: auto;
}
.header .logobox--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.header .logobox--lan {
  height: 100%;
  box-sizing: border-box;
  padding-top: 36px;
  position: absolute;
  left: 234px;
  flex-direction: column;
  cursor: pointer;
}
.header .logobox--lan .lan--selected {
  position: relative;
  color: #FFE800;
  width: 100%;
  height: 100%;
}
.header .logobox--lan .lan--selected span {
  float: left;
}
.header .logobox--lan .lan--selected .iconArrow {
  display: block;
  width: 10px;
  height: 7px;
  float: left;
  margin-left: 8px;
}
.header .logobox--lan .lan--selected .iconArrow svg {
  width: 100%;
  fill: #FFE800;
  transform: rotate(0);
  transition: 0.3s;
}
.header .logobox--lan .lan--list {
  overflow: hidden;
  height: 0;
  background: #000;
  margin-left: -8px;
}
.header .logobox--lan .lan--list--item {
  color: #FFE800;
  display: flex;
  height: 40px;
  align-items: center;
  padding: 0 8px;
  transition: 0.3s;
  cursor: pointer;
}
.header .logobox--lan .lan--list--item:hover {
  background: #A69A23;
}
.header .nav {
  display: flex;
}
.header .nav--list {
  display: flex;
}
.header .nav--list a {
  color: #fff;
  display: flex;
  padding: 0 24px;
  height: 100%;
  position: relative;
  justify-content: center;
  align-items: center;
}
.header .nav--list a:before {
  content: "";
  display: block;
  background: #FFE800;
  clip-path: polygon(35% 0%, 100% 0%, 65% 100%, 0% 100%);
  background-size: 100%;
  width: 160%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transition: 0.5s;
  opacity: 0;
}
.header .nav--list a:hover, .header .nav--list a.current {
  color: #000;
}
.header .nav--list a:hover:before, .header .nav--list a.current:before {
  opacity: 1;
}
.header .nav .logobox--lan {
  display: none;
}
.header .member {
  display: flex;
  align-items: center;
  margin-left: 16px;
  position: relative;
}
.header .member--avatar {
  width: 42px;
  height: 42px;
  position: relative;
  cursor: pointer;
}
.header .member--avatar .imgAvatar {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.header .member--avatar .textAvatar {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFE800;
  border-radius: 100%;
}
.header .member--avatar .textAvatar span {
  font-size: 18px;
  font-weight: 700;
}
.header .member--avatar .alert {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  object-fit: contain;
  top: -4px;
  right: -4px;
}
.header .member--nlist {
  position: absolute;
  right: -24px;
  background: #000;
  top: 61px;
  width: 150px;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 0;
  transition: 0.5s;
}
.header .member--nlist a {
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  text-align: right;
  transition: 0.3s;
}
.header .member--nlist a:hover {
  background: #A69A23;
}
.header .member.open .member--nlist {
  max-height: 200px;
  transition: 0.5s;
}
.header .cta-nav {
  margin-top: 8px;
  display: none;
}
@media (max-width: 1023px) {
  .header {
    height: 50px;
    padding: 0 8px 0 46px;
  }
  .header .ham {
    display: flex;
  }
  .header .logobox--logo {
    width: 160px;
  }
  .header .logobox--lan {
    left: 168px;
    padding-top: 19px;
  }
  .header .logobox > .logobox--lan {
    margin-top: -1000px;
  }
  .header .nav {
    position: absolute;
    width: 100%;
    left: -100vw;
    height: calc(100vh - 50px);
    top: 50px;
    transition: 0.5s;
    background: #000;
  }
  .header .nav--list {
    flex-direction: column;
    background: #000;
    width: 100%;
  }
  .header .nav--list a {
    width: 100%;
    box-sizing: border-box;
    padding-left: 16px;
    justify-content: flex-start;
    height: 60px;
  }
  .header .nav--list a span {
    color: #FFE800;
    font-size: 18px;
  }
  .header .nav--list a:before {
    display: none;
  }
  .header .nav .logobox--lan {
    display: block;
    position: relative;
    left: 0;
    padding-left: 16px;
  }
  .header .nav .logobox--lan .lan--list {
    position: absolute;
    top: 50px;
  }
  .header .nav.open {
    left: 0;
  }
  .header .member {
    display: flex;
    margin-left: 8px;
  }
  .header .member--avatar {
    width: 32px;
    height: 32px;
  }
  .header .member--nlist {
    right: -16px;
  }
  .header .member--nlist a {
    justify-content: flex-end;
    word-break: break-all;
  }
  .header .member.open .member--nlist {
    top: 41px;
  }
  .header .cta-nav {
    display: flex;
  }
}

.footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #000;
  box-sizing: border-box;
  padding: 24px;
  row-gap: 48px;
}
.footer--logo {
  width: 50%;
  max-width: 330px;
}
.footer--logo img {
  display: block;
  width: 100%;
  height: auto;
}
.footer--social {
  width: 50%;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.footer--social a {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #9B9B9B;
  border-radius: 100%;
  transition: 0.3s;
}
.footer--social a svg {
  fill: #9B9B9B !important;
}
.footer--social a:hover {
  border-color: #FFE800;
}
.footer--social a:hover svg {
  fill: #FFE800 !important;
}
.footer--links {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 16px;
  justify-content: flex-end;
}
.footer--links a {
  color: #9B9B9B;
  transition: 0.3s;
}
.footer--links a:hover {
  color: #FFE800;
}
.footer--info {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.footer--info a {
  color: #9B9B9B;
  font-weight: 400;
  font-size: 14px;
  display: block;
  padding: 4px 0;
  box-sizing: border-box;
  transition: 0.3s;
}
.footer--info a:hover {
  color: #FFE800;
}
.footer .cy {
  width: 50%;
  font-size: 12px;
  font-weight: 400;
  color: #9B9B9B;
  letter-spacing: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom: 5px;
  line-height: 18px;
}
@media (max-width: 767px) {
  .footer {
    row-gap: 32px;
    justify-content: flex-start;
  }
  .footer--logo {
    width: 80%;
  }
  .footer--social {
    width: 100%;
    justify-content: center;
  }
  .footer--links {
    justify-content: center;
    column-gap: 0;
  }
  .footer--links a {
    width: 50%;
  }
  .footer--info {
    width: 100%;
  }
  .footer--info a {
    width: 100%;
  }
  .footer .cy {
    width: 100%;
    justify-content: flex-start;
  }
}

.heroSlider--item {
  display: block;
  width: 100vw;
  height: calc(53vw - 80px);
  position: relative;
  background: #000;
}
.heroSlider--item picture {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.heroSlider--item picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.heroSlider--item--cta {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.heroSlider--item--cta img {
  display: block;
  width: 50%;
  height: 50%;
  object-fit: contain;
}
@media (max-width: 1023px) {
  .heroSlider--item {
    height: calc(53vw - 50px);
  }
}
@media (max-width: 767px) {
  .heroSlider--item {
    height: 70vh;
  }
}

.heroarea {
  min-height: 50vh;
}
.heroarea.col-flex {
  display: flex;
}
.heroarea--brand {
  width: 30%;
  min-width: 300px;
  background: #000;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.heroarea--brand .infobox {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 260px;
  margin: 0 auto;
  padding: 0 16px;
}
.heroarea--brand .infobox .logobox {
  width: 100%;
  padding-top: 100%;
  background: #fff;
  position: relative;
}
.heroarea--brand .infobox .logobox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.heroarea--brand .infobox .infolayout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.heroarea--brand .infobox .name {
  color: #CDCDCD;
}
.heroarea--brand .infobox .contact {
  margin-left: 4px;
  padding: 0 8px;
  border-left: solid 1px #CDCDCD;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.heroarea--brand .infobox .contact .contact-link {
  color: #9B9B9B;
  transition: 0.3s;
  margin-top: -6px;
}
.heroarea--brand .infobox .contact .contact-link:hover {
  color: #FFE800;
}
.heroarea--brand .infobox .socialbox.socialbox-m {
  display: none;
}
.heroarea--brand .infobox .socialbox.socialbox-d {
  display: flex;
}
.heroarea--cover {
  width: 60%;
  flex-grow: 1;
}
.heroarea--cover .imgbox {
  width: 100%;
  height: 100%;
  position: relative;
}
.heroarea--cover .imgbox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .heroarea.col-flex {
    flex-direction: column;
  }
  .heroarea--brand {
    padding: 16px;
    width: 100%;
  }
  .heroarea--brand .infobox {
    flex-direction: column;
    width: 100%;
    gap: 16px;
    padding: 0;
  }
  .heroarea--brand .infobox .infolayout {
    width: 100%;
    flex-direction: row;
    gap: 16px;
  }
  .heroarea--brand .infobox .infolayout .name {
    flex-grow: 1;
    padding-top: 16px;
  }
  .heroarea--brand .infobox .infolayout .logobox {
    width: 35%;
    height: 0;
    padding-top: 35%;
    flex-shrink: 0;
    position: relative;
  }
  .heroarea--brand .infobox .contact {
    border: none;
    padding-left: 0;
    gap: 12px;
    order: 2;
  }
  .heroarea--brand .infobox .socialbox.socialbox-m {
    display: flex;
    margin-left: -6px;
    margin-top: 24px;
  }
  .heroarea--brand .infobox .socialbox.socialbox-d {
    display: none;
  }
  .heroarea--cover {
    order: -1;
    width: 100%;
    height: 100vw;
    flex-grow: 0;
  }
  .heroarea--cover .imgbox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.focus {
  width: 100%;
  height: 40vw;
  box-sizing: border-box;
  padding: 12px;
  background: #FFE800;
}
.focus a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
}
.focus a .brandimg {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.focus a .brandimg img {
  display: block;
  width: 50%;
  height: 100%;
  object-fit: cover;
}
.focus a .brandlogo {
  width: 200px;
  height: 200px;
  display: none;
}
.focus a .brandlogo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.focus a:after {
  content: "FOCUS";
  display: block;
  width: 340px;
  height: 50px;
  padding: 12px;
  background: url(/images/bg-yel-main.svg) -165px top no-repeat;
  background-size: 100%;
  color: #000;
  font-weight: 700;
  font-size: 36px;
  position: absolute;
  top: 0;
  left: 0;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  .focus {
    height: 70vh;
  }
  .focus a .brandimg img {
    width: 100%;
    height: 50%;
  }
  .focus a .brandlogo {
    width: 150px;
    height: 150px;
  }
  .focus a:after {
    width: 200px;
    height: 30px;
    padding: 12px;
    background: url(/images/bg-yel-main.svg) -80px top no-repeat;
    background-size: 100%;
    color: #000;
    font-weight: 700;
    font-size: 24px;
    position: absolute;
    top: 0;
    left: 0;
    letter-spacing: 0;
  }
}

.filterBox {
  width: 100%;
  background: #000;
  padding: 12px;
  box-sizing: border-box;
  border-top: solid 1px #FFE800;
  transition: 0.3s;
}
.filterBox .optionExpand {
  color: #A69A23;
  padding-bottom: 16px;
  text-align: center;
  display: none;
  justify-content: center;
  align-items: center;
}
.filterBox .optionExpand .optopen {
  display: block;
}
.filterBox .optionExpand .optclose {
  display: none;
}
.filterBox .optionExpand span {
  padding-right: 8px;
}
.filterBox .optionExpand:after {
  content: "";
  display: block;
  width: 8px;
  height: 10px;
  background: url("/images/icon/icon-arrow-yb.svg") center center no-repeat;
  background-size: contain;
  opacity: 0.5;
  transition: 0.3s;
  transform-origin: center;
}
.filterBox.fixed {
  position: fixed;
  top: 80px;
  z-index: 2;
}
@media (max-width: 1023px) {
  .filterBox.fixed {
    top: 50px;
  }
}
.filterBox.open .optionExpand .optopen {
  display: none;
}
.filterBox.open .optionExpand .optclose {
  display: block;
}
.filterBox.open .optionExpand:after {
  transform: rotate(180deg);
}
@media (max-width: 767px) {
  .filterBox {
    overflow: hidden;
    max-height: 50px;
  }
  .filterBox .optionExpand {
    display: flex;
  }
  .filterBox.open {
    max-height: 100vh;
  }
}

.brandFlt {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 16px;
}
.brandFlt--item {
  display: flex;
  align-items: center;
  column-gap: 8px;
  padding: 0 8px;
  box-sizing: border-box;
}
.brandFlt--item .title-label {
  width: auto;
}
.brandFlt--item .formbox {
  min-width: 200px;
}
.brandFlt--item .formbox.inputText::placeholder {
  color: #A69A23;
}
.brandFlt--item .formbox:focus {
  border-color: #FFE800;
}
.brandFlt--item .formbox.pointer:hover {
  border-color: #FFE800;
}
.brandFlt--item.mobileexpand {
  display: none;
}
.brandFlt--country.cus-slt .custom-select {
  width: 200px;
}
.brandFlt--country.cus-slt .custom-select .select-items {
  background: #121212;
  overflow-y: auto;
  max-height: 20vh;
}
.brandFlt--country.cus-slt .custom-select .select-items > div:hover {
  background: #A69A23;
  color: #fff;
}
.brandFlt--country.cus-slt .custom-select:hover {
  border-color: #FFE800;
}
.brandFlt--criteria .btn {
  align-items: center;
}
.brandFlt--criteria .btn span {
  color: #FFE800;
}
@media (max-width: 767px) {
  .brandFlt .brandFlt--country {
    width: 100%;
  }
  .brandFlt .brandFlt--country .custom-select {
    width: 100%;
  }
  .brandFlt .brandFlt--country .custom-select .select-items {
    max-height: 160px;
  }
  .brandFlt .brandFlt--criteria {
    width: 100%;
  }
  .brandFlt .brandFlt--criteria .formbox {
    width: 100%;
  }
  .brandFlt .brandFlt--keyword {
    width: 100%;
  }
  .brandFlt .brandFlt--keyword .formbox {
    width: 100%;
  }
}

.brandFltEpand {
  overflow: hidden;
  height: 0;
}
.brandFltEpand .conbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 94%;
  max-width: 1280px;
  margin: 0 auto;
}
.brandFltEpand.open {
  overflow-y: auto;
}
.brandFltEpand .fltBox {
  width: 30%;
  box-sizing: border-box;
  padding: 16px;
}
.brandFltEpand .fltBox .title-label {
  padding: 4px 0;
}
.brandFltEpand .fltBox--list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.brandFltEpand .fltBox--list .title-label {
  font-size: 14px;
}
@media (max-width: 767px) {
  .brandFltEpand .fltBox {
    width: 100%;
  }
  .brandFltEpand.open {
    margin-top: 16px;
  }
}

.withFlter.fixed {
  padding-top: 65px;
}
@media (max-width: 767px) {
  .withFlter.fixed {
    padding-top: 50px;
  }
}

.title-label {
  color: #CDCDCD;
}

.brandSlider {
  display: flex;
  gap: 16px;
  overflow: hidden;
}
.brandSlider .brandSlider--item {
  width: 25%;
}

.brandList {
  width: 94%;
  max-width: 1150px;
  margin: 24px auto;
  display: flex;
  flex-wrap: wrap;
}
.brandList .brand--item {
  width: 25%;
  padding: 16px;
  box-sizing: border-box;
  /*<1280*/
}
@media (max-width: 1279px) {
  .brandList .brand--item {
    width: 33.3%;
    padding: 4px;
  }
}
@media (max-width: 767px) {
  .brandList .brand--item {
    width: 50%;
    padding: 4px;
  }
}

.show-flt {
  background: url("/images/bg-line.png") center center repeat;
  margin: 16px auto;
}
.show-flt--container {
  color: #3C3C3C;
}
.show-flt .title {
  text-align: center;
  color: #9B9B9B;
  margin: 0 8px 0 0;
  padding-top: 3px;
}
.show-flt .flt-tag--item {
  padding: 16px;
  background: #FAFAFA;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
}
.show-flt .flt-tag--item .flt-tag--item--list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.show-flt .flt-tag--item .flt-tag--item--list .tag {
  color: #A69A23;
  background: #fff;
}

.no-result {
  width: 90%;
  margin: 0 auto;
  max-width: 600px;
}
.no-result .title-sub {
  color: #3C3C3C;
}
.no-result--img .img-main {
  display: block;
  width: 100%;
}

.brand-mainbox {
  background: url(/images/bg-yel-main.svg) -40vw 0 no-repeat;
  background-size: 100%;
}
@media (max-width: 767px) {
  .brand-mainbox {
    background: url(/images/bg-yel-main.svg) -300vw 0 no-repeat;
    background-size: 460%;
  }
}

.b-nav .nav-tri {
  display: flex;
  gap: 60px;
  justify-content: flex-end;
}
.b-nav .nav-tri--item a {
  color: #9B9B9B;
  display: block;
  padding: 16px 0;
  position: relative;
  transition: 0.3s;
}
.b-nav .nav-tri--item a:after {
  transition: 0.3s;
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  background: #000;
  position: absolute;
  bottom: 0;
}
.b-nav .nav-tri--item a:hover {
  color: #000;
}
.b-nav .nav-tri--item a:hover:after {
  left: 0;
  width: 100%;
}
.b-nav .nav-tri--item.active a {
  color: #000;
}
.b-nav .nav-tri--item.active a:after {
  width: 100%;
}
@media (max-width: 767px) {
  .b-nav {
    padding-top: 0 !important;
  }
  .b-nav .w-wide {
    width: 100% !important;
  }
  .b-nav .nav-tri {
    gap: 10%;
    justify-content: space-between;
    padding: 0 24px;
    box-sizing: border-box;
    background: #FAFAFA;
  }
}

.brand-section {
  position: relative;
  margin-bottom: 104px;
}
.brand-section .w-wide {
  margin: 0 auto;
}
.brand-section.b-nav {
  padding-top: 24px;
}
@media (max-width: 767px) {
  .brand-section {
    margin-bottom: 64px;
  }
}

.b-brief--title.title-sub {
  text-align: left;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 32px;
}

.b-brief--container .title-tri {
  margin-top: 0;
}
.b-brief--container .brand-intro {
  display: flex;
  gap: 8%;
}
.b-brief--container .brand-intro .con-table {
  width: 26%;
  flex-shrink: 0;
}
.b-brief--container .brand-intro .con-table ul.con-table-item {
  list-style-type: none;
  padding: 0;
  margin-top: 4px;
}
.b-brief--container .brand-intro .con-table ul.con-table-item li {
  position: relative;
  padding-left: 12px;
  box-sizing: border-box;
}
.b-brief--container .brand-intro .con-table ul.con-table-item li .title {
  color: #645B1B;
}
.b-brief--container .brand-intro .con-table ul.con-table-item li .con-txt {
  margin: 12px 0;
}
.b-brief--container .brand-intro .con-table ul.con-table-item li .con-txt--tag {
  display: flex;
  flex-wrap: wrap;
  font-weight: 500;
  display: inline-block;
}
.b-brief--container .brand-intro .con-table ul.con-table-item li:after {
  content: "";
  width: 4px;
  height: 4px;
  background: #645B1B;
  border-radius: 50%;
  position: absolute;
  left: 0px;
  top: 11px;
}
.b-brief--container .brand-intro .brand-intro--content {
  flex-grow: 1;
}
.b-brief--container .brand-intro .brand-intro--content img {
  display: block;
  width: 100%;
  height: auto;
}
.b-brief--container .brand-intro .brand-intro--content p {
  line-height: 26px;
  color: #3C3C3C;
}
@media (max-width: 767px) {
  .b-brief--container .title-tri {
    margin-top: 24px;
  }
  .b-brief--container .brand-intro {
    flex-wrap: wrap;
  }
  .b-brief--container .brand-intro .con-table {
    width: 100%;
  }
  .b-brief--container .brand-intro .con-table .con-table-item {
    display: flex;
    flex-wrap: wrap;
  }
  .b-brief--container .brand-intro .con-table .con-table-item li {
    width: 50%;
  }
  .b-brief--container .brand-intro .con-table .con-table-item li .con-txt {
    margin: 8px 0 !important;
  }
}

.b-pd {
  position: relative;
}
.b-pd:after {
  content: "";
  display: block;
  width: 60%;
  height: 75vw;
  position: absolute;
  background: url("/images/bg-yel-tri.svg") bottom right no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: -48px;
  right: 0;
  z-index: -1;
}
.b-pd .btn {
  background: #FFE800;
  color: #645B1B;
  border: solid 1px #A69A23;
}
.b-pd .btn.btnback {
  display: inline-flex;
  background: #A69A23;
  color: #fff;
}
.b-pd .btn.btnback:hover {
  background: #645B1B;
}
@media (max-width: 767px) {
  .b-pd:after {
    width: 90%;
  }
}

.b-pd-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  row-gap: 48px;
  margin-bottom: 48px;
}
.b-pd-list .item {
  width: calc((100% - 72px) / 4);
  box-sizing: border-box;
  color: #3C3C3C;
  position: relative;
}
.b-pd-list .item .imgbox {
  width: 100%;
  padding-top: 100%;
  position: relative;
}
.b-pd-list .item .imgbox img {
  display: block;
  border: solid 0px #F1F1F1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}
.b-pd-list .item .title {
  transition: 0.3s;
  margin: 8px 0;
  color: #3C3C3C;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  min-height: 53px;
}
.b-pd-list .item .excerpt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.b-pd-list .item .prize {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  color: #A69A23;
  margin-top: 12px;
}
.b-pd-list .item .prize--title {
  margin-right: 8px;
  color: #9B9B9B;
}
.b-pd-list .item .pri-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
}
.b-pd-list .item .pri-box--item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.b-pd-list .item .pri-box--item span {
  display: block;
}
.b-pd-list .item .pri-box--item input {
  width: 30%;
  height: 30px;
  outline: none;
  box-sizing: border-box;
  padding: 0 6px;
  text-align: center;
  border: solid 1px #f1f1f1;
}
.b-pd-list .item .tagbox {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.b-pd-list .item .tagbox .tag {
  display: inline-block;
  background: #F1F1F1;
}
.b-pd-list .item:hover .imgbox img {
  border: solid 3px #F1F1F1;
}
.b-pd-list .item:hover .title {
  color: #A69A23;
}
.b-pd-list .initbox {
  display: flex;
  height: 20vh;
  align-items: center;
}
.b-pd-list .initbox .title {
  position: relative;
  z-index: 1;
}
.b-pd-list .initbox:after {
  content: "";
  display: block;
  width: 100%;
  height: 80%;
  background: url("/images/bg-yel-main.svg") center bottom no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -48px;
  transform: translateX(-50%);
  left: 50%;
  z-index: 0;
}
.b-pd-list.media-list .item {
  padding: 0 16px;
}
.b-pd-list.media-list .item .imgbox {
  padding-top: 60%;
}
.b-pd-list.media-list-grid .item {
  padding: 0;
}
.b-pd-list.media-list-grid .item .imgbox {
  padding-top: 60%;
}
@media (max-width: 767px) {
  .b-pd-list {
    column-gap: 16px;
    row-gap: 32px;
  }
  .b-pd-list .item {
    width: calc((100% - 32px) / 2);
  }
  .b-pd-list .item .tagbox {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .b-pd-list .item .tagbox .tag {
    padding: 2px 4px;
  }
}

.relatedPost .brandList {
  width: 100%;
  justify-content: center;
}
.relatedPost .brandList .brand--item {
  width: 16.6%;
  padding: 1%;
}
.relatedPost .brandList .brand--item .brandInfo {
  margin-top: -25px;
}
.relatedPost .brandList .brand--item .brandInfo .brandName {
  color: #645B1B;
  transition: 0.3s;
}
.relatedPost .brandList .brand--item .brandInfo .imgLogo {
  width: 50px;
  height: 50px;
}
@media (max-width: 1023px) {
  .relatedPost .brandList .brand--item {
    width: 33.3%;
    padding: 2%;
  }
}
@media (max-width: 479px) {
  .relatedPost .brandList .brand--item {
    width: 50%;
    padding: 2%;
  }
}
.relatedPost .brandList .brand--item:hover .brandInfo .brandName {
  color: #000;
}
.relatedPost:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("/images/bg-yel-main.svg") bottom center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  transform: translateX(-50%);
  bottom: -200px;
  left: 50%;
  z-index: -1;
}

.title-tri.centa {
  text-align: center;
  color: #A69A23;
}

.b-pd--info--main {
  display: flex;
  flex-wrap: wrap;
}
.b-pd--info--main .b-pd--info--slider {
  width: 52%;
}
.b-pd--info--main .b-pd--info--slider .img-box {
  width: 100%;
  position: relative;
  background: #FAFAFA;
}
.b-pd--info--main .b-pd--info--slider .img-box .img-box-popup {
  display: block;
}
.b-pd--info--main .b-pd--info--slider .img-box .img-box-popup .img-box-item {
  width: 100%;
  padding-top: 100%;
  position: relative;
}
.b-pd--info--main .b-pd--info--slider .img-box .img-box-popup .img-box-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.b-pd--info--main .b-pd--info--slider .img-box .slick-arrow {
  filter: brightness(0);
  opacity: 0.1;
}
.b-pd--info--main .b-pd--info--slider .img-box .slick-arrow.slick-prev {
  left: 0;
}
.b-pd--info--main .b-pd--info--slider .img-box .slick-arrow.slick-next {
  right: 0;
}
.b-pd--info--main .b-pd--info--slider .thumb-box {
  width: 100%;
}
.b-pd--info--main .b-pd--info--slider .thumb-box .thumb-box--item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 4px;
  cursor: pointer;
}
.b-pd--info--main .b-pd--info--slider .thumb-box .thumb-box--item .imgcontainer {
  width: 100%;
  padding-top: 100%;
  position: relative;
}
.b-pd--info--main .b-pd--info--slider .thumb-box .thumb-box--item .imgcontainer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.b-pd--info--main .b-pd--info--conbox {
  box-sizing: border-box;
  width: 48%;
  padding-left: 72px;
}
.b-pd--info--main .b-pd--info--conbox .title {
  text-align: left;
}
.b-pd--info--main .b-pd--info--conbox .prize {
  color: #A69A23;
  margin-top: 16px;
  padding: 8px 0;
  border-top: solid 1px #F1F1F1;
  border-bottom: solid 1px #F1F1F1;
}
.b-pd--info--main .b-pd--info--conbox .prize--title {
  color: #9B9B9B;
}
.b-pd--info--main .b-pd--info--conbox .conbox {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}
.b-pd--info--main .b-pd--info--conbox .conbox li {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  align-items: center;
}
.b-pd--info--main .b-pd--info--conbox .conbox--title {
  color: #9B9B9B;
  margin: 8px 0;
  font-size: 14px;
  flex-shrink: 0;
}
.b-pd--info--main .b-pd--info--conbox .conbox--pdtag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.b-pd--info--main .b-pd--info--conbox .conbox--pdtag .tag {
  display: inline-flex;
  background: rgba(250, 250, 250, 0.8);
  color: #A69A23;
}
.b-pd--info--main .b-pd--info--conbox .conbox--val {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.b-pd--info--main .b-pd--info--conbox .conbox--val .valbox {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #A69A23;
  gap: 4px;
  width: 100%;
}
.b-pd--info--main .b-pd--info--conbox .conbox--val .valbox--val {
  display: flex;
  align-items: center;
  padding: 6px;
  box-sizing: border-box;
  min-height: 36px;
  background: rgba(250, 250, 250, 0.8);
  font-size: 14px;
  width: auto;
}
.b-pd--info--main .b-pd--info--conbox .conbox--val .valbox--val span {
  word-break: break-all;
}
@media (max-width: 767px) {
  .b-pd--info--main {
    gap: 24px;
  }
  .b-pd--info--main .b-pd--info--slider {
    width: 100%;
  }
  .b-pd--info--main .b-pd--info--conbox {
    width: 100%;
    padding-left: 0;
  }
}
.b-pd--info--moreinfo {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
}
.b-pd--info--moreinfo--item {
  display: flex;
  flex-direction: column;
}
.b-pd--info--moreinfo--item .brief {
  box-sizing: border-box;
}
.b-pd--info--moreinfo--item .brief p {
  margin: 24px 24px 48px 24px;
  text-align: justify;
}
.b-pd--info--moreinfo--item .imgbox {
  flex-grow: 1;
  width: 100%;
  order: -1;
}
.b-pd--info--moreinfo--item .imgbox img {
  display: block;
  width: 100%;
  height: auto;
}

.bread {
  margin: 0 auto;
  display: flex;
  margin-bottom: 24px;
  margin-top: -40px;
}
.bread--item {
  padding-left: 16px;
  position: relative;
  margin-left: 18px;
  display: flex;
  align-items: center;
}
.bread--item .btnback {
  margin-top: -1px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  color: #A69A23;
  font-size: 14px;
  transition: 0.3s;
}
.bread--item .btnback:hover {
  color: #645B1B;
}
.bread--item:before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #A69A23;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 4px;
}
.bread--item:after {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: #A69A23;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: -12px;
}
.bread--item:nth-child(1) {
  margin-left: 0;
  flex-shrink: 0;
}
.bread--item:nth-child(1):after {
  display: none;
}
.bread--item:nth-child(2) {
  flex-shrink: 0;
}

.logReg {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.logReg--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.logReg--box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #FFE800;
  padding: 24px 0;
}
.logReg--box .title-max {
  width: 94%;
  max-width: 670px;
}
.logReg--box .thirdBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 94%;
  max-width: 500px;
  margin: 0 auto;
  gap: 16px;
}
.logReg--box .thirdBox .btn {
  background: #fff;
  color: #645B1B;
  width: calc((100% - 32px) / 3);
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 12px;
}
.logReg--box .thirdBox .btn span {
  letter-spacing: 0;
  text-align: center;
}
.logReg--box .thirdBox .btn:hover {
  background: #645B1B;
}
.logReg--box .thirdBox .btn:hover span {
  color: #fff;
}
.logReg--box .form-org {
  width: 94%;
  max-width: 500px;
  margin: 0 auto;
}
.logReg--box .form-org .form-actbox .btn {
  width: 94%;
  max-width: 320px;
  justify-content: center;
  background: #FFE800;
  border: solid 1px #645B1B;
  color: #645B1B;
}
.logReg--box .form-org .form-actbox .btn:hover {
  background: #645B1B;
  color: #fff;
}
.logReg--box .form-message {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logReg--box .form-message .title-sub {
  background: #fff;
  padding: 24px;
}
@media (max-width: 1023px) {
  .logReg--img {
    height: 30vh;
  }
  .logReg--img img {
    min-height: 100%;
    height: 100%;
  }
  .logReg .fcol-50 {
    width: 100%;
  }
}

.midarea {
  min-height: calc(100vh - 200px);
}
.midarea--header {
  width: 100%;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: url(/assets/images/member-bg.png) center center no-repeat;
  background-size: cover;
}
.midarea--header.yel-header {
  width: 100%;
  height: auto;
  padding-bottom: 24px;
  background: #FFE800;
  display: flex;
  justify-content: center;
  align-items: center;
}
.midarea--header.member-header {
  flex-direction: column;
}
.midarea--header--container {
  width: 94%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.midarea--header--container--img {
  width: 50%;
  max-width: 150px;
  position: relative;
  background: #fff;
  display: flex;
}
.midarea--header--container--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.midarea--header--container--img:after {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
}
.midarea--header--container--info {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.midarea--header--container--info .name {
  color: #fff;
}
.midarea--header--container--info .tagbox {
  display: flex;
  gap: 4px;
}
.midarea--header--container--info .tagbox .tag {
  background: #A69A23;
  color: #fff;
}
.midarea--nav {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #FAFAFA;
  flex-wrap: wrap;
}
.midarea--nav .midarea--navBox {
  display: flex;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.midarea--nav--btn {
  display: flex;
  width: 100%;
  padding: 12px 24px;
  box-sizing: border-box;
  max-width: 400px;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  color: #000;
  transition: 0.3s;
  position: relative;
}
.midarea--nav--btn .msg-alert {
  background: #DE0065;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  margin-left: 4px;
  position: absolute;
  transform: translateX(-50%);
  left: calc(50% + 44px);
}
.midarea--nav--btn.active, .midarea--nav--btn:hover {
  background: #FFE800;
}
.midarea--nav--btn.active .msg-alert, .midarea--nav--btn:hover .msg-alert {
  color: #fff;
}
.midarea--content {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}
.midarea--content .form-edit .form--use--actbox .title-large {
  flex-grow: 1;
}
.midarea--content--pd {
  margin-top: 24px;
}
.midarea--content--pd .b-pd-list a.item:hover .btn, .midarea--content--pd .b-pd-list a.item--link:hover .btn {
  background: #A69A23;
  color: #fff;
}
@media (max-width: 767px) {
  .midarea--header {
    height: 150px;
  }
  .midarea--header--container .name {
    font-size: 20px;
  }
  .midarea--nav .midarea--navBox {
    overflow-x: auto;
    border-top: solid 0.5px #FAFAFA;
  }
  .midarea--nav--btn {
    width: 40%;
    padding: 8px 16px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .midarea--content--pd .b-pd-list .item {
    width: calc((100% - 16px) / 2);
  }
}

.midarea--header-sub {
  display: flex;
  justify-content: space-between;
  margin: 24px 0;
  gap: 16px;
}
@media (max-width: 767px) {
  .midarea--header-sub {
    flex-wrap: wrap;
  }
}

.midarea.companyset .midarea--header {
  background: url(/assets/images/company-bg.png) center center no-repeat;
  background-size: cover;
}
.midarea.companyset .midarea--header--container--img {
  max-width: 120px;
}
.midarea.companyset .midarea--nav {
  background: #000;
}
.midarea.companyset .midarea--nav--btn {
  color: #fff;
}
.midarea.companyset .midarea--nav--btn.active, .midarea.companyset .midarea--nav--btn:hover {
  color: #000;
  background: #FFE800;
}
@media (max-width: 767px) {
  .midarea.companyset .midarea--header--container--info {
    gap: 16px;
  }
  .midarea.companyset .midarea--header--container--info .name {
    font-size: 18px;
    line-height: 150%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
}
.midarea.brandset .midarea--header {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url("https://popupasia.com/wp-content/uploads/T-202310-F-04-2048x1096.jpg") center center no-repeat;
  background-size: cover;
}
.midarea.brandset .midarea--header--container {
  flex-direction: column;
}
.midarea.brandset .midarea--header--container--info .name {
  text-align: center;
}
@media (max-width: 767px) {
  .midarea.brandset .midarea--header--container {
    flex-direction: row;
  }
  .midarea.brandset .midarea--header--container--info .name {
    text-align: left;
  }
}
.midarea.brandset .midarea--nav {
  background: #000;
}
.midarea.brandset .midarea--nav--btn {
  color: #fff;
}
.midarea.brandset .midarea--nav--btn.active, .midarea.brandset .midarea--nav--btn:hover {
  color: #000;
  background: #FFE800;
}

.inner-post {
  width: 94%;
  max-width: 800px;
  margin: 24px auto;
}

.companyList {
  display: flex;
  justify-content: center;
  padding: 24px 0;
  flex-wrap: wrap;
}

.company-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
  background: #FAFAFA;
  gap: 16px;
  transition: 0.3s;
}
.company-item .company-logo {
  width: 40%;
  position: relative;
}
.company-item .company-logo .imgbox {
  width: 100%;
  height: 100%;
}
.company-item .company-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.company-item .company-logo:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.company-item .company-info {
  display: flex;
  align-items: center;
  color: #3C3C3C;
  width: 100%;
}
.company-item:hover {
  background: #FFE800;
}
.company-item:hover .btn {
  background: #645B1B;
  color: #fff;
}
.company-item.invalid {
  background: #FAFAFA !important;
}
.company-item.invalid .btn {
  background: #9B9B9B !important;
}
@media (max-width: 479px) {
  .company-item {
    flex-wrap: wrap;
    justify-content: center;
  }
  .company-item .company-logo {
    width: 100%;
  }
  .company-item .company-info {
    font-size: 16px;
  }
  .company-item .btn {
    width: 100%;
    justify-content: center;
  }
}

.midarea-item-brand {
  width: 33.3%;
  box-sizing: border-box;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #FAFAFA;
  transition: 0.3s;
}
.midarea-item-brand .showbox {
  width: 100%;
}
.midarea-item-brand .showbox .logo {
  width: 100%;
  position: relative;
  border: solid 1px #CDCDCD;
  box-sizing: border-box;
  background: #fff;
  transition: 0.3s;
}
.midarea-item-brand .showbox .logo:after {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
}
.midarea-item-brand .showbox .logo img {
  display: block;
  width: 97%;
  height: 97%;
  object-fit: contain;
}
.midarea-item-brand .showbox .name {
  color: #3C3C3C;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
}
.midarea-item-brand .actbox .btn {
  justify-content: center;
}
.midarea-item-brand:hover .logo {
  border: solid 10px #FFE800;
}
.midarea-item-brand:hover .actbox .btn {
  color: #fff;
  background: #645B1B;
}
.midarea-item-brand.additem .showbox .logo {
  transition: 0.3s;
  background: #FFE800;
}
.midarea-item-brand.additem .showbox .logo img {
  width: 30%;
  height: 30%;
}
.midarea-item-brand.additem .showbox .logo span {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 10%;
  color: #000;
}
.midarea-item-brand.additem:hover {
  background: none;
}
.midarea-item-brand.additem:hover .showbox .logo {
  background: #FFE800;
}
.midarea-item-brand.additem:hover .showbox .logo img {
  width: 30%;
  height: 30%;
  filter: brightness(200%);
}
@media (max-width: 767px) {
  .midarea-item-brand {
    width: 50%;
  }
}
@media (max-width: 479px) {
  .midarea-item-brand {
    width: 100%;
  }
}

.expo-adbanner {
  display: flex;
  flex-direction: row;
  gap: 1%;
  min-height: calc(100vh - 500px);
  align-items: center;
  position: relative;
  box-sizing: border-box;
  padding: 48px 0;
}
.expo-adbanner--cta {
  flex-basis: 450px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  align-self: flex-start;
}
.expo-adbanner--cta .title {
  text-align: left;
  margin-bottom: 48px;
}
.expo-adbanner--cta .btn {
  justify-content: center;
  max-width: 300px;
}
.expo-adbanner--img {
  position: relative;
  z-index: 2;
  flex-grow: 1;
}
.expo-adbanner--img img {
  display: block;
  width: 100%;
}
.expo-adbanner:after {
  content: "";
  display: block;
  width: 110%;
  height: 100%;
  background: url("/images/bg-yel-main.svg") center 20vh no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -48px;
  transform: translateX(-50%);
  left: 50%;
  z-index: 0;
}
@media (max-width: 1023px) {
  .expo-adbanner {
    flex-direction: column;
    padding: 24px 0;
    min-height: 100%;
  }
  .expo-adbanner--cta {
    order: 2;
    width: 100%;
    flex-basis: 100%;
  }
  .expo-adbanner--cta .title {
    font-size: 40px;
    line-height: 56px;
    margin: 24px auto;
    text-align: center;
  }
  .expo-adbanner--cta .btn {
    margin-right: auto;
    margin-left: auto;
  }
  .expo-adbanner:after {
    background: url("/images/bg-yel-main.svg") center bottom no-repeat;
    background-size: 130%;
  }
}

.expo-list .item {
  display: flex;
  background: #fff;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.expo-list .item .item-main {
  flex-grow: 1;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 160px);
}
.expo-list .item .item-main .imgbox {
  width: 35%;
  position: relative;
  padding-top: 25%;
}
.expo-list .item .item-main .imgbox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.expo-list .item .item-main .expo-info {
  width: 65%;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px;
  color: #3C3C3C;
}
.expo-list .item .item-main .expo-info .expo-name {
  margin-bottom: 16px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.expo-list .item .item-main:hover .expo-info {
  color: #A69A23;
}
.expo-list .item .actbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  box-sizing: border-box;
  padding-right: 16px;
  width: 130px;
  gap: 8px;
}
.expo-list .item .actbox .btn {
  width: 100%;
  padding: 4px 8px;
  height: auto;
}
.expo-list .item .actbox .btn span {
  text-align: center;
  display: block;
  width: 100%;
}
.expo-list .item .actbox .outline {
  border: solid 1px #9B9B9B;
  transition: 0.3s;
  color: #9B9B9B;
}
.expo-list .item .actbox .outline:hover {
  background: #9B9B9B;
  color: #fff;
}
@media (max-width: 767px) {
  .expo-list .item .item-main {
    width: 100%;
    padding-right: 0;
  }
  .expo-list .item .item-main .imgbox {
    width: 100%;
    padding-top: 71%;
  }
  .expo-list .item .item-main .expo-info {
    width: 100%;
  }
  .expo-list .item .actbox {
    width: 100%;
    margin: 24px 0;
    justify-content: center;
    align-items: center;
  }
  .expo-list .item .actbox .btn {
    max-width: 200px;
    min-height: 40px;
    height: auto;
  }
}

.step {
  margin-top: 24px;
}
.step .step-container {
  display: flex;
  gap: 16px;
  position: relative;
}
.step .step-container .step-item {
  width: calc(25% - 8px);
  border-radius: 24px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  border: solid 1px #FFE800;
  background: #fff;
  color: #3C3C3C;
  box-sizing: border-box;
  gap: 8px;
  position: relative;
  z-index: 1;
  align-items: center;
  text-align: center;
}
.step .step-container .step-item .num {
  padding: 6px 12px;
  border-radius: 16px;
  background: #fff;
  color: #3C3C3C;
}
.step .step-container .step-item.active {
  background: #FFE800;
}
.step .step-container:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #FFE800;
}
.step .step-cancel {
  background: #DE0065;
  color: #fff;
  padding: 24px 32px 24px 32px;
  box-sizing: border-box;
  border-radius: 24px;
}
.step .step-cancel ul {
  list-style-type: none;
  margin-bottom: 0;
}
.step .step-cancel ul li {
  margin-top: 16px;
}
@media (max-width: 767px) {
  .step .step-container {
    flex-wrap: wrap;
  }
  .step .step-container .step-item {
    width: calc(50% - 8px);
  }
  .step .step-container:after {
    display: none;
  }
}

.expo-status {
  color: #fff;
  background: #10C62D;
  padding: 12px 24px;
  text-align: center;
  border-radius: 24px;
  margin: 24px 0;
}
.expo-status.status-inProgress {
  background: #FF9022;
}
.expo-status.status-success {
  background: #10C62D;
}
.expo-status.status-fail {
  background: #DE0065;
}
.expo-status.status-gold {
  background: #FFE800;
  color: #000;
}
.expo-status.status-gray {
  background: #CDCDCD;
  color: #000;
}
.expo-status.status-bk {
  background: #000;
  color: #fff;
}

.expo-booth {
  width: 100%;
  box-sizing: border-box;
}
.expo-booth .booth-size {
  padding-left: 8px;
}
.expo-booth .booth-info {
  padding-top: 8px;
}
.expo-booth .booth-info .booth-excerpt {
  display: block;
  color: #A69A23;
  font-weight: 300;
  padding: 0 0 8px 0;
  word-wrap: break-all;
}
.expo-booth .booth-info .booth-fee {
  font-weight: 500;
  color: #645B1B;
}

.regFee {
  color: #3C3C3C;
  padding: 24px;
  border: solid 2px #FFE800;
  border-radius: 24px;
  margin-top: 24px;
  background: #fff;
}
.regFee .title {
  display: block;
  padding-bottom: 24px;
  margin-bottom: 16px;
  border-bottom: solid 1px #FFE800;
}
.regFee-booth .col-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.regFee-booth .col-flex .col {
  width: 50%;
}
.regFee-booth--item {
  margin: 8px 0;
  color: #A69A23;
}
.regFee-booth--item .item-title {
  color: #3C3C3C;
  margin-right: 0;
}
.regFee-booth--item span {
  margin-right: 8px;
}
.regFee-booth--item.item-count {
  text-align: right;
}
.regFee-booth--discount.col-flex {
  align-items: center;
  min-height: 60px;
  margin-bottom: 24px;
  border-top: solid 1px #F1F1F1;
  margin-top: 16px;
  padding-top: 16px;
  gap: 8px;
}
.regFee-booth--discount.col-flex span {
  padding: 0 2px;
  box-sizing: border-box;
}
.regFee-booth--discount.col-flex .btn {
  margin-left: 16px;
}
.regFee-booth--discount.col-flex .flexbox {
  flex-grow: 1;
  flex-wrap: wrap;
  position: relative;
}
.regFee-booth--amount {
  border-top: solid 1px #FFE800;
  margin-top: 16px;
  padding-top: 24px;
  justify-content: flex-end;
}
.regFee-booth--amount .amount {
  padding: 0 8px;
  display: flex;
  align-items: flex-end;
}
.regFee-booth--amount .amount .amount-num {
  color: #DE0065;
  padding: 0 4px;
  line-height: 36px;
}
.regFee.forrefund {
  border: solid 1px #F1F1F1;
  border-radius: 8px;
}
.regFee.forrefund .form--use--orderInfo {
  margin-top: 0;
  padding-top: 0;
  border-bottom: solid 1px #F1F1F1;
  margin-bottom: 18px;
}
.regFee.forrefund .form--use--orderInfo .order-num {
  display: flex;
  align-items: center;
}
.regFee.forrefund .form--use--orderInfo .order-type {
  align-items: center;
}
.regFee.forrefund .form--use--orderInfo .title {
  border: none;
  font-size: 16px;
  padding: 0 8px 0 0;
  margin: 0;
}
.regFee.forrefund .regFee-booth .col {
  display: flex;
}
.regFee.forrefund .regFee-booth .col .regFee-booth--item {
  color: #A69A23;
}
.regFee.forrefund .regFee-booth .col .regFee-booth--item .item-title {
  color: #9B9B9B;
}
.regFee.forrefund .regFee-booth .col:last-child {
  justify-content: flex-end;
}
.regFee.forrefund .regFee-booth--amount {
  margin-top: 24px;
  padding-top: 24px;
  border-top: solid 1px #F1F1F1;
}
@media (max-width: 767px) {
  .regFee-booth--discount {
    padding-top: 0 !important;
  }
  .regFee-booth--discount .item-title {
    display: block;
    width: 100%;
    margin: 16px 0;
  }
  .regFee-booth--discount .btn {
    flex-shrink: 0;
  }
  .regFee-booth--item .item-title {
    display: block;
  }
  .regFee-booth .col-flex {
    align-items: center;
  }
  .regFee.forrefund .regFee-booth .col-flex .col {
    width: 100%;
  }
  .regFee.forrefund .regFee-booth .col-flex .col:last-child {
    justify-content: flex-start;
  }
}

.regCheckout {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 16px;
}
.regCheckout .regCheckout--container {
  background: #fff;
  color: #3C3C3C;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  border: solid 1px #F1F1F1;
  padding: 0 16px 0 16px;
  border-radius: 24px;
}
.regCheckout .regCheckout--container .title-sub {
  text-align: left;
}
.regCheckout .regCheckout--container.full {
  max-width: 100%;
}
.regCheckout .regCheckout--container .form--use--actbox .btn {
  margin: 24px 0;
}
.regCheckout .account-info {
  padding: 16px;
  border-radius: 8px;
  background: #FAFAFA;
  margin-bottom: 16px;
}
.regCheckout .account-info .item {
  border-bottom: solid 1px #fff;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.regCheckout .account-info .item .item-title {
  display: inline-block;
  min-width: 105px;
  margin-right: 8px;
}
.regCheckout .account-info .item .item-val {
  color: #A69A23;
}
.regCheckout .account-info .item .item-val.highlihgt-pink {
  color: #DE0065 !important;
}
.regCheckout .account-info .item:last-child {
  border: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .regCheckout .account-info .item .item-val {
    display: block;
    width: 100%;
  }
}
.regCheckout .instruction {
  display: block;
  margin: 16px 0;
}
.regCheckout .instruction span {
  color: #A69A23;
}
.regCheckout .bank-num .form--use--input {
  border-color: #A69A23;
}
.regCheckout .btn {
  margin: 24px auto;
}
@media (max-width: 767px) {
  .regCheckout {
    flex-wrap: wrap;
  }
  .regCheckout .regCheckout--container {
    max-width: 100%;
  }
}

.invoice {
  padding-bottom: 8px !important;
}
.invoice--fillinfo {
  display: none;
}
.invoice--fillinfo.active {
  display: block;
}

.addon-product {
  display: flex;
  flex-wrap: wrap;
  margin-top: 24px;
}
.addon-product .product-slide {
  width: 50%;
}
.addon-product .product-slide--container .img-item {
  position: relative;
  width: 100%;
}
.addon-product .product-slide--container .img-item .imgbox {
  width: 100%;
  padding-top: 100%;
  position: relative;
}
.addon-product .product-slide--container .img-item .imgbox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.addon-product .product-slide--container .img-item .expandimg {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  padding: 6px;
  background: #fff;
  border-radius: 6px;
  position: absolute;
  right: 8px;
  top: 8px;
}
.addon-product .product-slide--container .img-item .expandimg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.addon-product .product-slide--container .slick-arrow {
  filter: brightness(0);
  opacity: 0.1;
}
.addon-product .product-slide--container .slick-arrow.slick-next {
  right: 0;
}
.addon-product .product-slide--container .slick-arrow.slick-prev {
  left: 0;
}
.addon-product .product-intro {
  width: 50%;
  box-sizing: border-box;
  padding-left: 24px;
}
.addon-product .product-intro .product-name {
  margin: 24px 0;
}
.addon-product .product-intro .product-price {
  color: #A69A23;
}
.addon-product .product-intro .inventory {
  color: #A69A23;
  margin-top: 16px;
  margin-bottom: 24px;
}
.addon-product .product-intro section .imgbox img {
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .addon-product .product-slide {
    width: 100%;
  }
  .addon-product .product-intro {
    width: 100%;
    padding-left: 0;
  }
}

.addon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3.5%;
  margin-bottom: 16px;
  margin-top: 16px;
}
.addon-list .item {
  width: 31%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #fff;
  margin-bottom: 32px;
}
.addon-list .item a {
  height: 100%;
  color: #3C3C3C;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
}
.addon-list .item a:hover .item-cover img {
  transition: 0.3s;
  border: solid 8px #FFE800;
}
.addon-list .item .item-cover {
  width: 100%;
  padding-top: 100%;
  position: relative;
}
.addon-list .item .item-cover img {
  border: solid 0px #FFE800;
  transition: 0.3s;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.addon-list .item .item-name {
  flex-grow: 1;
  margin: 16px 0;
  padding: 0 16px 0 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  height: 100%;
  min-height: 66px;
  transition: 0.3s;
}
.addon-list .item .item-name:hover {
  color: #A69A23;
}
.addon-list .item .item-name span {
  font-size: 16px;
  line-height: 22px;
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.addon-list .item .item-price {
  color: #A69A23;
  padding: 0 16px 16px 16px;
  box-sizing: border-box;
}
.addon-list .item .btn.addtocart {
  margin: 0 auto;
  width: calc(100% - 32px);
  justify-content: center;
  padding: 0;
}
.addon-list .item .order-quan .title {
  display: block !important;
}
.addon-list .item .order-quan .qcount {
  width: 60px;
  flex-shrink: 0;
  border: none;
  background: #FAFAFA;
  justify-content: center;
}
.addon-list .item .order-quan .qcount .qnum {
  background: none;
}
.addon-list .item.item-tiny {
  width: 100%;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16px;
}
.addon-list .item.item-tiny a.item-link {
  display: flex;
  flex-direction: row;
}
.addon-list .item.item-tiny .item-cover {
  width: 20%;
  padding-top: 20%;
  flex-shrink: 0;
  position: relative;
}
.addon-list .item.item-tiny .item-name {
  align-items: center;
}
.addon-list .item.item-tiny .quantity {
  flex-shrink: 0;
}
.addon-list .item.item-tiny .item-price {
  padding: 0 8px 0 16px;
  width: 140px;
  flex-shrink: 0;
}
.addon-list .item.item-tiny .item-delete {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  flex-shrink: 0;
  cursor: pointer;
  background: #9B9B9B;
  transition: 0.3s;
  margin-right: 8px;
}
.addon-list .item.item-tiny .item-delete img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.addon-list .item.item-tiny .item-delete:hover {
  background: #000;
}
@media (max-width: 767px) {
  .addon-list .item {
    width: 48.25%;
  }
  .addon-list .item.item-tiny {
    width: 48.25%;
    flex-direction: column;
    position: relative;
  }
  .addon-list .item.item-tiny .item-cover {
    width: 100%;
    padding-top: 100%;
    flex-shrink: 1;
  }
  .addon-list .item.item-tiny .item-name {
    margin-top: 16px;
    align-items: flex-start;
  }
  .addon-list .item.item-tiny .quantity {
    flex-shrink: 0;
    padding: 0 8px;
    margin: 8px 0;
  }
  .addon-list .item.item-tiny .quantity .title {
    display: none;
  }
  .addon-list .item.item-tiny .item-delete {
    position: absolute;
    top: 8px;
    right: 0px;
  }
  .addon-list .item.item-tiny .item-price {
    padding: 0 8px 12px 8px;
  }
}

.quantity {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.quantity .title {
  margin-right: 4px;
  color: #3C3C3C;
  flex-shrink: 0;
}
.quantity .qcount {
  border: solid 1px #F1F1F1;
  display: flex;
  align-items: center;
}
.quantity .qcount button {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  width: 35px;
  height: 35px;
  background: #FFE800;
  color: #000;
}
.quantity .qcount .qnum {
  height: 35px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #fff;
  max-width: 50px;
}
.quantity .qcount .qnum input {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border: none;
  outline: none;
}

.form-cart {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding-top: 8px;
  border-top: solid 1px #9B9B9B;
}
.form-cart .cart-amount {
  width: 50%;
  border: none;
  padding: 4px 16px;
}
@media (max-width: 767px) {
  .form-cart {
    gap: 8px;
  }
  .form-cart .cart-amount {
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
  }
}

.cart-amount {
  padding: 16px;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  justify-content: flex-end;
  color: #9B9B9B;
  border: solid 2px #FFE800;
  border-radius: 8px;
  background: #fff;
}
.cart-amount .title {
  padding-top: 9px;
}
.cart-amount .currency {
  padding-left: 8px;
}
.cart-amount .amount-num {
  color: #DE0065;
}

.addbtn.btn {
  align-self: flex-end;
}
.addbtn.btn .img {
  display: block;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  background: url("/images/icon/icon-shoppingcart.png") center center no-repeat;
  background-size: contain;
}
.addbtn.btn:hover .img {
  background: url("/images/icon/icon-shoppingcart-w.png") center center no-repeat;
  background-size: contain;
}

.taxtag {
  font-size: 14px !important;
  display: inline-block;
}

.sec-exhibition {
  background: #FAFAFA url("../images/bg-yel-curve.png") top center no-repeat;
  background-size: 110% 200vh;
  box-sizing: border-box;
  padding: 64px 0;
  margin-bottom: -64px;
}
.sec-exhibition--list {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  margin-bottom: 64px;
}
.sec-exhibition--list .card-item {
  width: calc((100% - 112px) / 3);
}
.sec-exhibition--list .card-item .card-info .period {
  position: relative;
  min-height: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.sec-exhibition--list .card-item .card-info .period--date {
  color: #9B9B9B;
}
.sec-exhibition--list .card-item .card-info .period--date span {
  display: inline-block;
}
.sec-exhibition--list .card-item .card-info .period--countdown {
  padding: 4px 6px;
  border-radius: 4px;
  background: #DE0065;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  position: absolute;
  right: 0;
  /*<1080*/
}
.sec-exhibition--list .card-item .card-info .period--countdown .icon {
  width: 20px;
  height: 20px;
}
.sec-exhibition--list .card-item .card-info .period--countdown .icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.sec-exhibition--list .card-item .card-info .period--countdown .timer {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 300;
}
@media (max-width: 1189px) {
  .sec-exhibition--list .card-item .card-info .period--countdown {
    top: -40px;
    right: -8px;
  }
}
@media (max-width: 1023px) {
  .sec-exhibition--list .card-item .card-info .period--countdown {
    top: 0px;
    right: 0px;
  }
}
@media (max-width: 767px) {
  .sec-exhibition--list .card-item .card-info .period--countdown {
    top: -40px;
    right: -8px;
  }
}
@media (max-width: 479px) {
  .sec-exhibition--list .card-item .card-info .period--countdown {
    top: 0px;
    right: 0px;
  }
}
.sec-exhibition--list .card-item .card-info .card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.sec-exhibition--list .card-item .card-info .card-meta .card-cate {
  box-sizing: border-box;
  padding: 0;
  display: flex;
  gap: 4px;
  align-items: center;
}
.sec-exhibition--list .card-item .card-info .card-meta .card-cate span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.sec-exhibition--list .card-item .card-info .card-meta .card-cate.cate-location {
  width: 60%;
  /*<1080*/
}
@media (max-width: 1189px) {
  .sec-exhibition--list .card-item .card-info .card-meta .card-cate.cate-location {
    width: 100%;
  }
}
@media (max-width: 1023px) {
  .sec-exhibition--list .card-item .card-info .card-meta .card-cate.cate-location {
    width: 60%;
  }
}
@media (max-width: 767px) {
  .sec-exhibition--list .card-item .card-info .card-meta .card-cate.cate-location {
    width: 100%;
  }
}
@media (max-width: 479px) {
  .sec-exhibition--list .card-item .card-info .card-meta .card-cate.cate-location {
    width: 60%;
  }
}
.sec-exhibition--list .card-item .card-info .card-meta .card-cate.cate-type {
  width: calc(40% - 16px);
  /*<1080*/
}
@media (max-width: 1189px) {
  .sec-exhibition--list .card-item .card-info .card-meta .card-cate.cate-type {
    width: 100%;
  }
}
@media (max-width: 1023px) {
  .sec-exhibition--list .card-item .card-info .card-meta .card-cate.cate-type {
    width: calc(40% - 16px);
  }
}
@media (max-width: 767px) {
  .sec-exhibition--list .card-item .card-info .card-meta .card-cate.cate-type {
    width: 100%;
  }
}
@media (max-width: 479px) {
  .sec-exhibition--list .card-item .card-info .card-meta .card-cate.cate-type {
    width: calc(40% - 16px);
  }
}
.sec-exhibition--list .card-item .card-info .registration-date {
  letter-spacing: 0px;
}
.sec-exhibition--list .card-item .card-info .registration-date .reg-date {
  display: inline-flex;
  gap: 4px;
}
.sec-exhibition--list .card-item .card-actbox .btn span {
  display: block;
  text-align: center;
}
.sec-exhibition--list .card-item.reg-on .card-info .registration-date {
  color: #FF9022;
}
.sec-exhibition--list .card-item.reg-on:hover .card-actbox .btn {
  color: #fff;
  background: #A69A23;
}
.sec-exhibition--list .card-item.reg-off .card-actbox {
  background: #CDCDCD;
}
.sec-exhibition--list .card-item.reg-off .card-actbox .btn:hover {
  cursor: initial;
  background: #9B9B9B !important;
}
@media (max-width: 1023px) {
  .sec-exhibition--list {
    gap: 32px;
  }
  .sec-exhibition--list .card-item {
    width: calc((100% - 32px) / 2);
  }
}
@media (max-width: 479px) {
  .sec-exhibition--list {
    gap: 24px;
  }
  .sec-exhibition--list .card-item {
    width: 100%;
  }
}

.msg-btn {
  width: 50px;
  height: auto;
  position: fixed;
  right: 8px;
  bottom: 25vh;
  width: 53px;
  height: 53px;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.msg-btn--item {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.msg-btn--item svg {
  position: absolute;
  width: 47px;
  fill: #DE0065;
  transition: 0.3s;
  top: -1px;
  left: 3px;
}
.msg-btn:hover .msg-btn--item svg {
  fill: #A69A23;
}

.otherbox {
  display: none;
}
.otherbox.active {
  display: block;
}

.msgBox {
  width: 50%;
  max-width: 720px;
  position: relative;
}
.msgBox--header {
  background: #FFE800;
  padding: 16px 16px 16px 16px;
  box-sizing: border-box;
  background: #FFE800;
  display: flex;
  border-radius: 24px 24px 0 0;
}
.msgBox--header--title {
  color: #645B1B;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  width: calc(100% - 50px);
}
.msgBox--header--title .msg-title-brand {
  padding-left: 8px;
  color: #000;
  width: 100%;
  font-weight: bold;
}
.msgBox--main {
  padding: 8px 16px 16px 16px;
  box-sizing: border-box;
  border-radius: 0px 0px 24px 24px;
  background: linear-gradient(180deg, #FAFAFA 0%, #fff 100%);
}
.msgBox--main .form--use {
  margin-bottom: 0;
}
.msgBox--main .form--use .form--use--title {
  padding-bottom: 8px;
}
.msgBox--main .form--use--actbox {
  margin-top: 16px;
  justify-content: space-between;
  position: relative;
}
.msgBox--main .form--use--actbox .uploadbox--btn {
  background: url("/assets/images/icon/icon-uploadimg.svg") center center no-repeat;
  background-size: 18px 18px;
  width: 40px;
  height: 40px;
  display: block;
  text-indent: -5000px;
  padding: 0;
}
.msgBox--main .form--use--actbox .uploadbox--btn:hover {
  background: url("/assets/images/icon/icon-uploadimg.svg") center center no-repeat;
  background-size: 25px 25px;
}
.msgBox--main .form--use--actbox .imgalt {
  font-size: 12px;
  letter-spacing: 0;
  position: absolute;
  bottom: 8px;
  left: 40px;
}
.msgBox--main .form--use--actbox .form--use--error {
  position: absolute;
  display: block;
  bottom: -10px;
  left: 30px;
  font-size: 12px;
}
.msgBox--main--content {
  box-sizing: border-box;
  background: #fff;
  padding-bottom: 16px;
  max-height: calc(70vh - 300px - 50px);
  overflow: auto;
}
.msgBox--main--content .msgtext {
  width: 100%;
  min-height: 100px;
  margin: 0;
  outline: none;
  border-radius: 6px;
  padding: 16px 16px;
  box-sizing: border-box;
  border: solid 1px #F1F1F1;
}
.msgBox--main--content .msgimgbox {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.msgBox--main--content .msgimgbox--item {
  width: calc((100% - 18px) / 4);
  padding-top: 18%;
  position: relative;
}
.msgBox--main--content .msgimgbox--item .msg-img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
}
.msgBox--main--content .msgimgbox--item .item-delete {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #9B9B9B;
  border-radius: 50%;
  position: absolute;
  border: solid 1px #fff;
  right: 4px;
  top: 4px;
  transition: 0.3s;
  cursor: pointer;
}
.msgBox--main--content .msgimgbox--item .item-delete img {
  width: 60%;
  display: block;
  height: auto;
}
.msgBox--main--content .msgimgbox--item .item-delete:hover {
  background: #000;
}
@media (max-width: 767px) {
  .msgBox {
    width: 94%;
  }
  .msgBox--main--content .msgtext {
    width: 100%;
  }
  .msgBox--main--content .msgimgbox {
    gap: 6px;
  }
  .msgBox--main--content .msgimgbox--item {
    width: calc((100% - 12px) / 3);
    padding-top: 30%;
  }
}

.msgfunbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.msgfunbox--filter {
  display: flex;
}
.msgfunbox--filter .tag {
  color: #9B9B9B;
  transition: 0.3s;
}
.msgfunbox--filter .tag.active {
  color: #A69A23;
  font-weight: bold;
}
.msgfunbox--filter .tag:hover {
  color: #A69A23;
}
.msgfunbox--search {
  display: flex;
  border: solid 1px #CDCDCD;
  background: #fff;
}
.msgfunbox--search input {
  border: none;
  outline: none;
  padding-left: 8px;
  background: none;
}
.msgfunbox--search input::placeholder {
  color: #CDCDCD;
}
.msgfunbox--search .searchbtn {
  transition: 0.3s;
  background: url("/assets/images/icon/icon-msg-search.png") center center no-repeat;
  background-size: 50%;
  text-indent: -5000px;
  display: block;
  width: 35px;
  height: 35px;
}
@media (max-width: 767px) {
  .msgfunbox {
    justify-content: flex-end;
    width: 100%;
    margin-top: -44px;
  }
  .msgfunbox--search {
    margin-top: 4px;
    width: 100%;
  }
  .msgfunbox--search input {
    flex-grow: 1;
  }
}
@media (max-width: 479px) {
  .msgfunbox {
    justify-content: flex-start;
    margin-top: 0px;
  }
  .msgfunbox--filter {
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }
}

.msglist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 48px;
}
.msglist--item--box {
  display: flex;
  gap: 16px;
  box-sizing: border-box;
  padding: 16px 8px 16px 16px;
  background: #fff;
  border: solid 1px #F1F1F1;
}
.msglist--item--box .boxinline {
  display: inline;
}
.msglist--item--box .textbold {
  font-weight: bold;
}
.msglist--item--box .avatar {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 100%;
  flex-shrink: 0;
  position: relative;
}
.msglist--item--box .avatar img {
  display: block;
  object-fit: contain;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: solid 1px #F1F1F1;
}
.msglist--item--box .subject {
  color: #3C3C3C;
  flex-grow: 1;
}
.msglist--item--box .subject .subject-container .msg-from .sep {
  padding-left: 4px;
}
.msglist--item--box .subject .subject-container .msg-to .idname {
  padding-left: 8px;
}
.msglist--item--box .subject .followup-container {
  font-size: 12px;
  margin-top: 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.msglist--item--box .subject .followup-container .followup-time {
  color: #9B9B9B;
}
.msglist--item--box .subject .followup-container .followup-from {
  color: #645B1B;
}
.msglist--item--box .subject .followup-container .followup-from .idname {
  margin: 0 2px;
}
.msglist--item--box .subject .followup-container .followup-from .you-read {
  margin-left: 2px;
  margin-right: 4px;
}
.msglist--item--box .subject .followup-container .followup-excerpt {
  color: #645B1B;
}
@media (max-width: 767px) {
  .msglist--item--box .subject .followup-container {
    -webkit-line-clamp: 2;
  }
}
.msglist--item--box .actbox {
  width: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.msglist--item--box .actbox .msg-icon {
  display: none;
}
.msglist--item--box .actbox .msg-icon.msg-unread {
  width: 8px;
  height: 8px;
}
.msglist--item--box .actbox .msg-icon.msg-unread img {
  width: 100%;
  height: 100%;
  display: block;
}
.msglist--item--box .actbox .msg-icon.msg-read {
  width: 8px;
  height: 8px;
}
.msglist--item--box .actbox .msg-icon.msg-read img {
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(100);
  opacity: 0.1;
}
.msglist--item--box .actbox .msg-icon.msg-reply {
  width: 14px;
  height: 14px;
}
.msglist--item--box .actbox .msg-icon.msg-reply img {
  width: 100%;
  height: 100%;
  display: block;
}
.msglist--item--box .actbox .msg-icon.msg-delete {
  width: 30px;
  height: 30px;
  background: url("/assets/images/icon/icon-delete-gray.png") bottom 4px center no-repeat;
  text-indent: -5000px;
  background-size: 50%;
  opacity: 0.5;
  display: block;
}
.msglist--item--box .actbox .msg-icon.msg-delete:hover {
  opacity: 1;
}
.msglist--item[msg-from-type=official] .msglist--item--box {
  border-color: #FFE800;
}
.msglist--item[msg-status=new] .actbox .msg-read {
  display: block;
}
.msglist--item[msg-status=new] .actbox .msg-read img {
  filter: hue-rotate(230deg);
  opacity: 0.5;
}
.msglist--item[msg-status=unread] .actbox .msg-unread {
  display: block;
}
.msglist--item[msg-status=read] .actbox .msg-read {
  display: block;
}
.msglist--item[msg-status=reply] .actbox .msg-reply {
  display: block;
}

.logo-brandcompany {
  width: 20px;
  height: 20px;
  border: solid 1px #CDCDCD;
  background: #fff;
  border-radius: 100%;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  margin-top: -3px;
  overflow: hidden;
  position: absolute;
  right: -2px;
  bottom: -8px;
}
.logo-brandcompany img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-brandcompany-inline {
  width: 16px;
  height: 16px;
  border: solid 1px #CDCDCD;
  background: #fff;
  border-radius: 100%;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  margin-top: -2px;
  overflow: hidden;
}
.logo-brandcompany-inline img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.msg-type-tag {
  font-size: 12px;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  padding: 0;
  margin-top: 4px;
}
.msg-type-tag span {
  background: #FFE800;
  padding: 4px;
}

.msg-timeline--item {
  margin-bottom: 16px;
}
.msg-timeline--item .container {
  display: flex;
  gap: 8px;
  position: relative;
}
.msg-timeline--item .container .avatar {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  background: #fff;
  border: solid 1px #F1F1F1;
  border-radius: 100%;
  flex-shrink: 0;
  position: relative;
}
.msg-timeline--item .container .avatar img {
  display: block;
  object-fit: contain;
  width: 100%;
  height: 100%;
  border: solid 1px #F1F1F1;
  border-radius: 100%;
}
.msg-timeline--item .container .msg-content {
  border: solid 1px #F1F1F1;
  overflow: hidden;
  width: 100%;
}
.msg-timeline--item .container .msg-content .info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #FFE800;
  color: #000;
  padding: 12px;
  align-items: center;
}
.msg-timeline--item .container .msg-content .info .idname {
  font-weight: bold;
}
.msg-timeline--item .container .msg-content .info .datetime {
  font-size: 12px;
  color: #A69A23;
}
.msg-timeline--item .container .msg-content .content {
  padding: 12px;
  background: #fff;
}
.msg-timeline--item .container .msg-content .content .imgbox .img--item {
  width: 100%;
  position: relative;
  margin-bottom: 8px;
}
.msg-timeline--item .container .msg-content .content .imgbox .img--item img {
  display: block;
  width: 100%;
  height: 100%;
}
.msg-timeline--item .container .msg-content .content .actbox {
  display: flex;
  justify-content: flex-end;
}
.msg-timeline--item .container .msg-content .content .actbox .btn {
  display: inline-flex;
  border: solid 1px #A69A23;
  color: #A69A23;
  height: auto;
  padding: 4px 12px;
  font-size: 13px;
}
@media (max-width: 479px) {
  .msg-timeline--item .container .avatar {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .msg-timeline--item .container .msg-content .info {
    padding-left: 66px;
  }
  .msg-timeline--item .container .msg-content .info .datetime {
    width: 100%;
  }
}
.msg-timeline--item[data-timeline=others] .info {
  background: #F4F3E3 !important;
}

.msg-replybox {
  padding-top: 24px;
  margin-top: 48px;
  border-top: solid 1px #F1F1F1;
}
.msg-replybox--header {
  display: flex;
}
.msg-replybox--header .replyer {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #3C3C3C;
}
.msg-replybox--header .replyer .avatar {
  width: 52px;
  height: 52px;
  box-sizing: border-box;
  background: #fff;
  border: solid 1px #F1F1F1;
  border-radius: 100%;
  flex-shrink: 0;
  position: relative;
}
.msg-replybox--header .replyer .avatar img {
  display: block;
  object-fit: contain;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.msg-replybox--header .replyer .idname {
  font-weight: bold;
}
.msg-replybox .msgBox--main {
  border: solid 1px #F1F1F1;
  background: #fff;
  padding: 12px;
  margin-top: 16px;
}
.msg-replybox .msgBox--main .title {
  color: #3C3C3C;
  padding: 0 8px 8px 8px;
}
.msg-replybox .msgBox--main--content {
  overflow: visible;
  max-height: 100%;
}
.msg-replybox .msgBox--main .form--use--actbox {
  margin-top: 0;
  position: relative;
}
.msg-replybox .msgBox--main .form--use--actbox button {
  min-width: 100px;
}
.msg-replybox textarea {
  padding: 8px;
  border: solid 1px #F1F1F1;
  width: 100%;
  min-height: 200px;
  box-sizing: border-box;
  outline: none;
}
.msg-replybox .msgimgbox {
  margin-top: 8px;
}/*# sourceMappingURL=screen.css.map */