html,body {
	height: 100%;
}


* html .layer_board_bg,
* html .layer_board {
	position: absolute;
}

.layer_board_bg {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000;	
	top: 0;
	left: 0;
  text-align: center;
	
	display: none;
	cursor: pointer;
	background: #000;
}

.layer_board {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
  transform: translateY(-50%) translateX(-50%);
  text-align: center;
  width: 100%;
  max-width: 960px;
  margin:0px auto;

	z-index: 2000;
}

.modal_movie{
  width: 960px;
  height: 540px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin:auto;
  overflow: hidden; 
}

.modal_movie video{
  width: 960px;
  height: 540px;
  border-radius: 6px;
}

#layer_board_area .layer_board .btn_green01 a{
   margin: 350px auto 0px;
   padding: 18px 20px 18px 15px;
   width: 300px;
   letter-spacing: 2px;
   font-size: 1.6rem;
   font-weight: bold;
}

#layer_board_area .layer_board .btn_green01 a:after{
  top:18px;
}

.btn_close a{
	display: inline-block;
  text-decoration: none;
  background: #1eb42d;
  width: 60px;
  height: 60px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  transition: .4s;
}

.btn_close a span{
  display: inline-block;
  position: relative;
  padding: 0;
  width: 6px;
  height: 30px;
  background: #fff;
  transform: rotate(45deg);
  top:1px;
  border-radius:5px;
}

.btn_close a span:before{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  width: 30px;
  height: 6px;
  margin-top: -2px;
  background: #fff;
  border-radius:5px;
}

  .btn_close{
  text-align: right;
  margin-top: -90px;
  right: -30px;
  position: absolute;
  z-index: 1000;
}

.youtube {
  width: 960px;
  height: 540px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin:auto; 
}

.youtube .movie_pc img{
  max-width:960px;
  height: 540px; 
  width: 100%;
  border:4px solid #1eb42d;
  border-radius: 6px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}

@media screen  and (min-width: 681px){
 .movie_sp{ display: none; }
}


@media screen and (max-width:980px) {

  .layer_board{
    margin-top:20px;
  }

.youtube {
  width: 640px;
  height:360px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin:auto; 
}

 .youtube .movie_pc img{
  width: 640px;
  height:360px;
  margin-bottom: 30px;
  border:2px solid #1eb42d;
  border-radius: 6px;
}

.modal_movie{
  width: 640px;
  height:360px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin:auto;
  overflow: hidden; 
}

.modal_movie video{
  width: 640px;
  height:360px;
  border-radius: 6px;
}


 .btn_close{
  text-align: center;
  margin: -60px -350px 0px 0px;
  right: 50%;
  position: absolute;
}

#layer_board_area .layer_board .btn_green01 a{
   margin: 250px auto 0px;
   padding: 14px 20px 12px 15px;
   width: 300px;
      letter-spacing: 2px;
   font-size: 1.6rem;
   font-weight: bold;
}

#layer_board_area .layer_board .btn_green01 a:after{
  top:15px;
}


}

@media screen and (max-width:680px) {
 .movie_pc{
  display: none;
 }

 .layer_board{
    margin-top:0px;
  }

 .youtube {
  width:480px;
  height:270px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin:auto; 
}

 .youtube .movie_sp img{
  width:480px;
  height:270px;
  margin-bottom: 30px;
  border:2px solid #1eb42d;
  border-radius: 6px;
}

.modal_movie{
  width:480px;
  height:270px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin:auto;
  overflow: hidden; 
}

.modal_movie video{
  width:480px;
  height:270px;
  border-radius: 6px;
}


 .btn_close{
  text-align: center;
  margin: 50px -270px 0px 0px;
  right: 50%;
  position: absolute;
}

#layer_board_area .layer_board .btn_green01 a{
   margin: 380px auto 0px;
   padding: 14px 20px 12px 15px;
   width: 300px;
}

.btn_close a span{
  display: inline-block;
  position: relative;
  padding: 0;
  width: 4px;
  height: 26px;
  background: #fff;
  transform: rotate(45deg);
  top:-1px;
  border-radius:5px;
}

.btn_close a span:before{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -11px;
  width: 26px;
  height: 4px;
  margin-top: -2px;
  background: #fff;
  border-radius:5px;
}

}

@media screen and (max-width:480px) {

  .layer_board{
    margin-top:0px;
  }
  .movie_pc{
    display: none;
  }

 .youtube {
  width:300px;
  height:169px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin:auto; 
}

 .youtube .movie_sp img{
  width:300px;
  height:169px;
  margin-bottom: 30px;
  border:2px solid #1eb42d;
  border-radius: 6px;
}

.modal_movie{
  width:300px;
  height:169px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin:auto;
  overflow: hidden; 
}

.modal_movie video{
  width:300px;
  height:169px;
  border-radius: 6px;
}


 .btn_close{
  text-align: center;
  margin: 50px -160px 0px 0px;
  right: 50%;
  position: absolute;
}

#layer_board_area .layer_board .btn_green01 a{
   margin: 260px auto 0px;
   padding: 14px 20px 12px 15px;
   width: 300px;
}

.btn_close a{
  display: inline-block;
  text-decoration: none;
  background: #1eb42d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  transition: .4s;
}

.btn_close a span{
  display: inline-block;
  position: relative;
  padding: 0;
  width: 4px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
  top:6px;
  border-radius:5px;
}

.btn_close a span:before{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 20px;
  height: 4px;
  margin-top: -2px;
  background: #fff;
  border-radius:5px;
}

}


* html .layer_board_bg2,
* html .layer_board2 {
	position: absolute;
}

.layer_board_bg2 {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000;	
	top: 0;
	left: 0;
  text-align: center;
	
	display: none;
	cursor: pointer;
	background: #000;
}

.layer_board2 {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
  transform: translateY(-50%) translateX(-50%);
  text-align: center;
  width: 100%;
  max-width: 960px;
  margin:0px auto;

	z-index: 2000;
}

#layer_board_area2 .layer_board2 .btn_green01 a{
   margin: 350px auto 0px;
   padding: 18px 20px 18px 15px;
   width: 300px;
   letter-spacing: 2px;
   font-size: 1.6rem;
   font-weight: bold;
}

#layer_board_area2 .layer_board2 .btn_green01 a:after{
  top:18px;
}

.btn_close2 a{
	display: inline-block;
  text-decoration: none;
  background: #1eb42d;
  width: 60px;
  height: 60px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  transition: .4s;
}

.btn_close2 a span{
  display: inline-block;
  position: relative;
  padding: 0;
  width: 6px;
  height: 30px;
  background: #fff;
  transform: rotate(45deg);
  top:1px;
  border-radius:5px;
}

.btn_close2 a span:before{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  width: 30px;
  height: 6px;
  margin-top: -2px;
  background: #fff;
  border-radius:5px;
}

  .btn_close2{
  text-align: right;
  margin-top: -90px;
  right: -30px;
  position: absolute;
  z-index: 1000;
}

@media screen and (max-width:980px) {

  .layer_board2{
    margin-top:20px;
  }

 .btn_close2{
  text-align: center;
  margin: -60px -350px 0px 0px;
  right: 50%;
  position: absolute;
}

#layer_board_area2 .layer_board2 .btn_green01 a{
   margin: 250px auto 0px;
   padding: 14px 20px 12px 15px;
   width: 300px;
      letter-spacing: 2px;
   font-size: 1.6rem;
   font-weight: bold;
}

#layer_board_area2 .layer_board2 .btn_green01 a:after{
  top:15px;
}


}

@media screen and (max-width:680px) {
 .layer_board2{
    margin-top:0px;
  }
 .btn_close2{
  text-align: center;
  margin: 50px -270px 0px 0px;
  right: 50%;
  position: absolute;
}

#layer_board_area2 .layer_board2 .btn_green01 a{
   margin: 380px auto 0px;
   padding: 14px 20px 12px 15px;
   width: 300px;
}

.btn_close2 a span{
  display: inline-block;
  position: relative;
  padding: 0;
  width: 4px;
  height: 26px;
  background: #fff;
  transform: rotate(45deg);
  top:-1px;
  border-radius:5px;
}

.btn_close2 a span:before{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -11px;
  width: 26px;
  height: 4px;
  margin-top: -2px;
  background: #fff;
  border-radius:5px;
}

}

@media screen and (max-width:480px) {

  .layer_board2{
    margin-top:0px;
  }

 .btn_close2{
  text-align: center;
  margin: 50px -160px 0px 0px;
  right: 50%;
  position: absolute;
}

#layer_board_area2 .layer_board2 .btn_green01 a{
   margin: 260px auto 0px;
   padding: 14px 20px 12px 15px;
   width: 300px;
}

.btn_close2 a{
  display: inline-block;
  text-decoration: none;
  background: #1eb42d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  transition: .4s;
}

.btn_close2 a span{
  display: inline-block;
  position: relative;
  padding: 0;
  width: 4px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
  top:6px;
  border-radius:5px;
}

.btn_close2 a span:before{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 20px;
  height: 4px;
  margin-top: -2px;
  background: #fff;
  border-radius:5px;
}

}