html {width:100%;height:100%;}
body {position:relative;}
 .wrap {text-align:center;margin:auto;}
.gatemain_title {width:50%;padding:6% 0 2% 0;margin:auto;text-align:center;}
.gatemain_title img {width:100%;}
.banner a {display:block;margin-bottom:2%;}
.banner img {width:80%;border-radius:10px;}

.box1 {width:60%;margin:auto;margin-bottom:6%;}
.box1 a {display:inline-block;width:50%;}
.box1 a img {width:100%;}

.box2 {width:100%;margin:auto;margin-bottom:6%;}
.box2 a {display:inline-block;width:30%;}
.box2 a img {width:100%;}

.box3 {width:100%;margin:auto;margin-bottom:6%;}
.box3 a {display:inline-block;width:30%;}
.box3 a img {width:100%;}

.box4 {width:60%;margin:auto;}
.box4 a {display:inline-block;width:50%;}
.box4 a img {width:100%;}

.gatelogo {width:100%;margin:auto;text-align:center;}
.gatelogo a {display:inline-block;margin:auto;width:20%;}
.gatelogo img {width:100%;}


.ready_bg {display:none;position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.5);z-index:100;}
.readypage {display:none;position:absolute;top:13%;left:0;right:0;margin:auto;height:70%;z-index:101;}

@media all and (min-width: 981px) {
	.wrap {width:700px;}
}


@media all and (max-width: 980px) {
	.wrap {width:100%;}
}

/**/
.box1Wrap {width:100vw;margin:auto;}
.box1Wrap .book1 {width:17vw;}
.box1Wrap .book2 {width:17vw;}
.box1Wrap .bar1 {width:100vw;}