@charset 'utf-8';
ul, li, ol { list-style: none; margin: 0; padding: 0; } dl, dt, dd { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; } li img, dt img, dd img { vertical-align: top; }
img { border: 0; } form { margin: 0; padding: 0; }
a { cursor:pointer; outline: none; }
* { box-sizing: border-box; text-decoration: none;  }




@media screen and (min-width: 1100px) {
    
html { height: 100vh;}
body { height: 100vh; margin: 0; padding: 0; font-size: 18px; font-family: "Noto Sans SC", Helvetica, arial, sans-serif; background: url("../images/bg.jpg") bottom center/cover no-repeat fixed;  }


.wrapper{ width: 148vh; height:100%; margin: auto; } 

.zone1 { width: 100%; height:100%; display: flex; padding-top: 10.2%; }

.zone1_left { width: 51%; height:100%; background: url(../images/main.png) center 15px no-repeat; background-size: 100% auto; margin-left: 7.5%; }

.zone1_right { width: 25.8%; height:100%; margin-left: 9.5%; }

.logo { width: 86.5%; height: 14%; background: url(../images/logo.png) center top no-repeat; background-size: 100% auto; margin: 2% auto 4% 4%; }

.logo_m { display: none;}

.btn_1 { width: 100%; height:10.1%; background: url(../images/btn1.png) center top no-repeat; background-size: 100% auto; display: block; margin-bottom: 3%; }
.btn_2 { width: 100%; height:10.1%; background: url(../images/btn2.png) center top no-repeat; background-size: 100% auto; display: block; margin-bottom: 3%; }
.btn_3 { width: 100%; height:10.2%; background: url(../images/btn3.png) center top no-repeat; background-size: 100% auto; display: block; margin-bottom: 3%; }
.btn_4 { width: 100%; height:10.2%; background: url(../images/btn4.png) center top no-repeat; background-size: 100% auto; display: block; margin-bottom: 3%; }
.btn_5 { width: 100%; height:10.2%; background: url(../images/btn5.png) center top no-repeat; background-size: 100% auto; display: block; margin-bottom: 3%; }

.btn_1:hover { background: url(../images/btn1_hov.png) center top no-repeat; background-size: 100% auto; }
.btn_2:hover { background: url(../images/btn2_hov.png) center top no-repeat; background-size: 100% auto; }
.btn_3:hover { background: url(../images/btn3_hov.png) center top no-repeat; background-size: 100% auto; }
.btn_4:hover { background: url(../images/btn4_hov.png) center top no-repeat; background-size: 100% auto; }
.btn_5:hover { background: url(../images/btn5_hov.png) center top no-repeat; background-size: 100% auto; }


}






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

/*.zone1,.logo_m,.zone1_left,.zone1_right,.btn_1,.btn_2,.btn_3,.btn_4,.btn_5 { border:#0000FF 1px solid; } */
      
    
html { }
body { margin: 0; padding: 0; font-size: 18px; font-family: "Noto Sans SC", Helvetica, arial, sans-serif; background: url("../images/bg_m.jpg") top center/cover no-repeat fixed;  }

.wrapper{ width: 100%; height:100%; margin: auto;  }    
    
.zone1 { width: 98%; max-width: 1200px;  height: 100%; max-height: 100vh; margin: auto; padding-top: 0vh; overflow: hidden;  }
    
.logo_m { display: flex; justify-content: center; width: 100%; max-width: 60vw;  margin: 2vh auto 1vh auto; height: 10vh;  }
    
.logo_mimg { width: 100%; height: 100%; /*max-width: 311px; max-height: 112px;*/ /*padding: 1vh 1vw;*/ background: url(../images/logo.png) no-repeat center center; background-size: contain; }

.zone1_left { display: flex; justify-content: center; width: 100%; max-width: 80vw;  margin: 1vh auto 2vh auto; height:35vh;  }
    
.zone1_leftimg { width: 100%; height: 100%; /*padding: 1vh 1vw;*/ background: url(../images/main.png) no-repeat center center; background-size: contain; }
  
.logo { display: none;} 
    
.zone1_right { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 50vw; margin: 1vh auto 1vh auto; height: 45vh; }

.btn_1 { background: url(../images/btn1.png) no-repeat center center; background-size: contain;}
.btn_2 { background: url(../images/btn2.png) no-repeat center center; background-size: contain;}   
.btn_3 { background: url(../images/btn3.png) no-repeat center center; background-size: contain;}   
.btn_4 { background: url(../images/btn4.png) no-repeat center center; background-size: contain;}
.btn_5 { background: url(../images/btn5.png) no-repeat center center; background-size: contain;} 
.btn_1,.btn_2,.btn_3,.btn_4,.btn_5 { width: 100%; height: 100%; /*max-width: 354px; max-height: 80px;*/   margin: 3px auto; display: flex;  }
    
}

@media screen and (max-width:700px) {
    
.zone1_right { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 60vw;  margin: 1vh auto 1vh auto; height: 40vh;  }

    
}