@import "style.css";

.product-info {
  width: calc(50% - 20px);
  margin-bottom: 20px;
  display: block;
}

.product-info-large .image h2 {
  color: var(--main-white);
  background-color: var(--main-color);
  position: absolute;
  left: calc(50% - 350px);
  top: calc(50% - 213px);
  font-size: 9em;
  width: 700px;
  height: 213px;
  text-align: center;
}

.product-info-large .image div {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-color: var(--main-border-color);
  position: absolute;
  top: 0;
}

.product-detail {
  width: 100%;
  margin-top: 10px;
  position: relative;
}

.product-detail #name {
  position: relative;
}

.product-detail #bonus {
  width: 100%;
  height: 50px;
  font-size: 2em;
  color: var(--main-white);
  text-align: left;
  margin: 10px 0 0 0;
  padding-left: 10px;
  background-color: var(--main-color);
  position: relative;
  display: block;
  /* display: none; */ /* 若需隱藏價格則開啟 display: none; */
}

.product-large {
  width: calc(100% - 100px);
  margin: 30px 50px;
  display: flex;
  flex-wrap: wrap;
}

.product-info-large {
  margin: 30px 50px;
}

.product-info-large .confirm {
  width: 100%;
  height: auto;
  font-size: var(--main-content-size);
  font-weight: 200;
  color: var(--main-white);
  text-align: center;
  background-color: var(--main-black);
  margin: 30px auto;
}

#reverse {
  color: var(--main-color);
  background-color: var(--main-white);
  border: 2px solid var(--main-border-color);
  margin-top: 0;
}

.product-detail-large {
  width: 100%;
  display: inline-flex;
  margin-top: 30px;
}

.product-detail-large #info {
  width: 100%;
  height: auto;
  margin: 0 10px;
}

.product-detail-large #name {
  width: auto;
  width: 100%;
  max-width: 100%;
  font-size: var(--main-h2-size);
}

.product-detail-large #coin {
  width: auto;
  width: 100%;
  max-width: 100%;
  font-size: 2.1em;
  color: var(--main-color);
  margin: 0 10px;
}

.product-detail-large #exchange {
  max-width: 100%;
  font-size: var(--main-h2-size);
  color: var(--main-white);
  text-align: center;
  line-height: 46px;
  height: 50px;
  margin: 10px 0 0 0;
  padding: 21px 30px;
  background-color: var(--main-color);
  word-break: keep-all;
  white-space: nowrap;
   /* display: none; */ /* 若需隱藏價格則開啟 display: none; */
}

.dialog {
  margin: 0 60px 60px 60px;
}

.dialog #modify {
  margin: 0 50px 40px auto;
  display: inline-block;
}

.dialog #confirm {
  margin: 0 auto 40px auto;
  display: inline-block;
}

.email {
  width: calc(100% - 140px);
  height: 130px;
  font-weight: 200;
  margin: 0 70px 60px 70px;
}

.email p {
  font-size: var(--main-content-size);
}

.email form {
  width: 100%;
  margin-top: 10px;
}

.email input {
  border: none;
  border-bottom: 2px solid;
  font-size: var(--main-content-size);
}

.email input:focus {
  outline: none;
}

.email input::placeholder {
  color: var(--main-grey);
}

.dialog #record {
  margin: 0 auto 50px auto;
  display: table;
}

.response {
  width: calc(100% - 140px);
  font-weight: 200;
  margin: 0 70px 30px 70px;
}

.response p {
  font-size: var(--main-content-size);
  line-height: 2em;
  margin: 0 auto;
}

ul {
  font-size: var(--main-content-size);
}

.optionNote {
  width: 100%;
  max-width: 100%;
  font-size: 2.1em;
  color: var(--main-color);
  margin: 0 10px;
}

li a {
  color: black;
  text-decoration: underline;
  word-wrap: break-word;
}