body { height: 5470px; 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: 75px; 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: 99px;
      top: -918px;
      width: 2034px;
      height: 1241px;
      opacity: 0;
      filter: drop-shadow(1px 13px 8px black);
      animation: ch5 3s 1s ease forwards;
      background: url(../img/Danev.webp) no-repeat;
      background-size: cover;
      background-position: -202px -1px;
  }

    /*메인 이미지 사이즈*/
    #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: 853px; height: 544px;}

    /*mob 이미지 사이즈*/
    #mobmain{width: 640px; height: 1167px;}
    #moblogo{width: 220px;height: 79px;}

    video#bgvid {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      min-width: 100%; min-height: 100%;
      width: auto; height: auto;
      z-index: -100;
      background-size: cover;
      transition: opacity 0.5s ease; /* 투명도 전환 효과 */
  }

    /*contain animation */
    @keyframes fadein { from {opacity: 0;}to {opacity: 1;} }
    @-webkit-keyframes fadein { /* Safari and Chrome */from {opacity: 0;}to {opacity: 1;}}
    @keyframes ch5 { 0%{transform:translateX(-40px);opacity:0;}100%{transform:translateX(0px);opacity:1;} }
    
    /* modal animation */
    @keyframes opacity { 0% { opacity: 0; }100% { opacity: 1; } }
    @keyframes scale { 0% { opacity: 0; transform: scale(0); }100% { opacity: 1; transform: scale(1); } }
        


    .title{
        z-index: 1000;
        margin-left: -477px;
        margin-top: -4585px;
        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 */
    .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;}
    
    /* imglist */
    .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: -70px; 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; z-index: -50; width: 100%; margin-top: 50px; animation: fadein 5s; object-fit:cover; height: 400px;}
	.display-none {display: none !important;}
	
    /*modal*/
    :root {
        --bg: #222;
        --clr: #fff;
    }
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }


    /*modal element*/
    .modal{
        width: 70px;
        height: 70px;
        position: absolute;
        border-radius: 3px;
        opacity: 0;
        z-index: 1;
    }

    /*equipment modal*/
    #medal_id:hover, #weapon_id:hover, #artifact_id:hover {
        margin-left: 2px; width: 600px; height: 429px;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);
    }
    /*equpment img*/
    #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 img,.weapon img,.artifact img {margin-top: 6px;} */
    .medal, .weapon, .artifact {margin-top: -1px;}
    .medal {z-index: 30;}
    .weapon {z-index: 29;}
    .artifact {z-index: 28;}

    /*petbox*/
    #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);
    }

    #baby_leviathan_id:hover{
      margin-top: -10px; width: 553px; height: 406px; opacity: 1; transition: 0.3s ease;
      transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
  }

    #talos_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);
    }

    /*pet modal img*/
    #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_leviathan_id:hover {background-image: url(../img/Baby_leviathan.webp);}
    #talos_id:hover {background-image: url(../img/Talos_Ring.webp);}

    
    /*basic pet*/
    .behemoth {position: relative; z-index: 30;}    
    .baby_leviathan {position: relative; z-index: 30;}    
    /*reward 100-300*/
    .baron, .talongo,.bub, .foxy, .bible, .lioyd {position: relative;}
    .baron {z-index: 30;}
    .talongo {z-index: 29;}
    .bub {z-index: 28;}
    .foxy {z-index: 27;}
    .bible {z-index: 26;}
    .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;}
        .mobbg {display: none;}
        .PC {
            position: absolute;
            justify-content: center;
            display: flex;
            #basic,#reward100,#reward200,#reward300 { width: 1083px;}
            z-index: 999;
            margin-top: -3810px;
        }
    }



    /* 아이템 목록 관련 스타일 */
    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"] { position: absolute; display: flex; justify-content: center; margin-left: -38px; }
    /* 천장 리워드 */
    #ul13{margin-top: 166px;}
    #ul14{margin-top: 375px;}
    #ul15{margin-top: 584px;}
    /* 확정 리워드 */
    #ul {  margin-top: 89px; margin-left: -40px;}
    #ul2 { margin-top: 294px;}
    /* 100 리워드 */
    #ul3 { margin-top: 32px;}
    #ul4 { margin-top: 198px;}
    /* 200 리워드 */
    #ul5 { margin-top: 40px;}
    #ul6 { margin-top: 207px;}
    /* 300 리워드 */
    #ul7 { margin-top: 40px;}
    #ul8 { margin-top: 209px;}
    /* 베이직 리워드 */
    #ul9 { margin-top: 42px;}
    #ul10 { margin-top: 202px;}
    #ul11 { margin-top: 365px;}
    #ul12 { margin-top: 519px;}

    li{ list-style: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}
    #li3 {  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, .item42, .item43) { object-fit: none; width: 74px; height: 74px;}
    .item49, .item50, .item51, .item52 { object-fit: none; width: 63px; height: 65px;}
    .item43, .item42 { 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: -526px -226px;}/*탈로스의 반지*/
    .item43 { object-position: -601px -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;} /* 빙한팔찌 상자 */



    @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; /* Default animation duration */
    }

    .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;
        width: 69px;
        height: 68px;
        border-image: conic-gradient(from var(--angle),
        rgba(0, 53, 46, 0.1),
        #03614d 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 load 기본 상태 */
    .lazy {
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    /* Lazy load 완료 상태 */
    .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 }