/* ==========================================================
  media.css
  display: media
========================================================== */
#media-video {
  padding: 0 0 20px; }

.main-head {
  background-image: url("../images/media/img_main_head.jpg"); }

.video-list {
  margin-top: -30px;
  position: relative; }
  .video-list li {
    margin: 0 0 25px; }
    .video-list li a {
      display: block;
      color: #d7d7d7; }
    .video-list li dt {
      -webkit-box-shadow: 0px 0px 40px 0px rgba(7, 0, 2, 0.55);
      box-shadow: 0px 0px 40px 0px rgba(7, 0, 2, 0.55); }
    .video-list li dd {
      padding: 15px 0 0;
      position: relative; }
      .video-list li dd.new {
        padding: 30px 0 0; }
        .video-list li dd.new.first {
          padding: 28px 0 0; }
        .video-list li dd.new::before {
          content: "NEW";
          background: #604133;
          font-family: 'ArtegraSansSCBold';
          font-size: 1.4rem;
          line-height: 1.2;
          padding: 0 8px;
          display: block;
          position: absolute;
          top: 8px;
          left: 0; }
      .video-list li dd .title {
        font-family: 'ArtegraSansAltBold';
        font-size: 1.5rem;
        line-height: 1.2; }
        .video-list li dd .title.small {
          font-size: 19px; }
        .video-list li dd .title small {
          font-size: 1.2rem;
          display: block; }
      .video-list li dd .date {
        text-align: right; }
        .video-list li dd .date span {
          background: #3e414c;
          font-family: 'ArtegraSansSC';
          color: #171717;
          line-height: 1.4;
          font-size: 1.3rem;
          padding: 0 10px; }

@media screen and (min-width: 768px) {
  #media-video {
    padding: 0 0 35px; }
  .video-list {
    margin-top: -60px; }
    .video-list li {
      width: 316px;
      height: auto;
      margin: 0 0 45px;
      float: left; }
      .video-list li a:hover {
        opacity: 0.85; }
      .video-list li:not(:nth-child(3n)) {
        margin: 0 20px 44px 0; }
      .video-list li dd {
        padding: 30px 0 0; }
        .video-list li dd.new::before {
          font-size: 15px;
          padding: 0 5px; }
        .video-list li dd .title {
          font-size: 20px;
          min-height: 2em; }
          .video-list li dd .title small {
            font-size: 14px; }
        .video-list li dd .date span {
          line-height: 1.4;
          font-size: 15px;
          padding: 0 15px; } }