@charset "utf-8";
/* CSS Document */

.fvMovieModal{ position:fixed; inset:0; z-index:99999; display:none; }
.fvMovieModal.is-open{ display:block; }
.fvMovieOverlay{ position:absolute; inset:0; background:rgba(0,0,0,.75); }
.fvMovieDialog{ position:absolute; inset:0; display:grid; place-items:center; padding:24px; pointer-events:none; }
.fvMovieStage{
  width:min(1100px, 100%);
  aspect-ratio:16/9;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  pointer-events:auto;
}
.fvMovieVideo{ width:100%; height:100%; display:block; background:#000; }
.fvMovieClose{
  position:absolute; top:16px; right:16px;
  width:44px; height:44px;
  border:0; border-radius:999px;
  background:rgba(255,255,255,.9);
  color:#111; font-size:28px; line-height:44px;
  cursor:pointer; pointer-events:auto;
}
.fvMovieClose:hover{ background:#fff; }
body.fv-movie-locked{ position:fixed; left:0; right:0; width:100%; }

/* FV button */
.sec_fv{ position:relative; }
.sec_fv .movieBtn{
  position:absolute; right:24px; bottom:24px;
  width:64px; height:64px; border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  cursor:pointer;
}
.sec_fv .movieBtn::before{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-40%,-50%);
  width:0; height:0;
  border-style:solid;
  border-width:12px 0 12px 18px;
  border-color:transparent transparent transparent #111;
}

/* movieSettingBox thumb */
.movieSettingBox .wp-block-image{ margin:0; }
.movieSettingBox .movieThumbBtn{ position:relative; display:block; cursor:pointer; }
.movieSettingBox .movieThumbBtn::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.25);
  opacity:0; transition:opacity .2s;
  border-radius:6px;
}
.movieSettingBox .movieThumbBtn:hover::before{ opacity:1; }
.movieSettingBox .moviePlayIcn{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:72px; height:72px; border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.movieSettingBox .moviePlayIcn::after{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-40%,-50%);
  width:0; height:0;
  border-style:solid;
  border-width:14px 0 14px 22px;
  border-color:transparent transparent transparent #111;
}
@media screen and (max-width: 767px) {
	.movieSettingBox .moviePlayIcn {
	  width: 12vw;
	  height: 12vw;
	  box-shadow: 0 2vw 2vw rgba(0,0,0,.18);
	}	
	.movieSettingBox .moviePlayIcn::after {
	  border-width: 3vw 0 3vw 5vw;
	  border-color: transparent transparent transparent #111;
	}	
}