:root {
  --txt-size: clamp(0.9rem, 1.8vw, 1.2rem);
  /*以一般文字大小作為基準去延伸各種尺寸需要*/
  --title-size: calc(var(--txt-size) *1.4);

}

html {
  font-size: 15px;
}

body {
  background: url(../images/bg.png) no-repeat center top / cover;
  background-attachment: fixed;
  font-family: "Noto Sans TC", sans-serif;
}

#eorzeadb_tooltip {
  position: fixed;
  z-index: 9999;
  overflow: auto;
  box-sizing: border-box;
}

#popupOverlay {
  display: none;
}

.tooltip__text {
  display: block;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  padding: 6px 8px 4px 8px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font-size: 12px;
  color: #404040;
  z-index: 99999;
}

.popup-content {
  display: none;
}

.db-tooltip__item__storage li {
  position: relative;
  /* 讓 tooltip 定位在 li 內 */
  display: inline-block;
  cursor: pointer;
}

.db-tooltip__l_main,
#eorzeadb_tooltip,
.popup_w412_body_gold {
  overflow: visible !important;
}

/* tooltip 文字 */
.db-tooltip__item__storage li .tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: max-content;
  max-width: 200px;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  padding: 6px 8px 4px 8px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font-size: 12px;
  color: #404040;
  z-index: 99999;
  position: absolute;
  top: 100%;
  /* 固定在圖片下方 */
  left: 0;
  /* 從 img 左邊開始 */
  margin-top: 5px;
  /* 距離圖片一點空隙 */
  transition: opacity 0.2s;
  white-space: normal;
  /* 允許換行 */
}

/* 滑鼠移上去才顯示 */
.db-tooltip__item__storage li:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

#header_area {
  position: relative;
  z-index: 5000;
}

#special.base_top {
  width: 100%;
}

#special .base_bottom {
  width: 100%;
  /* min-width: 960px; */
  overflow: hidden;
}

.social_plugin_bt_box {
  height: 25px;
}

.social {
  z-index: 1;
}

.social li {
  opacity: 0.2;
  filter: alpha(opacity=20);
}

#special #contents {
  margin-bottom: 0;
  padding-top: 0;
  position: relative;
  height: 100%;
  width: 100%;
}

.db-view__item_footer a {
  color: #73bfe6;
}

#special .content_header {
  width: 960px;
  padding: 0 0 0 16px;
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -480px;
  z-index: 2;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#special .to_lodestone {
  margin-bottom: 20px
}

#special .to_lodestone a {
  width: 304px;
  height: 30px;
  display: block;
  overflow: hidden;
}

#special .to_lodestone a img {
  margin-bottom: 0px;
}

#special .to_lodestone a:hover img {
  margin-top: -32px;
  vertical-align: top;
}

#special .to_lodestone a:active img {
  margin-top: -64px;
  vertical-align: top;
}

#special #footer {
  width: 100%;
  background: none #000;
  margin-bottom: 0;
  padding-top: 0;
  position: relative;
  z-index: 10;
}

#special .item_name.white_item {
  color: #f3f3f3 !important
}

#special .mr48 {
  margin-right: 48px;
}

#special .mb18 {
  margin-bottom: 18px;
}

.bt_main_art {
  width: 64px;
  height: auto;
  aspect-ratio: 1/1;
  margin-left: 350px;
  background: url(../images/btn.png) no-repeat center top / 100% auto;
  overflow: hidden;
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  align-items: flex-end;
}

.bt_main_art img {
  opacity: 0;
  transition: opacity .2s;
}

.bt_main_art:hover img {
  opacity: 1;
}



.content__wrapper {
  width: 100%;
  max-width: 960px;
  min-height: 1%;
  margin: 0 auto;
  position: relative;
}

.content__wrapper__bg {
  height: 736px;
}

.content__main-art__bg {
  width: 100%;
}

.content__main-art {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 520px;
  background: 
  url(../images/main_art.jpg) center top no-repeat #f9f4df;
  position: relative;
  overflow: hidden;
}

.content__title {
  text-align: center;
  margin-bottom: 16px;
}

.content__span {
  width: 100%;
  max-width: 880px;
  text-align: center;
  z-index: 1;
  margin: 0 auto 30px;
  position: relative;
}

.content__event-span {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 16px;
  display: block;
}

.content__span p.date {
  font-size: 32px;
  font-weight: bold;
  font-feature-settings: "palt";
  color: #1f1933;
  font-family: 'Noto Sans', sans-serif;
  line-height: 1.3;
}

.content__span p.attention {
  margin-top: 8px;
}

.content__span p span {
  display: inline-block;
}

.content__event-info {
  width: 100%;
  max-width: 930px;
  position: relative;
  margin-left: auto;
  z-index: 2
}

.content__event-info__area {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content__event-info__quest {
  /* width: 100%; */
  flex: 1 1 auto;
}

.content__event-info__quest--title {
  background: url(../images/quest_icon.svg) left center no-repeat;
  background-size: 24px 32px;
  padding: 6px 36px 0 28px;
  margin-bottom: 4px;
  min-height: 32px;
  color: #453d99;
  font-size: clamp(18px, 4vw, 20px);
  font-weight: bold;
}

.content__event-info__quest--text {
  color: #333;
  font-size: 16px;
  margin-bottom: 24px;
  padding-left: 4px;
}

.content__event-info__quest--text i {
  font-size: inherit
}

.content__event-info__orders {
  padding: 4px 8px;
  margin-left: 4px;
  background-color: #e6a817;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
}

.content__event-info__box {
  padding: 8px;
  margin-left: 4px;
  background-color: #fff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  color: #333;
}

.content__event-info__box a {
  color: #2556b8;
}

.content__event-info__level,
.content__event-info__terms {
  padding-left: 24px;
  margin-bottom: 4px;
  font-size: 15px;
}

.content__event-info__level.ja,
.content__event-info__terms.ja {
  background: url(../images/lv_icon.svg) left top no-repeat;
  background-size: 20px 20px;
}

.content__event-info__level.en-us,
.content__event-info__terms.en-us {
  background: url(../images/lv_icon.png) left top no-repeat;
  background-size: 20px 20px;
}

.content__event-info__level.en-gb,
.content__event-info__terms.en-gb {
  background: url(../images/lv_icon.png) left top no-repeat;
  background-size: 20px 20px;
}

.content__event-info__level.de,
.content__event-info__terms.de {
  background: url(../images/st_icon.png) left top no-repeat;
  background-size: 20px 20px;
}

.content__event-info__level.fr,
.content__event-info__terms.fr {
  background: url(../images/nv_icon.png) left top no-repeat;
  background-size: 20px 20px;
}

.content__event-info__terms {
  background: url() left top no-repeat !important;
}

.content__event-info__map {
  width: 100%;
  max-width: 512px;
  height: auto;
  display: table-cell;
}

.content__event-reward {
  width: 880px;
  height: 340px;
  position: relative;
  margin-bottom: 8px;
}

.content__event-reward__img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.content__event-reward__img_sp {
  display: none;
}

.content__event-reward_sp {
  display: none;
}

.content__event-reward__item {
  width: 880px;
  margin: 0 auto;
}

.content__event-reward__item--title {
  background: url(../images/reward_icon.svg) left top no-repeat;
  background-size: 24px 24px;
  padding: 0 0 0 28px;
  line-height: 24px;
  color: #453d99;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  z-index: 2;
  margin-bottom: 8px;
}

.content__event-reward__item--text {
  font-size: 15px;
  color: #333;
  margin-bottom: 16px;
}



.content__item {
  display: flex;
  justify-content: space-between;
  margin: 0 auto 32px;
  width: 880px;
}

.content__item__box {
  text-align: center;
  box-sizing: border-box;
  width: 424px;
}

.content__item__emote {
  width: 424px;
  text-align: center;
  box-sizing: border-box;
}

.content__item__emote__text {
  font-size: 15px;
  color: #333;
}

.content__item__title {
  margin-bottom: 4px;
  text-align: center;
  font-weight: bold;
  color: #1f1933;
}

.content__item__list {
  display: flex;
  justify-content: center;
}

.content__item__list_sp {
  display: none;
}

.content__item__list li {
  position: relative;
  width: 72px;
}

.db_popup_sp {
  cursor: pointer;
}

.content__item__list li .icon {
  display: block;
  margin: 3px 0 0 6px;
}

.content__item__list li .cover {
  width: 76px;
  height: 76px;
  background: url(../images/item_frame.png) no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.content__item__notes {
  max-width: 880px;
  color: #cc2944;
  font-size: 15px;
  text-align: center;
  margin: 0 auto 64px;
}

.content__notes {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 120px;
}


.content__notes img,
.content__notes svg {
  width: clamp(18px, 10vw, 48px);
  height: auto;
  aspect-ratio: 1/1;
  background: url(../images/notice_icon.svg) left center no-repeat;
  background-size: 100% 100%;
  display: block;
  margin-right: 5px;
  flex-shrink: 0;
}


.content__notes p {
  font-size: 15px;
  font-weight: bold;
  color: #1f1933;
  line-height: 1.5;
}

.content__main-art__bg {
  width: 100%;
}

.event-item__list__name.item_01 {
  color: #333;
  font-weight: 500;
}

@media (max-width: 1350px) {

  /* tooltip 文字 */
  .item_02 .db-tooltip__item__storage li .tooltip-text {
    left: auto;
    right: 0;
    /* 從 img 左邊開始 */
    margin-top: 5px;
    /* 距離圖片一點空隙 */
  }
}

@media (max-width: 960px) {
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* header---------------- */
  .content__main-art {
    min-width: 100%;
    background-image: url(../images/main_art_sp.jpg);
    background-size: 125% auto;
    padding-top: 68vw;
  }

  .bt_main_art {
    margin-left: 18rem;
    transform: translateY(-65%);
  }

  #special .content_header {
    display: none;
  }

  /* content---------------- */
  .content__wrapper {
    padding: 0 6%;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.8vw, 20px);
  }

  .content__title {
    display: none;
  }

  .content__span {
    max-width: 100%;
  }



  .content__span p.date {
    font-size: 4.2vw;
  }



  /* info---------------- */
  .content__event-info {
    width: 100%;
  }

  .content__event-info__area {
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
  }

  .content__event-info__quest {
    width: 90%;
  }

  .content__event-info__quest--title {
    background-size: 3vw 4vw;
    min-height: 4vw;
    padding: 0.2vw 4.2vw 0 3.6vw;
  }

  .content__event-info__box {
    margin-bottom: 16px;
  }

  .content__event-info__quest--text {
    font-size: 2vw;
    line-height: 1.7;
  }

  .content__event-info__orders {
    font-size: 2vw;
  }

  .content__event-info__level,
  .content__event-info__terms {
    font-size: 2vw;
    padding-left: 3.2vw;
  }

  .content__event-info__level.ja,
  .content__event-info__terms.ja {
    background-size: 2.8vw;
  }

  /* item------------------- */
  .content__item {
    width: 100%;
    margin: 0 auto;
  }

  .content__event-reward {
    width: 100%;
    height: 30vw;
    margin: 0 auto;
    margin-bottom: 3vw;
  }

  .content__event-reward::after {
    background-size: cover;
    width: 11vw;
    height: 9.5vw;
    right: -2.7vw;
    top: -0.4vw;
  }

  .content__event-reward::before {
    background-size: cover;
    width: 11vw;
    height: 9.5vw;
    left: -2.7vw;
    bottom: -0.4vw;
  }

  .content__event-reward__item--title {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 2vw;
  }

  .content__item__notes {
    max-width: 100%;
    width: 100%;
    margin: 4vw auto 5.5vw;
  }


}

@media (max-width: 700px) {

  /* content---------------- */

  .bt_main_art {
    width: 10vw;
    height: 10vw;
    margin-left: 27vw;
    transform: translateY(-50%);
  }

  .content__span {
    max-width: 100%;
    margin: 0 auto 2vw;
  }


  .content__span p.date {
    width: 100%;
  }

  /* info---------------- */
  .content__event-info__quest {
    width: 100%;
  }

  .content__event-info__quest--title {
    background-size: 3.75vw 5vw;
    min-height: 5vw;
    font-size: var(--title-size);
    /* font-size: 3vw; */
    padding: 0.2vw 4.2vw 0 4.8vw;
    margin-bottom: clamp(10px, 1.5vw, 15px);
  }

  .content__event-info__quest--text {
    font-size: calc(var(--txt-size) *1.2);
    line-height: 1.5;
    margin-bottom: clamp(10px, 1.5vw, 15px);
  }

  .content__event-info__orders {
    font-size: 2.8vw;
  }

  .content__event-info__level,
  .content__event-info__terms {
    font-size: calc(var(--title-size)*0.95);
    padding-left: 4vw;
  }

  .content__event-info__level.ja,
  .content__event-info__terms.ja {
    background-size: 3.8vw;
    background-position: left center;
  }

  .content__event-info__map {
    width: 88%;
  }

  /* item---------------- */
  .content__event-reward__item--title {
    width: 100%;
    margin: 6vw auto;
    background-size: 5vw 5vw;
    padding: 0 0 0 5.6vw;
    line-height: 5vw;
    font-size: var(--title-size);
    margin-bottom: 6vw;
  }

  .content__event-reward {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .content__event-reward::before,
  .content__event-reward::after {
    display: none;
  }

  .content__event-reward__img {
    display: none;
  }

  .content__event-reward_sp {
    display: block;
    width: 100%;
    margin: 0 auto;
  }

  .content__event-reward__img_sp {
    display: block;
    width: 100%;
  }

  .content__item {
    width: 100%;
    flex-direction: column;
    margin: 0 auto;
    gap: clamp(10px, 1.8vw, 20px);
  }

  .content__item__box {
    width: 100%;
    margin: 0 auto;
  }

  .content__item__list {
    display: none;
  }

  .content__item__list_sp {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1.2vw, 8px);

  }

  .content__item__title {
    margin: 1.5vw auto;
    text-align: left;
    font-size: min(3.8vw, 17px);
    font-weight: bold;
    color: #333;
  }

  .content__item__list_sp>li {
    margin-bottom: 2vw;
    display: flex;
  }

  .content__item__list_sp>li>a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .content__item__notes {
    font-size: min(3.6vw, 15px);
    text-align: left;
    margin: 0 auto;
    padding-bottom: 6vw;
  }

  .content__notes {
    flex-direction: column;
    width: 100%;
    font-size: 3.2vw;
  }

  .content__notes p {
    font-size: min(3.2vw, 15px);
  }

  .content__notes img {
    display: block;
    margin: 0 auto 8px;
    width: 5.5vw;
    height: 5.5vw;
  }

  .event-item__list__box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.6;
    margin-left: 1.4vw;
    margin-bottom: 1vw;
  }

  .event-item__list__name {
    font-size: min(4vw, 18px);
    color: #453d99;
    font-weight: bold;
  }

  .event-item__list__name.item_01 {
    color: #333;
  }

  .event-item__list__equipment p {
    color: #333;
    font-size: min(3.5vw, 15px);
    line-height: 1;
  }

  /* item popup */
  #popupOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  

  #popupOverlay .popupBox {
    position: relative;
  }

  /* 右上角 X 按鈕 */
  #popupOverlay .popupClose {
    position: absolute;
    top: -35px;
    right: 0;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: url(../../../common/images/close.png) center no-repeat;
    background-size: cover;
  }

  #popupOverlay .popupClose:hover {
    background-image: url(../../../common/images/close_r.png);
  }

  @media (max-width: 430px) {
    #popupOverlay .popupClose {
      background-image: url(../../../common/images/close_r.png);
    }
  }

  #popupOverlay .popup-content-sp {
    display: block !important;
    width: auto;
    height: auto;
  }

  .db-tooltip__item__storage li .tooltip-text {
    left: auto;
    right: 0;
    /* 從 img 左邊開始 */
    margin-top: 5px;
    /* 距離圖片一點空隙 */
  }
}


@media (max-width: 480px) {

  /* info---------------- */
  .content__event-reward__item--title {
    font-size: 4.15vw;
  }

  .content__event-info__quest--title {
    background-size: 4.95vw 6.6vw;
    min-height: 6.6vw;
    font-size: 4.15vw;
    padding: 0.2vw 4.2vw 0 5.4vw;
  }

  .content__event-info__quest--text {
    font-size: 3.8vw;
  }

  .content__event-info__orders {
    font-size: 3.6vw;
  }

  .content__event-info__level,
  .content__event-info__terms {
    font-size: 3.2vw;
    padding-left: 5vw;
  }

  .content__event-info__level.ja,
  .content__event-info__terms.ja {
    background-size: 4.6vw;
  }

  .content__event-info__map {
    width: 86vw;
  }

  .content__span p {
    font-size: 3.6vw;
  }
  .content__span p.date {
    font-size: 5.6vw;
  }


}

@media (max-width: 450px) {
  #popupOverlay .popupClose {
    top: -45px;
    right: 5px;
  }
}

@media (max-width: 430px) {
  #popupOverlay .popupClose {
    background-image: url(../../../common/images/close_r.png);
  }
}
@media (max-width: 400px) {
  .bt_main_art {
    margin-left: 30vw;
  }
}