@charset "utf-8"; /* hbCounter */ #hbCounter { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; -webkit-flex-wrap: nowrap; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; position: relative; width: 100%; overflow: hidden; } #hbCounter.normal { background: rgb(253, 231, 146) url("../images/counter/bg.jpg") center no-repeat; background-size: cover; } #hbCounter.android { background: rgb(253, 231, 146) url("../images/counter/bg_and.jpg") center no-repeat; background-size: cover; } #hbCounter div.container { position: absolute; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 1164px; } /* title */ #hbCounter div.title { position: relative; margin: 0 auto; } #hbCounter div.title img { width: 100%; } /* board */ #hbCounter div.board { position: relative; margin: 8px auto 0 auto; width: 100%; height: 96px; } #hbCounter div.board ul { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; -webkit-flex-wrap: nowrap; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 800px; } #hbCounter div.board ul li.panel { position: relative; margin: 0 1px; width: 64px; height: 96px; background: url("../images/counter/frame_no_shadow.png") center no-repeat; background-size: contain; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); overflow: hidden; } #hbCounter div.board ul li.panel:after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; box-sizing: border-box; } #hbCounter div.board ul li.panel:before { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; content: ""; background-color: rgba(0, 0, 0, 0.3); z-index: 1000; } #hbCounter div.board ul li.panel img { position: absolute; top: -100px; left: 0; width: 100%; height: auto; } #hbCounter div.board ul li.sub { position: relative; } #hbCounter div.board ul li.sub img { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; } #hbCounter div.board ul li.unit img { width: 80%; } #hbCounter div.board ul li.comma img { width: 50%; } #hbCounter div.board ul li.hai img { width: 90%; text-align: right; } /* note */ #hbCounter div.note { position: relative; margin: 20px auto 0 auto; width: 784px; } #hbCounter div.note p { margin-top: 3px; font-family: sans-serif; font-weight: bold; color: rgb(0, 0, 0); line-height: 1.2; } #hbCounter div.note p:before { margin-left: -0.5em; content: "※"; } /* toast */ #hbCounter div.toast { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 100%; max-width: 1164px; height: 100%; } #hbCounter div.toast img { width:100%; } #hbCounter div.item-01 { display: none; position: absolute; top: 14%; left: 0; width: 14%; height: auto; } #hbCounter div.item-02 { display: none; position: absolute; top: 2%; right: 20%; width: 12%; height: auto; } #hbCounter div.item-03 { display: none; position: absolute; top: 8%; right: 4%; width: 13%; height: auto; } #hbCounter div.item-04 { display: none; position: absolute; bottom: 18%; left: 3%; width: 13%; height: auto; } #hbCounter div.item-05 { display: none; position: absolute; bottom: 12%; left: 22%; width: 11%; height: auto; } #hbCounter div.item-06 { display: none; position: absolute; bottom: 18%; right: 30%; width: 11%; height: auto; } /* bubble */ div.bubble { position: absolute; left: 50%; bottom: -10%; } div.bubble div.core { position: relative; width: 25px; height: 25px; border-radius: 100px; box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.8) inset; } @keyframes moveBubble{0%{transform:translateY(0)}100%{transform:translateY(-800px);opacity:.2}}@keyframes shakeBubble{0%,100%{transform:translateX(10px)}50%{transform:translateX(-10px)}}div.bubble.move0{animation:moveBubble 3s cubic-bezier(.55,.085,.68,.53) 0s infinite normal}div.bubble.pos0{left:0;bottom:-88px}div.bubble div.scale0{transform:scale(0)}div.bubble div.shake0{animation:shakeBubble 2s ease 0s infinite normal}div.bubble.move1{animation:moveBubble 4.1s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos1{left:2%;bottom:-65px}div.bubble div.scale1{transform:scale(.1)}div.bubble div.shake1{animation:shakeBubble 2.1s ease 0s infinite normal}div.bubble.move2{animation:moveBubble 3.2s cubic-bezier(.55,.085,.68,.53) .2s infinite normal}div.bubble.pos2{left:4%;bottom:-56px}div.bubble div.scale2{transform:scale(.2)}div.bubble div.shake2{animation:shakeBubble 2.2s ease 0s infinite normal}div.bubble.move3{animation:moveBubble 4.3s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos3{left:6%;bottom:-31px}div.bubble div.scale3{transform:scale(.3)}div.bubble div.shake3{animation:shakeBubble 2.3s ease 0s infinite normal}div.bubble.move4{animation:moveBubble 3.4s cubic-bezier(.55,.085,.68,.53) .4s infinite normal}div.bubble.pos4{left:8%;bottom:-63px}div.bubble div.scale4{transform:scale(.4)}div.bubble div.shake4{animation:shakeBubble 2.4s ease 0s infinite normal}div.bubble.move5{animation:moveBubble 4.5s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos5{left:10%;bottom:-57px}div.bubble div.scale5{transform:scale(.5)}div.bubble div.shake5{animation:shakeBubble 2.5s ease 0s infinite normal}div.bubble.move6{animation:moveBubble 3.6s cubic-bezier(.55,.085,.68,.53) .6s infinite normal}div.bubble.pos6{left:12%;bottom:-57px}div.bubble div.scale6{transform:scale(.6)}div.bubble div.shake6{animation:shakeBubble 2.6s ease 0s infinite normal}div.bubble.move7{animation:moveBubble 4.7s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos7{left:14%;bottom:-78px}div.bubble div.scale7{transform:scale(.7)}div.bubble div.shake7{animation:shakeBubble 2.7s ease 0s infinite normal}div.bubble.move8{animation:moveBubble 3.8s cubic-bezier(.55,.085,.68,.53) .8s infinite normal}div.bubble.pos8{left:16%;bottom:-86px}div.bubble div.scale8{transform:scale(.8)}div.bubble div.shake8{animation:shakeBubble 2.8s ease 0s infinite normal}div.bubble.move9{animation:moveBubble 4.9s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos9{left:18%;bottom:-47px}div.bubble div.scale9{transform:scale(.9)}div.bubble div.shake9{animation:shakeBubble 2.9s ease 0s infinite normal}div.bubble.move10{animation:moveBubble 4s cubic-bezier(.55,.085,.68,.53) 1s infinite normal}div.bubble.pos10{left:20%;bottom:-32px}div.bubble div.scale10{transform:scale(1)}div.bubble div.shake10{animation:shakeBubble 3s ease 0s infinite normal}div.bubble.move11{animation:moveBubble 5.1s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos11{left:22%;bottom:-79px}div.bubble div.scale11{transform:scale(1.1)}div.bubble div.shake11{animation:shakeBubble 3.1s ease 0s infinite normal}div.bubble.move12{animation:moveBubble 4.2s cubic-bezier(.55,.085,.68,.53) 1.2s infinite normal}div.bubble.pos12{left:24%;bottom:-71px}div.bubble div.scale12{transform:scale(1.2)}div.bubble div.shake12{animation:shakeBubble 3.2s ease 0s infinite normal}div.bubble.move13{animation:moveBubble 5.3s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos13{left:26%;bottom:-73px}div.bubble div.scale13{transform:scale(1.3)}div.bubble div.shake13{animation:shakeBubble 3.3s ease 0s infinite normal}div.bubble.move14{animation:moveBubble 4.4s cubic-bezier(.55,.085,.68,.53) 1.4s infinite normal}div.bubble.pos14{left:28%;bottom:-56px}div.bubble div.scale14{transform:scale(1.4)}div.bubble div.shake14{animation:shakeBubble 3.4s ease 0s infinite normal}div.bubble.move15{animation:moveBubble 5.5s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos15{left:30%;bottom:-72px}div.bubble div.scale15{transform:scale(1.5)}div.bubble div.shake15{animation:shakeBubble 3.5s ease 0s infinite normal}div.bubble.move16{animation:moveBubble 4.6s cubic-bezier(.55,.085,.68,.53) 1.6s infinite normal}div.bubble.pos16{left:32%;bottom:-85px}div.bubble div.scale16{transform:scale(1.6)}div.bubble div.shake16{animation:shakeBubble 3.6s ease 0s infinite normal}div.bubble.move17{animation:moveBubble 5.7s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos17{left:34%;bottom:-49px}div.bubble div.scale17{transform:scale(1.7)}div.bubble div.shake17{animation:shakeBubble 3.7s ease 0s infinite normal}div.bubble.move18{animation:moveBubble 4.8s cubic-bezier(.55,.085,.68,.53) 1.8s infinite normal}div.bubble.pos18{left:36%;bottom:-69px}div.bubble div.scale18{transform:scale(1.8)}div.bubble div.shake18{animation:shakeBubble 3.8s ease 0s infinite normal}div.bubble.move19{animation:moveBubble 5.9s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos19{left:38%;bottom:-51px}div.bubble div.scale19{transform:scale(1.9)}div.bubble div.shake19{animation:shakeBubble 3.9s ease 0s infinite normal}div.bubble.move20{animation:moveBubble 5s cubic-bezier(.55,.085,.68,.53) 2s infinite normal}div.bubble.pos20{left:40%;bottom:-49px}div.bubble div.scale20{transform:scale(2)}div.bubble div.shake20{animation:shakeBubble 4s ease 0s infinite normal}div.bubble.move21{animation:moveBubble 6.1s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos21{left:42%;bottom:-38px}div.bubble div.scale21{transform:scale(2.1)}div.bubble div.shake21{animation:shakeBubble 4.1s ease 0s infinite normal}div.bubble.move22{animation:moveBubble 5.2s cubic-bezier(.55,.085,.68,.53) 2.2s infinite normal}div.bubble.pos22{left:44%;bottom:-47px}div.bubble div.scale22{transform:scale(2.2)}div.bubble div.shake22{animation:shakeBubble 4.2s ease 0s infinite normal}div.bubble.move23{animation:moveBubble 6.3s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos23{left:46%;bottom:-48px}div.bubble div.scale23{transform:scale(2.3)}div.bubble div.shake23{animation:shakeBubble 4.3s ease 0s infinite normal}div.bubble.move24{animation:moveBubble 5.4s cubic-bezier(.55,.085,.68,.53) 2.4s infinite normal}div.bubble.pos24{left:48%;bottom:-66px}div.bubble div.scale24{transform:scale(2.4)}div.bubble div.shake24{animation:shakeBubble 4.4s ease 0s infinite normal}div.bubble.move25{animation:moveBubble 6.5s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos25{left:50%;bottom:-44px}div.bubble div.scale25{transform:scale(2.5)}div.bubble div.shake25{animation:shakeBubble 4.5s ease 0s infinite normal}div.bubble.move26{animation:moveBubble 5.6s cubic-bezier(.55,.085,.68,.53) 2.6s infinite normal}div.bubble.pos26{left:52%;bottom:-68px}div.bubble div.scale26{transform:scale(2.6)}div.bubble div.shake26{animation:shakeBubble 4.6s ease 0s infinite normal}div.bubble.move27{animation:moveBubble 6.7s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos27{left:54%;bottom:-79px}div.bubble div.scale27{transform:scale(2.7)}div.bubble div.shake27{animation:shakeBubble 4.7s ease 0s infinite normal}div.bubble.move28{animation:moveBubble 5.8s cubic-bezier(.55,.085,.68,.53) 2.8s infinite normal}div.bubble.pos28{left:56%;bottom:-61px}div.bubble div.scale28{transform:scale(2.8)}div.bubble div.shake28{animation:shakeBubble 4.8s ease 0s infinite normal}div.bubble.move29{animation:moveBubble 6.9s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos29{left:58%;bottom:-63px}div.bubble div.scale29{transform:scale(2.9)}div.bubble div.shake29{animation:shakeBubble 4.9s ease 0s infinite normal}div.bubble.move30{animation:moveBubble 6s cubic-bezier(.55,.085,.68,.53) 3s infinite normal}div.bubble.pos30{left:60%;bottom:-63px}div.bubble div.scale30{transform:scale(3)}div.bubble div.shake30{animation:shakeBubble 5s ease 0s infinite normal}div.bubble.move31{animation:moveBubble 7.1s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos31{left:62%;bottom:-51px}div.bubble div.scale31{transform:scale(3.1)}div.bubble div.shake31{animation:shakeBubble 5.1s ease 0s infinite normal}div.bubble.move32{animation:moveBubble 6.2s cubic-bezier(.55,.085,.68,.53) 3.2s infinite normal}div.bubble.pos32{left:64%;bottom:-33px}div.bubble div.scale32{transform:scale(3.2)}div.bubble div.shake32{animation:shakeBubble 5.2s ease 0s infinite normal}div.bubble.move33{animation:moveBubble 7.3s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos33{left:66%;bottom:-33px}div.bubble div.scale33{transform:scale(3.3)}div.bubble div.shake33{animation:shakeBubble 5.3s ease 0s infinite normal}div.bubble.move34{animation:moveBubble 6.4s cubic-bezier(.55,.085,.68,.53) 3.4s infinite normal}div.bubble.pos34{left:68%;bottom:-60px}div.bubble div.scale34{transform:scale(3.4)}div.bubble div.shake34{animation:shakeBubble 5.4s ease 0s infinite normal}div.bubble.move35{animation:moveBubble 7.5s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos35{left:70%;bottom:-39px}div.bubble div.scale35{transform:scale(3.5)}div.bubble div.shake35{animation:shakeBubble 5.5s ease 0s infinite normal}div.bubble.move36{animation:moveBubble 6.6s cubic-bezier(.55,.085,.68,.53) 3.6s infinite normal}div.bubble.pos36{left:72%;bottom:-33px}div.bubble div.scale36{transform:scale(3.6)}div.bubble div.shake36{animation:shakeBubble 5.6s ease 0s infinite normal}div.bubble.move37{animation:moveBubble 7.7s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos37{left:74%;bottom:-76px}div.bubble div.scale37{transform:scale(3.7)}div.bubble div.shake37{animation:shakeBubble 5.7s ease 0s infinite normal}div.bubble.move38{animation:moveBubble 6.8s cubic-bezier(.55,.085,.68,.53) 3.8s infinite normal}div.bubble.pos38{left:76%;bottom:-71px}div.bubble div.scale38{transform:scale(3.8)}div.bubble div.shake38{animation:shakeBubble 5.8s ease 0s infinite normal}div.bubble.move39{animation:moveBubble 7.9s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos39{left:78%;bottom:-88px}div.bubble div.scale39{transform:scale(3.9)}div.bubble div.shake39{animation:shakeBubble 5.9s ease 0s infinite normal}div.bubble.move40{animation:moveBubble 7s cubic-bezier(.55,.085,.68,.53) 4s infinite normal}div.bubble.pos40{left:80%;bottom:-90px}div.bubble div.scale40{transform:scale(4)}div.bubble div.shake40{animation:shakeBubble 6s ease 0s infinite normal}div.bubble.move41{animation:moveBubble 8.1s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos41{left:82%;bottom:-38px}div.bubble div.scale41{transform:scale(4.1)}div.bubble div.shake41{animation:shakeBubble 6.1s ease 0s infinite normal}div.bubble.move42{animation:moveBubble 7.2s cubic-bezier(.55,.085,.68,.53) 4.2s infinite normal}div.bubble.pos42{left:84%;bottom:-39px}div.bubble div.scale42{transform:scale(4.2)}div.bubble div.shake42{animation:shakeBubble 6.2s ease 0s infinite normal}div.bubble.move43{animation:moveBubble 8.3s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos43{left:86%;bottom:-60px}div.bubble div.scale43{transform:scale(4.3)}div.bubble div.shake43{animation:shakeBubble 6.3s ease 0s infinite normal}div.bubble.move44{animation:moveBubble 7.4s cubic-bezier(.55,.085,.68,.53) 4.4s infinite normal}div.bubble.pos44{left:88%;bottom:-90px}div.bubble div.scale44{transform:scale(4.4)}div.bubble div.shake44{animation:shakeBubble 6.4s ease 0s infinite normal}div.bubble.move45{animation:moveBubble 8.5s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos45{left:90%;bottom:-76px}div.bubble div.scale45{transform:scale(4.5)}div.bubble div.shake45{animation:shakeBubble 6.5s ease 0s infinite normal}div.bubble.move46{animation:moveBubble 7.6s cubic-bezier(.55,.085,.68,.53) 4.6s infinite normal}div.bubble.pos46{left:92%;bottom:-59px}div.bubble div.scale46{transform:scale(4.6)}div.bubble div.shake46{animation:shakeBubble 6.6s ease 0s infinite normal}div.bubble.move47{animation:moveBubble 8.7s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos47{left:94%;bottom:-67px}div.bubble div.scale47{transform:scale(4.7)}div.bubble div.shake47{animation:shakeBubble 6.7s ease 0s infinite normal}div.bubble.move48{animation:moveBubble 7.8s cubic-bezier(.55,.085,.68,.53) 4.8s infinite normal}div.bubble.pos48{left:96%;bottom:-33px}div.bubble div.scale48{transform:scale(4.8)}div.bubble div.shake48{animation:shakeBubble 6.8s ease 0s infinite normal}div.bubble.move49{animation:moveBubble 8.9s cubic-bezier(.25,.46,.45,.94) 0s infinite normal}div.bubble.pos49{left:98%;bottom:-73px}div.bubble div.scale49{transform:scale(4.9)}div.bubble div.shake49{animation:shakeBubble 6.9s ease 0s infinite normal}div.bubble.move50{animation:moveBubble 8s cubic-bezier(.55,.085,.68,.53) 5s infinite normal}div.bubble.pos50{left:100%;bottom:-87px}div.bubble div.scale50{transform:scale(5)}div.bubble div.shake50{animation:shakeBubble 7s ease 0s infinite normal} /* depth */ #hbCounter div.title { z-index: 10; } #hbCounter div.board { z-index: 10; } #hbCounter div.board ul li.panel:before { z-index: 11; } #hbCounter div.board ul li.panel:after { z-index: 12; } #hbCounter div.toast { z-index: 9; } /* bpoints */ @media screen and (min-width: 320px) { #hbCounter { margin-top: -26%; height: 450px; } #hbCounter div.container { top: 130px; } #hbCounter div.title { width: 90%; } #hbCounter div.title p { margin-left: 0; } #hbCounter div.board { height: 36px; } #hbCounter div.board ul { width : 94%; width: calc(240px + 40px + 28px) } #hbCounter div.board ul li { height: 36px; } #hbCounter div.board ul li.panel { width: 24px; height: 36px; } #hbCounter div.board ul li.panel { border-radius: 2px; } #hbCounter div.board ul li.panel:after { border: rgb(255, 255, 255) solid 1px; border-radius: 2px; } #hbCounter div.board ul li.unit { width: 8px; } #hbCounter div.board ul li.comma { width: 5px; } #hbCounter div.board ul li.hai { width: 14px; } #hbCounter div.note { width : 94%; width: calc(240px + 40px + 28px) } #hbCounter div.note p { padding-left: 10px; font-size: 7px; } #hbCounter div.item-01 { top: 13%; left: 0; width: 19%; } #hbCounter div.item-02 { top: 10%; right: 40%; width: 17%; } #hbCounter div.item-03 { top: 12%; right: 2%; width: 17%; } #hbCounter div.item-04 { bottom: 11%; left: 3%; width: 19%; } #hbCounter div.item-05 { bottom: 12%; left: 35%; width: 17%; } #hbCounter div.item-06 { bottom: 16%; right: 18%; width: 17%; } } @media screen and (min-width: 321px) and ( max-width: 420px) { #hbCounter { margin-top: -26%; height: 500px; } #hbCounter div.container { top: 150px; } #hbCounter div.title { width: 84%; } #hbCounter div.title p { margin-left: 0; } #hbCounter div.board { height: 42px; } #hbCounter div.board ul { width : 94%; width: calc(280px + 48px + 28px) } #hbCounter div.board ul li { height: 42px; } #hbCounter div.board ul li.panel { width: 28px; height: 42px; } #hbCounter div.board ul li.panel { border-radius: 2px; } #hbCounter div.board ul li.panel:after { border: rgb(255, 255, 255) solid 1px; border-radius: 2px; } #hbCounter div.board ul li.unit { width: 9px; } #hbCounter div.board ul li.comma { width: 5px; } #hbCounter div.board ul li.hai { width: 20px; } #hbCounter div.note { width : 94%; width: calc(280px + 48px + 28px) } #hbCounter div.note p { padding-left: 10px; font-size: 7px; } #hbCounter div.item-01 { top: 13%; left: 0; width: 19%; } #hbCounter div.item-02 { top: 10%; right: 40%; width: 17%; } #hbCounter div.item-03 { top: 12%; right: 2%; width: 17%; } #hbCounter div.item-04 { bottom: 14%; left: 3%; width: 19%; } #hbCounter div.item-05 { bottom: 14%; left: 35%; width: 17%; } #hbCounter div.item-06 { bottom: 16%; right: 18%; width: 17%; } } @media screen and (min-width: 421px) and ( max-width: 580px) { #hbCounter { margin-top: -26%; height: 550px; } #hbCounter div.container { top: 160px; } #hbCounter div.title { width: 80%; } #hbCounter div.title p { margin-left: 0; } #hbCounter div.board { height: 48px; } #hbCounter div.board ul { width: calc(320px + 68px + 28px) } #hbCounter div.board ul li { height: 48px; } #hbCounter div.board ul li.panel { width: 32px; height: 48px; } #hbCounter div.board ul li.panel { border-radius: 2px; } #hbCounter div.board ul li.panel:after { border: rgb(255, 255, 255) solid 1px; border-radius: 2px; } #hbCounter div.board ul li.unit { width: 9px; } #hbCounter div.board ul li.comma { width: 5px; } #hbCounter div.board ul li.hai { width: 40px; } #hbCounter div.note { width: calc(320px + 68px + 28px) } #hbCounter div.note p { padding-left: 10px; font-size: 9px; } #hbCounter div.item-01 { top: 11%; left: 0; width: 18%; } #hbCounter div.item-02 { top: 8%; right: 40%; width: 16%; } #hbCounter div.item-03 { top: 10%; right: 2%; width: 16%; } #hbCounter div.item-04 { bottom: 15%; left: 3%; width: 18%; } #hbCounter div.item-05 { bottom: 15%; left: 35%; width: 16%; } #hbCounter div.item-06 { bottom: 17%; right: 18%; width: 16%; } } @media screen and (min-width: 581px) and ( max-width: 767px) { #hbCounter { margin-top: -28%; height: 680px; } #hbCounter div.container { top: 220px; } #hbCounter div.title { width: 62%; } #hbCounter div.title p { margin-left: -10%; } #hbCounter div.board { height: 63px; } #hbCounter div.board ul { width: calc(420px + 124px + 28px) } #hbCounter div.board ul li { height: 63px; } #hbCounter div.board ul li.panel { width: 42px; height: 63px; } #hbCounter div.board ul li.panel { border-radius: 4px; } #hbCounter div.board ul li.panel:after { border: rgb(255, 255, 255) solid 1px; border-radius: 4px; } #hbCounter div.board ul li.unit { width: 23px; } #hbCounter div.board ul li.comma { width: 14px; } #hbCounter div.board ul li.hai { width: 50px; } #hbCounter div.note { width: calc(420px + 124px + 28px) } #hbCounter div.note p { padding-left: 10px; font-size: 10px; } #hbCounter div.item-01 { top: 16%; left: 0; width: 15%; } #hbCounter div.item-02 { top: 13%; right: 22%; width: 14%; } #hbCounter div.item-03 { top: 16%; right: 5%; width: 14%; } #hbCounter div.item-04 { bottom: 15%; left: 3%; width: 14%; } #hbCounter div.item-05 { bottom: 10%; left: 22%; width: 13%; } #hbCounter div.item-06 { bottom: 12%; right: 36%; width: 12%; } } @media screen and (min-width: 768px) { #hbCounter { margin-top: -20%; height: 800px; } #hbCounter div.container { top: 310px; } #hbCounter div.title { width: 50%; } #hbCounter div.title p { margin-left: -10%; } #hbCounter div.board { height: 96px; } #hbCounter div.board ul { width: calc(640px + 174px + 28px) } #hbCounter div.board ul li { height: 96px; } #hbCounter div.board ul li.panel { width: 64px; height: 96px; } #hbCounter div.board ul li.panel { border-radius: 5px; } #hbCounter div.board ul li.panel:after { border: rgb(255, 255, 255) solid 2px; border-radius: 5px; } #hbCounter div.board ul li.unit { width: 28px; } #hbCounter div.board ul li.comma { width: 14px; } #hbCounter div.board ul li.hai { width: 90px; } #hbCounter div.note { width: calc(640px + 174px + 28px) } #hbCounter div.note p { padding-left: 10px; font-size: 9px; } #hbCounter div.item-01 { top: 32%; left: 0; width: 13%; } #hbCounter div.item-02 { top: 21%; right: 21%; width: 12%; } #hbCounter div.item-03 { top: 22%; right: 5%; width: 12%; } #hbCounter div.item-04 { bottom: 11%; left: 3%; width: 12%; } #hbCounter div.item-05 { bottom: 10%; left: 22%; width: 11%; } #hbCounter div.item-06 { bottom: 14%; right: 38%; width: 10%; } } .ngdialog .sr-sh-theme-btn, .sr-sh .sr-sh-theme-btn{ padding:7px 8%; background:#000; color:#fff; border:1px solid #000; } srsh-sign-in .sr-sh-theme-form { display: none; } .sr-sh .sr-sh-theme-signin-wrapper .sr-sh-theme-rule, .ngdialog .sr-sh-theme-signin-wrapper .sr-sh-theme-rule { display: none; } .sr-sh .sr-sh-theme-navigation { display: none; } @media screen and (max-width: 767px) { .ngdialog .sr-sh-theme-btn, .sr-sh .sr-sh-theme-btn{ padding:7px 20%; width:71.875%; margin:0 auto; } } @media screen and ( min-width:768px ){ .ngdialog .sr-sh-theme-btn, .sr-sh .sr-sh-theme-btn{ -webkit-transition:all 0.3s ; -moz-transition:all 0.3s ; transition:all 0.3s ; } }