@charset "UTF-8";
/* First Row */
.first-row-container {
  background: rgba(240, 227, 211, 0.2);
  padding-top: 5.375rem;
}
.first-row-container .left-col img {
  width: 60%;
}
.first-row-container .left-col .accordion-item {
  border: 0;
}
.first-row-container .left-col .accordion-body,
.first-row-container .left-col .accordion-button {
  background: rgba(240, 227, 211, 0.2);
}
.first-row-container .left-col button,
.first-row-container .left-col button:focus {
  outline: none !important;
  box-shadow: none;
}
.first-row-container .left-col .accordion-button::after {
  transform: none;
  background-image: none;
  content: "+";
  margin: 0;
  color: rgb(113, 113, 113);
  font-family: EagleBook;
  margin-left: 1.25rem;
}
.first-row-container .left-col .accordion-button:not(.collapsed)::after {
  transform: none;
  content: "-";
  color: rgb(113, 113, 113);
  font-family: EagleBook;
}
.first-row-container .left-col button,
.first-row-container .left-col .accordion-body {
  padding: 0;
}
.first-row-container .left-col .accordion {
  padding: 1.2rem 0rem;
  border-bottom: 0.0625rem solid #ccc;
}
.first-row-container .left-col button span {
  color: #000;
  font-family: EagleBook;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.first-row-container .left-col .accordion-body {
  padding-top: 1.375rem;
  padding-bottom: 1.125rem;
}
.first-row-container .left-col .accordion-body span {
  font-size: 0.875rem;
}
.first-row-container .left-col .accordion-body .accordion-body-area {
  font-weight: 500;
  font-family: EagleBook;
}
.first-row-container .left-col .accordion-body .accordion-body-country {
  font-weight: 500;
  font-family: EagleLight;
}
.first-row-container .left-col .collapse-coffee-details-row {
  margin-top: 0.6875rem;
}
.first-row-container .left-col .collapseCoffeeRoastProgressLevelInfo {
  color: #000;
  font-family: EagleLight;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.first-row-container .left-col .collapseCoffeeRoastProgressLevelInfo p:not(:first-child) {
  margin-top: 1.4375rem;
}
.first-row-container .left-col .collapseCoffeeRoastProgressLevelInfo p:first-child {
  margin-top: 0.625rem;
}
.first-row-container .left-col .vertical-progress {
  position: relative;
  height: 10rem;
  width: 0.9375rem;
  background-image: linear-gradient(to bottom, #c69e7d, #6c4522);
  overflow: visible;
}
.first-row-container .left-col .vertical-progress img {
  padding: 0.3125rem;
  border-radius: 100%;
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: bottom 0.6s ease;
}
.first-row-container .left-col .vertical-progress .progress-bar {
  width: 100%;
  height: 0;
  transition: height 0.6s ease;
  background-image: linear-gradient(to bottom, #c69e7d, #6c4522);
}
.first-row-container .left-col #collapseCoffeeMachine img {
  width: 2.1875rem;
  margin-right: 0.875rem;
}
.first-row-container .middle-col {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.first-row-container .middle-col img {
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.first-row-container .middle-col img.img-first {
  max-width: 6rem;
  margin-right: -2rem;
}
.first-row-container .middle-col img.img-second {
  width: 100%;
  height: 60vh;
}
.first-row-container .middle-col img.img-third {
  max-width: 6rem;
  margin-left: -4rem;
}
.first-row-container .right-col #product-title {
  color: #ce0e2d;
  font-family: EagleBook;
  font-size: 3.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 1rem;
}
.first-row-container .right-col #rank {
  margin-bottom: 0.5rem;
}
.first-row-container .right-col #rank i {
  width: 1.125rem;
  color: #cc9966;
}
.first-row-container .right-col #rank span {
  color: #000;
  font-family: EagleBook;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-left: 0.9375rem;
}
.first-row-container .right-col #detail-info {
  color: #666;
  font-family: EagleLight;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.05rem;
}
.first-row-container .right-col #buying-info {
  color: #000;
  font-family: EagleBook;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.0625rem;
  margin-bottom: 0;
}
.first-row-container .right-col .select-group {
  margin-top: 0.625rem;
}
.first-row-container .right-col .select-group .form-select {
  max-width: 35%;
  height: 3.0625rem;
  border-radius: 1.875rem;
  border: 0.0625rem solid #b69e86;
  color: #000;
  font-family: EagleBook;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.05rem;
}
.first-row-container .right-col .select-group .form-select:focus {
  outline: none;
  box-shadow: none;
}
/* Second Row */
.second-row-container h2 {
  margin-top: 3.9375rem;
  color: #000;
  text-align: center;
  font-family: EagleBook;
  font-size: 3.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 0;
}
@media (max-width: 992px) {
  .second-row-container h2 {
    font-size: 1.375rem;
    margin-top: 2.625rem;
    text-align: left;
  }
}
.second-row-container .second-row-pc-container {
  padding-bottom: 3.9375rem;
}
.second-row-container .second-row-pc-container > div {
  margin-top: 3.875rem;
}
.second-row-container .second-row-pc-container img {
  max-width: 5rem;
  max-height: 5rem;
}
.second-row-container .second-row-pc-container h5 {
  color: #000;
  font-family: EagleBook;
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 0;
  margin-top: 1.875rem;
}
/* Third Row */
.aroma-container {
  padding-bottom: 3.1875rem;
}
@media (max-width: 992px) {
  .aroma-container {
    padding-top: 2.5rem;
    padding-bottom: 1.9375rem;
  }
}
.aroma-container.padding-top {
  padding-top: 5rem;
}
.aroma-container.bg-coffee {
  background: rgba(240, 227, 211, 0.2);
}
.aroma-container h2 {
  color: #000;
  text-align: center;
  font-family: EagleBook;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
@media (max-width: 992px) {
  .aroma-container h2 {
    font-size: 1.375rem;
  }
}
.aroma-container p {
  color: #666;
  text-align: center;
  font-family: EagleLight;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1rem;
  margin: 0 auto;
}
@media (max-width: 992px) {
  .aroma-container p {
    font-size: 0.875rem;
    max-width: 100%;
    margin: 0 0;
  }
}
.aroma-container .aroma-info-container {
  padding-bottom: 2rem;
}
.aroma-container .aroma-info-container .aroma-info-container-image-container {
  width: 25%;
  height: 11.5rem;
}
@media (max-width: 992px) {
  .aroma-container .aroma-info-container .aroma-info-container-image-container {
    border-radius: 1.25rem;
    border: 0.0625rem solid #f0e3d3;
    background: rgba(255, 255, 255, 0);
  }
}
.aroma-container .aroma-info-container .aroma-info-container-image-container .aroma-info-container-image {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}
@media (max-width: 992px) {
  .aroma-container .aroma-info-container .aroma-info-container-image-container .aroma-info-container-image {
    height: 80%;
  }
}
.aroma-container .aroma-info-container .aroma-info-container-image-container p {
  text-align: center;
  margin-top: 1.3125rem;
  font-family: EagleBook;
  font-size: 1.625rem;
  color: #714519;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  word-wrap: break-word;
}
@media (max-width: 992px) {
  .aroma-container .aroma-info-container .aroma-info-container-image-container p {
    color: #333;
    font-size: 0.875rem;
    margin-top: 0rem;
  }
}
.aroma-container .diagram-container {
  padding: 8rem 0;
}
.aroma-container .diagram-container .diagram-container-leftside .diagram-container-leftside-title {
  color: #000;
  margin-bottom: 4.8125rem;
  font-family: EagleBook;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.aroma-container .diagram-container .diagram-container-leftside .diagram-container-leftside-graph-container h3 {
  font-family: EagleBook;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: right;
  margin: 0;
}
.aroma-container .diagram-container .diagram-container-leftside .diagram-container-leftside-graph-container p {
  margin-bottom: 0;
  font-family: EagleLight;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: right;
}
.aroma-container .diagram-container .diagram-container-leftside .diagram-container-leftside-graph-container .attribute-info:after {
  content: "\f431";
  font-family: "bootstrap-icons" !important;
  vertical-align: -0.125em;
  color: #b69e86;
  padding-left: 0.5rem;
  font-size: 0.9rem;
}
.aroma-container .diagram-container .diagram-container-leftside .diagram-container-rightside p {
  color: #000;
  font-family: "EagleLight";
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
/* Fourth Row */
.fourth-row-container {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: 8.5625rem;
  padding-bottom: 8.5625rem;
}
@media (max-width: 992px) {
  .fourth-row-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.fourth-row-container .bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(255, 255, 255, 0.4);
}
.fourth-row-container .fourth-row-inside-container {
  z-index: 1;
  position: relative;
}
@media (max-width: 992px) {
  .fourth-row-container .fourth-row-inside-container {
    width: 100%;
    max-width: 100%;
  }
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-left {
  position: relative;
  flex: 0 0 auto;
  width: 50%;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-left .fourth-row-coffee-title {
  margin-bottom: 2rem;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-left .fourth-row-coffee-title h3 {
  color: #000;
  font-family: "EagleBook";
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-left .fourth-row-coffee-title img {
  width: 1.9375rem;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-left #continent {
  width: 100% !important;
  height: auto !important;
  cursor: pointer;
  max-width: none;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-left .country-flag {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right {
  flex: 1;
  max-width: 55%;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right .fourth-row-coffee-title h3 {
  color: #000;
  font-family: "EagleBook";
  font-size: 3.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
@media (max-width: 992px) {
  .fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right .fourth-row-coffee-title h3 {
    font-size: 2rem;
  }
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right .fourth-row-coffee-country-details {
  padding-top: 0.3125rem;
  padding-bottom: 0.6875rem;
  margin-top: 3.125rem;
  border-top: 0.0625rem solid #000;
  border-bottom: 0.0625rem solid #000;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right .fourth-row-coffee-country-details .row {
  margin-top: 0.9375rem;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right .fourth-row-coffee-country-details .col-6 {
  color: #000;
  font-family: "EagleBook";
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right .fourth-row-coffee-country-details .col-5 {
  color: #000;
  font-family: Inter;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right .fourth-row-coffee-country-details .col-5 span {
  font-size: 1.375rem;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right .fourth-row-coffee-details {
  padding-top: 1.375rem;
  padding-bottom: 1.375rem;
  border-bottom: 0.0625rem solid #000;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right .fourth-row-coffee-details h4 {
  color: #000;
  font-family: "EagleBook";
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 18.75rem;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right .fourth-row-coffee-details p {
  color: #000;
  font-family: Inter;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.375rem;
}
.fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right .fourth-row-coffee-details span {
  font-family: "EagleBook";
}
@media (max-width: 992px) {
  .fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row {
    flex-direction: column;
    gap: 2rem;
    padding: 0 1rem;
  }
  .fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-left {
    width: 100%;
    max-width: 100%;
  }
  .fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right {
    max-width: 100%;
  }
  .fourth-row-container .fourth-row-inside-container .fourth-row-inside-container-first-row .fourth-row-inside-container-first-row-right .fourth-row-coffee-country-details {
    margin-top: 1.5rem;
  }
}
.fourth-row-container .beanInfoSwiper {
  width: 100%;
  height: 20rem;
}
.fourth-row-container .beanInfoSwiper .swiper-scrollbar {
  position: absolute;
  bottom: 0.3125rem;
}
.fourth-row-container .beanInfoSwiper .swiper-slide {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 18.75rem;
  width: 40%;
  border-radius: 0.625rem;
}
@media (max-width: 992px) {
  .fourth-row-container .beanInfoSwiper .swiper-slide {
    width: 50%;
  }
}
.fourth-row-container .beanInfoSwiper .swiper-slide .swiper-cover {
  position: absolute; /* 蒙层相对于父div定位 */
  top: 0;
  left: 0;
  width: 100%; /* 蒙层覆盖整个父div */
  height: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/images/website/product-details/swiper-cover.webp");
}
.fourth-row-container .beanInfoSwiper .swiper-slide h5 {
  position: absolute;
  bottom: 0;
  left: 5%;
  color: #fff;
  font-family: EagleLight;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5625rem;
  letter-spacing: 0em;
  text-align: left;
}
@media (max-width: 992px) {
  .fourth-row-container .beanInfoSwiper {
    height: 16rem;
    margin-top: 2rem;
  }
}
/* Giftbox */
.giftbox-container {
  position: relative;
  background-image: url("/assets/images/website/product-details/gift-box.webp");
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  margin: 0;
  padding: 6rem 0;
}
.giftbox-container .inner-box {
  background-color: #9E0B0F;
  color: #fff;
  padding: 3rem;
  border-radius: 1rem;
}
/* Fifth Row */
.roasting-container {
  background-color: #fcf9f6;
  position: relative;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (max-width: 992px) {
  .roasting-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
.roasting-container .roasting-bg {
  position: absolute;
  width: 30%;
  height: 50%;
  background-image: url("/assets/images/website/product-details/roasting-bg.webp");
  background-repeat: no-repeat;
  opacity: 0.1;
  right: 1%;
  top: 25%;
  z-index: 1;
}
@media (max-width: 992px) {
  .roasting-container .roasting-bg {
    display: none;
  }
}
.roasting-container .first-row h2 {
  font-family: EagleBook;
  font-weight: 500;
  line-height: 3.5625rem;
  margin-bottom: 0;
}
.roasting-container .first-row p {
  font-family: Inter;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.375rem;
}
.roasting-container .first-row .roasting-level {
  width: 65% !important;
  margin: auto;
}
.roasting-container .first-row .roasting-level img {
  height: 100%;
  width: 15%;
}
.roasting-container .first-row .roasting-level .roasting-level-text {
  font-size: 1rem;
}
.roasting-container .first-row .roasting-level-bar {
  position: relative;
  background: #bf9f7f;
  background: linear-gradient(to right, #bf9f7f 0%, #957556 50%, #67492a 100%);
  height: 2rem;
  border-radius: 2rem;
  display: flex;
  align-items: center;
}
.roasting-container .first-row .roasting-level-bar span {
  position: absolute;
  background-image: url("/assets/images/website/common/temperature.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  left: 0%;
  background-color: #fff;
  box-shadow: 3px 2px 6px rgba(0, 0, 0, 0.25);
}
.roasting-container .second-row h5 {
  font-family: EagleBook;
  font-size: 1.875rem;
  letter-spacing: 0em;
  text-align: left;
}
.roasting-container .second-row p {
  font-family: Inter;
  font-size: 1.125rem;
  line-height: 1.375rem;
  text-align: left;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.roasting-container .second-row a {
  background-color: #cc9966;
  color: #fff;
  font-family: EagleBook;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.125rem;
  letter-spacing: 0em;
  text-align: center;
  padding: 0.625rem 1.25rem;
  border-radius: 1.25rem;
}
.roasting-container .second-row img {
  max-width: 100%;
  height: auto;
}
/* Seventh Row */
.seventh-row-container {
  margin-bottom: 1.875rem;
}
.seventh-row-container h5 {
  font-family: EagleBook;
  font-size: 3.125rem;
  font-weight: 500;
  line-height: 3.5625rem;
  letter-spacing: 0em;
  margin-top: 4rem;
}
@media (max-width: 992px) {
  .seventh-row-container h5 {
    font-size: 1.375rem;
    margin-top: 2rem;
  }
}
.seventh-row-container .card {
  max-width: 22.4375rem;
  padding: 1rem;
  border-radius: 1.25rem;
  border: 0;
  background: #fff;
  box-shadow: 0rem 0rem 1.25rem 0rem rgba(0, 0, 0, 0.08);
}
.seventh-row-container .card button {
  padding: 0;
}
.seventh-row-container .card .card-img-top {
  background-color: rgba(240, 227, 211, 0.2);
  border-radius: 1.25rem;
}
.seventh-row-container .card .card-body {
  padding: 0;
  margin-top: 0.75rem;
}
.seventh-row-container .card .card-price {
  color: #c96;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.375rem;
  letter-spacing: -0.025rem;
  margin-bottom: 0;
}
.seventh-row-container .card .card-title {
  color: #333;
  font-family: EagleBook;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: -0.0313rem;
  margin-bottom: 0;
}
.seventh-row-container .card .divide {
  height: 0.0625rem;
  width: 100%;
  background-color: #f0e3d3;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.seventh-row-container .card .bi-heart-container {
  border-radius: 0.625rem;
  border: 0.0625rem solid #f0e3d3;
  padding: 0.5rem 0.8rem;
}
.seventh-row-container .card button {
  border-radius: 1.875rem;
  width: 70%;
  background: #c96;
  border: 0;
  color: #fff;
  padding: 0.625rem;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: -0.0313rem;
}
@media (max-width: 992px) {
  .seventh-row-container .card button {
    width: 70%;
  }
}
.seventh-row-container .card button:hover {
  background: #9e0b0f;
}
.seventh-row-container .swiper-pagination {
  display: none;
}
.seventh-row-container .swiper-wrapper {
  padding-bottom: 1.875rem;
}
/* Mobile View */
@media (max-width: 768px) {
  .first-row-container {
    padding: 0;
  }
  .first-row-container .middle-col {
    position: relative;
    height: auto;
    padding: 1rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-size: 80%;
  }
  .first-row-container .middle-col img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 60vh;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .first-row-container .middle-col img.img-first {
    width: 3rem;
    margin-right: -1rem;
  }
  .first-row-container .middle-col img.img-second {
    width: 100%;
    height: auto;
    max-height: 36.5vh;
  }
  .first-row-container .middle-col img.img-third {
    width: 3rem;
    margin-left: -2rem;
  }
  .first-row-container .right-col {
    background: #fff;
    border-radius: 1.875rem 1.875rem 0rem 0rem;
    padding: 3rem 1rem;
  }
  .first-row-container .right-col #product-title {
    margin-bottom: 0;
    color: #ce0e2d;
    font-size: 1.375rem;
    line-height: 1.5rem;
  }
  .first-row-container .right-col #rank {
    border-radius: 1.875rem;
    border: 0.0625rem solid #e6e7e9;
    padding: 0.1875rem 0.5rem;
    background: rgba(217, 217, 217, 0);
  }
  .first-row-container .right-col #rank span {
    margin-left: 0.375rem;
    font-size: 0.75rem;
  }
  .first-row-container .right-col #detail-info {
    margin: 0.625rem 0rem;
  }
  .first-row-container .right-col .form-group select.form-select {
    border-color: rgba(240, 227, 211, 0.2);
    background-color: rgba(240, 227, 211, 0.2);
  }
  .first-row-container .right-col .form-group select option {
    background-color: rgba(240, 227, 211, 0.2);
  }
  .roasting-container .first-row .roasting-level {
    width: 100% !important;
  }
  .roasting-container .first-row .roasting-level img {
    height: 100%;
    width: 15%;
  }
  .roasting-container .first-row .roasting-level .roasting-level-text {
    font-size: 1rem;
  }
  .roasting-container .second-row .box {
    border-radius: 1rem;
    overflow: hidden;
    background-color: #c96;
  }
  .roasting-container .second-row .box h5 {
    font-size: 1.125rem;
    line-height: 1.125rem;
    color: #fff;
    margin-top: 1rem;
    text-align: center;
  }
  .roasting-container .second-row .box p {
    font-family: Inter;
    font-size: 0.75rem;
    line-height: 0.875rem;
    color: #fff;
    margin-bottom: 0;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    text-align: center;
  }
  .roasting-container .second-row .box a {
    text-align: center;
    display: inline-block;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 2.8125rem;
    color: #fff;
    font-size: 0.875rem;
    background-color: #9e0b0f;
  }
  .aroma-container .diagram-container {
    padding: 2rem 0;
  }
  .container-xxl {
    padding: 0 0;
  }
}