img{width:100%;}
html,body{padding:0;margin:0;width:100%;height:100%;}
.back .line{width:400px;height:35px;background-image:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));position:absolute;top:60px;right:0;opacity:0;animation:line 1.5s 1.5s linear forwards;}
.clear{clear:both;}
.back  .close{width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0%;}
.back .temp{width:1100px;height:auto;display:block;position:absolute;top:50%;left:50%;margin-left:-550px;margin-top:-300px;}
.back{width:100%;height:100%;background:rgba(0,0,0,0.5);position:fixed;top:0;z-index:100;display:none;}
.back .box{width:1100px;position:relative;}
.back .box .bg img{margin:0 auto;display:block;}
.back .yh_l{width:15%;position:absolute;top:0;left:3%;z-index:1;transform:rotate(30deg);}
.back .yh_l img{animation:yh 2s linear infinite;}
.back .yh_r{width:20%;position:absolute;bottom:10%;right:0;z-index:1;}
.back .yh_r img{animation:yh 2s linear 1s infinite;}
.back .dl_l{width:20%;position:absolute;left:0;top:15%;z-index:3;}
.back .dl_l,.dl_r{animation:dl 4s linear infinite;}
.back .dl_r{width:20%;position:absolute;right:0;top:15%;z-index:3;}
.back .dl_r img{transform:scaleX(-1);}
.back .bg{width:100%;}
.back .bg img{width:100%;}
.back .center{width:70%;position:relative;margin:0 auto;z-index:2;}
.back .wghs{position:absolute;top:14%;width:70%;left:15%;animation:opa 1.5s linear;    overflow: hidden;}
.back .wghs img{width:100%;}
.back .holiday_title{width:30%;position:absolute;top:1%;left:10%;}
.back .holiday_time{width:50%;position:absolute;top:39%;left:25%;animation:opa 1.5s 0.3s linear both;}
.back .honorific{width:60%;position:absolute;top:50%;left:20%;}
.back .honorific p{animation:opa 1.5s 0.5s linear both;}
.back .bod{background:#de3e53;text-align:center;padding:5px 0;margin:8px 0;animation:opa 1.5s 0.7s linear both;}
.back .bod img{width:25%;display: block;margin-left: 38.5%;}
.back .honorific p{margin:0;line-height:1.8em;font-size:16px;text-align:left;}
.back .bod_list ul{margin:0;padding:0;}
.back .bod_list li{width:50%;float:left;list-style:none;margin:5px 0;animation:opa 1.5s 0.9s linear both;}
.back .bod_list p{font-size:14px;animation:opa 1.5s 1.1s linear both;}
.back .sunvote{position:absolute;bottom:2%;text-align:center;width:100%;}
.back .sunvote img{width:35%;}
.back .redfont{color:#de3e53;font-weight:bold;}
.btn{width:150px;position:fixed;right:0;bottom:15%;display:none;z-index:9999;}
@media (max-width:1380px){
	.back .box{width:1050px;}
	.back .temp{width:830px;margin-left:-415px;margin-top:-226px;}
	.back .wghs{width:60%;left:20%;}
	.back .holiday_time{top:35%;}
	.back .honorific{top:45%;}
	.back .honorific p{font-size:12px;}
	.back .bod_list li{font-size:12px;}
}
@media (max-width:800px){
	.btn{width:100px;position:fixed;right:0;bottom:15%;display:none;z-index:9999;}
}
@-webkit-keyframes yh{
	0%{opacity:0.5;}
	50%{opacity:1;}
	100%{opacity:0.5;}
}
@keyframes yh{
	0%{opacity:0.5;}
	50%{opacity:1;}
	100%{opacity:0.5;}
}
@-webkit-keyframes line{
	0%{left:-50%;transform: rotate(-45deg);opacity:1;}
	100%{left:100%;transform: rotate(-45deg);opacity:0;}
}
@keyframes line{
	0%{left:-50%;transform: rotate(-45deg);opacity:1;}
	100%{left:100%;transform: rotate(-45deg);opacity:0;}
}
@-webkit-keyframes opa{
	0%{opacity:0;}
/* 	50%{opacity:0.7;}*/
	75%{opacity:0.7;} 
	100%{opacity:1;}
}
@keyframes opa{
	0%{opacity:0;}
/* 	50%{opacity:0.7;}*/
	75%{opacity:0.7;} 
	100%{opacity:1;}
}

@-webkit-keyframes dl{
  0% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
}
@keyframes dl{
  0% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
}


.mobile_back{width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:200;position:fixed;top:0;display:none;}
.mobile_back img{width:80%;}
.mobile_back .close{width:30px;height:30px;position:absolute;top:0%;right:10%;}
.mobile_back .close img{width:100%;position:relative;}