@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
}
body {
    /* background: url('../images/guide.png') no-repeat -77px 871px */
}
#video {
    background: #000;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 4
}
#video .inner {
    height: 0;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    padding: 0 0 56.25%;
    width: 100%
}
#video .inner .playvdo {
    /* background: url('../images/common/button-playvdo.png') no-repeat 0 0 */
    width: 401px;
    height: 133px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    margin: auto;
    cursor: pointer
}
#video .inner video {
    display: block;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%
}
#search {
    background: url('../images/search/background.jpg') no-repeat 50% 50% / cover;
    top: 0;
    left: -9999px;
    position: fixed;
    height: 100%;
    opacity: 0;
    width: 100%;
    z-index: 3
}
#search.enable {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    opacity: 1;
    -webkit-transition: opacity .6s ease 0s, left 0s ease 0s;
    transition: opacity .6s ease 0s, left 0s ease 0s
}
#search.disable {
    top: 0;
    right: 0;
    bottom: 0;
    left: -9999px;
    position: fixed;
    opacity: 0;
    -webkit-transition: opacity .6s ease 0s, left 0s ease .4s;
    transition: opacity .6s ease 0s, left 0s ease .4s
}
#search .close {
    background: url('../images/share/menu/button-close.png') no-repeat 0 0 / contain;
    top: 30px;
    right: 30px;
    position: absolute;
    height: 39px;
    cursor: pointer;
    width: 36px
}
#search .wrap {
    height: 420px;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 794px;
    -webkit-transition: all .8s ease 1s;
    transition: all .8s ease 1s
}
#search .wrap.focus {
    -webkit-transform: translateY(20%);
            transform: translateY(20%)
}
#search .wrap span {
    display: block
}
#search .wrap span:nth-child(1) {
    background: url('../images/common/input-search.png') no-repeat 0 0;
    height: 117px;
    width: 794px;
    box-sizing: border-box;
    padding: 23px 44px 29px;
    margin: 0 0 40px
}
#search .wrap span:nth-child(1) input {
    outline: none;
    background: none;
    border: none;
    color: #3c4249;
    font-family: 'DB Helvethaica X 66';
    font-size: 51px;
    height: 100%;
    width: 100%
}
#search .wrap span:nth-child(2) {
    background: url('../images/common/select-sort.png') no-repeat 0 0;
    height: 117px;
    width: 794px;
    box-sizing: border-box;
    padding: 8px 44px 13px;
    margin: 0 0 60px;
    overflow: hidden;
    position: relative
}
#search .wrap span:nth-child(2):after {
    content: '';
    background: url('../images/common/select-arrow.png') no-repeat 0 0;
    height: 32px;
    width: 53px;
    pointer-events: none;
    top: 42px;
    right: 42px;
    position: absolute
}
#search .wrap span:nth-child(2) select {
    color: #3c4249;
    background: none;
    font-size: 51px;
    -webkit-appearance: none;
    border: none;
    height: 100%;
    width: 110%;
    outline: none;
    color: #3c4249;
    font-family: 'DB Helvethaica X 66'
}
#search .wrap button {
    background: url('../images/common/button-search.png') no-repeat 0 0;
    display: block;
    border: none;
    cursor: pointer;
    margin: auto;
    height: 133px;
    width: 361px;
    outline: none
}
#container {
    background: url('../images/common/background.jpg') no-repeat 50% 100% / cover fixed
}
#container main {}
#container main #home {
    height: 100vh;
    position: relative;
    overflow: hidden
}
#container main #home #hawai {
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    width: 50%;
    z-index: 1
}
#container main #home #hawai .wrap {
    height: 543px;
    top: 0;
    right: 169px;
    bottom: 0;
    position: absolute;
    margin: auto;
    width: 390px;
    -webkit-perspective: 658px;
            perspective: 658px
}
@media screen and (max-height: 850px) {
    #container main #home #hawai .wrap {
        -webkit-transform: scale(.8);
                transform: scale(.8);
        right: 139px
    }
}
#container main #home #hawai .wrap .shadow {
    background: url('../images/common/left-shadow.png') no-repeat 100% 100%;
    content: '';
    height: 191px;
    right: 0;
    bottom: -127px;
    position: absolute;
    width: 474px;
    z-index: -1
}
#container main #home #hawai .wrap .frame {
    background: #000 url('../images/window/progress.gif') no-repeat 50% 50%;
    position: absolute;
    right: 0;
    /* transform-style: preserve-3d */
    /* transform 3d zindex bug */
    -webkit-transform-style: flat;
            transform-style: flat
}
#container main #home #hawai .wrap .frame[data-props='1'] {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.3" /><feFuncG type="linear" slope="0.3" /><feFuncB type="linear" slope="0.3" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(.3);
            filter: brightness(.3)
}
#container main #home #hawai .wrap .frame[data-props='2'] {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.2" /><feFuncG type="linear" slope="0.2" /><feFuncB type="linear" slope="0.2" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(.2);
            filter: brightness(.2)
}
#container main #home #hawai .wrap .frame[data-props='3'] {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.1" /><feFuncG type="linear" slope="0.1" /><feFuncB type="linear" slope="0.1" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(.1);
            filter: brightness(.1)
}
#container main #home #hawai .wrap .frame:nth-child(1) {
    height: 574px;
    width: 268px;
    /* background: yellow */
    /* opacity: .5 */
    -webkit-transform: rotateX(-1deg) rotateY(11deg) rotateZ(-9deg) translateX(-95px) translateZ(-253px);
            transform: rotateX(-1deg) rotateY(11deg) rotateZ(-9deg) translateX(-95px) translateZ(-253px)
}
#container main #home #hawai .wrap .frame:nth-child(2) {
    height: 546px;
    width: 268px;
    /* background: blue */
    /* opacity: 0 */
    -webkit-transform: rotateX(-1deg) rotateY(16deg) rotateZ(-9deg) translateX(-70px) translateZ(-158px);
            transform: rotateX(-1deg) rotateY(16deg) rotateZ(-9deg) translateX(-70px) translateZ(-158px)
}
#container main #home #hawai .wrap .frame:nth-child(3) {
    height: 523px;
    width: 268px;
    /* background: green */
    /* opacity: 0 */
    -webkit-transform: rotateX(-1deg) rotateY(12deg) rotateZ(-8deg) translateX(-66px) translateZ(-75px);
            transform: rotateX(-1deg) rotateY(12deg) rotateZ(-8deg) translateX(-66px) translateZ(-75px)
}
#container main #home #hawai .wrap .frame:nth-child(4) {
    height: 511px;
    width: 301px;
    /* background: red */
    /* opacity: 0 */
    -webkit-transform: rotateX(1deg) rotateY(10deg) rotateZ(-7deg) translateX(-19px);
            transform: rotateX(1deg) rotateY(10deg) rotateZ(-7deg) translateX(-19px)
}
#container main #home #hawai .wrap .frame .inner {
    overflow: hidden;
    height: 100%;
    position: relative;
    width: 100%
}
#container main #home #hawai .wrap .frame .inner img {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%
}
#container main #home #hawai .wrap .frame .inner video {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute
}
#container main #home #hawai .wrap .frame .inner .play {
    background: url('../images/gallery/hawai-button-play.png') no-repeat 50% 90%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    margin: auto;
    cursor: pointer;
    height: 100%;
    width: 100%
}
#container main #home #center {
    height: 100%;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    position: absolute;
    width: 727px
}
#container main #home #center #campaign {
    margin: auto;
    top: 8%;
    right: 0;
    left: 0;
    position: absolute
}
@media screen and (max-height: 850px) {
    #container main #home #center #campaign {
        -webkit-transform: scale(.7);
                transform: scale(.7);
        -webkit-transform-origin: 50% 0;
                transform-origin: 50% 0
    }
}
#container main #home #center #campaign span {}
#container main #home #center #campaign span:nth-child(1) {
    background: url('../images/common/brand.png') no-repeat 0 0;
    display: block;
    height: 298px;
    margin: auto;
    width: 375px
}
#container main #home #center #campaign span:nth-child(2) {
    background: url('../images/common/caption.png') no-repeat 0 0;
    display: block;
    height: 138px;
    margin: auto;
    top: -20px;
    right: 0;
    left: -41px;
    position: relative;
    width: 464px
}
#container main #home #center #versus {
    background: url('../images/common/versus.png') no-repeat 0 0;
    height: 315px;
    /* position: absolute 40% 0 * 29px */
    top: 0;
    right: 0;
    bottom: 0;
    left: -44px;
    position: absolute;
    -webkit-transform: translateY(30%);
            transform: translateY(30%);
    margin: auto;
    width: 838px
}
#container main #home #center #startVote {
    background: url('../images/common/button.png') no-repeat 0 0;
    cursor: pointer;
    display: block;
    height: 133px;
    margin: auto;
    right: 0;
    bottom: 5%;
    left: 0;
    position: absolute;
    width: 361px;
    z-index: 2
}
@media screen and (max-height: 850px) {
    #container main #home #center #startVote {
        -webkit-transform: scale(.6);
                transform: scale(.6)
    }
}
#container main #home #center #startVote span {
    opacity: 0;
    background: url('../images/common/button.png') no-repeat 0 100%;
    -webkit-animation: startVote .3s 3s infinite alternate;
            animation: startVote .3s 3s infinite alternate;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute
}
#container main #home #grape {
    height: 100%;
    top: 0;
    right: 0;
    position: absolute;
    width: 50%;
    z-index: 1
}
#container main #home #grape .wrap {
    height: 543px;
    top: 0;
    bottom: 0;
    left: 153px;
    position: absolute;
    margin: auto;
    width: 390px;
    -webkit-perspective: 658px;
            perspective: 658px
}
@media screen and (max-height: 850px) {
    #container main #home #grape .wrap {
        -webkit-transform: scale(.8);
                transform: scale(.8);
        left: 122px
    }
}
#container main #home #grape .wrap .shadow {
    background: url('../images/common/right-shadow.png') no-repeat 0 100%;
    content: '';
    height: 197px;
    bottom: -127px;
    left: 0;
    position: absolute;
    width: 490px;
    z-index: -1
}
#container main #home #grape .wrap .frame {
    background: #000 url('../images/window/progress.gif') no-repeat 50% 50%;
    position: absolute;
    left: 0;
    /* transform-style: preserve-3d */
    -webkit-transform-style: flat;
            transform-style: flat
}
#container main #home #grape .wrap .frame[data-props='1'] {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.3" /><feFuncG type="linear" slope="0.3" /><feFuncB type="linear" slope="0.3" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(.3);
            filter: brightness(.3)
}
#container main #home #grape .wrap .frame[data-props='2'] {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.2" /><feFuncG type="linear" slope="0.2" /><feFuncB type="linear" slope="0.2" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(.2);
            filter: brightness(.2)
}
#container main #home #grape .wrap .frame[data-props='3'] {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.1" /><feFuncG type="linear" slope="0.1" /><feFuncB type="linear" slope="0.1" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(.1);
            filter: brightness(.1)
}
#container main #home #grape .wrap .frame:nth-child(1) {
    height: 574px;
    width: 268px;
    /* background: yellow */
    /* opacity: .5 */
    -webkit-transform: rotateX(-1deg) rotateY(-11deg) rotateZ(9deg) translateX(95px) translateZ(-253px);
            transform: rotateX(-1deg) rotateY(-11deg) rotateZ(9deg) translateX(95px) translateZ(-253px)
}
#container main #home #grape .wrap .frame:nth-child(2) {
    height: 546px;
    width: 268px;
    /* background: blue */
    /* opacity: 0 */
    -webkit-transform: rotateX(-1deg) rotateY(-16deg) rotateZ(9deg) translateX(70px) translateZ(-158px);
            transform: rotateX(-1deg) rotateY(-16deg) rotateZ(9deg) translateX(70px) translateZ(-158px)
}
#container main #home #grape .wrap .frame:nth-child(3) {
    height: 523px;
    width: 268px;
    /* background: green */
    /* opacity: 0 */
    -webkit-transform: rotateX(-1deg) rotateY(-12deg) rotateZ(8deg) translateX(66px) translateZ(-75px);
            transform: rotateX(-1deg) rotateY(-12deg) rotateZ(8deg) translateX(66px) translateZ(-75px)
}
#container main #home #grape .wrap .frame:nth-child(4) {
    height: 511px;
    width: 301px;
    /* background: red */
    /* opacity: 0 */
    -webkit-transform: rotateX(1deg) rotateY(-10deg) rotateZ(7deg) translateX(19px);
            transform: rotateX(1deg) rotateY(-10deg) rotateZ(7deg) translateX(19px)
}
#container main #home #grape .wrap .frame .inner {
    overflow: hidden;
    height: 100%;
    position: relative;
    width: 100%
}
#container main #home #grape .wrap .frame .inner img {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%
}
#container main #home #grape .wrap .frame .inner video {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute
}
#container main #home #grape .wrap .frame .inner .play {
    background: url('../images/gallery/grape-button-play.png') no-repeat 50% 90%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    margin: auto;
    cursor: pointer;
    height: 100%;
    width: 100%
}
#container main #gallery {
    position: relative;
    padding: 70px 0 300px 0;
    margin: auto;
    width: 1030px
}
@media screen and (min-width:1900px) {
    #container main #gallery {
        min-height: 1000px;
        width: 1700px
    }
}
#container main #gallery:before,
            #container main #gallery:after {
    display: table;
    content: '';
    clear: both
}
#container main #gallery.notfound {
    background: url('../images/gallery/notfound-background.png') no-repeat 50% 20% / contain;
    height: 600px
}
#container main #gallery .campaign {
    background: url('../images/gallery/campaign.png') no-repeat 0 0;
    height: 136px;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    position: absolute;
    width: 170px
}
#container main #gallery .more {
    /* background: #000 */
    margin: auto;
    display: none;
    right: 0;
    bottom: 10px;
    left: 0;
    position: absolute;
    z-index: 2;
    cursor: pointer;
    height: 70px;
    width: 70px;
    overflow: hidden
}
#container main #gallery .more:after {
    /* background: url('../images/gallery/text-preload.png') no-repeat 0 0 */
    content: 'LOAD MORE';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    height: 6px;
    margin: auto;
    width: 23px
}
#container main #gallery .preload {
    /* background: #000 */
    margin: auto;
    right: 0;
    bottom: 10px;
    left: 0;
    position: absolute;
    z-index: 2;
    cursor: pointer;
    height: 70px;
    width: 70px;
    overflow: hidden
}
#container main #gallery .preload:after {
    background: url('../images/gallery/text-preload.png') no-repeat 0 0;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    height: 6px;
    margin: auto;
    width: 23px
}
#container main #gallery .preload .circle {
    background: url('../images/gallery/preload.png') no-repeat 0 0;
    height: 70px;
    width: 70px;
    display: block;
    -webkit-animation: preload .3s linear infinite;
            animation: preload .3s linear infinite
}
#container main #gallery .hawai {
    float: left;
    width: 50%;
    min-height: 480px
}
#container main #gallery .hawai.notfound {
    background: url('../images/gallery/notfound-hawai.png') no-repeat 50% 50% / 60%
}
#container main #gallery .hawai h2 {
    text-align: center;
    margin: 0 0 17px
}
#container main #gallery .hawai h2 img {
    margin: 0
}
#container main #gallery .hawai .wrap {
    margin: auto;
    width: 389px
}
@media screen and (min-width:1900px) {
    #container main #gallery .hawai .wrap {
        width: 100%
    }
}
#container main #gallery .hawai .wrap:before,
                    #container main #gallery .hawai .wrap:after {
    content: '';
    display: table;
    clear: both
}
#container main #gallery .hawai .wrap .item {
    opacity: 0;
    float: left;
    position: relative;
    width: 175px
}
#container main #gallery .hawai .wrap .item:nth-child(2n) {
    margin: 0 0 25px 25px
}
@media screen and (min-width:1900px) {
    #container main #gallery .hawai .wrap .item {
        margin: 0 0 25px 25px
    }
}
#container main #gallery .hawai .wrap .play {
    background: url('../images/gallery/hawai-button-play.png') no-repeat 50% 50%;
    content: '';
    cursor: pointer;
    height: 60px;
    opacity: 0;
    margin: auto;
    top: 58px;
    right: 0;
    left: 0;
    position: absolute;
    width: 60px
}
#container main #gallery .hawai .wrap .estplus {
    background: url('../images/gallery/badge-plus.png') no-repeat;
    top: -9px;
    left: 15px;
    position: absolute;
    height: 47px;
    opacity: 0;
    width: 37px
}
#container main #gallery .hawai .wrap .score {
    background: url('../images/gallery/hawai-badge-score.png') no-repeat;
    top: -1px;
    right: -15px;
    position: absolute;
    font-family: 'DB Helvethaica X 66';
    font-size: 22px;
    color: white;
    height: 25px;
    padding: 0 0 0 15px;
    box-sizing: border-box;
    width: 68px
}
#container main #gallery .hawai .wrap .score b {
    text-align: center;
    font-weight: 400;
    display: block
}
#container main #gallery .hawai .wrap .vote {
    background: url('../images/gallery/hawai-button-vote.png') no-repeat;
    top: 152px;
    right: 2px;
    position: absolute;
    height: 26px;
    display: none;
    opacity: 0;
    cursor: pointer;
    width: 75px
}
#container main #gallery .hawai .wrap .vote.disable {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
    -webkit-filter: grayscale(100%) !important;
            filter: grayscale(100%) !important;
    opacity: .5 !important;
    cursor: not-allowed !important
}
#container main #gallery .hawai .wrap .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: 182px
}
#container main #gallery .hawai .wrap .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 #gallery .hawai .wrap .video.enable {}
#container main #gallery .hawai .wrap .video.enable video,
                            #container main #gallery .hawai .wrap .video.enable img {
    -webkit-transform: scale(1.3);
            transform: scale(1.3)
}
#container main #gallery .hawai .wrap .video.disable {}
#container main #gallery .hawai .wrap .video.disable video,
                            #container main #gallery .hawai .wrap .video.disable img {
    -webkit-transform: scale(1);
            transform: scale(1)
}
#container main #gallery .hawai .wrap .video video,
                        #container main #gallery .hawai .wrap .video img {
    position: absolute;
    height: 100%;
    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
}
#container main #gallery .grape {
    float: right;
    width: 50%;
    min-height: 480px
}
#container main #gallery .grape.notfound {
    background: url('../images/gallery/notfound-grape.png') no-repeat 50% 50% / 60%
}
#container main #gallery .grape h2 {
    text-align: center;
    margin: 0 0 17px
}
#container main #gallery .grape h2 img {
    margin: 0
}
#container main #gallery .grape .wrap {
    margin: auto;
    width: 389px
}
@media screen and (min-width:1900px) {
    #container main #gallery .grape .wrap {
        width: 100%;
        -webkit-transform: translateX(11%);
                transform: translateX(11%)
    }
}
#container main #gallery .grape .wrap:before,
                    #container main #gallery .grape .wrap:after {
    content: '';
    display: table;
    clear: both
}
#container main #gallery .grape .wrap .item {
    opacity: 0;
    float: left;
    position: relative;
    width: 175px
}
#container main #gallery .grape .wrap .item:nth-child(2n) {
    margin: 0 0 25px 25px
}
@media screen and (min-width:1900px) {
    #container main #gallery .grape .wrap .item {
        margin: 0 0 25px 25px
    }
}
#container main #gallery .grape .wrap .play {
    background: url('../images/gallery/grape-button-play.png') no-repeat 50% 50%;
    content: '';
    cursor: pointer;
    height: 60px;
    opacity: 0;
    margin: auto;
    top: 58px;
    right: 0;
    left: 0;
    position: absolute;
    width: 60px
}
#container main #gallery .grape .wrap .estplus {
    background: url('../images/gallery/badge-plus.png') no-repeat;
    top: -9px;
    left: 15px;
    position: absolute;
    height: 47px;
    opacity: 0;
    width: 37px
}
#container main #gallery .grape .wrap .score {
    background: url('../images/gallery/grape-badge-score.png') no-repeat;
    top: -1px;
    right: -15px;
    position: absolute;
    font-family: 'DB Helvethaica X 66';
    font-size: 22px;
    color: white;
    height: 25px;
    padding: 0 0 0 15px;
    box-sizing: border-box;
    width: 68px
}
#container main #gallery .grape .wrap .score b {
    text-align: center;
    font-weight: 400;
    display: block
}
#container main #gallery .grape .wrap .vote {
    background: url('../images/gallery/grape-button-vote.png') no-repeat;
    top: 152px;
    right: 2px;
    position: absolute;
    height: 26px;
    opacity: 0;
    display: none;
    cursor: pointer;
    width: 75px
}
#container main #gallery .grape .wrap .vote.disable {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
    -webkit-filter: grayscale(100%) !important;
            filter: grayscale(100%) !important;
    opacity: .5 !important;
    cursor: not-allowed !important
}
#container main #gallery .grape .wrap .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: 182px
}
#container main #gallery .grape .wrap .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 #gallery .grape .wrap .video.enable {}
#container main #gallery .grape .wrap .video.enable video,
                            #container main #gallery .grape .wrap .video.enable img {
    -webkit-transform: scale(1.3);
            transform: scale(1.3)
}
#container main #gallery .grape .wrap .video.disable {}
#container main #gallery .grape .wrap .video.disable video,
                            #container main #gallery .grape .wrap .video.disable img {
    -webkit-transform: scale(1);
            transform: scale(1)
}
#container main #gallery .grape .wrap .video video,
                        #container main #gallery .grape .wrap .video img {
    position: absolute;
    height: 100%;
    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
}
@-webkit-keyframes preload {
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg)
    }
}
@keyframes preload {
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg)
    }
}
@-webkit-keyframes startVote {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@keyframes startVote {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

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