#body>#opanime { opacity:1;}
#opanime { position:fixed; z-index:900; top:0; left:0; width:100%; height:100%; background:#fff; }
#opanime #opbox { position:absolute; top:50%; left:0; width:0; height:1px; background:#ffd401; 
                    transform:translate(0,-50%); }
#opanime #opbox.anime { animation: aniopbox 1.5s ease-in; animation-fill-mode:forwards; }                  
@keyframes aniopbox { 
    0% { width:0; height:1px; }
    70% { width:100%; height:1px; }
    100% { width:100%; height:100%; }
}                    

#body header { transform:translate(0,-100%); transition:height 400ms ease-out,transform 1s ease-out; }
#body>header.ready { opacity:1; transform:translate(0,0); }         
#body footer { transform:translate(0,100%); transition:transform 1s ease-out; }
#body>footer.ready { opacity:1; transform:translate(0,0); }         

/* ===================== SECTION-1 ===================== */
#hpmask { }
#section1 { transition:background 0.5s ease-out,margin 1s ease-out; }
#s1sliderwrap { position:absolute; top:3%; left:50%; height:90%; transform:translate(-120%,0); padding:0 2px; }
#s1slider { height:100%;}
#msloadln { position:absolute; bottom:0; left:0; width:0; height:5px; background:#030;
             display:none;}
#section1>.message-blk { transform:translate(0,20%); opacity:0.2; }
#section1>.message-blk.ready { transform:translate(0,0); opacity:1; transition:all 600ms linear; }
.maskslider svg.mask g>* { transition:fill 0.5s ease-out; }
.maskslider svg.mask { transition:outline 0.5s ease-out;}
#section1 .mkline { width:4px; height:100%; position:absolute; top:0; z-index:3000; background:rgb(255, 212, 1);
                    transition:background 0.5s ease-out; }
#section1 .mkline.left { left:-2px; }
#section1 .mkline.right { right:-2px; }
#section1 { /*transition:border 0.5s ease-out; border-right:solid 3px red; border-right-color:yellow;*/ }
#section1 #s1wpliner.mkline { right:0px; width:3px;}
#section1 #s1wplinel.mkline { left:0px; width:3px;}

/* iefix */
#s1slider { width:auto; }

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { 
	#s1sliderwrap {  height:100%; top:5%;}
}

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { 
	#s1sliderwrap {  height:100%; top:5%;}
}
    
/* ===================== SECTION-1 Banner ===================== */    
#s1hbanner { position:absolute; top:0; left:0; 
                width:100%; height:100%; /*background:#d00;*/) }
#s1hbanner>img {    position:absolute; bottom:0; z-index:5; 
                    display:block; }                
#s1hbgl { left:0; }
#s1hbgc { }
#s1hbgr { left:0; }
#s1hframe { position:absolute; top:0; z-index:3; background:#000; 
            overflow:hidden; }
#s1hframe>div { position:absolute; top:0; left:0; width:100%;
                height:100%; background-repeat:no-repeat; 
                background-position:center center; 
                background-size:100%; background-color: #ffd400; }
#s1hframe>div.ft { z-index:30; }                
#s1hframe>div.bk { z-index:1; }                
#s1hframe>div>video { width:100%; height:100%; }
#s1hframe>img { display:none; }                
#s1hbnv { position:absolute; bottom:10px; z-index:8; 
            transform:translateX(-10px); }                
#s1hbnv>a { display:inline-block; width:20px; height:20px; cursor:pointer; border-radius:10px; background:#fff; margin-left:2px; }   
#s1hbnv>a.sel { background:#17295f; }
#s1hbcap { position:absolute; z-index:8; /*font-size:80%;*/
            transform:translate(-8px,20px); }
#s1hbanner+#s1bhmsg+#stdmsg { display:none; }          
@media only screen and (min-aspect-ratio:1366/650) {
    #s1hbanner #s1hbgr { display:none; }
}

@media only screen and (orientation : portrait),
 screen and (max-width: 767px), print  {
    #s1bhmsg { display:none; }
    #s1hbanner #s1hbgr { display:none; }
    #s1hbanner+#s1bhmsg+#stdmsg { display:block; } 
    #s1hbanner #s1hbgl { display:none; }
    #s1hbanner,#s1hframe { position:relative; }
    #s1hbanner #s1hbgc,#s1hbnv { bottom:-17.818vw; }
    #s1hbanner { margin-bottom:19vw; }
    #s1hbcap { bottom:-40px; right:0; left:auto; width:38%; line-height: 1.5; font-size: 80%;}
}

@media only screen and (max-width: 767px)  {
    #s1hbnv>a { width:10px; height:10px; }
 }