* { margin: 0; padding: 0; } html, body { height: 100%; } html { overflow-x: auto; } body { overflow-x: hidden; overflow-y: auto; } a { color:#f7f7f7; } a:hover { text-decoration: none; } p { margin:0 0 7px 0; font-size:15px; } h1 { margin:0 0 10px; font-size:22px; } h1, p { color:#f7f7f7; } /* switcher & img */ #bg-body { background: #D2D2D0; height: 200%; left: -50%; position: fixed; top: -50%; width: 200%; z-index: 1; } #bg-body > img, #bg-body > div.bg-body-html > img { bottom: 0; left: 0; margin: auto; height: 50%; width: 50%; object-fit: cover; position: absolute; right: 0; top: 0; } /* switcher loader */ #bg-body-loader { background: url("../images/loading.gif") no-repeat scroll center center rgba(0, 0, 0, 0); height: 10px; left: 50%; margin: -5px 0 0 -40px; position: absolute; top: 50%; width: 80px; } #bg-body.loading #bg-body-loader { display: block !important; z-index: 9999; } /* switcher bullets */ #bg-body-navigation { position: fixed; left: 0; bottom: 100px; width: 100%; height: 15px; text-align: center; z-index: 1; } #bg-body-navigation > a { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background:#ccc; margin: 0 5px; } #bg-body-navigation > a:hover, #bg-body-navigation > a.active { background:#000; opacity: .7; } /* switcher nav */ #bg-body-prevnext-wrapper { position: fixed; left: 0; bottom: 20px; width: 100%; height: 72px; z-index: 1; } .bg-body-prevnext-link { display: block; width: 35px; height: 72px; position: absolute; } #bg-body-previous-link { background: url(../images/ico-prev-sprite.png) no-repeat 0 0; left:0; } #bg-body-previous-link:hover { background: url(../images/ico-prev-sprite.png) no-repeat 0 -72px; } #bg-body-next-link { background: url(../images/ico-next-sprite.png) no-repeat 0 0; right: 0; } #bg-body-next-link:hover { background: url(../images/ico-next-sprite.png) no-repeat 0 -72px; } #wrapper { position:relative; width:100%; height:100%; margin:0 auto; } #leftInfo { position:absolute; width:50%; height:100%; left:0; top: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; } #rightInfo { position:absolute; width:50%; height:100%; right:0; top: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 2; } #leftInfo:hover { background-color: rgba(0, 0, 0, 0.25); } #rightInfo:hover { background-color: rgba(0, 0, 0, 0.25); } .logo{ position: fixed; top:15%; z-index: 5; text-align: center; width: 100%; } .logo img{ width: 40%; max-width: 300px; min-width: 150px; height: auto; } .Banquet , .Wedding{ position: absolute; top: 60%; color: #fff; font-family: "Microsoft YaHei"; font-size: 32px; text-shadow:2px 2px 2px #000000; text-decoration: none; } .Banquet a , .Wedding a{ text-decoration: none; } .Banquet{ left: 5%; } .Wedding{ right: 5%; } @media screen and (max-width: 768px) { .Banquet , .Wedding{ font-size: 26px; } }