@media screen and (min-width:731px) {
  ul.videoList li div.comingSoon{background: #449cfe;width: 100%;height: 100%;border: 20px solid #9adaf5;box-sizing: border-box;position: relative;height: 170px;}
  ul.videoList li div.comingSoon p{color: #fff;font-weight: bold;font-size:3rem;line-height: 1.2;letter-spacing:2px;text-align:center;position:absolute;left:calc(50% + 2px);top:50%;transform:translate(-50%,-50%);}
  .movie-content{display: block;cursor: pointer;margin-bottom: 10px;transition: all 0.2s ease;}
  .movie-content:hover{opacity: 0.8;}
  .modal-outer {position: fixed;top:0;left:0;width: 100vw;height:100vh;background: rgba(0,0,0,0.7);}
  .modal-inner {position: relative;width:640px;height: 360px;}
  #movie-area {max-width: 100%;max-height: 100%;}
  .movie-close {position: absolute;top:-45px;right:-45px;width: 45px;height:45px;transition: all 0.2s ease;border-radius: 50%;}
  .movie-close:hover {background-color: rgba(150,150,150,0.7);}
  .movie-close::before{display: block;content:'';width: 3px;height:35px;background-color: #fff;transform:translate(21px, 5px) rotate(45deg);-webkit-transform:translate(21px, 5px) rotate(45deg);}
  .movie-close::after{display: block;content:'';width: 3px;height:35px;background-color: #fff;transform:translate(21px, -30px) rotate(-45deg);-webkit-transform:translate(21px, -30px) rotate(-45deg);}
  .movie-close:hover {cursor: pointer;}
}

@media screen and (max-width:730px) and (min-width:641px) { 
  ul.videoList li div.comingSoon{background: #449cfe;width: 100%;height: 100%;border: 17px solid #9adaf5;box-sizing: border-box;position: relative;height: 140px;}
  ul.videoList li div.comingSoon p{color: #fff;font-weight: bold;font-size:2.5rem;line-height: 1.2;letter-spacing:1px;text-align:center;position:absolute;left:calc(50% + 1px);top:50%;transform:translate(-50%,-50%);}
  .movie-content{display: block;cursor: pointer;margin-bottom: 10px;transition: all 0.2s ease;}
  .movie-content:hover{opacity: 0.8;}
  .modal-outer {position: fixed;top:0;left:0;width: 100vw;height:100vh;background: rgba(0,0,0,0.7);}
  .modal-inner {position: relative;width:640px;height: 360px;}
  #movie-area {max-width: 100%;max-height: 100%;}
  .movie-close {position: absolute;top:-45px;right:-5px;width: 45px;height:45px;transition: all 0.2s ease;border-radius: 50%;}
  .movie-close::before{display: block;content:'';width: 3px;height:35px;background-color: #fff;transform:translate(21px, 5px) rotate(45deg);-webkit-transform:translate(21px, 5px) rotate(45deg);}
  .movie-close::after{display: block;content:'';width: 3px;height:35px;background-color: #fff;transform:translate(21px, -30px) rotate(-45deg);-webkit-transform:translate(21px, -30px) rotate(-45deg);}
  .movie-close:hover {cursor: pointer;}
}

@media screen and (max-width:640px) { 
  ul.videoList li div.comingSoon{background: #449cfe;width: 100%;height: auto;padding-top:56.25%;border: 25px solid #9adaf5;box-sizing: border-box;position: relative;}
  ul.videoList li div.comingSoon p{color: #fff;font-weight: bold;font-size:3.3rem;line-height: 1.2;letter-spacing:1px;text-align:center;position:absolute;left:calc(50% + 1px);top:50%;transform:translate(-50%,-50%);}
  .movie-content{display: block;margin-bottom: 10px;}
  .modal-outer {position: fixed;top:0;left:0;width: 100vw;height:100vh;background: rgba(0,0,0,0.7);}
  .modal-inner {position: relative;width: 320px;height: 180px;}
  #movie-area {max-width: 100%;max-height: 100%;}
  .movie-close {position: absolute;top:-45px;right:-5px;width: 45px;height:45px;}
  .movie-close::before{display: block;content:'';width: 3px;height:35px;background-color: #fff;transform:translate(21px, 5px) rotate(45deg);-webkit-transform:translate(21px, 5px) rotate(45deg);}
  .movie-close::after{display: block;content:'';width: 3px;height:35px;background-color: #fff;transform:translate(21px, -30px) rotate(-45deg);-webkit-transform:translate(21px, -30px) rotate(-45deg);}
}
/* 200325 */
.movie-close::after{visibility:visible;}

.pdf-link{
  color: #0000ee;
}

.pdf-link:visited{
  color: #0000ee;
}
.pdf-link:hover{
  color: #f00;
}


  @media screen and (min-width:731px){
    ul.videoList li div.comingSoon.energy-list-img{
      height: 100%;
    }
  }

  @media screen and (max-width:730px) and (min-width:641px){
    ul.videoList li div.comingSoon.energy-list-img{
      height: 100%;
    }
  }

  @media screen and (min-width: 731px){
  .dummy-video-contents{margin-bottom: 10px;}
  }
  @media screen and (max-width: 640px){
    .dummy-video-contents{margin-bottom: 10px;}
  }