*{
outline: none !important;

    -webkit-user-drag: none; /* For Chrome, Safari, Opera */
    -khtml-user-drag: none;  /* For older Konqueror browsers */
    -moz-user-drag: none;    /* For Firefox */
    -o-user-drag: none;      /* For older Opera browsers */
    user-drag: none;         /* Standard property */

}

*:focus, *:active, *:hover{
    outline:none;
    box-shadow: none;
}



:root {
  --base-width: 1920;
  --vw: calc(100vw / var(--base-width));
}

div{
outline:none !important;
    box-shadow: none !important;
}

a, button{
cursor: pointer;
}



video{
user-select: none;
}

html,body{
    color: #1f1f1f;
    font-family: Roboto, Arial;
    font-size: 18px;
    line-height: 1.5;
    margin:0; 
    overflow-x: hidden;
    height:100dvh;
}

body {
    font-family: 'Microsoft JhengHei', '微軟正黑體', 'Microsoft YaHei',Roboto,Arial;
}

div{
position:relative;
}


a{
text-decoration: none;

}

.header-tips{
    background:linear-gradient(90.05deg,#007faf 10.9%,#004bb8);
    height:48px;
    width:100%;
}

.header-menu-container{
    width:100vw;
    background:#fafafa;
}

.header-menu-content-container{
    margin:0 auto;
    width: calc(171500%/1920);
    max-width:1715px;
    
}

.header-menu-content{
    margin-top: 0;
    margin-bottom: 0;
    height:min(5.938vw,114px); 
    padding-right:25px;
}

.header-logo-img{
    width:auto;
    height:min(2.813vw,54px);    
    padding-top: min(0.208vw, 4px);
    padding-left: min(0.208vw, 4px);
}
.logoContainer{
display:flex;
  align-items: center; /* Vertically centers flex items */
;
}


#contentContainer{
    margin:0 auto;
    width: calc(171500%/1920);
    max-width:1715px;
}



.flex {
   display: flex;   
}

.f-item{
flex:1;
}

.toprightImg{
    padding-top:10px;
    padding-bottom:20px;
    text-align: right;
    display:block;
    height:79px;
}

.toprightImg img{
    height:min(79px,4.115vw);
    width:auto;
    position:absolute;
    padding-top: min(0.104vw, 2px);
    right:-30px;
}

@font-face{
    font-family:'icomoon';
    src: url("../font/icomoon.ttf");
}

[class*=" el-icon-"],[class*=" icon-"],[class^=el-icon-],[class^=icon-] {
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: icomoon!important;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none
}

[class*=" el-icon-"] i,[class*=" icon-"] i,[class^=el-icon-] i,[class^=icon-] i {
    font-style: normal
}

.spacer_20{
    display:block;
    height:min(1.042vw, 20px);
}

.spacer_28{
    display:block;
    height:min(1.458vw, 28px);
    
}


.icon-home-fill:before {
    color: #0033a0;
    content: "";
}

.clphk-breadcrumb__divider{
    color:#69696c;
    padding-left:min(1.042vw,20px);
    padding-right: min(0);
}

.clphk-breadcrumb{
    margin:20px 0 30px 0;
}

.breadcrumbs{
    color:#69696c;
    font-size:min(1.771vw, 34px) ;
    letter-spacing: min(0.15vw,2.88px);
}

.breadcrumbs a, .breadcrumbs a:default,.breadcrumbs a:visited,.breadcrumbs a:hover, .breadcrumbs a:focus{
color:#69696c;
text-decoration: none;
outline: none;
line-height: min(2.604vw,50px);
}

h1{
color:#1d319b;
font-size:min(3.8vw,72.96px);
font-weight: bold;
line-height:min(5.521vw,106px);
}


#content{
    /*max-width: 1664px;
    width: calc(166400%/1920);*/
    margin-top: 0;
    margin-bottom: 0;
    padding-right:51px;
    /*    margin-left: min(5.469vw, 105px);
    margin-right: min(5.208vw, 100px);*/
}

.contentBanner{
    width:100%;

}
.contentBanner img{
max-width: 100%;
}

/*chinese font*/
/*MicrosoftJhengHei,Roboto,Arial*/

#LandingPageContentButtonsContainer{
padding:min(3.906vw, 75px)  0 min(4.688vw,90px) 0;
}

ul#LandingPageContentButtons{
display: flex;
    gap: min(4.167vw,80px);
    max-width: 82.5%;
    margin: 0 auto;
}

ul#LandingPageContentButtons li{
flex:1  1 auto;
text-align: center;

}
ul#LandingPageContentButtons li img{

  max-width: 100%;
  max-height: 100%;
  object-fit: contain;     /* or 'cover' if you want cropping */
  display: block;
  margin:0 auto;
}

.landingpage .breadcrumbs {
    display: block;
    height:min(2.917vw, 44px);
    padding:0;
    margin: 0;
}


.bottomContainer img{
max-width: 100%;
}


.signupindex .pageTitleContainer{
    padding-bottom:min(3.125vw, 60px);
}
.signupstep-page .pageTitleContainer{
    padding-bottom:min(5.209vw, 100px);
}

.funpageindex .pageTitleContainer{
    
}

.funpageindex .page-subtitle {
font-size:min(2.25vw,43.2px);
    font-weight: bold;
    letter-spacing: min(0.1vw,1.92px);
    margin-top: min(1.042vw, 20px);
    margin-bottom: min(1.042vw, 20px);
}


/* p1 */ 


.landingpage .presslisten{
    position: absolute;
    width: 13%;
    left: 2%;
    top: 18%;
}
.landingpage .presslisten img{
max-width:100%
}

#btnApple{
    position: absolute;
    width: 11%;
    right: 15.4%;
    bottom: 11.5%;
}

#btnGoogle{
    position: absolute;
    width: 11%;
    right: 3.4%;
    bottom: 11.5%;
}



/* 1. Max-width and responsive video */
  .landingpage .video-wrapper {
    max-width: 1664px; /* adjust as you like */
    margin: 0 auto;
    position: relative;
    aspect-ratio: 2182 / 580; /* ≈3.76:1 */
    overflow: hidden;
    width:100%;
    border-radius: 15px;
  }

  .landingpage  .video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
  }
  
  
  
.landingpage  .video-wrapper video,
.landingpage  .video-wrapper .mejs__container {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover; /* or contain, if you prefer letterboxing */
}

  /* 3. Custom play button overlay */
.landingpage   .custom-play-btn {
    position: absolute;
    width:100%;
    height:100%;
    padding: 0;
    border: none;
    background: transparent;
  }


.p1overlaylink{
    border: 0px solid #000;
    display: block;
    position: absolute;
    width: 20%;
    height: 20%;
    top: 55%;
    left: 5%;
    background: rgba(255, 255, 255, 0);
    z-index: 999;
}



  .landingpage  .bottomContainer{
    max-width:1664px;
    margin:0 auto;
    width:100%;
}


/* p2 */

/* 1. Max-width and responsive video */
  .signupstep-page .video-wrapper {
    max-width: 100%; /* adjust as you like */
    margin: 0 auto;
    position: relative;
    aspect-ratio: 950 / 1400;   /* ≈3.76:1 */
    overflow: hidden;
    margin-top:min(2.396vw,46px);
  }

  .signupstep-page  .video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
  }
  
  
  
.signupstep-page  .video-wrapper video,
.signupstep-page  .video-wrapper .mejs__container {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover; /* or contain, if you prefer letterboxing */
}

.bottomContainer{
    display:block;
    height:min(18.229vw,350px);
}
.presslisten{
    position: relative;
    left:min(2.9vw,56px);
    width: 76%;
    display: block;
}
.signupstep-page .presslisten img{
    max-width:100%;
}

.signup-steps-container-wrapper{
width:min(76.823vw,1475px);
}
#signup-steps-container{
  border-radius: 15px; /* Applies a 10px radius to all corners */
  background-color:#f5f8fa;
  padding-top:min(1.2396vw,24px);
  padding-left:min(3.1146vw, 60px);
  max-width: min(50vw,960px);
}

#signup-steps-container .buttons{
    /*padding-left:min(3.1146vw, 75px);*/
}

#signup-steps-container-index{
      border-radius: 15px; /* Applies a 10px radius to all corners */
      background-color:#f5f8fa;
      padding-top:min(2.448vw,49px);
      padding-left:min(3.1146vw, 60px);
      max-width: min(53.646vw,1030px);
      padding-bottom:min(3.1146vw,60px);
}

.funpageindex #signup-steps-container-index{
    padding-bottom: min(0.365vw,7px);
    margin-bottom: min(1.042vw,20px);
}

.instructionLine{
    padding-top: min(2vw, 38.4px); /* before was 3vw */
    padding-left: min(4.4916vw,86px);

}

.instructionLineTitle{
    font-size: min(2.8vw,53.76px);
    font-weight: bold;
    line-height:min(4.5vw,86.4px);
}
.instructionLineContent{
    font-size:min(2.25vw,43.2px);
    font-weight: bold;
    letter-spacing: min(0.1vw,1.92px);
}

.signupindex .instructionLineContent{ 
    font-size: min(2.146vw, 41.2px);
    font-weight: bold;
    letter-spacing: 0;
    padding-top: min(0.99vw,19px);
}

.signupindex ul.buttons {
    padding-top: min(2.708vw, 52px);
    padding-left: min(1.042vw, 20px);
}


.innerpageindexContent-title{
    font-size: min(2.487vw, 47.76px);
    font-weight: bold;
    line-height:min(4.5vw,86.4px);
}


.floating-info{
    position:absolute;
    top:0;
    right:0;
    z-index: 999;
    padding-top:min(1.302vw, 25px);
    width:min(30.729vw, 590px);
    aspect-ratio: 780 / 680; /* ≈3.76:1 */
    display:block;
    
}

.floating-info .video-wrapper{
    
    width:min(30.729vw, 590px);
    max-width: 590px;
    aspect-ratio: 780 / 680; /* ≈3.76:1 */
    
}
.floating-info,
.floating-info video {
    
    height: auto !important;
}
.floating-info video{
width:100%;
}

.floating-info img{
    width:100%;
}


.signupindex  #signup-steps-container-index {
      max-width: min(50vw,1130);
}


.blue{
    color:#1d319b;
}


span.step-number{
    /*display:block;
    border-radius: 80px;
    background-color:#4ea0db;
    width:min(4.167vw,80px);
    height:min(4.167vw,80px);
    text-align: center;
    color:#fff;
    line-height: min(3.958vw,76px);
    font-weight:bold;
    font-size:min(2.70835vw ,52px);
    */
     display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #4ea0db;
    width: min(4.167vw, 80px);
    height: min(4.167vw, 80px);
    color: #fff;
    font-weight: bold;
    font-size: min(2.70835vw, 52px);
    
}

ul.buttons{
    display:flex;
    gap:min(2.25vw,40px);
    padding: min(4.4916vw,86px);
    font-size: min(2.2916vw,44px);
    font-weight: bold;
    
    padding-top: min(2.708vw, 52px);
    
}

ul.buttons li{
white-space: nowrap;
}

.blueButton{
    color:#fff;
    background-color:#1d319b;
    border-radius: 10px;
    line-height: min(1.5vw,28.8px);
    padding:min(1.118vw,20px) min(1.2915vw,20px);
}

.whiteButton{
    color:#1c2e9c;
    background-color:#F5F8FA;
    border-radius: 10px;
    line-height: min(1.5vw,28.8px);
    padding:min(1.118vw,20px) min(1.2915vw,20px);
    border:2px solid #1d319b;
}

.cols{
    display:flex;
}

.col-l, .col-r{
flex: 1 1 auto;
}

.col-r{
width:37.5%;
}

.step-title{
font-size:min(2.5vw,48px);
font-weight: bold;
}

.progressbar-bottom{
height:min(10px,0.521vw);
background-color:#cfebff;
margin-top: min(0.781vw,15px);
margin-bottom: min(0.781vw, 15px);
margin-left:0;
margin-right:0;

}

.progressbar{
display: block;
height:min(10px,0.521vw);
background-color:#4ea0db;
width: 0;/* calc(100%/14);*/


}
.ebill-progressbar{
display: block;
height:min(10px,0.521vw);
background-color:#4ea0db;
width: 0; /*calc(100%/4);*/
}
.ecofun-progressbar{
display: block;
height:min(10px,0.521vw);
background-color:#4ea0db;
width: 0; /*calc(100%/4);*/
}

.centerpagebuttons {
    justify-content:center;
}

.finishpagebuttons{
gap:8px !Important;
padding: 0 !important;
    margin-top:min(1.042vw,20px);
}

.finishpagebuttons li a{
padding-top:min(1.146vw, 22px);
padding-bottom:min(1.146vw, 22px);
    padding-left:min(2.917vw, 44px);
    padding-right:min(2.917vw, 44px);
}
.spacer_50{
height:50px;
display: block;
}


@keyframes increaseWidth1 {0% {width: calc(100%/14*0);} 100% { width: calc(100%/14*1);} }
@keyframes increaseWidth2 {0% {width: calc(100%/14*1);} 100% { width: calc(100%/14*2);} }
@keyframes increaseWidth3 {0% {width: calc(100%/14*2);} 100% { width: calc(100%/14*3);} }
@keyframes increaseWidth4 {0% {width: calc(100%/14*3);} 100% { width: calc(100%/14*4);} }
@keyframes increaseWidth5 {0% {width: calc(100%/14*4);} 100% { width: calc(100%/14*5);} }
@keyframes increaseWidth6 {0% {width: calc(100%/14*5);} 100% { width: calc(100%/14*6);} }
@keyframes increaseWidth7 {0% {width: calc(100%/14*6);} 100% { width: calc(100%/14*7);} }
@keyframes increaseWidth8 {0% {width: calc(100%/14*7);} 100% { width: calc(100%/14*8);} }
@keyframes increaseWidth9 {0% {width: calc(100%/14*8);} 100% { width: calc(100%/14*9);} }
@keyframes increaseWidth10 {0% {width: calc(100%/14*9);} 100% { width: calc(100%/14*10);} }
@keyframes increaseWidth11 {0% {width: calc(100%/14*10);} 100% { width: calc(100%/14*11);} }
@keyframes increaseWidth12 {0% {width: calc(100%/14*11);} 100% { width: calc(100%/14*12);} }
@keyframes increaseWidth13 {0% {width: calc(100%/14*12);} 100% { width: calc(100%/14*13);} }
@keyframes increaseWidth14 {0% {width: calc(100%/14*13);} 100% { width: calc(100%/14*14);} }

.progress1{animation: increaseWidth1 2s ease forwards; /* Trigger animation */}
.progress2{animation: increaseWidth2 2s ease forwards; /* Trigger animation */}
.progress3{animation: increaseWidth3 2s ease forwards; /* Trigger animation */}
.progress4{animation: increaseWidth4 2s ease forwards; /* Trigger animation */}
.progress5{animation: increaseWidth5 2s ease forwards; /* Trigger animation */}
.progress6{animation: increaseWidth6 2s ease forwards; /* Trigger animation */}
.progress7{animation: increaseWidth7 2s ease forwards; /* Trigger animation */}
.progress8{animation: increaseWidth8 2s ease forwards; /* Trigger animation */}
.progress9{animation: increaseWidth9 2s ease forwards; /* Trigger animation */}
.progress10{animation: increaseWidth10 2s ease forwards; /* Trigger animation */}
.progress11{animation: increaseWidth11 2s ease forwards; /* Trigger animation */}
.progress12{animation: increaseWidth12 2s ease forwards; /* Trigger animation */}
.progress13{animation: increaseWidth13 2s ease forwards; /* Trigger animation */}
.progress14{animation: increaseWidth14 2s ease forwards; /* Trigger animation */}


@keyframes billincreaseWidth1 {0% {width: calc(100%/4*0);} 100% { width: calc(100%/4*1);} }
@keyframes billincreaseWidth2 {0% {width: calc(100%/4*1);} 100% { width: calc(100%/4*2);} }
@keyframes billincreaseWidth3 {0% {width: calc(100%/4*2);} 100% { width: calc(100%/4*3);} }
@keyframes billincreaseWidth4 {0% {width: calc(100%/4*3);} 100% { width: calc(100%/4*4);} }

.bill-progress1{animation: billincreaseWidth1 2s ease forwards; /* Trigger animation */}
.bill-progress2{animation: billincreaseWidth2 2s ease forwards; /* Trigger animation */}
.bill-progress3{animation: billincreaseWidth3 2s ease forwards; /* Trigger animation */}
.bill-progress4{animation: billincreaseWidth4 2s ease forwards; /* Trigger animation */}




@keyframes ecofunincreaseWidth1 {0% {width: calc(100%/10*0);} 100% { width: calc(100%/10*1);} }
@keyframes ecofunincreaseWidth2 {0% {width: calc(100%/10*1);} 100% { width: calc(100%/10*2);} }
@keyframes ecofunincreaseWidth3 {0% {width: calc(100%/10*2);} 100% { width: calc(100%/10*3);} }
@keyframes ecofunincreaseWidth4 {0% {width: calc(100%/10*3);} 100% { width: calc(100%/10*4);} }
@keyframes ecofunincreaseWidth5 {0% {width: calc(100%/10*4);} 100% { width: calc(100%/10*5);} }
@keyframes ecofunincreaseWidth6 {0% {width: calc(100%/10*5);} 100% { width: calc(100%/10*6);} }
@keyframes ecofunincreaseWidth7 {0% {width: calc(100%/10*6);} 100% { width: calc(100%/10*7);} }
@keyframes ecofunincreaseWidth8 {0% {width: calc(100%/10*7);} 100% { width: calc(100%/10*8);} }
@keyframes ecofunincreaseWidth9 {0% {width: calc(100%/10*8);} 100% { width: calc(100%/10*9);} }
@keyframes ecofunincreaseWidth10 {0% {width: calc(100%/10*9);} 100% { width: calc(100%/10*10);} }

.fun-progress1{animation: ecofunincreaseWidth1 2s ease forwards; /* Trigger animation */}
.fun-progress2{animation: ecofunincreaseWidth2 2s ease forwards; /* Trigger animation */}
.fun-progress3{animation: ecofunincreaseWidth3 2s ease forwards; /* Trigger animation */}
.fun-progress4{animation: ecofunincreaseWidth4 2s ease forwards; /* Trigger animation */}
.fun-progress5{animation: ecofunincreaseWidth5 2s ease forwards; /* Trigger animation */}
.fun-progress6{animation: ecofunincreaseWidth6 2s ease forwards; /* Trigger animation */}
.fun-progress7{animation: ecofunincreaseWidth7 2s ease forwards; /* Trigger animation */}
.fun-progress8{animation: ecofunincreaseWidth8 2s ease forwards; /* Trigger animation */}
.fun-progress9{animation: ecofunincreaseWidth9 2s ease forwards; /* Trigger animation */}
.fun-progress10{animation: ecofunincreaseWidth10 2s ease forwards; /* Trigger animation */}


.step-title2{
font-size:min(1.7vw,32.64px);
font-weight: bold;
display: flex;
align-items: center;
}

.step-title2 span {
    font-size: 150%;
    margin: 0 10px; /* Optional: adds a little space around the number */
    line-height: 1; /* Helps keep alignment tight when mixing font sizes */
}

.pd-left-2vw{
    padding-left:2vw;
}

    
/*  p3  finish */
.signupstep-page .bottomContainer,
.signupfinish .bottomContainer,
.signupindex .bottomContainer{
padding-top:30px;
}
    
    /* 1. Max-width and responsive video */
  .signupfinish .video-wrapper {
    max-width: 100%; /* adjust as you like */
    margin: 0 auto;
    position: relative;
    aspect-ratio: 1774 / 716; /* ≈3.76:1 */
    overflow: hidden;
  }

  .signupfinish  .video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
  }
  
  
.signupfinish  .video-wrapper video,
.signupfinish  .video-wrapper .mejs__container,
.signupfinish  .video-wrapper .mejs__inner,
.signupfinish  .video-wrapper .mejs__mediaelement,
.signupfinish  .video-wrapper .mejs__poster {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover; /* or contain, if you prefer letterboxing */
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  border: none !important;
  border-width: 0 !important;
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -webkit-appearance: none !important;
  -webkit-focus-ring-color: transparent !important;
  opacity: 0.995 !important; /* Force new composite layer to fix Safari artifacts */
}

.signupfinish .mejs__container:focus,
.signupfinish .mejs__container:active,
.signupfinish .mejs__container:focus-within,
.signupfinish .video-wrapper:focus-within {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
}

/* Specific WebKit focus ring removal */
.signupfinish .video-wrapper *:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-focus-ring-color: transparent !important;
}


  /* 3. Custom play button overlay */
.signupfinish   .custom-play-btn {
    position: absolute;
    width:100%;
    height:100%;
    padding: 0;
    border: none;
    z-index: 10;
    background: transparent
  }


.p1overlaylink{
    border: 0px solid #000;
    display: block;
    position: absolute;
    width: 20%;
    height: 20%;
    top: 55%;
    left: 5%;
    background: rgba(255, 255, 255, 0);
    z-index: 999;
}
    
    
    
    .p3overlaylink_1{
        border: 0px solid #000;
        display: block;
        position: absolute;
       width: 18%;
    height: 55%;
    left: 20%;
        background: rgba(255, 0, 0, 0);
        z-index: 999;
    }
    .p3overlaylink_2{
        border: 0px solid #000;
        display: block;
        position: absolute;
width: 24%;
    height: 55%;
    left: 41%;
        background: rgba(0, 255, 0, 0);
        z-index: 999;
    }
    .p3overlaylink_3{
        border: 0px solid #000;
        display: block;
        position: absolute;
      width: 18%;
    height: 55%;
    left: 70.2%;
        background: rgba(0, 0, 255, 0);
        z-index: 999;
    }



video:focus,
.mejs__container:focus,
.mejs__overlay:focus,
.mejs__video:focus,
.mejs__inner:focus {
    outline: none !important;
    box-shadow: none !important;
}


#overlayImage{    
position: absolute;
    z-index: 99;
    top: 0;
    width: 100%;
    left: 0;
    height: 100%;
    outline:none;
}




.custom-play-btn{
top:0;
z-index: 9999;
outline: none;
}

.custom-play-btn:focus{
outline:none;
}

  /* 3. Custom play button overlay */
.signupfinish .custom-play-btn,
.funpageindex .custom-play-btn,
.signupindex .custom-play-btn,
.signupstep-page   .custom-play-btn {
    position: absolute;
    width:100%;
    height:100%;
    padding: 0;
    border: none;
    z-index: 9999;
    background: transparent;
    top:0;
  }

.funpageindex .custom-play-btn,
.signupfinish .custom-play-btn,
.signupindex .custom-play-btn{

    left:0;
}





.no-drag {
    -webkit-user-drag: none; /* For Chrome, Safari, Opera */
    -khtml-user-drag: none;  /* For older Konqueror browsers */
    -moz-user-drag: none;    /* For Firefox */
    -o-user-drag: none;      /* For older Opera browsers */
    user-drag: none;         /* Standard property */
}




/* Remove Safari focus border */
video:hover,
.mejs__container:hover,
.mejs__overlay:hover,
.mejs__inner:hover,
video:active,
.mejs__container:active,
.mejs__overlay:active,
.mejs__inner:active,
video:focus-visible,
.mejs__container:focus-visible,
.mejs__overlay:focus-visible,
.mejs__inner:focus-visible ,
video:focus,
.mejs__container:focus,
.mejs__overlay:focus,
.mejs__inner:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Kill WebKit blue/black focus ring */
video::-webkit-focus-ring-color {
    outline: none !important;
}

/* Disable highlight on tap/click */
video,
.mejs__container,
.mejs__overlay {
    -webkit-tap-highlight-color: transparent !important;
}

/* Remove native controls highlight */
video::-webkit-media-controls {
    display: none !important;
}

/* Remove any outline from MEJS widgets */
.mejs__container *,
.mejs__overlay * {
    outline: none !important;
    box-shadow: none !important;
}


.mejs__controls{
    display:none !important;
}

.mejs__offscreen{
display:none !important;
}

.rotate-target {
  display: inline-block;
}

/* class that triggers the animation */
.rotate-anim {
  animation: click-rotate 0.5s ease-in-out infinite;
}


#playSound{
    animation: click-rotate 0.5s ease-in-out infinite;
}

/* keyframes: go to 20deg and back to 0deg */
@keyframes click-rotate {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}


.headertips {
    color: #1d319b;
    font-size: min(2.238vw, 42.98px);
    font-weight: bold;
    line-height: min(4.5vw, 86.4px);
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.headertips img {
    height: 1em;
    width: auto;
}

#soundgif {
    height: min(150px,10.42vw);
    width: auto; 
    /* vertical-align: middle;  -- flex handles alignment */
    opacity: 1; 
    transition: opacity 0.2s;
    margin-left:max(-1.302vw,-25px);
    padding:min(75px,5.209vw);
    padding-left:0;
    cursor: pointer;
}

.signupstep-page .bottomContainer,
.signupindex .bottomContainer,
.funpageindex .bottomContainer {
    display: flex;
}

.breadcrumb-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 30px 0;
}

.breadcrumb-header-container .clphk-breadcrumb {
    width: 49.5%;
    margin: 0;
}

.breadcrumb-header-container .headertips {
    width: 49.5%;
}