@font-face{
    font-family:"BMW-TNL-Bold"; 
    src: url("BMWTypeNextLatinTT-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
} 
@font-face{
    font-family:"MF-Regular"; 
    src: url("MFSuHei-Noncommercial-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}  

*{ margin: 0;  padding: 0;list-style: none; border: none; font-family: 'Heiti SC','SimHei','Microsoft YaHei',Arial;  vertical-align: baseline;
     -webkit-tap-highlight-color:transparent; -webkit-appearance: none; outline:none;border-radius: 0; }
:focus { outline: none; }
a {line-height:1;margin:0; outline:none;outline-offset:0;box-shadow:none;text-decoration: none!important;display: inline-block;
    -webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;}
img{width:100%;height: auto;display: inline-block; -webkit-user-drag: auto;}
textarea,textarea:focus,
input,input:focus{ background-color:transparent; -moz-appearance:none; -webkit-appearance:none; appearance:none;outline: none; }

/*滚动条整体样式*/
/*高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar { width: 5px;  height: 1px; }
/*滚动条里面小方块*/
::-webkit-scrollbar-thumb { border-radius:5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0); background: rgba(0,0,0,0.5); }
/*滚动条里面轨道*/
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0); border-radius: 5px; background: rgba(255,255,255,0.5);}


canvas{width: 100%;height: 100%;}

html{ font-size: 10px;} 
@media only screen and (min-width: 390px){
    html {
        font-size: 10px;
    }
}
@media only screen and (min-width: 414px) and (min-height: 750px){
    html {
        font-size: 12px;
    }
} 
@media only screen and (min-width: 1280px){
    html {
        font-size: 16px;
    }
} 

html,body{position: relative;width: 100vw; height: 100vh;overflow: hidden;}
.main{position: relative;width: 100%; height: 100%; margin: 0 auto; overflow: hidden;background: #C92027;} 

.loading{position: absolute;width: 100%; height: 100%;left:50%;top:0;transform: translateX(-50%);background: #C92027;z-index: 999;}
.loading .load-icon{position: absolute; width:50px;height:50px;left:calc(50% - 25px);top:calc(50% - 25px); background:url(w-load.png) no-repeat center / contain;animation: animLoad 2s linear 0s infinite normal;}
.loading .load-num{position: absolute;left: 0;top:calc(50% + 50px); width: 100%;font-size: 1.2rem;text-align: center; color:#fff;}

.stage{position: relative;width: 100%; height: 100%; }
.section{position: absolute;width: 100%; height: 100%;left: 0;top: 0;overflow: hidden; }
.section .inner{position: absolute;width:calc(1920 / 1920 * 100%);height:calc(1080 / 1920 * 100vw); height:100vh; left:50%;top:50%;transform: translate(-50%,-50%);overflow: hidden;background: rgba(0,0,0,0.5);}

.section1 .inner{padding-top:115px;box-sizing: border-box;display: flex;flex-direction: row;background-color: transparent; }
.section1 .inner .grid{display: flex;flex-direction: column;position: relative;z-index: 2;}
.section1 .inner .grid .flex{width: 100%;height: 50%;position: relative;}
.section1 .inner .grid1{width:40%;z-index:4;}
.section1 .inner .grid1 .flex1{background: #C92027;z-index: 2;}
.section1 .inner .grid1 .flex2{background: #f1d2be;}
.section1 .inner .grid2{width:46%;}
.section1 .inner .grid2 .flex1{height: 55%;background: #000;}
.section1 .inner .grid2 .flex2{height: 45%;background: #ffb846;}
.section1 .inner .grid3{width:14%;background: #ff6422;}

.section1 .inner .grid1 .flex1 .t2023{position: absolute;left: 0;top:0; width:calc(110 / 1920 * 100vw);height:calc(424 / 1920 * 100vw);max-height:98%;z-index: 3; }
.section1 .inner .grid1 .flex1 .t2023 img{height: 100%;width: auto;position: absolute;left: 0;top: 0; object-position:center;object-fit: contain;}
.section1 .inner .grid1 .flex1 .t2023 .btn-form{position: absolute; height: 25%;width: auto;padding-left:100%;position: absolute;left: 0;bottom: 0;background: #f1ba97;border-radius: 5px;cursor: pointer;z-index: 10;overflow: hidden;}
.section1 .inner .grid1 .flex1 .t2023 .btn-form::after{content:""; width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: url(w1-btnform.png) no-repeat center;background-size: contain;animation: animBtn1 0.8s linear 0s infinite alternate;animation-play-state: paused; }
.section1 .inner .grid1 .flex1 .t2023 .btn-form.running::after{animation-play-state: running;}

.section1 .inner .grid1 .flex1 .headline{position: absolute;right: 0;top:0;width:calc(627 / 1920 * 100vw);height:98%; }
.section1 .inner .grid1 .flex1 .headline img{height: 100%;width: 98%;position: absolute;left: 0;top: 0; object-position:center top;object-fit: contain;}
.section1 .inner .grid1 .flex2 .game{position: absolute;right: 0;top:0;width:calc(713 / 1920 * 100vw); height:98%; left:50%;top:50%;transform: translate(-50%,-50%);cursor: pointer; }
.section1 .inner .grid1 .flex2 .game .bg{height: 100%;width: 100%;position: absolute;left: 0;top: 0; object-position:center;object-fit: contain;}
.section1 .inner .grid1 .flex2 .game .cont{position: absolute; width:calc(565 / 1920 * 100vw);height: calc(62 / 1920 * 100vw);left: calc(50% - 3 / 1920 * 100vw);top:calc(50% + 90 / 1920 * 100vw);transform: translate(-50%,-50%);overflow: hidden; background: rgba(0,0,0,0); }
.section1 .inner .grid1 .flex2 .game .cont .captain{width: 500%;height: 100%; position: absolute;left:0;top:0;display: flex;justify-content: flex-start;align-items: center;animation: animText 12s linear 0s infinite normal;animation-play-state: paused;}
.section1 .inner .grid1 .flex2 .game .cont .captain.running{animation-play-state: running;}
.section1 .inner .grid1 .flex2 .game .cont .captain img{width:calc(1750 / 1920 * 100vw);height: calc(33 / 1920 * 100vw); }
.section1 .inner .grid1 .flex2 .game .enter{position: absolute; width:calc(100 / 1920 * 100vw);height: calc(100 / 1920 * 100vw);left:calc(100% - 76 / 1920 * 100vw);top:calc(50% + 125 / 1920 * 100vw); }
.section1 .inner .grid1 .flex2 .game .enter .span1{ position: absolute;width:100%;height:100%; left: 0;top: 0; background: url(w1-enter2.png) no-repeat center;background-size: 100%;animation: animEnter2 1s linear 0.5s infinite normal;}
.section1 .inner .grid1 .flex2 .game .enter .span2{ position: absolute;width:100%;height:100%; left: 50%;top: 50%;transform: translate(-50%,-50%); background: url(w1-enter.png) no-repeat center;background-size: 50%; }


.section1 .inner .grid2 .flex1 .media{position: absolute;height: 100%;width: 100%;left: 50%;top:50%;transform: translate(-50%,-50%); overflow: hidden;display: flex;justify-content: center;align-items: center;cursor: pointer;background: url(1/1.png) no-repeat center / contain; background-size: 100% auto;}
.section1 .inner .grid2 .flex1 .media canvas{width: 100%;height: auto;}
.section1 .inner .grid2 .flex1 .media .icon-play{position: absolute;left:50%;top:50%;transform: translate(-50%,-50%); width:20%;height: 0;padding-top:20%;background: url(w-play.png) no-repeat center;background-size: contain;}
.section1 .inner .grid2 .flex2 .wrap{position: absolute;height: 100%;width: 100%;left:0;top:0;overflow: hidden;background: #ffb846;}
.section1 .inner .grid2 .flex2 .wrap .coming{position: absolute;height: 100%;width: 100%;left: 50%;top:50%;transform: translate(-50%,-50%); overflow: hidden;display: flex;justify-content: center;align-items: center; background: url(3/1.png) no-repeat center / contain;}
.section1 .inner .grid2 .flex2 .wrap .coming canvas{height: 100%;width: 100%;position: absolute;left: 0;top: 0; object-position:center;object-fit: contain;}
.section1 .inner .grid2 .flex2 .wrapR1{display: ;}
.section1 .inner .grid2 .flex2 .wrap .cross{}
.section1 .inner .grid2 .flex2 .wrap .cross .rows{position: absolute;left:-100%;top: -90%; width:300%;height:300%;transform: rotate(-45deg);transform-origin: center; }
.section1 .inner .grid2 .flex2 .wrap .cross .rows .row{position: relative; width:100%;height:calc(51 / 1500 * 100vh);margin-bottom:0.5%; }
.section1 .inner .grid2 .flex2 .wrap .cross .rows .row span{position: absolute;top: 0;left:0;height: 100%; background-repeat: repeat-x; background-size:auto;display: block;background-size:contain;background-position: left center;}
.section1 .inner .grid2 .flex2 .wrap .cross .rows .row:nth-child(even) span{left:auto;right:0;}
.section1 .inner .grid2 .flex2 .wrap .cross .rows .r1 span{background-image: url('w-r1.png');width:calc(262 / 1500 * 100vh * 7);animation: animCros1 2s linear 0s infinite normal;}
.section1 .inner .grid2 .flex2 .wrap .cross .rows .r2 span{background-image: url('w-r2.png');width:calc(430 / 1500 * 100vh * 7);animation: animCros2 4s linear 0s infinite normal;}
.section1 .inner .grid2 .flex2 .wrap .cross .rows .r3 span{background-image: url('w-r3.png');width:calc(772 / 1500 * 100vh * 7);animation: animCros3 6s linear 0s infinite normal;}
.section1 .inner .grid2 .flex2 .wrap .cross .rows .r4 span{background-image: url('w-r4.png');width:calc(906 / 1500 * 100vh * 7);animation: animCros4 9s linear 0s infinite normal;}
.section1 .inner .grid2 .flex2 .wrap .cross .rows .r5 span{background-image: url('w-r5.png');width:calc(2720 / 1500 * 100vh * 5);animation: animCros5 24s linear 0s infinite normal;}
.section1 .inner .grid2 .flex2 .wrap .cross .rows .r6 span{background-image: url('w-r6.png');width:calc(1370 / 1500 * 100vh * 5);animation: animCros6 9s linear 0s infinite normal;}
.section1 .inner .grid2 .flex2 .wrap .cross .rows .r7 span{background-image: url('w-r7.png');width:calc(1392 / 1500 * 100vh * 5);animation: animCros7 9s linear 0s infinite normal;}
.section1 .inner .grid2 .flex2 .wrap .cross .rows .r8 span{background-image: url('w-r8.png');width:calc(1230 / 1500 * 100vh * 5);animation: animCros8 9s linear 0s infinite normal;}
.section1 .inner .grid2 .flex2 .wrap .cross .rows .r9 span{background-image: url('w-r9.png');width:calc(1808 / 1500 * 100vh * 5);animation: animCros9 11s linear 0s infinite normal;}
.section1 .inner .grid2 .flex2 .wrap .cross .rows .r10 span{background-image: url('w-r10.png');width:calc(1908 / 1500 * 100vh * 5);animation: animCros10 12s linear 0s infinite normal;}
.section1 .inner .grid2 .flex2 .wrap .cross .rows .r11 span{background-image: url('w-r11.png');width:calc(1930 / 1500 * 100vh * 5);animation: animCros11 12s linear 0s infinite normal;}
.section1 .inner .grid2 .flex2 .wrap .cross .doller{position: absolute;left: 0;height: 100%;top: 0;width:20%;background:#C92027;background:#C92027 url(5/1.png) no-repeat center / contain;}
.section1 .inner .grid2 .flex2 .wrap .cross .doller canvas{position: absolute;left: 0;height: 100%;top: 0;width:100%;object-position:center;object-fit: contain; }
.section1 .inner .grid2 .flex2 .wrap .cross .cont{position: absolute;left: 20%;top: 0;width:80%;height:100%; }
.section1 .inner .grid2 .flex2 .wrap .cross .cont .contin{position: absolute;left: 50%;top: 50%; width:calc(480 / 1920 * 100vw);height:calc(270 / 1920 * 100vw); transform: translate(-50%,-50%); }
.section1 .inner .grid2 .flex2 .wrap .cross .cont .bgc{position: absolute; width:100%;height:100%; left:50%;top:50%;transform: translate(-50%,-55%);background: #000;}
.section1 .inner .grid2 .flex2 .wrap .cross .cont .media{position: absolute; width:100%;height:100%;left:50%;top:50%;transform: translate(-45%,-45%); display: flex;justify-content: center;align-items: center;overflow: hidden;cursor: pointer;background: url(4/1.jpg) no-repeat center / contain;}
.section1 .inner .grid2 .flex2 .wrap .cross .cont .media canvas{width: 100%;height: auto;}
.section1 .inner .grid2 .flex2 .wrap .cross .cont .media .icon-play{position: absolute;left:50%;top:50%;transform: translate(-50%,-50%); width:20%;height: 0;padding-top:20%;background: url(w-play.png) no-repeat center;background-size: contain;filter: drop-shadow(1px 0 3px #ccc);}
.section1 .inner .grid3{}
.section1 .inner .grid3 .wrap .ripple{position: absolute;width:100%;height:100%; left: 0;top: 0;display: flex;justify-content: center;align-items: center;overflow: hidden; background: url(2/1.png) no-repeat center / contain;}
.section1 .inner .grid3 .wrap .ripple canvas{ height: 100%;width: 100%;position: absolute;left: 0;top: 0; object-position:center;object-fit: contain;} 

.section2{display: none;}
.section2 .inner .content{position: absolute; left:50%;top:50%;transform: translate(-50%,-50%);width:calc(1009 / 1920 * 100vw);height:calc(948 / 1920 * 100vw); overflow: hidden;}
.section2 .inner .content .fclose{position: absolute;right: 2%;top: 1.5%; height:calc(36 / 1920 * 100vw);width:calc(36 / 1920 * 100vw); min-width: 20px;min-height: 20px; background:url(w2-fclose.png) no-repeat center / contain;cursor: pointer;}
.section2 .inner .content .wrapForm{position: absolute;left: 5%;top: 30%; height:68%;width:50%;min-width: 200px; overflow-y: auto;padding-right: 5px;box-sizing: content-box; }
.section2 .inner .content .wrapForm iframe{ width:100%; height:500px; }

.section3{display: none;}
.section3 .inner .tsclose{position: absolute;right: 2%;top: 1.5%; height:calc(60 / 1920 * 100vw);width:calc(60 / 1920 * 100vw); min-width: 35px;min-height: 35px; background:url(w-close.png) no-repeat center / contain;z-index: 2;cursor: pointer;}
.section3 .inner .head{position: relative;width: 100%; display: flex;justify-content: center; background: #ff043a;}
.section3 .inner .head img{width: auto;height: calc(115 / 1920 * 100vw);display: block;margin: calc(15 / 1920 * 100vw) auto; }
.section3 .inner .captain{position: relative; width: 100%;height:calc(50 / 1920 * 100vw);background:url(w3-tbg.png) no-repeat center / cover;}
.section3 .inner .captain .wrap{position: absolute; width: 100%;height: 90%; top:5%; left:0; border: 1px solid #8bffff;box-sizing: border-box;overflow: hidden;}
.section3 .inner .captain .wrap .text{width: 500%;height: 100%; position: absolute;left:0;top:0;display: flex;justify-content: flex-start;align-items: center;animation: animText 15s linear 0s infinite normal;}
.section3 .inner .captain .wrap .text img{width: calc(1750 / 1920 * 100vw);height: calc(33 / 1920 * 100vw); }
.section3 .inner .content{position: relative;width: 100%;height: calc(100vh - (140 + 50) / 1920 * 100vw );}
.section3 .inner .content .wrap{position: relative;width: 100%;height: 100%;display: flex;flex-direction: row;}
.section3 .inner .content .wrap .flex{position: relative;width: 100%;height: 100%;}
.section3 .inner .content .wrap .flex1{background: #fee9d6;box-sizing: border-box;border-right: 1px solid #3765d5;}
.section3 .inner .content .wrap .flex1 .title{position: relative; width:100%;height:calc(76 / 1920 * 100vw);text-align: center; background:#3765d5; }
.section3 .inner .content .wrap .flex1 .title img{width: 100%;height: 100%;position: absolute;left: 0;top: 0; object-position:center;object-fit: contain;transition: all 0.2s;display: block;}
.section3 .inner .content .wrap .flex1 .title img.tEN{display: none;}
.section3 .inner .content .wrap .flex1 .title .btn-itrans{width:calc(90 / 1920 * 100vw);height: 100%;position: absolute;left:50%;top: 0; transform: translateX(-50%);background: url(w3-itrans.png) no-repeat center / contain;cursor: pointer;}
.section3 .inner .content .wrap .flex1 .area{position: relative; width: 100%;height:calc(100% - 76 / 1920 * 100vw);display: flex;flex-direction: column;}
.section3 .inner .content .wrap .flex1 .area .group{width:80%;height: 45%;margin:0 auto;box-sizing: border-box;padding:3% 0;}
.section3 .inner .content .wrap .flex1 .area .group textarea{display:block;width: 100%;height: 100%;font-family: "MF-Regular"!important;font-size: 3rem;line-height: 1.2; color:#000;caret-color:#000;resize:none;overflow: hidden;overflow-y: auto;}
.section3 .inner .content .wrap .flex1 .area .group #inputEN{display: none;font-size: 2rem; font-family: "BMW-TNL-Bold"!important; }  
.section3 .inner .content .wrap .flex1 .area .group .transResult{display:block; width: 100%;height: 100%; font-family: "BMW-TNL-Bold"!important;font-size: 2rem;line-height: 1.2; color:#000;caret-color:#000;resize:none;overflow-y: auto;text-transform: uppercase; overflow-wrap: break-word;}
.section3 .inner .content .wrap .flex1 .area .group .resZH{ display: none;font-family: "MF-Regular"!important;font-size: 3rem;} 
.section3 .flex1 .transLoading{display:none; width: 100%;height: 100%;position: absolute;left: 0;top: 0;background:rgba(0,0,0,0.5);}
.section3 .flex1 .transLoading::after{ content: "";position: absolute; width:30px;height: 30px;left:calc(50% - 15px);top:45%; background:url(w-load.png) no-repeat center / contain;animation: animLoad 2s linear 0s infinite normal;}
.section3 .inner .content .wrap .flex1 .area.transFlagEN .group #inputZH{ display: none;}
.section3 .inner .content .wrap .flex1 .area.transFlagEN .group #inputEN{ display: block;}
.section3 .inner .content .wrap .flex1 .area.transFlagEN .group .resEN{ display: none;} 
.section3 .inner .content .wrap .flex1 .area.transFlagEN .group .resZH{ display: block;} 
.section3 .inner .content .wrap .flex1 .area .center{width:100%;height: 10%;display: flex;justify-content: center; align-items: center; background: url(w3-t2023.png) no-repeat center / contain;}
.section3 .inner .content .wrap .flex1 .area .center .btn-trans{ width: 26%;height: 100%; background: url(w3-btnTrans.png) no-repeat center / contain;cursor: pointer; }
.section3 .inner .content .wrap .flex2{background: #ffe6ea;position: relative;overflow: hidden;}
.section3 .inner .content .wrap .flex2 .rabbit{position: relative;width:100%;height:100%;overflow: hidden;background: url(w3-rabbitBg.png) no-repeat center / cover;} 
.section3 .inner .content .wrap .flex2 .rabbit .rtbg{position: absolute; height:calc(810 / 1920 * 100vw);width:calc(660 / 1920 * 100vw);left: 50%; bottom: 0;transform: translateX(-50%); background:url(w3-rabbit.png) no-repeat center bottom / contain;}
.section3 .inner .content .wrap .flex2 .rabbit .rtbg .btn-poster{position: absolute; width: 42%;height: calc(79 / 1920 * 100vw);left:29%; bottom:calc(474 / 1920 * 100vw);background: url(w3-btnPoster.png) no-repeat center / contain;cursor: pointer; }
.section3 .inner .content .wrap .flex2 .rabbit .rtbg .btn-poster.running{animation: animBtn2 0.3s linear 0s 6 alternate; }
.section3 .inner .content .wrap .flex2 .rabbit .rtbg .disclaimer{position: absolute;width:80%; left: 5%; bottom:2vh;font-size: 12px;color:#fff;text-shadow:0px 1px 10px #000, 0px 1px 8px #000;}
.section3 .inner .content .wrap .flex2 .posterResult{ position: absolute;width:100%;height:100%;left: -100%;top:0; background: rgba(0,0,0,0.7);transition: opacity 0.25s;}
.section3 .inner .content .wrap .flex2 .posterResult .resultWrap{ position: absolute;width:100%;height:100%;left:0;top:0;}
.section3 .inner .content .wrap .flex2 .posterResult .maskLoad{position: absolute; width:30px;height: 30px;left:calc(50% - 15px);top:45%; background:url(w-load.png) no-repeat center / contain;animation: animLoad 2s linear 0s infinite normal;}

.section3 .inner .content .alertMsg{display: none; position: absolute; width: 100%;height: 100%;left:0; top:0;overflow: hidden;background:rgba(0,0,0,0.7);}
.section3 .inner .content .alertMsg span{width: 60%;font-size: 1.2rem; position: absolute; left:15%; top:48%;color:#fff;background:#C92027; border-radius: 5px;padding:3%;text-align: center;}
.section3 .inner .content .alertMsg .msgclose{position: absolute;right: 15%;top: calc(45% - calc(40 / 1920 * 100vw) ); height:calc(40 / 1920 * 100vw);min-width: 24px;min-height:24px;width:calc(40 / 1920 * 100vw); background:url(w-close.png) no-repeat center / contain;cursor: pointer;}


/* .section3 .inner .content .wrap .flex2 .posterResult .poster{position: absolute; width: calc(356 / 1920 * 100vw);height: calc(712 / 1920 * 100vw);left:-110%; top:0;overflow: hidden;} */
.section3 .inner .content .wrap .flex2 .posterResult .poster{position: absolute; width: 375px;height:665px;left: -100%; top:0;overflow: hidden;}
.section3 .inner .content .wrap .flex2 .posterResult .poster img{position:absolute; width:100%; height:auto;top:50%;left:0; transform: translateY(-50%);display: block;}
.section3 .inner .content .wrap .flex2 .posterResult .poster .ps-zh{font-family: "MF-Regular"!important;font-size: 38px;line-height: 1.2; color:#000;}
.section3 .inner .content .wrap .flex2 .posterResult .poster .ps-en{font-family: "BMW-TNL-Bold"!important;font-size: 22px;line-height: 1.2; color:#000;text-transform: uppercase;overflow-wrap: break-word;}
.section3 .inner .content .wrap .flex2 .posterResult .poster1{background-color:#FDE9D5;display: ;}
.section3 .inner .content .wrap .flex2 .posterResult .poster1 .ps-zh{position: absolute; width:36%;height: auto;left:5%;top:calc(50% - 38px * 1.2 / 2);color:#4E281D;  }
.section3 .inner .content .wrap .flex2 .posterResult .poster1 .ps-en{position: absolute; width:36%; height: calc( 22px * 1.2 * 2);left:60%;top:calc(50% - 22px * 1.2 );color:#4E281D;display: flex; justify-content: flex-end; align-items: center;}
.section3 .inner .content .wrap .flex2 .posterResult .poster2{background-color:#2920C9 ;display: ;}
.section3 .inner .content .wrap .flex2 .posterResult .poster2 .ps-zh{position: absolute; width:58%;height: auto;left:16%;top:32px;color:#fff;  }
.section3 .inner .content .wrap .flex2 .posterResult .poster2 .ps-en{position: absolute; width:58%;height: auto;max-height: calc( 22px * 1.2 * 2);overflow-y: hidden; right:16%;top:598px;color:#fff; text-align: right; }
.section3 .inner .content .wrap .flex2 .posterResult .poster3{background-color:#FFE6EA ;display: ;}
.section3 .inner .content .wrap .flex2 .posterResult .poster3 .ps-zh{position: absolute; width:43%;height: auto;left:6%;top:62px;font-size: 38px; }
.section3 .inner .content .wrap .flex2 .posterResult .poster3 .ps-en{position: absolute; width:40%;height: auto;left:56%;max-height: calc( 20px * 1.2 * 7);overflow-y: hidden;top:470px; font-size: 20px;}
.section3 .inner .content .wrap .flex2 .posterResult .close{position: absolute;left: calc(50% - 50 / 1920 * 100vw / 2);bottom: calc(60 / 1920 * 100vw); height:calc(50 / 1920 * 100vw);width:calc(50 / 1920 * 100vw); background: url(w-close.png) no-repeat center / contain;cursor: pointer;}
.section3 #canvasPosterImage{position: absolute;width: calc(356 / 1920 * 100vw);height: calc(631 / 1920 * 100vw);left:110%;left:50%;top:50%;transform: translate(-50%,-55%);}
.section3 #canvasPosterImage .picDownload{display: none; position:absolute; width:100%;height:100%;left:0;top:0;background: rgba(255,255,255,0.5); }
.section3 #canvasPosterImage .picDownload span{position:absolute; width:22%;height: 8%;left:39%;top: 46%;background: url(w-download.png) no-repeat center / contain;}
/* .section3 #canvasPosterImage:hover .picDownload{display: block;} */
/* .section3 #canvasPosterImage .transPic{position:absolute; width:100%;height:100%;left:0;top:0; perspective:500px; } */
.section3 #canvasPosterImage .pic{position:absolute; width:100%;height:100%;left:0;top:0; transform-style: preserve-3d;background: transparent;}
.section3 #canvasPosterImage .pic::before{content:""; position:absolute; width:100%;height:100%;left:0;top:0;background:unset; }
.section3 #canvasPosterImage .pic img{position:absolute; width:100%;height:100%;left:0;top:0;object-position:center;object-fit: contain;backface-visibility: hidden;}
 
.section5{display: none;background: rgba(0,0,0,0.5);} 
.section5 .vclose{position: absolute;right: 3%;top: 1%; height:calc(50 / 1500 * 100vh);width:calc(50 / 1500 * 100vh); background:rgba(0,0,0,0.5) url(w2-fclose.png) no-repeat center / contain;cursor: pointer;}
.section5 video{position: absolute;left: 50%;top: 50%; height:calc(600 / 1920 * 100vw);width:auto;transform: translate(-50%,-50%);}

.section6{display: none;background: rgba(0,0,0,0.5);} 
.section6 .vclose{position: absolute;right: 3%;top: 1%; height:calc(50 / 1500 * 100vh);width:calc(50 / 1500 * 100vh); background:rgba(0,0,0,0.5) url(w2-fclose.png) no-repeat center / contain;cursor: pointer;}
.section6 video{position: absolute;left: 50%;top: 50%; height:calc(600 / 1920 * 100vw);width:auto;transform: translate(-50%,-50%);}

.resizeHeight .section .inner{height: 80vh; }
.resizeHeight .section2 .inner .content{width: 80%;height: auto;} 
.resizeHeight .section3 .inner .content{ height: calc(100% - (140 + 50) / 1920 * 100vw );} 
.resizeHeight .section3 .inner .content .wrap .flex2 .rabbit .rtbg{bottom:50%;transform: translate(-50%,50%)}
.resizeHeight .section3 #canvasPosterImage{width: calc(356 / 1920 * 200vw);height: calc(631 / 1920 * 200vw);}
.resizeHeight .section3 .inner .content .wrap .flex2 .posterResult .close{left: calc(50% - 50 / 1920 * 200vw / 2);bottom: calc(30 / 1920 * 200vw); height:calc(50 / 1920 * 200vw);width:calc(50 / 1920 * 200vw);}
.resizeHeight .section5 video{height:auto;width: 100vw;}

.resizeWidth2 .section .inner{width: 200vh; } 
.resizeWidth2 .section1 .inner .grid1 .flex1 .t2023{width:calc(110 / 1920 * 200vh);}
.resizeWidth2 .section1 .inner .grid1 .flex1 .headline{ width:calc(627 / 1920 * 200vh);}
.resizeWidth2 .section1 .inner .grid1 .flex2 .game{width: calc(713 / 1920 * 190vh); }
.resizeWidth2 .section1 .inner .grid1 .flex2 .game .cont{width:calc(565 / 1920 * 190vh);height: calc(100 / 1920 * 100vh);top:calc(50% + 165 / 1920 * 100vh);}
.resizeWidth2 .section1 .inner .grid1 .flex2 .game .cont .captain img{width: calc(1750 / 1920 * 200vh); height: calc(33 / 1920 * 200vh);}
.resizeWidth2 .section1 .inner .grid1 .flex2 .game .enter{width:calc(100 / 1920 * 200vh);height: calc(100 / 1920 * 200vh);left:calc(50% + 250 / 1920 * 200vh);top:auto;bottom:calc(-20 / 1920 * 200vh);}
.resizeWidth2 .section1 .inner .grid2 .flex2 .wrap .cross .cont .contin{width:calc(480 / 1920 * 200vh);height:calc(270 / 1920 * 200vh);}
.resizeWidth2 .section2 .inner .content{width: auto;height: 80%;}
.resizeWidth2 .section2 .inner .content .wrapForm{top: 33%; height: 65%;}
.resizeWidth2 .section3 .inner .head img{ height: calc(115 / 1920 * 200vh);margin: calc(15 / 1920 * 200vh) auto;}
.resizeWidth2 .section3 .inner .content{height: calc(100vh - (140 + 50) / 1920 * 200vh );}
.resizeWidth2 .section3 .inner .content .wrap .flex1 .title{height: calc(76 / 1920 * 200vh);}
.resizeWidth2 .section3 .inner .content .wrap .flex1 .area{height:calc(100% - 76 / 1920 * 200vh);}
.resizeWidth2 .section3 .inner .content .wrap .flex2 .rabbit .rtbg{height:calc(810 / 1920 * 188vh);width:calc(660 / 1920 * 188vh);}
.resizeWidth2 .section3 .inner .content .wrap .flex2 .rabbit .rtbg .btn-poster{height: calc(79 / 1920 * 188vh);bottom:calc(474 / 1920 * 188vh);}
.resizeWidth2 .section3 #canvasPosterImage{width: calc(356 / 1920 * 188vh);height: calc(631 / 1920 * 188vh);}
.resizeWidth2 .section3 .inner .content .wrap .flex2 .posterResult .close{left: calc(50% - 50 / 1920 * 188vh / 2);bottom: calc(30 / 1920 * 188vh); height:calc(50 / 1920 * 188vh);width:calc(50 / 1920 * 188vh);}
.resizeWidth2 .section5 video{height:90vh;}
@media only screen and (max-width: 768px){
    .section1 .inner{padding-top:80px;}
}
/*========================================================================================== */

@keyframes animLoad {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}
@keyframes animBtn1 { 
    10% {
      transform: rotate(20deg);
    }
    20% {
      transform: rotate(-15deg);
    }
    30% {
      transform: rotate(10deg);
    }
    40% {
      transform: rotate(-10deg);
    }
    60%,
    100% {
      transform: rotate(0deg);
    } 
}
@keyframes animBtn2 { 
    0% {
      transform: scale(1);
    }
    /* 10% {
      transform: rotate(15deg)  scale(1.1);
    }
    20% {
      transform: rotate(-10deg);
    }
    30% {
      transform: rotate(5deg);
    }
    40% {
      transform: rotate(-5deg);
    }
    50%{
      transform: rotate(0deg);
    }   */
    100% {
      transform: rotate(0deg) scale(1.1);
    } 
}
@keyframes animEnter2 {
  from { transform: scale(0.5);opacity:0.9; }
  to { transform: scale(1);opacity: 0.05; }
} 
@keyframes animText {
    from { left: 0; }
    to { left: calc(( 1750 / 1920 * 100vw) * (-1)); } 
} 
@keyframes animText2 {
    from { left: 0; }
    to { left: 0; } 
} 
@keyframes animWave {
    from { top: 0%; }
    to { top: calc(-911 / 1500 * 100vh); }
}
@keyframes animCros1 {
    from { left: 0; }
    to { left: calc(-262 / 1500 * 100vh); }
}
@keyframes animCros3 {
    from { left: 0; }
    to { left: calc(-772 / 1500 * 100vh); }
}
@keyframes animCros5 {
    from { left: 0; }
    to { left: calc(-2720 / 1500 * 100vh); }
}
@keyframes animCros7 {
    from { left: 0; }
    to { left: calc(-1392 / 1500 * 100vh); }
}
@keyframes animCros9 {
    from { left: 0; }
    to { left: calc(-1808 / 1500 * 100vh); }
}
@keyframes animCros11 {
    from { left: 0; }
    to { left: calc(-1930 / 1500 * 100vh); }
}
@keyframes animCros2 {
    from { right: 0; }
    to { right: calc(-430 / 1500 * 100vh); }
}
@keyframes animCros4 {
    from { right: 0; }
    to { right: calc(-906 / 1500 * 100vh); }
}
@keyframes animCros6 {
    from { right: 0; }
    to { right: calc(-1370 / 1500 * 100vh); }
}
@keyframes animCros8 {
    from { right: 0; }
    to { right: calc(-1230 / 1500 * 100vh); }
}
@keyframes animCros10 {
    from { right: 0; }
    to { right: calc(-1908 / 1500 * 100vh); }
}