.modal .modal-content {
  padding: 0;
}

.modal a.close-modal {
  top: -53px;
  right: 0;
  width: 36px;
  height: 36px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8c3ZnIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMjggMTI4OyBmaWxsOiAjZmZmOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTI4IDEyOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGc+DQogICAgICAgIDxwb2x5Z29uIHBvaW50cz0iODIuNCw0MCA2NCw1OC4zIDQ1LjYsNDAgNDAsNDUuNiA1OC4zLDY0IDQwLDgyLjQgNDUuNiw4OCA2NCw2OS43IDgyLjQsODggODgsODIuNCA2OS43LDY0IDg4LDQ1LjYgICIgLz4NCiAgICAgICAgPHBhdGggZD0iTTEsMTI3aDEyNlYxSDFWMTI3eiBNOSw5aDExMHYxMTBIOVY5eiIgLz4NCiAgICA8L2c+DQo8L3N2Zz4=);
}

ul.play-list {
  justify-content: start;
}

ul.play-list li.play-item picture.o.picture {
  cursor: pointer;
}

ul.play-list li.play-item {
  margin-top: 40px;
  /* border-bottom: 1px solid #cdcdcd; */
}

ul.play-list li.play-item:nth-child(3n - 2) {
  padding-right: 20px;
}

ul.play-list li.play-item:nth-child(3n - 1) {
  padding-left: 10px;
  padding-right: 10px;
}

ul.play-list li.play-item:nth-child(3n) {
  padding-left: 20px;
}

li.play-item picture.o.picture > img {
  object-fit: cover;
  height: calc((1146px / 3 - 20px) / 16 * 9);
}

.youtube-iframe {
  width: 870px;
  height: calc(870px / 16 * 9);
}

li.play-item .exhibitor-name {
  display: block;
  text-align: center;
  font-size: 1rem;
  color: #555555;
  margin-top: 2rem;
  margin-bottom: 30px;
}

.jquery-modal .modal {
  width: 870px;
  max-width: 870px;
  background: none;
  box-shadow: none;
  padding: 0;
  margin-top: 60px;
}

.play-contents {
  height: 350px;
  overflow: auto;
  background-color: #fff;
  padding: 35px;
  position: relative;
  margin-bottom: 3rem;
}

.play-contents .company-header {
  position: relative;
}

.play-contents .company-buttons {
  position: absolute;
  right: 0;
  top: 0;
  color: #d92b2b;
}

.play-contents .company-buttons > *:not(:first-child) {
  margin-left: 12px;
}

.play-contents .company-header > * {
  display: block;
  font-weight: 600;
  font-size: 1rem;
}

.company-header .btn-brochure-download {
  font-weight: 500;
}

.company-header .company-type {
  color: #666666;
}

.company-header .company-brochure {
  color: #999999;
}

.play-contents .company-name {
  color: #d92b2b;
  font-size: 30px;
  font-weight: 600;
  max-lines: 2;
}

.play-contents .company-info {
  border-top: 1px solid #b7b7b7;
  padding-top: 18px;
}

.play-contents .company-info h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.play-contents .company-info p {
  color: #999999;
  font-size: 14px;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
}

.play-contents > .bottom-link {
  color: #d92b2b;
  font-size: 14px;
  text-align: left;
  letter-spacing: 0px;
  color: #d92b2b;
  position: absolute;
  bottom: 29px;
  right: 40px;
  z-index: 5;
}

.play-contents .bottom-link::after {
  content: '\f30b';
  font-family: 'Font Awesome 5 Free';
  font-weight: 600;
  padding-left: 3px;
}

.modal .modal-prev,
.modal .modal-next {
  position: absolute;
  top: calc(50% - 25px);
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #9a2323;
  border-radius: 100%;
  font-size: 25px;
}

.modal .modal-prev {
  left: -110px;
  padding-right: 3px;
}

.modal .modal-next {
  right: -110px;
  padding-left: 3px;
}

@media print, screen and (max-width: 64em) {
  ul.play-list li.play-item {
    margin-top: 30px;
  }

  ul.play-list li.play-item:nth-child(3n - 2) {
    padding-right: 0px;
  }

  ul.play-list li.play-item:nth-child(3n - 1) {
    padding-left: 0px;
    padding-right: 0px;
  }

  ul.play-list li.play-item:nth-child(3n) {
    padding-left: 0px;
  }

  ul.play-list li.play-item:nth-child(2n) {
    padding-left: 15px;
  }

  ul.play-list li.play-item:nth-child(2n - 1) {
    padding-right: 15px;
  }

  li.play-item .exhibitor-name {
    margin-bottom: 30px;
  }

  .youtube-iframe {
    width: calc(100vw - 110px);
    height: calc((100vw - 110px) / 16 * 10);
  }

  .jquery-modal .modal {
    width: calc(100vw - 110px);
    max-width: calc(100vw - 110px);
    position: absolute;
    top: 0;
    left: 55px;
  }

  .modal .modal-prev,
  .modal .modal-next {
    position: absolute;
    top: calc(50% - 18px);
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .modal .modal-prev {
    left: -50px;
    padding-right: 3px;
  }

  .modal .modal-next {
    right: -50px;
    padding-left: 3px;
  }

  .play-contents {
    margin-bottom: 20px;
  }

  li.play-item picture.o.picture > img {
    height: calc(((100vw - 62px) / 2 - 15px) / 16 * 9);
  }
}

@media print, screen and (max-width: 40em) {
  ul.play-list li.play-item:nth-child(2n) {
    padding-left: 0;
  }

  ul.play-list li.play-item:nth-child(2n - 1) {
    padding-right: 0;
  }

  .youtube-iframe {
    width: 100vw;
    height: calc(100vw / 16 * 10);
  }

  .jquery-modal .modal {
    width: 100vw;
    max-width: 100vw;
    left: 0px;
  }

  .modal .modal-prev {
    left: 0px;
    top: calc(100vw / 16 * 10 + 20px);
  }

  .modal .modal-next {
    right: 0px;
    top: calc(100vw / 16 * 10 + 20px);
  }

  .play-contents {
    padding: 36px;
  }

  li.play-item picture.o.picture > img {
    height: calc((100vw - 48px) / 16 * 9);
  }
}