.header{
    width: 100%;
    height: 2.5em;
    max-height: 80px;
    background-image: url(../images/bg_header.jpg);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    position: fixed;
    z-index: 5;
    overflow:  hidden;
    box-shadow: 0 5px 0px #d5eeff;
}
.logo{
    width: 18%;
    height: 7em;
    max-width: 350px;
    position: fixed;
    left: 4%;
    top: 1%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../images/logo.png);
    transition: .3s;
}
.logo:hover{
    background-image: url(../images/logo_hover.png);
    transition: .3s;
}
.share{
    width: 18%;
    max-width: 343px;
    min-width: 266px;
    height: 100%;
    position: absolute;
    right: 1%;
}
.share>ul{
    padding: 0;
}
.header_share,.fb>img,.line>img,.plurk>img{
    width: 10%;
    position: relative;
    float: right;
    padding: 1% 0;
    margin-left: 3%;
}
.header_share{
    width: 22%;
    padding: 3% 0;
}
.footer{
    width: 100%;
    max-width: 1920px;
    height: 5em;
    max-height: 83px;
    position: relative;
    bottom: 0;
    z-index: 5;
    background-color: #71aeda;
}
.footer-zero{
    width: auto;
    height: 45%;
    position: absolute;
    left: 1%;
    margin: auto 0;
    top: 0%;
    bottom: 0%;
}
.right-box{
    width: 100%;
    height: 66%;
    position: absolute;
    right: 1%;
    text-align: left;
    margin: auto 0;
    top: 0;
    bottom: 0;
}	
.right-box>ul{
    padding:0;
}
.download{
    width: 70%;
    height: 100%;
    position: relative;
}
.download>li{
    width: 100%;
    height: 100%;
}
.bandai>img,img.copyright,.fb-fan>img,.bandai-small>img,.fb-fan-small>img{
    position: absolute;
}
.fb-fan>img{
    width: auto;
    height: 40%;
    position: absolute;
    right: 1%;
    margin: auto 0;
    top: 0%;
    bottom: 0%;
}
.fb-fan-small>img{
    display: none;
}
.bandai>img{
    width: 10%;
    position: relative;
}
.bandai-small>img{display: none;}
img.copyright {
height: 27%;
    padding: .1rem;
    right: 0;
    left: 0;
    width: auto;
    position: absolute;
    margin: auto;
    top: 0%;
    bottom: 0%;
}
.copyright {
    min-width: 100px;
    min-height: auto;
}
ul, ol {
    margin-top: 1%;
    margin-bottom: 1%;
    padding: 0 30%;
    text-align: left;
}

/* notice */

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
#div1{
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 20;
    background-color: rgba(255, 255, 255, .9);
}
#div1>img{
    width: 22%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 18%;
}
.notice-box>h2 {
    color: #4cacdf;
    font-size: 2em;
    line-height: 1.5em;
    margin-top: 10%;
}
#div2 {   
    top: 2%;
    right: 1%;
    cursor: pointer;  
    z-index:23;
    border: none;
    outline:none;
    outline:0px auto -webkit-focus-ring-color;
    background-image: url(../images/btn_gamer.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 36%;
    position: relative;
    height: 50%;
    background-color: transparent;
    margin: 2% 3%;
    transition: .3s;
}
.notice-box{
    width: 46%;
    height: 25%;
    position: absolute;
    top: 6em;
}
#div3{
    width: 36%;
    height: 50%;
    background-image: url(../images/btn_new_gamer.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    top: 2%;
    right: 1%;
    cursor: pointer;  
    z-index:23;
    border: none;
    outline:none;
    outline:0px auto -webkit-focus-ring-color;
    background-color: transparent;
    margin: 2% 3%;
    transition: .3s;
}
#div2:hover,#div3:hover{
    transform: scale(0.9);
    transition: .3s;
}
.logo-notice{
    width: 47%;
}













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

}
@media screen and (max-width: 1366px){
}
@media screen and (max-width: 1280px){
    .notice-box {
        width: 69%;
        height: 25%;
        position: absolute;
        top: 6em;
    }
    .logo-notice{
        width: 50%;
    }

}
@media screen and (max-width: 890px){
    .logo-notice {
        width: 79%;
    }
}
@media screen and (max-width: 768px){
    #div2,#div3{
        width: 45%;
    }
    .app-info {
        width: 114px;
        height: 132px;
        right: 0;
        bottom: -14%;
    }
    }
@media screen and (max-width: 700px){
    #div2,#div3{
        width: 60%;
    }
    .logo {
        width: 27%;
        height: 4em;
        min-width: auto;
    }
}
@media screen and (max-width: 650px){
	.fb-fan>img {
		height: 29%;
	}
}
@media screen and (max-width: 600px){
	img.copyright {
		height: 23%;
	}
}


    .footer-zero {
        height: 55%;
    }
}
@media screen and (max-width: 480px){
    .header{
        height: 2em;
    }
    #div2, #div3 {
        width: 70%;
        height: 35%;
    }
    .notice-box>h2 {
        font-size: 1.5em;
    }
    img.copyright {
        min-width: 171px;
    }

	.footer-zero {
		height: 37%;
	}
	.fb-fan-small>img{
        display: block;
        width: auto;
		height: 5%;
    }
    .fb-fan>img{
        display: none;
    }
	.footer-zero {
		height: 32%;
	}
}
@media screen and (max-width: 414px){
    .header{
        height: 1.6em;
    }
    .share {
        min-width: 231px;
    }
    .notice-box {
        width: 100%;
    }
    .logo {
        min-width: 125px;
        height: 2.5em;
    }
	.fb-fan-small>img{
        display: block;
        width: auto;
        height: 36%;
        position: absolute;
        right: 1%;
        margin: auto 0;
        top: 0%;
        bottom: 0%;
    }
    .fb-fan>img{
        display: none;
    }
	.footer-zero {
		height: 32%;
	}
}

@media screen and (max-width: 360px){
    .logo {
        min-width: 108px;
    }
    .footer-zero{height: 40%;}
    .bandai>img {
        width: 11%;
    }
    .share {
        min-width: 215px;
    }


}
@media screen and (max-width: 320px){
    .footer{height: 4em;}
    .footer-zero{height: 40%;}
}
@media screen and (orientation: landscape)and (max-width:823px) {
    .notice-box {
        top: 0em;
    }
    .logo-notice {
        width: 48%;
    }
    .notice-box>h2 {
        font-size: 1.5em;
        margin-top: 5%;
    }
    #div2, #div3 {
        width: 38%;
    }
}