html {
  min-width: 960px;
}
#header_area {
  position: relative;
  z-index: 5000;
}
#special .base_bottom {
  width: 100%;
  min-width: 960px;
  overflow: hidden;
  background: none;
}
.social_plugin_bt_box {
  height: 25px;
}
.social {
  z-index: 1;
}
.social li {
  opacity: 0.2;
  filter: alpha(opacity=20);
}
#special #contents {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 0;
  margin-bottom: 0;
}
#special .content_header {
  width: 960px;
  padding: 0 0 0 16px;
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -480px;
  z-index: 2;
  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;
}
.dawn {
  background: #989999;
  position: relative;
}
.dawn::before {
  content: '';
  background: url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/-WmBMT2vTFa3jX4nW8V9ecbLlg.jpg) repeat-y center top;
  background-size: 2560px 400px;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.dawn-header {
  background: url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/O6U3axLeDxKB12lPuyf3U60qQc.jpg) no-repeat center top,
    url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/otqrVDevn6Xbl-0-meUCB634fg.png) repeat-x center top #051c33;
  background-size: 2560px 580px, 128px 580px;
  min-width: 960px;
  height: 580px;
  position: relative;
  margin: 0 auto;
  padding: 140px 0 170px;
  box-sizing: border-box;
  text-align: center;
}
.dawn-nav {
  min-width: 960px;
  height: 144px;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
}
.dawn-nav.floating {
  position: fixed;
  top: 0;
  z-index: 10;
}
.dawn-nav__wrapper {
  position: relative;
  height: 144px;
  margin: 0 auto;
}
.dawn-nav-bg {
  background: url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/lNdwXIGrMEKx_rO-EQ4Fb5JEyk.png) no-repeat center top,
    url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/gMk5I4hmkIONSGTrZDtlyJgRYM.png) repeat-x center top #989999;
  background-size: 1280px 64px, 128px 64px;
  height: 64px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.75);
  position: relative;
  z-index: 3;
}
.dawn-nav ul,
.dawn-nav-encore {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 960px;
  margin: 0 auto;
  margin: 0 auto;
}
.dawn-nav ul li,
.dawn-nav ul p,
.dawn-nav-encore li,
.dawn-nav-encore p {
  width: 240px;
  height: 64px;
  position: relative;
}
.dawn-nav ul li a,
.dawn-nav ul p a,
.dawn-nav-encore li a,
.dawn-nav-encore p a {
  display: block;
  position: relative;
}
.dawn-nav ul li a img,
.dawn-nav ul p a img,
.dawn-nav-encore li a img,
.dawn-nav-encore p a img {
  display: block;
}
.dawn-nav ul li a img.on,
.dawn-nav ul p a img.on,
.dawn-nav-encore li a img.on,
.dawn-nav-encore p a img.on {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.dawn-nav ul li a .ic_story,
.dawn-nav ul p a .ic_story,
.dawn-nav-encore li a .ic_story,
.dawn-nav-encore p a .ic_story {
  position: absolute;
  top: 2px;
  left: 8px;
  display: block;
  pointer-events: none;
}
.dawn-nav ul li a .ic_new,
.dawn-nav ul p a .ic_new,
.dawn-nav-encore li a .ic_new,
.dawn-nav-encore p a .ic_new {
  position: absolute;
  bottom: 2px;
  right: 8px;
  display: block;
  pointer-events: none;
}
.dawn-nav ul li a:hover img.on,
.dawn-nav ul p a:hover img.on,
.dawn-nav-encore li a:hover img.on,
.dawn-nav-encore p a:hover img.on {
  opacity: 1;
}
.dawn-nav-encore {
  background: url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/_aQXNba3BFUdKaBkj8ENic_0yw.png) no-repeat center top;
  height: 80px;
  position: relative;
  z-index: 2;
}
.dawn-content {
  width: 960px;
  margin: 0 auto;
  position: relative;
}
.dawn-content * {
  font-family: "微软雅黑";
}
.dawn-content.jp * {
  font-family: "微软雅黑";
}
.dawn-content .indent {
  text-indent: 1em;
}
.dawn-content__header {
  background: url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/gyLToQzxKiT5mE9sOscvUFxLFs.png) no-repeat center top;
  width: 960px;
  height: 132px;
  padding-top: 78px;
  box-sizing: border-box;
  position: relative;
}
.dawn-content__header h2 {
  font-size: 22px;
  font-weight: bold;
  color: #005d80;
  text-align: center;
}
.dawn-content__header .bt_change {
  display: none;
  position: absolute;
  top: 70px;
  right: 90px;
  width: 144px;
}
.dawn-content__header .bt_change a img {
  display: block;
  position: absolute;
  -moz-transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -webkit-transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.dawn-content__header .bt_change a img.on,
.dawn-content__header .bt_change a img.selected {
  opacity: 0;
}
.dawn-content__header .bt_change a:hover img.on {
  opacity: 1;
}
.dawn-content__header .bt_change a.active img.selected {
  opacity: 1;
}
.dawn-content__header .bt_change a.active:hover img.on {
  opacity: 0;
}
.dawn-content__header .bt_change .bt_male {
  display: block;
  width: 134px;
  height: 24px;
  margin-bottom: 2px;
  text-align: left;
}
.dawn-content__header .bt_change .bt_female {
  display: block;
  width: 144px;
  height: 24px;
  text-align: left;
}
.dawn-content__footer {
  background: url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/1o_SJzyook7UAuQARdOX7Kp7xw.png) no-repeat center top;
  width: 960px;
  height: 144px;
  padding-top: 24px;
  box-sizing: border-box;
}
.dawn-content__footer .inr {
  width: 780px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
.dawn-content__footer .inr a {
  height: 32px;
  line-height: 32px;
  display: flex;
  align-items: center;
  color: #005d80;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  font-family: "微软雅黑";
}
.dawn-content__footer .inr a.jp {
  font-family: "微软雅黑";
}
.dawn-content__footer .inr a::after {
  content: '';
  display: block;
  position: absolute;
  opacity: 0;
  width: 32px;
  height: 32px;
  pointer-events: none;
  -moz-transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -webkit-transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.dawn-content__footer .inr a:hover {
  text-decoration: none;
}
.dawn-content__footer .inr a:hover::after {
  opacity: 1;
}
.dawn-content__footer .inr .link_prev {
  background: url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/BR8lZgV_Q7XjvbVBkhmfjvCASI.png) left top no-repeat;
  padding-left: 32px;
  margin-right: auto;
}
.dawn-content__footer .inr .link_prev::after {
  background: url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/W8tZNH6WmtiqLizpKYR-wcV6jY.png) left top no-repeat;
  top: 0;
  left: 0;
}
.dawn-content__footer .inr .link_next {
  background: url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/sJ_oeov78DcGYjRScf7MCZAR-k.png) right top no-repeat;
  padding-right: 32px;
  margin-left: auto;
}
.dawn-content__footer .inr .link_next::after {
  background: url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/WGHtNbBCHMmSErcJaFT6YuGpP4.png) left top no-repeat;
  top: 0;
  right: 0;
}
.dawn-content__footer .dawn-line {
  margin-bottom: 8px;
}
.dawn-content__body {
  background: url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/POk7VC7xg6NQAk_LG9GnUc3XV8.png) repeat-y center top;
  width: 960px;
  padding-bottom: 32px;
}
.dawn-content__body .inr {
  width: 720px;
  margin: 0 auto;
}
.dawn-content__body .inr div,
.dawn-content__body .inr p {
  color: #202840;
  font-size: 16px;
  line-height: 1.8;
}
.dawn-content__body .inr div i,
.dawn-content__body .inr div b,
.dawn-content__body .inr div span,
.dawn-content__body .inr div strong,
.dawn-content__body .inr p i,
.dawn-content__body .inr p b,
.dawn-content__body .inr p span,
.dawn-content__body .inr p strong {
  font-size: inherit;
}
.dawn-content__body .inr div {
  padding-bottom: 28px;
}
.dawn-content__body .inr div.image {
  text-align: center;
  padding-bottom: 32px;
  line-height: 1%;
  font-size: 1%;
}
.dawn-content__body .inr .serif {
  color: #806540;
  font-weight: bold;
}
.dawn-content__body .inr.jp p {
  padding-bottom: 32px;
  line-height: 2.2;
}
.dawn-content__body .last-bottom {
  padding-bottom: 64px;
}
.dawn-content .story_female {
  display: none;
}
.dawn-line {
  background: url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/DXBIpZYLZ73nrNHuma0UD8IxRM.png) no-repeat center top;
  width: 780px;
  height: 7px;
  margin: 0 auto 32px;
  padding: 0;
}
.dawn-line__content {
  background: url(https://static.web.sdo.com/jijiamobile/pic/ff14/20250807xymihua/images/vJDIkgbm-mGZfh3oG6RXNnIEYA.png) center top no-repeat;
  width: 720px;
  height: 7px;
  margin: 0 0 32px;
  padding: 0;
}
.dawn-banner {
  padding: 16px 0 32px;
  text-align: center;
}
.fancybox-overlay-fixed {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.fancybox-skin {
  padding: 80px !important;
}
.fancybox-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}
.media__close {
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  top: -40px;
  right: 16px;
  z-index: 10;
}
.media__close i {
  background: url('data:image/svg+xml;utf8,<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M217.365 199.996L217.021 200.34L400 382.966L382.936 400L199.955 217.372L17.7376 400L0 382.966L182.89 200.34L182.546 199.996L182.887 199.656L0 17.025L17.7376 0L199.955 182.621L382.936 0L400 17.025L217.024 199.656L217.365 199.996Z" fill="%23666666"/></svg>')
    no-repeat 50% 50% !important;
  background-size: contain !important;
  display: block;
  width: 100%;
  height: 100%;
  transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.media__close:hover i {
  background: url('data:image/svg+xml;utf8,<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M217.365 199.996L217.021 200.34L400 382.966L382.936 400L199.955 217.372L17.7376 400L0 382.966L182.89 200.34L182.546 199.996L182.887 199.656L0 17.025L17.7376 0L199.955 182.621L382.936 0L400 17.025L217.024 199.656L217.365 199.996Z" fill="%23FFFFFF"/></svg>')
    no-repeat 50% 50% !important;
  background-size: contain !important;
  display: block;
}
.media__prev,
.media__next {
  display: block;
  width: 48px;
  height: 48px;
  padding: 4px;
  box-sizing: border-box;
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: transparent;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
}
.media__prev i,
.media__next i {
  display: block;
  position: relative;
  z-index: 1;
}
.media__prev i:before,
.media__prev i:after,
.media__next i:before,
.media__next i:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.media__prev i:before,
.media__next i:before {
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.35));
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 1;
}
.media__prev i:after,
.media__next i:after {
  opacity: 0;
}
.media__prev:before,
.media__next:before {
  background: linear-gradient(180deg, #fcfdff 0%, #f7f8fa 100%);
  content: '';
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #fcfdff;
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset,
    0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset,
    0px 8px 16px -4px rgba(0, 0, 0, 0.05), 0px 4px 8px -2px rgba(0, 0, 0, 0.05),
    0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}
.media__prev:after,
.media__next:after {
  background: linear-gradient(180deg, #f7f8fa 0%, #fcfdff 100%);
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: inset 0px 0px 4px rgba(50, 51, 51, 0.25);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.media__prev:hover i,
.media__next:hover i {
  filter: none;
}
.media__prev:hover i:before,
.media__next:hover i:before {
  opacity: 0;
}
.media__prev:hover i:after,
.media__next:hover i:after {
  opacity: 1;
}
.media__prev:hover:before,
.media__next:hover:before {
  opacity: 1;
}
.media__prev:active i,
.media__next:active i {
  filter: none;
}
.media__prev:active i:before,
.media__next:active i:before {
  opacity: 0;
}
.media__prev:active i:after,
.media__next:active i:after {
  opacity: 1;
}
.media__prev:active:before,
.media__next:active:before {
  opacity: 0;
}
.media__prev:active:after,
.media__next:active:after {
  opacity: 1;
}
.media__prev i,
.media__next i {
  width: 40px;
  height: 40px;
}
.media__prev {
  left: -80px;
}
.media__prev i:before,
.media__prev i:after {
  top: 0;
  left: 0;
  transform: rotateY(180deg);
}
.media__prev i:before {
  background: url('data:image/svg+xml;utf8,<svg width="480" height="480" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M214.284 343.97L303.97 254.284C307.503 250.828 310 245.751 310 240C310 234.248 307.503 229.171 303.97 225.715L214.284 136.29C210.653 132.317 205.603 130 200 130C188.955 130 180 138.954 180 149.999C180 155.555 182.271 160.576 185.929 164.2L261.728 240L185.929 315.799C182.271 319.423 180 324.444 180 329.999C180 341.45 188.955 349.999 200 349.999C205.603 349.999 210.653 347.682 214.284 343.97Z" fill="%23ffffff"/></svg>')
    no-repeat 50% 50%;
  background-size: contain;
  display: block;
}
.media__prev i:after {
  background: url('data:image/svg+xml;utf8,<svg width="480" height="480" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M214.284 343.97L303.97 254.284C307.503 250.828 310 245.751 310 240C310 234.248 307.503 229.171 303.97 225.715L214.284 136.29C210.653 132.317 205.603 130 200 130C188.955 130 180 138.954 180 149.999C180 155.555 182.271 160.576 185.929 164.2L261.728 240L185.929 315.799C182.271 319.423 180 324.444 180 329.999C180 341.45 188.955 349.999 200 349.999C205.603 349.999 210.653 347.682 214.284 343.97Z" fill="%238A8F99"/></svg>')
    no-repeat 50% 50%;
  background-size: contain;
  display: block;
}
.media__next {
  right: -80px;
}
.media__next i:before {
  background: url('data:image/svg+xml;utf8,<svg width="480" height="480" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M214.284 343.97L303.97 254.284C307.503 250.828 310 245.751 310 240C310 234.248 307.503 229.171 303.97 225.715L214.284 136.29C210.653 132.317 205.603 130 200 130C188.955 130 180 138.954 180 149.999C180 155.555 182.271 160.576 185.929 164.2L261.728 240L185.929 315.799C182.271 319.423 180 324.444 180 329.999C180 341.45 188.955 349.999 200 349.999C205.603 349.999 210.653 347.682 214.284 343.97Z" fill="%23ffffff"/></svg>')
    no-repeat 50% 50%;
  background-size: contain;
  display: block;
}
.media__next i:after {
  background: url('data:image/svg+xml;utf8,<svg width="480" height="480" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M214.284 343.97L303.97 254.284C307.503 250.828 310 245.751 310 240C310 234.248 307.503 229.171 303.97 225.715L214.284 136.29C210.653 132.317 205.603 130 200 130C188.955 130 180 138.954 180 149.999C180 155.555 182.271 160.576 185.929 164.2L261.728 240L185.929 315.799C182.271 319.423 180 324.444 180 329.999C180 341.45 188.955 349.999 200 349.999C205.603 349.999 210.653 347.682 214.284 343.97Z" fill="%238A8F99"/></svg>')
    no-repeat 50% 50%;
  background-size: contain;
  display: block;
}
.popup__header,
.popup__footer {
  display: block;
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  z-index: 1;
}
.popup__header {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(
    linear,
    50% 0%,
    50% 100%,
    color-stop(0%, rgba(0, 0, 0, 0)),
    color-stop(100%, #000000)
  );
  background-image: -moz-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    #000000 100%
  );
  background-image: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    #000000 100%
  );
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    #000000 100%
  );
  top: -80px;
}
.popup__footer {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(
    linear,
    50% 100%,
    50% 0%,
    color-stop(0%, rgba(0, 0, 0, 0)),
    color-stop(100%, #000000)
  );
  background-image: -moz-linear-gradient(
    bottom,
    rgba(0, 0, 0, 0) 0%,
    #000000 100%
  );
  background-image: -webkit-linear-gradient(
    bottom,
    rgba(0, 0, 0, 0) 0%,
    #000000 100%
  );
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000000 100%);
  bottom: -80px;
}
.viewer {
  position: relative;
  max-width: 960px;
  height: auto;
  margin: 0 auto;
}
.viewer .image {
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.viewer .image li {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
.viewer .image li::after {
  background: url('data:image/svg+xml;utf8,<svg width="480" height="480" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M404.167 403.766C395.429 412.493 381.229 411.402 374.363 404.545C367.498 397.688 300.401 330.677 291.351 321.639C280.117 310.418 288.231 299.131 288.231 299.131L276.62 286.54C252.971 306.868 223.382 319.316 189.823 319.316C119.005 319.316 60 261.266 60 189.658C60 118.597 119.005 60 189.823 60C261.522 60 319.646 118.597 319.646 189.658C319.646 222.931 306.989 253.179 286.359 276.135L298.217 287.977C298.217 287.977 310.076 280.497 320.686 291.094C329.425 299.821 397.768 368.078 404.322 374.624C410.875 381.169 412.905 395.039 404.167 403.766ZM189.927 99.9855C140.289 99.9855 100.049 140.174 100.049 189.749C100.049 239.324 140.289 279.512 189.927 279.512C239.565 279.512 279.804 239.324 279.804 189.749C279.804 140.174 239.565 99.9855 189.927 99.9855ZM199.913 239.667H179.94V199.773H139.996V179.826H179.94V139.931H199.913V179.826H239.86V199.773H199.913V239.667Z" fill="%23FFFFFF"/></svg>')
    no-repeat 50% 50% !important;
  background-size: contain !important;
  display: block;
  background-size: 32px 32px;
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.35));
}
.viewer .image li.active {
  opacity: 1;
  position: relative;
  z-index: 1;
  pointer-events: all;
}
.viewer .image li.animate {
  z-index: 2;
  pointer-events: all;
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.viewer .image li.video a {
  display: block;
  position: relative;
}
.viewer .image li.video a video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.viewer .image li.video img.thumb_trailer {
  opacity: 0;
}
.viewer .image li.video img.thumb_trailer.show {
  opacity: 1;
}
.viewer .thumbnail {
  display: flex;
  justify-content: center;
}
.viewer .thumbnail li {
  width: 128px;
  margin: 0 4px;
  position: relative;
  cursor: pointer;
}
.viewer .thumbnail li::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 166, 76, 0.2);
  box-shadow: 0px 0px 0px 2px #ffec80 inset;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  z-index: 2;
}
.viewer .thumbnail li:hover::after {
  opacity: 1;
}
.viewer .thumbnail li i {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.viewer .thumbnail li::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  opacity: 0;
  box-shadow: 0px 0px 0px 2px #ffffff inset;
  z-index: 2;
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.viewer .thumbnail li i::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #ffffff transparent;
  margin: 0 auto;
  z-index: 2;
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}
.viewer .thumbnail li.active::before {
  opacity: 1;
}
.viewer .thumbnail li.active i::before {
  opacity: 1;
}