*{box-sizing: border-box}
body{font-family: 'Roboto', sans-serif;background:  url(../12_12/img_mu/section02_bg.jpg)no-repeat;
    background-size: cover;}
body::before{content: '';position: absolute;left: 0;top: 0;background: rgba(255,255,255,0.2);width: 100%;height: 100%}

.warp{overflow: hidden;margin:auto;}
span{color: red}
.w200{max-width: 200px;margin: auto}
hr{width: 100px;animation: hrani 1s }



.contents{float: left;width: 70%}
.contents h1{background: url(../12_12/img_mu/logo.png)no-repeat left top;
width: 80px;height: 36px;margin: 10px;}

.nav{background: #000;color: #fff}
a.bar{display: none}
#btn >li{float: left;}

.btn_main{position: relative;background: #000}
.btn_main a{display: block;padding: 3% 0;z-index: 200;}
.btn_suv{position: absolute;left: 0;top: 0;background: #000;z-index: 100;width: 100%;
display: none;}
.btn_s_list{text-align: center;width: 100%;height: 100%;line-height: 1.5;font-size: 0.8em;
animation: btnlist 1s;}
.btn_s_list p{padding: 30px 0}
.btn_main:hover .btn_suv{display: block;}
.btnbox{position: relative;background: url(../12_12/img_mu/link_icons_w.png) no-repeat right 10px top 50%;
margin: auto;overflow: hidden;border: 1px solid #fff;padding: 10px;text-align: left;white-space: nowrap;
animation: btnboxani 1s ease-in-out}
.btnbox::before{content: '';position: absolute;left: 0;top: 0;width: 100%;height:100%;
background: rgba(255,255,255,0);transition: all .3s linear}
.btnbox:hover:before{content: '';background: rgba(255,255,255,0.4)}

.bgone{background: url(../12_12/img_mu/bgsample01.png)no-repeat left top;}
.bgtwo{background: url(../12_12/img_mu/bgsample02.png)no-repeat left top;}
.bgthree{background: url(../12_12/img_mu/bgsample03.png)no-repeat left top;}
.bgfour{background: url(../12_12/img_mu/bgsample04.png)no-repeat left top;}

@keyframes btnboxani{
    0%{width: 0%;}
    100%{width: 50%;}
}

@keyframes btnlist{
    0%{transform: translateY(-250px)}
    100%{transform: translateY(0)}
}


.sect1{position: relative;overflow: hidden;background: #ccc;height: 600px}
.sect1 h2{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 5;
text-align: center;font-size: 3em;font-weight: 100}
.sect1::after{content: '';position: absolute;width: 50%;height: 27%;right: 0;bottom: 0;z-index: 10;
background: url(../12_12/img_mu/section01_bg.png)no-repeat;background-size: cover}
.main_video{position: absolute;left: -180px;top: 0;height: 100%;z-index: 3;}

.sect2{position: relative;background: #000 url(../12_12/img_mu/moon_and_clouds.jpg) no-repeat left bottom;
    background-size: cover;height: 600px}
.sect2 img{position: absolute;width: 100%;top: 50%;left: 50%;transform: translate(-50%,-50%);
padding: 10px;}
.sect2 p{color: #fff;}
.sect2 p.line{border-bottom: 1px solid #fff;width:104px;margin: 10px;font-size: 12px}
.sect2 p.big{position: absolute;font-size: 1.3em;right: 0;bottom: 0;padding: 10px;}

.side{float: right;position: relative;overflow: hidden;background: #666;width: 24%;}
.side{padding: 1%}
.side .logoani{position: relative}
.side .logoani img{width: 100%;padding: 10px;}

.side  a{display: block;position: absolute; border: 1px solid #fff; border-radius: 50%}
.side  a::before{content: "";width: 10px;height: 10px;
background: #fff;border-radius: 50%;
position: absolute;top: 50%;left: 50%;margin: -5px 0 0 -5px;}
.side  a:hover::before{background: red;}

.side a.on{background: #fff;}
.side a.on::before{background: red;}

.side_video{position: absolute;left: 0;top: 0;height: 100%;}

#hiddenlist{position: relative;overflow: hidden;height: 300px;z-index: 1}

.hidden p.head{color: #fff;}
.hidden p.big{color: #fff;}
.hidden .text{color: rgba(255,255,255,0.5)}

.hidden{position: absolute;height: 300px;padding: 30px 10px;background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)) ;top: -1200px;left: 0;z-index: 2;}
#hiddenlist section.on{animation: none}

#hiddentop{animation: hiddentopend 1s forwards;}
#hiddenmiddle{animation: hiddenmiddleend 1s forwards;z-index: 2;}
#hiddenbottom{animation: hiddenbottomend 1s forwards;z-index: 2;}

#hiddentop:target{animation: hiddentop 1s forwards;z-index: 2;animation-delay: 0.5s}
#hiddenmiddle:target{animation: hiddenmiddle 1s forwards;z-index: 2;animation-delay: 0.5s}
#hiddenbottom:target{animation: hiddenbottom 1s forwards;z-index: 2;animation-delay: 0.5s}

#hiddentop:target #hiddenlist{animation: hiddenlist 2s forwards}
#hiddenmiddle:target #hiddenlist{animation: hiddenlist 2s forwards}
#hiddenbottom:target #hiddenlist{animation: hiddenlist 2s forwards}

@keyframes iani1{
    0%{transform: scale(1)}
    100%{transform: scale(1.3)}
}
@keyframes hiddenlist{
    0%{height: 0px;z-index: 1;}
    50%{height: 300px;z-index: 1;}
    100%{height: 0px;z-index: 1;}
}

@keyframes hiddentop{
    0%{transform: translateY(-100%);top: 0;}
    100%{transform: translateY(0);top: 0;}
}
@keyframes hiddenmiddle{
    0%{transform: translateY(-100%);top: 0;}
    100%{transform: translateY(0);top: 0;}
}
@keyframes hiddenbottom{
    0%{transform: translateY(-100%);top: 0;}
    100%{transform: translateY(0);top: 0;}
}

@keyframes hiddentopend{
    0%{transform: translateY(0);top: 0;z-index: 2;}
    100%{transform: translateY(-400px);top: 0;z-index: 2;}
}
@keyframes hiddenmiddleend{
    0%{transform: translateY(0);top: 0;z-index: 2;}
    100%{transform: translateY(-400px);top: 0;z-index: 2;}
}
@keyframes hiddenbottomend{
    0%{transform: translateY(0);top: 0;z-index: 2;}
    100%{transform: translateY(-400px);top: 0;z-index: 2;}
}



@media only screen and (max-width:340px){
.warp{width: 100%;}
.main_video{display: none;}
.sect1{background: url(../12_12/img_mu/section01_mobile_bg.jpg)no-repeat left top;
background-size: cover}
.sect1::after{display: none;}
.sect1 h2{top: 35%;}
.contents{width: 100%;float: none;}
.side{width: 100%;float: none;}
a.bar{display: block;text-align: center}
.nav ul{display: none}
ul#btn li{float: none;text-align: center}
#btn:target{display: block;}
.side  a{width: 34px;height: 34px;}
a.iani1{top: 50%;left: -2%;animation: iani1 0.5s ease-in alternate infinite}
a.iani2{top: 8%;left: 49%;animation: iani1 0.5s ease-in alternate infinite}
a.iani3{bottom: 10%;right: 2%;animation: iani1 0.5s ease-in alternate infinite}


}

@media only screen and (min-width:341px) and (max-width:899px){
body::before{height: 100%;}
.sect1{width: 100%;}
.sect2{float: left;width: 100%;}
.sect2 p.line{font-size: 1.2em;width: 167px;}
.sect2 p.big{font-size: 1.7em}
.sect2{height: 800px;z-index: 200;}
.side i{display: none;}
#hiddenlist{height: 200px;}
#hidden1{font-size: 0.5em;padding: 0;}
ul#btn >li{width: 25%;text-align: center}
.btn_suv{padding: 100% 0 200% 0;font-size: 0.8em}
.btnbox{width: 80%;text-indent: 5px;vertical-align: top}
.w200{width: auto;}

#hiddenlist{font-size: 0.8em;height: 200px}
#hiddentop{padding: 20px 5px;height: 200px}
#hiddenmiddle{padding: 20px 5px;height: 200px}
#hiddenbottom{padding: 20px 5px;height: 200px}

.hidden p.head{padding: 6px 0}
.hidden p.big{padding: 6px 0}
.hidden .text{font-size: 6px}

.side  a{width: 24px;height: 24px;}
a.iani1{top: 44%;left: -2%;animation: iani1 0.5s ease-in alternate infinite}
a.iani2{top: 10%;left: 47%;animation: iani1 0.5s ease-in alternate infinite}
a.iani3{bottom: 10%;right: 4%;animation: iani1 0.5s ease-in alternate infinite}


@keyframes btnboxani{
    0%{width: 0%;}
    100%{width: 80%;}
}
}

@media only screen and (min-width:900px){
body{width: 100%;height: 100vh}
.warp{padding: 0 30px;height: 80vh;max-width: 94%;}
.sect1{float: left;width: 64%}
.sect2{float: left;width: 36%}
ul#btn >li{width: 25%;text-align: center}
.btn_suv{height: 637px;padding: 149px 0 173px 0;}
.btnbox{width: 50%;text-indent: 10px}

#hiddentop{padding: 30px 10px;}
#hiddenmiddle{padding: 30px 10px;}
#hiddenbottom{padding: 30px 10px;}

.hidden p.head{padding: 16px 0}
.hidden p.big{padding: 16px 0;font-size: 1.6em}
.hidden .text{font-size: 0.8em}

.side  a{display: block;width: 34px;height: 34px;position: absolute; border: 1px solid #fff; border-radius: 50%}
a.iani1{top: 50%;left: -2%;animation: iani1 0.5s ease-in alternate infinite}
a.iani2{top: 10%;left: 50%;animation: iani1 0.5s ease-in alternate infinite}
a.iani3{bottom: 10%;right: 2%;animation: iani1 0.5s ease-in alternate infinite}

@keyframes hrani{
    0%{width: 300px;}
    100%{width: 100px;}
}
}