@charset "utf-8";

@font-face {
    font-family: 'NotoKr';
    font-style: normal;
    font-weight: 100;
    src: url('https://file.valofe.com/Valofe_file/web/fonts/notokr-light.eot');
    src: url('https://file.valofe.com/Valofe_file/web/fonts/notokr-light.eot?#iefix') format('embedded-opentype'),
    url('https://file.valofe.com/Valofe_file/web/fonts/notokr-light.woff2') format('woff2'),
    url('https://file.valofe.com/Valofe_file/web/fonts/notokr-light.woff') format('woff');
}

@font-face {
    font-family: 'NotoKr';
    font-style: normal;
    font-weight: 400;
    src: url('https://file.valofe.com/Valofe_file/web/fonts/notokr-regular.eot');
    src: url('https://file.valofe.com/Valofe_file/web/fonts/notokr-regular.eot?#iefix') format('embedded-opentype'),
    url('https://file.valofe.com/Valofe_file/web/fonts/notokr-regular.woff2') format('woff2'),
    url('https://file.valofe.com/Valofe_file/web/fonts/notokr-regular.woff') format('woff');
}

@font-face {
    font-family: 'NotoKr';
    font-style: normal;
    font-weight: 500;
    src: url('https://file.valofe.com/Valofe_file/web/fonts/notokr-medium.eot');
    src: url('https://file.valofe.com/Valofe_file/web/fonts/notokr-medium.eot?#iefix') format('embedded-opentype'),
    url('https://file.valofe.com/Valofe_file/web/fonts/notokr-medium.woff2') format('woff2'),
    url('https://file.valofe.com/Valofe_file/web/fonts/notokr-medium.woff') format('woff');
}

@font-face {
    font-family: 'NotoKr';
    font-style: normal;
    font-weight: 700;
    src: url('https://file.valofe.com/Valofe_file/web/fonts/notokr-bold.eot');
    src: url('https://file.valofe.com/Valofe_file/web/fonts/notokr-bold.eot?#iefix') format('embedded-opentype'),
    url('https://file.valofe.com/Valofe_file/web/fonts/notokr-bold.woff2') format('woff2'),
    url('https://file.valofe.com/Valofe_file/web/fonts/notokr-bold.woff') format('woff');
}

@font-face {
    font-family: 'NanumSquareRound';
    font-style: normal;
    font-weight: 700;
    src: url('https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundB.eot');
    src: url('https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundB.eot?#iefix') format('embedded-opentype'),
    url('https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundB.woff2') format('woff2'),
    url('https://file.valofe.com/Valofe_file/web/fonts/NanumSquareRound/NanumSquareRoundB.woff') format('woff');
}

/*  Reset CSS  */
* {
    margin:0;padding:0;box-sizing:border-box;
    font-family: "NotoKr", Sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html{scroll-behavior:smooth;}
body { font-size:16px; color:#555; min-width:1280px; margin:0; padding:0; overflow-x:hidden;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
input, button {line-height: normal;}
input,select,textarea,button {font-size: 100%; margin: 0; vertical-align: middle;cursor: pointer;}
input::placeholder {color:#984727;}

/* 스크롤 바 */
/* width */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(197,213,230,0.5);
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius:4px;
    background: rgb(212, 185, 82, 0.6);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(212, 185, 82, 0.6);
}


/* 공통 */
.hidden{visibility:hidden;position:absolute;}
.text-indent{text-indent:-9999px;}
.clearfix{clear:both;}
.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}

/****************** HEADER ******************/
/* lnb header */
#lnb{
    position: fixed; top: 0; left: 0; margin-top: 0; padding:7.8vh 0px;width: 260px; height:100%;  background:rgba(0,0,0,0.85);display: grid;grid-template-rows: 1fr;z-index: 999;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}

/* lnb-controll */
.btn-lnb-control{position: absolute; left: 259px; top: 100px; width: 45px; height:46px; display: inline-block; background-color:rgba(0,0,0,0.85);box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.btn-lnb-control .blit {display: inline-block;margin-top:13px;margin-left:9px; width:23px; height: 19px;  vertical-align:middle;transition: all .25s;}
.btn-lnb-control .blit{background:url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/common/btn-sidebar.png) center no-repeat; background-size: 100%;filter: contrast(0) brightness(2)}
.btn-lnb-control .bar{position:absolute; z-index:1; right:0; width: 3px; height: 46px; display: inline-block; background-color: #dcc153;}

.btn-lnb-control.is-closed .blit{transform: scaleX(-1);}
.btn-lnb-control:hover .blit {filter: none;}
.btn-lnb-control:hover .bar,
.btn-lnb-control.is-closed .bar{background-color: #dc9a53;}

/* 로고 + 홈 */
#lnb_home {display: block;margin:1rem auto;text-align: center;font-size: 14px;color: rgba(255,255,255,0.7);font-family: 'NanumSquareRound', sans-serif;}
#lnb_home i.fa {font-size: 18px;vertical-align: text-bottom;}
#lnb_home:hover, #lnb_home:hover i.fa{
    color:#fff;
    -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
    -moz-animation: neon3 1.5s ease-in-out infinite alternate;
    -ms-animation: neon3 1.5s ease-in-out infinite alternate;
    -o-animation: neon3 1.5s ease-in-out infinite alternate;
    animation: neon3 1.5s ease-in-out infinite alternate;
}
#logo a{display:block; text-align:center;padding: 0 36px;}
#logo img{width:90%}

/* nav menu */
#menu {margin-top:2vh;}
#menu li a {display:block;padding: 20px 30px;width:260px; overflow:hidden;text-align:left;opacity:0.8;letter-spacing:-1px;font-family: 'NanumSquareRound', sans-serif;color:rgba(255,255,255,1);font-size:18px;line-height: 1.4;}
#menu > li > a {border-top: 1px solid rgba(255,255,255,0.1);}
#menu > li.menu6 > a {border-bottom: 1px solid rgba(255,255,255,0.1);}
#menu li a:hover {transition:all 0.25s;opacity:1;}
#menu li.on a {opacity:1;}

/* sub lnb */
#menu li.depth2 {padding-bottom:18px;}
#menu li.depth2 > a {padding-bottom:10px;}
#menu li.depth2 li a {font-size:16px;padding-top:6px; padding-bottom:0px;}
#menu li ul li a .blit-lnb {transform: rotate(180deg);
    display: inline-block; margin-right: 8px;margin-top: -1px;width: 23px;height: 19px;vertical-align: middle;
    background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/common/btn-sidebar.png) center top no-repeat;background-size: contain;
}
#menu li a:hover,
#menu li.on a,
#menu .title:hover, #menu .title.on{
    -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
    -moz-animation: neon3 1.5s ease-in-out infinite alternate;
    -ms-animation: neon3 1.5s ease-in-out infinite alternate;
    -o-animation: neon3 1.5s ease-in-out infinite alternate;
    animation: neon3 1.5s ease-in-out infinite alternate;
    color:#fff1fc;
}

/*footer*/
#lnb_sns {
    padding-top: 18px;padding-bottom: 18px;text-align: center;border-top: 1px solid rgba(255,255,255,0.1);border-bottom: 1px solid rgba(255,255,255,0.1);
}
#lnb_sns li {display: inline-block;margin-left: 2rem;margin-right: 2rem;}
#lnb_sns li i {font-size: 25px;color: rgba(255,255,255,1);opacity: 0.8;transition: all 0.25s;}
#lnb_sns li i:hover,#lnb_sns li i.white:hover {opacity:1;
    -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
    -moz-animation: neon3 1.5s ease-in-out infinite alternate;
    -ms-animation: neon3 1.5s ease-in-out infinite alternate;
    -o-animation: neon3 1.5s ease-in-out infinite alternate;
    animation: neon3 1.5s ease-in-out infinite alternate;
}
#footer {padding-top: 18px;text-align: center;font-size: 12px;color: rgba(255,255,255,1);line-height:1.5;}

/* 오른쪽 sns */
#sns { position:fixed; top:7.8vh; right:60px; z-index:14;}
#sns li { float:left; margin-left:20px;}
#sns li i { font-size:25px; color: #ffffff;transition:all 0.25s;}
#sns li i:hover { color: #ffda5a; opacity: 0.98;}

.scroll {position: fixed;right:60px; top:130px; z-index:9999;
    -webkit-animation:bounce 1s 0s infinite alternate;
    -moz-animation:bounce 1s 0s infinite alternate;
    -ms-animation:bounce 1s 0s infinite alternate;
    -o-animation:bounce 1s 0s infinite alternate;
    animation:bounce 1s 0s infinite alternate;
}
.scroll img{width:100%;}

/*neon3*/
@keyframes neon3 {
    from {
        text-shadow: 0 0 0px #fff, 0 0 0px rgba(255, 221, 109, 0.66), 0 0 0px rgba(241, 202, 130, 0.66), 0 0 3px rgba(241, 202, 130, 0.66), 0 0 5px rgba(241, 202, 130, 0.66), 0 0 10px rgba(241, 202, 130, 0.66);
    }
    to {
        text-shadow:0 0 0px #fff, 0 0 0px rgba(241, 202, 130, 0.66), 0 0 0px rgba(241, 202, 130, 0.66), 0 0 0px rgba(241, 202, 130, 0.66), 0 0 0px rgba(241, 202, 130, 0.66), 0 0 1px rgba(241, 202, 130, 0.66);
    }
}

/*bounce*/
@keyframes bounce {
    from {
        transform: translateY(0px);
        opacity: 1;
    }
    to {
        transform: translateY(-15px);
        opacity: 1;
    }
}

/************************************************************/
/* ///////////////////////// 레이아웃 ///////////////////////// */
.wrapper, #wrap{position: relative; width: 100%; height: 100%; overflow:hidden;}
section { position:relative; overflow:hidden; margin:0; padding:0; width:100%;min-height: 100vh; background-size:cover; background-position:center; background-attachment:fixed;}
#main { background-image:url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/main/bg.jpg);}
#event01 { background-image:url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/sub01/sub1-2_bg.jpg);}
#event02-1,#event02-2, #event04 {background-image:url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/sub03/sub03_bg.jpg);}

/* 레이아웃  */
section .row-w {position:relative;width:100%;max-width: 1133px;margin: 0 auto;z-index: 1;}
.title-wrap {text-align:center; padding-top: 6vh;}
.title-wrap > img{width:68.2vh;display: block;margin: 0 auto;}
.title-wrap .tit-sub { width: 32.7vh;margin-top:1vh;}

.cont-wrap {position:relative; margin: 2% auto;width: 90.1vh;text-align:center;}
.cont-wrap .index-Low,
.check-wrap img {width:100%;}
.check-wrap img {margin-left: 70px;}
.check-wrap {width: 90.1vh;margin: 0 auto;}

#canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.5s ease;
}

/* 캐릭터 */
.chr {
    position: absolute;
}
.chr img {width: 100%;}

/* 배경 상단빛 효과 */
section::before {
    position: absolute;content: "";display: block;top: -9vw;left: 42%;height: 15vw;width: 15vw;-webkit-filter: blur(4vw);filter: blur(4vw);mix-blend-mode: plus-lighter;
    background-image: linear-gradient(45deg, #9a7d52, #d2bc85 53%, #000);
    -webkit-animation: sun 5s linear infinite;-moz-animation: sun 5s linear infinite;-o-animation: sun 5s linear infinite;animation: sun 5s linear infinite;
}
section#main::before,
section#event03::before{display: none;opacity: 0;}

@keyframes sun {
    0% {rotate: 0deg;box-shadow: 0 0 1.5em rgba(0,0,0,0.8), 0 0 1.5em rgba(0,0,0,0.8), 0 0 1.5em rgba(0,0,0,0.8), 0 0 1.5em rgba(0,0,0,0.8);}
    50% {box-shadow: 0 0 10em rgba(0,0,0,0.8), 0 0 10em rgba(0,0,0,0.8), 0 0 5em rgba(0,0,0,0.8), 0 0 10em rgba(0,0,0,0.8);}
    100% {rotate: 360deg;box-shadow: 0 0 1.5em rgba(0,0,0,0.8), 0 0 1.5em rgba(0,0,0,0.8), 0 0 1.5em rgba(0,0,0,0.8), 0 0 1.5em rgba(0,0,0,0.8);}
}

/**********************************************************/
/****************** SECTION - main *******************/
#mainTitle{
    position: absolute;
    max-width: 896px;
    top: 1075px;/*79%->39%*/
    /*top: 321px;*/
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -15%;
    z-index: 3;
    animation: titleMoveBefore .6s ease-out forwards, titleMove .8s ease-out .6s forwards;
}
@keyframes titleMoveBefore {
    from {
        top: 989px;
    }
    to {
        top: 672px;
    }
}
@media all and (max-width: 1920px) and (min-width: 1581px) {
@keyframes titleMove {
    from {
        top: 672px;
    }
    to {
        top: clamp(316px, calc(17.1vw + 45.65px), 374px)
    }
}
}
@media all and (max-width: 1580px) {
    @keyframes titleMove {
        from {
            top: 672px;
        }
        to {
            top: clamp(316px, calc(-39vw + 932.2px), 433px)
        }
    }
}
#mainTitle img {width: 100%;display: block;}
#mainTitle .card-glow-wrap {position: relative; max-width: 896px; width: 100%;overflow: hidden;}
.card-glow-wrap .glow{
    position: absolute;
    top: 2%;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(
            120deg,
            transparent 30%,
            rgba(255,255,255,0.25) 50%,
            transparent 70%
    );
    opacity: 0;
    animation: glowSweep 4.8s ease-out infinite;
    animation-delay: 3.5s;
    z-index: 3;
}

@keyframes glowSweep {
    0%, 55%, 100% {
        transform: translateX(-100%);
        opacity: 0;
    }
    10% {
        transform: translateX(-50%);
        opacity: 1;
    }
    38% {
        transform: translateX(100%);
        opacity: 1;
    }
    48% {
        transform: translateX(100%);
        opacity: 0;
    }
}
#mainTitle .star-wrap { position:absolute;left:13%; top:28%;width: 100%;height:100%;}
.star-wrap .star.small{max-width: 27px;}
.star-wrap .star.small.left{top:1%;left: 20%;}
.star-wrap .star.small.right{right: 25%;top: 20%;}
.star-wrap .star.large{max-width: 39px;}
.star-wrap .star.large.left{top:11%;left: 0.2%;}
.star-wrap .star.large.right{max-width: 30px;top:1%;right: 44%;}
.star-wrap .star{
    position: absolute;
    opacity: 0;
    animation: sparkle 2s ease-in-out infinite;
    animation-delay: 3.3s;
}
@keyframes sparkle {
    0%, 100% {
        opacity: 0.2;
        transform: scale(0.8);
    }
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
}
#mainTitle .desc-wrap { width: 100%;display: inline-block;overflow: hidden;}

.desc-wrap .desc {
    max-width: 752px;
    margin: 15px auto;
    display: block;
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    animation: clipReveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
    animation-delay: 1.3s;
}

@keyframes clipReveal {
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.envelope{
    position: absolute;
    max-width: 948px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.envelope.back{
    bottom: -200px;
    z-index: 2;
    animation: envelopeMoveBack .6s ease-out forwards;
}
.envelope.front{
    bottom: -583px;
    z-index: 4;
    animation: envelopeMoveFront .6s ease-out forwards;
}
.envelope img{width: 100%;}

@keyframes envelopeMoveFront {
    from {bottom: -583px;}
    to {bottom: -260px;}
}
@keyframes envelopeMoveBack {
    from {bottom: -200px;}
    to {bottom: 123px;}
}

#main .chr{position: absolute;}
#main .chr img{width: 100%;}
#chr-m1 {
    max-width:197px;
    top: 45px;
    right: 14%;
}
#chr-m2 {
    max-width:434px;
    bottom: clamp(-312px, calc(22.94vw - 674.47px), -234px);
    right: clamp(47px, calc(32.65vw - 468.87px), 158px);
    z-index: 4;
}
#chr-m3 {
    max-width:1056px;
    bottom: -250px;
    right: clamp(-537px, calc(46.47vw - 1271.23px), -450px);
}
#chr-m4 {
    max-width:582px;
    bottom: -134px;
    left: clamp(-47px, calc(22.94vw - 409.47px), 31px);
}
#chr-m5 {
    max-width:659px;
    bottom: -445px;
    left: clamp(-158px, calc(46.47vw - 892.23px), 0px);
}
/**********************************************************/
/* ////////////// EVENT1 기념메달 ////////////// */
#chr1-1 {
    max-width: 241px;
    left: -8%;
    top: 17%;
}
#chr1-2 {
    max-width: 508px;
    right: -27%;
    bottom: -31%
}
#event01 .check-wrap img {margin-left: 0;}

/* 출석체크 아이템 받기 */
.attendInputBox{
    position: absolute;
    right: 19%;
    top: 19%;
    display: inline-block;
    width: 24%;
    height: 5%;
    border-radius: 20px;
    background: #efeade;
    border: 2px solid #6c2303;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    font-family: 'NanumSquareRound', sans-serif;
    color: #984727;
    z-index: 13;
}
#event04 .attendInputBox{
    background: #fff0dd;
}
.medal-attend-list{
    position: absolute;
    left: 25.6%;
    top: 30.7%;
    width: 49.3%;
    height: 63.1%;
}
.medal-attend-list li{
    position: relative;
    float: left;
    width: 29.7%;
    height: 47.1%;
    margin-right: 5.1%;
}
.medal-attend-list li:nth-child(-n+3) {margin-bottom: 5.1%;}
.medal-attend-list li:nth-child(3) {margin-right: 0;}
.medal-attend-list li:nth-child(4) {margin-left: 17.6%;}
.medal-attend-list li:last-child {margin-right: 0;}

.medal-attend-list li a,
.attend-list li a,
.bonus-attend-list li a {
    display:inline-block;width:100%;height: 100%;text-indent:-9999px;
}
.medal-attend-list li.get-ok a:after,
.attend-list li.get-ok a:after,
.bonus-attend-list li.get-ok a:after{
    content:''; position:absolute; left:0; top:0; display:inline-block; width:100%; height:100%;
    background-image:url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/common/get-ok.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
}


/**********************************************************/
/* ////////////// EVENT 02 코인  ///////////// */
.btn-go-to-shop {position: absolute; bottom:8%; left:50%; transform: translateX(-50%);max-width: 278px}
.btn-go-to-shop img{width: 100%}

#event02-1 .check-wrap img {max-width: 580px}
#event02-2 .check-wrap img {max-width: 650px}

#chr2-1 {
    max-width: 570px;
    left: -30%;
    bottom: -24%;
}
#chr2-2 {
    max-width: 522px;
    right: -27%;
    bottom: -7%;
}

#chr2-3 {
    max-width: 671px;
    left: -32%;
    bottom: 2%;
}
#chr2-4 {
    max-width: 88%;
    right: -39%;
    bottom: -33%;
}

/***************************************/
/*************** EVENT 03 ***************/
/***************************************/
#event03 .rwd-media-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
}
#event03 .rwd-media {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#event03 .cover-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    z-index: 0;
    background: rgba(0, 0, 0, 0.65) url("https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/sub04/cover-video.png");
}
#event03 .hero-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#event03 .chr-hero {
    position: absolute; /*left: 20%;*/
    max-width: 827px;
    top: 50%;
    transform: translatey(-50%);
    left: 5%;
}
#event03 .tit-hero {
    position: absolute;
    top: 10%;
    left: 57%;
    max-height: 231px;
}
#event03 .tit-hero img {
    height: 100%;
    vertical-align: bottom;
}
#event03 .tit-hero p {
    font-family: "Nanum Myeongjo", "나눔명조", sans-serif;
    color: #82aec3;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
    font-weight: bold;
    line-height: 1.8;
    margin-bottom: 3%;
}
#event03 .tit-hero span {
    font-family: "Nanum Myeongjo", "나눔명조", sans-serif;
    color: #4d8ce1;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
    font-weight: bold;
}
#event03 .btn-yt {
    display: inline-block;
    height: 100%;
}
#event03 .btn-yt img {
    height: 100%;
    max-height: 204px;
}
#event03 .btn-yt img:hover {
    filter: brightness(1.2);
}
#event03 .item-list {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(20%, -29%);
    width: 41vw;
    height: 26.5vw;
    min-width: 400px;
    min-height: 259px;
}
#event03 .item-list .character-item:nth-child(1) {
    float: left;
    width: 62%;
    height: 46%;
    margin-left: -20.4%;
    margin-top: 17%;
    transform: rotate(45deg);
}
#event03 .item-list .character-item:nth-child(2) {
    position: absolute;
    width: 62%;
    height: 46%;
    margin-left: 24.1%;
    margin-top: 17.5%;
    transform: rotate(45deg);
}
#event03 .item-list .character-item li {
    float: left;
    width: 49%;
    height: 100%;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
#event03 .item-list .character-item:nth-child(1) li:nth-child(1) {
    background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/sub04/skill_01.png) center no-repeat;
    background-size: 100% 100%;
    margin-right: 2%;
}
#event03 .item-list .character-item:nth-child(1) li:nth-child(2) {
    background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/sub04/skill_02.png) center no-repeat;
    background-size: 100% 100%;
}
#event03 .item-list .character-item:nth-child(2) li:nth-child(1) {
    background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/sub04/skill_03.png) center no-repeat;
    background-size: 100% 100%;
    margin-right: 1.8%;
}
#event03 .item-list .character-item:nth-child(2) li:nth-child(2) {
    background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/sub04/skill_04.png) center no-repeat;
    background-size: 100% 100%;
}

#event03 .item-list .character-item:nth-child(1) li:nth-child(1):hover {
    filter: brightness(1.18) contrast(1.1) sepia(0.1);
}
#event03 .item-list .character-item:nth-child(1) li:nth-child(2):hover {
   filter: brightness(1.18) contrast(1.02) sepia(0.05);
}
#event03 .item-list .character-item:nth-child(2) li:nth-child(1):hover {
   filter: brightness(1.18) contrast(1.02) sepia(0.05);
}
#event03 .item-list .character-item:nth-child(2) li:nth-child(2):hover {
   filter: brightness(1.18) contrast(1.02) sepia(0.05);
}

/**********************************************************/
/* ////////////// EVENT04 ////////////// */
#chr4-1 {
    max-width: 533px;
    right: -26%;
    bottom: -1.8%;
    z-index: 1;
}

#event04 .check-wrap img { max-width: 644px;}

/* 출석체크 아이템 받기 */
#event04 .attendInputBox{right: 25%;}
#event04 .medal-attend-list{
    left: 25.4%;
    top: 29.6%;
    width: 49.4%;
}
#event04 .medal-attend-list li{
    width: 29.7%;
    height: 47.1%;
    margin-right: 5.2%;
}
#event04 .medal-attend-list li:first-child {margin-left: 0%}
#event04 .medal-attend-list li:nth-child(-n+4) {margin-bottom: 0%;}

#event04 .medal-attend-list li:nth-child(3n) {margin-right: 0%;}
#event04 .medal-attend-list li:nth-child(4) {margin-left: 0;}
#event04 .medal-attend-list li:nth-child(-n+3) {margin-bottom: 5.1%;}

/**********************************************************/
/* ////////////////////// layerPop ////////////////////// */
.shadow{display:none;opacity:1;width:100%; height:100%; position:fixed; padding-bottom:0;top:0; left:0; z-index:-1; background-size:cover;background:rgba(0,0,0,0.80);}
.layer-wrap{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    text-align: center;
}
.layer-wrap:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -.25em;
}

.layerPop {
    z-index: 9999;
    position:relative;;
    display: inline-block;
    vertical-align: middle;
    width: 450px;
    background: #fff;
    border-radius: 30px;
    border: 5px solid #67421b;
}

.layerPop h3 {
    position: relative;
    display: block;
    padding-top: 20px;
    padding-left: 25px;
    width: calc(100% - 25px) ;
    height: 0;
    color: #333333;
    font-size: 18px;
    font-weight: bold !important;
    text-align: left;
}

.layerPop .cont p {
    position: absolute;
    top: 20px;
    right: 10px;
    color: #3f3f3f;
    font-weight: bold;
}
.layerPop .cont p span {
    color: #000;
    font-weight: normal;
}

.layerPop .cont {
    position: relative;
    padding: 70px 20px 40px;
}

.layerPop .message {
    text-align:center;
    color: #3f3f3f;
    font-weight:normal;
    font-family: 'NanumSquareRound', sans-serif;
    font-size:20px;
    line-height:1.3;
    word-break: keep-all;
}
.layerPop .message .db-text{
    text-align:center;
    font-weight:bold;
    font-size:18px;
}
.layerPop .message .db-step{
    text-align:center;
    font-weight:bold;
    font-size:18px;
}
.layerPop .btn-x {
    text-indent: -9999px;
    position: absolute;
    top: 15px;
    right: 15px;
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/common/btn-close.png) no-repeat left top;
    z-index:2;
}
.layerPop .wrap-btn{margin-bottom:40px;width:100%;text-align: center;}
.layerPop .wrap-btn button:nth-child(2){margin-left:7px;}
.layerPop#message .wrap-btn{width:100%;text-align:center;margin-top:30px;margin-bottom:30px;}
.layerPop .btnLayerCancel,
.layerPop .btnLayerConfirm{
    width: 158px;
    height: 66px;
    background:url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/common/btn-confirm.png)no-repeat center / cover;
    outline:none;
    border:none;
    color:#fff;
    font-family: 'NanumSquareRound', sans-serif;
    font-size:20px;
}
.layerPop#message .cont{height:auto;}
.layerPop h3.blue{color:#74a1d0;}

/*youtube popup*/
.layer-wrap.yt .layer-pop {
    width: 90%;
    max-width: 900px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}
.layer-wrap.yt .pop-container {
    padding: 0;
}
.layer-wrap.yt .pop-container .skip {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
}
.layer-wrap.yt .pop-container .frame {
    position: relative;
    width: 100%;
    margin: 0;
    z-index: 100;
    overflow: visible;
    border: 2px solid #ff9a2f;
}
.layer-wrap.yt .pop-container .frame h1 {
    top: -49px;
    right: 0;
    left: 14px;
    background: none;
}
.layer-wrap.yt .pop-container .frame iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
}
.layer-wrap.yt .pop-container .btn-layer-close {
    position: absolute;
    top: -44px;
    right: 12px;
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url("https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260225_17th/images/sub04/yt-close-btn.png") 0 0 no-repeat;
    background-size: contain;
    filter: brightness(1.5);
    text-indent: -9999px;
}


/* ***********미디어쿼리************** */
@media screen and (min-width : 2560px){
    .cont-wrap,.check-wrap {width: 88%;}

}

@media screen and (max-width: 1600px) {
    .floating-banner-attend { right:2%; }
}
@media screen and (max-width: 1580px) {
    .envelope {width: 60%;}
    #mainTitle {width: 55%;}

    #chr-m2{max-width: 408px;
        bottom:  clamp(-327px, calc(5vw - 391px), -312px);
        right: clamp(-35px, calc(27.33vw - 384.87px), 47px);}
    #chr-m3{bottom: -274px;}
    #chr-m5{left:  clamp(-187px, calc(9.67vw - 310.78px), -158px)}

    #chr1-1 { left: clamp(-90px, calc(-7.333vw + 25.867px), -68px); }
    #chr1-2 { right: clamp(-305px, calc(-37.667vw + 290.133px), -192px); }
    #chr2-1 { left: clamp(-340px, calc(-19vw - 39.8px), -283px); }
    #chr2-2 { right: clamp(-249px, calc(-45.333vw + 467.267px), -113px); }
    #chr2-3 { left: clamp(-362.5px, calc(-11.333vw - 183.433px), -328.5px); }
    #chr2-4 { right: clamp(-441.8px, calc(-33.933vw + 94.347px), -340px); }
    #chr4-1 { right: clamp(-294.5px, calc(-26.5vw + 124.2px), -215px); }
}
@media screen and (max-width: 1440px) {

    .cont-wrap,.check-wrap {width: 85vh;}
    #event01-2 .check-wrap img {width: 80%;}

    .attendInputBox,
    .my-attend-cnt,
    .my-attend-cnt::placeholder,
    .my-attend-cnt ~ span {font-size: 12px;}
}

@media screen and (max-height : 900px){
    nav {width: 260px;height:100%;overflow: hidden;overflow-y: scroll;}
}