/*****************************************
 * Reset
 ******************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0;padding:0;}
body,h1,h2,h3,h4,input,button{font-family:Malgun Gothic,Dotum,Helvetica,AppleSDGothicNeo,sans-serif;color:black;}
img,fieldset,iframe{border:0 none;}
ul,ol,li{list-style:none;}
img{vertical-align:top;}
label,button,input[type="radio"],input[type="checkbox"]{cursor:pointer;}
input,select,button{vertical-align:middle;}
button {background-color:transparent;border:0;}
button *{position:relative;}
html:first-child select{height:20px;padding-right:6px;}
option{padding-right:6px;}
table {width:100%;border-collapse:collapse;border-spacing:0;}
input::-ms-clear{display:none;}
a {color:black;text-decoration:none;outline: none;}
a[disabled] {cursor:default;opacity:0.5;filter:alpha(opacity=50);}
a:link, a:visited {color:blue;}
a:hover, a:focus {color:red;text-decoration:underline;}
a:active {color:yellow;text-decoration:underline;}
body {background-color:#fff;}

/*****************************************
 * Common
 *****************************************/
#wrap{position:relative;overflow:hidden;margin:0 auto;box-shadow:0 10px 16px 0 rgba(0, 0, 0, 0.5);-webkit-box-shadow:0 10px 16px 0 rgba(0, 0, 0, 0.5);}
.hide {position:absolute;width:0;line-height:0;height:0;font-size:0;top:0;left:-9999px;overflow:hidden;}
.inner {position:relative;width:1200px;margin:0 auto;}
html.lock{overflow:hidden}

/*****************************************
 * event
 *****************************************/
 #wrap{min-width:1220px;max-width:1920px;}
 .logo{position:absolute; top:37px; left:45px; z-index:10; }
 #footer{position: relative; padding:80px 0 50px; text-align:center; background:#dadada}
 #footer a{display:block; margin:0 auto 40px; width:334px}
 
/*****************************************
 * popup
 *****************************************/
.popup {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.8);z-index: 9999;overflow: auto;}
.popup-container {position: relative;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;height: 100%;}
.popup-body {position: relative;}
.popup-close {position: absolute;top: 0;right: 0;width: 100px;height: 80px;z-index: 1000;}
.popup-image {cursor: pointer;}
.popup-inline {display: none;}
.popup-youtube .popup-body{max-width:1440px; width:calc(100% - 130px); width:-webkit-calc(100% - 130px)}
.popup-youtube .popup-body:before{content:''; display:block; padding-bottom:56.25%}
.popup-youtube iframe{position:absolute; top:0; left:0; width:100%; height:100%}
.popup-youtube .close{position:absolute; top:0; right:-62px; width:60px; height:60px; border: 1px solid var(--youtube-close-color)}
.popup-youtube .close:before, 
.popup-youtube .close:after {position: absolute; top: 7px; left: 29px;content:'';height: 45px;width: 1px;background-color: var(--youtube-close-color);}
.popup-youtube .close:before {transform: rotate(45deg);}
.popup-youtube .close:after {transform: rotate(-45deg);}
.popup-youtube .close:hover{background-color: var(--youtube-close-color);}
.popup-youtube .close:hover:before, 
.popup-youtube .close:hover:after {background-color: #fff;}
:root{--youtube-close-color: #f56610}

/*****************************************
 * home, youtube, facebook link
 *****************************************/
.link_div {
  position: absolute;
  top: 45px;
  right: 58px;
  z-index: 10;
}

.link_div a {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  margin-left: 2px;
  color: white;
  vertical-align: top;
  color: #ffffff;
  /* background-color: rgba(0, 0, 0, 0.9); */
  /* border:1px solid rgba(98, 81, 68, 0.4); */
  box-sizing: border-box;
  background-image: url('https://img.sa.nexon.com/images/event/2025/0703/intro/link_bg.png');
  background-position-y: top;
}

.link_div a:hover {
  /* background-color: #3f2f25; */
  /* border: 1px solid #3f2f25; */
  background-position-y: bottom;
}

/*****************************************
 * check today
 *****************************************/
#today{position:absolute; top:868px; right:57px; line-height:18px;}
#today input[type="checkbox"]{display:inline-block; margin:0; margin-right: 4px; width:18px; height:18px; vertical-align:top; background:url('https://img.sa.nexon.com/images/event/2025/0703/intro/check_box.png') no-repeat; -webkit-appearance: none; appearance:none; -moz-appearance:none;}
#today input[type="checkbox"]:checked{background:url('https://img.sa.nexon.com/images/event/2025/0703/intro/check_box_on.png') no-repeat}

/*****************************************
 * page anchor
 *****************************************/
.anchor_div{
  position: fixed; 
  top: 248px;
  left: 50px; 
  z-index: 1;
}
@media screen and (min-width: 1920px) {
  .anchor_div{
    left: 50%;
    margin-left: -900px; 
  }
}
.anchor_div > button{
  background: url("https://img.sa.nexon.com/images/event/2025/0703/intro/anchor.png") no-repeat; 
  display: block; 
  width: 151px; 
  height: 171px;
  margin-top: 10px;
}
.anchor_div .anchor01{
  width: 151px;
  height: 178px;
  margin-top: 0;
  background-position: right 0;
}
.anchor_div .anchor02{
  background-position: right -188px;
}
.anchor_div .anchor03{
  background-position: right -369px;
}
.anchor_div .active{
  background-position-x: left;
}

.anchor-download{
  display: block;
  margin-top: 30px;
}

.multimedia {
  position: relative;
  margin-top: 19px;
}

.multimedia.active .btn_multimedia {
  background-position: 0 bottom;
}

.multimedia.active .list_multimedia {
  width: 340px;
}

.btn_multimedia {
  position: relative;
  background: url("https://img.sa.nexon.com/images/event/2025/0703/intro/btn_multi.png") no-repeat;
  width: 157px;
  height: 69px;
  z-index: 1;
}

.list_multimedia {
  position: absolute;
  top: 0;
  left: 153px;
  width: 0;
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: all .2s ease-in;
}


/*****************************************
 * top button
 *****************************************/
.anchor_top{position:fixed; bottom:100px; right:80px;}
@media screen and (min-width: 1920px) {
  .anchor_top{right: 50%; margin-right: -870px;}
}

/*****************************************
 * event common
 *****************************************/
.cont_tabs{position:relative; display:flex; margin-bottom:51px; font-size:0;}
.cont_tabs li{width:50%; height:91px}
.cont_tabs button, .cont_tabs a{display: block; width:100%; height:91px}
.tab_content .content{display:none}
.tab_content .content.active{display:block}

/*****************************************
 * header
 *****************************************/
#header {
  position: relative;
  background: #8d4d4b url("https://img.sa.nexon.com/images/event/2025/0703/intro/header.jpg") no-repeat 50% 0;
}

#header .inner {
  height: 960px;
}

#header .content{
  position: absolute;
  top: 224px;
  left: -16px;
}

#header .content img{
  opacity: 0;
}

#header .btn_video {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 280px;
  height: 81px;
}

#header .btn_season {
  position: absolute;
  bottom: 0;
  left: 290px;
  width: 300px;
  height: 81px;
}

#header .floating {
  z-index: 1;
  position: absolute;
  top: 607px;
  right: 57px;
}

/*****************************************
 * event01
 *****************************************/
#event01 {
  position: relative;
  background: #0c0606 url("https://img.sa.nexon.com/images/event/2025/0703/intro/event01_bg.jpg") no-repeat 50% 0;
}

#event01 .inner {
  height: 1670px;
}

#event01 .btn_guide {
  position: absolute;
  top: 504px;
  left: 480px;
}

#event01 .reward {
  position: absolute;
  top: 637px
}

#event01 .reward_tab li {
  background-image: url("https://img.sa.nexon.com/images/event/2025/0703/intro/event01_tab.png");
  background-repeat: no-repeat;
}

#event01 .reward_tab_01 {
  background-position: 0 bottom;
}

#event01 .reward_tab_01.active {
  background-position: 0 0;
}

#event01 .reward_tab_02 {
  background-position: -600px 0;
}

#event01 .reward_tab_02.active {
  background-position: -600px bottom;
}

#event01 .tab_content {
  margin-top: 56px;
}

#event01_content01, #event01_content02{
  scroll-margin-top: 165px;
}

#event01 .tab_content .slide_div .paging {
  position: relative;
  margin-bottom: 20px;
  text-align: center;
}

#event01 .tab_content .slide_div .paging div {
  position: relative;
  display: inline-block;
  width: 186px;
  text-align: center;
  vertical-align: middle;
}

#event01 .tab_content .slide_div .paging div p {
  display: none;
  text-align: center;
}

#event01 .tab_content .slide_div .paging div p.on {
  display: block;
}

#event01 .tab_content .slide_div .paging button{
  position: relative;
  overflow: hidden;
  width: 32px;
  height: 32px;
}

#event01 .tab_content .slide_div .paging button img{
  position: absolute;
  left: 0;
  top: 0;
}

#event01 .tab_content .slide_div .paging button:hover img{
  top: initial;
  bottom: 0;
}

#event01 .tab_content .slide_div .slider p {
  display: none;
  position: relative;
}

#event01 .tab_content .slide_div .slider p.on {
  display: block;
}

#event01 .tab_content .content:last-child .slide_div .slider p {
  min-height: 642px;
}

#event01 .tab_content .content:last-child .slide_div .slider p.on {
  display: flex;
  align-items: flex-end;
  margin-top: -17px;
}

#event01 .tab_content .content:last-child .slide_div .slider p .btn {
  position: absolute;
}

#event01 .tab_content .content:last-child .slide_div .slider p .btn_upgrade01 {
  top: 85px;
  left: 243px;
}

#event01 .tab_content .content:last-child .slide_div .slider p .btn_upgrade02 {
  top: 178px;
  left: 243px;
}

#event01 .tab_content .slide_div .slider p .item_gif {
  position: absolute;
  top: 275px;
  right: 249px;
  width: 76px;
  height: 14px;
  overflow: hidden;
}

#event01 .tab_buttons {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-top: 24px;
  font-size: 0;
}

.btn_skin, .btn_benefit {
  margin-left: 12px;
}

/*****************************************
 * event02
 *****************************************/
#event02 {
  position: relative;
  background: #1a1e21 url("https://img.sa.nexon.com/images/event/2025/0703/intro/event02_bg.jpg") no-repeat 50% 0;
}

#event02 .inner {
  padding-top: 659px;
  padding-bottom: 159px;
}


#event02 .passshop {
  position: relative;
}

#event02 .passshop_tab {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

#event02 .passshop .cont_tabs {
  margin-bottom:0;
}

#event02 .btn_quest {
  position: absolute;
  top: 421px;
  left: 1170px;
}

#event02 .btn_item01 {
  position: absolute;
  top: 184px;
  left: 160px;
}

#event02 .btn_item02 {
  position: absolute;
  top: 184px;
  left: 1164px;
}

#event02 .btn_item03 {
  position: absolute;
  top: 432px;
  left: 160px;
}

#event02 .btn_item04 {
  position: absolute;
  top: 432px;
  left: 562px;
}

#event02 .btn_item05 {
  position: absolute;
  top: 432px;
  left: 762px;
}

/* #event02 .btn_item05 {
  position: absolute;
  top: 432px;
  left: 1164px;
} */

/* #event02 .btn_item06 {
  position: absolute;
  top: 441px;
  left: 1164px;
} */

#event02 .btn_link {
  position: relative;
  display: block;
  width:240px;
  margin: 53px auto 100px; 
}

#event02 .btn_passshop {  
  position: relative;
  display: block;
  margin: 0 auto 67px auto; 
}

#event02 .warning {
  margin-top: 10px;
}

/*****************************************
 * event03
 *****************************************/
#event03 {
  position: relative;
  background: #181713 url("https://img.sa.nexon.com/images/event/2025/0703/intro/event03_bg.jpg") no-repeat 50% 0;
}

#event03 .inner {
  height: 1526px;
}

/*****************************************
 * popup skin
 *****************************************/
#popup_character .popup-body {
  background: url("https://img.sa.nexon.com/images/event/2025/0703/intro/popup_character.jpg") no-repeat 0 32px;
  width: 850px;
  height: 1450px;
  padding: 32px 0;
  overflow: hidden;
}

#popup_character .popup_video {
  position: absolute;
  top: 890px;
  left: 29px;
  font-size: 0;
}

#popup_character .popup_video iframe {
  margin: 0 8px;
}

#popup_skin .popup-body {
  background: url("https://img.sa.nexon.com/images/event/2025/0703/intro/popup_skin.jpg") no-repeat;
  width: 850px;
  height: 800px;
  overflow: hidden;
}

#popup_skin .popup_skin_tabs {
  position: absolute;
  top: 85px;
  left: 28px;
  font-size: 0;
  line-height: 0;
}

#popup_skin .popup_skin_tabs button {
  background: url("https://img.sa.nexon.com/images/event/2025/0703/intro/popup_skin_tabs.jpg") no-repeat;
  display: inline-block;
  width: 130px;
  height: 47px;
  margin: 1px;
}

#popup_skin .popup_skin_cont {
  position: absolute;
  top: 307px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 460px;
}

#popup_skin .popup_skin_cont p {
  display: none;
}

#popup_skin .popup_skin_cont p.on {
  display: block;
}