@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","FontAwesome", 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;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
input[type='text'] {
    border-block-style: none;
    background: transparent;
    border: none;
    outline: none;
    padding-left: 5px;
}

/* 스크롤 바 */
/* 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(239, 208, 72);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(239, 208, 72);
}

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


/************************************************************/
/* ///////////////////////// sns ///////////////////////// */
#sns { position:fixed; top:46px; right:46px; z-index:14;}
#sns li { float:left; margin-left:20px;}
#sns li i { font-size:25px; color: #8e2b00;transition:all 0.25s;}
#sns li i:hover { transform:scale(1.2);}


/************************************************************/
/* ///////////////////////// 마우스 ///////////////////////// */
.mouse{position:fixed;top:100px;right:46px;z-index: 20;}
.aniBounce {animation: fadeIn 10s 2s 1 both, bounce 1s 2.6s infinite alternate ;-webkit-animation:fadeIn 10s 2s 1 both, bounce 1s 2.6s infinite alternate; opacity: 0;}

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

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/************************************************************/
/* ///////////////////////// lnb ///////////////////////// */
/*로고*/
#lnb{ box-sizing:border-box; position: fixed;
    height:100%; /*height: 100vh;*/ width:310px;
    overflow:hidden;
    top: 0; left: 0px; margin-top: 0; z-index: 14;
}
#lnb .lnb-wrapper{
    margin-top: 0;
    box-sizing:border-box;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    width: 263px;
    padding: 0px 16px 30px 30px;
    background-color: rgba(0,0,0,0.8);
    background-size : 263px 100%;
    background-repeat: repeat;
    background-position:left top;
    height:100%; /*height: 100vh;*/
    overflow-y:auto;
}
h1 { position:absolute; top:34px; left:2rem; z-index:10; width:100%; max-width:200px; text-align: center;}
h1 img { width:19vh; height:auto; max-width: 200px;}

/* lnb-controll */
.btn-lnb-controll{position: absolute; left: 263px; top: 71px; 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-controll .blit {display: inline-block;margin-top:13px;margin-left:9px; width:23px; height: 19px;  vertical-align:middle;transition: all .25s;}
.btn-lnb-controll .blit{background:url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260204_newyear/images/common/btn-close-off.png) center no-repeat; background-size: 100%;}
.btn-lnb-controll .blit:hover {filter: sepia(1);}
.btn-lnb-controll.is-closed .blit{transform: scaleX(-1);}
.btn-lnb-controll .bar{position:absolute; z-index:1; right:0; width: 3px; height: 46px; display: inline-block; background-color: #8e2b00;}

/* lnb icon */
#lnb_home{position:absolute; top:14vh; left:2rem; width: 200px; z-index:10; text-align:center; color:rgba(255,255,255,0.5); text-decoration: none;font-size: 15px;line-height: 15px;padding-top: 5px;}
#lnb_home i.fa{font-size: 20px;line-height: 11px;vertical-align:top;}
#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;
}

#lnb_sns { position:fixed; z-index:14; bottom:105px; padding-top:10px;
    box-sizing: border-box;
    padding-left: 20px; width: 221px;
    text-align:center;
    background-position: left top;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 1px;
    -moz-background-size: 100% 1px;
    background-size: 100% 1px;
    background-image: -moz-linear-gradient(left, rgba(255,255,255,0.125) 0%, rgba(255,255,255,0.125) 1%, rgba(255,255,255,0.1) 69%, rgba(255,255,255,0) 100%);
    background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.125) 0%,rgba(255,255,255,0.125) 1%,rgba(255,255,255,0.1) 69%,rgba(255,255,255,0) 100%);
    background-image: linear-gradient(to right, rgba(255,255,255,0.125) 0%,rgba(255,255,255,0.125) 1%,rgba(255,255,255,0.1) 69%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00ffffff',GradientType=1 );
}
#lnb_sns li { display: inline-block; margin-left:2rem; margin-right:2rem; }
#lnb_sns li:first-child { margin-left:0; margin-right:2rem; }
#lnb_sns li i { font-size:25px; color:rgba(255,255,255,0.5); opacity:0.5;transition:all 0.25s;}
#lnb_sns li i.white { font-size:25px; color:#fff; opacity:0.5;transition:all 0.25s;}
#lnb_sns li i:hover,#lnb_sns li i.white:hover { transform:scale(1.2); 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;
}

#lnb_sns + p { position:fixed; bottom:40px;  z-index:14;
    padding-top:20px; padding-left: 10px; padding-right: 20px; box-sizing: border-box;
    width: 221px;
    background-position: left top;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 1px;
    -moz-background-size: 100% 1px;
    background-size: 100% 1px;
    background-image: -moz-linear-gradient(left, rgba(255,255,255,0.125) 0%, rgba(255,255,255,0.125) 1%, rgba(255,255,255,0.1) 69%, rgba(255,255,255,0) 100%);
    background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.125) 0%,rgba(255,255,255,0.125) 1%,rgba(255,255,255,0.1) 69%,rgba(255,255,255,0) 100%);
    background-image: linear-gradient(to right, rgba(255,255,255,0.125) 0%,rgba(255,255,255,0.125) 1%,rgba(255,255,255,0.1) 69%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00ffffff',GradientType=1 );
    text-align:center; font-size:11px; color:rgba(255,255,255,0.5);}

/* lnb menu */
#menu { margin-top:23.5vh; }
#menu > li {
    position:relative; display:block; box-sizing:border-box; height: 5.68vh; max-height:63px;line-height: 5.6vh;min-height:52px;
    background-position: left top;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 1px;
    -moz-background-size: 100% 1px;
    background-size: 100% 1px;
    background-image: -moz-linear-gradient(left,  rgba(255,255,255,0.125) 0%, rgba(255,255,255,0.125) 1%, rgba(255,255,255,0.1) 69%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background-image: -webkit-linear-gradient(left,  rgba(255,255,255,0.125) 0%,rgba(255,255,255,0.125) 1%,rgba(255,255,255,0.1) 69%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background-image: linear-gradient(to right,  rgba(255,255,255,0.125) 0%,rgba(255,255,255,0.125) 1%,rgba(255,255,255,0.1) 69%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#menu > li:nth-of-type(2) {height: auto;max-height: unset;} /* 서브메뉴 있는 li */
#menu li li {
    position:relative; display:block; box-sizing:border-box; height: 4vh; max-height:40px;line-height: 4vh; min-height:44px;
}
#menu li .menu3 {margin-bottom: 1vh;}

#menu a {
    display:block; position:absolute; top:50%; transform: translateY(-50%);
    overflow:hidden; width:100%; transition:all 0.25s;
    color:rgba(255,255,255,1); text-align:left;
    font-size:18px; opacity:0.8; letter-spacing:-1px; }
#menu li a:hover { font-size:18px;  opacity:1; text-decoration: none; }
#menu li.on a { font-size:18px; opacity:1;}
#menu > li > a{/*border-top:1px solid rgba(255,255,255,0.2)*/
    font-size:18px;
    padding-left: 14px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

#menu li ul li a {padding-left:30px; }

#menu .title{ display:block; width:210px; padding-left:14px; padding-top: 0.5vh;text-align:left; font-size:18px; color:rgba(255,255,255,1); cursor:pointer;
    background-position: left top;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 1px;
    -moz-background-size: 100% 1px;
    background-size: 100% 1px;
    background-image: -moz-linear-gradient(left,  rgba(255,255,255,0.125) 0%, rgba(255,255,255,0.125) 1%, rgba(255,255,255,0.1) 69%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background-image: -webkit-linear-gradient(left,  rgba(255,255,255,0.125) 0%,rgba(255,255,255,0.125) 1%,rgba(255,255,255,0.1) 69%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background-image: linear-gradient(to right,  rgba(255,255,255,0.125) 0%,rgba(255,255,255,0.125) 1%,rgba(255,255,255,0.1) 69%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
#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;
}

#menu li:nth-child(4){line-height:23px;}
#menu li a:hover,
#menu li.on a,
#menu li:nth-child(2).on > span,
#menu li:nth-child(2).on ul li.on a{
    -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;
}

@keyframes neon3 {
    from {
        text-shadow: 0 0 0px #fff, 0 0 0px #81681e, 0 0 0px #81681e, 0 0 10px #81681e, 0 0 20px #81681e, 0 0 30px #81681e;
    }
    to {
        text-shadow:0 0 0px #fff, 0 0 0px #81681e, 0 0 0px #81681e, 0 0 0px #81681e, 0 0 0px #81681e, 0 0 1px #81681e;
    }
}

/************************************************************/
/* ///////////////////////// 레이아웃 ///////////////////////// */
.wrapper, #wrap{position: relative; width: 100%; height: 100%; overflow:hidden;}
section { position:relative; overflow:hidden; margin:0; padding:0; width:100%;
    background-size:cover; background-position:center; background-attachment:fixed;}
#section0, #section1, #section3 { background-image:url(https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260204_newyear/images/common/bg.jpg);}

article { position:absolute; top:80px; width: calc(100% - 520px); left: 400px; z-index: 11;background:red; padding:30px;}
.img-wrap {position: absolute; top:50%; height:95%; ;z-index: 12; max-height:870px ;left: 52.5%;transform: translate(-50%,-50%);}
.img-wrap img { height: 100%;}


/************************************************************/
/* ///////////////////////// main ///////////////////////// */
#section0 article { background:rgba(206,124,121,0.85); }
#section0 p,#section0 span  {text-align:center;}

.tree-l {
    position: absolute;
    top: 3%;
    left: -3%;
    width: 36.12%;
    max-width: 563px;
}
.tree-r {
    position: absolute;
    right: 0%;
    top: 3%;
    width: 36.22%;
    max-width: 527px;
}
.cloud-btm{
    position: absolute;
    left: 0;
    bottom: 0;
}
.bg-wrap { position:absolute; inset:0; }
.cloud-wrap { position:absolute; inset:0; z-index:1; pointer-events:none; }

.cloud{
    position: absolute;
    display: block;
    z-index: 5;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: move-background 60s 1s linear infinite;
    animation-delay: 2.3s;
}
@keyframes move-background {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
100% {
    -webkit-transform: translate3d(80vw, 0, 0);
}
}

.cloud.lb{
    max-width: 182px;
    height: auto;
    left:-1%;
    top:37%;
}
.cloud.lt{
    max-width: 200px;
    height: auto;
    left:20.5%;
    top:24%;
}
.cloud.rb{
    max-width: 247px;
    height: auto;
    right:21%;
    top:32%;
}
.cloud.rt{
    max-width: 182px;
    height: auto;
    right:-1%;
    top:23%;
}

/* 메인 텍스트 애니메이션 */
#mainTitle{ position: absolute;display: flex;flex-direction:column;align-items:center;top: 11%;left: 53%;max-width: 884px;width: 100%;z-index: 1;transform: translateX(-50%);}
#mainTitle img {display: block;}
#mainTitle .sub-txt { max-width: 727px;height: auto; width: 74%;}
#mainTitle .year { max-width: 279px; width: 51%; margin-bottom: 1.8vh;}
#mainTitle .scroll {position: relative; margin: 3vh auto;display: flex;flex-direction: column;align-items: center;gap: 0;}
#mainTitle .date {max-width: 614px; width:70%;}
/* 위/아래 막대 */
.scroll_top,.scroll_bottom{
    display:block;
    width:91%;
    max-width: 884px;
    height:auto;
    position: relative;
    z-index: 2;
}
.scroll_bottom{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.scroll_paperClip{
    opacity: 0;
    visibility: hidden;
    margin: -17px auto 0; /* 위로 당기기 */
    padding-bottom: 30px;
    width:82%;
    max-width: 815px;
    overflow:hidden;
    height:0;               /* 시작: 안보임 */
    z-index: 1;
    /* 0.8초 후 펼치기 시작 */
    animation: innerUnfold 2.5s cubic-bezier(.2,.8,.5,1) forwards;
    animation-delay: 1.4s;

}

.scroll_paper{
    display:block;
    width:100%;
    height:auto;
    transform-origin: top;
}

@keyframes innerUnfold{
    0%   { height: 0;   opacity: 0; visibility: hidden; }
    1%   { opacity: 1;  visibility: visible; } /* 시작하자마자 보이게 */
    100% { height: clamp(379px, calc(89px + 22.65625vw), 524px); opacity: 1; visibility: visible; }
}

@keyframes innerStretch{
    0%   { transform: scaleY(.96); }
    65%  { transform: scaleY(1.02); }
    100% { transform: scaleY(1); }
}

@keyframes bottomDrop{
    to { transform: translateY(0); }
}
/* 캐릭터 */
#section0 .chr-wrap { position: absolute; bottom:0; left:3%; width: 100%; height: 100%; z-index: 1;}
#section0 .chr-wrap .chr-left {position: absolute; top:12%; left:-17%; width: 47.67%;z-index: -1;}
#section0 .chr-wrap .chr-right {position: absolute; top:5%; right:-3%; width: 33.67%;z-index: -1;}

/************************************************************/
/* ///////////////////////// sub01 ///////////////////////// */
#section1{position: relative;}
.chr-wrap {
    width: 100%;height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
.chr {position: absolute;}
#section1 .chr-wrap .chr.chr-left {max-width: 253px;width: 100%;height: auto;left: 15%;bottom:5.5%;}
#section1 .chr-wrap .chr.chr-right {max-width:546px;height:auto;width: 100%;bottom: -28%;right: -3.5%;z-index: 13;}

/************************************************************/
/* ///////////////////////// sub02 ///////////////////////// */
/* bg video */
#section2 .rwd-media-container {position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 0;}
#section2 .rwd-media {height: 100%;width: 100%;object-fit: cover;}
/* bg shadow */
#section2 .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/common/images/cover-video.png");}

#section2 .hero-wrap { position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
#section2 .chr-hero-l {position: absolute;max-width: 1000px;height:auto;width: 100%;top: 16%;left: clamp(-250px, calc(20.042vw - 538.802px), -154px);}
#section2 .chr-hero-r {position: absolute;max-width:1242px;width: 100%;top: 8%;right: clamp(-291px, calc(1.253vw - 309.050px), -285px);}
/* title */
#section2 .tit-hero {display:flex;flex-direction:column;gap:25px;position: absolute;top: 10vh;left: 50%;transform: translateX(-50%);}
#section2 .btn-yt {display: inline-block;height: 100%;position: absolute;top: 45%;left: 50%;transform: translateX(-50%)}
#section2 .btn-yt img {width:110px;height: 119px;}
#section2 .btn-yt img:hover {filter: brightness(1.6);}
/* skill */
#section2 .item-list {
    position: absolute;top: 58%;left: clamp(270px, calc(43.28125vw - 284px), 534px);width: 45%;height: auto;min-width: 400px;min-height: 273px;
    display: flex;flex-direction: row;gap: 200px;justify-content: space-between;
}
#section2 .item-list li:nth-child(1){max-width: 273px;height: auto;}



/************************************************************/
/* ///////////////////////// sub03 ///////////////////////// */
#section3 .btn-container {position: relative; width: 100%; height: 100%;}
#section3 .chr-wrap .chr.chr-left {max-width: 514px;width: 100%;height: auto;left: clamp(3px, calc(41.754vw - 598.670px), 203px);bottom:5.5%;z-index: 12;}
#section3 .chr-wrap .chr.chr-right {max-width:461px;height:auto;width: 100%;bottom: -14%;right: clamp(-127px, calc(24.426vw - 478.977px), -10px);z-index: 13;}

#section3 .img-wrap .btn-go-to-shop {display: inline-block;position: absolute;left: 50%;bottom: 13.5%;transform: translateX(-50%);}
#section3 .img-wrap .btn-go-to-shop img { max-width: 255px;height:4.74vh;}


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

.pop-layer {z-index:9999; display: inline-block; vertical-align: middle;background-color: #fff;}
.layer-wrap.basic .pop-layer,
.layer-wrap.basic2 .pop-layer { width: 430px; height: auto; }
.layer-wrap.yt .pop-layer {width: 900px;height:506px;background-color: #000;}
.layer-wrap.tbl .pop-layer{ width: 500px; min-height: 240px; height:340px;overflow-y:auto; border:2px solid #631f97;}

.pop-container{height:100%;}
.pop-container .skip{position:absolute;left:-9999px; width:0px; height:0px;font-size:0;line-height:0;overflow:hidden;visibility:hidden;}
.pop-container .frame{z-index:9999;position:relative;width:100%;height:100%;border:2px solid #201680;}
.pop-container .btn-layer-close{position:absolute;top:6px;right: 15px; display:inline-block;width:28px;height:28px;background:url("https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260204_newyear/images/sub02/btn-pop-x.png") 0 0 no-repeat;background-size:contain;text-indent:-9999px;}

/* 팝업 텍스트 */
.pop-container .frame * {font-family: 'NanumSquareRound', sans-serif;}
.pop-container .frame h1{top:0; right:0; left: 0;width: 100%; height: 42px;max-width: unset; padding:0; padding-left:5px; text-indent:16px; box-sizing:border-box; color:#222222; font-weight:bold;font-size:18px;text-align:left;position:absolute;line-height: 41px;background: transparent;}
.pop-container .msg{margin-top:80px; letter-spacing: -0.5px; font-size:17px; font-weight:bold; color:#222222; line-height:1.4;}

/* 팝업 버튼 */
.pop-container .wrap-btn{margin: 30px auto 22px; text-align:center;}
.pop-container .btn-confirm, .pop-container .btn-cancel, .pop-container .btn-close{display:inline-block;width:148px;height:44px;}
.pop-container .btn-confirm{background:url("https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260204_newyear/images/common/btn-confirm.png") 0 0 no-repeat;margin-right:10px;}
.pop-container .btn-cancel{background:url("https://lostsagakr-cdn-image.valofe.com/2014_grand/event/20260204_newyear/images/common/btn-cancel.png") 0 0 no-repeat;margin-left:10px;}

/* 아이템 획득 리스트 */
.layer-wrap.tbl .pop-container .frame{border:none;}
.layer-wrap.tbl .pop-container .wrap-tbl{display:table;margin-top:30px;width:100%;background:#fff;padding: 30px 20px 20px 20px;text-align:center;}
.layer-wrap.tbl .pop-container .frame h1{top:-18px;left:0; color: #222222;max-width: unset;}
.layer-wrap.tbl .pop-container .frame .wrap-tbl h2{font-size:1rem; margin-bottom: 7px; color:#222222;}
.layer-wrap.tbl .pop-container table{border-collapse:collapse;cell-padding:0;cell-spacing:0; width: 100%;}
.layer-wrap.tbl .pop-container table th{background: #631f97; color:#fff; font-size:15px; text-align:center;border-left: 1px solid #d4ccf2; padding: 7px 0;}
.layer-wrap.tbl .pop-container table th:first-child{border-left: 1px solid #d4ccf2;}
.layer-wrap.tbl .pop-container table th:last-child{border-right: 1px solid #d4ccf2;}
.layer-wrap.tbl .pop-container table td{color:#222222;padding-top:7px; padding-bottom:7px; font-size:15px; text-align:center;border:1px solid #201680;}
.layer-wrap.tbl .pop-container table td:first-child{border-right:0;}
.layer-wrap.tbl .pop-container .btn-confirm{margin-bottom:20px;}

/* youtube */
.layer-wrap.yt .pop-container .frame h1{top: -10%;}
.layer-wrap.yt .pop-container .frame iframe{min-width:100%;height:500px;}
.layer-wrap.yt .pop-container .btn-layer-close{right: 0; transition: transform 1s;width:28px;height:28px;filter: invert(12%) sepia(70%) saturate(5000%) hue-rotate(240deg) brightness(0.6) contrast(1.05);position:absolute;}
.layer-wrap.yt .pop-container .btn-layer-close:hover{transform: rotate(360deg);}


/*****미디어쿼리*****/
@media screen and (min-width : 1921px){

    section .img-wrap {
        max-height: 79.89vh;
    }

    /*#mainTitle {*/
    /*    max-width: 49.6vh;*/
    /*    max-height: 75vh;*/
    /*}*/
    #mainTitle .sub-txt,
    #mainTitle .year,
    #mainTitle .date,
    #mainTitle .main-txt{
        /*max-width: none;*/
    }
    .cloud-top, .cloud-btm{
        width: 100vw;
    }

}
@media screen and (max-width : 1860px){
    #section1 .chr-wrap .chr.chr-right{z-index: 11;}
    #section1 .chr-wrap .chr.chr-left{left: clamp(61px, calc(51.148vw - 676.046px), 306px);}

}
@media screen and (max-width : 1750px){

    #mainTitle {
        width: 50%;
    }
    #section0 .chr-wrap .chr-left {
        left: -27%;
        width: 55.67%;
    }
    #section0 .chr-wrap .chr-right {
        right: -10%;
        width: 40.67%;
    }
    /*.chr { width: 14%;}*/
    /*#chr4 {right: 0;}*/

}

@media screen and (max-width: 1660px) {
    #section1 .chr-wrap .chr.chr-right{right: clamp(-183px, calc(1.5vw - 400px), -70px);}

    #section2 .rwd-media {
        height: 106% !important;
        width: 106% !important;
        object-fit: cover;
    }
}

@media screen and (max-width : 1440px){

    #section0 .chr-wrap .chr-left {
        top: 13%;
        left: -32%;
        width: 61.67%;
    }
    #section0 .chr-wrap .chr-right {
        top: 7%;
        right: -12%;
        width: 44.67%;
    }
    #mainTitle{top: 16%;}
    .chr {display: none;}
}

@media screen and (max-height : 912px){
    section .img-wrap {height: 85%;}
}