* {margin: 0; padding: 0;} img,abbr,acronym,fieldset{border:0;} table{border-collapse: collapse; border-spacing: 0;} h1,h2,h3,h4,h5,h6{font-size: 100%;} body {font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;} input, textarea, select {font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;} .c {text-align:center; } #dailyLayout {position:relative; width:375px; margin:0 auto; background:#ccc; overflow:hidden; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #preGame {position:relative; width:100%; height:627px; background:url(https://static.ncsoft.jp/images/daily/images/openingImage.jpg); background-size:375px 627px;} #game {background:url(https://static.ncsoft.jp/images/daily/images/gameBg.jpg) #190620} #dailyChallengeLogo {position:absolute; top:0; left:0; width:375px; height:105px; background-size: 375px 105px; background-image:url(https://static.ncsoft.jp/images/daily/images/logo.png); animation: animeRen .5s ease-in 1s 1 backwards; -webkit-animation: animeRen .5s ease-in 1s 1 backwards; } #dailyChallengeLogo div {padding-top:5px; } #dailyChallengeLogo div .logo {display:block; width:100%; height:35px; background:url(https://static.ncsoft.jp/images/daily/images/title_welcome.png) center top no-repeat; background-size:175px 35px; } #dailyChallengeLogo div .logo.lineage {background-image:url(https://static.ncsoft.jp/images/daily/images/title_lineage.png); } #dailyChallengeLogo div .logo.lineage2 {background-image:url(https://static.ncsoft.jp/images/daily/images/title_lineage2.png); } #dailyChallengeLogo div .logo.aion {background-image:url(https://static.ncsoft.jp/images/daily/images/title_aion.png); } #dailyChallengeLogo div .logo.bns {background-image:url(https://static.ncsoft.jp/images/daily/images/title_bns.png); } #dailyChallengeLogo div .soundVolume {position:absolute; top:10px; right:10px; width:40px; height:40px; background:url(https://static.ncsoft.jp/images/daily/images/speaker.png) #000; background-size:cover; border-radius:100%; cursor:pointer; text-indent:-9999px; overflow:hidden; box-shadow:0 0 3px rgba(255,255,255,.6); } #dailyChallengeLogo div .soundVolume::after {content:"on"} #dailyChallengeLogo div .soundVolume.off {background-position:0 -50px; } #dailyChallengeLogo div .soundVolume.off::after {content:"off"} .contentPanel {width:170px; height:300px; box-sizing:border-box; border:2px solid #ddd; } /* width:375px; height:667px; */ .panel {float:left; } #preGame .startGameWaku {width:100%; height:100%;} #preGame .selectGameWaku {width:100%; padding-top:40%; height:60%; text-align:center; } #preGame .selectGameWaku div.selectGame {margin:0 20px 20px;} #preGame .selectGameWaku div.messageArea {margin:20px 40px; background:rgba(255,255,255,.4); text-shadow:0 0 3px rgba(255,255,255,.5); } #preGame .selectGameWaku div.btnArea {margin-top:20px;} #preGame .selectGameWaku div.openingTxt {position:absolute; top:455px; left:0; width:100%; height:28px; background:url(https://static.ncsoft.jp/images/daily/images/openingTxt.png) center no-repeat; background-size:214px 28px; animation: animeRen .4s ease-in 1.3s 1 backwards; -webkit-animation: animeRen .4s ease-in 1.3s 1 backwards; } #preGame .selectGameWaku div.form { animation: fadeShow .35s ease-in-out 1.3s backwards; -webkit-animation: fadeShow .35s ease-in-out 1.3s backwards; } @keyframes fadeShow { 0% {opacity:0} 100% {opacity:100} } #preGame .selectGameWaku div.guide {position:absolute; bottom:30px; width:100%; color:#aaa; cursor:pointer; } #preGame .selectGameWaku div.guide:active {color:#fff; } #preGame .selectCharaWaku {width:100%; padding-top:40%; height:100%; text-align:center; box-sizing:border-box; background-size:375px 667px;} #preGame .selectCharaWaku div.selectServer {margin:0 20px 20px;} #preGame .selectCharaWaku div.messageArea {margin:20px 40px; background:rgba(255,255,255,.4); text-shadow:0 0 3px rgba(255,255,255,.5); } #preGame .selectCharaWaku div.selectChara {margin:0 20px 20px;} #preGame .selectCharaWaku div.returnBtn {position:absolute; bottom:70px; width:100%; animation: fadeShow .35s ease-in-out .5s backwards; -webkit-animation: fadeShow .35s ease-in-out .5s backwards; } #preGame .selectCharaWaku .form { animation: fadeShow .35s ease-in-out .2s 1 backwards; -webkit-animation: fadeShow .35s ease-in-out .2s 1 backwards; } #preGame.lineage .selectCharaWaku {background-image:url(https://static.ncsoft.jp/images/daily/images/openingImageL1.jpg)} #preGame.lineage2 .selectCharaWaku {background-image:url(https://static.ncsoft.jp/images/daily/images/openingImageL2.jpg)} #preGame.aion .selectCharaWaku {background-image:url(https://static.ncsoft.jp/images/daily/images/openingImageAion.jpg)} #preGame.bns .selectCharaWaku {background-image:url(https://static.ncsoft.jp/images/daily/images/openingImageBnS.jpg)} .spBtn {margin-bottom:10px; display:inline-block; min-width:70px; padding:5px; color:#999; border-radius:30px; text-align:center; line-height:1; font-weight:bold; box-shadow:.3em .3em .3em rgba(0,0,0,.5), 0 0 .3em rgba(255,241,194,.3) inset; background:#eee } .spBtn span {background:#D9D9D9; } .spBtn.big {padding:.5em .8em; font-size:140%;} .spBtn span {display:inline-block; padding:.5em 1em; border-radius:50px; } .spBtn.bigger span { width:254px; padding:.5em .8em; font-size:140%; } .spBtn.active {cursor:pointer; background:url(https://static.ncsoft.jp/images/daily/images/btnBase.jpg); background-size:335px 110px; } .spBtn.active span {background:#F8BF14; color:#333; background: -moz-linear-gradient(top, rgba(246, 208, 91,1) 0%, rgba(243, 188, 55,1) 50%, rgba(238, 153, 22,1) 51%, rgba(239, 160, 25,1) 100%); background: -webkit-linear-gradient(top, rgba(246, 208, 91,1) 0%,rgba(243, 188, 55,1) 50%,rgba(238, 153, 22,1) 51%,rgba(239, 160, 25,1) 100%); background: linear-gradient(to bottom, rgba(246, 208, 91,1) 0%,rgba(243, 188, 55,1) 50%,rgba(238, 153, 22,1) 51%,rgba(239, 160, 25,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */ } .spBtn.active:active { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); } .spBtn2 {position:relative; display:inline-block; min-width:300px; box-sizing:border-box; height:40px; line-height:40px; padding:0 20px; background:#252525; color:#9E9E9E; border-radius:30px; text-align:center; text-decoration:none; box-shadow:.3em .3em .3em rgba(0,0,0,.5), 0 0 .3em rgba(255,241,194,.3) inset; cursor:pointer; } .spBtn2::before {content:""; position:absolute; top:8px; left:8px; width:25px; height:25px; background:#000; border-radius:25px; box-shadow:1px 1px 0 rgba(255,255,255,.2); } .spBtn2::after {content:""; position:absolute; top:15px; left:16px; border-right:7px solid #262626; border-top:6px solid transparent; border-bottom:6px solid transparent; } .spBtn3 {display:inline-block; min-width:70px; padding:5px; color:#333; border-radius:30px; text-align:center; line-height:1; font-weight:bold; box-shadow:.3em .3em .3em rgba(0,0,0,.5), 0 0 .3em rgba(255,241,194,.3) inset; background:#eee } .spBtn3 span {background:#D9D9D9; background: -moz-linear-gradient(top, rgba(219,220,226,1) 1%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 98%); background: -webkit-linear-gradient(top, rgba(219,220,226,1) 1%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 98%); background: linear-gradient(to bottom, rgba(219,220,226,1) 1%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 98%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdce2', endColorstr='#dddfe3',GradientType=0 ); } label.spSelectLabel {position:relative; display:inline-block; overflow:hidden; box-sizing:border-box; padding:0; border-radius:50px; border:0; border-bottom:1px solid #222; box-shadow:2px 2px 2px rgba(0,0,0,.5), 0 0 8px rgba(255,255,255,.5) inset; background: #eaeaea; background: -moz-linear-gradient(top, #eaeaea 0%, #d8d8d8 54%, #dadada 99%); background: -webkit-linear-gradient(top, #eaeaea 0%,#d8d8d8 54%,#dadada 99%); background: linear-gradient(to bottom, #eaeaea 0%,#d8d8d8 54%,#dadada 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#dadada',GradientType=0 ); } select.spSelect {position:relative; display:inline-block; width:300px; height:50px; padding:0 20px; font-size:120%; text-shadow:1px 1px 1px rgba(255,255,255,.5); outline:none; -webkit-appearance: none; -moz-appearance: none; border:0; background:transparent; z-index:1; } #dailyChallenge select::-ms-expand {display: none;} select.spSelect:not([disabled]) { color:#000; } label.spSelectLabel::before {content:""; position:absolute; top:12px; right:10px; width:25px; height:25px; background:#444; border-radius:25px; box-shadow:1px 1px 1px rgba(255,255,255,.5); } label.spSelectLabel::after {content:""; position:absolute; top:22px; right:16px; border-top:7px solid #E0E0E0; border-left:6px solid transparent; border-right:6px solid transparent; } #game .display {position:relative; width:100%; height:310px; overflow:hidden; transition: height 0.5s ease-out 0s; -webkit-transition: height 0.5s ease-out 0s; } #game .display.expand {height:492px;} #game .display .myChara {position:absolute; top:140px; left:30px; width:450px; transition: all .7s ease-in-out 0s; -webkit-transition: all .7s ease-in-out 0s; transform: translate3d(0,0,0) scale(1.6); -webkit-transform: translate3d(0,0,0) scale(1.6); -ms-transform: translate3d(0,0,0) scale(1.6); } #game .display .myChara.move1 {/*left:-70px;*/ top:50px; left:-30px; transform: scale(1,1); -webkit-transform: scale(1,1); -ms-transform: scale(1,1); } #game .display .myChara img {width:100%;} #game .display .enemyBg {background-color: rgba(0,0,0,0); transition: background-color 1.2s linear; -webkit-transition: background-color 1.2s linear; } #game .display .enemyBg.show {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.8); } #game .display .enemy {position:absolute; top:720px; right:90px; width:450px; transform: scale(1.4); -webkit-transform: scale(1.4); transition: all 3.5s cubic-bezier(.45, .61, 1, 1.05); -webkit-transition: all 3.5s cubic-bezier(.45, .61, 1, 1.05);} #game .display .enemy img {width:100%;} /* #game .display .enemy.move1 {top:70px; animation: animeEnemy1 0.1s ease infinite alternate; -webkit-animation: animeEnemy1 0.1s ease infinite alternate; } */ #game .display .enemy.move1 {top:30px; /* right:90px; */ /* transform: scale(1.4); -webkit-transform: scale(1.4); transition: all .5s cubic-bezier(.46, .39, 1, 1.27); -webkit-transition: all .5s cubic-bezier(.46, .39, 1, 1.27);} */ } /* @keyframes animeEnemy1 { 0% {transform: translateY(0px); -webkit-transform: translateY(0px); } 100% {transform: translateY(3px); -webkit-transform: translateY(3px); } } */ /* #game .display .janken {opacity:.1} */ #game .display #myCharaStatusInner {opacity:0; position:absolute; left:10px; bottom:60px; padding:5px; background:rgba(0,0,0,.8); font-size:12px; color:#ededed; transition: opacity 1s ease-out; -webkit-transition: opacity 1s ease-out;} #game .display #myCharaStatusInner.show {opacity: 1; } #game .display #enemyStatusInner {opacity:0; position:absolute; right:10px; bottom:60px; padding:5px; background:rgba(0,0,0,.8); font-size:12px; color:#ededed; transition: opacity 1s ease-out; -webkit-transition: opacity 1s ease-out; } #game .display #enemyStatusInner.show {opacity: 1; } #game .display .grayCover {opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); transition: opacity 0.2s ease-out 0s; -webkit-transition: opacity 0.2s ease-out 0s; } #game .display .grayCover.show {opacity:1;} #game .display .janken .playerKen {opacity:0; transition: opacity .5s linear; -webkit-transition: opacity .5s linear; } #game .display .janken .playerKen.show {opacity:1;} #game .display .janken .ken {position:absolute; width:130px; height:130px; border-radius:70px; background:#fff; background-size:130px 130px; text-indent:-9999px; overflow:hidden; border:5px solid #fff; transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; } #game .display .janken .ken.win {border-color:#CC2000; } #game .display .janken .ken:after {content:""; position:absolute; width:100%; height:100%; top:0; left:0; background-size:130px 130px; border-radius:70px; } #game .display .janken .ken.active {cursor:pointer; box-shadow:3px 3px 3px rgba(0,0,0,.5); z-index:2; } #game .display .janken .ken.active::after {animation: animeJanken 3s ease-in-out infinite normal; -webkit-animation: animeJanken 3s ease-in-out infinite normal; } #game .display .janken .goo::after {background-image:url(https://static.ncsoft.jp/images/daily/images/ken_goo.jpg); } #game .display .janken .cyoki::after {background-image:url(https://static.ncsoft.jp/images/daily/images/ken_cyoki.jpg); animation-delay: 1s !important; -webkit-animation-delay: 1s !important; } #game .display .janken .paa::after {background-image:url(https://static.ncsoft.jp/images/daily/images/ken_paa.jpg); animation-delay: 2s !important; -webkit-animation-delay: 2s !important; } @keyframes animeJanken { 20% {opacity: 1; } 33% {opacity: .5; } 46% {opacity: 1; } } #game .display .janken .ken.pos1 {top:160px; left:115px; } #game .display .janken .ken.pos2 {top:280px; left:20px; } #game .display .janken .ken.pos3 {top:280px; left:215px; } #game .display .janken .txtFightBg {opacity: 0; position: absolute; top: 275px; left:0; height: 36px; width:100%; background: rgba(255, 255, 255, .8); z-index: 2; transition: opacity .3s linear; -webkit-transition: opacity .5s linear; } #game .display .janken .txtFightBg.show {opacity:1;} #game .display .janken .txtFight {position: absolute; left: 375px; top: 275px; height: 36px; width: 100%; background:url(https://static.ncsoft.jp/images/daily/images/txtFight.png) center no-repeat; background-size: 300px 28px; text-indent: -9999px; overflow: hidden; transition: left .5s linear; -webkit-transition: left .2s linear; z-index: 2; } #game .display .janken .txtFight.show {left:0px;} #game .display .janken .txtFight.hide {left:-375px;} .ribon {position:relative; display:inline-block; height:32px; width:140px; vertical-align: middle; text-align: center; color:#5D493A; font-weight:bold; font-style:italic;} .ribon::before {content:""; position:absolute; display: block; width:120px; height:0; border-style:solid; border-width:16px 10px; border-color: #fff transparent; }/*#CC2000*/ .ribon span {position: relative; height:100%; line-height:32px; } .ribon.win {color:#fff;} .ribon.win::before {border-color: #cc2000 transparent; } #game .display .janken .ken.selected {top:170px; left:115px; z-index:1; transform: scale(1.5, 1.5) rotate(720deg); -webkit-transform: scale(1.5, 1.5) rotate(720deg); -ms-transform: scale(1.5, 1.5) rotate(720deg); } #game .display .janken .ken.remove {opacity:0; top:600px;} #game .display .janken .ken.stage {top:230px; left:20px; z-index:auto; transform: scale(1, 1) rotate(0deg); -webkit-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); } #game .display .janken .enemyKen {display:none; position:absolute; top:230px; right:20px;} #game .display .janken .playerRibon {display:none; position:absolute; top:350px; left:20px;} #game .display .janken .enemyRibon {display:none; position:absolute; top:350px; right:20px;} #game .display .janken .vs {display:none; position:absolute; top:280px; left:160px; width:55px; height:55px; background:url(https://static.ncsoft.jp/images/daily/images/vs.png); background-size:55px 55px; text-indent:-9999px; overflow:hidden; } #game .display .janken .chara {display:none; position:absolute; top:0; left:0; width:375px; height:492px; background-size:375px 492px; animation: animeChara .5s ease 1 backwards; -moz-animation: animeChara .5s ease 1 backwards; -webkit-animation: animeChara .5s ease 1 backwards; -o-animation: animeChara .5s ease 1 backwards; } @keyframes animeChara { 0% { transform: translateY(492px); } 50% { transform: translateY(-20px); } 60% { transform: translateY(0px); } 70% { transform: translateY(-15px); } 80% { transform: translateY(0px); } 90% { transform: translateY(-5px); } 100% { transform: translateY(0px); } } @-webkit-keyframes animeChara { 0% { -webkit-transform: translateY(492px); } 50% { -webkit-transform: translateY(-20px); } 60% { -webkit-transform: translateY(0px); } 70% { -webkit-transform: translateY(-15px); } 80% { -webkit-transform: translateY(0px); } 90% { -webkit-transform: translateY(-5px); } 100% { -webkit-transform: translateY(0px); } } #game .display .janken .chara_win_aion {background-image:url(https://static.ncsoft.jp/images/daily/images/chara_win_aion.png);} #game .display .janken .chara_lose_aion {background-image:url(https://static.ncsoft.jp/images/daily/images/chara_lose_aion.png);} #game .display .janken .chara_win_bns {background-image:url(https://static.ncsoft.jp/images/daily/images/chara_win_bns.png);} #game .display .janken .chara_lose_bns {background-image:url(https://static.ncsoft.jp/images/daily/images/chara_lose_bns.png);} #game .display .janken .chara_win_lineage {background-image:url(https://static.ncsoft.jp/images/daily/images/chara_win_lineage.png);} #game .display .janken .chara_lose_lineage {background-image:url(https://static.ncsoft.jp/images/daily/images/chara_lose_lineage.png);} #game .display .janken .chara_win_lineage2 {background-image:url(https://static.ncsoft.jp/images/daily/images/chara_win_lineage2.png);} #game .display .janken .chara_lose_lineage2 {background-image:url(https://static.ncsoft.jp/images/daily/images/chara_lose_lineage2.png);} #game .display .janken .enemyKen.show, #game .display .janken .playerRibon.show, #game .display .janken .enemyRibon.show, #game .display .janken .vs.show, #game .display .janken .chara_win.show, #game .display .janken .chara_lose.show {display:block; } #game .display .janken .btnArea {display:none; opacity:0; position: absolute; top: 410px; width: 100%; text-align: center; transition: opacity .2s ease-out 0s; -webkit-transition: opacity .2s ease-out 0s; } #game .display .janken .btnArea.show {display:block; } #game .display .janken .btnArea.show.show2 {opacity:1;} /* 連勝表示 */ #game .display .janken .rensyou {display:none; position:absolute; top:390px; left:220px; width:160px; height:57px; padding-top:18px; background-image:url(https://static.ncsoft.jp/images/daily/images/renBg.png); background-size:160px 75px; text-align:center; } #game .display .janken .rensyou.show {display:block; animation: animeRen .2s ease-in 1 backwards; -webkit-animation: animeRen .2s ease-in 1 backwards; } @keyframes animeRen { 0% { transform: scale(5, 5); opacity:0; } 50% { transform: scale(1, 1); opacity:1; } 60% { transform: scale(1.1, 1.1); } 70% { transform: scale(1, 1); } 80% { transform: scale(1.1, 1.1); } 90% { transform: scale(1, 1); } } @-webkit-keyframes animeRen { 0% { -webkit-transform: scale(5, 5); opacity:0; } 50% { -webkit-transform: scale(1, 1); opacity:1; } 60% { -webkit-transform: scale(1.1, 1.1); } 70% { -webkit-transform: scale(1, 1); } 80% { -webkit-transform: scale(1.1, 1.1); } 90% { -webkit-transform: scale(1, 1); } } #game .display .janken .rensyou .txt {display:inline-block; width:73px; height:38px; background-image:url(https://static.ncsoft.jp/images/daily/images/renTxt.png); background-size:73px 38px; text-indent:-9999px; overflow:hidden; vertical-align:middle; } #game .display .janken .rensyou .num {display:inline-block; margin:0 -2px; width:30px; height:38px; background-image:url(https://static.ncsoft.jp/images/daily/images/renNum.png); background-size:30px 500px; vertical-align:middle; text-indent:-9999px; overflow:hidden; } #game .display .janken .rensyou .num1 {background-position:0 -50px;} #game .display .janken .rensyou .num2 {background-position:0 -100px;} #game .display .janken .rensyou .num3 {background-position:0 -150px;} #game .display .janken .rensyou .num4 {background-position:0 -200px;} #game .display .janken .rensyou .num5 {background-position:0 -250px;} #game .display .janken .rensyou .num6 {background-position:0 -300px;} #game .display .janken .rensyou .num7 {background-position:0 -350px;} #game .display .janken .rensyou .num8 {background-position:0 -400px;} #game .display .janken .rensyou .num9 {background-position:0 -450px;} #game .display .janken .winOrLose {position:absolute; top:80px; left:35px; width:305px; height:100px; background:center no-repeat; z-index:1; } #game .display .janken .winOrLose.win {background-image:url(https://static.ncsoft.jp/images/daily/images/win.png); background-size:251px 100px; animation: anime1 .5s ease-in 1 backwards; -webkit-animation: anime1 .5s ease-in 1 backwards; } @keyframes anime1 { 0% { transform: translateY(-180px); } 50% { transform: translateY(0px); } 60% { transform: translateY(-15px); } 70% { transform: translateY(0px); } 80% { transform: translateY(-10px); } 90% { transform: translateY(0px); } } @-webkit-keyframes anime1 { 0% { -webkit-transform: translateY(-180px); } 50% { -webkit-transform: translateY(0px); } 60% { -webkit-transform: translateY(-15px); } 70% { -webkit-transform: translateY(0px); } 80% { -webkit-transform: translateY(-10px); } 90% { -webkit-transform: translateY(0px); } } #game .display .janken .winOrLose.lose {background-image:url(https://static.ncsoft.jp/images/daily/images/lose.png); background-size:305px 100px; animation: anime1 .5s ease-in 1 backwards; -webkit-animation: anime1 .5s ease-in 1 backwards; } #game .display .janken .winOrLose.even {background-image:url(https://static.ncsoft.jp/images/daily/images/even.png); background-size:300px 100px; animation: anime1 .5s ease-in 1 backwards; -webkit-animation: anime1 .5s ease-in 1 backwards; } #game .display .returnBtnArea {position:absolute; left:0; bottom:10px; width:100%; text-align:center; } .recordSet {padding-top:18px; background:url(https://static.ncsoft.jp/images/daily/images/recordPanel.jpg) left top no-repeat #4F2601; background-size:375px 135px; color:#775231; } .recordSet .step .stepInner {margin:6px 0; width:375px; height:45px; background:url(https://static.ncsoft.jp/images/daily/images/step.png); background-size:375px 400px;} .recordSet .step .stepInner1 {background-position:0 -50px;} .recordSet .step .stepInner2 {background-position:0 -100px;} .recordSet .step .stepInner3 {background-position:0 -150px;} .recordSet .step .stepInner4 {background-position:0 -200px;} .recordSet .step .stepInner5 {background-position:0 -250px;} .recordSet .step .stepInner6 {background-position:0 -300px;} .recordSet .step .stepInner7 {background-position:0 -350px;} .recordSet .step .stepComplete {opacity:0; transition: opacity .5s linear 3s; -webkit-transition: opacity .5s linear 3s; } .recordSet .step .stepComplete.show {opacity:1; position: absolute; top: 490px; left: 220px; width: 128px; height: 90px; background: url(https://static.ncsoft.jp/images/daily/images/stepCompleteTxt.png); background-size: 128px 90px; animation: animeStepComplete .25s ease-in-out infinite alternate; -webkit-animation: animeStepComplete .25s ease-in-out infinite alternate;} @keyframes animeStepComplete { 0% {transform: translateY(0px); -webkit-transform: translateY(0px);} 100% {transform: translateY(10px); -webkit-transform: translateY(10px); } } .recordSet .todaysRecord {margin-top:14px; padding-top:5px; height:47px; text-align:center; } .recordSet .todaysRecord .preTxt {height:32px; background:url(https://static.ncsoft.jp/images/daily/images/todaysRecordTxt.png) center no-repeat; background-size:190px 32px; text-indent:-9999px; overflow:hidden; } .recordSet .todaysRecord .txt {display:inline-block; width:60px; height:32px; overflow:hidden; text-indent:-9999px; background-size:60px 32px; vertical-align:text-bottom;} .recordSet .todaysRecord .txt.win {background-image:url(https://static.ncsoft.jp/images/daily/images/todaysRecordWin.png)} .recordSet .todaysRecord .txt.lose {background-image:url(https://static.ncsoft.jp/images/daily/images/todaysRecordLose.png)} .recordSet .todaysRecord .itemData {display:inline-block; height:32px; margin-right:5px; vertical-align:text-bottom; min-width:45px; } .recordSet .todaysRecord .itemData .num {display:inline-block; margin-left:-15px; height:21px; background:#BD5F0B; color:#000; line-height:21px; padding:0 6px; border-radius:21px; vertical-align:text-bottom; font-weight:bold; } .recordSet .todaysRecord .winItem img, .recordSet .todaysRecord .successiveWinItem img, .recordSet .todaysRecord .completeItem img {height:32px; vertical-align:text-bottom; } .recordList .date {display:inline-block; width:60px; text-align:center; } .recordList .winOrLose {display:inline-block; width:40px; margin:0 10px; text-align:center; } .recordList .itemData {display:inline-block; width:84px;} .recordList .itemData img {height:26px; vertical-align:text-bottom; } .recordList .record {height:40px; background:url(https://static.ncsoft.jp/images/daily/images/recordPanelListBg.jpg); background-size:375px 40px; line-height:40px; } .recordList .record:first-child {background-image:url(https://static.ncsoft.jp/images/daily/images/recordPanelListBgFirst.jpg)} #resultEven {position:absolute; top:30px; left:40px; width:240px; height:100px; background:#fff; color:#000; line-height:100px; font-size:200%; text-align:center; } #resultWin {position:absolute; top:30px; left:40px; width:240px; height:100px; background:#f00; color:#000; line-height:100px; font-size:200%; text-align:center; font-weight:bold; } #resultLose {position:absolute; top:30px; left:40px; width:240px; height:100px; background:#00f; color:#fff; line-height:100px; font-size:200%; text-align:center; font-weight:bold; } .resultDisp .myKen {position:absolute; top:10px; left:10px; width:50px; height:50px; background:#ccc; font-size:10px; } .resultDisp .enemyKen {position:absolute; top:10px; right:10px; width:50px; height:50px; background:#ccc; font-size:10px} #resultItem {position:absolute; top:0; left:0; width:100%; height:100%; background:url(https://static.ncsoft.jp/images/daily/images/winItemBg.jpg); background-size:375px 492px; color:#000; text-align:center; } #resultItem .itemImage {position:absolute; bottom:180px; width:100%; text-align:center; } #resultItem .itemImage img {max-height:100px;} #resultItem .btnArea {position:absolute; top:360px; text-align:center; width:100%;} #resultItem::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(https://static.ncsoft.jp/images/daily/images/paper.gif); background-size:375px 492px;} .txtWhite {color:#fff; text-shadow: 0 0 5px rgba(0,0,0,.8); } #ending {position:absolute; top:40px; left:40px; width:200px; padding:20px; height:100px; background:rgba(255,255,255,.9); text-align:center; } #additionalPlay {position:absolute; top:150px; left:70px; width:200px; padding:20px; background:rgba(255,255,255,.9); text-align:center; } #campaignDisp {position:absolute; top:20px; left:60px; width:200px; height:200px; text-align:center; border-radius:100px; box-shadow:5px 5px 5px rgba(0,0,0,.5); } #error {position:absolute; top:0; left:0; padding-top:20px; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:1000; } #errorInner {margin:0 auto; width:300px; padding:20px; background:#fff; border-radius:20px; text-align:center; } /* POPUP */ #popUpWaku {display:none; opacity:0; position:absolute; top:0; left:0; width:100%; min-height:100%; transition: opacity 0.2s ease-in-out 0s; -webkit-transition: opacity 0.2s ease-in-out 0s; } #popUpWaku.show {display:block; opacity:1; } #popUpBase {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:10; } #popUp {position:relative; max-width:960px; min-width:375px; margin:50px auto; ; z-index:10; color:#333; } #popUpNull1 {padding:30px; background:#fff;} #popUp .head {font-size:1.4rem; margin-bottom:.5em; font-weight:bold; text-align:center; } #popUp .close {cursor:pointer; } #popUp .close1 {position:absolute; top:10px; right:10px; font-size:2rem; line-height:1; color:#777; } #popUp ol, #popUp ul {margin-left:1.5em;} @media screen and (max-width: 480px) { #popUpNull1 {padding:20px 10px;} }