/*------------------ Youtube-Video (WebP-Lazy Loading) >> Rich Content on Product Page -------------------------------*/


div.yt div::before{
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    content: "\00a0";
    background: rgba(0%,0%,0%,.2) url(https://www.aten.com/file/template/1/images/icons/Play_Icon_Mline.png) no-repeat center center;
    filter: drop-shadow(1px 1px 3px rgb(0, 0, 0)) !important;
    transition: background-color 1s ease-out;
  }

  div.yt:hover div::before {
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0,1.0)) !important;
    background-color: rgba(0%,0%,0%,0);
    transition: background-color 1s ease-out;
  }

  .yt {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }

  .yt iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }










/******************************** Play Icon 變大 (一般圖文上架 + Lazy Load Video for YT) *************************************************/


/* Play Icon 變大 (無對比) */ 
.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section div.yt div::before,
.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section a.play_btn {
  filter: brightness(100%) contrast(100%) !important;
  transition: all 0.3s ease-in-out 0s;
}


/* Play Icon:hover 變大 (對比強) */ 
.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section div.yt:hover div::before,
.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section a.play_btn:hover {
  filter: brightness(110%) contrast(110%) !important;
  transition: all 0.3s ease-in-out 0s;
}


/* Play Icon::before 變大 */ 
.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section div.yt div::before,
.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section a.play_btn::before {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  content: "\00a0";
  
  background: rgba(0%, 0%, 0%,.15) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Small.png) no-repeat center center;
  filter: drop-shadow(1px 1px 3px rgb(0, 0, 0)) !important;

  background: rgba(0%, 0%, 0%,.05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Xlarge.png) no-repeat center center/ 9%;
  filter: drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.5)) !important;
  filter: brightness(100%) contrast(100%) drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.4)) !important;

  opacity: 0.9;
  transition: all 0.3s ease-in-out 0s;
}

/* Play Icon 變大::before (Hover) */ 
.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section div.yt:hover div::before,
.single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section a:hover.play_btn::before {
  background: rgba(0%, 0%, 0%, .05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Small.png) no-repeat center center;
  filter: brightness(130%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.1)) !important;

  background: rgba(0%, 0%, 0%, .1) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Xlarge.png) no-repeat center center/ 10%;
  filter: brightness(130%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.2)) !important;
  filter: brightness(110%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.5)) !important;

  opacity: 1.0;
  transition: all 0.3s ease-in-out 0s;
}






/* 820 以下 */
@media (max-width: 820px) {

    /* Play Icon::before 變大 */ 
    .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section div.yt div::before,
    .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section a.play_btn::before {
    background: rgba(0%, 0%, 0%,.05) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Xlarge.png) no-repeat center center/ 13%;
    }

    /* Play Icon 變大::before (Hover) */ 
    .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section div.yt:hover div::before,
    .single-product #overview-tab.tab-content.Full-Width-Rich-Content .Rich-Content-Section a:hover.play_btn::before {
    background: rgba(0%, 0%, 0%, .1) url(//assets.aten.com/webpage/shared/CMS_Libraries/Images/Play-Icon_w1_Xlarge.png) no-repeat center center/ 14%;
    }


}