:root {
  --main-sty-color: #ffffff;
  --canvas-overlay-color: #ffffff;
}


#unity-container { position: absolute; height: 100vh;    width: 100vw; }
#unity-container.unity-mobile { width: 100%;height: 100%; }
#unity-container.unity-mobileAndriod{ width: 100%; height: 100%;}
#unity-canvas { background-image:url(soccer.png); position: absolute;}
.unity-mobile #unity-canvas { width: 100%; height: 100% }
.unity-mobileAndriod #unity-canvas { width: 100%; height: 100% } 
.overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; overflow: hidden;}
.overlay-layer{ background-color: var(--canvas-overlay-color); width: 100%; height: 100%;}
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-light.png') no-repeat center; position: relative; top: -150px; }
#unity-footer { position: relative;}
.unity-mobile #unity-footer { display: none ;}
.unity-mobileAndriod #unity-footer { display: none ;}
#unity-webgl-logo { float:left; width: 74px; height: 159px; background: url('pensooNO4.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px; color: #ffffff; }

body{padding: 0;
    margin: 0;
    background-image: url(soccer.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: fixed;
    background-color: black;
    font-family: 'Titillium Web',sans-serif;
    height: 100vh;
    overflow: hidden;
    background-size: cover;
    width: 100vw;}
	
	.main{
	width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
	}

.counter {
    /*    text-align: center;*/
    margin: auto;
    position: absolute;
    /*    height: 70%;*/
    /*    z-index: 8;*/
    /*    opacity: 1;*/
    /*    background-image: url(Box1.png);*/
    /*    background-size: contain;*/
    /*    background-repeat: no-repeat;*/
    /*    width: 62%; }*/
}
.counter p { 
position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
font-size: 35px; font-family: 'NanumSquare', sans-serif; font-weight: bold; color:white; opacity: inherit; display: inherit; }
.counter h1 { color: white; font-size: 30px; margin-top: -30px; opacity: inherit; display: inherit; }

.counter .ProgressLineB {
    background-image: url(LineB.png);
    border: none;
    height: 11%;
    position: absolute;
    opacity: inherit;
    display: inherit;
    width: 85%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 10%);
}

.ProgressLineB::after {
    content: '';
    position: absolute;
    top: 30%; /* 조절된 값 */
    border-radius: 50px;
    left: 0;
    height: 41%;
    width: 0;
    background: #FFDD00;
    animation: progress 5s ease forwards;
}

@keyframes progress {
    0% { width: 0px; }
    100% { width: 100%; }
}

/* .counter .ProgressLine { background-image: url(Line.png);
    border: none;
    height: 55px;
    width: 2%;
    position: absolute;
    opacity: inherit;
    display: inherit;
    top: 50%;
    transform: translate(0%, -50%);
    margin-left: 7%; } */


    .counter .Panimation {
        position: absolute;
        left: -73%;
        width: 100%;
        height: 100%;
        animation-name: Panimation;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        background-size: contain;
        background-repeat: no-repeat;
        margin-Top: 0%;
      }

      .counter .Pcoffebean1{
        top: 85%;
        transform: translate(10%, -50%);
        position: absolute;
        left: -55%;
        margin-top: 0px;
        width: 94px;
        height: 94px;
        background-image: url(Coffe1.png);}
        .counter .Pcoffebean2{
            top: 85%;
            transform: translate(10%, -50%);
            position: absolute;
            left: -35%;
            margin-top: 0px;
            width: 83px;
            height: 94px;
            background-image: url(Coffe2.png);}
            .counter .Pcoffebean3{
                top: 85%;
                transform: translate(10%, -50%);
                position: absolute;
                left: -15%;
                margin-top: 0px;
                width: 65px;
                height: 70px;
                background-image: url(Coffe3.png);}

                .counter .PMole {
                    top: 30%;
                    left: 130%;
                    transform: translate(-50%, -50%);
                    position: absolute;
                    margin-top: 0px;
                    width: 100%;
                    height: 100%; /* 수정된 값 */
                    max-height: 256px; /* 최대 높이 값 설정 */
                    background-image: url(Pensoo.png);
                    background-size: contain;
                    background-repeat: no-repeat;
                }


.counter h1.abs { position: absolute; top: 0; width: 100%; opacity: inherit; display: inherit; }
.counter .color { width: 0px; overflow: hidden; color: var(--main-sty-color); opacity: inherit; display: inherit; }
div#loadingBox { width: 100%; height: 20px; position: absolute; top: 50%; margin-top: 50px; text-align: center; }
body .vertical-centered-box { position: absolute; width: 100%; height: 100%; text-align: center; top: -50px; }
body .vertical-centered-box:after { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; }
body .vertical-centered-box .content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; vertical-align: middle; text-align: left; font-size: 0; }
* {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;opacity: inherit;}
.loader-circle {position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(250, 250, 2500, 0.1); margin-left: -60px;margin-top: -60px;top: 95px;}
.loader-line-mask{position:absolute;left:50%;top:50%;width:60px;height:120px;top:95px;margin-left:-60px;margin-top:-60px;overflow:hidden;-webkit-transform-origin:60px 60px;-moz-transform-origin:60px 60px;-o-transform-origin:60px 60px;-ms-transform-origin:60px 60px;transform-origin:60px 60px;-webkit-mask-image:-webkit-linear-gradient(top,#000,rgba(0,0,0,0));-webkit-animation:rotate 1.2s infinite linear;-moz-animation:rotate 1.2s infinite linear;-o-animation:rotate 1.2s infinite linear;animation:rotate 1.2s infinite linear}
.loader-line-mask .loader-line {width: 120px;height: 120px;border-radius: 50%;box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);}
lesshat-selector{-lh-property:0}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@-o-keyframes rotate{0%{-o-transform:rotate(0)}100%{-o-transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}lesshat-selector{-lh-property:0}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@-o-keyframes rotate{0%{-o-transform:rotate(0)}100%{-o-transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}lesshat-selector{-lh-property:0}@-webkit-keyframes fade{0%{opacity:1}50%{opacity:.25}}@-moz-keyframes fade{0%{opacity:1}50%{opacity:.25}}@-o-keyframes fade{0%{opacity:1}50%{opacity:.25}}@keyframes fade{0%{opacity:1}50%{opacity:.25}}lesshat-selector{-lh-property:0}@-webkit-keyframes fade{0%{opacity:1}50%{opacity:.25}}@-moz-keyframes fade{0%{opacity:1}50%{opacity:.25}}@-o-keyframes fade{0%{opacity:1}50%{opacity:.25}}@keyframes fade{0%{opacity:1}50%{opacity:.25}}lesshat-selector{-lh-property:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-o-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}lesshat-selector{-lh-property:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-o-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}
.loader-lineToline {
  width: 200px;
  height: 3px;
  position: relative;
  overflow: hidden;
  background-color: #ddd; 
  margin: 100px auto;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.loader-lineToline:before {
  content: "";
  position: absolute;
  left: -50%;
  height: 3px;
  width: 40%;
  background-color: red;
  -webkit-animation: lineAnim 1s linear infinite;
  -moz-animation: lineAnim 1s linear infinite;
  animation: lineAnim 1s linear infinite;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

@keyframes lineAnim {
  0% {
      left: -40%;
  }
  50% {
      left: 20%;
      width: 80%;
  }
  100% {
      left: 100%;
      width: 100%;
  }
}


@keyframes Panimation {
    0%    { top: 0px; background-image: url('1.png'); }
    16%   { top: 0px; background-image: url('2.png'); }
    33%   { top: 0px; background-image: url('3.png');  }
    50%   { top: 0px; background-image: url('4.png'); }
    66%   { top: 0px; background-image: url('5.png'); }
    83%   { top: 0px; background-image: url('6.png'); }
    100%  { top: 0px; background-image: url('7.png'); }
}