body { height: 5684px; background-color: #000000; display: flex; text-align: center; justify-content: center; flex-direction: column; overflow-x: hidden; align-items: center;  -webkit-user-select:none; -moz-user-select:none;-ms-user-select:none;user-select:none;margin:0;}
header { position: fixed; right: 50px; top: 60px; z-index: 9999;}
.logo { position: absolute; top: 32px; left: 50px;z-index: 99999;}
.oneday {clear: both; text-align: right;}
.play { padding-top: 12px;}
.home { padding-top: 12px;margin-right: 20px;}
a.home {font-size: 0;}
a.home img {font-size: 16px;}
.cha1 {position: absolute; margin-top: 51px; margin-left: 580px; top: -933px; width: 2034px; height: 1241px; opacity: 0; filter: drop-shadow(16px -2px 0px #000000); animation: ch5 3s 1s ease forwards;}
#playgame{width: 133px; height: 39px; object-fit: cover;}
#homebtn{width: 54px; height: 48px;}
#oneday{width: 189px; height: 26px;}
#PClogo{width: 331px; height: 125px;}
#chaimg{width: 2281px; height: 1302px;}
#title{width: 874px; height: 544px;}
#mobmain{width: 640px; height: 1167px;}
#moblogo{width: 220px;height: 79px;}
@keyframes fadein { from {opacity: 0;}to {opacity: 1;} }
@-webkit-keyframes fadein { from {opacity: 0;}to {opacity: 1;}}
@keyframes ch5 { 0%{transform:translateX(-40px);opacity:0;}100%{transform:translateX(0px);opacity:1;} }
@keyframes opacity { 0% { opacity: 0; }100% { opacity: 1; } }
@keyframes scale { 0% { opacity: 0; transform: scale(0); }100% { opacity: 1; transform: scale(1); } }
#title,#chaimg {position: relative;}
.title{
  z-index: 1000;
  margin-left: -453px;
  margin-top: -4729px;
  display: flex;
  position: absolute;
  justify-content: center;
  align-content: center;
  align-items: center;
  opacity: 0;
  animation: ch5 3s 1s ease forwards;
}
.maincon{
  display: flex;
  width: 1900px;
  height: 1080px;
  max-height: 1080px;
  min-width: 1900px;
  max-width: 1080px;
  justify-content: center;
  align-content: center;
}
.maincontain{
  display: flex;
  width: 100%;
  max-height: 1080px;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.scroll { opacity: 0; transition: 0.8s; }
.scrollRight { transform: translate(-20vw, 0); }
.scrollLeft { transform: translate(20vw, 0); }
.scrollUp { transform: translate(0, 10vw); }
.scrollDown { transform: translate(0, -10vw); }
.scrollAction { opacity: 1; transform: translate(0); }
#body .scroll {border-radius: 50%; }
.wrap { width: 100%; margin: 0 auto; position: absolute; display: flex; justify-content: center;}
.howto, .limit, .reward, .basic, .reward100, .reward200, .reward300, .import, .cover { display: flex; justify-content: center;}
.howto {margin-top: 118px;}
.limit {margin-top: 70px; position:relative; z-index: 8;}
.reward {margin-top: 52px; position:relative; z-index: 7;}
.basic {margin-top: 65px; position:relative; z-index: 6;}
.reward100 {margin-top: 72px; position: relative;z-index: 5;}
.reward200 {margin-top: 72px; position: relative; z-index: 4;}
.reward300 {margin-top: 50px;}
.import {margin-top: 70px; position: relative;z-index: -1;}
.cover { position: absolute;margin-top: 53px;z-index: -1;}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.modal{
  width: 70px;
  height: 70px;
  position: absolute;
  border-radius: 3px;
  opacity: 0;
  z-index: 1;
}
#medal_id:hover ,#artifact_id:hover{
  width: 600px; height: 429px;
}
#weapon_id:hover {
  width: 600px; height: 429px;
}
#medal_id:hover, #weapon_id:hover, #artifact_id:hover {
  margin-left: 2px; opacity: 1; transition: 0.3s ease;
  box-shadow: 0 50px 80px rgba(0, 0, 0, 0.15), 0 15px 100px rgba(0, 0, 0, 0.15), 0 5px 100px rgba(0, 0, 0, 0.1);
  transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
}
#medal_id:hover {background-image: url(../img/medal.webp);}
#weapon_id:hover {background-image: url(../img/weapon.webp);}
#artifact_id:hover {background-image: url(../img/artifact.webp);}
.medal, .weapon, .artifact {margin-top: -1px;}
.medal {z-index: 30;}
.weapon {z-index: 29;}
.artifact {z-index: 28;}
.Forgivethem {z-index:20}
.ring {z-index:19}

.day30medal {z-index: 21;}
#baron_id:hover,#talongo_id:hover,#bub_id:hover,#foxy_id:hover,#bible_id:hover,#lioyd_id:hover{
  margin-top: -10px; width: 587px; height: 378px; opacity: 1; transition: 0.3s ease;
  transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
}
#talosring_id:hover{
  margin-top: 2px; width: 300px; height: 429px; opacity: 1; transition: 0.3s ease;
  transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
}
#RKW_medal_id:hover{
  margin-top: 2px; width: 300px; height: 350px; opacity: 1; transition: 0.3s ease;
  transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
}
#LMPMS_medal_id:hover{
  margin-top: 2px; width: 300px; height: 350px; opacity: 1; transition: 0.3s ease;
  transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
}
#victor_id:hover{
  margin-top: -10px; width: 611px; height: 338px; opacity: 1; transition: 0.3s ease;
  transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
}
#baron_id:hover {background-image: url(../img/Baron.webp);}
#talongo_id:hover {background-image: url(../img/Talongo.webp);}
#bub_id:hover {background-image: url(../img/Bub.webp);}
#foxy_id:hover {background-image: url(../img/fox.webp);}
#bible_id:hover {background-image: url(../img/Bible.webp);}
#lioyd_id:hover {background-image: url(../img/Lioyd.webp);}
#baby_behemoth_id:hover {background-image: url(../img/behemothpet.webp);}
#victor_id:hover {background-image: url(../img/victor.webp);}
#talosring_id:hover {background-image: url(../img/Talos_Ring.webp);}
#RKW_medal_id:hover {background-image: url(../img/RKW_medal.webp);}
#LMPMS_medal_id:hover {background-image: url(../img/LMPMS_medal.webp);}
.baron, .talongo,.bub, .foxy, .bible, .lioyd, .victor {position: relative;}
.baron {z-index: 30;}
.talongo {z-index: 29;}
.bub {z-index: 28;}
.foxy {z-index: 27;}
.bible {z-index: 26;}
.victor {z-index: 29;}
.lioyd {z-index: 25;}
@media screen and (max-width: 772px) {
  body,html {width: 100vw;height: 100vh;margin:0}
  body {display: flex; text-align: center; justify-content: center; flex-direction: column; overflow-x: hidden; align-items: center;}
  .home {float: right; margin-top: 20px; margin-right: 0;}
  .mobile img {width: 100%;}
  .mobile {display: block;}
  #wrap {display: none;}
  header {right: 10px; top: -10px;}
  .moblogo{position: absolute; left: 20px; top: 35px;}
  .mob {display: flex; width: 100%; height: 100%; align-items: center; text-align: center; justify-content: flex-start;}
  .mobimg {margin-top: 500px;}
  .play {display: none;}
  .maincon {display: none; image:none;}
  .logo {display: none;}
  .PC {display: none;}
  .sidebtn {display: none;}
}
@media screen and (min-width: 772px) {
  .mob {display: none;}
  .mobimg {display: none;}
  .PC {
      position: absolute;
      justify-content: center;
      display: flex;#basic,#reward100,#reward200,#reward300 { width: 1083px;}
      z-index: 999;
      margin-top: -4040px;
  }
}
p { color: white; font-size: 12px; display: flex; height: 72px; align-items: center; justify-content: center;}
p2 { color: white; font-size: 12px; display: flex; height: 70px; margin-top: 9px; align-items: center; justify-content: center;}
#limit{width: 1032px; height: 793;}
#reward{width: 732px; height: 590px;}
#basic,#reward100,#reward200,#reward300 { width: 1083px;}
#basic{height: 800px;}
#reward100{height: 330px;}
#reward200{height: 379px;}
#reward300{height: 366px;}
#important{width: 1552px; height: 623px;}
.liline1 { margin-top: 39px; }
.liline4 { margin-top: 25px; }
[id^="ul"]:not(#ul13, #ul14, #ul15) { position: absolute; display: flex; justify-content: center; margin-left: -44px; }
#ul13{
  position: absolute;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 100%; 
  margin-top: 166px;
  margin-left: -42px;
}

#ul14{
  position: absolute;
  display: flex;
  justify-content: center;
  margin-top: 375px;
  margin-left: -41px;
}

#ul15{
  position: absolute;
  display: flex;
  justify-content: center;
  margin-top: 584px;
  margin-left: -48px;
}
#ul {  margin-top: 89px; margin-left: -40px;}
#ul2 { margin-top: 294px;}
#ul3 { margin-top: 32px;}
#ul4 { margin-top: 198px;}
#ul5 { margin-top: 40px;}
#ul6 { margin-top: 207px;}
#ul7 { margin-top: 40px;}
#ul8 { margin-top: 209px;}
#ul9 { margin-top: 42px;}
#ul10 { margin-top: 202px;}
#ul11 { margin-top: 365px;}
#ul12 { margin-top: 532px;}
#ul12-2 {margin-top: 688px;}
li{ list-style: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}
#li3 {  float: right; width: 120px; margin: 44px -3px;; list-style: none; display: flex; justify-content: flex-start; align-items: center; flex-direction: column;}
#li4 {  float: right; width: 120px; margin: 45px 13px; list-style: none; display: flex; justify-content: flex-start; align-items: center; flex-direction: column;}
#li2 { float: right; width: 110px; margin-top: 33px; display: flex; flex-direction: column; align-items: center;}
[class^="item"]:not(.item, .item49, .item50, .item51, .item52, .item43) { object-fit: none; width: 74px; height: 74px;}
.item49, .item50, .item51, .item52 { object-fit: none; width: 63px; height: 65px;}
.item43 { object-fit: none; width: 66px;height: 68px; margin-left: -4px;}
.item1 { object-position: -901px -151px; } /* 파이오니어 토큰 */
.item2 { object-position: -76px -76px; } /* 루민상자 */
.item3 { object-position: -826px -151px; } /* 방어구 소환석 */
.item4 { object-position: -76px -151px;} /* 골드 패키지 */
.item5 { object-position: -151px -1px;} /* 산데블랑 */
.item7 { object-position: -676px -1px;} /* 성장석 */
.item8 { object-position: -826px -1px;} /* 소켓 안정제 */
.item9 { object-position: -751px -151px;} /* 트레져 북 */
.item11 { object-position: -1px -151px;} /* 로얄 상자 */
.item12 { object-position: -151px -151px;} /* 스페셜 상자 */
.item13 { object-position: -1px -1px;} /* 캐릭터 티켓 */
.item16 { object-position: -976px -76px;} /* 명신관 상자*/
.item17 { object-position: -226px -226px;} /* 빛바랜 발레론의 축복 37*/
.item18 { object-position: -301px -1px;} /* 천케컬상*/
.item19 { object-position: -376px -1px;} /* 카린인챈트 35*/
.item20 { object-position: -451px -1px;} /* 카린인챈트36*/
.item21 { object-position: -526px -1px;} /* 카린인챈트37*/
.item22 { object-position: -601px -1px;} /* 카린인챈트38*/
.item23 { object-position: -76px -1px;} /* 발레론 방지제*/
.item24 { object-position: -226px -1px;} /* 스타라타 데빌 방지제*/
.item25 { object-position: -901px -1px;} /* 인챈트 안정제*/
.item26 { object-position: -976px -1px;} /* 디바인 악세서리 레시피*/
.item27 { object-position: -1px -76px;} /* 인핸스 앰플 패키지(황금 상자)*/
.item28 { object-position: -151px -76px;} /* 강화 인챈트 안정제*/
.item29 { object-position: -226px -76px;} /* 프랜스펄 라커*/
.item30 { object-position: -301px -76px;} /* 스탠스링*/
.item32 { object-position: -451px -151px;} /* -커스텀 윙-100(황금 티켓)*/
.item33 { object-position: -376px -76px;} /* 프랜스펄 포션*/
.item34 { object-position: -601px -76px;} /* 배럭 슬롯 증가권*/
.item35 { object-position: -451px -76px;} /* 빛나는 열쇠*/
.item36 { object-position: -526px -76px;} /* 소크*/
.item37 { object-position: -751px -76px;} /* 최상급 쥬민*/
.item38 { object-position: -676px -76px;} /* 월장석*/
.item39 { object-position: -676px -151px;} /* 린든 상자*/

.item40 { object-position: -376px -226px;}/* 인챈트칩 마스터*/
.item41 { object-position: -451px -226px;}/* 발레론 무기 소환석*/
.item42 { object-position: -976px -226px;}/*보이는게 다가 아니야 훈장*/
.item43 { object-position: -604px -226px;}/*탈로스 반지*/

.item46 { object-position: -901px -76px;} /* 5대 원소 무기*/
.item47 { object-position: -151px -226px;} /* 빛바랜 발레론의 축복 38*/
.item48 { object-position: -374px -187px;} /* 아티펙트*/
.item49 { object-position: -311px -153px;} /* 린든 메달*/
.item50 { object-position: -384px -151px;} /* 린든 코스튬*/
.item51 { object-position: -233px -151px;} /* 린든 아티펙트*/
.item52 { object-position: -832px -78px;} /* 펙 박스 라인 없음 */
.item54 { object-position: -601px -151px;} /* 레드 티켓 라인*/
.item56 { object-position: -751px -1px;} /* 마법 인첸트 안정제 */
.item57 { object-position: -301px -226px;} /* 팔찌 상자 */
.item58 { object-position: -676px -226px;} /* 스탠스 북 */

.item59 { object-position: -901px -226px;} /* 소실방지제 마갑주 5 */
.item60 { object-position: -526px -226px;} /* 소실방지제 마갑주 6 */
.item61 { object-position: -751px -226px;} /* 소실방지제 마갑주 7 */
.item62 { object-position: -826px -226px;} /* 소실방지제 발레론 8 */

.item63 { object-position: -1px -301px;} /* 라비엘 무기상자 */
.item64 { object-position: -76px -301px;} /* 이벨라 무기상자 */
.item65 {object-position: -226px -301px;} /*컬렉션 카드*/
.item66 {object-position: -151px -301px;} /*내 실력을 30일 훈장*/

@property --angle {
    syntax: '<angle>';
    initial-value: 90deg;
    inherits: true;
}
@property --gradX {
  syntax: '<percentage>';
  initial-value: 50%;
  inherits: true;
}
@property --gradY {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: true;
}
.wrapper {
  min-width: min(40rem, 100%);
}
:root {
  --angle: 0deg;
  --gradX: 50%;
  --gradY: 50%;
  --c1: rgba(255, 200, 100, 0.5);
  --c2: rgba(168, 239, 255, 0.1);
  --d: 2s; 
}
.box {
  border: 0.2rem solid;
  width: 69px;
  height: 68px;
  border-image: conic-gradient(
    from var(--angle),
    rgba(255, 248, 168, 0.1),
    rgba(255, 222, 168, 1) 0.1turn,
    rgba(255, 210, 126, 1) 0.15turn,
    var(--c2) 0.25turn) 10;
  cursor: pointer;
  animation: borderRotate var(--d) ease-in-out infinite forwards;
}
.box2 {
  border: 0.2rem solid;
  width: 69px;
  height: 68px;
  border-image: conic-gradient(from var(--angle),
  rgba(255, 248, 168, 0.1),
  #2196F3 0.1turn,
  #00BCD4 0.15turn, var(--c2) 0.25turn) 10;
  cursor: pointer;
  animation: borderRotate var(--d) ease-in-out infinite forwards;
}
.box3 {
  border: 0.2rem solid;
  margin-top: -3px;
  width: 74px;
  height: 74px;
  border-image: conic-gradient(from var(--angle),
  rgba(255, 248, 168, 0.1),
  #2196F3 0.1turn,
  #00BCD4 0.15turn, var(--c2) 0.25turn) 10;
  cursor: pointer;
  animation: borderRotate var(--d)ease-in-out infinite forwards;
}
@keyframes borderRotate {
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 360deg;
  }
}
.lazy {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.lazy.loaded {
  opacity: 1;
}
html {
  scroll-behavior: auto;
}
h1 {position: absolute; z-index: -999;}
.sidebtn{position:fixed;top:50%;margin-top: -100px;left:0;width:170px;height:213px;background-color:rgba(0,0,0,0.6);text-align:right;z-index:1001;padding-top:20px;}
.menu_line{position: absolute; right: 131px; top: 22px; width: 1px; height: 186px; background-color: #ffffff; z-index: 21;}
.sidebtn ul16{position:relative;z-index:22;}
.sidebtn li{margin: 25px 0;}
.sidebtn li a{width:172px;height:16px;background-image:url("../img/menuimg.webp");}
.sidebtn li .active a{color:#ff7700;}
.sidebtn li:nth-child(1) a{background-position:0 -44px }
.sidebtn li:nth-child(2) a{background-position:0 -89px }
.sidebtn li:nth-child(3) a{background-position:0 -134px }
.sidebtn li:nth-child(4) a{background-position:0 -180px }
.sidebtn li.active:nth-child(1) a{background-position:-172px -44px }
.sidebtn li.active:nth-child(2) a{background-position:-172px -89px }
.sidebtn li.active:nth-child(3) a{background-position:-172px -134px }
.sidebtn li.active:nth-child(4) a{background-position:-172px -180px }