@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;  }

input:focus { outline: none; }


    
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;  }

.topbar { display: flex; justify-content: center; align-items: center; width:100%; height: 10%; padding-top: 1%; }    

.barzone { display: flex; width: 100%; max-width: 1200px; height:100%; margin: 0 auto; }

.logo { width: 100%; max-width: 257px; height: 100%; background: url(../images/logo.png) center top no-repeat; background-size: contain;  margin: 0 22%;}   

.icon1 { width: 11%; max-width: 51px; height: 70%; background: url(../images/icon1.png) center top no-repeat; background-size: contain;  margin: auto auto auto auto; }  
    
.icon2 { width: 10%; max-width: 49px; height: 70%; background: url(../images/icon2.png) center top no-repeat; background-size: contain;  margin: auto auto auto auto;}  
    
.nav{ font-size: 30px;  width: 60%; height:30%; max-height: 23px; margin: auto;  display: flex; justify-content:center; color: #fff; line-height: 25px; }
.nav a {  line-height: 25px; color: #fff;  margin: 0 2%; }
.nav a:hover { color: #fdf5a9;}
a.b1{ background: url(../images/nav1.png) left center no-repeat; background-size: contain; padding-left: 35px; margin-right: 2%;}
a.b2{ background: url(../images/nav2.png) left center no-repeat; background-size: contain; padding-left: 38px; margin-right: 1%;}
a.b3{ background: url(../images/nav3.png) left center no-repeat; background-size: contain; padding-left: 34px; margin-right: 1.3%;}
a.b4{ background: url(../images/nav4.png) left center no-repeat; background-size: contain; padding-left: 33px; margin-right: 1.2%;}
a.b5{ background: url(../images/nav5.png) left center no-repeat; background-size: contain; padding-left: 34px; ;}

.rightblock { width: 17%; height:100%; display: flex; justify-content:flex-end;  }
.rightblock a { width: 50%; max-width: 63px; height: 100%; margin: 0 1%; }
a.r1{ background: url(../images/icon_home.png) center center no-repeat; background-size: contain;}
a.r2{ background: url(../images/icon_iphone.png) center center no-repeat; background-size: contain; }
a.r3{ background: url(../images/icon_support.png) center center no-repeat; background-size: contain; }
a.r1:hover{ background: url(../images/icon_home_h.png) center center no-repeat; background-size: contain;}
a.r2:hover{ background: url(../images/icon_iphone_h.png) center center no-repeat; background-size: contain; }
a.r3:hover{ background: url(../images/icon_support_h.png) center center no-repeat; background-size: contain; }

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

.zonect { width: 100%; height:100%; display: flex; flex-direction: column; }


.slogan { width: 100%; max-width: 901px; height:1.1rem; max-height: 284px; background: url(../images/slogan.png) center 0px no-repeat; background-size: contain;  margin: 8% auto 0.05rem auto; }  
    
.slogan_sp { display: none;}   

.boxbg { width: 100%; max-width: 623px; height: 1.5rem; max-height: 355px; background: url(../images/boxbg.png) center 0px no-repeat; background-size: contain; margin: 0 auto; padding: 7% 1% 1% 1%; }
    
 

.inpuzone { width: 100%; margin: 0 auto 0.07rem auto; text-align: center;  }  
    
.inpbox { width: 1.8rem; height: 0.23rem;  border-radius: 0.08rem; border:#4177ff 2px solid;  background: #FFFFFF; text-align: center; padding: 0; font-size: 120%; line-height: 17px;  } 
  
    
    
.btnzone { width: 100%; height: 0.3rem; max-height: 65px; margin: 0 auto 0.04rem auto; display: flex; justify-content: center;  }
.btnzone a { width: 1.1rem; max-width: 220px; height: 100%; margin: 0 0.02rem; }
a.btn1 {
    background: url(../images/btn1.png) center center no-repeat;
    background-size: contain;
}

a.btn1:hover {
    background: url(../images/btn1h.png) center center no-repeat;
    background-size: contain;
}

a.btn2 {
    background: url(../images/btn2.png) center center no-repeat;
    background-size: contain;
}

a.btn2:hover {
    background: url(../images/btn2h.png) center center no-repeat;
    background-size: contain;
}

a.btn3 {
    background: url(../images/btn3.png) center center no-repeat;
    background-size: contain;
}

a.btn3:hover {
    background: url(../images/btn3h.png) center center no-repeat;
    background-size: contain;
}

a.btn4 {
    background: url(../images/btn4.png) center center no-repeat;
    background-size: contain;
}

a.btn4:hover {
    background: url(../images/btn4h.png) center center no-repeat;
    background-size: contain;
}
    
    
.footer{ display: flex; justify-content: center; align-items: center; width:100%; height:6%; background: #1557a1; /*border-top:#272727 1px solid;*/  }
.footer_wrap{ margin: 0 auto; text-align: center; color: #fff; font-size: 12px; }

.footer_menu { display: none;}