@charset "utf-8";
@import url('gen-mca.css');
:root{
  --card-height-1: 70vh;
  --card-height-2: 61vh;
  --card-height-3: 50.2vh;
  --card-width-1: 32.5vw;
  --card-width-2: 39.7vw;
  --chip-dur: 1s;
  --dice-dur: .7s;
  --num-dur: 4.76s;
  --num-switch: 4.56s;
  --explosion-radius: 180px;
  --chip: url(../images/chip.svg);
  --rei-cover: url(../images/img_rei-cover.svg);
  --chip-img: url(../images/img_chip.svg);
  --pink-quest-img: url(../images/img_pink_quest.svg);
  --orange-quest-img: url(../images/img_orange_quest.svg);
  --blue-quest-img: url(../images/img_blue_quest.svg);
  --bulb-img: url(../images/img_bulb.svg);
  --lemon-img: url(../images/img_lemon.svg);
  --bell-img: url(../images/img_bell.svg);
  --diamond-img: url(../images/img_diamond.svg);
  --bill-2: url(../images/mca-money-2.svg);
  --bill-3: url(../images/mca-money-3.svg);
  --bill-4: url(../images/mca-money-4.svg);
  --bill-5: url(../images/mca-money-5.svg);
  --bill-6: url(../images/mca-money-6.svg);
  --bill-7: url(../images/mca-money-7.svg);
}
@property --tx { syntax: "<length-percentage>"; inherits: false; initial-value: 0vw;}
@property --orgx { syntax: "<length-percentage>"; inherits: false; initial-value: 0vw;}
@property --ty { syntax: "<length-percentage>"; inherits: false; initial-value: 0vh;}
@property --orgy { syntax: "<length-percentage>"; inherits: false; initial-value: 0vh;}
@property --jump { syntax: "<length-percentage>"; inherits: false; initial-value: 0vh;}
@property --jump1 { syntax: "<length-percentage>"; inherits: false; initial-value: 0vh;}
@property --jump2 { syntax: "<length-percentage>"; inherits: false; initial-value: 0vh;}
@property --jump3 { syntax: "<length-percentage>"; inherits: false; initial-value: 0vh;}
@property --r { syntax: "<angle>"; inherits: false; initial-value: 0deg;}
@property --orgrot { syntax: "<angle>"; inherits: false; initial-value: 0deg;}
@property --r1 { syntax: "<angle>"; inherits: false; initial-value: 0deg;}
@property --r2 { syntax: "<angle>"; inherits: false; initial-value: 0deg;}
@property --r3 { syntax: "<angle>"; inherits: false; initial-value: 0deg;}
@property --start-scale { syntax: "<number>"; inherits: false; initial-value: 0;}
@property --x { syntax: "<length-percentage>"; inherits: false; initial-value: 0px;}
@property --x1 { syntax: "<length-percentage>"; inherits: false; initial-value: 0px;}
@property --x2 { syntax: "<length-percentage>"; inherits: false; initial-value: 0px;}
@property --x3 { syntax: "<length-percentage>"; inherits: false; initial-value: 0px;}
@property --y { syntax: "<length-percentage>"; inherits: false; initial-value: 0px;}
@property --y1 { syntax: "<length-percentage>"; inherits: false; initial-value: 0px;}
@property --y2 { syntax: "<length-percentage>"; inherits: false; initial-value: 0px;}
@property --y3 { syntax: "<length-percentage>"; inherits: false; initial-value: 0px;}
/*============= SVG =============*/
.car, .train, .question, .police, .jail, .hands, .tap, .diceBg, .bulb, .ring, .chest, .arrow{--r: 0deg; --tx: 0vw; --ty: 0vh; --s: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(var(--s));}
.question.nr-7{--r: -172deg; --r1: -177deg; --r2: -169.5deg; --r3: -174.5deg;}
.diceBg.nr-3{--r: -143deg;}
.hands.nr-2{--r: -137deg;}
.ring.nr-1{--r: -128deg;}
.ring.nr-4{--r: -118deg;}
.car.nr-8{--r: -115deg;}
.car.nr-7, .train.nr-3, .question.nr-3, .jail.nr-3, .chest.nr-7, .chest.nr-6, .arrow.nr-6, .arrow.nr-5{--r: -90deg;}
.question.nr-6{--r: -80deg; --r1: -85deg; --r2: -77.5deg; --r3: -82.5deg;}
.car.nr-3{--r: -75deg;}
.ring.nr-3{--r: -68deg;}
.tap.nr-3{--r: -40deg;}
.bulb.nr-3{--r: -30deg;}
.ring.nr-5{--r: 48deg;}
.bulb.nr-4{--r: 68deg;}
.diceBg.nr-5{--r: 75deg;}
.tap.nr-2{--r: 82deg;}
.chest.nr-5{--r: 83deg;}
.car.nr-6, .car.nr-4, .train.nr-1, .question.nr-4, .hands.nr-6, .hands.nr-4, .hands.nr-3, .chest.nr-3, .chest.nr-2, .arrow.nr-10, .arrow.nr-7, .arrow.nr-2{--r: 90deg;}
.question.nr-5{--r: 102deg; --r1: 97deg; --r2: 104.5deg; --r3: 99.5deg;}
.question.nr-3{--r1: -95deg; --r2: -87.5deg; --r3: -92.5deg;}
.question.nr-4{--r1: 85deg; --r2: 92.5deg; --r3: 87.5deg;}
.question.nr-2{--r: 100deg; --r1: 95deg; --r2: 102.5deg; --r3: 97.5deg;}
.chest.nr-4{--r: 109deg;}
.ring.nr-2{--r: 170deg;}
.diceBg.nr-2{--r: 171deg;}
.diceBg.nr-4{--r: 174deg;}
.tap.nr-4{--r: 176deg;}
.car.nr-2, .car.nr-9, .train.nr-5, .train.nr-4, .police.nr-4, .police.nr-3, .police.nr-2, .jail.nr-2, .jail.nr-1, .hands.nr-7, .arrow.nr-3, .arrow.nr-1{--r: 180deg;}
/*============= grid area naming =============*/
.sources{grid-area: sources;}
/*============= css =============*/
html, body, body * {margin: 0;padding: 0;}
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
body{ background: var(--primary-colour-green); font-family: var(--fontFamilies-brand), sans-serif; color: black; text-align: center;}
body *{transition: all .3s ease-in-out;}
/*#cards-container, #first-design, #second-design{overflow-x: clip;}*/
svg, svg *{transform-box: fill-box;}
g, rect, polygon, path, div{animation-timing-function: ease-in-out;}
g, rect, polygon, path{ animation-iteration-count: infinite;}
ul{list-style-position: inside; list-style: none; margin-left: 0; padding-left: 0;}
li {padding-left: 1ch;}
li:nth-of-type(1)::before {content: "♦"; padding-right: 1ch;}
li:nth-of-type(2)::before {content: "♥"; padding-right: 1ch;}
li:nth-of-type(3)::before {content: "♣"; padding-right: 1ch;}
li:nth-of-type(4)::before {content: "♠"; padding-right: 1ch;}
u{position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; z-index: 3;}
u, .rei::before, .rei::after, #first-design > .static, #second-design > .static, #first-design > .static::after, #first-design > .static::before, #first-design > .border::after, #first-design > .border::before, #first-design > .description::after, #first-design > .description::before, #second-design > .static::after, #second-design > .static::before, #second-design > .border::after, #second-design > .border::before, #second-design > .description::after, #second-design > .description::before{background-repeat: no-repeat;}
u, #first-design > .static, #second-design > .static, #first-design > .static::after, #first-design > .static::before, #first-design > .border::after, #first-design > .border::before, #first-design > .description::after, #first-design > .description::before, #second-design > .static::after, #second-design > .static::before, #second-design > .border::after, #second-design > .border::before, #second-design > .description::after, #second-design > .description::before{background-size: contain;}
#def, #pattern-bg, #gradient-overlay, #title > .border, #cards-container, #cards, .dice, .chip, #first-design > .description, #second-design > .description{top: 0; left: 0;}
#def, #arrow-shaft-1, #arrow-shaft-2, #arrow-point, #cards-container, #text-intro, #title > .border, .dice, .chip, .rei::before, .rei::after, #digit::after, #first-design > .static::after, #first-design > .static::before, #first-design > .border::after, #first-design > .border::before, #first-design > .description::after, #first-design > .description::before, #second-design > .static::after, #second-design > .static::before, #second-design > .border::after, #second-design > .border::before, #second-design > .description::after, #second-design > .description::before, .poster, .car, .train, .question, .jail, .tap, .police, .hands, .diceBg, .bulb, .ring, .chest, .arrow{position: absolute;}
.dice, .chip, #first-design > .static::after, #first-design > .static::before, #first-design > .border::after, #first-design > .border::before, #first-design > .description::after, #first-design > .description::before, #second-design > .static::after, #second-design > .static::before, #second-design > .border::after, #second-design > .border::before, #second-design > .description::after, #second-design > .description::before{box-sizing: border-box;}
#title, #offer, #cards, #digit, .rei, #first-design, #second-design, .main-video{position: relative;}
#pattern-bg, #gradient-overlay{position: fixed;}
#def{width: 0; height: 0;}
#pattern-bg, #gradient-overlay, .border, #cards, #cards-container, #highlights{width: 100%;}
#pattern-bg, #gradient-overlay, #cards, #cards-container{height: 100%;}
#pattern-bg, .rei::before, .rei::after, #digit::after, #first-design > .static::after, #first-design > .static::before, #first-design > .border::after, #first-design > .border::before, #first-design > .description::after, #first-design > .description::before, #second-design > .static::after, #second-design > .static::before, #second-design > .border::after, #second-design > .border::before, #second-design > .description::after, #second-design > .description::before, .poster{inset: 0;}
#pattern-bg{mix-blend-mode: multiply; pointer-events: none; z-index: -999;}
#gradient-overlay{background: var(--overlay-gradient); z-index: -998;}
#title, #introduction, #first-design, #second-design, .highlight, .border, .card-container, #highlights, #offer, .offer-ani-part, #first-design, #second-design, #end-videos, .main-video{display: flex;}
.dice, #cards, #offer-part, .rei::before, .rei::after, #digit::after, .poster{display: grid;}
.dice, #cards, .rei::before, .rei::after, #digit::after, .poster{place-items: center;}
.dice, #cards{place-content: center;}
#title, #introduction, #first-design, #second-design, .card-container, #highlights, .highlight, #offer, .offer-ani-part, .main-video{justify-content: center; align-items: center;}
.card, #first-design > .static::after, #first-design > .static::before, #first-design > .border::after, #first-design > .border::before, #first-design > .description::after, #first-design > .description::before, #second-design > .static::after, #second-design > .static::before, #second-design > .border::after, #second-design > .border::before, #second-design > .description::after, #second-design > .description::before, video{display: block;}
.fill-primary-green{fill: var(--primary-colour-green);}
.fill-secondary-blue{fill: var(--secondary-colour-blue);}
.fill-secondary-green{fill: var(--secondary-colour-green);}
.fill-secondary-orange{fill: var(--secondary-colour-orange);}
.fill-primary-red{fill: var(--primary-colour-red);}
.fill-secondary-yellow{fill: var(--secondary-colour-yellow);}
.fill-secondary-pink{fill: var(--secondary-colour-pink);}
.fill-secondary-teal{fill: var(--secondary-colour-teal);}
.fill-additional-brown{fill: var(--additional-colour-brown);}
.fill-white{fill: white;}
.fill-black{fill: black;}
.fill-primary-navy{fill: var(--primary-colour-navy);}
.front{background-color: white}
.card-back-main{background-color: var(--primary-colour-navy);}
.card{width: auto; height: auto; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.opacity-50, .bg-icon{opacity: .5;}
.opacity-80{opacity: .8;}
.border{height: 2vh; flex-wrap: nowrap; z-index: 99; background-image: var(--border-gradient);}
.top{--y: 34.3px;}
.btm{--y: -34.3px;}
.card-container{aspect-ratio: 7/11; --orgx: 0vw; --orgy: 0vh; --orgrot: 0deg;}
.dice, .chip, #offer::after{filter: drop-shadow(0 3px 8px rgba(0,0,0,.24));}
.dice, .chip, #card-club, #card-spade, #card-diamond, #card-heart, #card-back{transform: translate(var(--tx, 0vw), var(--ty, 0vh)) rotate(var(--r, 0deg));}
#first-design > .static::after, #first-design > .static::before, #first-design > .border::after, #first-design > .border::before, #first-design > .description::after, #first-design > .description::before, #second-design > .static::after, #second-design > .static::before, #second-design > .border::after, #second-design > .border::before, #second-design > .description::after, #second-design > .description::before{transform: scale(0) translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--r, 0deg));}
.dice{aspect-ratio: 1 / 1; background-color: white; border-radius: 7%; --orgx: 0vw; --orgy: 0vh; --orgrot: -120deg; z-index: 95; width: var(--dice-width, 0vw);}

.point{aspect-ratio: 1; background-color: black; border-radius: 50%; width: calc(var(--dice-width) * .16);}
.chip{aspect-ratio: 1 / 1; --orgrot: -120deg; --orgx: 0vw; --orgy: 0vh; --delay: 0s; --start-scale: 4; z-index: 95; width: var(--chip-width, 0vw); background-image: var(--chip);}

#title, #introduction, #offer{flex-direction: column;}
.text{font-size: 3vh; line-height: 3vh;}
.origin-bottom{transform-origin: center bottom;}
.origin-top{transform-origin: center top;}
.origin-left{transform-origin: left center;}
.origin-left-top{transform-origin: left top;}
.origin-left-btm{transform-origin: left bottom;}
.origin-right{transform-origin: right center;}
.origin-centre, use{transform-origin: center center;}
.text-align-right{text-align: right;}
.overflow-visible{overflow: visible;}
.highlight{flex-direction: row;}
.highlight-icon{width: auto;}
.description{margin: 2vh 0;}
.sell-point, .sub-title {font-weight: 700;}
.sell-point{text-transform: uppercase;}
.sub-title{margin-bottom: .7vh;}
#title, #first-design, #second-design, #end-videos{height: 100vh;}
#introduction{min-height: 100vh;}
#arrow-shaft-1, #arrow-shaft-2, #arrow-point, #chest-top-1, #chest-top-2, #chest-top-3, #chest-top-4, #chest-top-5, #chest-top-6, #chest-top-7, #chest-back, #chest-sack-top, #chest-sack-top-outer, #chest-inside, .jail-bar-vertical, #jail-bar-top, #jail-bar-bottom, #car-main{animation-direction: alternate;}
#arrow-shaft-1, #arrow-shaft-2, #arrow-point{animation-duration: 1.5s;}
#arrow-shaft-1, #arrow-shaft-2{transform: scaleX(1);}
#arrow-shaft-1, #arrow-shaft-2{animation-name: arrow-shaft-ani;}
#arrow-point{transform: translateX(-86.5px);}
#arrow-point{animation-name: arrow-point-ani;}
#bulb-wires, .bulb-rays{animation-name: bulb-ani; animation-duration: 4s;}
#bulb-wires{opacity: 0;}
.bulb-rays, #dice-small{animation-direction: reverse;}
#dice-big, #dice-small{animation-duration: 4.5s; animation-name: dice-ani;}
.jail-bar-vertical, #jail-bar-top, #jail-bar-bottom{animation-duration: 1.5s;}
.jail-bar-vertical{animation-name: jail-bar-vertical-ani;}
#jail-bar-top{animation-name: jail-bar-top-ani;}
#jail-bar-bottom{animation-name: jail-bar-bottom-ani;}
#car-main{animation-duration: .5s;}
#car-main{animation-name: car-main-ani;}
.question{animation: question-ani var(--dur, 2s) cubic-bezier(.55,1.39,.51,-0.4) infinite both;}
#police, #police-hand, #police-horn{animation-duration: 1.5s;}
#police{animation-name: police-ani;}
#police-hand{animation-name: police-hand-ani;}
#police-horn{animation-name: police-horn-ani;}
#tap-headgear-1, #tap-headgear-2, #tap-headgear-3, #train-fume-1, #train-fume-2, #train-fume-3{animation: tap-headgear-ani .6s steps(1, end) infinite;}
#chest-top-1, #chest-top-2, #chest-top-3, #chest-top-4, #chest-top-5, #chest-top-6, #chest-top-7, #chest-back, #chest-sack-top, #chest-sack-top-outer, #chest-inside{animation-duration: .7s;}
#chest-top-1{animation-name: chest-top-1-ani;}
#chest-top-2{animation-name: chest-top-2-ani;}
#chest-top-3{animation-name: chest-top-3-ani;}
#chest-top-4{animation-name: chest-top-4-ani;}
#chest-top-5{animation-name: chest-top-5-ani;}
#chest-top-6{animation-name: chest-top-6-ani;}
#chest-top-7{animation-name: chest-top-7-ani;}
#chest-back{animation-name:chest-back-ani;}
#chest-sack-top{animation-name: chest-sack-top-ani;}
#chest-sack-top-outer{animation-name:chest-sack-top-outer-ani;}
#chest-inside{animation-name: chest-inside-ani;}
#hands-main-1, #hands-main-2{animation: hands-main-ani .4s steps(1, end) infinite;}
#ring-main-1, #ring-main-2, #ring-main-3, #ring-main-4, #ring-main-5, #ring-main-6, #ring-main-7, #ring-main-8, #ring-main-9, #ring-main-0 {animation: ring-main-ani 1s steps(1, end) infinite;}
#tap-headgear-1, #train-fume-1, #hands-main-1, #ring-main-1{animation-delay: 0s;}
#ring-main-2{animation-delay: .1s;}
#tap-headgear-2, #train-fume-2, #hands-main-2, #ring-main-3{animation-delay: .2s;}
#ring-main-4{animation-delay: .3s;}
#tap-headgear-3, #train-fume-3, #ring-main-5{animation-delay: .4s;}
#ring-main-6{animation-delay: .5s;}
#ring-main-7{animation-delay: .6s;}
#ring-main-8{animation-delay: .7s;}
#ring-main-9{animation-delay: .8s;}
#ring-main-0{animation-delay: .9s;}
#highlights{overflow: hidden;}

.card-container, .title-text, .half-text, #card-back, #card-back svg{will-change: transform, opacity;}
#cards > * {grid-area: 1 / 1; justify-self: center; align-self: center; z-index: 1;}
text{font-weight: 900; font-size: 49px; line-height: 49px;}
.title-text, .half-text{backface-visibility: hidden;}
.half-text{transform: translate(0px, 0px) scale(1.28); opacity: 0;}
.anim-ready .half-text{animation: card-back-ani .2s linear var(--delay-1, 0s) both, card-back-ani .2s linear var(--delay-2, 0s) reverse forwards;}
.anim-ready .card-back-ele{animation: appears .5s cubic-bezier(.34,1.56,.64,1) var(--delay, 0s) both;}
.anim-ready .dice{animation: move-rotate var(--dice-dur) ease-in-out  var(--delay, 0s) both;}
.anim-ready .chip{animation: scale-move-rotate-appear-ani .3s ease-in-out var(--delay) both;}
.anim-ready #cards{animation: scale-down-ani .5s cubic-bezier(.34,1.56,.64,1) var(--delay, 0s) both;}
.anim-ready .card-container{animation: move-rotate .9s cubic-bezier(.34,1.56,.64,1) var(--delay, 0s) both;}
.anim-ready .title-text{animation: letter-in .5s cubic-bezier(.34,1.56,.64,1) var(--delay-1, 0s) both, letter-out .5s cubic-bezier(.34,1.56,.64,1) var(--delay-2, 0s) forwards; transform: translate3d(0,0,0);}
.right-in{transform: translateX(100vw);}
.left-in{transform: translateX(-100vw);}
.zoom-in{transform: scale(0);}
#text-intro{--delay: 0s; width: 90vw; bottom: 5vh; min-height: 6vh; height: auto; z-index: -2; transform: translateY(100%); animation: slide-in-bottom 1s ease-in-out var(--delay) 1 normal both, num-appear 1s cubic-bezier(.34,1.56,.64,1) var(--delay) 1 normal both;}
#cards-container{z-index: 90;}
#card-back svg{z-index: 3;}
#dice-roll-1{--r: 14deg;}
#dice-roll-2{--r: 54deg; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; padding: calc(var(--dice-width) * .16); column-gap: 36%; row-gap: 10%;}
#chip-1{--r: 5deg; --orgx: 5vw; --orgy: 30vh;}
#chip-2{--r: 45deg; --orgx: 7vw; --orgy: 40vh;}
#introduction > .description{width: 90vw;}
#offer{margin: 5vh 0;}
#offer-part{--jump-1: -10vh; --jump-2: 5vh; --jump-3: -4vh;}
#offer p{font-weight: 900; color: white; text-shadow: 2px 2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, -2px -2px 0 #000, 2px 0px 0 #000, 0px 8px 0 #000, -2px 0px 0 #000, 0px -2px 0 #000;}
#offer-part > *{grid-area: 1 / 1;}
#digit, .rei{width: 1ch;}
#FS-text{--jump: 5vh; text-indent: 5vw; text-wrap: balance; max-inline-size: none;}
#num-counting{opacity: 1;}
#num-end, .left-in, .zoom-in, .right-in, .bottom-in, #text-intro {opacity: 0;}
.rei::before, .rei::after, #first-design > .static::after, #first-design > .static::before, #first-design > .border::after, #first-design > .border::before, #first-design > .description::after, #first-design > .description::before, #second-design > .static::after, #second-design > .static::before, #second-design > .border::after, #second-design > .border::before, #second-design > .description::after, #second-design > .description::before{content: "";}
#digit::after{content: "3"; }
.right-in.anim-in-view{animation: slide-in-right 1s ease-in-out both, num-appear 1s cubic-bezier(.34,1.56,.64,1) both;}
.left-in.anim-in-view{animation: slide-in-left 1s ease-in-out both, num-appear 1s cubic-bezier(.34,1.56,.64,1) both;}
.zoom-in.anim-in-view{animation: scaleUp 1s cubic-bezier(.34,1.56,.64,1) 1 normal both, num-appear 1s cubic-bezier(.34,1.56,.64,1) both;}
.static.anim-in-view::before, .static.anim-in-view::after, .border.anim-in-view::before, .border.anim-in-view::after, .description.anim-in-view::before, .description.anim-in-view::after{animation: scaleUpTranslate 1.5s cubic-bezier(.34,1.56,.64,1) .5s both, num-appear 1.5s cubic-bezier(.34,1.56,.64,1) .5s 1 normal both;}
.bottom-in.anim-in-view{animation: bottom-in 1.5s ease-in-out both, num-appear 1.5s cubic-bezier(.34,1.56,.64,1) both;}
#FS-text.anim-in-view{animation: FS-jump var(--num-dur) linear both;}
#offer-part.anim-in-view{animation: num-jump  var(--num-dur) linear both;}
#num-counting.anim-in-view{animation: num-disapp  var(--num-switch) steps(1, end) both;}
#num-end.anim-in-view{animation: num-appear  var(--num-switch) steps(1, end) both;}
#digit.anim-in-view::after{animation: swap-num  var(--num-dur) steps(1, end) both;}
.rei::before, .rei::after{background-position: center bottom;}
.rei::before{ background-image: var(--rei-cover);}
#num-counting > .rei::after{background-image: var(--bulb-img);}
#num-end > .rei::after{background-image: var(--bulb-img); animation: swap-icon  var(--num-dur) var(--delay, 0s) steps(1, end) infinite;}
#num-end > .rei:nth-of-type(2)::after{--delay: .5s;}
#first-design > .static, #second-design > .static{height: 100vh; background-position: center;}
#first-design > .static::after, #second-design > .static::after{background-image: var(--bill-2);}
#first-design > .border::before, #second-design > .border::before{background-image: var(--bill-3);}
#first-design > .border::after, #second-design > .border::after{background-image: var(--bill-4);}
#first-design > .static::before, #second-design > .static::before{background-image: var(--bill-5);}
#first-design > .description::after, #second-design > .description::after{background-image: var(--bill-6);}
#first-design > .description::before, #second-design > .description::before{background-image: var(--bill-7);}
#end-videos{flex-direction: column; padding: 5vh 0;}
#end-videos > .description, #end-videos > .border{flex: 0 0 auto;}
#end-videos > .border{margin-bottom: 5vh;}
#end-videos > .description{margin: 0 5vw; width: 90vw;}
#end-videos > .main-video{flex: 1 1 auto; min-height: 0; overflow: auto; background-position: center bottom;}
video{object-fit: contain; object-position: center bottom; place-items: end center; max-height: 100%; max-width: 100%; width: auto; height: auto; z-index: 1;}
.footage{width: 100%; text-align: center; margin-bottom: 2vh; font-family: var(--fontFamilies-brand), sans-serif;}
/*--------------------------------------------------------*/
/*------------------------screens-------------------------*/
@media only screen and (orientation : landscape){
  #cards-container{overflow: hidden;}
  #card-club{--tx: -22.5vw; --ty: -3.7vh; --r: -27.2deg;}
  #card-spade{--tx: -10.5vw; --ty: -8.7vh; --r: -15.3deg;}
  #card-diamond{--tx: 0.5vw; --ty: -9.7vh; --r: -2.9deg;}
  #card-heart{--tx: 12.5vw; --ty: -7.7vh; --r: 8.6deg;}
  #card-back{--tx: 23.5vw; --ty: -2.7vh; --r:23.6deg;}
  .row-3, .row-4{/*display: none !important;*/ visibility: hidden;}
  #letter-O-1, #letter-R, #letter-F-3, #letter-S{--delay-1: .2s; --delay-2: 2.1s;}
  #letter-F-1, #letter-E, #letter-U, #letter-O-2{--delay-1: .1s; --delay-2: 2.2s;}
  #letter-F-2, #letter-C{--delay-1: 0s; --delay-2: 2.3s;}
  .row-1.col-1{--delay-1: .7s; --delay-2: 1.7s;}
  .row-1.col-2{--delay-1: .6s; --delay-2: 1.8s;}
  .row-1.col-3{--delay-1: .5s; --delay-2: 1.9s;}
  .row-2.col-1{--delay-1: .9s; --delay-2: 1.5s;}
  .row-2.col-2{--delay-1: .8s; --delay-2: 1.6s;}
  .row-2.col-3{--delay-1: .7s; --delay-2: 1.7s;}
  #card-club, #card-spade, #card-diamond, #card-heart, #card-back{--delay: 3.2s;}
  #cards-container, #cards, .card-back-ele{--delay: 2.7s;}
  #dice-roll-1, #text-intro{--delay: 3.5s;}
  #dice-roll-2{--delay: 3.3s;}
  #chip-1{--delay: 3.6s;}
  #chip-2{--delay: 3.4s;}
  #highlights > .border{display: none !important;}
  .highlight-icon svg{height: 9vh;}
  #first-design, #second-design{padding: 0 5vw; gap: 5vw;}
  #first-design > .description, #second-design > .description, #first-design > .static, #second-design > .static, #first-design > .border, #second-design > .border{position: absolute;}
  #first-design > .description, #second-design > .description, #first-design > .static, #second-design > .static{width: 40vw; z-index: 2;}
  #first-design > .border, #second-design > .border{left: 0; top: 76vh; z-index: 1;}
  #first-design > .description, #second-design > .description{height: 66vh; top: 0; text-align: left; display: flex; justify-content: center; align-items: center; flex-direction: column;}
  #first-design > .static, #second-design > .description{ left: auto; right: 5vw;}
  #second-design > .static, #first-design > .description{left: 5vw;}
  #first-design > .static{background-image: url("../images/mca_phone-2_1_orange.png"); background-image: -webkit-image-set(url("../images/mca_phone-2_1_orange.avif") 1x, url("../images/mca_phone-2_1_orange.webp") 1x, url("../images/mca_phone-2_1_orange.png")  1x); background-image: image-set(url("../images/mca_phone-2_1_orange.avif") 1x, url("../images/mca_phone-2_1_orange.webp") 1x, url("../images/mca_phone-2_1_orange.png")  1x); left: auto; right: 5vw;}
  #second-design > .static{background-image: url("../images/mca_phone-1_1_green.png"); background-image: -webkit-image-set(url("../images/mca_phone-1_1_green.avif") 1x, url("../images/mca_phone-1_1_green.webp") 1x, url("../images/mca_phone-1_1_green.png")  1x); background-image: image-set(url("../images/mca_phone-1_1_green.avif") 1x, url("../images/mca_phone-1_1_green.webp") 1x, url("../images/mca_phone-1_1_green.png")  1x);}
  #first-design > .static::after, #second-design > .static::after{width: 17.5vw; height: 13.5vh;}
  #first-design > .border::before, #second-design > .border::before{width: 16.7vw; height: 14.3vh;}
  #first-design > .border::after, #second-design > .border::after{width: 16vw; height: 12.6vh;}
  #first-design > .static::before, #second-design > .static::before{width: 13.1vw; height: 17.1vh;}
  #first-design > .description::after, #second-design > .description::after{width: 17.4vw; height: 18.6vh;}
  #first-design > .description::before, #second-design > .description::before{width: 13.8vw; height: 22.1vh;}
  .main-video{max-height: 80vh;}
  video{aspect-ratio: 16 / 9;}
  .main-video.anim-in-view{animation-timing-function: ease-in-out; transform-origin: center bottom;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 16/9){
  .card-container{height: var(--card-height-1); width: calc(var(--card-height-1) * 7 / 11);}
  .card{border-radius: 4.4vh;}
  #cards-container, #cards, .card-back-ele{--delay: 2.8s;}
  #cards{ --start-scale: 4;}
  .stroke{text-shadow: 5px 5px 0 #fff, 5px -5px 0 #fff, -5px 5px 0 #fff, -5px -5px 0 #fff, 5px 0px 0 #fff, 0px 5px 0 #fff, -5px 0px 0 #fff, 0px -5px 0 #fff;}
  .row-2{/*display: none !important;*/ visibility: hidden;}
  #letter-O-1, #letter-R, #letter-F-3, #letter-S{--delay-1: .2s; --delay-2: 1.7s;}
  #letter-F-1, #letter-E, #letter-U, #letter-O-2{--delay-1: .1s; --delay-2: 1.8s;}
  #letter-F-2, #letter-C{--delay-1: 0s; --delay-2: 1.9s;}
  .row-1.col-1{--delay-1: .7s; --delay-2: 1.3s;}
  .row-1.col-2{--delay-1: .6s; --delay-2: 1.4s;}
  .row-1.col-3{--delay-1: .5s; --delay-2: 1.5s;}
  #card-club, #card-spade, #card-diamond, #card-heart, #card-back{--delay: 3.3s;}
  #text-intro{width: 70vw;}
  .dice{--dice-width: calc(var(--card-height-1) * .24);}
  #dice-roll-1, #text-intro{--delay: 3.6s;}
  #dice-roll-2{--delay: 3.4s;}
  #dice-roll-1{--tx: 79vw; --ty: -0.8vh; --orgx: 69vw; --orgy: -20.8vh;}
  #dice-roll-2{--tx: 87vw; --ty: 14.6vh; --orgx: 77vw; --orgy: -24.6vh;}
  .chip{--chip-width: calc(var(--card-height-1) * 0.51);}
  #chip-1{--tx: -1.3vw; --ty: 44.6vh; --delay: 3.7s;}
  #chip-2{--tx: -3.4vw; --ty: 50vh; --delay: 3.5s;}
  .highlight{width: 28vw;}
  #highlights{padding: 5vh 0; column-gap: 3vw;}
  .description{margin: 5vh 0;}
  #offer{flex-direction: row; padding: 0 5vw;}
  .num{font-size: 48vh; line-height: 48vh; height: 48vh;}
  #FS-text{font-size: 21vh; line-height: 21vh; height: 42vh; text-align: left; text-indent: 0; max-inline-size: 5ch;}
  #FS-text.anim-in-view{animation: none;}
  .rei::before, .rei::after{background-position: center center;}
  #first-design > .static::after{--tx: -3vw; --ty: -2vh;}
  #first-design > .border::before{--tx: 81.3vw; --ty: -64vh;}
  #first-design > .border::after{--tx: 50vw; --ty: -21vh;}
  #first-design > .static::before{--tx: 38vw; --ty: 46vh;}
  #first-design > .description::after{--tx: 77vw; --ty: 70vh;}
  #first-design > .description::before{--tx: 33vw; --ty: 64vh;}
  #second-design > .static::after{--tx: 33vw; --ty: -9vh;}
  #second-design > .border::before{--tx: 31vw; --ty: -60vh;}
  #second-design > .border::after{--tx: 32vw; --ty: -19vh;}
  #second-design > .static::before{--tx: -8vw; --ty: 17.5vh;}
  #second-design > .description::after{--tx: -9vw; --ty: 63vh;}
  #second-design > .description::before{--tx: -53vw; --ty: 70vh;}
  /*----------------------pattern------------------------*/
  .train.l-3, .question.l-3, .police.l-3, .jail.l-3, .hands.l-3, .tap.l-3, .diceBg.l-3, .car.l-3, .bulb.l-3, .ring.l-3, .chest.l-3, .arrow.l-3, .train.l-4, .question.l-4, .police.l-4, .jail.l-4, .hands.l-4, .tap.l-4, .diceBg.l-4, .car.l-4, .bulb.l-4, .ring.l-4, .chest.l-4, .arrow.l-4{display: none;}
  .car.nr-1, .car.nr-5{width: 5.6vw; height: 10.7vh;}
  .car.nr-2{width: 6.4vw; height: 12.1vh;}
  .car.nr-3{width: 5.3vw; height: 10.1vh;}
  .car.nr-4{width: 5.7vw; height: 10.8vh;}
  .car.nr-6{width: 5.9vw; height: 11.2vh;}
  .car.nr-7{width: 5.3vw; height: 10vh;}
  .car.nr-8{width: 4.3vw; height: 8.1vh;}
  .car.nr-9{width: 4.9vw; height: 9.4vh;}
  .car.l-1.nr-1{left: 0.9vw;}
  .car.l-1.nr-1, .car.l-2.nr-1{top: 0.5vh;}
  .car.l-2.nr-1{left: 50.9vw;}

  .car.l-1.nr-2{left: 43.3vw;}
  .car.l-1.nr-2, .car.l-2.nr-2{top: 36.7vh;}
  .car.l-2.nr-2{left: 93.3vw;}
  
  .car.l-1.nr-3{left: 36.8vw;}
  .car.l-1.nr-3, .car.l-2.nr-3{top: 4.3vh;}
  .car.l-2.nr-3{left: 86.8vw;}

  .car.l-1.nr-4{left: 4.1vw;}
  .car.l-1.nr-4, .car.l-2.nr-4{top: 19.6vh;}
  .car.l-2.nr-4{left: 54.1vw;}

  .car.l-1.nr-5{left: 0.2vw;}
  .car.l-1.nr-5, .car.l-2.nr-5{top: 47.8vh;}
  .car.l-2.nr-5{left: 50.2vw;}

  .car.l-1.nr-6{left: 9.2vw;}
  .car.l-1.nr-6, .car.l-2.nr-6{top: 52.8vh;}
  .car.l-2.nr-6{left: 59.2vw;}

  .car.l-1.nr-7{left: 35.3vw;}
  .car.l-1.nr-7, .car.l-2.nr-7{top: 49.3vh;}
  .car.l-2.nr-7{left: 85.3vw;}

  .car.l-1.nr-8{left: 31.5vw;}
  .car.l-1.nr-8, .car.l-2.nr-8{top: 66.4vh;}
  .car.l-2.nr-8{left: 81.5vw;}

  .car.l-1.nr-9{left: 44.2vw;}
  .car.l-1.nr-9, .car.l-2.nr-9{top: 78.3vh;}
  .car.l-2.nr-9{left: 94.2vw;}

  .train.nr-1{width: 4.9vw; height: 9.6vh;}
  .train.nr-2{width: 5.1vw; height: 10.1vh;}
  .train.nr-3{width: 3.6vw; height: 7.1vh;}
  .train.nr-4{width: 3.5vw; height: 6.9vh;}
  .train.nr-5{width: 3.3vw; height: 6.5vh;}

  .train.l-1.nr-1{left: 20.7vw;}
  .train.l-1.nr-1, .train.l-2.nr-1{top: 57.5vh;}
  .train.l-2.nr-1{left: 70.7vw;}

  .train.l-1.nr-2{left: 0.1vw;}
  .train.l-1.nr-2, .train.l-2.nr-2{top: 58.7vh;}
  .train.l-2.nr-2{left: 50.1vw;}
  
  .train.l-1.nr-3{left: 26.1vw;}
  .train.l-1.nr-3, .train.l-2.nr-3{top: 19.2vh;}
  .train.l-2.nr-3{left: 76.1vw;}

  .train.l-1.nr-4{left: 46.4vw;}
  .train.l-1.nr-4, .train.l-2.nr-4{top: 0.5vh;}
  .train.l-2.nr-4{left: 96.4vw;}

  .train.l-1.nr-5{left: 39.6vw;}
  .train.l-1.nr-5, .train.l-2.nr-5{top: 29.3vh;}
  .train.l-2.nr-5{left: 89.6vw;}

  .question.nr-1{width: 3.6vw; height: 13.5vh; --tx: 0; --ty: 0;}
  .question.nr-2{width: 4.5vw; height: 16.8vh; --tx: -4.5vw; --ty: -9.3vh;}
  .question.nr-3{width: 3.4vw; height: 12.8vh; --tx: 3.4vw; --ty: -6.4vh;}
  .question.nr-4{width: 4.4vw; height: 16.5vh; --tx: -4.4vw; --ty: -8.25vh;}
  .question.nr-5{width: 4.5vw; height: 16.7vh; --tx: -4.5vw; --ty: -9.46vh;}
  .question.nr-6{width: 5.5vw; height: 20.5vh; --tx: 5.5vw; --ty: -9.1vh;}
  .question.nr-7{width: 3.7vw; height: 14vh; --tx: 0vw; --ty: -13.37vh;}
  .question.l-1.nr-1{left: 14.2vw;}
  .question.l-1.nr-1, .question.l-2.nr-1{top: 0.7vh;}
  .question.l-2.nr-1{left: 64.2vw;}

  .question.l-1.nr-2{left: 19.6vw;}
  .question.l-1.nr-2, .question.l-2.nr-2{top: 24.4vh;}
  .question.l-2.nr-2{left: 69.6vw;}
  
  .question.l-1.nr-3{left: 44.4vw;}
  .question.l-1.nr-3, .question.l-2.nr-3{top: 2.5vh;}
  .question.l-2.nr-3{left: 94.4vw;}

  .question.l-1.nr-4{left: 43.1vw;}
  .question.l-1.nr-4, .question.l-2.nr-4{top: 45.7vh;}
  .question.l-2.nr-4{left: 93.1vw;}

  .question.l-1.nr-5{left: 2.7vw;}
  .question.l-1.nr-5, .question.l-2.nr-5{top: 25.9vh;}
  .question.l-2.nr-5{left: 52.7vw;}

  .question.l-1.nr-6{left: 4.3vw;}
  .question.l-1.nr-6, .question.l-2.nr-6{top: 74.2vh;}
  .question.l-2.nr-6{left: 54.3vw;}

  .question.l-1.nr-7{left: 33.2vw;}
  .question.l-1.nr-7, .question.l-2.nr-7{top: 74.2vh;}
  .question.l-2.nr-7{left: 83.2vw;}

  .arrow.nr-1, .arrow.nr-2, .arrow.nr-3, .arrow.nr-4{width: 10.1vw; height: 3.6vh;}
  .arrow.nr-5{width: 8.3vw; height: 2.9vh;}
  .arrow.nr-6{width: 9.6vw; height: 3.4vh;}
  .arrow.nr-7{width: 11.9vw; height: 4.2vh;}
  .arrow.nr-8{width: 9vw; height: 3.2vh;}
  .arrow.nr-9{width: 10.4vw; height: 3.7vh;}
  .arrow.nr-10{width: 8.4vw; height: 3vh;}
  .arrow.l-1.nr-1{left: 29.9vw;}
  .arrow.l-1.nr-1, .arrow.l-2.nr-1{top: 14.3vh;}
  .arrow.l-2.nr-1{left: 79.9vw;}

  .arrow.l-1.nr-2{left: 24.1vw;}
  .arrow.l-1.nr-2, .arrow.l-2.nr-2{top: 38vh;}
  .arrow.l-2.nr-2{left: 74.1vw;}
  
  .arrow.l-1.nr-3{left: 5.7vw;}
  .arrow.l-1.nr-3, .arrow.l-2.nr-3{top: 40.8vh;}
  .arrow.l-2.nr-3{left: 55.7vw;}

  .arrow.l-1.nr-4{left: 10.6vw;}
  .arrow.l-1.nr-4, .arrow.l-2.nr-4{top: 25.4vh;}
  .arrow.l-2.nr-4{left: 60.6vw;}

  .arrow.l-1.nr-5{left: 15.4vw;}
  .arrow.l-1.nr-5, .arrow.l-2.nr-5{top: 16.6vh;}
  .arrow.l-2.nr-5{left: 65.4vw;}

  .arrow.l-1.nr-6{left: 13.9vw;}
  .arrow.l-1.nr-6, .arrow.l-2.nr-6{top: 65.3vh;}
  .arrow.l-2.nr-6{left: 63.9vw;}

  .arrow.l-1.nr-7{left: 10.6vw;}
  .arrow.l-1.nr-7, .arrow.l-2.nr-7{top: 72.3vh;}
  .arrow.l-2.nr-7{left: 60.6vw;}

  .arrow.l-1.nr-8{left: 29.7vw;}
  .arrow.l-1.nr-8, .arrow.l-2.nr-8{top: 62.5vh;}
  .arrow.l-2.nr-8{left: 79.7vw;}

  .arrow.l-1.nr-9{left: 35.5vw;}
  .arrow.l-1.nr-9, .arrow.l-2.nr-9{top: 0.2vh;}
  .arrow.l-2.nr-9{left: 85.5vw;}

  .arrow.l-1.nr-10{left: 38.1vw;}
  .arrow.l-1.nr-10, .arrow.l-2.nr-10{top: 41vh;}
  .arrow.l-2.nr-10{left: 88.1vw;}

  .chest.nr-1, .chest.nr-2, .chest.nr-3, .chest.nr-4, .chest.nr-6, .chest.nr-7{width: 7.1vw; height: 10.5vh;}
  .chest.nr-5{width: 9vw; height: 13.2vh;}
  .chest.l-1.nr-1{left: 37vw;}
  .chest.l-1.nr-1, .chest.l-2.nr-1{top: 18.3vh;}
  .chest.l-2.nr-1{left: 87vw;}

  .chest.l-1.nr-2{left: 23.7vw;}
  .chest.l-1.nr-2, .chest.l-2.nr-2{top: 50.1vh;}
  .chest.l-2.nr-2{left: 73.7vw;}
  
  .chest.l-1.nr-3{left: 6.8vw;}
  .chest.l-1.nr-3, .chest.l-2.nr-3{top: 11.7vh;}
  .chest.l-2.nr-3{left: 56.8vw;}

  .chest.l-1.nr-4{left: 24.5vw;}
  .chest.l-1.nr-4, .chest.l-2.nr-4{top: 2.1vh;}
  .chest.l-2.nr-4{left: 74.5vw;}

  .chest.l-1.nr-5{left: 4.5vw;}
  .chest.l-1.nr-5, .chest.l-2.nr-5{top: 68.4vh;}
  .chest.l-2.nr-5{left: 54.5vw;}

  .chest.l-1.nr-6{left: 36.2vw;}
  .chest.l-1.nr-6, .chest.l-2.nr-6{top: 67.8vh;}
  .chest.l-2.nr-6{left: 86.2vw;}

  .chest.l-1.nr-7{left: 18.8vw;}
  .chest.l-1.nr-7, .chest.l-2.nr-7{top: 76.6vh;}
  .chest.l-2.nr-7{left: 68.8vw;}

  .ring.nr-1, .ring.nr-2{width: 4.3vw; height: 6.5vh;}
  .ring.nr-3{width: 4vw; height: 6.1vh;}
  .ring.nr-4{width: 3.6vw; height: 5.6vh;}
  .ring.nr-5{width: 5.5vw; height: 8.4vh;}
  .ring.l-1.nr-1{left: 24.5vw;}
  .ring.l-1.nr-1, .ring.l-2.nr-1{top: 13.3vh;}
  .ring.l-2.nr-1{left: 74.5vw;}

  .ring.l-1.nr-2{left: 24.1vw;}
  .ring.l-1.nr-2, .ring.l-2.nr-2{top: 38.6vh;}
  .ring.l-2.nr-2{left: 74.1vw;}
  
  .ring.l-1.nr-3{left: 4.9vw;}
  .ring.l-1.nr-3, .ring.l-2.nr-3{top: 58.7vh;}
  .ring.l-2.nr-3{left: 54.9vw;}

  .ring.l-1.nr-4{left: 32.2vw;}
  .ring.l-1.nr-4, .ring.l-2.nr-4{top: 56.7vh;}
  .ring.l-2.nr-4{left: 82.2vw;}

  .ring.l-1.nr-5{left: 20vw;}
  .ring.l-1.nr-5, .ring.l-2.nr-5{top: 66.6vh;}
  .ring.l-2.nr-5{left: 70vw;}

  .bulb.nr-1{width: 5.1vw; height: 10.6vh;}
  .bulb.nr-2{width: 5.6vw; height: 11.6vh;}
  .bulb.nr-3{width: 3.1vw; height: 6.5vh;}
  .bulb.nr-4{width: 5.7vw; height: 11.8vh;}
  .bulb.nr-5{width: 2.9vw; height: 6.1vh;}
  .bulb.l-1.nr-1{left: 44vw;}
  .bulb.l-1.nr-1, .bulb.l-2.nr-1{top: 11.5vh;}
  .bulb.l-2.nr-1{left: 94vw;}

  .bulb.l-1.nr-2{left: 40.3vw;}
  .bulb.l-1.nr-2, .bulb.l-2.nr-2{top: 58vh;}
  .bulb.l-2.nr-2{left: 90.3vw;}
  
  .bulb.l-1.nr-3{left: 12vw;}
  .bulb.l-1.nr-3, .bulb.l-2.nr-3{top: 64.2vh;}
  .bulb.l-2.nr-3{left: 62vw;}

  .bulb.l-1.nr-4{left: 10.3vw;}
  .bulb.l-1.nr-4, .bulb.l-2.nr-4{top: 29.2vh;}
  .bulb.l-2.nr-4{left: 60.3vw;}

  .bulb.l-1.nr-5{left: 26.3vw;}
  .bulb.l-1.nr-5, .bulb.l-2.nr-5{top: 26.3vh;}
  .bulb.l-2.nr-5{left: 76.3vw;}

  .diceBg.nr-1{width: 4.1vw; height: 12.4vh;}
  .diceBg.nr-2{width: 3.4vw; height: 10.4vh;}
  .diceBg.nr-3{width: 3vw; height: 9.1vh;}
  .diceBg.nr-4{width: 3.1vw; height: 9.4vh;}
  .diceBg.nr-5{width: 2.1vw; height: 6.3vh;}
  .diceBg.l-1.nr-1{left: 21.4vw;}
  .diceBg.l-1.nr-1, .diceBg.l-2.nr-1{top: 14.9vh;}
  .diceBg.l-2.nr-1{left: 71.4vw;}

  .diceBg.l-1.nr-2{left: 46.4vw;}
  .diceBg.l-1.nr-2, .diceBg.l-2.nr-2{top: 60vh;}
  .diceBg.l-2.nr-2{left: 96.4vw;}
  
  .diceBg.l-1.nr-3{left: 0.5vw;}
  .diceBg.l-1.nr-3, .diceBg.l-2.nr-3{top: 69.7vh;}
  .diceBg.l-2.nr-3{left: 50.5vw;}

  .diceBg.l-1.nr-4{left: 0.3vw;}
  .diceBg.l-1.nr-4, .diceBg.l-2.nr-4{top: 21.6vh;}
  .diceBg.l-2.nr-4{left: 50.3vw;}

  .diceBg.l-1.nr-5{left: 36.6vw;}
  .diceBg.l-1.nr-5, .diceBg.l-2.nr-5{top: 28.2vh;}
  .diceBg.l-2.nr-5{left: 86.6vw;}

  .hands.nr-1, .hands.nr-5{width: 7.2vw; height: 9.9vh;}
  .hands.nr-2{width: 7.6vw; height: 10.5vh;}
  .hands.nr-3, .hands.nr-4, .hands.nr-6, .hands.nr-7{width: 6.2vw; height: 8.6vh;}
  .hands.l-1.nr-1{left: 0.1vw;}
  .hands.l-1.nr-1, .hands.l-2.nr-1{top: 10.7vh;}
  .hands.l-2.nr-1{left: 50.1vw;}

  .hands.l-1.nr-2{left: 42.6vw;}
  .hands.l-1.nr-2, .hands.l-2.nr-2{top: 23.8vh;}
  .hands.l-2.nr-2{left: 92.6vw;}
  
  .hands.l-1.nr-3{left: 30.9vw;}
  .hands.l-1.nr-3, .hands.l-2.nr-3{top: 2.7vh;}
  .hands.l-2.nr-3{left: 80.9vw;}

  .hands.l-1.nr-4{left: 29.6vw;}
  .hands.l-1.nr-4, .hands.l-2.nr-4{top: 45.5vh;}
  .hands.l-2.nr-4{left: 79.6vw;}

  .hands.l-1.nr-5{left: 16.1vw;}
  .hands.l-1.nr-5, .hands.l-2.nr-5{top: 35.6vh;}
  .hands.l-2.nr-5{left: 66.1vw;}

  .hands.l-1.nr-6{left: -0.5vw;}
  .hands.l-1.nr-6, .hands.l-2.nr-6{top: 36.6vh;}
  .hands.l-2.nr-6{left: 49.5vw;}

  .hands.l-1.nr-7{left: 43.3vw;}
  .hands.l-1.nr-7, .hands.l-2.nr-7{top: 69.9vh;}
  .hands.l-2.nr-7{left: 93.3vw;}

  .tap.nr-1{width: 7.2vw; height: 11.6vh;}
  .tap.nr-2{width: 6.3vw; height: 10.2vh;}
  .tap.nr-3{width: 5.7vw; height: 9.1vh;}
  .tap.nr-4{width: 6vw; height: 9.6vh;}
  .tap.l-1.nr-1{left: 6.9vw;}
  .tap.l-1.nr-1, .tap.l-2.nr-1{top: 0.2vh;}
  .tap.l-2.nr-1{left: 56.9vw;}

  .tap.l-1.nr-2{left: 35.3vw;}
  .tap.l-1.nr-2, .tap.l-2.nr-2{top: 36.1vh;}
  .tap.l-2.nr-2{left: 85.3vw;}
  
  .tap.l-1.nr-3{left: 5.7vw;}
  .tap.l-1.nr-3, .tap.l-2.nr-3{top: 45.3vh;}
  .tap.l-2.nr-3{left: 55.7vw;}

  .tap.l-1.nr-4{left: 37.2vw;}
  .tap.l-1.nr-4, .tap.l-2.nr-4{top: 78.5vh;}
  .tap.l-2.nr-4{left: 87.2vw;}

  .jail.nr-1, .jail.nr-2, .jail.nr-4{width: 5.1vw; height: 9.1vh;}
  .jail.nr-3{width: 5.9vw; height: 10.6vh;}
  .jail.l-1.nr-1{left: 13.7vw;}
  .jail.l-1.nr-1, .jail.l-2.nr-1{top: 15.6vh;}
  .jail.l-2.nr-1{left: 63.7vw;}

  .jail.l-1.nr-2{left: 25.7vw;}
  .jail.l-1.nr-2, .jail.l-2.nr-2{top: 66.3vh;}
  .jail.l-2.nr-2{left: 75.7vw;}
  
  .jail.l-1.nr-3{left: 30.2vw;}
  .jail.l-1.nr-3, .jail.l-2.nr-3{top: 18.9vh;}
  .jail.l-2.nr-3{left: 80.2vw;}

  .jail.l-1.nr-4{left: 12.4vw;}
  .jail.l-1.nr-4, .jail.l-2.nr-4{top: 44.9vh;}
  .jail.l-2.nr-4{left: 62.4vw;}

  .police.nr-1, .police.nr-3{width: 6.5vw; height: 11.2vh;}
  .police.nr-2{width: 7.7vw; height: 13.2vh;}
  .police.nr-4{width: 6.7vw; height: 11.5vh;}
  .police.l-1.nr-1{left: 30.4vw;}
  .police.l-1.nr-1, .police.l-2.nr-1{top: 31.7vh;}
  .police.l-2.nr-1{left: 80.4vw;}

  .police.l-1.nr-2{left: 17.9vw;}
  .police.l-1.nr-2, .police.l-2.nr-2{top: 0.3vh;}
  .police.l-2.nr-2{left: 67.9vw;}
  
  .police.l-1.nr-3{left: 18.1vw;}
  .police.l-1.nr-3, .police.l-2.nr-3{top: 45.2vh;}
  .police.l-2.nr-3{left: 68.1vw;}

  .police.l-1.nr-4{left: 25.8vw;}
  .police.l-1.nr-4, .police.l-2.nr-4{top: 76.4vh;}
  .police.l-2.nr-4{left: 75.8vw;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/9){
  .card-container{height: var(--card-height-2); width: calc(var(--card-height-2) * 7 / 11);}
  .card{border-radius: 3.8vh;}
  #cards{--start-scale: 3.5;}
  .stroke{text-shadow: 4px 4px 0 #fff, 4px -4px 0 #fff, -4px 4px 0 #fff, -4px -4px 0 #fff, 4px 0px 0 #fff, 0px 4px 0 #fff, -4px 0px 0 #fff, 0px -4px 0 #fff;}
  #card-club{--tx: -26.5vw;}
  #card-spade{--tx: -12.5vw;}
  #card-heart{--tx: 13.5vw;}
  #card-back{--tx: 27.5vw;}
  .dice{--dice-width: calc(var(--card-height-2) * .24);}
  #dice-roll-1{--tx: 80vw; --ty: -0.8vh; --orgx: 70vw; --orgy: -20.8vh;}
  #dice-roll-2{--tx: 90vw; --ty: 14.6vh; --orgx: 80vw; --orgy: -24.6vh;}
  .chip{--chip-width: calc(var(--card-height-2) * .51);}
  #chip-1{--tx: -11vw; --ty: 46vh;}
  #chip-2{--tx: -8vw; --ty: 40vh;}
  #highlights{padding: 2vh 0; column-gap: 1.5vw;}
  .highlight{width: 31vw;}
  .num{font-size: 51vh; line-height: 61vh; height:51vh;}
  #FS-text{font-size: 17vh; line-height: 17vh; height: 17vh;}
  #first-design > .static::after{--tx: -5.6vw; --ty: -4.8vh;}
  #first-design > .border::before{--tx: 81.3vw; --ty: -60vh;}
  #first-design > .border::after{--tx: 50vw; --ty: -18vh;}
  #first-design > .static::before{--tx: 40vw; --ty: 46vh;}
  #first-design > .description::after{--tx: 80vw; --ty: 72vh;}
  #first-design > .description::before{--tx: 25vw; --ty: 67vh;}
  #second-design > .static::after{--tx: 31vw; --ty: -5vh;}
  #second-design > .border::before{--tx: 31vw; --ty: -65vh;}
  #second-design > .border::after{--tx: 35vw; --ty: -19vh;}
  #second-design > .static::before{--tx: -8vw; --ty: 22.5vh;}
  #second-design > .description::after{--tx: -9vw; --ty: 70vh;}
  #second-design > .description::before{--tx: -53vw; --ty: 75vh;}
  /*----------------------pattern------------------------*/
  .train.l-3, .question.l-3, .police.l-3, .jail.l-3, .hands.l-3, .tap.l-3, .diceBg.l-3, .car.l-3, .bulb.l-3, .ring.l-3, .chest.l-3, .arrow.l-3, .train.l-4, .question.l-4, .police.l-4, .jail.l-4, .hands.l-4, .tap.l-4, .diceBg.l-4, .car.l-4, .bulb.l-4, .ring.l-4, .chest.l-4, .arrow.l-4{display: none;}

  .car.nr-1, .car.nr-5{width: 5.6vw; height: 8vh;}
  .car.nr-2{width: 6.4vw; height: 9.1vh;}
  .car.nr-3{width: 5.3vw; height: 7.5vh;}
  .car.nr-4{width: 5.7vw; height: 8.1vh;}
  .car.nr-6{width: 5.9vw; height: 8.4vh;}
  .car.nr-7{width: 5.3vw; height: 7.5vh;}
  .car.nr-8{width: 4.3vw; height: 6.1vh;}
  .car.nr-9{width: 4.9vw; height: 7vh;}
  .car.l-1.nr-1{left: 0.9vw;}
  .car.l-1.nr-1, .car.l-2.nr-1{top: 0.3vh;}
  .car.l-2.nr-1{left: 50.9vw;}

  .car.l-1.nr-2{left: 43.4vw;}
  .car.l-1.nr-2, .car.l-2.nr-2{top: 27.5vh;}
  .car.l-2.nr-2{left: 93.4vw;}
  
  .car.l-1.nr-3{left: 36.8vw;}
  .car.l-1.nr-3, .car.l-2.nr-3{top: 3.2vh;}
  .car.l-2.nr-3{left: 86.8vw;}

  .car.l-1.nr-4{left: 4.1vw;}
  .car.l-1.nr-4, .car.l-2.nr-4{top: 14.7vh;}
  .car.l-2.nr-4{left: 54.1vw;}

  .car.l-1.nr-5{left: 0.2vw;}
  .car.l-1.nr-5, .car.l-2.nr-5{top: 35.8vh;}
  .car.l-2.nr-5{left: 50.2vw;}

  .car.l-1.nr-6{left: 9.2vw;}
  .car.l-1.nr-6, .car.l-2.nr-6{top: 39.6vh;}
  .car.l-2.nr-6{left: 59.2vw;}

  .car.l-1.nr-7{left: 35.3vw;}
  .car.l-1.nr-7, .car.l-2.nr-7{top: 36.9vh;}
  .car.l-2.nr-7{left: 85.3vw;}

  .car.l-1.nr-8{left: 31.5vw;}
  .car.l-1.nr-8, .car.l-2.nr-8{top: 49.7vh;}
  .car.l-2.nr-8{left: 81.5vw;}

  .car.l-1.nr-9{left: 44.2vw;}
  .car.l-1.nr-9, .car.l-2.nr-9{top: 58.7vh;}
  .car.l-2.nr-9{left: 94.2vw;}

  .train.nr-1{width: 4.9vw; height: 7.2vh;}
  .train.nr-2{width: 5.1vw; height: 7.6vh;}
  .train.nr-3{width: 3.6vw; height: 5.3vh;}
  .train.nr-4{width: 3.5vw; height: 5.1vh;}
  .train.nr-5{width: 3.3vw; height: 4.8vh;}

  .train.l-1.nr-1{left: 20.7vw;}
  .train.l-1.nr-1, .train.l-2.nr-1{top: 43.1vh;}
  .train.l-2.nr-1{left: 70.7vw;}

  .train.l-1.nr-2{left: 0.1vw;}
  .train.l-1.nr-2, .train.l-2.nr-2{top: 44vh;}
  .train.l-2.nr-2{left: 50.1vw;}
  
  .train.l-1.nr-3{left: 26.1vw;}
  .train.l-1.nr-3, .train.l-2.nr-3{top: 14.4vh;}
  .train.l-2.nr-3{left: 76.1vw;}

  .train.l-1.nr-4{left: 46.4vw;}
  .train.l-1.nr-4, .train.l-2.nr-4{top: 0.3vh;}
  .train.l-2.nr-4{left: 96.4vw;}

  .train.l-1.nr-5{left: 39.6vw;}
  .train.l-1.nr-5, .train.l-2.nr-5{top: 21.9vh;}
  .train.l-2.nr-5{left: 89.6vw;}

  .question.nr-1{width: 3.6vw; height: 10.1vh; --tx: 0; --ty: 0;}
  .question.nr-2{width: 4.5vw; height: 12.6vh; --tx: -4.5vw; --ty: -7vh;}
  .question.nr-3{width: 3.4vw; height: 9.6vh; --tx: 3.4vw; --ty: -4.8vh;}
  .question.nr-4{width: 4.4vw; height: 12.4vh; --tx: -4.4vw; --ty: -6.2vh;}
  .question.nr-5{width: 4.5vw; height: 12.5vh; --tx: -4.5vw; --ty: -7.08vh;}
  .question.nr-6{width: 5.5vw; height: 15.4vh; --tx: 5.5vw; --ty: -6.84vh;}
  .question.nr-7{width: 3.7vw; height: 10.5vh; --tx: 0vw; --ty: -10.03vh;}
  .question.l-1.nr-1{left: 14.2vw;}
  .question.l-1.nr-1, .question.l-2.nr-1{top: 0.5vh;}
  .question.l-2.nr-1{left: 64.2vw;}

  .question.l-1.nr-2{left: 19.6vw;}
  .question.l-1.nr-2, .question.l-2.nr-2{top: 18.2vh;}
  .question.l-2.nr-2{left: 69.6vw;}
  
  .question.l-1.nr-3{left: 44.4vw;}
  .question.l-1.nr-3, .question.l-2.nr-3{top: 3vh;}
  .question.l-2.nr-3{left: 94.4vw;}

  .question.l-1.nr-4{left: 43.1vw;}
  .question.l-1.nr-4, .question.l-2.nr-4{top: 34.3vh;}
  .question.l-2.nr-4{left: 93.1vw;}

  .question.l-1.nr-5{left: 2.7vw;}
  .question.l-1.nr-5, .question.l-2.nr-5{top: 19.4vh;}
  .question.l-2.nr-5{left: 52.7vw;}

  .question.l-1.nr-6{left: 4.3vw;}
  .question.l-1.nr-6, .question.l-2.nr-6{top: 55.6vh;}
  .question.l-2.nr-6{left: 54.3vw;}

  .question.l-1.nr-7{left: 33.2vw;}
  .question.l-1.nr-7, .question.l-2.nr-7{top: 55.6vh;}
  .question.l-2.nr-7{left: 83.2vw;}

  .arrow.nr-1, .arrow.nr-2, .arrow.nr-3, .arrow.nr-4{width: 10.1vw; height: 2.7vh;}
  .arrow.nr-5{width: 8.3vw; height: 2.2vh;}
  .arrow.nr-6{width: 9.7vw; height: 2.6vh;}
  .arrow.nr-7{width: 11.9vw; height: 3.2vh;}
  .arrow.nr-8{width: 9vw; height: 2.4vh;}
  .arrow.nr-9{width: 10.4vw; height: 2.8vh;}
  .arrow.nr-10{width: 8.4vw; height: 2.2vh;}
  .arrow.l-1.nr-1{left: 29.9vw;}
  .arrow.l-1.nr-1, .arrow.l-2.nr-1{top: 10.8vh;}
  .arrow.l-2.nr-1{left: 79.9vw;}

  .arrow.l-1.nr-2{left: 24.1vw;}
  .arrow.l-1.nr-2, .arrow.l-2.nr-2{top: 28.5vh;}
  .arrow.l-2.nr-2{left: 74.1vw;}
  
  .arrow.l-1.nr-3{left: 5.7vw;}
  .arrow.l-1.nr-3, .arrow.l-2.nr-3{top: 30.6vh;}
  .arrow.l-2.nr-3{left: 55.7vw;}

  .arrow.l-1.nr-4{left: 10.6vw;}
  .arrow.l-1.nr-4, .arrow.l-2.nr-4{top: 19vh;}
  .arrow.l-2.nr-4{left: 60.6vw;}

  .arrow.l-1.nr-5{left: 15.4vw;}
  .arrow.l-1.nr-5, .arrow.l-2.nr-5{top: 12.4vh;}
  .arrow.l-2.nr-5{left: 65.4vw;}

  .arrow.l-1.nr-6{left: 13.9vw;}
  .arrow.l-1.nr-6, .arrow.l-2.nr-6{top: 49vh;}
  .arrow.l-2.nr-6{left: 63.9vw;}

  .arrow.l-1.nr-7{left: 10.6vw;}
  .arrow.l-1.nr-7, .arrow.l-2.nr-7{top: 54.2vh;}
  .arrow.l-2.nr-7{left: 60.6vw;}

  .arrow.l-1.nr-8{left: 29.7vw;}
  .arrow.l-1.nr-8, .arrow.l-2.nr-8{top: 46.9vh;}
  .arrow.l-2.nr-8{left: 79.7vw;}

  .arrow.l-1.nr-9{left: 35.5vw;}
  .arrow.l-1.nr-9, .arrow.l-2.nr-9{top: 0.1vh;}
  .arrow.l-2.nr-9{left: 85.5vw;}

  .arrow.l-1.nr-10{left: 38.1vw;}
  .arrow.l-1.nr-10, .arrow.l-2.nr-10{top: 30.7vh;}
  .arrow.l-2.nr-10{left: 88.1vw;}

  .chest.nr-1, .chest.nr-2, .chest.nr-3, .chest.nr-4, .chest.nr-6, .chest.nr-7{width: 7.1vw; height: 7.9vh;}
  .chest.nr-5{width: 9vw; height: 9.9vh;}
  .chest.l-1.nr-1{left: 37vw;}
  .chest.l-1.nr-1, .chest.l-2.nr-1{top: 13.7vh;}
  .chest.l-2.nr-1{left: 87vw;}

  .chest.l-1.nr-2{left: 23.7vw;}
  .chest.l-1.nr-2, .chest.l-2.nr-2{top: 37.5vh;}
  .chest.l-2.nr-2{left: 73.7vw;}
  
  .chest.l-1.nr-3{left: 6.8vw;}
  .chest.l-1.nr-3, .chest.l-2.nr-3{top: 8.8vh;}
  .chest.l-2.nr-3{left: 56.8vw;}

  .chest.l-1.nr-4{left: 24.5vw;}
  .chest.l-1.nr-4, .chest.l-2.nr-4{top: 1.5vh;}
  .chest.l-2.nr-4{left: 74.5vw;}

  .chest.l-1.nr-5{left: 4.5vw;}
  .chest.l-1.nr-5, .chest.l-2.nr-5{top: 51.3vh;}
  .chest.l-2.nr-5{left: 54.5vw;}

  .chest.l-1.nr-6{left: 36.2vw;}
  .chest.l-1.nr-6, .chest.l-2.nr-6{top: 50.8vh;}
  .chest.l-2.nr-6{left: 86.2vw;}

  .chest.l-1.nr-7{left: 18.8vw;}
  .chest.l-1.nr-7, .chest.l-2.nr-7{top: 57.4vh;}
  .chest.l-2.nr-7{left: 68.8vw;}

  .ring.nr-1, .ring.nr-2{width: 4.3vw; height: 4.9vh;}
  .ring.nr-3{width: 4vw; height: 4.5vh;}
  .ring.nr-4{width: 3.6vw; height: 4.1vh;}
  .ring.nr-5{width: 5.5vw; height: 6.2vh;}
  .ring.l-1.nr-1{left: 24.5vw;}
  .ring.l-1.nr-1, .ring.l-2.nr-1{top: 10vh;}
  .ring.l-2.nr-1{left: 74.5vw;}

  .ring.l-1.nr-2{left: 24.1vw;}
  .ring.l-1.nr-2, .ring.l-2.nr-2{top: 28.9vh;}
  .ring.l-2.nr-2{left: 74.1vw;}
  
  .ring.l-1.nr-3{left: 4.9vw;}
  .ring.l-1.nr-3, .ring.l-2.nr-3{top: 44vh;}
  .ring.l-2.nr-3{left: 54.9vw;}

  .ring.l-1.nr-4{left: 32.2vw;}
  .ring.l-1.nr-4, .ring.l-2.nr-4{top: 42.5vh;}
  .ring.l-2.nr-4{left: 82.2vw;}

  .ring.l-1.nr-5{left: 20vw;}
  .ring.l-1.nr-5, .ring.l-2.nr-5{top: 49.9vh;}
  .ring.l-2.nr-5{left: 70vw;}

  .bulb.nr-1{width: 5.1vw; height: 7.9vh;}
  .bulb.nr-2{width: 5.6vw; height: 8.7vh;}
  .bulb.nr-3{width: 3.1vw; height: 4.9vh;}
  .bulb.nr-4{width: 5.7vw; height: 8.9vh;}
  .bulb.nr-5{width: 2.9vw; height: 4.6vh;}
  .bulb.l-1.nr-1{left: 44.7vw;}
  .bulb.l-1.nr-1, .bulb.l-2.nr-1{top: 10.2vh;}
  .bulb.l-2.nr-1{left: 94.7vw;}

  .bulb.l-1.nr-2{left: 40.3vw;}
  .bulb.l-1.nr-2, .bulb.l-2.nr-2{top: 43.5vh;}
  .bulb.l-2.nr-2{left: 90.3vw;}
  
  .bulb.l-1.nr-3{left: 12vw;}
  .bulb.l-1.nr-3, .bulb.l-2.nr-3{top: 48.1vh;}
  .bulb.l-2.nr-3{left: 62vw;}

  .bulb.l-1.nr-4{left: 10.3vw;}
  .bulb.l-1.nr-4, .bulb.l-2.nr-4{top: 21.8vh;}
  .bulb.l-2.nr-4{left: 60.3vw;}

  .bulb.l-1.nr-5{left: 26.3vw;}
  .bulb.l-1.nr-5, .bulb.l-2.nr-5{top: 19.7vh;}
  .bulb.l-2.nr-5{left: 76.3vw;}

  .diceBg.nr-1{width: 4.1vw; height: 9.3vh;}
  .diceBg.nr-2{width: 3.4vw; height: 7.8vh;}
  .diceBg.nr-3{width: 3vw; height: 6.8vh;}
  .diceBg.nr-4{width: 3.1vw; height: 7vh;}
  .diceBg.nr-5{width: 2.1vw; height: 4.7vh;}
  .diceBg.l-1.nr-1{left: 21.4vw;}
  .diceBg.l-1.nr-1, .diceBg.l-2.nr-1{top: 11.1vh;}
  .diceBg.l-2.nr-1{left: 71.4vw;}

  .diceBg.l-1.nr-2{left: 46.4vw;}
  .diceBg.l-1.nr-2, .diceBg.l-2.nr-2{top: 45vh;}
  .diceBg.l-2.nr-2{left: 96.4vw;}
  
  .diceBg.l-1.nr-3{left: 0.5vw;}
  .diceBg.l-1.nr-3, .diceBg.l-2.nr-3{top: 52.3vh;}
  .diceBg.l-2.nr-3{left: 50.5vw;}

  .diceBg.l-1.nr-4{left: 0.3vw;}
  .diceBg.l-1.nr-4, .diceBg.l-2.nr-4{top: 16.2vh;}
  .diceBg.l-2.nr-4{left: 50.3vw;}

  .diceBg.l-1.nr-5{left: 36.6vw;}
  .diceBg.l-1.nr-5, .diceBg.l-2.nr-5{top: 21.1vh;}
  .diceBg.l-2.nr-5{left: 86.6vw;}

  .hands.nr-1, .hands.nr-5{width: 7.2vw; height: 7.4vh;}
  .hands.nr-2{width: 7.6vw; height: 7.9vh;}
  .hands.nr-3, .hands.nr-4, .hands.nr-6, .hands.nr-7{width: 6.2vw; height: 6.4vh;}
  .hands.l-1.nr-1{left: 0.1vw;}
  .hands.l-1.nr-1, .hands.l-2.nr-1{top: 8vh;}
  .hands.l-2.nr-1{left: 50.1vw;}

  .hands.l-1.nr-2{left: 42.6vw;}
  .hands.l-1.nr-2, .hands.l-2.nr-2{top: 17.8vh;}
  .hands.l-2.nr-2{left: 92.6vw;}
  
  .hands.l-1.nr-3{left: 30.9vw;}
  .hands.l-1.nr-3, .hands.l-2.nr-3{top: 2vh;}
  .hands.l-2.nr-3{left: 80.9vw;}

  .hands.l-1.nr-4{left: 29.6vw;}
  .hands.l-1.nr-4, .hands.l-2.nr-4{top: 34.1vh;}
  .hands.l-2.nr-4{left: 79.6vw;}

  .hands.l-1.nr-5{left: 16.1vw;}
  .hands.l-1.nr-5, .hands.l-2.nr-5{top: 26.7vh;}
  .hands.l-2.nr-5{left: 66.1vw;}

  .hands.l-1.nr-6{left: -0.5vw;}
  .hands.l-1.nr-6, .hands.l-2.nr-6{top: 27.4vh;}
  .hands.l-2.nr-6{left: 49.5vw;}

  .hands.l-1.nr-7{left: 43.3vw;}
  .hands.l-1.nr-7, .hands.l-2.nr-7{top: 52.4vh;}
  .hands.l-2.nr-7{left: 93.3vw;}

  .tap.nr-1{width: 7.2vw; height: 8.7vh;}
  .tap.nr-2{width: 6.3vw; height: 7.6vh;}
  .tap.nr-3{width: 5.7vw; height: 6.8vh;}
  .tap.nr-4{width: 6vw; height: 7.2vh;}
  .tap.l-1.nr-1{left: 6.9vw;}
  .tap.l-1.nr-1, .tap.l-2.nr-1{top: 0.1vh;}
  .tap.l-2.nr-1{left: 56.9vw;}

  .tap.l-1.nr-2{left: 35.3vw;}
  .tap.l-1.nr-2, .tap.l-2.nr-2{top: 27.1vh;}
  .tap.l-2.nr-2{left: 85.3vw;}
  
  .tap.l-1.nr-3{left: 5.7vw;}
  .tap.l-1.nr-3, .tap.l-2.nr-3{top: 34vh;}
  .tap.l-2.nr-3{left: 55.7vw;}

  .tap.l-1.nr-4{left: 37.2vw;}
  .tap.l-1.nr-4, .tap.l-2.nr-4{top: 58.8vh;}
  .tap.l-2.nr-4{left: 87.2vw;}

  .jail.nr-1, .jail.nr-2, .jail.nr-4{width: 5.1vw; height: 6.8vh;}
  .jail.nr-3{width: 5.9vw; height: 7.9vh;}
  .jail.l-1.nr-1{left: 13.7vw;}
  .jail.l-1.nr-1, .jail.l-2.nr-1{top: 11.7vh;}
  .jail.l-2.nr-1{left: 63.7vw;}

  .jail.l-1.nr-2{left: 25.7vw;}
  .jail.l-1.nr-2, .jail.l-2.nr-2{top: 49.7vh;}
  .jail.l-2.nr-2{left: 75.7vw;}
  
  .jail.l-1.nr-3{left: 30.2vw;}
  .jail.l-1.nr-3, .jail.l-2.nr-3{top: 14.2vh;}
  .jail.l-2.nr-3{left: 80.2vw;}

  .jail.l-1.nr-4{left: 12.4vw;}
  .jail.l-1.nr-4, .jail.l-2.nr-4{top: 33.7vh;}
  .jail.l-2.nr-4{left: 62.4vw;}

  .police.nr-1, .police.nr-3{width: 6.5vw; height: 8.4vh;}
  .police.nr-2{width: 7.7vw; height: 9.9vh;}
  .police.nr-4{width: 6.7vw; height: 8.6vh;}
  .police.l-1.nr-1{left: 30.4vw;}
  .police.l-1.nr-1, .police.l-2.nr-1{top: 23.7vh;}
  .police.l-2.nr-1{left: 80.4vw;}

  .police.l-1.nr-2{left: 17.9vw;}
  .police.l-1.nr-2, .police.l-2.nr-2{top: 0.2vh;}
  .police.l-2.nr-2{left: 67.9vw;}
  
  .police.l-1.nr-3{left: 18.1vw;}
  .police.l-1.nr-3, .police.l-2.nr-3{top: 33.9vh;}
  .police.l-2.nr-3{left: 68.1vw;}

  .police.l-1.nr-4{left: 25.8vw;}
  .police.l-1.nr-4, .police.l-2.nr-4{top: 57.3vh;}
  .police.l-2.nr-4{left: 75.8vw;}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3){
  .card-container{height: var(--card-height-3); width: calc(var(--card-height-3) * 7 / 11);}
  .card{border-radius: 3.3vh;}
   #cards{--start-scale: 3.2;}
  .stroke{text-shadow: 3px 3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, -3px -3px 0 #fff, 3px 0px 0 #fff, 0px 3px 0 #fff, -3px 0px 0 #fff, 0px -3px 0 #fff;}
  #card-club{--tx: -29vw; --ty: -21.4vh; --r: 3.6deg;}
  #card-spade{--tx: -14.6vw; --ty: -16.9vh; --r: 15.4deg;}
  #card-diamond{--tx: -2.2vw; --ty: -10vh;--r: 27.9deg;}
  #card-heart{--tx: 8.9vw; --ty: -1.8vh; --r: 39.4deg;}
  #card-back{--tx: 19.1vw; --ty: 8.5vh; --r:54.4deg;}
  .dice{--dice-width: calc(var(--card-height-3) * .24);}
  #dice-roll-1{--tx: 66vw; --ty: 7.7vh; --orgx: 61vw; --orgy: -27.7vh;}
  #dice-roll-2{--tx: 81vw; --ty: 18.5vh; --orgx: 71vw; --orgy: -28.5vh;}
  .chip{--chip-width: calc(var(--card-height-3) * .51);}
  #chip-1{--tx: 4vw; --ty: 54vh;}
  #chip-2{--tx: -5vw; --ty: 49vh;}
  #highlights{padding: 2vh 0; flex-direction: column; row-gap: 2vh;}
  .highlight {width: 90vw;}
  .highlight-icon svg{height: 3vh;}
  .num{font-size: 47vh; line-height: 57vh; height:47vh;}
  #FS-text{font-size: 15vh; line-height: 15vh; height: 15vh;}
  #first-design > .description{width: 42vw; height: 58vh;}
  #first-design > .static, #second-design > .static{width: 48vw;}
  #first-design > .static, #second-design > .description{right: 3vw;}
  #second-design > .static, #first-design > .description{left: 3vw;}
  #first-design > .border, #second-design > .border{top: 68vh;}
  #first-design > .static::after, #second-design > .static::after{width: 25.7vw; height: 11.2vh;}
  #first-design > .border::before, #second-design > .border::before{width: 24.5vw; height: 11.7vh;}
  #first-design > .border::after, #second-design > .border::after{width: 23.5vw; height: 10.3vh;}
  #first-design > .static::before, #second-design > .static::before{width: 19.2vw; height: 14vh;}
  #first-design > .description::after, #second-design > .description::after{width: 25.6vw; height: 15.3vh;}
  #first-design > .description::before, #second-design > .description::before{width: 20.3vw; height: 18.2vh;}
  #first-design > .static::after{--tx: 1vw; --ty: 1.8vh;}
  #first-design > .border::before{--tx: 81.3vw; --ty: -50vh;}
  #first-design > .border::after{--tx: 40vw; --ty: -13vh;}
  #first-design > .static::before{--tx: 40vw; --ty: 46vh;}
  #first-design > .description::after{--tx: 80vw; --ty: 75vh;}
  #first-design > .description::before{--tx: 25vw; --ty: 67vh;}
  #second-design > .static::after{--tx: 25vw; --ty: -6vh;}
  #second-design > .border::before{--tx: 33vw; --ty: -45vh;}
  #second-design > .border::after{--tx: 37vw; --ty: -4vh;}
  #second-design > .static::before{--tx: -8vw; --ty: 17.5vh;}
  #second-design > .description::after{--tx: 9vw; --ty: 74vh;}
  #second-design > .description::before{--tx: -58vw; --ty: 75vh;}
  .main-video{max-height: 83vh;}
  #end-videos{padding: 2vh 0;}
  #end-videos > .border{margin-bottom: 2vh;}
  video{aspect-ratio: 1 / 1; /*height: 100%;*/}
  /*----------------------pattern------------------------*/
  .car.l-3.nr-9, .car.l-3.nr-8, .car.l-3.nr-7, .car.l-3.nr-6, .car.l-3.nr-5, .car.l-3.nr-2, .train.l-3.nr-5, .train.l-3.nr-2, .train.l-3.nr-1, .question.l-3.nr-7, .question.l-3.nr-6, .question.l-3.nr-5, .question.l-3.nr-4, .question.l-3.nr-2, .police.l-3.nr-4, .police.l-3.nr-3, .police.l-3.nr-1, .jail.l-3.nr-4, .jail.l-3.nr-2, .hands.l-3.nr-7, .hands.l-3.nr-6, .hands.l-3.nr-5, .hands.l-3.nr-4, .tap.l-3.nr-4, .tap.l-3.nr-3, .tap.l-3.nr-2, .diceBg.l-3.nr-5, .diceBg.l-3.nr-3, .diceBg.l-3.nr-2, .bulb.l-3.nr-4, .bulb.l-3.nr-3, .bulb.l-3.nr-2, .ring.l-3.nr-5, .ring.l-3.nr-4, .ring.l-3.nr-3, .ring.l-3.nr-2, .chest.l-3.nr-7, .chest.l-3.nr-6, .chest.l-3.nr-5, .chest.l-3.nr-2, .arrow.l-3.nr-10, .arrow.l-3.nr-8, .arrow.l-3.nr-7, .arrow.l-3.nr-6, .arrow.l-3.nr-3, .arrow.l-3.nr-2, .car.l-4.nr-9, .car.l-4.nr-8, .car.l-4.nr-7, .car.l-4.nr-6, .car.l-4.nr-5, .car.l-4.nr-2, .train.l-4.nr-5, .train.l-4.nr-2, .train.l-4.nr-1, .question.l-4.nr-7, .question.l-4.nr-6, .question.l-4.nr-5, .question.l-4.nr-4, .question.l-4.nr-2, .police.l-4.nr-4, .police.l-4.nr-3, .police.l-4.nr-1, .jail.l-4.nr-4, .jail.l-4.nr-2, .hands.l-4.nr-7, .hands.l-4.nr-6, .hands.l-4.nr-5, .hands.l-4.nr-4, .tap.l-4.nr-4, .tap.l-4.nr-3, .tap.l-4.nr-2, .diceBg.l-4.nr-5, .diceBg.l-4.nr-3, .diceBg.l-4.nr-2, .bulb.l-4.nr-4, .bulb.l-4.nr-3, .bulb.l-4.nr-2, .ring.l-4.nr-5, .ring.l-4.nr-4, .ring.l-4.nr-3, .ring.l-4.nr-2, .chest.l-4.nr-7, .chest.l-4.nr-6, .chest.l-4.nr-5, .chest.l-4.nr-2, .arrow.l-4.nr-10, .arrow.l-4.nr-8, .arrow.l-4.nr-7, .arrow.l-4.nr-6, .arrow.l-4.nr-3, .arrow.l-4.nr-2{display: none;}

  .car.nr-1{width: 5.7vw; height: 6vh;}
  .car.nr-2{width: 6.4vw; height: 6.8vh;}
  .car.nr-3{width: 5.3vw; height: 5.7vh;}
  .car.nr-4{width: 5.7vw; height: 6.1vh;}
  .car.nr-5{width: 5.7vw; height: 6vh;}
  .car.nr-6{width: 5.9vw; height: 6.3vh;}
  .car.nr-7{width: 5.3vw; height: 5.6vh;}
  .car.nr-8{width: 4.3vw; height: 4.6vh;}
  .car.nr-9{width: 5vw; height: 5.3vh;}
  .car.l-1.nr-1, .car.l-3.nr-1{left: 0.9vw;}
  .car.l-1.nr-1, .car.l-2.nr-1{top: 0.2vh;}
  .car.l-2.nr-1, .car.l-4.nr-1{left: 51.2vw;}
  .car.l-3.nr-1, .car.l-4.nr-1{top: 50.2vh;}

  .car.l-1.nr-2{left: 43.7vw;}
  .car.l-1.nr-2, .car.l-2.nr-2{top: 20.7vh;}
  .car.l-2.nr-2{left: 94vw;}
  
  .car.l-1.nr-3, .car.l-3.nr-3{left: 37vw;}
  .car.l-1.nr-3, .car.l-2.nr-3{top: 2.4vh;}
  .car.l-2.nr-3, .car.l-4.nr-3{left: 87.3vw;}
  .car.l-3.nr-3, .car.l-4.nr-3{top: 52.4vh;}

  .car.l-1.nr-4, .car.l-3.nr-4{left: 4.2vw;}
  .car.l-1.nr-4, .car.l-2.nr-4{top: 11.1vh;}
  .car.l-2.nr-4, .car.l-4.nr-4{left: 54.5vw;}
  .car.l-3.nr-4, .car.l-4.nr-4{top: 61.1vh;}

  .car.l-1.nr-5{left: 0.2vw;}
  .car.l-1.nr-5, .car.l-2.nr-5{top: 27vh;}
  .car.l-2.nr-5{left: 50.5vw;}

  .car.l-1.nr-6{left: 9.3vw;}
  .car.l-1.nr-6, .car.l-2.nr-6{top: 29.8vh;}
  .car.l-2.nr-6{left: 59.6vw;}

  .car.l-1.nr-7{left: 35.5vw;}
  .car.l-1.nr-7, .car.l-2.nr-7{top: 27.8vh;}
  .car.l-2.nr-7{left: 85.8vw;}

  .car.l-1.nr-8{left: 31.7vw;}
  .car.l-1.nr-8, .car.l-2.nr-8{top: 37.5vh;}
  .car.l-2.nr-8{left: 82vw;}

  .car.l-1.nr-9{left: 44.4vw;}
  .car.l-1.nr-9, .car.l-2.nr-9{top: 44.3vh;}
  .car.l-2.nr-9{left: 94.7vw;}

  .train.nr-1{width: 4.9vw; height: 5.4vh;}
  .train.nr-2{width: 5.1vw; height: 5.7vh;}
  .train.nr-3{width: 3.6vw; height: 4vh;}
  .train.nr-4{width: 3.5vw; height: 3.9vh;}
  .train.nr-5{width: 3.3vw; height: 3.6vh;}

  .train.l-1.nr-1{left: 20.8vw;}
  .train.l-1.nr-1, .train.l-2.nr-1{top: 32.5vh;}
  .train.l-2.nr-1{left: 71.1vw;}

  .train.l-1.nr-2{left: 0.1vw;}
  .train.l-1.nr-2, .train.l-2.nr-2{top: 33.2vh;}
  .train.l-2.nr-2{left: 50.4vw;}
  
  .train.l-1.nr-3, .train.l-3.nr-3{left: 26.3vw;}
  .train.l-1.nr-3, .train.l-2.nr-3{top: 10.8vh;}
  .train.l-2.nr-3, .train.l-4.nr-3{left: 76.6vw;}
  .train.l-3.nr-3, .train.l-4.nr-3{top: 60.8vh;}

  .train.l-1.nr-4, .train.l-3.nr-4{left: 46.7vw;}
  .train.l-1.nr-4, .train.l-2.nr-4{top: 0.2vh;}
  .train.l-2.nr-4, .train.l-4.nr-4{left: 97vw;}
  .train.l-3.nr-4, .train.l-4.nr-4{top: 50.2vh;}

  .train.l-1.nr-5{left: 39.8vw;}
  .train.l-1.nr-5, .train.l-2.nr-5{top: 16.5vh;}
  .train.l-2.nr-5{left: 90vw;}

  .question.nr-1{width: 3.6vw; height: 7.6vh; --tx: 0; --ty: 0;}
  .question.nr-2{width: 4.5vw; height: 9.5vh; --tx: -4.5vw; --ty: -5.27vh;}
  .question.nr-3{width: 3.5vw; height: 7.2vh; --tx: 3.5vw; --ty: -3.6vh;}
  .question.nr-4{width: 4.5vw; height: 9.3vh; --tx: -4.5vw; --ty: -4.65vh;}
  .question.nr-5{width: 4.5vw; height: 9.4vh; --tx: -4.5vw; --ty: -5.32vh;}
  .question.nr-6{width: 5.5vw; height: 11.6vh; --tx: 5.5vw; --ty: -5.15vh;}
  .question.nr-7{width: 3.8vw; height: 7.9vh; --tx: 0vw; --ty: -7.54vh;}
  .question.l-1.nr-1, .question.l-3.nr-1{left: 14.3vw;}
  .question.l-1.nr-1, .question.l-2.nr-1{top: 0.4vh;}
  .question.l-2.nr-1, .question.l-4.nr-1{left: 64.5vw;}
  .question.l-3.nr-1, .question.l-4.nr-1{top: 50.4vh;}

  .question.l-1.nr-2{left: 19.7vw;}
  .question.l-1.nr-2, .question.l-2.nr-2{top: 13.8vh;}
  .question.l-2.nr-2{left: 69.9vw;}
  
  .question.l-1.nr-3, .question.l-3.nr-3{left: 44.7vw;}
  .question.l-1.nr-3, .question.l-2.nr-3{top: 2.2vh;}
  .question.l-2.nr-3, .question.l-4.nr-3{left: 94.9vw;}
  .question.l-3.nr-3, .question.l-4.nr-3{top: 52.2vh;}

  .question.l-1.nr-4{left: 43.3vw;}
  .question.l-1.nr-4, .question.l-2.nr-4{top: 25.8vh;}
  .question.l-2.nr-4{left: 93.5vw;}

  .question.l-1.nr-5{left: 2.7vw;}
  .question.l-1.nr-5, .question.l-2.nr-5{top: 14.6vh;}
  .question.l-2.nr-5{left: 52.9vw;}

  .question.l-1.nr-6{left: 4.3vw;}
  .question.l-1.nr-6, .question.l-2.nr-6{top: 41.9vh;}
  .question.l-2.nr-6{left: 54.5vw;}

  .question.l-1.nr-7{left: 33.4vw;}
  .question.l-1.nr-7, .question.l-2.nr-7{top: 41.9vh;}
  .question.l-2.nr-7{left: 83.6vw;}

  .arrow.nr-1, .arrow.nr-2, .arrow.nr-3, .arrow.nr-4{width: 10.2vw; height: 2vh;}
  .arrow.nr-5{width: 8.4vw; height: 1.6vh;}
  .arrow.nr-6{width: 9.7vw; height: 1.9vh;}
  .arrow.nr-7{width: 12vw; height: 2.4vh;}
  .arrow.nr-8{width: 9.1vw; height: 1.8vh;}
  .arrow.nr-9{width: 10.5vw; height: 2.1vh;}
  .arrow.nr-10{width: 8.5vw; height: 1.7vh;}
  .arrow.l-1.nr-1, .arrow.l-3.nr-1{left: 30vw;}
  .arrow.l-1.nr-1, .arrow.l-2.nr-1{top: 8.2vh;}
  .arrow.l-2.nr-1, .arrow.l-4.nr-1{left: 80.2vw;}
  .arrow.l-3.nr-1, .arrow.l-4.nr-1{top: 58.2vh;}

  .arrow.l-1.nr-2{left: 24.2vw;}
  .arrow.l-1.nr-2, .arrow.l-2.nr-2{top: 21.5vh;}
  .arrow.l-2.nr-2{left: 74.4vw;}
  
  .arrow.l-1.nr-3{left: 5.7vw;}
  .arrow.l-1.nr-3, .arrow.l-2.nr-3{top: 23vh;}
  .arrow.l-2.nr-3{left: 55.9vw;}

  .arrow.l-1.nr-4, .arrow.l-3.nr-4{left: 10.7vw;}
  .arrow.l-1.nr-4, .arrow.l-2.nr-4{top: 14.4vh;}
  .arrow.l-2.nr-4, .arrow.l-4.nr-4{left: 60.9vw;}
  .arrow.l-3.nr-4, .arrow.l-4.nr-4{top: 64.4vh;}

  .arrow.l-1.nr-5, .arrow.l-3.nr-5{left: 15.5vw;}
  .arrow.l-1.nr-5, .arrow.l-2.nr-5{top: 9.4vh;}
  .arrow.l-2.nr-5, .arrow.l-4.nr-5{left: 65.7vw;}
  .arrow.l-3.nr-5, .arrow.l-4.nr-5{top: 59.4vh;}

  .arrow.l-1.nr-6{left: 14vw;}
  .arrow.l-1.nr-6, .arrow.l-2.nr-6{top: 36.9vh;}
  .arrow.l-2.nr-6{left: 64.2vw;}

  .arrow.l-1.nr-7{left: 10.7vw;}
  .arrow.l-1.nr-7, .arrow.l-2.nr-7{top: 40.9vh;}
  .arrow.l-2.nr-7{left: 60.9vw;}

  .arrow.l-1.nr-8{left: 29.9vw;}
  .arrow.l-1.nr-8, .arrow.l-2.nr-8{top: 35.3vh;}
  .arrow.l-2.nr-8{left: 80.1vw;}

  .arrow.l-1.nr-9, .arrow.l-3.nr-9{left: 35.8vw;}
  .arrow.l-1.nr-9, .arrow.l-2.nr-9{top: 0.1vh;}
  .arrow.l-2.nr-9, .arrow.l-4.nr-9{left: 86vw;}
  .arrow.l-3.nr-9, .arrow.l-4.nr-9{top: 50.1vh;}

  .arrow.l-1.nr-10{left: 38.3vw;}
  .arrow.l-1.nr-10, .arrow.l-2.nr-10{top: 23.2vh;}
  .arrow.l-2.nr-10{left: 88.5vw;}

  .chest.nr-1, .chest.nr-2, .chest.nr-3, .chest.nr-4, .chest.nr-6, .chest.nr-7{width: 7.2vw; height: 5.9vh;}
  .chest.nr-5{width: 9vw; height: 7.5vh;}
  .chest.l-1.nr-1, .chest.l-3.nr-1{left: 37.2vw;}
  .chest.l-1.nr-1, .chest.l-2.nr-1{top: 10.3vh;}
  .chest.l-2.nr-1, .chest.l-4.nr-1{left: 87.4vw;}
  .chest.l-3.nr-1, .chest.l-4.nr-1{top: 60.3vh;}

  .chest.l-1.nr-2{left: 23.9vw;}
  .chest.l-1.nr-2, .chest.l-2.nr-2{top: 28.3vh;}
  .chest.l-2.nr-2{left: 74.1vw;}
  
  .chest.l-1.nr-3, .chest.l-3.nr-3{left: 6.8vw;}
  .chest.l-1.nr-3, .chest.l-2.nr-3{top: 6.6vh;}
  .chest.l-2.nr-3, .chest.l-4.nr-3{left: 57vw;}
  .chest.l-3.nr-3, .chest.l-4.nr-3{top: 56.6vh;}

  .chest.l-1.nr-4, .chest.l-3.nr-4{left: 24.7vw;}
  .chest.l-1.nr-4, .chest.l-2.nr-4{top: 1.2vh;}
  .chest.l-2.nr-4, .chest.l-4.nr-4{left: 74.9vw;}
  .chest.l-3.nr-4, .chest.l-4.nr-4{top: 51.2vh;}

  .chest.l-1.nr-5{left: 4.5vw;}
  .chest.l-1.nr-5, .chest.l-2.nr-5{top: 38.6vh;}
  .chest.l-2.nr-5{left: 54.7vw;}

  .chest.l-1.nr-6{left: 36.4vw;}
  .chest.l-1.nr-6, .chest.l-2.nr-6{top: 38.3vh;}
  .chest.l-2.nr-6{left: 86.6vw;}

  .chest.l-1.nr-7{left: 18.9vw;}
  .chest.l-1.nr-7, .chest.l-2.nr-7{top: 43.3vh;}
  .chest.l-2.nr-7{left: 69.1vw;}

  .ring.nr-1, .ring.nr-2{width: 4.3vw; height: 3.7vh;}
  .ring.nr-3{width: 4vw; height: 3.4vh;}
  .ring.nr-4{width: 3.7vw; height: 3.1vh;}
  .ring.nr-5{width: 5.5vw; height: 4.7vh;}
  .ring.l-1.nr-1, .ring.l-3.nr-1{left: 24.7vw;}
  .ring.l-1.nr-1, .ring.l-2.nr-1{top: 7.5vh;}
  .ring.l-2.nr-1, .ring.l-4.nr-1{left: 74.9vw;}
  .ring.l-3.nr-1, .ring.l-4.nr-1{top: 57.5vh;}

  .ring.l-1.nr-2{left: 24.3vw;}
  .ring.l-1.nr-2, .ring.l-2.nr-2{top: 21.8vh;}
  .ring.l-2.nr-2{left: 74.5vw;}
  
  .ring.l-1.nr-3{left: 5vw;}
  .ring.l-1.nr-3, .ring.l-2.nr-3{top: 33.2vh;}
  .ring.l-2.nr-3{left: 55.2vw;}

  .ring.l-1.nr-4{left: 32.4vw;}
  .ring.l-1.nr-4, .ring.l-2.nr-4{top: 32vh;}
  .ring.l-2.nr-4{left: 82.6vw;}

  .ring.l-1.nr-5{left: 20.1vw;}
  .ring.l-1.nr-5, .ring.l-2.nr-5{top: 37.6vh;}
  .ring.l-2.nr-5{left: 70.3vw;}

  .bulb.nr-1{width: 5.2vw; height: 6vh;}
  .bulb.nr-2{width: 5.7vw; height: 6.5vh;}
  .bulb.nr-3{width: 3.2vw; height: 3.7vh;}
  .bulb.nr-4{width: 5.8vw; height: 6.7vh;}
  .bulb.nr-5{width: 3vw; height: 3.4vh;}
  .bulb.l-1.nr-1, .bulb.l-3.nr-1{left: 45vw;}
  .bulb.l-1.nr-1, .bulb.l-2.nr-1{top: 7.7vh;}
  .bulb.l-2.nr-1, .bulb.l-4.nr-1{left: 95.2vw;}
  .bulb.l-3.nr-1, .bulb.l-4.nr-1{top: 57.7vh;}

  .bulb.l-1.nr-2{left: 40.5vw;}
  .bulb.l-1.nr-2, .bulb.l-2.nr-2{top: 32.8vh;}
  .bulb.l-2.nr-2{left: 90.7vw;}
  
  .bulb.l-1.nr-3{left: 12vw;}
  .bulb.l-1.nr-3, .bulb.l-2.nr-3{top: 36.3vh;}
  .bulb.l-2.nr-3{left: 62.2vw;}

  .bulb.l-1.nr-4{left: 10.3vw;}
  .bulb.l-1.nr-4, .bulb.l-2.nr-4{top: 16.5vh;}
  .bulb.l-2.nr-4{left: 60.5vw;}

  .bulb.l-1.nr-5, .bulb.l-3.nr-5{left: 26.5vw;}
  .bulb.l-1.nr-5, .bulb.l-2.nr-5{top: 14.8vh;}
  .bulb.l-2.nr-5, .bulb.l-4.nr-5{left: 76.7vw;}
  .bulb.l-3.nr-5, .bulb.l-4.nr-5{top: 64.8vh;}

  .diceBg.nr-1{width: 4.1vw; height: 7vh;}
  .diceBg.nr-2{width: 3.5vw; height: 5.9vh;}
  .diceBg.nr-3{width: 3vw; height: 5.1vh;}
  .diceBg.nr-4{width: 3.1vw; height: 5.3vh;}
  .diceBg.nr-5{width: 2.1vw; height: 3.5vh;}
  .diceBg.l-1.nr-1, .diceBg.l-3.nr-1{left: 21.5vw;}
  .diceBg.l-1.nr-1, .diceBg.l-2.nr-1{top: 8.4vh;}
  .diceBg.l-2.nr-1, .diceBg.l-4.nr-1{left: 71.7vw;}
  .diceBg.l-3.nr-1, .diceBg.l-4.nr-1{top: 58.4vh;}

  .diceBg.l-1.nr-2{left: 46.6vw;}
  .diceBg.l-1.nr-2, .diceBg.l-2.nr-2{top: 33.9vh;}
  .diceBg.l-2.nr-2{left: 96.8vw;}
  
  .diceBg.l-1.nr-3{left: 0.5vw;}
  .diceBg.l-1.nr-3, .diceBg.l-2.nr-3{top: 39.4vh;}
  .diceBg.l-2.nr-3{left: 50.7vw;}

  .diceBg.l-1.nr-4, .diceBg.l-3.nr-4{left: 0.3vw;}
  .diceBg.l-1.nr-4, .diceBg.l-2.nr-4{top: 12.2vh;}
  .diceBg.l-2.nr-4, .diceBg.l-4.nr-4{left: 50.5vw;}
  .diceBg.l-3.nr-4, .diceBg.l-4.nr-4{top: 62.2vh;}

  .diceBg.l-1.nr-5{left: 36.8vw;}
  .diceBg.l-1.nr-5, .diceBg.l-2.nr-5{top: 15.9vh;}
  .diceBg.l-2.nr-5{left: 87vw;}

  .hands.nr-1, .hands.nr-5{width: 7.2vw; height: 5.6vh;}
  .hands.nr-2{width: 7.7vw; height: 5.9vh;}
  .hands.nr-3, .hands.nr-4, .hands.nr-6, .hands.nr-7{width: 6.2vw; height: 4.8vh;}
  .hands.l-1.nr-1, .hands.l-3.nr-1{left: 0.1vw;}
  .hands.l-1.nr-1, .hands.l-2.nr-1{top: 6vh;}
  .hands.l-2.nr-1, .hands.l-4.nr-1{left: 50.3vw;}
  .hands.l-3.nr-1, .hands.l-4.nr-1{top: 56vh;}

  .hands.l-1.nr-2, .hands.l-3.nr-2{left: 42.8vw;}
  .hands.l-1.nr-2, .hands.l-2.nr-2{top: 13.4vh;}
  .hands.l-2.nr-2, .hands.l-4.nr-2{left: 93vw;}
  .hands.l-3.nr-2, .hands.l-4.nr-2{top: 63.4vh;}
  
  .hands.l-1.nr-3, .hands.l-3.nr-3{left: 31.1vw;}
  .hands.l-1.nr-3, .hands.l-2.nr-3{top: 1.5vh;}
  .hands.l-2.nr-3, .hands.l-4.nr-3{left: 81.3vw;}
  .hands.l-3.nr-3, .hands.l-4.nr-3{top: 51.5vh;}

  .hands.l-1.nr-4{left: 29.8vw;}
  .hands.l-1.nr-4, .hands.l-2.nr-4{top: 25.7vh;}
  .hands.l-2.nr-4{left: 80vw;}

  .hands.l-1.nr-5{left: 16.2vw;}
  .hands.l-1.nr-5, .hands.l-2.nr-5{top: 20.1vh;}
  .hands.l-2.nr-5{left: 66.4vw;}

  .hands.l-1.nr-6{left: -0.5vw;}
  .hands.l-1.nr-6, .hands.l-2.nr-6{top: 20.7vh;}
  .hands.l-2.nr-6{left: 49.7vw;}

  .hands.l-1.nr-7{left: 43.5vw;}
  .hands.l-1.nr-7, .hands.l-2.nr-7{top: 39.5vh;}
  .hands.l-2.nr-7{left: 93.7vw;}

  .tap.nr-1{width: 7.3vw; height: 6.6vh;}
  .tap.nr-2{width: 6.4vw; height: 5.7vh;}
  .tap.nr-3{width: 5.7vw; height: 5.1vh;}
  .tap.nr-4{width: 6vw; height: 5.4vh;}
  .tap.l-1.nr-1, .tap.l-3.nr-1{left: 6.9vw;}
  .tap.l-1.nr-1, .tap.l-2.nr-1{top: 0.1vh;}
  .tap.l-2.nr-1, .tap.l-4.nr-1{left: 57.1vw;}
  .tap.l-3.nr-1, .tap.l-4.nr-1{top: 50.1vh;}

  .tap.l-1.nr-2{left: 35.3vw;}
  .tap.l-1.nr-2, .tap.l-2.nr-2{top: 20.4vh;}
  .tap.l-2.nr-2{left: 85.5vw;}
  
  .tap.l-1.nr-3{left: 5.8vw;}
  .tap.l-1.nr-3, .tap.l-2.nr-3{top: 25.6vh;}
  .tap.l-2.nr-3{left: 56vw;}

  .tap.l-1.nr-4{left: 37.4vw;}
  .tap.l-1.nr-4, .tap.l-2.nr-4{top: 44.4vh;}
  .tap.l-2.nr-4{left: 87.6vw;}

  .jail.nr-1, .jail.nr-2, .jail.nr-4{width: 5.1vw; height: 5.1vh;}
  .jail.nr-3{width: 6vw; height: 6vh;}
  .jail.l-1.nr-1, .jail.l-3.nr-1{left: 13.8vw;}
  .jail.l-1.nr-1, .jail.l-2.nr-1{top: 8.8vh;}
  .jail.l-2.nr-1, .jail.l-4.nr-1{left: 64vw;}
  .jail.l-3.nr-1, .jail.l-4.nr-1{top: 58.8vh;}

  .jail.l-1.nr-2{left: 25.8vw;}
  .jail.l-1.nr-2, .jail.l-2.nr-2{top: 37.5vh;}
  .jail.l-2.nr-2{left: 76vw;}
  
  .jail.l-1.nr-3, .jail.l-3.nr-3{left: 30.4vw;}
  .jail.l-1.nr-3, .jail.l-2.nr-3{top: 10.7vh;}
  .jail.l-2.nr-3, .jail.l-4.nr-3{left: 80.6vw;}
  .jail.l-3.nr-3, .jail.l-4.nr-3{top: 60.7vh;}

  .jail.l-1.nr-4{left: 12.5vw;}
  .jail.l-1.nr-4, .jail.l-2.nr-4{top: 25.4vh;}
  .jail.l-2.nr-4{left: 62.7vw;}

  .police.nr-1, .police.nr-3{width: 6.6vw; height: 6.3vh;}
  .police.nr-2{width: 7.8vw; height: 7.5vh;}
  .police.nr-4{width: 6.8vw; height: 6.5vh;}
  .police.l-1.nr-1{left: 30.5vw;}
  .police.l-1.nr-1, .police.l-2.nr-1{top: 17.9vh;}
  .police.l-2.nr-1{left: 80.7vw;}

  .police.l-1.nr-2, .police.l-3.nr-2{left: 18vw;}
  .police.l-1.nr-2, .police.l-2.nr-2{top: 0.2vh;}
  .police.l-2.nr-2, .police.l-4.nr-2{left: 68.2vw;}
  .police.l-3.nr-2, .police.l-4.nr-2{top: 50.2vh;}
  
  .police.l-1.nr-3{left: 18.2vw;}
  .police.l-1.nr-3, .police.l-2.nr-3{top: 25.5vh;}
  .police.l-2.nr-3{left: 68.4vw;}

  .police.l-1.nr-4{left: 26vw;}
  .police.l-1.nr-4, .police.l-2.nr-4{top: 43.2vh;}
  .police.l-2.nr-4{left: 76.2vw;}
}
@media only screen and (orientation : portrait){
  #card-club{--tx: -28.9vw; --ty: -21.3vh; --r: 7.8deg;}
  #card-spade{--tx: -14.1vw; --ty: -16.9vh; --r: 19.6deg;}
  #card-diamond{--tx: -1.6vw; --ty: -10.7vh;--r: 32deg;}
  #card-heart{--tx: 9.5vw; --ty: -3.6vh; --r: 43.5deg;}
  #card-back{--tx: 19.5vw; --ty: 5.1vh; --r:58.5deg;}
  #letter-O-1, #letter-R, #letter-F-3, #letter-S{--delay-1: .2s; --delay-2: 2.9s;}
  #letter-F-1, #letter-E, #letter-U, #letter-O-2{--delay-1: .1s; --delay-2: 3s;}
  #letter-F-2, #letter-C{--delay-1: 0s; --delay-2: 3.1s;}
  .row-1.col-1{--delay-1: .7s; --delay-2: 2.5s;}
  .row-1.col-2{--delay-1: .6s; --delay-2: 2.6s;}
  .row-1.col-3{--delay-1: .5s; --delay-2: 2.7s;}
  .row-2.col-1{--delay-1: .9s; --delay-2: 2.3s;}
  .row-2.col-2{--delay-1: .8s; --delay-2: 2.4s;}
  .row-2.col-3{--delay-1: .7s; --delay-2: 2.5s;}
  .row-3.col-1{--delay-1: 1.1s; --delay-2: 2.1s;}
  .row-3.col-2{--delay-1: 1s; --delay-2: 2.2s;}
  .row-3.col-3{--delay-1: .9s; --delay-2: 2.3s;}
  .row-4.col-1{--delay-1: 1.3s; --delay-2: 1.9s;}
  .row-4.col-2{--delay-1: 1.2s; --delay-2: 2s;}
  .row-4.col-3{--delay-1: 1.1s; --delay-2: 2.1s;}
  #card-club, #card-spade, #card-diamond, #card-heart, #card-back{--delay: 4s;}
  #cards-container, #cards, .card-back-ele{--delay: 3.5s;}
  #dice-roll-1, #text-intro{--delay: 3.8s;}
  #dice-roll-2{--delay: 3.6s;}
  #chip-2{--delay: 3.7s;}
  #chip-1{--delay: 3.9s;}
  .description{margin: 0;}
  #highlights{flex-direction: column;}
  .highlight{width: 90vw;}
  #introduction > .border, .highlight-icon{display: none !important;}
  #highlights > .border{margin: 2vh 0; height: 1vh;}
  #first-design, #second-design{flex-direction: column; padding-bottom: 5vh;}
  #first-design > .border, #second-design > .border, #first-design > .description, #second-design > .description{flex: 0 0 auto;}
  #first-design > .border, #second-design > .border{margin-bottom: 5vh;}
  #first-design > .description, #second-design > .description{margin-top: auto;}
  #first-design > .static, #second-design > .static, #first-design > .description, #second-design > .description{width: 90vw; overflow-y: visible;}
  #first-design > .static, #second-design > .static{flex: 1 1 auto; min-height: 0; background-position: center bottom;}
  #first-design > .static{background-image: url("../images/mca_phone-2_2_orange.png"); background-image: -webkit-image-set(url("../images/mca_phone-2_2_orange.avif") 1x, url("../images/mca_phone-2_2_orange.webp") 1x, url("../images/mca_phone-2_2_orange.png")  1x); background-image: image-set(url("../images/mca_phone-2_2_orange.avif") 1x, url("../images/mca_phone-2_2_orange.webp") 1x, url("../images/mca_phone-2_2_orange.png")  1x);}
  #second-design > .static{background-image: url("../images/mca_phone-1_2_green.png"); background-image: -webkit-image-set(url("../images/mca_phone-1_2_green.avif") 1x, url("../images/mca_phone-1_2_green.webp") 1x, url("../images/mca_phone-1_2_green.png")  1x); background-image: image-set(url("../images/mca_phone-1_2_green.avif") 1x, url("../images/mca_phone-1_2_green.webp") 1x, url("../images/mca_phone-1_2_green.png")  1x);}
  #end-videos{padding-bottom: 2vh;}
  #end-videos > .border{margin-bottom: 2vh;}
  video{aspect-ratio: 4 / 5;}
  .zoom-in.anim-in-view{animation-timing-function : ease-in-out; transform-origin: center bottom; animation-duration: 1s;}
}
@media only screen and (orientation : portrait) and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1){
  .card-container{width: var(--card-width-1); height: calc(var(--card-width-1) * 11 / 7);}
  .card{border-radius: 3.25vw;}
   #cards{--start-scale: 3.2;}
  .stroke{text-shadow: 2px 2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, -2px -2px 0 #fff, 2px 0px 0 #fff, 0px 2px 0 #fff, -2px 0px 0 #fff, 0px -2px 0 #fff;}
  .dice{--dice-width: calc(var(--card-width-1) * .37);}
  #dice-roll-1{--tx: 63vw; --ty: 6.7vh; --orgx: 53vw; --orgy: -28vh;}
  #dice-roll-2{--tx: 79vw; --ty: 16vh; --orgx: 69vw; --orgy: -36vh;}
  .chip{--chip-width: calc(var(--card-width-1) * .81);}
  #chip-2{--tx: 2vw; --ty: 48vh;}
  #chip-1{--tx: -5vw; --ty: 43vh;}
  .num{font-size: 35vh; line-height: 40vh; height:35vh;}
  #FS-text{font-size: 10vh; line-height: 10vh; height: 10vh;}
  #first-design > .static::after, #second-design > .static::after{width: 30.8vw; height: 10vh;}
  #first-design > .border::before, #second-design > .border::before{width: 29.4vw; height: 10.6vh;}
  #first-design > .border::after, #second-design > .border::after{width: 28.2vw; height: 9.3vh;}
  #first-design > .static::before, #second-design > .static::before{width: 23vw; height: 12.7vh;}
  #first-design > .description::after, #second-design > .description::after{width: 30.7vw; height: 13.8vh;}
  #first-design > .description::before, #second-design > .description::before{width: 22.4vw; height: 16.4vh;}
  #first-design > .static::after{--tx: 13vw; --ty: -1.8vh;}
  #first-design > .border::before{--tx: 65vw; --ty: 55vh;}
  #first-design > .border::after{--tx: 1vw; --ty: 53vh;}
  #first-design > .static::before{--tx: 80vw; --ty: 26vh;}
  #first-design > .description::after{--tx: 80vw; --ty: 5vh;}
  #first-design > .description::before{--tx: -5vw; --ty: 10vh;}
  #second-design > .static::after{--tx: 5vw; --ty: -1vh;}
  #second-design > .border::before{--tx: 65vw; --ty: 50vh;}
  #second-design > .border::after{--tx: -7vw; --ty: 50vh;}
  #second-design > .static::before{--tx: 80vw; --ty: 2.5vh;}
  #second-design > .description::after{--tx: 80vw; --ty: 24vh;}
  #second-design > .description::before{--tx: -3vw; --ty: 15vh;}
  .main-video{max-height: 80vh;}
  /*----------------------pattern------------------------*/
  .train.l-2.nr-5, .train.l-2.nr-4, .train.l-2.nr-3, .question.l-2.nr-7, .question.l-2.nr-4, .question.l-2.nr-3, .police.l-2.nr-4, .police.l-2.nr-1, .jail.l-2.nr-3, .jail.l-2.nr-2, .hands.l-2.nr-7, .hands.l-2.nr-4, .hands.l-2.nr-3, .hands.l-2.nr-2, .tap.l-2.nr-4, .tap.l-2.nr-2, .diceBg.l-2.nr-5, .diceBg.l-2.nr-2, .car.l-2.nr-9, .car.l-2.nr-8, .car.l-2.nr-7, .car.l-2.nr-3, .car.l-2.nr-2, .bulb.l-2.nr-5, .bulb.l-2.nr-2, .bulb.l-2.nr-1, .ring.l-2.nr-4, .ring.l-2.nr-2, .ring.l-2.nr-1, .chest.l-2.nr-6, .chest.l-2.nr-4, .chest.l-2.nr-2, .chest.l-2.nr-1, .arrow.l-2.nr-10, .arrow.l-2.nr-9, .arrow.l-2.nr-8, .arrow.l-2.nr-2, .arrow.l-2.nr-1, .car.l-3.nr-9, .car.l-3.nr-8, .car.l-3.nr-7, .car.l-3.nr-6, .car.l-3.nr-5, .car.l-3.nr-2, .train.l-3.nr-5, .train.l-3.nr-2, .train.l-3.nr-1, .question.l-3.nr-7, .question.l-3.nr-6, .question.l-3.nr-5, .question.l-3.nr-4, .question.l-3.nr-2, .police.l-3.nr-4, .police.l-3.nr-3, .police.l-3.nr-1, .jail.l-3.nr-4, .jail.l-3.nr-2, .hands.l-3.nr-7, .hands.l-3.nr-6, .hands.l-3.nr-5, .hands.l-3.nr-4, .tap.l-3.nr-4, .tap.l-3.nr-3, .tap.l-3.nr-2, .diceBg.l-3.nr-5, .diceBg.l-3.nr-3, .diceBg.l-3.nr-2, .bulb.l-3.nr-4, .bulb.l-3.nr-3, .bulb.l-3.nr-2, .ring.l-3.nr-5, .ring.l-3.nr-4, .ring.l-3.nr-3, .ring.l-3.nr-2, .chest.l-3.nr-7, .chest.l-3.nr-6, .chest.l-3.nr-5, .chest.l-3.nr-2, .arrow.l-3.nr-10, .arrow.l-3.nr-8, .arrow.l-3.nr-7, .arrow.l-3.nr-6, .arrow.l-3.nr-3, .arrow.l-3.nr-2, .train.l-4.nr-5, .train.l-4.nr-4, .train.l-4.nr-3, .train.l-4.nr-2, .train.l-4.nr-1, .question.l-4.nr-7, .question.l-4.nr-6, .question.l-4.nr-5, .question.l-4.nr-4, .question.l-4.nr-3, .question.l-4.nr-2, .police.l-4.nr-4, .police.l-4.nr-3, .police.l-4.nr-1, .jail.l-4.nr-4, .jail.l-4.nr-3, .jail.l-4.nr-2, .hands.l-4.nr-7, .hands.l-4.nr-6, .hands.l-4.nr-5, .hands.l-4.nr-4, .hands.l-4.nr-3, .hands.l-4.nr-2, .tap.l-4.nr-4, .tap.l-4.nr-3, .tap.l-4.nr-2, .diceBg.l-4.nr-5, .diceBg.l-4.nr-3, .diceBg.l-4.nr-2, .car.l-4.nr-9, .car.l-4.nr-8, .car.l-4.nr-7, .car.l-4.nr-6, .car.l-4.nr-5, .car.l-4.nr-3, .car.l-4.nr-2, .bulb.l-4.nr-5, .bulb.l-4.nr-4, .bulb.l-4.nr-3, .bulb.l-4.nr-2, .bulb.l-4.nr-1, .ring.l-4.nr-5, .ring.l-4.nr-4, .ring.l-4.nr-3, .ring.l-4.nr-2, .ring.l-4.nr-1, .chest.l-4.nr-7, .chest.l-4.nr-6, .chest.l-4.nr-5, .chest.l-4.nr-4, .chest.l-4.nr-2, .chest.l-4.nr-1, .arrow.l-4.nr-10, .arrow.l-4.nr-9, .arrow.l-4.nr-8, .arrow.l-4.nr-7, .arrow.l-4.nr-6, .arrow.l-4.nr-3, .arrow.l-4.nr-2, .arrow.l-4.nr-1{display: none;}


  .car.nr-1, .car.nr-5{width: 7.6vw; height: 6vh;}
  .car.nr-2{width: 8.6vw; height: 6.8vh;}
  .car.nr-3{width: 7.1vw; height: 5.7vh;}
  .car.nr-4{width: 7.7vw; height: 6.1vh;}
  .car.nr-6{width: 7.9vw; height: 6.3vh;}
  .car.nr-7{width: 7.1vw; height: 5.6vh;}
  .car.nr-8{width: 5.8vw; height: 4.6vh;}
  .car.nr-9{width: 6.6vw; height: 5.3vh;}
  .car.l-1.nr-1, .car.l-3.nr-1{left: 1.2vw;}
  .car.l-1.nr-1, .car.l-2.nr-1{top: 0.2vh;}
  .car.l-2.nr-1, .car.l-4.nr-1{left: 68.2vw;}
  .car.l-3.nr-1, .car.l-4.nr-1{top: 50.2vh;}

  .car.l-1.nr-2{left: 58.2vw; top: 20.7vh;}
  
  .car.l-1.nr-3, .car.l-3.nr-3{left: 49.3vw;}
  .car.l-1.nr-3{top: 2.4vh;}
  .car.l-3.nr-3{top: 52.4vh;}

  .car.l-1.nr-4, .car.l-3.nr-4{left: 5.6vw;}
  .car.l-1.nr-4, .car.l-2.nr-4{top: 11.1vh;}
  .car.l-2.nr-4, .car.l-4.nr-4{left: 72.6vw;}
  .car.l-3.nr-4, .car.l-4.nr-4{top: 61.1vh;}

  .car.l-1.nr-5{left: 0.3vw;}
  .car.l-1.nr-5, .car.l-2.nr-5{top: 27vh;}
  .car.l-2.nr-5{left: 67.3vw;}

  .car.l-1.nr-6{left: 12.4vw;}
  .car.l-1.nr-6, .car.l-2.nr-6{top: 29.8vh;}
  .car.l-2.nr-6{left: 79.4vw;}

  .car.l-1.nr-7{left: 47.3vw; top: 27.8vh;}

  .car.l-1.nr-8{left: 42.2vw; top: 37.5vh;}

  .car.l-1.nr-9{left: 59.2vw; top: 44.3vh;}

  .train.nr-1{width: 6.5vw; height: 5.4vh;}
  .train.nr-2{width: 6.9vw; height: 5.7vh;}
  .train.nr-3{width: 4.8vw; height: 4vh;}
  .train.nr-4{width: 4.7vw; height: 3.9vh;}
  .train.nr-5{width: 4.4vw; height: 3.6vh;}

  .train.l-1.nr-1{left: 27.8vw;}
  .train.l-1.nr-1, .train.l-2.nr-1{top: 32.5vh;}
  .train.l-2.nr-1{left: 94.8vw;}

  .train.l-1.nr-2{left: 0.2vw;}
  .train.l-1.nr-2, .train.l-2.nr-2{top: 33.2vh;}
  .train.l-2.nr-2{left: 67.2vw;}
  
  .train.l-1.nr-3, .train.l-3.nr-3{left: 35vw;}
  .train.l-1.nr-3{top: 10.8vh;}
  .train.l-3.nr-3{top: 60.8vh;}

  .train.l-1.nr-4, .train.l-3.nr-4{left: 62.2vw;}
  .train.l-1.nr-4{top: 0.2vh;}
  .train.l-3.nr-4{top: 50.2vh;}

  .train.l-1.nr-5{left: 53vw; top: 16.5vh;}

  .question.nr-1{width: 4.8vw; height: 7.6vh; --tx: 0; --ty: 0;}
  .question.nr-2{width: 6.1vw; height: 9.5vh; --tx: -6.1vw; --ty: -5.27vh;}
  .question.nr-3{width: 4.6vw; height: 7.2vh; --tx: 4.6vw; --ty: -3.6vh;}
  .question.nr-4{width: 6vw; height: 9.3vh; --tx: -6vw; --ty: -4.65vh;}
  .question.nr-5{width: 6vw; height: 9.4vh; --tx: -6vw; --ty: -5.32vh;}
  .question.nr-6{width: 7.4vw; height: 11.6vh; --tx: 7.4vw; --ty: -5.15vh;}
  .question.nr-7{width: 5vw; height: 7.9vh; --tx: 0vw; --ty: -7.54vh;}
  .question.l-1.nr-1, .question.l-3.nr-1{left: 19vw;}
  .question.l-1.nr-1, .question.l-2.nr-1{top: 0.4vh;}
  .question.l-2.nr-1, .question.l-4.nr-1{left: 86vw;}
  .question.l-3.nr-1, .question.l-4.nr-1{top: 50.4vh;}

  .question.l-1.nr-2{left: 26.3vw;}
  .question.l-1.nr-2, .question.l-2.nr-2{top: 13.8vh;}
  .question.l-2.nr-2{left: 93.3vw;}
  
  .question.l-1.nr-3, .question.l-3.nr-3{left: 59.6vw;}
  .question.l-1.nr-3{top: 2.2vh;}
  .question.l-3.nr-3{top: 52.2vh;}

  .question.l-1.nr-4{left: 57.7vw; top: 25.8vh;}

  .question.l-1.nr-5{left: 3.6vw;}
  .question.l-1.nr-5, .question.l-2.nr-5{top: 14.6vh;}
  .question.l-2.nr-5{left: 70.6vw;}

  .question.l-1.nr-6{left: 5.7vw;}
  .question.l-1.nr-6, .question.l-2.nr-6{top: 41.9vh;}
  .question.l-2.nr-6{left: 72.7vw;}

  .question.l-1.nr-7{left: 44.5vw; top: 41.9vh;}

  .arrow.nr-1, .arrow.nr-2, .arrow.nr-3, .arrow.nr-4{width: 13.6vw; height: 2vh;}
  .arrow.nr-5{width: 11.2vw; height: 1.6vh;}
  .arrow.nr-6{width: 13vw; height: 1.9vh;}
  .arrow.nr-7{width: 16vw; height: 2.4vh;}
  .arrow.nr-8{width: 12.1vw; height: 1.8vh;}
  .arrow.nr-9{width: 14vw; height: 2.1vh;}
  .arrow.nr-10{width: 11.3vw; height: 1.7vh;}
  .arrow.l-1.nr-1, .arrow.l-3.nr-1{left: 40vw;}
  .arrow.l-1.nr-1{top: 8.2vh;}
  .arrow.l-3.nr-1{top: 58.2vh;}

  .arrow.l-1.nr-2{left: 32.3vw; top: 21.5vh;}
  
  .arrow.l-1.nr-3{left: 7.6vw;}
  .arrow.l-1.nr-3, .arrow.l-2.nr-3{top: 23vh;}
  .arrow.l-2.nr-3{left: 74.6vw;}

  .arrow.l-1.nr-4, .arrow.l-3.nr-4{left: 14.3vw;}
  .arrow.l-1.nr-4, .arrow.l-2.nr-4{top: 14.4vh;}
  .arrow.l-2.nr-4, .arrow.l-4.nr-4{left: 81.3vw;}
  .arrow.l-3.nr-4, .arrow.l-4.nr-4{top: 64.4vh;}

  .arrow.l-1.nr-5, .arrow.l-3.nr-5{left: 20.6vw;}
  .arrow.l-1.nr-5, .arrow.l-2.nr-5{top: 9.4vh;}
  .arrow.l-2.nr-5, .arrow.l-4.nr-5{left: 87.6vw;}
  .arrow.l-3.nr-5, .arrow.l-4.nr-5{top: 59.4vh;}

  .arrow.l-1.nr-6{left: 18.7vw;}
  .arrow.l-1.nr-6, .arrow.l-2.nr-6{top: 36.9vh;}
  .arrow.l-2.nr-6{left: 85.7vw;}

  .arrow.l-1.nr-7{left: 14.2vw;}
  .arrow.l-1.nr-7, .arrow.l-2.nr-7{top: 40.9vh;}
  .arrow.l-2.nr-7{left: 81.2vw;}

  .arrow.l-1.nr-8{left: 39.8vw; top: 35.3vh;}

  .arrow.l-1.nr-9, .arrow.l-3.nr-9{left: 47.7vw;}
  .arrow.l-1.nr-9{top: 0.1vh;}
  .arrow.l-3.nr-9{top: 50.1vh;}

  .arrow.l-1.nr-10{left: 51.1vw; top: 23.2vh;}

  .chest.nr-1, .chest.nr-2, .chest.nr-3, .chest.nr-4, .chest.nr-6, .chest.nr-7{width: 9.6vw; height: 5.9vh;}
  .chest.nr-5{width: 12vw; height: 7.5vh;}
  .chest.l-1.nr-1, .chest.l-3.nr-1{left: 49.6vw;}
  .chest.l-1.nr-1{top: 10.3vh;}
  .chest.l-3.nr-1{top: 60.3vh;}

  .chest.l-1.nr-2{left: 31.8vw; top: 28.3vh;}
  
  .chest.l-1.nr-3, .chest.l-3.nr-3{left: 9.1vw;}
  .chest.l-1.nr-3, .chest.l-2.nr-3{top: 6.6vh;}
  .chest.l-2.nr-3, .chest.l-4.nr-3{left: 76.1vw;}
  .chest.l-3.nr-3, .chest.l-4.nr-3{top: 56.6vh;}

  .chest.l-1.nr-4, .chest.l-3.nr-4{left: 32.9vw;}
  .chest.l-1.nr-4{top: 1.2vh;}
  .chest.l-3.nr-4{top: 51.2vh;}

  .chest.l-1.nr-5{left: 6vw;}
  .chest.l-1.nr-5, .chest.l-2.nr-5{top: 38.6vh;}
  .chest.l-2.nr-5{left: 73vw;}

  .chest.l-1.nr-6{left: 48.6vw; top: 38.3vh;}

  .chest.l-1.nr-7{left: 25.3vw;}
  .chest.l-1.nr-7, .chest.l-2.nr-7{top: 43.3vh;}
  .chest.l-2.nr-7{left: 92.3vw;}

  .ring.nr-1, .ring.nr-2{width: 5.8vw; height: 3.7vh;}
  .ring.nr-3{width: 5.3vw; height: 3.4vh;}
  .ring.nr-4{width: 4.9vw; height: 3.1vh;}
  .ring.nr-5{width: 7.4vw; height: 4.7vh;}
  .ring.l-1.nr-1, .ring.l-3.nr-1{left: 32.9vw;}
  .ring.l-1.nr-1{top: 7.5vh;}
  .ring.l-3.nr-1{top: 57.5vh;}

  .ring.l-1.nr-2{left: 32.4vw; top: 21.8vh;}
  
  .ring.l-1.nr-3{left: 6.6vw;}
  .ring.l-1.nr-3, .ring.l-2.nr-3{top: 33.2vh;}
  .ring.l-2.nr-3{left: 73.6vw;}

  .ring.l-1.nr-4{left: 43.2vw; top: 32vh;}

  .ring.l-1.nr-5{left: 26.8vw;}
  .ring.l-1.nr-5, .ring.l-2.nr-5{top: 37.6vh;}
  .ring.l-2.nr-5{left: 93.8vw;}

  .bulb.nr-1{width: 6.9vw; height: 6vh;}
  .bulb.nr-2{width: 7.6vw; height: 6.5vh;}
  .bulb.nr-3{width: 4.2vw; height: 3.7vh;}
  .bulb.nr-4{width: 7.7vw; height: 6.7vh;}
  .bulb.nr-5{width: 4vw; height: 3.4vh;}
  .bulb.l-1.nr-1, .bulb.l-3.nr-1{left: 59.9vw;}
  .bulb.l-1.nr-1{top: 7.7vh;}
  .bulb.l-3.nr-1{top: 57.7vh;}

  .bulb.l-1.nr-2{left: 54vw; top: 32.8vh;}
  
  .bulb.l-1.nr-3{left: 16.1vw;}
  .bulb.l-1.nr-3, .bulb.l-2.nr-3{top: 36.3vh;}
  .bulb.l-2.nr-3{left: 83.1vw;}

  .bulb.l-1.nr-4{left: 13.8vw;}
  .bulb.l-1.nr-4, .bulb.l-2.nr-4{top: 16.5vh;}
  .bulb.l-2.nr-4{left: 80.8vw;}

  .bulb.l-1.nr-5, .bulb.l-3.nr-5{left: 35.3vw;}
  .bulb.l-1.nr-5{top: 14.8vh;}
  .bulb.l-3.nr-5{top: 64.8vh;}

  .diceBg.nr-1{width: 5.5vw; height: 7vh;}
  .diceBg.nr-2{width: 4.6vw; height: 5.9vh;}
  .diceBg.nr-3{width: 4.1vw; height: 5.1vh;}
  .diceBg.nr-4{width: 4.2vw; height: 5.3vh;}
  .diceBg.nr-5{width: 2.8vw; height: 3.5vh;}
  .diceBg.l-1.nr-1, .diceBg.l-3.nr-1{left: 28.7vw;}
  .diceBg.l-1.nr-1, .diceBg.l-2.nr-1{top: 8.4vh;}
  .diceBg.l-2.nr-1, .diceBg.l-4.nr-1{left: 95.7vw;}
  .diceBg.l-3.nr-1, .diceBg.l-4.nr-1{top: 58.4vh;}

  .diceBg.l-1.nr-2{left: 62.2vw; top: 33.9vh;}
  
  .diceBg.l-1.nr-3{left: 0.7vw;}
  .diceBg.l-1.nr-3, .diceBg.l-2.nr-3{top: 39.4vh;}
  .diceBg.l-2.nr-3{left: 67.7vw;}

  .diceBg.l-1.nr-4, .diceBg.l-3.nr-4{left: 0.4vw;}
  .diceBg.l-1.nr-4, .diceBg.l-2.nr-4{top: 12.2vh;}
  .diceBg.l-2.nr-4, .diceBg.l-4.nr-4{left: 67.4vw;}
  .diceBg.l-3.nr-4, .diceBg.l-4.nr-4{top: 62.2vh;}

  .diceBg.l-1.nr-5{left: 49vw; top: 15.9vh;}

  .hands.nr-1, .hands.nr-5{width: 9.6vw; height: 5.6vh;}
  .hands.nr-2{width: 10.2vw; height: 5.9vh;}
  .hands.nr-3, .hands.nr-4, .hands.nr-6, .hands.nr-7{width: 8.3vw; height: 4.8vh;}
  .hands.l-1.nr-1, .hands.l-3.nr-1{left: 0.1vw;}
  .hands.l-1.nr-1, .hands.l-2.nr-1{top: 6vh;}
  .hands.l-2.nr-1, .hands.l-4.nr-1{left: 67.1vw;}
  .hands.l-3.nr-1, .hands.l-4.nr-1{top: 56vh;}

  .hands.l-1.nr-2, .hands.l-3.nr-2{left: 57.1vw;}
  .hands.l-1.nr-2{top: 13.4vh;}
  .hands.l-3.nr-2{top: 63.4vh;}
  
  .hands.l-1.nr-3, .hands.l-3.nr-3{left: 41.4vw;}
  .hands.l-1.nr-3{top: 1.5vh;}
  .hands.l-3.nr-3{top: 51.5vh;}

  .hands.l-1.nr-4{left: 39.7vw; top: 25.7vh;}

  .hands.l-1.nr-5{left: 21.6vw;}
  .hands.l-1.nr-5, .hands.l-2.nr-5{top: 20.1vh;}
  .hands.l-2.nr-5{left: 88.6vw;}

  .hands.l-1.nr-6{left: -0.7vw;}
  .hands.l-1.nr-6, .hands.l-2.nr-6{top: 20.7vh;}
  .hands.l-2.nr-6{left: 66.3vw;}

  .hands.l-1.nr-7{left: 58vw; top: 39.5vh;}

  .tap.nr-1{width: 9.7vw; height: 6.6vh;}
  .tap.nr-2{width: 8.5vw; height: 5.7vh;}
  .tap.nr-3{width: 7.6vw; height: 5.1vh;}
  .tap.nr-4{width: 8vw; height: 5.4vh;}
  .tap.l-1.nr-1, .tap.l-3.nr-1{left: 9.3vw;}
  .tap.l-1.nr-1, .tap.l-2.nr-1{top: 0.1vh;}
  .tap.l-2.nr-1, .tap.l-4.nr-1{left: 76.3vw;}
  .tap.l-3.nr-1, .tap.l-4.nr-1{top: 50.1vh;}

  .tap.l-1.nr-2{left: 47.3vw; top: 20.4vh;}
  
  .tap.l-1.nr-3{left: 7.7vw;}
  .tap.l-1.nr-3, .tap.l-2.nr-3{top: 25.6vh;}
  .tap.l-2.nr-3{left: 74.7vw;}

  .tap.l-1.nr-4{left: 49.8vw; top: 44.4vh;}

  .jail.nr-1, .jail.nr-2, .jail.nr-4{width: 6.8vw; height: 5.1vh;}
  .jail.nr-3{width: 8vw; height: 6vh;}
  .jail.l-1.nr-1, .jail.l-3.nr-1{left: 18.4vw;}
  .jail.l-1.nr-1, .jail.l-2.nr-1{top: 8.8vh;}
  .jail.l-2.nr-1, .jail.l-4.nr-1{left: 85.4vw;}
  .jail.l-3.nr-1, .jail.l-4.nr-1{top: 58.8vh;}

  .jail.l-1.nr-2{left: 34.4vw; top: 37.5vh;}
  
  .jail.l-1.nr-3, .jail.l-3.nr-3{left: 40.5vw;}
  .jail.l-1.nr-3{top: 10.7vh;}
  .jail.l-3.nr-3{top: 60.7vh;}

  .jail.l-1.nr-4{left: 16.6vw;}
  .jail.l-1.nr-4, .jail.l-2.nr-4{top: 25.4vh;}
  .jail.l-2.nr-4{left: 83.6vw;}

  .police.nr-1, .police.nr-3{width: 8.8vw; height: 6.3vh;}
  .police.nr-2{width: 10.4vw; height: 7.5vh;}
  .police.nr-4{width: 9vw; height: 6.5vh;}
  .police.l-1.nr-1{left: 40.7vw; top: 17.9vh;}

  .police.l-1.nr-2, .police.l-3.nr-2{left: 24vw;}
  .police.l-1.nr-2, .police.l-2.nr-2{top: 0.1vh;}
  .police.l-2.nr-2, .police.l-4.nr-2{left: 91vw;}
  .police.l-3.nr-2, .police.l-4.nr-2{top: 50.1vh;}
  
  .police.l-1.nr-3{left: 24.3vw;}
  .police.l-1.nr-3, .police.l-2.nr-3{top: 25.5vh;}
  .police.l-2.nr-3{left: 91.3vw;}

  .police.l-1.nr-4{left: 34.6vw; top: 43.2vh;}
}
@media only screen and (orientation : portrait) and (max-aspect-ratio: 3/4){
  .card-container{width: var(--card-width-2); height: calc(var(--card-width-2) * 11 / 7);}
  .card{border-radius: 3.97vw;}
  #cards{--start-scale: 2.6;}
  .stroke{text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff;}
  #card-club{--tx: -35.8vw; --ty: -20.8vh;}
  #card-spade{--tx: -17.7vw;}
  #card-diamond{--tx: -2.5vw; --ty: -11.2vh;}
  #card-heart{--tx: 11.1vw; --ty: -4.7vh;}
  #card-back{--tx: 23.3vw; --ty: 3.3vh;}
  .dice{--dice-width: calc(var(--card-width-2) * .37);}
  #dice-roll-1{--tx: 63vw; --ty: 6vh; --orgx: 53vw; --orgy: -26vh;}
  #dice-roll-2{--tx: 78vw; --ty: 14vh; --orgx: 68vw; --orgy: -36vh;}
  .chip{--chip-width: calc(var(--card-width-2) * .81);}
  #chip-2{--tx: 4vw; --ty: 50vh;}
  #chip-1{--tx: -5vw; --ty: 44vh;}
  #offer{margin: 2.5vh 0;}
  .num{font-size: 27vh; line-height: 32vh; height:27vh;}
  #offer-part{--jump-1: -5vh; --jump-2: 2.5vh; --jump-3: -2vh;}
  #FS-text{--jump: 2.5vh; font-size: 7.5vh; line-height: 7.5vh; height: 7.5vh; text-indent: 1vw;}
  #first-design > .static::after, #second-design > .static::after{width: 34.8vw; height: 8.4vh;}
  #first-design > .border::before, #second-design > .border::before{width: 33.1vw; height: 8.9vh;}
  #first-design > .border::after, #second-design > .border::after{width: 31.8vw; height: 7.9vh;}
  #first-design > .static::before, #second-design > .static::before{width: 26.1vw; height: 10.7vh;}
  #first-design > .description::after, #second-design > .description::after{width: 35.7vw; height: 11.6vh;}
  #first-design > .description::before, #second-design > .description::before{width: 28.4vw; height: 13.8vh;}
  #first-design > .static::after{--tx: 13vw; --ty: 1.8vh;}
  #first-design > .border::before{--tx: 85vw; --ty: 35vh;}
  #first-design > .border::after{--tx: -4vw; --ty: 40vh;}
  #first-design > .static::before{--tx: 75vw; --ty: 16vh;}
  #first-design > .description::after{--tx: 85vw; --ty: 2vh;}
  #first-design > .description::before{--tx: -10vw; --ty: 20vh;}
  #second-design > .static::after{--tx: 5vw; --ty: -1vh;}
  #second-design > .border::before{--tx: 75vw; --ty: 35vh;}
  #second-design > .border::after{--tx: -12vw; --ty: 40vh;}
  #second-design > .static::before{--tx: 85vw; --ty: 2.5vh;}
  #second-design > .description::after{--tx: 80vw; --ty: 17vh;}
  #second-design > .description::before{--tx: 3vw; --ty: 20vh;}
  .main-video{max-height: 77vh;}
  /*----------------------pattern------------------------*/
  .train.l-2.nr-5, .train.l-2.nr-4, .train.l-2.nr-3, .train.l-2.nr-1, .question.l-2.nr-7, .question.l-2.nr-4, .question.l-2.nr-3, .question.l-2.nr-2, .question.l-2.nr-1, .police.l-2, .jail.l-2, .hands.l-2.nr-7, .hands.l-2.nr-5, .hands.l-2.nr-4, .hands.l-2.nr-3, .hands.l-2.nr-2, .tap.l-2, .diceBg.l-2.nr-5, .diceBg.l-2.nr-2, .diceBg.l-2.nr-1, .car.l-2.nr-9, .car.l-2.nr-8, .car.l-2.nr-7, .car.l-2.nr-6, .car.l-2.nr-3, .car.l-2.nr-2, .bulb.l-2, .ring.l-2, .chest.l-2, .arrow.l-2, .car.l-3.nr-9, .car.l-3.nr-8, .car.l-3.nr-7, .car.l-3.nr-6, .car.l-3.nr-5, .car.l-3.nr-2, .train.l-3.nr-5, .train.l-3.nr-2, .train.l-3.nr-1, .question.l-3.nr-7, .question.l-3.nr-6, .question.l-3.nr-5, .question.l-3.nr-4, .question.l-3.nr-2, .police.l-3.nr-4, .police.l-3.nr-3, .police.l-3.nr-1, .jail.l-3.nr-4, .jail.l-3.nr-2, .hands.l-3.nr-7, .hands.l-3.nr-6, .hands.l-3.nr-5, .hands.l-3.nr-4, .tap.l-3.nr-4, .tap.l-3.nr-3, .tap.l-3.nr-2, .diceBg.l-3.nr-5, .diceBg.l-3.nr-3, .diceBg.l-3.nr-2, .bulb.l-3.nr-4, .bulb.l-3.nr-3, .bulb.l-3.nr-2, .ring.l-3.nr-5, .ring.l-3.nr-4, .ring.l-3.nr-3, .ring.l-3.nr-2, .chest.l-3.nr-7, .chest.l-3.nr-6, .chest.l-3.nr-5, .chest.l-3.nr-2, .arrow.l-3.nr-10, .arrow.l-3.nr-8, .arrow.l-3.nr-7, .arrow.l-3.nr-6, .arrow.l-3.nr-3, .arrow.l-3.nr-2, .train.l-4.nr-5, .train.l-4.nr-4, .train.l-4.nr-3, .train.l-4.nr-2, .train.l-4.nr-1, .question.l-4.nr-7, .question.l-4.nr-6, .question.l-4.nr-5, .question.l-4.nr-4, .question.l-4.nr-3, .question.l-4.nr-2, .question.l-4.nr-1, .police.l-4, .jail.l-4, .hands.l-4.nr-7, .hands.l-4.nr-6, .hands.l-4.nr-5, .hands.l-4.nr-4, .hands.l-4.nr-3, .hands.l-4.nr-2, .tap.l-4, .diceBg.l-4.nr-5, .diceBg.l-4.nr-3, .diceBg.l-4.nr-2, .diceBg.l-4.nr-1, .car.l-4.nr-9, .car.l-4.nr-8, .car.l-4.nr-7, .car.l-4.nr-6, .car.l-4.nr-5, .car.l-4.nr-3, .car.l-4.nr-2, .bulb.l-4, .ring.l-4, .chest.l-4, .arrow.l-4{display: none;}

  .car.nr-1, .car.nr-5{width: 10.1vw; height: 6vh;}
  .car.nr-2{width: 11.5vw; height: 6.8vh;}
  .car.nr-3{width: 9.5vw; height: 5.7vh;}
  .car.nr-4{width: 10.3vw; height: 6.1vh;}
  .car.nr-6{width: 10.6vw; height: 6.3vh;}
  .car.nr-7{width: 9.5vw; height: 5.6vh;}
  .car.nr-8{width: 7.7vw; height: 4.6vh;}
  .car.nr-9{width: 8.9vw; height: 5.3vh;}
  .car.l-1.nr-1, .car.l-3.nr-1{left: 1.7vw;}
  .car.l-1.nr-1, .car.l-2.nr-1{top: 0.2vh;}
  .car.l-2.nr-1, .car.l-4.nr-1{left: 91.1vw;}
  .car.l-3.nr-1, .car.l-4.nr-1{top: 50.2vh;}

  .car.l-1.nr-2{left: 77.7vw; top: 20.7vh;}
  
  .car.l-1.nr-3, .car.l-3.nr-3{left: 65.9vw;}
  .car.l-1.nr-3{top: 2.4vh;}
  .car.l-3.nr-3{top: 52.4vh;}

  .car.l-1.nr-4, .car.l-3.nr-4{left: 7.4vw;}
  .car.l-1.nr-4, .car.l-2.nr-4{top: 11.1vh;}
  .car.l-2.nr-4, .car.l-4.nr-4{left: 96.8vw;}
  .car.l-3.nr-4, .car.l-4.nr-4{top: 61.1vh;}

  .car.l-1.nr-5{left: 0.4vw;}
  .car.l-1.nr-5, .car.l-2.nr-5{top: 27vh;}
  .car.l-2.nr-5{left: 89.8vw;}

  .car.l-1.nr-6{left: 16.6vw; top: 29.8vh;}

  .car.l-1.nr-7{left: 63.2vw; top: 27.8vh;}

  .car.l-1.nr-8{left: 56.4vw; top: 37.5vh;}

  .car.l-1.nr-9{left: 79.1vw; top: 44.3vh;}

  .train.nr-1{width: 8.7vw; height: 5.4vh;}
  .train.nr-2{width: 9.2vw; height: 5.7vh;}
  .train.nr-3{width: 6.5vw; height: 4vh;}
  .train.nr-4{width: 6.2vw; height: 3.9vh;}
  .train.nr-5{width: 5.9vw; height: 3.6vh;}

  .train.l-1.nr-1{left: 37.1vw; top: 32.5vh;}

  .train.l-1.nr-2{left: 0.2vw;}
  .train.l-1.nr-2, .train.l-2.nr-2{top: 33.2vh;}
  .train.l-2.nr-2{left: 89.6vw;}
  
  .train.l-1.nr-3, .train.l-3.nr-3{left: 46.8vw;}
  .train.l-1.nr-3{top: 10.8vh;}
  .train.l-3.nr-3{top: 60.8vh;}

  .train.l-1.nr-4, .train.l-3.nr-4{left: 83.1vw;}
  .train.l-1.nr-4{top: 0.2vh;}
  .train.l-3.nr-4{top: 50.2vh;}

  .train.l-1.nr-5{left: 70.8vw; top: 16.5vh;}

  .question.nr-1{width: 6.5vw; height: 7.6vh; --tx: 0; --ty: 0;}
  .question.nr-2{width: 8.1vw; height: 9.5vh; --tx: -8.1vw; --ty: -5.27vh;}
  .question.nr-3{width: 6.2vw; height: 7.2vh; --tx: 6.2vw; --ty: -3.6vh;}
  .question.nr-4{width: 8vw; height: 9.3vh; --tx: -8vw; --ty: -4.65vh;}
  .question.nr-5{width: 8vw; height: 9.4vh; --tx: -8vw; --ty: -5.32vh;}
  .question.nr-6{width: 9.9vw; height: 11.6vh; --tx: 9.9vw; --ty: -5.15vh;}
  .question.nr-7{width: 6.7vw; height: 7.9vh; --tx: 0vw; --ty: -7.54vh;}
  .question.l-1.nr-1, .question.l-3.nr-1{left: 25.4vw;}
  .question.l-1.nr-1{top: 0.4vh;}
  .question.l-3.nr-1{top: 50.4vh;}

  .question.l-1.nr-2{left: 35.1vw; top: 13.8vh;}
  
  .question.l-1.nr-3, .question.l-3.nr-3{left: 79.6vw;}
  .question.l-1.nr-3{top: 2.2vh;}
  .question.l-3.nr-3{top: 52.2vh;}

  .question.l-1.nr-4{left: 77.1vw; top: 25.8vh;}

  .question.l-1.nr-5{left: 4.8vw;}
  .question.l-1.nr-5, .question.l-2.nr-5{top: 14.6vh;}
  .question.l-2.nr-5{left: 94.2vw;}

  .question.l-1.nr-6{left: 7.7vw;}
  .question.l-1.nr-6, .question.l-2.nr-6{top: 41.9vh;}
  .question.l-2.nr-6{left: 97.1vw;}

  .question.l-1.nr-7{left: 59.4vw; top: 41.9vh;}

  .arrow.nr-1, .arrow.nr-2, .arrow.nr-3, .arrow.nr-4{width: 18.1vw; height: 2vh;}
  .arrow.nr-5{width: 14.9vw; height: 1.6vh;}
  .arrow.nr-6{width: 17.3vw; height: 1.9vh;}
  .arrow.nr-7{width: 21.4vw; height: 2.4vh;}
  .arrow.nr-8{width: 16.2vw; height: 1.8vh;}
  .arrow.nr-9{width: 18.6vw; height: 2.1vh;}
  .arrow.nr-10{width: 15.2vw; height: 1.7vh;}
  .arrow.l-1.nr-1, .arrow.l-3.nr-1{left: 53.4vw;}
  .arrow.l-1.nr-1{top: 8.2vh;}
  .arrow.l-3.nr-1{top: 58.2vh;}

  .arrow.l-1.nr-2{left: 43.2vw; top: 21.5vh;}
  
  .arrow.l-1.nr-3{left: 10.2vw; top: 23vh;}

  .arrow.l-1.nr-4, .arrow.l-3.nr-4{left: 19.1vw;}
  .arrow.l-1.nr-4{top: 14.4vh;}
  .arrow.l-3.nr-4{top: 64.4vh;}

  .arrow.l-1.nr-5, .arrow.l-3.nr-5{left: 27.5vw;}
  .arrow.l-1.nr-5{top: 9.4vh;}
  .arrow.l-3.nr-5{top: 59.4vh;}

  .arrow.l-1.nr-6{left: 24.9vw; top: 36.9vh;}

  .arrow.l-1.nr-7{left: 19vw; top: 40.9vh;}

  .arrow.l-1.nr-8{left: 53.2vw; top: 35.3vh;}

  .arrow.l-1.nr-9, .arrow.l-3.nr-9{left: 63.6vw;}
  .arrow.l-1.nr-9{top: 0.1vh;}
  .arrow.l-3.nr-9{top: 50.1vh;}

  .arrow.l-1.nr-10{left: 68.2vw; top: 23.2vh;}

  .chest.nr-1, .chest.nr-2, .chest.nr-3, .chest.nr-4, .chest.nr-6, .chest.nr-7{width: 12.8vw; height: 5.9vh;}
  .chest.nr-5{width: 16.1vw; height: 7.5vh;}
  .chest.l-1.nr-1, .chest.l-3.nr-1{left: 66.3vw;}
  .chest.l-1.nr-1{top: 10.3vh;}
  .chest.l-3.nr-1{top: 60.3vh;}

  .chest.l-1.nr-2{left: 42.5vw; top: 28.3vh;}
  
  .chest.l-1.nr-3, .chest.l-3.nr-3{left: 12.2vw;}
  .chest.l-1.nr-3{top: 6.6vh;}
  .chest.l-3.nr-3{top: 56.6vh;}

  .chest.l-1.nr-4, .chest.l-3.nr-4{left: 43.9vw;}
  .chest.l-1.nr-4{top: 1.2vh;}
  .chest.l-3.nr-4{top: 51.2vh;}

  .chest.l-1.nr-5{left: 8vw; top: 38.6vh;}

  .chest.l-1.nr-6{left: 64.9vw; top: 38.3vh;}

  .chest.l-1.nr-7{left: 33.7vw; top: 43.3vh;}

  .ring.nr-1, .ring.nr-2{width: 7.7vw; height: 3.7vh;}
  .ring.nr-3{width: 7.2vw; height: 3.4vh;}
  .ring.nr-4{width: 6.5vw; height: 3.1vh;}
  .ring.nr-5{width: 9.8vw; height: 4.7vh;}
  .ring.l-1.nr-1, .ring.l-3.nr-1{left: 43.9vw;}
  .ring.l-1.nr-1{top: 7.5vh;}
  .ring.l-3.nr-1{top: 57.5vh;}

  .ring.l-1.nr-2{left: 43.2vw; top: 21.8vh;}
  
  .ring.l-1.nr-3{left: 8.9vw; top: 33.2vh;}

  .ring.l-1.nr-4{left: 57.7vw; top: 32vh;}

  .ring.l-1.nr-5{left: 35.8vw; top: 37.6vh;}

  .bulb.nr-1{width: 9.2vw; height: 6vh;}
  .bulb.nr-2{width: 10.1vw; height: 6.5vh;}
  .bulb.nr-3{width: 5.7vw; height: 3.7vh;}
  .bulb.nr-4{width: 10.3vw; height: 6.7vh;}
  .bulb.nr-5{width: 5.3vw; height: 3.4vh;}
  .bulb.l-1.nr-1, .bulb.l-3.nr-1{left: 80vw;}
  .bulb.l-1.nr-1{top: 7.7vh;}
  .bulb.l-3.nr-1{top: 57.7vh;}

  .bulb.l-1.nr-2{left: 72.1vw; top: 32.8vh;}
  
  .bulb.l-1.nr-3{left: 21.4vw; top: 36.3vh;}

  .bulb.l-1.nr-4{left: 18.4vw; top: 16.5vh;}

  .bulb.l-1.nr-5, .bulb.l-3.nr-5{left: 47.1vw;}
  .bulb.l-1.nr-5{top: 14.8vh;}
  .bulb.l-3.nr-5{top: 64.8vh;}

  .diceBg.nr-1{width: 7.4vw; height: 7vh;}
  .diceBg.nr-2{width: 6.2vw; height: 5.9vh;}
  .diceBg.nr-3{width: 5.4vw; height: 5.1vh;}
  .diceBg.nr-4{width: 5.6vw; height: 5.3vh;}
  .diceBg.nr-5{width: 3.8vw; height: 3.5vh;}
  .diceBg.l-1.nr-1, .diceBg.l-3.nr-1{left: 38.3vw;}
  .diceBg.l-1.nr-1{top: 8.4vh;}
  .diceBg.l-3.nr-1{top: 58.4vh;}

  .diceBg.l-1.nr-2{left: 83vw; top: 33.9vh;}
  
  .diceBg.l-1.nr-3{left: 0.9vw;}
  .diceBg.l-1.nr-3, .diceBg.l-2.nr-3{top: 39.4vh;}
  .diceBg.l-2.nr-3{left: 90.3vw;}

  .diceBg.l-1.nr-4, .diceBg.l-3.nr-4{left: 0.5vw;}
  .diceBg.l-1.nr-4, .diceBg.l-2.nr-4{top: 12.2vh;}
  .diceBg.l-2.nr-4, .diceBg.l-4.nr-4{left: 89.9vw;}
  .diceBg.l-3.nr-4, .diceBg.l-4.nr-4{top: 62.2vh;}

  .diceBg.l-1.nr-5{left: 65.5vw; top: 15.9vh;}

  .hands.nr-1, .hands.nr-5{width: 12.9vw; height: 5.6vh;}
  .hands.nr-2{width: 13.7vw; height: 5.9vh;}
  .hands.nr-3, .hands.nr-4, .hands.nr-6, .hands.nr-7{width: 11.1vw; height: 4.8vh;}
  .hands.l-1.nr-1, .hands.l-3.nr-1{left: 0.2vw;}
  .hands.l-1.nr-1, .hands.l-2.nr-1{top: 6vh;}
  .hands.l-2.nr-1, .hands.l-4.nr-1{left: 89.6vw;}
  .hands.l-3.nr-1, .hands.l-4.nr-1{top: 56vh;}

  .hands.l-1.nr-2, .hands.l-3.nr-2{left: 76.2vw;}
  .hands.l-1.nr-2{top: 13.4vh;}
  .hands.l-3.nr-2{top: 63.4vh;}
  
  .hands.l-1.nr-3, .hands.l-3.nr-3{left: 55.3vw;}
  .hands.l-1.nr-3{top: 1.5vh;}
  .hands.l-3.nr-3{top: 51.5vh;}

  .hands.l-1.nr-4{left: 53.1vw; top: 25.7vh;}

  .hands.l-1.nr-5{left: 28.9vw; top: 20.1vh;}

  .hands.l-1.nr-6{left: -1vw;}
  .hands.l-1.nr-6, .hands.l-2.nr-6{top: 20.7vh;}
  .hands.l-2.nr-6{left: 88.4vw;}

  .hands.l-1.nr-7{left: 77.4vw; top: 39.5vh;}


  .tap.nr-1{width: 13vw; height: 6.6vh;}
  .tap.nr-2{width: 11.4vw; height: 5.7vh;}
  .tap.nr-3{width: 10.2vw; height: 5.1vh;}
  .tap.nr-4{width: 10.8vw; height: 5.4vh;}
  .tap.l-1.nr-1, .tap.l-3.nr-1{left: 12.4vw;}
  .tap.l-1.nr-1{top: 0.1vh;}
  .tap.l-3.nr-1{top: 50.1vh;}

  .tap.l-1.nr-2{left: 63.1vw; top: 20.4vh;}
  
  .tap.l-1.nr-3{left: 10.3vw; top: 25.6vh;}

  .tap.l-1.nr-4{left: 66.5vw; top: 44.4vh;}

  .jail.nr-1, .jail.nr-2, .jail.nr-4{width: 9.1vw; height: 5.1vh;}
  .jail.nr-3{width: 10.7vw; height: 6vh;}
  .jail.l-1.nr-1, .jail.l-3.nr-1{left: 24.6vw;}
  .jail.l-1.nr-1{top: 8.8vh;}
  .jail.l-3.nr-1{top: 58.8vh;}

  .jail.l-1.nr-2{left: 46vw; top: 37.5vh;}
  
  .jail.l-1.nr-3, .jail.l-3.nr-3{left: 54.1vw;}
  .jail.l-1.nr-3{top: 10.7vh;}
  .jail.l-3.nr-3{top: 60.7vh;}

  .jail.l-1.nr-4{left: 22.2vw; top: 25.4vh;}

  .police.nr-1, .police.nr-3{width: 11.7vw; height: 6.3vh;}
  .police.nr-2{width: 13.8vw; height: 7.5vh;}
  .police.nr-4{width: 12vw; height: 6.5vh;}
  .police.l-1.nr-1{left: 54.3vw;}
  .police.l-1.nr-1{top: 17.9vh;}

  .police.l-1.nr-2, .police.l-3.nr-2{left: 32vw;}
  .police.l-1.nr-2{top: 0.1vh;}
  .police.l-3.nr-2{top: 50.1vh;}
  
  .police.l-1.nr-3{left: 32.5vw; top: 25.5vh;}

  .police.l-1.nr-4{left: 46.2vw; top: 43.2vh;}
}
/*-------------------------------------------------*/
/*----------------reduce animation-----------------*/
@media (prefers-reduced-motion: reduce) {
  #arrow-shaft-1, #arrow-shaft-2, #arrow-point, #bulb-wires, .bulb-rays, #dice-big, #dice-small, .jail-bar-vertical, #jail-bar-top, #jail-bar-bottom, #car-main, .question, #police, #police-hand, #police-horn, #tap-headgear-1, #tap-headgear-2, #tap-headgear-3, #train-fume-1, #train-fume-2, #train-fume-3, #chest-top-1, #chest-top-2, #chest-top-3, #chest-top-4, #chest-top-5, #chest-top-6, #chest-top-7, #chest-back, #chest-sack-top, #chest-sack-top-outer, #chest-inside, #hands-main-1, #hands-main-2, #ring-main-1, #ring-main-2, #ring-main-3, #ring-main-4, #ring-main-5, #ring-main-6, #ring-main-7, #ring-main-8, #ring-main-9, #ring-main-0 { animation: none !important; }
  #tap-headgear-1, #tap-headgear-2, #train-fume-1, #train-fume-2, #chest-top-7, #chest-top-2, #chest-top-3, #chest-top-4, #chest-top-5, #chest-top-6, #hands-main-1, #ring-main-1, #ring-main-2, #ring-main-3, #ring-main-4, #ring-main-6, #ring-main-7, #ring-main-8, #ring-main-9, #ring-main-0{display: none !important; opacity: 0; visibility: hidden;}
}
@media (max-width: 767px) {
  #arrow-shaft-1, #arrow-shaft-2, #arrow-point, #bulb-wires, .bulb-rays, #dice-big, #dice-small, .jail-bar-vertical, #jail-bar-top, #jail-bar-bottom, #car-main, .question, #police, #police-hand, #police-horn, #tap-headgear-1, #tap-headgear-2, #tap-headgear-3, #train-fume-1, #train-fume-2, #train-fume-3, #chest-top-1, #chest-top-2, #chest-top-3, #chest-top-4, #chest-top-5, #chest-top-6, #chest-top-7, #chest-back, #chest-sack-top, #chest-sack-top-outer, #chest-inside, #hands-main-1, #hands-main-2, #ring-main-1, #ring-main-2, #ring-main-3, #ring-main-4, #ring-main-5, #ring-main-6, #ring-main-7, #ring-main-8, #ring-main-9, #ring-main-0 { animation: none !important; }
  #tap-headgear-1, #tap-headgear-2, #train-fume-1, #train-fume-2, #chest-top-7, #chest-top-2, #chest-top-3, #chest-top-4, #chest-top-5, #chest-top-6, #hands-main-1, #ring-main-1, #ring-main-2, #ring-main-3, #ring-main-4, #ring-main-6, #ring-main-7, #ring-main-8, #ring-main-9, #ring-main-0{display: none !important; opacity: 0; visibility: hidden;}
}
/*-------------------------------------------------*/
/*--------------------Firefox---------------------*/
@supports (-moz-appearance: none) {
  .stroke{ text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff;}}
@supports not (-moz-appearance: none) {
  #cards-container, #first-design, #second-design{overflow-x: hidden; overflow-x: clip;}}
/*-------------------------------------------------*/
/*--------------------animation--------------------*/
@keyframes scaleUp{0%{transform: scale(0);} 100%{transform: scale(1.0);}}
@keyframes scaleUpTranslate{0%{transform: translate(var(--tx), var(--ty)) scale(0);} 100%{transform: translate(var(--tx), var(--ty)) scale(1.0);}}
@keyframes slide-in-right{0%{transform: translateX(100vw);} 100%{transform: translateX(0vw);}}
@keyframes slide-in-left{0%{transform: translateX(-100vw);} 100%{transform: translateX(0vw);}}
@keyframes slide-in-bottom{0%{transform: translateY(100%);} 100%{transform: translateY(0vh);}}
@keyframes arrow-shaft-ani{0%, 50%{transform: scaleX(0);} 50.001%, 100%{transform: scaleX(1);}}
@keyframes arrow-point-ani{0%, 50%{transform: translateX(0px);} 50.001%, 100%{transform: translateX(-86.5px);}}
@keyframes bulb-ani{0%, 5%, 30%, 35%, 60%, 65%{opacity: 1;} 15%, 20%, 45%, 50%, 75%, 100%{opacity: 0;}}
@keyframes dice-ani{100%{transform: rotate(360deg);}}
@keyframes jail-bar-top-ani{0%{transform: translateX(0px);} 50%, 100%{transform: translateX(79px);}}
@keyframes jail-bar-bottom-ani{0%{transform: translateX(0px);} 50%, 100%{transform: translateX(-79px);}}
@keyframes jail-bar-vertical-ani{40%{transform: translateY(0px);} 70%, 100%{transform: translateY(79px);}}
@keyframes car-main-ani{100%{transform: translateY(3px);}}
@keyframes question-ani{
  0%, 100%{transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--r1, -5deg));}
  25%{transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--r2, 2.5deg));}
  50%{transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--r, 0deg));}
  75%{transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--r3, -2.5deg));}
}
@keyframes police-ani{0%, 25%, 100%{transform: rotate(0deg);} 50%, 75%{transform: rotate(3deg);}}
@keyframes police-hand-ani{0%, 25%, 100%{transform: rotate(2deg);} 50%, 75%{transform: rotate(-5deg);}}
@keyframes police-horn-ani{0%, 25%, 100%{transform: rotate(0deg);} 50%, 75%{transform: rotate(-30deg);}}
@keyframes tap-headgear-ani{0%, 33.333%{opacity: 1;} 33.334%, 100%{opacity: 0;}}
@keyframes chest-top-1-ani{0%, 35%{opacity: 1;} 35.001%, 100%{opacity: 0;}}
@keyframes chest-top-2-ani{0%, 35%, 41.001%, 100%{opacity: 0;} 35.001%, 41%{opacity: 1;}}
@keyframes chest-top-3-ani{0%, 41%, 47.001%, 100%{opacity: 0;} 41.001%, 47%{opacity: 1;}}
@keyframes chest-top-4-ani{0%, 47%, 53.001%, 100%{opacity: 0;} 47.001%, 53%{opacity: 1;}}
@keyframes chest-top-5-ani{0%, 53%, 59.001%, 100%{opacity: 0;} 53.001%, 59%{opacity: 1;}}
@keyframes chest-top-6-ani{0%, 59%, 65.001%, 100%{opacity: 0;} 59.001%, 65%{opacity: 1;}}
@keyframes chest-top-7-ani{0%, 65%{opacity: 0;} 65.001%, 100%{opacity: 1;}}
@keyframes chest-back-ani{0%, 47%{opacity: 1;} 47.001%, 100%{opacity: 0;}}
@keyframes chest-sack-top-ani{0%, 53%{opacity: 1;} 53.001%, 100%{opacity: 0;}}
@keyframes chest-sack-top-outer-ani{0%, 59%{opacity: 1;} 59.001%, 100%{opacity: 0;}}
@keyframes chest-inside-ani{0%, 65%{opacity: 1;} 65.001%, 100%{opacity: 0;}}
@keyframes hands-main-ani{0%, 50%{opacity: 1;} 50.001%, 100%{opacity: 0;}}
@keyframes ring-main-ani{0%, 10%{opacity: 1;} 10.001%, 100%{opacity: 0;}}
@keyframes appears{ 0%{opacity: 0;} 100%{opacity: 1;}}
@keyframes scale-down-ani{0% {transform: scale(var(--start-scale, 1)); } 100%{ transform: scale(1);}}
@keyframes card-shadow-ani{0%{box-shadow: rgba(0, 0, 0, 0.24) 0px 0px 0px;} to{box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}}
@keyframes hide-card-ani{0%{opacity: 0;} to{opacity: 1;}}
@keyframes move-rotate{0% {transform: translate(var(--orgx), var(--orgy)) rotate(var(--orgrot));} 100%{transform: translate(var(--tx), var(--ty)) rotate(var(--r));}}
@keyframes scale-move-rotate-appear-ani {0% {opacity: 0; transform: translate(var(--orgx), var(--orgy)) rotate(var(--orgrot)) scale(var(--start-scale)); } 100%{opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(1);}}
@keyframes card-cover-ani{0% {transform: scale(2.0); opacity: 1;} 100%{transform: scale(0); opacity: 0;}}
@keyframes letter-in {
  0%{ transform: translate(0px, 0px) scale(0); opacity: 0;}
  50%{ transform: translate(var(--x1), var(--y1)) scale(1.4); opacity: 1;}
  80%{ transform: translate(var(--x2), var(--y2)) scale(1.15);}
  100%{ transform: translate(var(--x3), var(--y3)) scale(1.28);}
}
@keyframes letter-out {
  0% { transform: translate(var(--x3), var(--y3)) scale(1.28);}
  20%{ transform: translate(var(--x2), var(--y2)) scale(1.15);}
  50%{ transform: translate(var(--x1), var(--y1)) scale(1.4);}
  100%{ transform: translate(0px, 0px) scale(1);}
}
@keyframes letter-out-2 {
  0% { transform: translate(var(--x3), var(--y3)) scale(1.28); text-shadow: 0 -1px 0 #c7c7c7, 0 -2px 0 #c7c7c7, 0 -3px 0 #c7c7c7, 0 -4px 0 #c7c7c7, 0 -5px 0 #c7c7c7, 0 -6px 0 #c7c7c7, 0 -7px 0 #c7c7c7, 0 -8px 0 #c7c7c7, 0 -9px 0 #c7c7c7, 0 -10px 0 #c7c7c7, 0 -11px 0 #c7c7c7, 0 -12px 0 #c7c7c7, 0 -13px 0 #c7c7c7, 0 -14px 0 #c7c7c7, 0 -15px 0 #c7c7c7, 0 -16px 0 #c7c7c7, 0 -17px 0 #c7c7c7, 0 -18px 0 #c7c7c7, 0 -19px 0 #c7c7c7, 0 -20px 0 #c7c7c7, 0 -21px 0 #c7c7c7, 0 -22px 0 #c7c7c7, 0 -23px 0 #c7c7c7, 0 -24px 0 #c7c7c7;}
  20%{ transform: translate(var(--x2), var(--y2)) scale(1.15); text-shadow: 0 -1px 0 #c7c7c7, 0 -2px 0 #c7c7c7, 0 -3px 0 #c7c7c7, 0 -4px 0 #c7c7c7, 0 -5px 0 #c7c7c7, 0 -6px 0 #c7c7c7, 0 -7px 0 #c7c7c7, 0 -8px 0 #c7c7c7, 0 -9px 0 #c7c7c7, 0 -10px 0 #c7c7c7, 0 -11px 0 #c7c7c7, 0 -12px 0 #c7c7c7, 0 -13px 0 #c7c7c7, 0 -14px 0 #c7c7c7, 0 -15px 0 #c7c7c7, 0 -16px 0 #c7c7c7;}
  50%{ transform: translate(var(--x1), var(--y1)) scale(1.4); text-shadow: 0 -1px 0 #c7c7c7, 0 -2px 0 #c7c7c7, 0 -3px 0 #c7c7c7, 0 -4px 0 #c7c7c7, 0 -5px 0 #c7c7c7, 0 -6px 0 #c7c7c7, 0 -7px 0 #c7c7c7, 0 -8px 0 #c7c7c7;}
  100%{ transform: translate(0px, 0px) scale(1); text-shadow: 0 0 0 #c7c7c7;}
}
@keyframes card-back-ani{0% {transform: translate(0px, var(--y)) scale(1.28); opacity: 0;} 100%{transform: translate(0px, 0px) scale(1.28); opacity: 1;}}
@keyframes swap-icon{
  0% {background-image: var(--pink-quest-img); }
  12.5%{background-image: var(--lemon-img); }
  25%{background-image: var(--chip-img); }
  37.5%{background-image: var(--blue-quest-img); }
  50%{background-image: var(--bell-img); }
  62.5%{background-image: var(--bulb-img); }
  75%{background-image: var(--orange-quest-img); }
  87.5%, 100%{background-image: var(--diamond-img);}
}
@keyframes num-appear{0%{opacity: 0;} 100%{opacity: 1;}}
@keyframes num-disapp{0%{opacity: 1;} 100%{opacity: 0;}}
@keyframes swap-num{
  0% {content: "3";}
  6.9%{content: "4";}
  39.1%{content: "5";}
  57.3%{content: "6";}
  69.9%{content: "7";}
  79.7%{content: "8";}
  88.1%, 100%{content: "9";}
}
@keyframes num-jump{
  0%, 4.1%{transform: translateY(0);}
  6.9%{transform: translateY(var(--jump-1));}
  9%{transform: translateY(var(--jump-2));}
  10.4%{transform: translateY(var(--jump-3));}
  11.1%, 36.3%{transform: translateY(0);}
  39.1%{transform: translateY(var(--jump-1));}
  41.2%{transform: translateY(var(--jump-2));}
  42.6%{transform: translateY(var(--jump-3));}
  43.3%, 54.5%{transform: translateY(0);}
  57.3%{transform: translateY(var(--jump-1));}
  59.4%{transform: translateY(var(--jump-2));}
  60.8%{transform: translateY(var(--jump-3));}
  61.5%, 67.1%{transform: translateY(0);}
  69.9%{transform: translateY(var(--jump-1));}
  72%{transform: translateY(var(--jump-2));}
  73.4%{transform: translateY(var(--jump-3));}
  74.1%, 76.9%{transform: translateY(0);}
  79.7%{transform: translateY(var(--jump-1));}
  81.8%{transform: translateY(var(--jump-2));}
  83.2%{transform: translateY(var(--jump-3));}
  83.9%, 85.3%{transform: translateY(0);}
  81.1%{transform: translateY(var(--jump-1));}
  90.2%{transform: translateY(var(--jump-2));}
  91.6%{transform: translateY(var(--jump-3));}
  92.3%, 93%{transform: translateY(0);}
  95.8%{transform: translateY(var(--jump-1));}
  97.9%{transform: translateY(var(--jump-2));}
  99.3%{transform: translateY(var(--jump-3));}
  100%{transform: translateY(0);}
}
@keyframes FS-jump{
  0%, 6.9%{transform: translateY(0);}
  9%{transform: translateY(var(--jump));}
  10.4%, 39.1%{transform: translateY(0);}
  41.2%{transform: translateY(var(--jump));}
  43.3%, 57.3%{transform: translateY(0);}
  59.4%{transform: translateY(var(--jump));}
  60.8%, 69.9%{transform: translateY(0);}
  72%{transform: translateY(var(--jump));}
  73.4%, 79.7%{transform: translateY(0);}
  81.8%{transform: translateY(var(--jump));}
  83.2%, 81.1%{transform: translateY(0);}
  90.2%{transform: translateY(var(--jump));}
  91.6%, 95.8%{transform: translateY(0);}
  97.9%{transform: translateY(var(--jump));}
  99.3%, 100%{transform: translateY(0);}
}
/*-------------------------------------------------*/
/*-----------------------slide left----------------------*/