body {
margin: 0px;
width: 100%;
height: 100%;
background: url(../img/bg.png) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
img {
border-width: 0px;
}
@font-face {
    font-family: "CenturyGothic";
    src: url('../font/CenturyGothic.eot');
    src: url('../font/CenturyGothic.eot') format('embedded-opentype'),
         url('../font/CenturyGothic.woff') format('woff'),
         url('../font/CenturyGothic.ttf') format('truetype'),
         url('../font/CenturyGothic.svg#CenturyGothic') format('svg');
}
#preload {
display: none
}
#intro {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url('../img/intro_bg.png');
background-repeat: repeat;
z-index: 3;
}
#intro img {
position: absolute;
top: 50%;
left: 43%;
width: 14%;
height: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
#catalog {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index: 1;
}
#number {
position: fixed;
top: 2%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 5%;
color: #7F7F7F;
font-family: "CenturyGothic", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.2vw;
z-index: 3;
display: inline-block;
}
#number img {
width: auto;
height: 60%;
vertical-align: middle;
margin-right: 7px;
}
#catalog_in {
position: absolute;
top: 8%;
left: 0px;
width: 100%;
height: 84%;
z-index: 2;
}
.page {
position: absolute;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 100%;
}
#shadow {
position: absolute;
top: 3%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 94%;
z-index: 1;
}
.next {
position: absolute;
top: 45%;
right: 5%;
width: auto;
height: 10%;
cursor: pointer;
z-index: 2;
display: none;
}
.back {
position: absolute;
top: 45%;
left: 5%;
width: auto;
height: 10%;
cursor: pointer;
z-index: 2;
display: none;
}






@media screen and (orientation:portrait) {
#intro img {
left: 30%;
width: 40%;
}
#number {
top: 3%;
height: 5%;
font-size: 4.5vw;
}
#number img {
height: 70%;
}
#catalog_in {
position: absolute;
top: 15%;
left: 0px;
width: 100%;
height: 70%;
z-index: 2;
}
#shadow {
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
width: 85%;
height: auto;
}
.next {
position: absolute;
top: 50%;
right: 4%;
width: 5%;
height: auto;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.back {
position: absolute;
top: 50%;
left: 4%;
width: 5%;
height: auto;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
}