*{
  --pink:#ff85ff;
  --black:#000;
  --white:#fff;
  --trans:rgba(0,0,0,0.12);
  --paperBack:#e5f0fa;
  --dropPink:rgba(173,0,255,0.55);
  --deepPink:#ad00ff;
  --dropWhite:rgba(255, 255, 255, 0.8);
  --maxWidth:100%;
  --marginTop:17px;
  --marginLeft:17px;
  --scaleX:0.93;
}
html{ font-size:15px; }
body{
  font-size:1rem;
  color:var(--black);
  font-weight:500;
  font-family:"aktiv-grotesk", 'Pretendard', sans-serif;
  line-height:1.58;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  overflow:hidden;
}
h1, h2, h3, h4, h5{
  font-family:"aktiv-grotesk", 'Pretendard', sans-serif;
  font-weight:400;
  line-height:1.1;
}
/* h1{ font-size:2rem; }
h2,h3{ font-size:1.1538rem; } */

/* input */
input, textarea, select, button{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border:0;
  outline:none;
  background:transparent;
  max-width:100%;
  font-family:'dos', sans-serif;
  font-size:1.5rem;
  font-weight:400;
  vertical-align:top;
  background-color:var(--white);
  color:var(--pink);
  border-radius:60px;
}
iframe{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border:0;
  outline:none;
}
select,
input{  }
input::placeholder, textarea::placeholder,
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ color:var(--trans); }
input::-webkit-input-placeholder{ line-height:normal!important; }
button{ cursor:pointer; border:0; }
select{ padding:7px 25px 7px 15px; height:46px; line-height:1; color:var(--pink); border-radius:60px;
  background: url('http://fiftyfifty.speedgabia.com/img/selectBtn.svg') no-repeat calc(100% - 15px) center;
  background-color:var(--white);
}
textarea{ padding:7px 25px 7px 15px; resize:none; }
/* input:text, password */
input[type=text],
input[type=password]{ padding:7px 25px 7px 15px; height:46px; line-height:1; color:var(--pink); border-radius:60px;  }
/* input:check, radio */
:is(.checkbox,.radiobox){ display:inline-block; position:relative; width:10px; height:10px; margin-right:6px; margin-top:-2px; vertical-align:middle; z-index:9; }
:is(.checkbox,.radiobox) ~ :is(.checkbox,.radiobox){ margin-left:24px; }
input[type=radio],input[type=checkbox]{ opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; }
:is(.checkboxBtn,.radioboxBtn){ content:''; width:100%; height:100%; position:absolute; left:0; top:0; pointer-events:none; }
  :is(.checkboxBtn,.radioboxBtn):before,
  :is(.checkboxBtn,.radioboxBtn):after{ content:''; position:absolute; display:block; width:100%; height:100%; opacity:0; pointer-events:none; transition-property:opacity;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
  }
  :is(.checkboxBtn,.radioboxBtn):before{ opacity:1; }
  :is(.checkboxBtn,.radioboxBtn):after{ opacity:0; }
  .checkboxBtn:before{ background-image:url('http://fiftyfifty.speedgabia.com/img/btn_check_empty.svg'); }
  .checkboxBtn:after{ background-image:url('http://fiftyfifty.speedgabia.com/img/btn_check_fill.svg'); }
  .radioboxBtn:before{ background-image:url('http://fiftyfifty.speedgabia.com/img/btn_radio_empty.svg'); }
  .radioboxBtn:after{ background-image:url('http://fiftyfifty.speedgabia.com/img/btn_radio_fill.svg'); }
input[type=checkbox]:checked + :is(.checkboxBtn,.radioboxBtn):before,
input[type=radio]:checked + :is(.checkboxBtn,.radioboxBtn):before{ opacity:0; }
input[type=checkbox]:checked + :is(.checkboxBtn,.radioboxBtn):after,
input[type=radio]:checked + :is(.checkboxBtn,.radioboxBtn):after{ opacity:1; }

/* navigation */
#navigation{
  /* position: fixed; */
  /* bottom: var(--marginTop);
  right: var(--marginLeft); */
  /* z-index: 250; */
  height: 40px;
  border-radius: 40px;
  background-color: rgba(255, 255, 255, 0.75);
  /* filter: drop-shadow(0 0 12px rgba(255, 133, 255, 0.6)); */
  backdrop-filter: blur(3px);
}
  #navigation ul.link{ display:flex; flex-direction:row; gap:12px; align-items:center; padding:8px 20px; }
    #navigation ul.link li{ width:20px; line-height:1; }
      #navigation ul.link li a{ display:block; }

/* music palyer */
#musicPlayer{
    position:fixed;
    bottom:var(--marginTop);
    left:var(--marginLeft);
    z-index:250;
    height:40px;
    background-color:rgba(255,255,255,0.75);
    border-radius: 40px;
    padding:4px 20px;
    display:flex;
    align-items:center;
    gap:8px;
    width:280px;
    /* filter:drop-shadow(0 0 12px rgba(255,133,255,0.6)); */
    backdrop-filter:blur(3px);
    display:none;
}

.play-button{ width:20px; height:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--pink);
  font-size:20px;
  transition:all 0.2s ease;
  background-color:transparent;
}
.progress-container{ flex:1; display:flex; align-items:center; gap:8px; }
.progress-bar{ flex:1; height:6px; background:#e0e0e0; border-radius:3px; position:relative; cursor:pointer; }
.progress-played{ height:100%; background:var(--pink); width:0%; transition:width 0.1s ease; }
.progress-remaining { position:absolute; top:0; right:0; height:100%; background:var(--trans); width:100%; }
.time-display {
    font-family:sans-serif;
    font-size:1rem;
    font-weight:600;
    transform:scaleX(var(--scaleX));
}

/* transition */
:is(.closeBtn,.backBtn),
#header .inner h1 img{ transition:300ms; }

/* Common */
:is(.closeBtn,.backBtn){ display:inline-block; vertical-align:top; margin-left:-10px; padding:7px 15px; background-color:var(--black); border-radius:40px; cursor:pointer; }
:is(.closeBtn,.backBtn):after{
  font-size:1.2rem;
  color:var(--pink);
  line-height:1;
}
.closeBtn:after{ content:'닫기'; }
.backBtn:after{ content:'메인으로'; }

.max { width:100%; height:auto; }

img.shadow {
  filter:drop-shadow(0 0 4px var(--dropWhite));
  -webkit-filter:drop-shadow(0 0 4px var(--dropWhite));
}

#backImage{ position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; pointer-events:none; z-index:-1;
  background-image:url('http://fiftyfifty.speedgabia.com/img/bg.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:top center;
}
#backImage:after{ content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:18%; height:100%; min-width:280px;
  background-image:url('http://fiftyfifty.speedgabia.com/img/fifty.svg');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0.64;
  filter: drop-shadow(0 0 4px var(--dropWhite));
}

/* Header */
#header{ position:fixed; top:0; left:0; right:0; width:100%; z-index:99; }
  #header .inner{ position:relative; width:100%; max-width:var(--maxWidth); padding:var(--marginTop); }
    #header .inner :is(#title-too,#title-much,h1){ position:absolute; top:var(--marginTop); }
    #header .inner :is(#title-too,#title-much){ cursor:pointer; }
    #header .inner img#title-too{ left:var(--marginLeft); }
    #header .inner img#title-much{ right:var(--marginLeft); }
    #header .inner h1{ left:50%; transform:translateX(-50%); }
      #header .inner h1 img{ position:absolute; opacity:0; }
      #header .inner h1 img#title-part{ margin-top:-10%; }
    #header .inner :is(.closeBtn,.backBtn){ position:absolute; top:100px; right:var(--marginLeft); height:37px; }
    #header .inner .closeBtn{ opacity:0; pointer-events:none; }

/* Footer */
#footer .footer-item.right {
  position:fixed;
  bottom:var(--marginTop);
  right:var(--marginLeft);
  z-index:250;
  height:40px;
  display: flex;
}

/* #footer .footer-item.right #language {
  height: 40px;
  border-radius: 40px;
  backdrop-filter: blur(3px);
  position: relative;
  display: inline-block;
  width: 126px;
  margin-left: 12px;
}

#footer .footer-item.right #language .checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

#footer .footer-item.right #language .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-transition: .4s;
  transition: .4s;
}

#footer .footer-item.right #language .slider:before {
  position: absolute;
  content: "KOR";
  height: 40px;
  width: 68px;
  background-color: var(--pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#footer .footer-item.right #language .slider:after {
  content: 'EN';
  color: var(--pink);
  display: flex;
  height: 100%;
  position: absolute;
  right: 0;
  width: 58px;
  align-items: center;
  justify-content: center;
}

#footer .footer-item.right #language input:checked + .slider {
  background-color: #2196F3;
}

#footer .footer-item.right #language input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

#footer .footer-item.right #language input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
} */

.slider.round {
  border-radius: 40px;
}

.slider.round:before {
  border-radius: 40px;
}

#footer .footer-item.right #language {
  height: 40px;
  border-radius: 40px;
  backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.75);
  position: relative;
  display: inline-flex;
  width: 126px;
  margin-left: 12px;
  cursor: pointer;
  overflow: hidden;
}

/* 슬라이딩 배경 */
#footer .footer-item.right #language::before {
  content: '';
  position: absolute;
  height: 40px;
  width: 68px;
  background-color: var(--pink);
  border-radius: 40px;
  transition: transform 0.4s ease;
  left: 0;
  top: 0;
  z-index: 1;
}

/* ENG 활성화 시 배경 이동 */
#footer .footer-item.right #language.eng::before {
  transform: translateX(58px);
}

/* 라벨 공통 스타일 */
#footer .footer-item.right #language .lang-label {
  position: relative;
  z-index: 2;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:1rem;
  font-weight: 400;
  transition: color 0.3s ease;
  cursor: pointer;
  text-transform: uppercase;
}

#footer .footer-item.right #language .lang-label.kor {
  width: 68px;
  color: #fff;
}

#footer .footer-item.right #language .lang-label.eng {
  width: 58px;
  color: var(--pink);
}

/* ENG 활성화 시 색상 변경 */
#footer .footer-item.right #language.eng .lang-label.kor {
  color: var(--pink);
}

#footer .footer-item.right #language.eng .lang-label.eng {
  color: #fff;
}

/* transition */
#elements > div .title,
#personality .envelope img.up,
#personality .envelope div.paper{ transition:300ms; }

.button-area{  }
[class^="btn"]{ display:block; padding:14px 20px; cursor:pointer;
  font-size:1rem;
  text-align:center;
  line-height:1;
}
[class^="btn"].emphasize{ color:var(--deepPink); }
[class^="btn"].btnSubmit{ background-color:var(--black); color:var(--pink); }
[class^="btn"].sizeL{ font-size:1.5rem; font-weight:400; padding:12px 15px; height:46px; }
[class^="btn"].radius{ border-radius:60px; }

.txt{ display:inline-block; transform:scaleX(var(--scaleX)); }
.deco{ pointer-events:none; }

.window{ border-radius:12px; background-color:rgba(255, 255, 255, 0.75); font-size:0;
  backdrop-filter:blur(3px);
  filter:drop-shadow(0 0 18px var(--dropPink));
}
.window:after{ content:''; position:absolute; display:block; width:50px; height:10px; top:12px; left:12px;
  background-image:url('http://fiftyfifty.speedgabia.com/img/window_buttons.svg');
  background-position:center left;
  background-repeat:no-repeat;
  background-size:contain;
}
  .window > :is(h2,h3){ display:block; padding:12px 0 8px; transform:scaleX(0.6);
    font-family:'Boska-Variable',serif;
    font-size:1.6rem;
    font-style:italic;
    font-weight:400;
    text-align:center;
    line-height:1.1;
  }
  .window > p{ display:block;
    font-family:"aktiv-grotesk", 'Pretendard', sans-serif;
    font-size:1rem;
    font-style:normal;
    text-align:center;
    line-height:1.1;
  }
  .window > .content{ margin-top:8px; }

#elements{  }
  #elements > div{ position:fixed; cursor:pointer;
    transition:200ms linear;
  }
    #elements > div .title{ position:absolute; font-size:0; line-height:1; white-space:nowrap; opacity:0; pointer-events:none; z-index:10; }
      #elements > div .title > span{ display:inline-block; vertical-align:top; margin-left:-10px; padding:7px 15px; background-color:var(--black); border-radius:40px;
        font-size:1.8rem;
        color:var(--pink);
      }
      #elements > div .title > span:nth-child(2n){ margin-top:10px; }
    /* hover */
    @media screen and (min-width:1024px){
      #elements > div:hover{
        animation:updown infinite forwards 1s ease-in-out;
      }
        #elements > div:hover .title{ opacity:1;
          animation:tilt_deco 2400ms infinite steps(1);
        }
    }

/* specific */
#rockscissorpaper{ top:10%; left:5%; width:25%; }
  #rockscissorpaper .title{ top:5%; left:70%; }
    #rockscissorpaper .title > span:nth-child(2n){ margin-top:22px !important; margin-left:-20px; }
  #rockscissorpaper .roulette{ position:relative; width:100%; }
    #rockscissorpaper .roulette img{  }
    #rockscissorpaper .roulette img:not(.base){ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
    #rockscissorpaper .roulette img.base{
      filter:drop-shadow(0 0 4px var(--dropWhite));
      -webkit-filter:drop-shadow(0 0 4px var(--dropWhite));
    }
/* hover */
@media screen and (min-width:1024px){
  #rockscissorpaper:hover .roulette{  }
    #rockscissorpaper:hover .roulette img.arrow{
      animation:arrow_rotate infinite forwards 1200ms ease-in-out;
    }
}

#waiting{ width:60vh; bottom:-22%; z-index:5; }
  #waiting img.speech{ position:absolute; left:75%; top:10%;
    animation:tilt_deco 2400ms infinite steps(1);
  }
  #waiting img.character{
    animation:tilt_deco 2400ms infinite steps(1); animation-delay:-1200ms;
  }

#personality{ left:52%; top:95%; width:35%; transform:translate(-50%,-100%) rotate(-3deg); }
  #personality .title{ top:30%; right:-15%; }
  #personality .envelope{ position:relative; width:100%; font-size:0; }
    #personality .envelope img{ display:block; width:100%; }
    #personality .envelope img:not(.base){ position:absolute; }
    #personality .envelope img.base{ position:relative; z-index:-1; }
    #personality .envelope img.up{ z-index:3; left:0; top:0; transform:scaleY(1); transform-origin:top; }
    #personality .envelope img.down{ z-index:2; left:0; bottom:0; }
    #personality .envelope img:is(.left,.right){ bottom:0; z-index:1; }
    #personality .envelope img.left{ left:0;  }
    #personality .envelope img.right{ right:0; }
    #personality .envelope img.heart{ top:-25%; left:80%; width:20%; z-index:2;
      animation:tilt_deco 2400ms infinite steps(1);
    }
    #personality .envelope div.paper{ position:absolute; top:50%; left:50%; background-color:var(--paperBack); width:calc(100% - 20px); height:calc(100% - 20px); transform:translate(-50%,-50%); }
      #personality .envelope div.paper img.paper-title{ top:20px; left:50%; width:80%; transform:translateX(-50%); }
/* hover */
@media screen and (min-width:1024px){
  #personality:hover .envelope{  }
    #personality:hover .envelope img.up{ transform:scaleY(-1); z-index:-1; }
    #personality:hover .envelope div.paper{ margin-top:-50px; }
}

#photozone{ top:28%; right:5%; width:20%;
  cursor:not-allowed;
}
  #photozone .window{  }
    #photozone .window > .content{  }
      #photozone .window > .content .button-area{ position:absolute; left:0; right:0; bottom:0; width:100%; display:flex; }
        #photozone .window > .content .button-area [class^="btn"]{ flex:1; }
  #photozone img.deco{ position:absolute;
    animation:tilt_deco 2400ms infinite steps(1);
  }
  #photozone img.wifi{ top:-16%; left:-20%; width:23%; }
  #photozone img.heart-pink{ top:-22%; right:-2%; width:20%; }
  #photozone .title{ top:66%; left:-14%; }
    #photozone .title > span:nth-child(2n){ margin-top:26px !important; margin-left:-30px; }

/* keyframe */
@keyframes updown{
  0%{ margin-top:0; }
  50%{ margin-top:-5px; }
  100%{ margin-top:0; }
}
@keyframes tilt_deco{
  0%{ transform:rotate(2deg); }
  50%{ transform:rotate(-2deg); }
  100%{ transform:rotate(2deg); }
}
@keyframes arrow_rotate {
  0%{ transform:translate(-50%,-50%) rotate(0deg); }
  100%{ transform:translate(-50%,-50%) rotate(360deg); }
}
@keyframes updown_bottom{
  0%{ margin-bottom:0; }
  50%{ margin-bottom:-5px; }
  100%{ margin-bottom:0; }
}
@keyframes blink{
  0%{ opacity:0; }
  50%{ opacity:1; }
  100%{ opacity:0; }
}
@keyframes arrow_tilt{
  0%{ transform:translate(-50%,-50%) rotate(12deg); }
  50%{ transform:translate(-50%,-50%) rotate(-12deg); }
  100%{ transform:translate(-50%,-50%) rotate(12deg); }
}

/* photobooth */
#photobooth{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5;
  width:calc(100% - 40px); max-width:1024px;
  display:none;
  /* height:calc(100% - 40px); max-height:900px; */
}
  #photobooth .window{  }
    #photobooth .window > :is(h2,h3){ transform:none; font-size:0; }
    #photobooth .window > .content{  }
      #photobooth .window > .content .image-wrapper{ width: 100%; }
        #photobooth .window > .content .image-wrapper .main-image{ position:relative; width:100%; background:#000; border:2px solid #000; padding-top:56.25%; }
          #photobooth .window > .content .image-wrapper .main-image img{ display:block;
            position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%;
            /* width:100%; height:56.25%; */
            object-fit:contain;
          }
        #photobooth .window > .content .image-wrapper .thumbnail-list{ display:flex; gap:4px; overflow-x:auto;
          background-color:var(--trans);
        }
        #photobooth .window > .content .image-wrapper .thumbnail-list::-webkit-scrollbar { display: none; }
          #photobooth .window > .content .image-wrapper .thumbnail-list .thumb-item { flex-shrink: 0; height:88px; cursor: pointer; opacity: 0.5; transition: opacity 0.3s ease;
            background-color:#fff;
          }
          #photobooth .window > .content .image-wrapper .thumbnail-list .thumb-item:hover {
            opacity:0.8;
          }
          #photobooth .window > .content .image-wrapper .thumbnail-list .thumb-item.active {
            opacity:1;
            border:4px solid var(--pink);
            box-sizing:border-box;
          }
            #photobooth .window > .content .image-wrapper .thumbnail-list .thumb-item img {
              width:100%;
              height:88px;
              display:block;
            }

      #photobooth .window > .content .button-area{ position:relative; padding:12px 20px; }
        #photobooth .window > .content .button-area > .list-btn{ position:absolute; top:50%; left:20px; transform:translateY(-50%);
          display:flex; flex-direction:row;
          background-color:#fff;
          border-radius:40px;
        }
          #photobooth .window > .content .button-area > .list-btn > li{ padding:0 8px; height:28px; cursor:pointer;
            display:flex; justify-content:center; align-items:center;
            border-radius:40px;
          }
            #photobooth .window > .content .button-area > .list-btn > li img{
              filter: invert(71%) sepia(86%) saturate(1444%) hue-rotate(249deg) brightness(102%) contrast(105%);
              -webkit-filter: invert(71%) sepia(86%) saturate(1444%) hue-rotate(249deg) brightness(102%) contrast(105%);
            }
          /* selected */
          #photobooth .window > .content .button-area > .list-btn > li.selected{ background-color:var(--pink); }
            #photobooth .window > .content .button-area > .list-btn > li.selected img{
              filter:none; -webkit-filter:none;
            }

        #photobooth .window > .content .button-area > .shot-btn{ display:block; width:48px; height:48px; margin:0 auto; opacity:0.5;
          display:flex; justify-content:center; align-items:center;
          border-radius:50%; border:1px solid; border-color:var(--trans); background-color:#fff;
        }
          #photobooth .window > .content .button-area > .shot-btn img{
            filter: invert(84%) sepia(11%) saturate(9%) hue-rotate(314deg) brightness(95%) contrast(91%);
            -webkit-filter: invert(84%) sepia(11%) saturate(9%) hue-rotate(314deg) brightness(95%) contrast(91%);
          }

/* on */
body.loading{ pointer-events:none; cursor:wait; }

body:not(.rockscissorpaper,.personality,.photozone){  }
  body:not(.rockscissorpaper,.personality,.photozone) #header .inner h1 img#title-part{ position:relative; opacity:1; }

body:is(.rockscissorpaper,.personality,.photozone){  }
  body:is(.rockscissorpaper,.personality,.photozone) #elements{  }
    body:is(.rockscissorpaper,.personality,.photozone) #elements > div{ pointer-events:none; }

body.rockscissorpaper{  }
  body.rockscissorpaper #header .inner h1 img#title-rock{ position:relative; opacity:1; }
  body.rockscissorpaper #elements{  }
    body.rockscissorpaper #elements > div{  }
    body.rockscissorpaper #elements > div:not(#rockscissorpaper){ opacity:0; pointer-events:none; }
    body.rockscissorpaper #elements > div#rockscissorpaper{ top:50%; left:50%; transform:translate(-50%,-50%); }
      body.rockscissorpaper #elements > div#rockscissorpaper .roulette img.arrow{
        animation:arrow_rotate infinite forwards 1200ms ease-in-out;
      }
    /* zoom */
    body.rockscissorpaper.zoom #elements > div#rockscissorpaper{ transform:translate(-50%,-50%) scale(3); opacity:0; transition-duration:1200ms; }

body.personality{  }
  /* body.personality #header .inner .closeBtn{ opacity:1; pointer-events:all; } */
  body.personality #header .inner h1 img#title-personal{ position:relative; opacity:1; }
  body.personality #elements{  }
    body.personality #elements > div{  }
    body.personality #elements > div:not(#personality){ opacity:0; pointer-events:none; }
    body.personality #elements > div#personality{ top:50%; left:50%; bottom:unset; transform:translate(-50%,-50%); width:50%; max-width:800px; transition-duration:1200ms;
      perspective:1000px;
      -webkit-perspective:1000px;
    }
      body.personality #elements > div#personality .envelope{ transform:rotateY(360deg); transition:1000ms; }
      body.personality #elements > div#personality .envelope img.heart{ display:none; }

/* body.photozone{  }
  body.photozone #header .inner .closeBtn{ opacity:1; pointer-events:all; }
  body.photozone #header .inner h1 img#title-photo{ position:relative; opacity:1; }
  body.photozone #elements{  }
    body.photozone #elements > div{ opacity:0; pointer-events:none; }

  body.photozone #photobooth{ display:block; } */

/* language */
body[data-lang*="eng"] .closeBtn:after{ content:'Close'; }
body[data-lang*="eng"] .backBtn:after{ content:'Home'; }
