@charset "utf-8";
.goodyear #modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none; }

.goodyear #modal .btn_close {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
  background-color: #ddd;
  color: #333;
  font-weight: 700; }

.goodyear .modal_wrap {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  width: 95%;
  margin: 0 auto;
  height: calc(100% - 70px);
  overflow-y: scroll; }

.goodyear .modal_content {
  background-color: #004991;
  overflow: hidden; }

.goodyear #modal .header {
  padding: 10vw 2.5% 0;
  margin-bottom: 10vw; }

.goodyear #modal .bg_sm {
  background: url("/asp/photo/auction/brand/goodyear/img/bg_modal_sm.jpg") center / cover no-repeat; }

.goodyear #modal .bg_st {
  background: url("/asp/photo/auction/brand/goodyear/img/bg_modal_st.jpg") center / cover no-repeat; }

.goodyear #modal .bg_al {
  background: url("/asp/photo/auction/brand/goodyear/img/bg_modal_al.jpg") center / cover no-repeat; }

.goodyear #modal h2 {
  transform: skewX(0);
  margin-bottom: 2vw; }

.goodyear #modal h2 img {
  max-height: 14vw;
  width: auto;
  margin-bottom: 2vw; }

.goodyear #modal h2 small {
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 3px #000;
  font-size: 12px; }

.goodyear #modal .icon {
  justify-content: center;
  margin-bottom: 5vw; }

.goodyear #modal .icon .type {
  background-color: #fcde07;
  color: #004991;
  font-size: 12px;
  font-weight: 700;
  padding: 0.5em 1em;
  margin-right: 0.5em; }

.goodyear #modal .icon .drop {
  background-color: #ff4800;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 0.5em 1em; }

.goodyear #modal .detail {
  padding: 0 2.5%;
  margin-bottom: 10vw;
  color: #fff;
  line-height: 1.8; }

.goodyear #modal .detail_h {
  font-size: 4.6vw;
  font-weight: 700;
  margin-bottom: 10vw;
  text-align: center; }

.goodyear #modal .detail_p {
  font-size: 3.8vw;
  font-weight: 500; }

.goodyear #modal .car {
  padding: 0 2.5%;
  margin-bottom: 10vw; }

.goodyear #modal .car dt {
  font-size: 4.6vw;
  color: #fcde07;
  font-weight: 700;
  margin-bottom: 3vw; }

.goodyear #modal .car dd {
  justify-content: flex-start; }

.goodyear #modal .car dd div {
  width: 27%;
  margin: 0 3%; }

.goodyear #modal .car dd img {
  height: 18vw;
  width: auto;
  margin: 0 auto; }

.goodyear #modal .size_list {
  padding: 0 2.5% 10vw; }

.goodyear #modal .size_list h3 {
  text-align: center;
  font-size: 6vw;
  letter-spacing: 0.05em;
  color: #fcde07;
  font-weight: 700;
  transform: skewX(-10deg);
  line-height: 1.3;
  margin-bottom: 1em; }

.goodyear #modal .size_list h3 small {
  display: block;
  font-size: 0.7em;
  letter-spacing: 0; }

.goodyear #modal .table_wrap {
  overflow-x: scroll; }

.goodyear #modal table {
  font-size: 14px;
  width: 380px;
  margin: 0 auto;
  text-align: center; }

.goodyear #modal .size_list thead th {
  background-color: #fcde07;
  color: #004991;
  font-weight: 700;
  border-top: 5px solid #fcde07;
  border-bottom: 5px solid #fcde07;
  vertical-align: middle;
  padding: 0.5em 0; }

.goodyear #modal thead th:nth-of-type(n+2) {
  border-left: 1px solid #004991; }

.goodyear #modal thead th:last-of-type {
  border-right: none; }

.goodyear #modal table td {
  background-color: #fff;
  border: 1px solid #222;
  border-right: none;
  vertical-align: middle; }

.goodyear #modal tbody .inch, .goodyear #modal tbody .oblateness {
  background-color: #e7e7e7;
  color: #222;
  font-weight: 700;
  border: 1px solid #222;
  border-left: none;
  vertical-align: middle; }

.goodyear #modal table .inch {
  display: table-cell;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  min-width: 4em;
  color: #222; }

.goodyear #modal table .oblateness {
  min-width: 4em; }

.goodyear #modal table .size {
  width: 9999px; }

.goodyear #modal table .size a {
  display: block;
  color: #222;
  font-weight: 700;
  padding: 0.8em 0 0.8em 1.5em; }

.goodyear #modal table .link {
  min-width: 9em; }

.goodyear #modal table .link a {
  color: #fff;
  background-color: #ff6c00;
  border-radius: 0.7em;
  display: block;
  width: 8em;
  text-align: center;
  margin: 0 auto;
  padding: 0.4em 0;
  font-weight: 700;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 12px; }

@media screen and (min-width: 768px) {
  .goodyear .modal_wrap {
    width: 750px; }
    .goodyear #modal .btn_close {
      right: calc(50% - 374px);
      cursor: pointer;
      transition: 0.3s; }
    .goodyear #modal .btn_close:hover {
      background-color: #fcde07;
      color: #004991; }
    .goodyear #modal .header {
      padding: 0 50px;
      margin-bottom: 30px;
      position: relative;
      height: 250px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start; }
    .goodyear #modal h2 {
      margin-bottom: 15px;
      position: relative;
      z-index: 1; }
    .goodyear #modal h2 img {
      margin: 0 0 15px 0;
      max-width: 400px;
      max-height: 80px; }
    .goodyear #modal h2 small {
      text-align: left; }
    .goodyear #modal .img_tire {
      position: absolute;
      bottom: 0;
      right: 50px;
      margin: 0;
      height: 200px; }
    .goodyear #modal .img_tire img {
      margin-right: 0; }
    .goodyear #modal .icon {
      justify-content: flex-start;
      margin-bottom: 0; }
    .goodyear #modal .detail {
      padding: 0;
      margin-bottom: 30px; }
    .goodyear #modal .detail_h {
      font-size: 22px;
      margin-bottom: 30px; }
    .goodyear #modal .detail_p {
      font-size: 16px;
      text-align: center; }
    .goodyear #modal .car {
      padding: 0;
      margin: 0 auto 50px;
      width: 500px; }
    .goodyear #modal .car dt {
      font-size: 18px;
      margin-bottom: 10px; }
    .goodyear #modal .car dd div {
      width: auto;
      margin: 0 2%; }
    .goodyear #modal .car dd img {
      height: 60px; }
    .goodyear #modal .size_list {
      padding: 0 0 50px; }
    .goodyear #modal .size_list h3 {
      font-size: 24px; }
    .goodyear #modal .table_wrap {
      overflow-x: hidden; }
    .goodyear #modal table {
      width: 500px;
      font-size: 16px; }
    .goodyear #modal table .inch, .goodyear #modal table .oblateness {
      min-width: 6em; }
    .goodyear #modal table .link {
      min-width: 8em; }
    .goodyear #modal table .size a {
      text-align: left;
      padding-left: 2em;
      position: relative;
      z-index: 0;
      transition: 0.3s; }
    .goodyear #modal table .size a:hover {
      color: #004991; }
    .goodyear #modal table .size a::before {
      content: '';
      position: absolute;
      z-index: -1;
      top: 0.5em;
      left: 2.5%;
      width: 95%;
      height: 65%;
      box-shadow: 1px 1px 3px #000;
      border-radius: 1em;
      background-color: #fcde07;
      transform: scale(0, 1);
      transform-origin: right bottom;
      transition: transform 0.3s; }
    .goodyear #modal table .size a:hover::before {
      transform: scale(1, 1);
      transform-origin: left bottom; }
    .goodyear #modal table .link a {
      transition: 0.3s; }
    .goodyear #modal table .link a:hover {
      color: #004991;
      background-color: #fcde07;
      box-shadow: 1px 1px 3px #000; } }