@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');

*{-webkit-text-size-adjust:none;}
html,body{width:100%;height:100%;margin:0;padding:0;}
body{margin:0;padding:0;font-family:'Noto Sans TC',sans-serif;font-size:16px;line-height:1.5;background:#000;}
body{
  opacity: 0;
  animation-name: fadeInBody;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.5s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}
@keyframes fadeInBody {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

h1,h2,h3,h4,p,ul,ol,li{margin:0;padding:0;list-style:none;}
img{border:none;}
a{text-decoration:none;cursor:pointer;outline:none;}
a:hover{text-decoration:none;}
button{outline:0;border:0;}

.wrapper{position:relative;min-width:1100px;overflow:hidden;}
.header h1,.header h2,.header h3,.header p,.section-inner{text-indent:-99999px;}
.goHome,.share,.goEvent,.goHome2{text-indent:-9999px;}

.ir{margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999px}
.inner{position:relative;margin:0 auto;width:1100px;}

.mob .wrapper{min-width:auto;margin-top:30px;}
.mob .inner{width:100%;}

/* header */

.header .inner{position:relative;margin:0 auto;width:100%;}
.header .inner .wrap{
    max-width: 1100px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.header{
    position:relative;
    height:750px;
    background:url("https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/bg_header.webp") no-repeat 50% 0;
}

.header::before{
    content: ""; 
    display: block;
    width: 100%;
    height:750px;
    position: absolute;
    z-index: 2;
    background:url("https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/bg_header2.webp") no-repeat 50% 0;
    background-size: cover;
    animation: ember-breath 3s ease-in-out infinite alternate;
}

.mob .header{
    height:540px;
    background-image:url("https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/m/bg_header.webp");
    background-size:cover;
}
.mob .header::before{
    content: ""; 
    display: block;
    width: 100%;
    height:540px;
    position: absolute;
    z-index: 2;
    background:url("https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/m/bg_header2.webp") no-repeat 50% 0;
    background-size: cover;
    animation: ember-breath 3s ease-in-out infinite alternate;
}


/* 呼吸動畫關鍵影格 */
@keyframes ember-breath {
  0% {
    opacity: 1;   /* 最亮時，亮部圖層完全覆蓋 */
  }
  50% {
    opacity: 0; /* 最暗時，亮部圖層近乎消失，露出底下的暗部圖 */
  }
  100% {
    opacity: 1;   /* 最亮時，亮部圖層完全覆蓋 */
  }
}

/*header上的東西*/
/*標題*/
.headArea-title01{
    background-image: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/header-title.png);
    z-index: 5;
    overflow: hidden;
    mask-position: 50% 0;
    mask-repeat: no-repeat;
    mask-image: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/header-title.png)
}
.mob .headArea-title01{
    mask-size: 100%;
}

.headArea-title02{
    background-image: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/header-title.png);
    z-index: 4;
}


.headArea-title01:after {
    content: "";
    position: absolute;
    top: -20%;
    left: -90%;
    width: 50%;
    height: 140%;
    background: linear-gradient(105deg, transparent, rgba(255, 220, 60, 0) 20%, rgba(255, 244, 84, 0.9) 80%, rgba(255, 255, 220, .9) 80%, rgb(244 255 182 / 90%) 70%, rgba(255, 220, 60, 0) 90%, transparent);
    opacity: .7;
    mix-blend-mode: screen;
    transform: skewX(-40deg);
}


.headArea-title01:after {
    animation: shineMove 3s ease-in-out infinite;
}

@keyframes shineMove {
    0% {
        left: -90%
    }

    to {
        left: 160%
    }
}


.titlesize{
    position: absolute;
    display: block;
    background-size: contain;
    margin: 0 auto;     
    width: 500px;
    padding-bottom: 320px;
    top: 130px;
    left: 0;
    margin-left: calc(50% - 250px);
    background: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/header-title.png) center no-repeat;
}

.mob .titlesize{
     width: 300px;
    padding-bottom: 194px;
    top: 200px;
    left: 0;
    margin-left: calc(50% - 150px);   
    background-size: 100%;
    filter: drop-shadow(0px 0px 6px rgba(51, 20, 2, 0.9));
}


.header-title-light{
    position: absolute;
    display: block;
    background-size: contain;
    margin: 0 auto;     
    width: 500px;
    padding-bottom: 320px;
    top: 130px;
    left: 0;
    margin-left: calc(50% - 250px);
    z-index: 4;
    mix-blend-mode: screen;
    background: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/header-title-light.webp) center no-repeat;
}


.header-small-title{
    position: absolute;
    display: block;
    background-size: contain;
    margin: 0 auto;     
    width: 400px;
    padding-bottom: 120px;
    top:450px;
    left: 0;
    margin-left: calc(50% - 200px);
    z-index: 4;
    background: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/header-small-title.webp) center no-repeat;
}

.mob .header-small-title{
    width: 300px;
    margin-left: calc(50% - 150px);
    padding-bottom: 90px; 
    top: 390px;
    background-size: 100%;
}


@media (max-width: 1280px) {


}


.header .inner{position:relative;margin:0 auto;}
.header .inner .goHome{
    position: relative;
    top: 100px;
    left: 0;
    margin-left: calc(50% - 110px);
    width: 220px;
    height: 70px;
    background: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/logo_ls.webp) no-repeat 50% 50%;
    z-index: 100;
    background-size: 100%;
}
.header .inner .header-button{position:relative;top:5px;right:10px;display:flex; z-index: 100;}
.header .inner .header-button [class*=btn-]{height:40px;border:1px solid rgba(255,255,255,.33);background-color:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;border-radius:3px;box-sizing:border-box;}
.header-button .btn-copyurl{width:40px;background-image:url("https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/share.webp");background-position:50%;background-repeat:no-repeat;background-size:25px;margin-left:5px;font-size:0;position:relative;}
.header-button .btn-copyurl.active:before{content:"URL已複製";color:#cccccc;background-color:rgba(0,0,0,.8);font-size:11px;padding:0.25rem 0.5rem;border-radius:5px;letter-spacing:-1px;position:absolute;bottom:-30px;text-align:center;pointer-events:none;width:70px;left:50%;margin-left:-35px;box-sizing:border-box}
.header-button .btn-copyurl.active:after{content:"";position:absolute;bottom:-8px;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent rgba(0,0,0,.8) transparent;pointer-events:none}
.header-button .btn-home{width:40px;background-image:url("https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/home.webp");background-position:50%;background-repeat:no-repeat;background-size:25px;margin-left:5px;font-size:0;}
.header .inner a:hover,.section a:hover{-webkit-filter:contrast(150%);filter:contrast(150%);}
.header2{position:relative;height:auto;background:none no-repeat 50% 0;}





.mob .header .inner .goHome{    
    left: 5px;
    width: 105px;
    height: 38px;
    top: 5px;
    margin-left: 5px;
    background-size: 105px 38px;}
.mob .header .inner .share{left:auto;top:10px;right:10px;width:30px;height:30px;background-size:cover;}
.mob .header .inner .title{display:none}
.mob .header .inner a,.mob .section a{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}
.mob .header2{height:auto;background-image:none;background-size:cover;}


/*.section [class*="btn"]{position:absolute;display:block;width:77px;height:28px;}*/
.section{position: relative;}
.section [class*="item-list"]{position:absolute;overflow:hidden;text-indent:-9999px;width:1000px;left:50%;margin-left:-500px;}
.section [class*="item-list"] li{position:relative;width:130px;height:40px;margin:82px 14px 123px 0px;float:left;}
.section [class*="item-list"] li:nth-child(7n){margin-right:0;}
.section [class*="item-list"] li a{position:absolute;text-indent:-9999px;z-index:100;width:50px;height:50px;background:none;}
.section [class*="item-list"] li a.btn_info{width:38px;height:38px;right:15px;top:0;background:none no-repeat 50% 50%;background-size:cover;z-index:101;}
.section [class*="item-list"] li a.btn_more{width:100px;height:22px;background:#d37878 no-repeat 50% 50%;background-size:cover;bottom:10px;left:50%;margin-left:-50px;margin-left:-47px;border-radius:10px;/*margin:0 auto;border:1px solid #6ecbe0;*/}
.section [class*="item-list"] li a.btn_more:before{display:block;content:'詳細說明';color:#ffffff;font-size:17px;text-align:center;text-indent:0;line-height:1.2;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;padding-bottom:2px;text-shadow:none;font-weight:400;letter-spacing:-0.5px;text-shadow:1px 0 2px #000000;}
.mob .section [class*="item-list"]{width:280px;margin-left:-140px;}
.mob .section [class*="item-list"] li{width:65px;height:30px;margin:35px 6px 58px 0px;}
.mob .section [class*="item-list"] li:nth-child(4n){margin-right:0}
.mob .section [class*="item-list"] li a.btn_info{width:26px;height:26px;top:0;right:2px;background-size:cover;}
.mob .section [class*="item-list"] li a.btn_more{width:52px;height:15px;margin-left:-26px;}
.mob .section [class*="item-list"] li a.btn_more:before{font-size:0.6rem;padding-bottom:1px;}
/** preview/tooltip/modal/youtube **/

.section [class*="btn-info"]{width:38px;height:38px;left:50%;margin-left:-19px;background:none no-repeat 50% 50%;background-size:cover;}
.section [class*="btn-more"]{width:100px;height:22px;left:50%;margin-left:-50px;background:#d37878 no-repeat 50% 50%;background-size:cover;/*border:1px solid #6ecbe0;*/border-radius:10px;}
.section [class*="btn-more"]:before{display:block;content:'詳細說明';color:#ffffff;font-size:17px;text-align:center;text-indent:0;line-height:1.2;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;padding-bottom:2px;text-shadow:none;letter-spacing:-0.5px;font-weight:400;text-shadow:1px 0 2px #000000;}
.mob .section [class*="btn-info"]{width:24px;height:24px;margin-left:-12px;background-size:cover;}
.mob .section [class*="btn-more"]{width:52px;height:15px;margin-left:-26px;background-size:cover;padding:0;}
.mob .section [class*="btn-more"]:before{font-size:0.6rem;padding-bottom:1px;}
.popup_content{width:300px;padding:1rem 0.5rem;background:#282a37;box-shadow:3px 3px 3px rgba(0,0,0,0.3);}
.popup_content h3{margin:0 20px;padding:16px 0 9px;font-size:16px;color:#e6c31f; border-bottom:1px solid #3e414f;font-weight:700;}
.popup_content p{margin:0;padding:10px 20px 20px;font-size:14px;color:#dddddd;text-align:justify;}
.popup_content p i{font-style:normal;}
.popup_content img{width:100%;}
body #modal-header,body #modal-text,body #modal-image{background:#282a37;}
body #modal-text{text-align:justify;}
#btc .tooltip i,#modal-text i{font-style:normal;}
#btc .tooltip i.small,#modal-text i.small,.popup_content p i.small{color:#aaaaaa;font-size:13px;}
.wrapper .use-mobile, .mob .wrapper .use-pc{display:none;}
.wrapper .use-pc, .mob .wrapper .use-mobile{display:flex;}

/*nav*/
.nav-list{
  width: 1000px;
  position: absolute;
  left: 0;
  margin-left: calc(50% - 500px);
  display: flex;
  justify-content: center;
  z-index: 5;
  margin-top: -160px;
}

.mob .nav-list{
    width: 400px;
    margin-left: calc(50% - 185px);
    margin-top: -55px;
    flex-flow: wrap;
}

.nav-list li a{
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  width: 325px;
  height: 100px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
transition: all 0.3s;
}
.nav-list li a:hover{
    transition: all 0.3s;
    filter:brightness(1.2);
}


.nav-list li:nth-child(1) a{background-image:url("https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/menu-btn_01.webp");}
.nav-list li:nth-child(2) a{background-image:url("https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/menu-btn_02.webp");}

.mob .nav-list li a{
    height: 55px;
    width: 180px;
    margin-left: -15px;
}

.nav-list li a span{   font-size: 0;}



/* section */
#section1 {
  background: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/bg_section1.webp) 50% 100% no-repeat;
  height: 1680px;
}

.mob #section1 {
    background: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/m/bg_section1.webp) center no-repeat;
    height: calc(1520px / 2);
    background-size: 1280px;
    background-position: top center;
    background-repeat: repeat-x;
}

 #section2 {
  background: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/bg_section2.webp) 50% 100% no-repeat;
  height: 1720px;
}
.mob #section2 {
  background: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/m/bg_section2.webp) center no-repeat;
  height: calc(2000px / 2);
  background-size:  1280px 100%;
  background-repeat:repeat-x;
}


.mob #section1{
    padding-bottom: 600px;
}

.section-title{
    position: relative;
    display: block;
    background-position: center top;
    background-size:100%;
    background-repeat: no-repeat;
    margin: 0 auto;     
    width: 325px;
    height: 150px;
}
.mob .section-title{
    width: 150px;
    height: 75px;
}
.section-title.section1-title{
    background-image: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/content-title1.webp) ;
}
.section-title.section2-title{
    background-image: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/content-title2.webp) ;
}
.section1-txt{
    padding: 30px 0;
    text-align: center;
}
.mob .section1-txt{
    padding: 15px;
}
.section1-txt p:nth-child(1){
    color: #fff;font-size: 30px;
    line-height: 1.6;padding-bottom: 5px;;
}
.mob .section1-txt p:nth-child(1){
    font-size: 18px;
}
.section1-txt p:nth-child(2){
    color: #e4cdc8;
    font-size: 17px;
    line-height: 1.6;
}
.mob .section1-txt p:nth-child(2){
    font-size: 13px;
}

/* reward */
.section .area-reward{
    margin-top: 115px;
    margin-left: 50px;
    
}
.section .area-reward.lock{cursor:not-allowed;-webkit-filter:grayscale(1);filter:grayscale(1);pointer-events:none; }

.section .area-reward a{
    background-image: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/sent-btn.webp);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width: 300px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dbb564;
    font-size: 28px;
    font-family: 'Noto Serif TC', serif;
    font-weight: 700;
    text-shadow: 0px 0px 8px #1e0000,0px 0px 8px #1e0000,0px 0px 8px #1e0000,0px 0px 8px #1e0000;
}
.section .area-reward.lock a{pointer-events:none;}

.section .area-reward a.btn-receive,.section .area-reward a.btn-uncompleted,.section .area-reward a.btn-end{-webkit-filter:grayscale(1);filter:grayscale(1);}
a.btn-receive,a.btn-uncompleted,a.btn-end{cursor:not-allowed;}
.mob .section .area-reward{
    margin-top: -60px;
    margin-left: 75px;
}

.mob .section .area-reward a{
    margin-left: 0;
    padding-bottom: 0;
    width: 200px;
    height: 70px;
    font-size: 18px;
}
.mob .section .area-reward a.btn-reward{}
.mob .section .area-reward a.btn-receive{}
.mob .section .area-reward a.btn-uncompleted{}
.mob .section .area-reward a.btn-end{}


.section1-content{
    width: 1100px;
    margin: 0 auto;
}
.mob .section1-content{
    width: 350px;
    padding-top: 30px;
}
.four-box .one-box{
    position: relative;
    display: block;
    background-position: center top;
    background-size:100%;
    background-repeat: no-repeat;
    margin: 0 auto;     
    width: 1100px;
    height: 320px;
    left: 0;
    background-image: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/four-box.webp) ;
}

.mob .four-box .one-box{
    background-image: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/m/four-box-m.webp) ;
    width: 350px;
    height: 265px;
}

.four-box .one-box .box-title{
    color: #fff;
    position: absolute;
    left: 143px;
    top: 37px;
    font-size: 25px;
    text-shadow: 0 0 black;
}
.mob .four-box .one-box .box-title{
    left: 65px;
    top: 18px;
    font-size: 16px;
}




.four-box .one-box .box-content {
    display: flex;
}
.mob .four-box .one-box .box-content {
    flex-flow: column;
}
.four-box .one-box .box-content .left{
    width: 650px;
}
.mob .four-box .one-box .box-content .left{
    width: 100%;
}


.four-box .one-box .box-content .box-txt{
    color: #f8e4cc;
    font-size: 20px;
    padding-top: 135px;
    padding-left: 85px;
    line-height: 1.6;
}

.mob .four-box .one-box .box-content .box-txt{
    font-size: 12px;
    padding: 75px 24px;
}

.section2-center{
  background: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/content-center2.webp) 50% 100% no-repeat;
  height: 1720px;
  width: 100%;
  position: absolute;
  top: 0;
}
.mob .section2-center{
      background: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/m/content-center2-m.webp) 50% 100% no-repeat;
    width: 350px;
    background-size: 100%;
    height: 900px;
    left: 0;
    margin-left: calc(50% - 175px);
    margin-top: -50px;
}






/* caution */
.caution{position:relative;margin:0 auto;background:#191919 no-repeat 50% 0;height:auto;display:none;}
.caution:after{content:"";display:none;width:240px;height:290px;position:absolute;top:-200px;left:50%;margin-left:180px;background:none no-repeat 50% 0;pointer-events:none;}
.caution .inner{width:800px;margin:0 auto;padding:60px 0 100px;position:relative;z-index:10;}
.caution .inner h2{height:50px;text-indent:-9999px;background:none no-repeat 0 0;}
.caution .inner ol{margin:0 0 0 20px;}
.caution .inner ol li{padding:2px 0;list-style:decimal;color:#d4d4d4;text-align:justify;/*text-shadow:1px 1px rgba(255,242,201,.65);*/}
.caution .inner ol li span,.caution .inner ol li.point{color:#cea6f4;}

.mob .caution{/*background-size:1280px 100%;*/height:auto;}
.mob .caution:after{display:none;}
.mob .caution .inner{width:100%;max-width:300px;padding:2.5rem 0.5rem 2rem;font-size:0.75rem;letter-spacing:-0.5px;/*font-weight:300;*/box-sizing:border-box;}
.mob .caution .inner h2{height:30px;background-size:auto 20px;}


@media screen and (max-width:640px) {
  .mob .bottom-footer .bottom-footer__inner .bottom-footer__rating{width:300px;}
}
@media screen and (max-width:360px) {
  .mob .bottom-footer .bottom-footer__inner .bottom-footer__rating{width:270px;}
}

/* top */
#topBtn{display:none;width:40px;height:40px;color:#fff;font-size:10px;text-align:center;text-decoration:none;line-height:20px;padding-top:15px;border-radius:10px;box-sizing:border-box;position:fixed; bottom:20px;right:20px;z-index:100000;background-color:rgba(0,0,0,0.6);}
#topBtn:before{content:'\25B2';width:100%;text-align:center;font-size:12px;position:absolute;top:2px;left:0;}
#topBtn:hover{background-color:rgba(0,0,0,0.5);}


/* modal */
/*body #modal-header-image{background:none !important;}*/
/*body #modal-wrap{box-shadow:none;}
body #modal-contents{background:none;}*/


/* animation */
@-webkit-keyframes fade {
  40%,60% {opacity: 1;}
}
@keyframes fade {
  40%,60% {opacity: 1;}
}

@-webkit-keyframes dropShadow {
  50% {filter: drop-shadow(0px 0px 45px #ff4e00);}
}
@keyframes dropShadow {
  50% {filter: drop-shadow(0px 0px 45px #ff4e00);}
}

/* ColcoBox */
#colorbox,#cboxOverlay,#cboxWrapper{max-width:100%;top:0;left:0;position:absolute;z-index:10002;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
#colorbox,#cboxContent,#cboxLoadedContent{-webkit-box-sizing:content-box;box-sizing:content-box;}
#cboxOverlay{position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.8);}
#colorbox{outline:0;}
#colorbox #cboxWrapper{max-width:none;-webkit-transition:opacity .5s ease;-moz-transition:opacity .5s ease;-ms-transition:opacity .5s ease;-o-transition:opacity .5s ease;transition:opacity .5s ease;}
#colorbox #cboxWrapper #cboxMiddleLeft,#colorbox #cboxWrapper #cboxBottomLeft{clear:left;}
#colorbox #cboxWrapper #cboxContent{position:relative;overflow:visible;}
#colorbox #cboxWrapper #cboxContent #cboxLoadedContent{overflow:hidden !important;-webkit-overflow-scrolling:touch;}
#colorbox #cboxWrapper #cboxContent #cboxTitle{width:100%;margin:0 auto;text-align:center;color:#ffffff;font-size:1.2rem}
#colorbox #cboxWrapper #cboxContent #cboxCurrent{top:-22px;right:205px;position:absolute;text-indent:-9999px;}
#colorbox #cboxWrapper #cboxContent #cboxLoadingOverlay,#colorbox #cboxWrapper #cboxContent #cboxLoadingGraphic{top:0;left:0;position:absolute;width:100%;height:100%;}
#colorbox #cboxWrapper #cboxContent #cboxPrevious,#colorbox #cboxWrapper #cboxContent #cboxNext,#colorbox #cboxWrapper #cboxContent #cboxClose,#colorbox #cboxWrapper #cboxContent #cboxSlideshow{width:20px;height:20px;cursor:pointer;border:0;padding:0;margin:0;overflow:visible;text-indent:-9999px;position:absolute;top:-20px;background:none;}
#colorbox #cboxWrapper #cboxContent #cboxPrevious:active,#colorbox #cboxWrapper #cboxContent #cboxNext:active,#colorbox #cboxWrapper #cboxContent #cboxClose:active,#colorbox #cboxWrapper #cboxContent #cboxSlideshow:active{outline:0;}
#colorbox #cboxWrapper #cboxContent .cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:100%;-ms-interpolation-mode:bicubic;}
#colorbox #cboxWrapper #cboxContent .cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0;background:#000000;}
#colorbox #cboxWrapper #cboxContent #cboxError{padding:50px;border:1px solid #cccccc;}
#colorbox #cboxWrapper #cboxContent #cboxClose{top:0px;right:0px;width:36px;height:36px;cursor:pointer;display:block;}
#colorbox #cboxWrapper #cboxContent #cboxClose::before, #colorbox #cboxWrapper #cboxContent #cboxClose::after{content: "";width: 36px;height: 1px;position: absolute;left: 50%;top: 50%;background: #fff;-ms-transform: rotate(45deg);transform: rotate(45deg);margin-left: -18px;}
#colorbox #cboxWrapper #cboxContent #cboxClose::after{-ms-transform: rotate(-45deg);transform: rotate(-45deg);}
.mob #colorbox #cboxWrapper #cboxContent #cboxClose::before, .mob #colorbox #cboxWrapper #cboxContent #cboxClose::after{background: #000;}

#colorbox #cboxWrapper #cboxContent #cboxClose{
    top:35px;right:35px;
    background:url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/close.webp) 50% no-repeat;background-size:cover;width:40px;height:40px;opacity:0.8}
#colorbox #cboxWrapper #cboxContent #cboxClose:hover{opacity:1}
.mob #colorbox #cboxWrapper #cboxContent #cboxClose{top:15px;right:15px;width:30px;height:30px;}
#colorbox #cboxWrapper #cboxContent #cboxClose::before,#colorbox #cboxWrapper #cboxContent #cboxClose::after{display:none;}
.popup_content {
    position: relative;
    width: 1050px;
    height: 830px;
    box-sizing: border-box;
    background: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/frame_intro.webp) 50% 0 no-repeat;
    /* 這裡只留邊框所需的內距 */
    padding: 9rem 3rem 5rem 3rem;
}

/* 內層：負責滾動與範圍控制 */
.popup_inner {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-right: 15px; /* 讓文字與捲軸保持距離 */
    text-align: justify;
    box-sizing: border-box;
}

/* 捲軸設定 */
.popup_inner::-webkit-scrollbar {
    width: 8px; /* 直接設定實際滑塊寬度 */
}

.popup_inner::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0.5);
    border-radius: 5px;
}

.popup_inner::-webkit-scrollbar-thumb {
    background-color: #837676;
    border-radius: 5px;
}


.popup_content ul{}
.popup_content ul li{font-size: 18px;line-height: 1.6;}
.mob .popup_content ul li{font-size: 0.8rem;line-height: 1.4; letter-spacing: -0.5px;}

.intro-small-title{
    width: 200px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    top: 0;
    left: 0;
    margin-left: calc(50% - 100px);
    margin-top: -35px;
    position: absolute;
    background-image: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/btn-off.webp);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.mob .intro-small-title{
    width: 150px;
    height: 40px;
    font-size: 16px;
    margin-left: calc(50% - 75px);
    margin-top: -22px;
}

.intro-list{
    margin-top: 50px;
    position: relative;
    display: block;
    padding: 10px;
    background: rgba(255, 255, 255, 0.5);
}
.mob .intro-list {
    margin-top: 40px;
}

.popup_content#intro_content{
    background:url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/pop.png) 50% 0 no-repeat;
    background-size: 100% 100%;
    width: 850px;
    margin: auto;
}

.mob .popup_content#intro_content{
    background:url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/m/pop-m.webp) 50% 0 no-repeat;
    background-size: 100% 100%;
    width: 350px;
    margin: auto;
}

.popup_content#intro_content::after{
    content: '';
    width: 330px;
    height: 110px;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: calc(50% - 165px);
    margin-top: 35px;
    background-image: url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/pop-title.webp);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.mob .popup_content#intro_content::after{
    width: 170px;
    height: 60px;
    margin-left: calc(50% - 85px);
    margin-top: 5px;
}

.popup_content dl,.popup_content ol{font-size:18px;line-height:1.4;margin:0.25rem 0;position: relative;}

.popup_content dl dd,.popup_content p{
    color:#fff;
    margin:0;
}
p.colortxt{color:#fcddb7;}
.popup_content dl dt,.popup_content ol li{color:#fff;padding-bottom:0.15rem;}
.popup_content p{font-size:17px;padding:0;}
.popup_content ol{margin:0;margin-left:2rem;}
.popup_content ol li{list-style:decimal;}
.popup_content ol.prize{margin:0;margin-left:0.5rem;}
.popup_content ol.prize li{list-style:none;}
.mob .popup_content{width:375px;
    height:500px;
    overflow-y: scroll;
    background-image:url(https://image.tw.ncsoft.com/lostsword/event/2607/anniversary1stfest/m/frame_intro.webp);background-size:cover;padding:4rem 1.5rem 1.5rem;}
.mob .popup_content dl,.mob .popup_content ol{font-size:0.8rem;line-height:1.4;margin:0.15rem 0;letter-spacing:-0.5px;}
.mob .popup_content dl dt,.mob .popup_content ol li{padding-bottom:0.1rem;}
.mob .popup_content p{font-size:0.8rem;letter-spacing:-0.5px;}
.mob .popup_content ol{margin-left:1rem;}



#footer { background-color: #000; width: 100%; height: 60px; position: absolute; bottom: 0; display: block; z-index: 100; }
#footer .copyright{position:absolute;top:0.5rem;left:0;right:0;width:1000px;margin:0 auto;}
#footer .copyright-company,#footer .copyright-studio{display:flex;align-items:center;font-size:10px;color:#fffffe;letter-spacing:-0.5px;}
#footer .copyright-company{float:left;}
#footer .copyright-company .copyright-logo{width:42px;height:23px;margin-right:0.5rem;background:none no-repeat 50% 50%;background-size:contain;display:none}
#footer .copyright-studio{float:right;text-indent:-9999em;white-space:nowrap;overflow:hidden;background-size:contain;display:flex;align-items:center;}
#footer .copyright-studio .grade-desc{font-size:10px;line-height:1.2;text-indent:0;text-align:right;font-weight:300;color:#ffffff;}
#footer .copyright-studio .grade-icon{width:32px;height:32px;background:url("https://image.tw.ncsoft.com/lostsword/layout/footer_grading_2x.webp") no-repeat 50% 50%;background-size:contain;margin-left:0.5rem;}
#footer .copyright a{text-indent:-9999em;white-space:nowrap;overflow:hidden;display:block;height:100%;}

@media (max-width: 960px) and (resolution: 1dppx), (-webkit-min-device-pixel-ratio: 1.25) and (resolution: 1.25dppx) and (max-width: 960px) {
  #footer { width: 100%; height: 90px; position: absolute; bottom: 0; display: block; z-index:1000; }
  #footer .copyright{position:absolute;width:auto;left:0.5rem;right:0.5rem;bottom:0;padding:0;color:#fffffe;}
  #footer .copyright-company,#footer .copyright-studio{display:flex;align-items:center;font-size:0.6rem;font-weight:300;justify-content:center;padding-bottom:0.5rem;height:auto;float:none;}
  #footer .copyright-company{line-height:1.2;text-align:center}
  #footer .copyright-company .copyright-logo{width:36px;height:20px;margin-right:0.5rem;background:none no-repeat 50% 50%;background-size:contain;}
  #footer .copyright-studio li{margin-left:0.3rem;}
  #footer .copyright-studio .grade-desc{font-size:0.6rem;line-height:1.2;text-indent:0;text-align:right;font-weight:300;color:#ffffff;}
  #footer .copyright-studio .grade-icon{width:30px;height:30px;margin-left:0.5rem}
  #footer .copyright a{text-indent:-9999em;white-space:nowrap;overflow:hidden;display:block;height:100%;}
}

.mob #footer { width: 100%; height: 90px; position: absolute; bottom: 0; display: block; z-index:1000; }
.mob #footer .copyright{position:absolute;width:auto;left:0.5rem;right:0.5rem;bottom:0;padding:0;color:#fffffe;}
.mob #footer .copyright-company,.mob #footer .copyright-studio{display:flex;align-items:center;font-size:0.6rem;font-weight:300;justify-content:center;padding-bottom:0.5rem;height:auto;float:none;}
.mob #footer .copyright-company{line-height:1.2;text-align:center}
.mob #footer .copyright-company .copyright-logo{width:36px;height:20px;margin-right:0.5rem;background:none no-repeat 50% 50%;background-size:contain;}
.mob #footer .copyright-studio li{margin-left:0.3rem;}
.mob #footer .copyright-studio .grade-desc{font-size:0.6rem;line-height:1.2;text-indent:0;text-align:right;font-weight:300;color:#ffffff;}
.mob #footer .copyright-studio .grade-icon{width:30px;height:30px;margin-left:0.5rem}
.mob #footer .copyright a{text-indent:-9999em;white-space:nowrap;overflow:hidden;display:block;height:100%;}


@media screen and (max-width:1099px) {
  body{width:max-content;width:-webkit-max-content;width:-moz-max-content;max-width:1100px;}
  body.mob{width:auto;min-width:auto;max-width:none;}
}
@media (max-width: 960px) and (resolution: 1dppx) {
  .wrapper{min-width:auto;margin-top:30px;}
}

#nctGnb .gnbMenu div.myInfo, body #nctGnb:has(.myInfo) div.wrap div.gnbMenu div.menu ul li:nth-child(2) {
  display: none;
}







/*影片*/
    .video-box {
        position: absolute;
        width: 100%;
        height: 950px;
        background: #000;
        overflow: hidden;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        mix-blend-mode: color-dodge;
        mask: radial-gradient(circle at center, transparent 0%, transparent 70%, #000 80%);
        opacity: 0.8;
        animation: video-animate 3s ease-in-out infinite both ;
    }
    @keyframes video-animate {
        0% {
            filter: blur(1px) contrast(1.2);
            opacity: 0.8;
        }
        50% {
            filter: blur(5px) contrast(1);
            opacity: 0.3;
        }
        100% {
            filter: blur(1px) contrast(1.2);
            opacity: 0.8;
        }
    }



    @media (max-width: 800px) {
        .video-box {
            height: calc(60vh);
        }
    }

    .video-box video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0;
        object-fit: cover; /* 確保高度填滿不留黑邊 */
    }