@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;
    /* min-height: 750px */
    margin: auto;
    max-width: 1334px
}
#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/winners/heading.png') no-repeat 0 0;
    height: 91px;
    width: 652px;
    margin: auto auto 30px
}
#container main #howto .wrap {
    /* height: 579px */
    position: relative
}
#container main #howto .wrap .week1 {
    background: url('../images/winners/week1.png') no-repeat 50% 41px, url('../images/winners/versus.png') no-repeat 50% 0;
    margin: auto;
    display: none;
    width: 795px
}
@media screen and (max-height: 745px) {
    #container main #howto .wrap .week1 {
        -webkit-transform-origin: 50% 0;
                transform-origin: 50% 0;
        -webkit-transform: scale(.6);
                transform: scale(.6)
    }
}
#container main #howto .wrap .week1:before,
                    #container main #howto .wrap .week1:after {
    content: '';
    clear: both;
    display: table
}
#container main #howto .wrap .week1 .item {
    float: left;
    position: relative
}
#container main #howto .wrap .week1 .item:nth-child(2) {
    float: right
}
#container main #howto .wrap .week1 .item.grape {}
#container main #howto .wrap .week1 .item.grape .play {
    background: url('../images/winners/grape-button-play.png') no-repeat 50% 50%
}
#container main #howto .wrap .week1 .item.grape .score {
    background: url('../images/winners/grape-badge-score.png') no-repeat
}
#container main #howto .wrap .week1 .play {
    background: url('../images/winners/hawai-button-play.png') no-repeat 50% 50%;
    content: '';
    cursor: pointer;
    height: 72px;
    margin: auto;
    top: 110px;
    right: 0;
    left: 0;
    position: absolute;
    width: 72px
}
#container main #howto .wrap .week1 .estplus {
    background: url('../images/winners/badge-plus.png') no-repeat;
    top: -14px;
    left: 28px;
    position: absolute;
    height: 80px;
    width: 64px
}
#container main #howto .wrap .week1 .score {
    background: url('../images/winners/hawai-badge-score.png') no-repeat;
    top: -1px;
    right: -24px;
    position: absolute;
    font-family: 'DB Helvethaica X 66';
    font-size: 30px;
    color: white;
    height: 40px;
    padding: 3px 0 0 23px;
    box-sizing: border-box;
    width: 115px
}
#container main #howto .wrap .week1 .score b {
    text-align: center;
    font-weight: 400;
    display: block
}
#container main #howto .wrap .week1 .name {
    color: white;
    font-family: 'DB Helvethaica X 66';
    font-size: 25px;
    line-height: 1.5;
    left: -20px;
    margin: 5px 0 0 0;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 232px
}
#container main #howto .wrap .week1 .video {
    display: block;
    background: black;
    box-shadow: 4px 3px 3px 0px rgba(0,0,0,0.5);
    -webkit-transform: skewX(-9deg);
            transform: skewX(-9deg);
    height: 285px;
    overflow: hidden;
    position: relative;
    width: 290px
}
#container main #howto .wrap .week1 .video.enable {}
#container main #howto .wrap .week1 .video.enable video,
                            #container main #howto .wrap .week1 .video.enable img {
    /* transform: translate(-50%, -50%) scale(2) */
}
#container main #howto .wrap .week1 .video.disable {}
#container main #howto .wrap .week1 .video.disable video,
                            #container main #howto .wrap .week1 .video.disable img {
    /* transform: translate(-50%, -50%) scale(1) */
}
#container main #howto .wrap .week1 .video video,
                        #container main #howto .wrap .week1 .video img {
    position: absolute;
    /* margin: 50% 0 0 50% */
    /* transform: translate(-50%, -50%) */
    height: 100%;
    width: 100%
    /* transition: transform .6s ease 0s */
}
#container main #howto .wrap .week2 {
    margin: auto;
    /* display: none */
    margin: auto;
    width: 487px
}
@media screen and (max-height: 745px) {
    #container main #howto .wrap .week2 {
        width: 1000px
    }
}
#container main #howto .wrap .week2:before,
                    #container main #howto .wrap .week2:after {
    content: '';
    clear: both;
    display: table
}
#container main #howto .wrap .week2 .left,
                    #container main #howto .wrap .week2 .right {
    /* float: left */
    width: 100%
}
#container main #howto .wrap .week2 .left:before,
                        #container main #howto .wrap .week2 .left:after,
                        #container main #howto .wrap .week2 .right:before,
                        #container main #howto .wrap .week2 .right:after {
    content: '';
    clear: both;
    display: table
}
@media screen and (max-height: 745px) {
    #container main #howto .wrap .week2 .left,
                    #container main #howto .wrap .week2 .right {
        width: 50%;
        float: left
    }
}
#container main #howto .wrap .week2 .left {
    background: url('../images/winners/week1.png') no-repeat 205px 43px / 50px, url('../images/winners/versus.png') no-repeat 109px 16px / 224px;
    margin: 0 0 60px
}
@media screen and (max-height: 745px) {
    #container main #howto .wrap .week2 .left {
        margin: 0
    }
}
#container main #howto .wrap .week2 .right {
    background: url('../images/winners/week2.png') no-repeat 205px 43px / 50px, url('../images/winners/versus.png') no-repeat 109px 16px / 224px
}
#container main #howto .wrap .week2 .item {
    float: left;
    height: 170px;
    position: relative;
    width: 175px
}
#container main #howto .wrap .week2 .item:nth-child(2n) {
    margin: 0 0 0 100px
}
#container main #howto .wrap .week2 .item.grape {}
#container main #howto .wrap .week2 .item.grape .play {
    background: url('../images/gallery/grape-button-play.png') no-repeat 50% 50%
}
#container main #howto .wrap .week2 .item.grape .score {
    background: url('../images/gallery/grape-badge-score.png') no-repeat
}
#container main #howto .wrap .week2 .play {
    background: url('../images/gallery/hawai-button-play.png') no-repeat 50% 50%;
    content: '';
    cursor: pointer;
    height: 60px;
    margin: auto;
    top: 58px;
    right: 0;
    left: 0;
    position: absolute;
    width: 60px
}
#container main #howto .wrap .week2 .estplus {
    background: url('../images/gallery/badge-plus.png') no-repeat;
    top: -9px;
    left: 17px;
    position: absolute;
    height: 66px;
    width: 52px
}
#container main #howto .wrap .week2 .score {
    background: url('../images/gallery/hawai-badge-score.png') no-repeat;
    top: -1px;
    right: -19px;
    position: absolute;
    font-family: 'DB Helvethaica X 66';
    font-size: 22px;
    color: white;
    height: 34px;
    padding: 0 0 0 13px;
    box-sizing: border-box;
    width: 73px
}
#container main #howto .wrap .week2 .score b {
    text-align: center;
    font-weight: 400;
    display: block
}
#container main #howto .wrap .week2 .vote {
    background: url('../images/gallery/hawai-button-vote.png') no-repeat;
    top: 210px;
    right: 10px;
    position: absolute;
    height: 37px;
    cursor: pointer;
    width: 103px
}
#container main #howto .wrap .week2 .name {
    color: white;
    font-family: 'DB Helvethaica X 66';
    font-size: 22px;
    line-height: 1.5;
    left: -20px;
    margin: 5px 0 0 0;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 183px
}
#container main #howto .wrap .week2 .video {
    display: block;
    background: black;
    box-shadow: 4px 3px 3px 0px rgba(0,0,0,0.5);
    -webkit-transform: skewX(-9deg);
            transform: skewX(-9deg);
    height: 170px;
    overflow: hidden;
    position: relative;
    width: 175px
}
#container main #howto .wrap .week2 .video.enable {}
#container main #howto .wrap .week2 .video.enable video,
                            #container main #howto .wrap .week2 .video.enable img {
    -webkit-transform: scale(2);
            transform: scale(2)
}
#container main #howto .wrap .week2 .video.disable {}
#container main #howto .wrap .week2 .video.disable video,
                            #container main #howto .wrap .week2 .video.disable img {
    -webkit-transform: scale(1);
            transform: scale(1)
}
#container main #howto .wrap .week2 .video video,
                        #container main #howto .wrap .week2 .video img {
    position: absolute;
    height: 100%;
    /* margin: 50% 0 0 50% */
    /* transform: translate(-50%, -50%) */
    width: 100%;
    -webkit-transition: -webkit-transform .6s ease 0s;
    transition: -webkit-transform .6s ease 0s;
    transition: transform .6s ease 0s;
    transition: transform .6s ease 0s, -webkit-transform .6s ease 0s
}

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