@font-face {
    font-family: 'DB Helvethaica X 66';
    src: url('../fonts/DB Helvethaica X 66.eot');
    src: url('../fonts/DB Helvethaica X 66.eot?#iefix') format('embedded-opentype'),
       url('../fonts/DB Helvethaica X 66.ttf') format('truetype'),
       url('../fonts/DB Helvethaica X 66.woff') format('woff'),
       url('../fonts/DB Helvethaica X 66.svg#font') format('svg')
}
@font-face {
    font-family: 'PSL Omyim Regular';
    src: url('../fonts/PSL Omyim Regular.eot');
    src: url('../fonts/PSL Omyim Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/PSL Omyim Regular.ttf') format('truetype'),
       url('../fonts/PSL Omyim Regular.woff') format('woff'),
       url('../fonts/PSL Omyim Regular.svg#font') format('svg')
}
@font-face {
    font-family: 'PSL Omyim Bold';
    src: url('../fonts/PSL Omyim Bold.eot');
    src: url('../fonts/PSL Omyim Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/PSL Omyim Bold.ttf') format('truetype'),
       url('../fonts/PSL Omyim Bold.woff') format('woff'),
       url('../fonts/PSL Omyim Bold.svg#font') format('svg')
}
.browser {
    height: 100%;
    right: 0;
    left: 0;
    position: absolute;
    width: 100%
}
.window {
    /* background: rgba(255,255,255,.9) url('../images/window/progress.gif') no-repeat 50% 50% */
    height: 0;
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    width: 0;
    z-index: 3
}
.window.enable {
    height: 100%;
    opacity: 1;
    width: 100%;
    -webkit-transition: opacity 0.3s ease 0.3s, height 0s ease 0.0s, width 0s ease 0.0s;
    transition: opacity 0.3s ease 0.3s, height 0s ease 0.0s, width 0s ease 0.0s
}
.window.disble {
    height: 0;
    opacity: 0;
    width: 0;
    -webkit-transition: opacity 0.3s ease 0.3s, height 0s ease 0.6s, width 0s ease 0.6s;
    transition: opacity 0.3s ease 0.3s, height 0s ease 0.6s, width 0s ease 0.6s
}
.window iframe {
    height: 100%;
    position: absolute;
    width: 100%
}
.window iframe.enable {
    opacity: 1;
    -webkit-transform: scale(1.0);
            transform: scale(1.0);
    -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease .3s;
    transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease .3s;
    transition: transform 0.3s ease .3s, opacity 0.3s ease 0s;
    transition: transform 0.3s ease .3s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease .3s
}
.window iframe.disble {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
    transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s
}
body {
    /* background: #000 */
}
body.enable {
    overflow: visible
}
body.disble {
    overflow: hidden
}
#container {}
#container header {
    position: fixed;
    /* height: 100px */
    width: 100%;
    z-index: 3;
    -webkit-transition: padding 0s ease 0s;
    transition: padding 0s ease 0s
}
#container header.collapse {
    background: rgba(2,21,38,.9)
}
#container header.collapse .outers {
    padding: 12px 0
}
#container header.collapse #share {
    -webkit-transform: translateX(-9999px) !important;
            transform: translateX(-9999px) !important
}
#container header.collapse #share.enable {
    -webkit-transform: translateX(113px) !important;
            transform: translateX(113px) !important
}
#container header.collapse .search {
    right: -43px;
    width: 35px;
    height: 35px;
    -webkit-transition: all .6s ease 0s;
    transition: all .6s ease 0s;
    top: 11px
}
#container header.collapse .share-icon {
    opacity: 1;
    -webkit-transition: all .6s ease .6s;
    transition: all .6s ease .6s;
    top: 11px
}
#container header .outers {
    margin: auto;
    padding: 25px 0;
    width: 892px;
    position: relative;
    -webkit-transition: all .6s ease 0s;
    transition: all .6s ease 0s
}
#container header .outers:before,
            #container header .outers:after {
    content: '';
    display: table;
    clear: both
}
#container header .outers > div {
    box-sizing: border-box;
    width: 100%
}
#container header .outers > div > div {}
#container header .outers > div > div #menu {
    text-align: center
}
#container header .outers > div > div #menu a {
    cursor: pointer;
    display: inline-block;
    padding: 15px 0;
    margin: 0 30px
}
#container header .outers > div > div #menu a:hover,
                            #container header .outers > div > div #menu a.active {
    background-position-y: 90% !important
}
#container header .outers > div > div #menu a.home {
    background: url('../images/share/header/menu.png') no-repeat 0 0;
    width: 66px
}
#container header .outers > div > div #menu a.gallery {
    background: url('../images/share/header/menu.png') no-repeat -121px 0;
    width: 142px
}
#container header .outers > div > div #menu a.howto {
    background: url('../images/share/header/menu.png') no-repeat -320px 0;
    width: 51px
}
#container header .outers > div > div #menu a.rules {
    background: url('../images/share/header/menu.png') no-repeat -428px 0;
    width: 43px
}
#container header .outers > div > div #menu a.prize {
    background: url('../images/share/header/menu.png') no-repeat -528px 0;
    width: 79px
}
#container header .outers > div > div #menu a.winners {
    background: url('../images/share/header/menu.png') no-repeat -665px 0;
    width: 126px
}
#container header .outers > div > div #share {
    /* float: right */
    text-align: right;
    width: 440px;
    top: 75px;
    right: 0;
    position: absolute;
    -webkit-transform: translateX(82px);
            transform: translateX(82px)
    /* margin: 20px 0 0 */
    /* & > div */
    /*     display: inline-block */
    /*     vertical-align: middle */
    /*     margin: 0 10px 0 0 */
    /*     & > img */
    /*         display: block */
}
#container header .outers > div > div #share > span {
    display: inline-block;
    box-sizing: border-box;
    /* height: 83px */
    overflow: hidden;
    /* padding: 22px 10px */
    position: relative;
    /* width: 83px */
    vertical-align: middle
    /* & > * */
    /*     display: block */
    /*     height: 20px !important */
    /*     margin: auto !important */
    /*     opacity: 0 */
    /*     overflow: hidden */
    /*     width: 60px !important */
}
#container header .outers > div > div #share > span:nth-child(2) {
    /* background: url('../images/share/menu/facebook.png') no-repeat 0 0 / contain */
}
#container header .outers > div > div #share > span:nth-child(3) {
    /* background: url('../images/share/menu/twitter.png') no-repeat 0 0 / contain */
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
    margin: 0 4px
}
#container header .outers > div > div #share > span:nth-child(4) {
    /* background: url('../images/share/menu/google.png') no-repeat 0 0 / contain */
}
#container header .button {
    background: url('../images/share/header/button-menu.png') no-repeat 0 0;
    float: left;
    cursor: pointer;
    height: 42px;
    width: 65px
}
#container header .search {
    background: url('../images/share/header/button-search.png') no-repeat 0 0 / cover;
    float: right;
    cursor: pointer;
    height: 45px;
    top: 18px;
    right: -61px;
    position: absolute;
    width: 45px;
    -webkit-transition: all .6s ease .6s;
    transition: all .6s ease .6s
}
#container header .share-icon {
    background: url('../images/share/header/share-icon.png') no-repeat 0 0;
    float: right;
    cursor: pointer;
    height: 35px;
    opacity: 0;
    top: 18px;
    right: -88px;
    position: absolute;
    width: 35px;
    -webkit-transition: all .6s ease 0s;
    transition: all .6s ease 0s;
    top: 11px
}
#container footer {
    bottom: 0;
    left: 0;
    position: fixed;
    pointer-events: none;
    /* height: 471px */
    height: 223px;
    width: 100%;
    z-index: 1
}
#container footer .hawai {
    position: absolute;
    width: 50%
}
#container footer .hawai .splash {
    background: url('../images/share/footer/hawai-splash.png') no-repeat 100% 0;
    height: 471px;
    /* position: absolute 248px 37px * * */
    top: 0;
    right: 37px;
    position: absolute;
    width: 848px
}
#container footer .hawai .bottle {
    background: url('../images/share/footer/hawai-bottle.png') no-repeat 0 0;
    height: 325px;
    /* position: absolute 244px 479px * * */
    top: 4px;
    right: 479px;
    position: absolute;
    width: 165px
}
#container footer .hawai .label {
    background: url('../images/share/footer/hawai-label.png') no-repeat 0 0;
    height: 67px;
    /* position: absolute 388px 445px * * */
    top: 140px;
    right: 445px;
    position: absolute;
    width: 137px
}
#container footer .hawai .badge {
    background: url('../images/share/footer/hawai-badge.png') no-repeat 0 0;
    height: 50px;
    /* position: absolute 354px 419px * * */
    top: 106px;
    right: 419px;
    position: absolute;
    width: 55px
}
#container footer .hawai .pine1 {
    background: url('../images/share/footer/pineapple1.png') no-repeat 0 0;
    height: 190px;
    /* position: absolute 331px 243px * * */
    top: 83px;
    right: 243px;
    position: absolute;
    width: 190px
}
#container footer .hawai .pine2 {
    background: url('../images/share/footer/pineapple2.png') no-repeat 0 0;
    height: 62px;
    /* position: absolute 278px 598px * * */
    top: 42px;
    right: 598px;
    position: absolute;
    width: 65px
}
#container footer .hawai .apple1 {
    background: url('../images/share/footer/apple1.png') no-repeat 0 0;
    height: 72px;
    /* position: absolute 386px 138px * * */
    top: 138px;
    right: 138px;
    position: absolute;
    width: 115px
}
#container footer .hawai .apple2 {
    background: url('../images/share/footer/apple2.png') no-repeat 0 0;
    height: 81px;
    /* position: absolute 313px 494px * * */
    top: 65px;
    right: 494px;
    position: absolute;
    width: 48px
}
#container footer .grape {
    right: 0;
    position: absolute;
    width: 50%
}
#container footer .grape .splash {
    background: url('../images/share/footer/grape-splash.png') no-repeat 0 0;
    height: 362px;
    /* position: absolute 248px * * -76px */
    top: 0;
    left: -76px;
    position: absolute;
    width: 862px
}
#container footer .grape .bottle {
    background: url('../images/share/footer/grape-bottle.png') no-repeat 0 0;
    height: 309px;
    /* position: absolute 244px * * 438px */
    top: 4px;
    left: 438px;
    position: absolute;
    width: 209px
}
#container footer .grape .label {
    background: url('../images/share/footer/grape-label.png') no-repeat 0 0;
    height: 60px;
    /* position: absolute 396px * * 431px */
    top: 148px;
    left: 431px;
    position: absolute;
    width: 69px
}
#container footer .grape .grape1 {
    background: url('../images/share/footer/grape1.png') no-repeat 0 0;
    height: 148px;
    /* position: absolute 350px * * 178px */
    top: 102px;
    left: 178px;
    position: absolute;
    width: 171px
}
#container footer .grape .grape2 {
    background: url('../images/share/footer/grape2.png') no-repeat 0 0;
    height: 54px;
    /* position: absolute 310px * * 593px */
    top: 62px;
    left: 593px;
    position: absolute;
    width: 64px
}
#container footer .grape .cheery1 {
    background: url('../images/share/footer/cheery1.png') no-repeat 0 0;
    height: 66px;
    /* position: absolute 401px * * 39px */
    top: 153px;
    left: 39px;
    position: absolute;
    width: 123px
}
#container footer .grape .cheery2 {
    background: url('../images/share/footer/cheery2.png') no-repeat 0 0;
    height: 78px;
    /* position: absolute 304px * * 497px */
    top: 56px;
    left: 497px;
    position: absolute;
    width: 44px
}
#preload {
    background: #fff url('../images/share/background.jpg') no-repeat 50% 50% / cover;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 5
}
#preload .circle {
    background: url('../images/gallery/preload.png') no-repeat 0 0;
    height: 70px;
    width: 70px;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    margin: auto;
    -webkit-animation: preload .3s linear infinite;
            animation: preload .3s linear infinite
}
.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px
}
#share {
    -webkit-transform: translateX(0) !important;
            transform: translateX(0) !important
}
#container {
    background: url('../images/share/background.jpg') no-repeat 50% 100% / cover fixed
}
#container main {}
#container main #howto {
    height: 100vh;
    overflow: hidden;
    margin: auto;
    max-width: 1060px
}
#container main #howto .campaign {
    background: url('../images/gallery/campaign.png') no-repeat 0 0;
    height: 136px;
    margin: 66px auto 0px;
    width: 170px
}
#container main #howto h2 {
    background: url('../images/rules/heading.png') no-repeat 0 0;
    height: 32px;
    margin: 0 0 10px;
    width: 73px
}
#container main #howto .wrap {
    /* height: 394px */
    margin: auto
}
#container main #howto .wrap .content {
    height: 415px;
    outline: none
}
#container main #howto .wrap .content .jspVerticalBar {
    background: none
}
#container main #howto .wrap .content .jspTrack {
    background: transparent url('../images/rules/scroll-track.png') no-repeat 0 0
}
#container main #howto .wrap .content .jspDrag {
    background: url('../images/rules/scroll-handle.png') no-repeat 0 0
}
#container main #howto .wrap .content h3 {
    margin: 0;
    width: 90%
}
#container main #howto .wrap .content h4 {
    font-family: 'PSL Omyim Regular';
    font-size: 22px;
    font-weight: 400;
    text-decoration: underline;
    margin: 0;
    width: 90%
}
#container main #howto .wrap .content ul {
    list-style: decimal;
    margin: 0 0 20px;
    padding: 0 0 0 35px
}
#container main #howto .wrap .content ul li {
    font-family: 'PSL Omyim Regular';
    font-size: 22px;
    margin: 0
}
#container main #howto .wrap .content .margin {
    margin: 0 0 20px
}
#container main #howto .wrap .content p {
    font-family: 'PSL Omyim Regular';
    font-size: 22px;
    margin: 0
}

/*# sourceMappingURL=rules.css.map */