:root {
  --highlight-grey: #4B4B4B;
  --photo-credits: #C8C8C8;
  --dark-yellow: #908719;
}

.c-yellow {
  color: var(--yellow);
}

.rg-16 {
  row-gap: var(--16);
}

.mb-80 {
  margin-bottom: var(--80);
}

.mb-60 {
  margin-bottom: var(--60);
}

.mb-20 {
  margin-bottom: var(--20);
}

.title-bg::before {
  display: none;
}

@media (max-width: 1440.98px) {
  .article-page .header {
    position: fixed;
  }
}
@media (max-width: 1440.98px) {
  .article-page .row.mb-80, .article-page .section.mb-80 {
    margin-bottom: var(--64);
  }
}
@media (max-width: 576.98px) {
  .article-page .row.mb-80, .article-page .section.mb-80 {
    margin-bottom: var(--8);
  }
}
@media (max-width: 576.98px) {
  .article-page .row.rg-44 {
    row-gap: var(--8);
  }
}
@media (max-width: 1440.98px) {
  .article-page .col-md-6.rg-44 {
    row-gap: calc(var(--48) - var(--4));
  }
}
@media (max-width: 576.98px) {
  .article-page .col-md-6.rg-44 {
    row-gap: var(--30);
  }
}
@media (max-width: 1440.98px) {
  .article-page .col-md-6.rg-16 {
    row-gap: var(--12);
  }
}
@media (max-width: 576.98px) {
  .article-page .col-md-6.rg-16 {
    row-gap: var(--8);
  }
}
@media (max-width: 1440.98px) {
  .article-page .section.mb-150 {
    margin-bottom: calc(var(--112) - var(--12));
  }
}
@media (max-width: 576.98px) {
  .article-page .section.mb-150 {
    margin-bottom: calc(var(--52) - var(--2));
  }
}
@media (max-width: 1440.98px) {
  .article-page .photo-credits.mt-34 {
    margin-top: var(--18);
  }
}
@media (max-width: 576.98px) {
  .article-page .photo-credits.mt-34 {
    margin-top: var(--12);
  }
}

.mt-34 {
  margin-top: calc(var(--30) + var(--4));
}

.mb--28 {
  margin-bottom: calc(var(---24) + var(---4));
}

.b-yellow {
  color: var(--yellow);
}

b.b-yellow {
  font-weight: 400;
}

.leadtext b.b-yellow {
  font-weight: 700;
}

.text-block--question {
  background-color: var(--highlight-grey);
}

.text-block--badge {
  position: relative;
}
.text-block--badge::before {
  content: "";
  width: var(--48);
  height: var(--12);
  border: 2px solid var(--yellow);
  background-color: var(--dark);
  position: absolute;
  left: 0;
  top: var(--36);
  transform: translateX(calc(-50% - var(--2)));
}
@media (max-width: 1440.98px) {
  .text-block--badge::before {
    top: calc(var(--36) + var(--2));
    width: var(--36);
    height: var(--8);
    transform: translateX(calc(-50% - var(--5)));
  }
}
@media (max-width: 576.98px) {
  .text-block--badge::before {
    top: var(--22);
    border-width: var(--1);
    width: var(--20);
    height: var(--4);
    transform: translateX(calc(-50% - var(--4)));
  }
}

.article-page .img-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.article-page .h2:before {
  display: none;
}
.article-page .quote:before {
  background: var(--highlight-grey);
}
.article-page .photo-credits {
  position: relative;
  width: 100%;
}
.article-page .photo-credits:before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--grey);
  border: var(--1) solid var(--grey);
}
@media (min-width: 580px) {
  .article-page .photo-credits:before {
    width: calc(100% + var(--114));
  }
}
@media (max-width: 576.98px) {
  .article-page .photo-credits:before {
    width: calc(100% + var(--20));
    right: var(---20) !important;
  }
}
@media (max-width: 576.98px) {
  .article-page .photo-credits {
    padding: var(--12) var(--10);
  }
}

.photo-credits-content {
  position: relative;
  z-index: 2;
}
@media (max-width: 576.98px) {
  .photo-credits-content {
    text-align: right;
  }
}
.photo-credits-content p {
  font-size: var(--14);
  line-height: 120%;
  color: var(--photo-credits);
  margin-bottom: 0;
}

.row > *:first-child .photo-credits:before {
  right: 0;
}
@media (min-width: 580px) {
  .row > *:first-child .photo-credits {
    border-left: 0 solid transparent;
  }
}
@media (min-width: 580px) {
  .row > *:first-child .photo-credits .photo-credits-content {
    padding: var(--30) var(--30) var(--30) 0;
  }
}

.row > *:last-child .photo-credits:before {
  left: 0;
}
@media (min-width: 580px) {
  .row > *:last-child .photo-credits {
    border-right: 0 solid transparent;
  }
}
@media (min-width: 580px) {
  .row > *:last-child .photo-credits .photo-credits-content {
    padding: var(--30) 0 var(--30) var(--30);
  }
}

.information-block {
  position: relative;
}
.information-block svg {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: calc(101% + var(--114));
  height: 100%;
  display: block;
}
@media (max-width: 576.98px) {
  .information-block svg:nth-child(1) {
    display: none;
  }
}
.information-block svg:nth-child(2) {
  display: none;
}
@media (max-width: 576.98px) {
  .information-block svg:nth-child(2) {
    display: block;
  }
}
@media (max-width: 576.98px) {
  .information-block svg {
    width: calc(100% + var(--32));
    right: var(---12);
  }
}

.information-block-content {
  position: relative;
  z-index: 1;
  padding: var(--60);
  padding-left: var(--30);
}
@media (max-width: 576.98px) {
  .information-block-content {
    padding: var(--36) 0;
    padding-right: var(--14);
  }
}
.information-block-content p {
  font-size: var(--20);
  font-weight: 700;
  margin-bottom: var(--18);
}
.information-block-content p:last-child {
  margin-bottom: 0;
}
@media (max-width: 1440.98px) {
  .information-block-content p {
    font-size: calc(var(--20) - var(--1));
  }
}
@media (max-width: 576.98px) {
  .information-block-content p {
    font-size: calc(var(--16) - var(--1));
  }
}

p.information-block-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Tokeely Brookings";
  z-index: 1;
  font-size: var(--60);
  font-weight: 400;
  line-height: 1;
  color: var(--grey);
  text-transform: uppercase;
  text-shadow: var(---2) var(---2) 0 var(--yellow), 0 var(---2) 0 var(--yellow), var(--2) var(---2) 0 var(--yellow), var(--2) 0 0 var(--yellow), var(--2) var(--2) 0 var(--yellow), 0 var(--2) 0 var(--yellow), var(---2) var(--2) 0 var(--yellow), var(---2) 0 0 var(--yellow);
}
@media (max-width: 576.98px) {
  p.information-block-title {
    font-size: var(--40);
  }
}

.article-nav {
  position: relative;
  z-index: 1;
}
@media (max-width: 1440.98px) {
  .article-nav.mb-60 {
    margin-bottom: calc(var(--52) - var(--2));
  }
}

.article-nav-wrapper {
  gap: 5.94%;
  display: flex;
}
@media (max-width: 1600px) {
  .article-nav-wrapper {
    gap: 3%;
  }
}
@media (max-width: 767.98px) {
  .article-nav-wrapper {
    gap: var(--24);
  }
}
@media (max-width: 576px) {
  .article-nav-wrapper {
    flex-wrap: wrap;
  }
}

.article-nav-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--14);
  background-color: var(--grey);
  border: var(--1) solid var(--lgrey);
  padding: var(--20);
  white-space: nowrap;
}
@media (max-width: 1440.98px) {
  .article-nav-btn {
    padding: var(--18);
    gap: var(--10);
  }
}
@media (max-width: 767.98px) {
  .article-nav-btn {
    padding: var(--16);
    gap: var(--8);
  }
}
.article-nav-btn svg path {
  fill: #fff;
}
.article-nav-btn svg {
  width: var(--18);
  flex-shrink: 0;
  height: auto;
}
@media (max-width: 1440.98px) {
  .article-nav-btn svg {
    width: var(--16);
  }
}
@media (max-width: 767.98px) {
  .article-nav-btn svg {
    width: var(--14);
  }
}
.article-nav-btn h4 {
  color: #fff;
  font-size: var(--30);
  text-transform: uppercase;
  line-height: 1;
}
@media (max-width: 1440.98px) {
  .article-nav-btn h4 {
    font-size: var(--26);
  }
}
@media (max-width: 767.98px) {
  .article-nav-btn h4 {
    font-size: var(--20);
  }
}

.my-col {
  width: 33.3%;
}
@media (max-width: 767.98px) {
  .my-col {
    width: 100%;
  }
}

.article-nav-btn--home {
  margin: 0 auto;
}

a.article-nav-btn:hover svg path {
  fill: var(--yellow);
}
a.article-nav-btn:hover h4 {
  color: var(--yellow);
}

.mans-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
@media (max-width: 1440.98px) {
  .mans-block {
    row-gap: var(--20);
  }
}
@media (max-width: 576.98px) {
  .mans-block {
    row-gap: var(--10);
  }
}

.man-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 35%;
}
@media (max-width: 1440.98px) {
  .man-item {
    width: calc(43% - var(--20));
  }
}
@media (max-width: 576.98px) {
  .man-item {
    width: calc(50% - var(--10));
  }
}

.man-item-4 {
  width: 33%;
}
@media (max-width: 1440.98px) {
  .man-item-4 {
    width: calc(40% - var(--20));
  }
}
@media (max-width: 576.98px) {
  .man-item-4 {
    width: calc(47% - var(--10));
  }
}

.man-item-content {
  padding: var(--20);
  background: var(--grey);
  border: var(--1) solid var(--lgrey);
  text-align: center;
  transform: translateY(-30%);
  width: 100%;
  z-index: 2;
}
@media (max-width: 1440.98px) {
  .man-item-content {
    padding: var(--16);
  }
}
@media (max-width: 767.98px) {
  .man-item-content {
    padding: var(--10);
  }
}

.man-item-title {
  font-size: var(--20);
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--6);
  color: var(--yellow);
}
@media (max-width: 1440.98px) {
  .man-item-title {
    font-size: var(--18);
  }
}
@media (max-width: 767.98px) {
  .man-item-title {
    font-size: var(--12);
  }
}

.man-item-subtitle {
  font-size: var(--14);
  font-weight: 400;
  line-height: 1;
  color: var(--yellow);
  margin-bottom: 0;
}
@media (max-width: 767.98px) {
  .man-item-subtitle {
    font-size: var(--10);
  }
}

.man-item-img {
  width: 100%;
}

.mans-block {
  height: 100%;
}

@media (max-width: 576.98px) {
  .mans-block-1 {
    margin-top: var(--40);
  }
}

.man-item-1 {
  margin-left: 8%;
}
@media (max-width: 1440.98px) {
  .man-item-1 {
    margin-bottom: auto;
  }
}
.man-item-1 .man-item-content {
  margin-left: -25%;
}
.man-item-1 .man-item-img {
  transform: rotate(2.7deg);
}

.man-item-2 {
  margin-top: 10%;
}
@media (max-width: 1440.98px) {
  .man-item-2 {
    margin-top: auto;
  }
}
.man-item-2 .man-item-content {
  margin-left: -15%;
}
.man-item-2 .man-item-img {
  transform: rotate(-7deg);
}

.man-item-3 {
  margin-left: 6%;
}
@media (max-width: 1440.98px) {
  .man-item-3 {
    margin-left: 0;
  }
}
.man-item-3 .man-item-content {
  margin-right: -18%;
}
.man-item-3 .man-item-img {
  transform: rotate(4.7deg);
}

.man-item-4 {
  margin-top: 10%;
  margin-right: 5%;
}
.man-item-4 .man-item-content {
  margin-left: -8%;
}
.man-item-4 .man-item-img {
  transform: rotate(-6.5deg);
}

.man-item-5 {
  margin-left: 8%;
  margin-top: -10%;
}
.man-item-5 .man-item-content {
  margin-left: -30%;
}
.man-item-5 .man-item-img {
  transform: rotate(-7.2deg);
}

@media (max-width: 1440.98px) {
  .man-item-6 {
    margin-top: auto;
  }
}
.man-item-6 .man-item-content {
  margin-right: -15%;
}
.man-item-6 .man-item-img {
  transform: rotate(7.7deg);
}

@media (max-width: 576.98px) {
  .man-item {
    margin: 0;
  }
}

@media (max-width: 576.98px) {
  .man-item-content {
    margin: 0 !important;
  }
}

@media (max-width: 576.98px) {
  .man-item-1 .man-item-img,
  .man-item-3 .man-item-img,
  .man-item-5 .man-item-img {
    margin-left: -20%;
  }
}

@media (max-width: 576.98px) {
  .man-item-2 .man-item-img,
  .man-item-4 .man-item-img,
  .man-item-6 .man-item-img {
    margin-right: -20%;
  }
}

@media (max-width: 576.98px) {
  .man-item-2,
  .man-item-4,
  .man-item-6 {
    padding-top: 30%;
  }
}

@media (max-width: 576.98px) {
  .man-item-1,
  .man-item-3,
  .man-item-5 {
    margin-bottom: auto !important;
  }
}

@media (max-width: 1440.98px) {
  .article-page .title-item {
    padding-top: var(--84);
    padding-bottom: var(--60);
  }
}
.article-page .title-bg-d {
  display: block;
}
@media (max-width: 1440.98px) {
  .article-page .title-bg-d {
    display: none;
  }
}
@media (max-width: 576.98px) {
  .article-page .title-bg-d {
    display: none;
  }
}
.article-page .title-bg-l {
  display: none;
}
@media (max-width: 1440.98px) {
  .article-page .title-bg-l {
    display: block;
  }
}
@media (max-width: 576.98px) {
  .article-page .title-bg-l {
    display: none;
  }
}
.article-page .title-bg-m {
  display: none;
}
@media (max-width: 576.98px) {
  .article-page .title-bg-m {
    display: block;
  }
}
@media (max-width: 576.98px) {
  .article-page .title {
    min-height: var(--app-height);
    display: flex;
    flex-direction: column;
    justify-content: end;
  }
}
.article-page .title-bg::after {
  display: none;
}
.article-page .title-bg img {
  -o-object-position: center;
     object-position: center;
}
@media (max-width: 576.98px) {
  .article-page .title-item {
    padding: var(--30) 0;
    text-align: center !important;
    min-height: unset;
  }
  .article-page .title-item::before {
    width: calc(100% + var(--40));
    left: var(---20);
  }
  .article-page .title-item .pl-30 {
    padding-left: 0;
  }
}

@media (max-width: 1440.98px) {
  .article-page .title-item h1 {
    font-size: var(--60);
  }
}
@media (max-width: 576.98px) {
  .article-page .title-item h1 {
    font-size: var(--30);
    line-height: 120%;
    margin-bottom: var(--18);
  }
}

@media (max-width: 1440.98px) {
  .article-page.article-4 .title-item h1 {
    font-size: calc(var(--52) - var(--1));
    line-height: 110%;
    margin-left: var(---10);
  }
}
@media (max-width: 576.98px) {
  .article-page.article-4 .title-item h1 {
    font-size: var(--30);
  }
}

.article-page .introtext {
  position: relative;
  z-index: 1;
}
@media (max-width: 1440.98px) {
  .article-page .introtext {
    margin-bottom: calc(var(--112) - var(--12));
  }
}
@media (max-width: 576.98px) {
  .article-page .introtext {
    margin-bottom: calc(var(--52) - var(--2));
    padding-top: calc(var(--52) - var(--2));
    padding-bottom: calc(var(--52) - var(--2));
  }
}
@media (max-width: 576.98px) {
  .article-page .introtext-inner {
    padding: var(--24) 0;
  }
}
.article-page .introtext-inner p {
  font-size: var(--22);
}
@media (max-width: 576.98px) {
  .article-page .introtext-inner p {
    text-align: left;
    line-height: 120%;
    font-size: calc(var(--18) - var(--1));
  }
}
.article-page .introtext-brace {
  left: var(---20);
  right: var(---20);
  width: calc(100% + var(--40));
}
@media (max-width: 576.98px) {
  .article-page .introtext-brace-item {
    border: none;
    width: 100%;
    right: unset;
    left: unset;
    height: var(--2);
    background-color: var(--yellow);
  }
  .article-page .introtext-brace-item:first-child {
    bottom: 0;
    top: unset;
  }
  .article-page .introtext-brace-item::before {
    width: 100%;
  }
}

@media (max-width: 1440.98px) {
  .article-page .subtitle {
    margin-bottom: var(--80);
  }
}
@media (max-width: 767.98px) {
  .article-page .subtitle {
    margin-bottom: var(--40);
  }
}
@media (max-width: 576.98px) {
  .article-page .subtitle-item .h2 {
    font-size: var(--24);
    line-height: var(--24);
  }
}
@media (max-width: 1440.98px) {
  .article-page .subtitle-item .h2::after {
    bottom: var(---10);
  }
}

@media (max-width: 576.98px) {
  .article-page .text-block {
    padding: var(--12) var(--10);
  }
}
.article-page .text-block p {
  font-size: calc(var(--18) - var(--1));
}
@media (max-width: 1440.98px) {
  .article-page .text-block p {
    font-size: calc(var(--18) - var(--1));
    line-height: 135%;
  }
}
@media (max-width: 576.98px) {
  .article-page .text-block p {
    font-size: calc(var(--16) - var(--1));
    line-height: 115%;
  }
}

@media (max-width: 576.98px) {
  .quote:before {
    width: calc(100% + var(--40));
    border-width: var(--1);
  }
}
.quote .cardstext {
  margin-bottom: var(--24);
}
@media (max-width: 1440.98px) {
  .quote .cardstext {
    margin-bottom: var(--18);
    font-size: calc(var(--18) + var(--1));
  }
}
@media (max-width: 576.98px) {
  .quote .cardstext {
    font-size: calc(var(--14) + var(--1));
  }
}
@media (max-width: 1440.98px) {
  .quote .note {
    margin-bottom: var(--4);
  }
}
@media (max-width: 576.98px) {
  .quote .note {
    font-size: var(--12);
  }
}
@media (max-width: 576.98px) {
  .quote .note-2 {
    font-size: var(--10);
    width: calc(var(--327) - var(--12));
  }
}
@media (max-width: 1440.98px) {
  .quote-marks-item {
    width: var(--56);
  }
}
.quote-content {
  padding: var(--40) var(--30);
}
@media (max-width: 576.98px) {
  .quote-content {
    padding: var(--40) 0;
  }
}

@media (max-width: 576.98px) {
  .row > *:last-child .quote {
    padding-left: var(--20);
  }
}
@media (max-width: 1440.98px) {
  .row > *:last-child .quote .quote-marks-item:first-child {
    margin-left: var(--30);
  }
}
@media (max-width: 576.98px) {
  .row > *:last-child .quote .quote-marks-item:first-child {
    margin-left: var(--20);
  }
}

@media (max-width: 576.98px) {
  .row > *:first-child .quote {
    padding-right: var(--10);
  }
}
@media (max-width: 1440.98px) {
  .row > *:first-child .quote .quote-marks-item:last-child {
    margin-right: var(--30);
  }
}
@media (max-width: 576.98px) {
  .row > *:first-child .quote .quote-marks-item:last-child {
    margin-right: var(--10);
  }
}

.article-1 .title .title-bg img {
  -o-object-position: top;
     object-position: top;
}
@media (max-width: 576.98px) {
  .article-1 .title .title-bg img {
    -o-object-position: 10%;
       object-position: 10%;
  }
}

.article-3 .title .title-bg img {
  -o-object-position: top;
     object-position: top;
}

.article-3 .title .title-bg img {
  -o-object-position: top;
     object-position: top;
}
@media (max-width: 1440.98px) {
  .article-3 .title .title-bg img {
    -o-object-position: 30%;
       object-position: 30%;
  }
}

@media (max-width: 576.98px) {
  .article-5 .title .title-bg img {
    -o-object-position: 29%;
       object-position: 29%;
  }
}

.article-1 .img-item-1-1 {
  width: 76%;
  transform: rotate(-4.4deg);
}
@media (max-width: 1440.98px) {
  .article-1 .img-item-1-1 {
    width: 100%;
  }
}
@media (max-width: 576.98px) {
  .article-1 .img-item-1-1 {
    width: 110%;
    margin-top: var(--32);
    margin-bottom: var(--32);
    transform: rotate(-5.3deg);
  }
}
.article-1 .img-item-1-2 {
  left: 0%;
  top: -16%;
  width: 67.7%;
  transform: rotate(0deg);
}
@media (max-width: 1440.98px) {
  .article-1 .img-item-1-2 {
    width: 90%;
  }
}
@media (max-width: 576.98px) {
  .article-1 .img-item-1-2 {
    width: 110%;
    margin-top: var(--32);
    margin-bottom: var(--32);
  }
}
.article-1 .img-item-1-3 {
  right: -7%;
  top: 0%;
  width: 95.5%;
  transform: rotate(4.5deg);
}
@media (max-width: 1440.98px) {
  .article-1 .img-item-1-3 {
    width: 120%;
    right: -20%;
  }
}
@media (max-width: 576.98px) {
  .article-1 .img-item-1-3 {
    width: 120%;
    right: unset;
    left: 5%;
    margin-top: var(--40);
    margin-bottom: var(--40);
    transform: rotate(1.5deg);
  }
}
.article-1 .img-item-1-4 {
  left: 0%;
  top: -3%;
  width: 60.3%;
  transform: rotate(-16deg);
}
@media (max-width: 1440.98px) {
  .article-1 .img-item-1-4 {
    width: 75%;
  }
}
@media (max-width: 576.98px) {
  .article-1 .img-item-1-4 {
    width: 74%;
    top: -10%;
    left: -18%;
    z-index: -1;
    margin-bottom: -50%;
  }
}
.article-1 .img-item-1-5 {
  left: 13%;
  top: 30%;
  width: 107%;
  transform: rotate(2.5deg);
  z-index: -2;
}
@media (max-width: 1440.98px) {
  .article-1 .img-item-1-5 {
    width: 135%;
    left: -15%;
    top: 45%;
  }
}
@media (max-width: 576.98px) {
  .article-1 .img-item-1-5 {
    width: 128%;
    top: 30%;
    right: -25%;
    left: unset;
    position: absolute;
    z-index: -1;
    transform: rotate(-6deg);
    margin-bottom: -20%;
  }
}
.article-1 .img-item-1-6 {
  right: 15%;
  top: -21%;
  width: 50.7%;
  transform: rotate(15deg);
  z-index: -2;
}
@media (max-width: 1440.98px) {
  .article-1 .img-item-1-6 {
    width: 64%;
    top: unset;
  }
}
@media (max-width: 576.98px) {
  .article-1 .img-item-1-6 {
    width: 85%;
    right: -5%;
    margin-bottom: var(--32);
    transform: rotate(8.3deg);
  }
}
.article-1 .img-item-2-1 {
  left: 20%;
  top: -2%;
  width: 47.2%;
  transform: rotate(-12deg);
}
@media (max-width: 1440.98px) {
  .article-1 .img-item-2-1 {
    width: 55%;
    top: unset;
  }
}
@media (max-width: 576.98px) {
  .article-1 .img-item-2-1 {
    left: unset;
    width: 72%;
    transform: rotate(-5.9deg);
  }
}
.article-1 .img-item-3-1 {
  right: 0%;
  top: -5%;
  width: 96.2%;
  transform: rotate(-12deg);
}
@media (max-width: 1440.98px) {
  .article-1 .img-item-3-1 {
    width: 120%;
    top: unset;
    right: -10%;
  }
}
@media (max-width: 576.98px) {
  .article-1 .img-item-3-1 {
    width: 115%;
    right: 0;
    transform: rotate(-13deg);
  }
}

.article-3 .img-item-1-1 {
  left: 0%;
  top: 0%;
  width: 44%;
  transform: rotate(-4.6deg);
}
@media (max-width: 1440.98px) {
  .article-3 .img-item-1-1 {
    width: 66%;
  }
}
@media (max-width: 576.98px) {
  .article-3 .img-item-1-1 {
    width: 77%;
    margin-bottom: var(---30);
  }
}
.article-3 .img-item-1-2 {
  left: 20%;
  top: 28%;
  width: 92%;
  transform: rotate(9.6deg);
  z-index: 2;
}
@media (max-width: 1440.98px) {
  .article-3 .img-item-1-2 {
    width: 100%;
    top: 41%;
    left: 0;
  }
}
@media (max-width: 576.98px) {
  .article-3 .img-item-1-2 {
    width: 125%;
    transform: rotate(5.7deg);
    margin-top: var(---48);
    margin-bottom: var(---30);
  }
}
.article-3 .img-item-2-1 {
  left: 10%;
  top: 10%;
  width: 58%;
  transform: rotate(-19deg);
  z-index: -1;
}
@media (max-width: 1440.98px) {
  .article-3 .img-item-2-1 {
    width: 70%;
    right: 10%;
    top: 10%;
    left: unset;
  }
}
@media (max-width: 576.98px) {
  .article-3 .img-item-2-1 {
    width: 80%;
    transform: rotate(-9.7deg);
    margin-bottom: var(---48);
  }
}
.article-3 .img-item-3-1 {
  left: -3%;
  top: 8%;
  width: 88%;
  transform: rotate(10deg);
}
@media (max-width: 1440.98px) {
  .article-3 .img-item-3-1 {
    width: 100%;
    left: unset;
    top: 2%;
    right: 10%;
  }
}
@media (max-width: 576.98px) {
  .article-3 .img-item-3-1 {
    width: 116%;
    transform: rotate(6deg);
    margin-bottom: var(--32);
  }
}
.article-3 .img-item-3-2 {
  right: 15%;
  top: -10%;
  width: 72%;
  transform: rotate(-3deg);
}
@media (max-width: 1440.98px) {
  .article-3 .img-item-3-2 {
    width: 90%;
    right: unset;
    left: 0;
    top: 0;
  }
}
@media (max-width: 576.98px) {
  .article-3 .img-item-3-2 {
    width: 102%;
    transform: rotate(-5.8deg);
    margin-top: var(--32);
    margin-bottom: var(--32);
  }
}
.article-3 .img-item-4-1 {
  left: 15%;
  top: 0%;
  width: 51%;
  transform: rotate(-10deg);
}
@media (max-width: 1440.98px) {
  .article-3 .img-item-4-1 {
    width: 66%;
    top: unset;
    left: unset;
  }
}
@media (max-width: 576.98px) {
  .article-3 .img-item-4-1 {
    width: 83%;
    transform: rotate(-7.5deg);
    margin-top: var(---24);
    margin-bottom: var(--32);
  }
}
@media (max-width: 576.98px) {
  .article-3 .img-item {
    right: unset;
    left: unset;
    z-index: -1;
  }
}

.article-4 .img-item {
  z-index: -1;
}
.article-4 .img-item-1-1 {
  top: 0%;
  right: 0%;
  width: 91%;
  transform: rotate(3.7deg);
}
@media (max-width: 1440.98px) {
  .article-4 .img-item-1-1 {
    top: 13%;
    right: -15%;
    width: 110%;
  }
}
@media (max-width: 576.98px) {
  .article-4 .img-item-1-1 {
    right: unset;
    width: 92%;
    margin-bottom: var(--32);
    margin-top: var(--32);
  }
}
.article-4 .img-item-1-2 {
  top: 0%;
  left: 0%;
  width: 103%;
  transform: rotate(-3.2deg);
}
@media (max-width: 1440.98px) {
  .article-4 .img-item-1-2 {
    top: 13%;
    left: -30%;
    width: 128%;
    transform: rotate(-10deg);
  }
}
@media (max-width: 576.98px) {
  .article-4 .img-item-1-2 {
    left: unset;
    width: 115%;
    transform: rotate(-4.6deg);
    margin-bottom: var(--20);
    margin-top: var(--20);
  }
}
.article-4 .img-item-2-1 {
  top: 0%;
  right: 0%;
  width: 91%;
  transform: rotate(8deg);
}
@media (max-width: 1440.98px) {
  .article-4 .img-item-2-1 {
    top: 13%;
    right: -20%;
    width: 115%;
  }
}
@media (max-width: 576.98px) {
  .article-4 .img-item-2-1 {
    right: unset;
    width: 100%;
    transform: rotate(4.3deg);
    margin-bottom: var(--20);
    margin-top: var(--32);
  }
}
.article-4 .img-item-2-2 {
  top: 0%;
  left: 0%;
  width: 90%;
  transform: rotate(6.8deg);
}
@media (max-width: 1440.98px) {
  .article-4 .img-item-2-2 {
    top: 13%;
    left: -15%;
    width: 113%;
    transform: rotate(26deg);
  }
}
@media (max-width: 576.98px) {
  .article-4 .img-item-2-2 {
    left: unset;
    width: 128%;
    transform: rotate(8.5deg);
    margin-bottom: var(--32);
    margin-top: var(--32);
  }
}
.article-4 .img-item-3-1 {
  top: unset;
  right: 0%;
  width: 101%;
  transform: rotate(-9deg);
}
@media (max-width: 1440.98px) {
  .article-4 .img-item-3-1 {
    top: unset;
    right: -15%;
    width: 127%;
  }
}
@media (max-width: 576.98px) {
  .article-4 .img-item-3-1 {
    right: unset;
    width: 127%;
    transform: rotate(-3.5deg);
    margin-top: calc(var(---48) - var(--52));
    margin-bottom: calc(var(---40) - var(--20));
  }
}
.article-4 .img-item-3-2 {
  top: 0%;
  left: 0%;
  width: 88%;
  transform: rotate(-2.3deg);
}
@media (max-width: 1440.98px) {
  .article-4 .img-item-3-2 {
    top: 13%;
    left: -10%;
    width: 111%;
    transform: rotate(1deg);
  }
}
@media (max-width: 576.98px) {
  .article-4 .img-item-3-2 {
    left: unset;
    width: 136%;
    margin-bottom: var(--20);
    margin-top: var(--20);
  }
}
.article-4 .img-item-3-3 {
  top: 13%;
  right: 0%;
  width: 78%;
  transform: rotate(-6deg);
}
@media (max-width: 1440.98px) {
  .article-4 .img-item-3-3 {
    top: 0%;
    width: 97%;
  }
}
@media (max-width: 576.98px) {
  .article-4 .img-item-3-3 {
    right: unset;
    width: 100%;
    transform: rotate(-1.6deg);
    margin-bottom: var(--32);
    margin-top: var(--32);
  }
}
.article-4 .img-item-4-1 {
  top: 0%;
  left: 0%;
  width: 80%;
  transform: rotate(6deg);
}
@media (max-width: 1440.98px) {
  .article-4 .img-item-4-1 {
    top: 0%;
    left: -7.6%;
    width: 101%;
  }
}
@media (max-width: 576.98px) {
  .article-4 .img-item-4-1 {
    top: 0%;
    left: unset;
    width: 105%;
    transform: rotate(4.6deg);
    margin-bottom: var(--32);
    margin-top: var(--32);
  }
}
.article-4 .img-item-4-2 {
  top: 0%;
  right: 0%;
  width: 100%;
  transform: rotate(-6.5deg);
}
@media (max-width: 1440.98px) {
  .article-4 .img-item-4-2 {
    top: 0%;
    right: -30%;
    width: 125%;
  }
}
@media (max-width: 576.98px) {
  .article-4 .img-item-4-2 {
    right: -5%;
    width: 110%;
    margin-bottom: var(--32);
    margin-top: var(--32);
  }
}

.article-5 .img-item-1 {
  left: 0;
  top: 13%;
  width: 98%;
  transform: rotate(5deg);
}
@media (max-width: 1440.98px) {
  .article-5 .img-item-1 {
    top: 10%;
    left: unset;
    right: 0;
    width: 118%;
    transform: rotate(14deg);
  }
}
@media (max-width: 576.98px) {
  .article-5 .img-item-1 {
    width: 107%;
    margin-bottom: var(--24);
    transform: rotate(3deg);
    left: -5%;
  }
}
.article-5 .img-item-2-1 {
  right: 3%;
  top: 17.8%;
  width: 91%;
  transform: rotate(-12deg);
}
@media (max-width: 1440.98px) {
  .article-5 .img-item-2-1 {
    width: 100%;
    top: 25%;
    right: unset;
    left: 10%;
  }
}
@media (max-width: 576.98px) {
  .article-5 .img-item-2-1 {
    width: 105%;
    margin-right: -15%;
    left: unset;
    margin-bottom: var(--32);
    margin-top: var(--32);
    transform: rotate(-11deg);
  }
}
.article-5 .img-item-2-2 {
  right: 6%;
  top: 14.6%;
  width: 66.2%;
  transform: rotate(16deg);
}
@media (max-width: 1440.98px) {
  .article-5 .img-item-2-2 {
    width: 85%;
    top: 25%;
    right: unset;
    left: 15%;
    transform: rotate(14deg);
  }
}
.article-5 .img-item-2-3 {
  left: 0%;
  top: 38.95%;
  width: 72%;
  transform: rotate(-0.3deg);
}
@media (max-width: 1440.98px) {
  .article-5 .img-item-2-3 {
    width: 120%;
    left: unset;
    right: -10%;
    top: 10%;
  }
}
@media (max-width: 576.98px) {
  .article-5 .img-item-2-3 {
    width: 150%;
    transform: rotate(-14deg);
  }
}
.article-5 .img-item-3-1 {
  right: 0%;
  top: 9%;
  width: 100%;
  transform: rotate(0deg);
}
@media (max-width: 1440.98px) {
  .article-5 .img-item-3-1 {
    width: 96%;
    top: unset;
    transform: rotate(6.6deg);
  }
}
@media (max-width: 576.98px) {
  .article-5 .img-item-3-1 {
    width: 100%;
    margin-bottom: var(--20);
    transform: rotate(2.2deg);
  }
}
.article-5 .img-item-3-2 {
  left: 5%;
  top: 5%;
  width: 67%;
  transform: rotate(-31.5deg);
}
@media (max-width: 1440.98px) {
  .article-5 .img-item-3-2 {
    width: 105%;
    top: -5%;
    left: unset;
    right: 0;
    transform: rotate(-17deg);
  }
}
@media (max-width: 576.98px) {
  .article-5 .img-item-3-2 {
    width: 115%;
    margin-top: -15%;
    margin-bottom: -5%;
    z-index: -1;
    transform: rotate(-5deg);
  }
}
.article-5 .img-item-4-1 {
  left: 0%;
  top: 5%;
  width: 83%;
  transform: rotate(-15deg);
}
@media (max-width: 1440.98px) {
  .article-5 .img-item-4-1 {
    width: 100%;
    top: 10%;
    transform: rotate(-10deg);
  }
}
@media (max-width: 576.98px) {
  .article-5 .img-item-4-1 {
    transform: rotate(-2deg);
    width: 110%;
    margin-top: var(--32);
    margin-bottom: var(--32);
  }
}
.article-5 .img-item-4-2 {
  right: 0%;
  top: 54%;
  width: 60%;
  z-index: -1;
  transform: rotate(12.8deg);
}
@media (max-width: 1440.98px) {
  .article-5 .img-item-4-2 {
    top: 20%;
    width: 100%;
    transform: rotate(12deg);
  }
}
@media (max-width: 576.98px) {
  .article-5 .img-item-4-2 {
    width: 110%;
    margin-bottom: var(--20);
    margin-top: var(--20);
    transform: rotate(5deg);
  }
}

.article-6 .img-item-1-1 {
  left: 0%;
  width: 83%;
  transform: rotate(-12deg);
}
@media (max-width: 1440.98px) {
  .article-6 .img-item-1-1 {
    width: 90%;
    transform: rotate(-20deg);
  }
}
@media (max-width: 576.98px) {
  .article-6 .img-item-1-1 {
    width: 90%;
    left: 0;
    right: unset;
    margin-top: var(--30);
    margin-bottom: var(--30);
    transform: rotate(-10deg);
  }
}
.article-6 .img-item-1-2 {
  left: 0%;
  width: 93.7%;
  transform: rotate(-10deg);
}
@media (max-width: 1440.98px) {
  .article-6 .img-item-1-2 {
    width: 100%;
    transform: rotate(13deg);
  }
}
@media (max-width: 576.98px) {
  .article-6 .img-item-1-2 {
    width: 100%;
    margin-top: var(--30);
    margin-bottom: var(--30);
    transform: rotate(4deg);
  }
}
.article-6 .img-item-2-1 {
  left: 0%;
  top: -10%;
  width: 81.5%;
  transform: rotate(-6deg);
  z-index: -2;
}
@media (max-width: 1440.98px) {
  .article-6 .img-item-2-1 {
    width: 84%;
  }
}
@media (max-width: 576.98px) {
  .article-6 .img-item-2-1 {
    width: 110%;
    margin-top: calc(var(---48) + var(---20));
    margin-bottom: var(---24);
  }
}
.article-6 .img-item-2-2 {
  right: 9.8%;
  top: 34.6%;
  width: 59%;
  transform: rotate(8deg);
}
@media (max-width: 1440.98px) {
  .article-6 .img-item-2-2 {
    width: 65%;
    top: 45%;
    right: unset;
    left: 10%;
  }
}
@media (max-width: 576.98px) {
  .article-6 .img-item-2-2 {
    width: 81%;
    margin-bottom: -25%;
    z-index: -1;
    transform: rotate(6deg);
  }
}
.article-6 .img-item-2-3 {
  left: -5%;
  width: 93%;
  transform: rotate(-4deg);
  z-index: -2;
}
@media (max-width: 1440.98px) {
  .article-6 .img-item-2-3 {
    width: 96%;
    left: 0;
    transform: rotate(-7deg);
  }
}
@media (max-width: 576.98px) {
  .article-6 .img-item-2-3 {
    width: 93%;
    margin-top: var(--48);
    margin-bottom: var(--30);
    transform: rotate(-4.5deg);
  }
}
.article-6 .img-item-3-1 {
  width: 116%;
  transform: rotate(9deg);
}
@media (max-width: 1440.98px) {
  .article-6 .img-item-3-1 {
    width: 115%;
    right: -10%;
  }
}
@media (max-width: 576.98px) {
  .article-6 .img-item-3-1 {
    width: 116%;
    right: unset;
    margin-top: -25%;
    margin-bottom: -11%;
    transform: rotate(1deg);
  }
}
.article-6 .img-item-3-2 {
  right: 0%;
  top: -2%;
  width: 108%;
  transform: rotate(0deg);
}
@media (max-width: 1440.98px) {
  .article-6 .img-item-3-2 {
    width: 126%;
    top: 5%;
    right: 5%;
  }
}
@media (max-width: 576.98px) {
  .article-6 .img-item-3-2 {
    width: 146%;
    right: unset;
    margin-top: -10%;
    margin-bottom: var(--30);
    transform: rotate(20deg);
  }
}

@media (max-width: 576.98px) {
  .article-7 .title-bg .m-none {
    display: none;
  }
}
@media (max-width: 1440.98px) {
  .article-7 .introtext {
    margin-bottom: var(--160);
  }
}
@media (max-width: 576.98px) {
  .article-7 .introtext {
    margin-bottom: var(--60);
  }
}
.article-7 .img-item-1-1 {
  left: 0;
  top: 3%;
  width: 67.4%;
  transform: rotate(6deg);
}
@media (max-width: 1440.98px) {
  .article-7 .img-item-1-1 {
    width: 86%;
    top: -10%;
    transform: rotate(-8deg);
  }
}
@media (max-width: 576.98px) {
  .article-7 .img-item-1-1 {
    width: 85%;
    left: var(---20);
    transform: rotate(-6deg);
  }
}
.article-7 .img-item-1-2 {
  right: -12%;
  top: 36%;
  width: 56.86%;
  transform: rotate(-4deg);
  z-index: -1;
}
@media (max-width: 1440.98px) {
  .article-7 .img-item-1-2 {
    width: 80%;
    right: var(---48);
    top: 43%;
    z-index: 1;
    transform: rotate(-15deg);
  }
}
@media (max-width: 576.98px) {
  .article-7 .img-item-1-2 {
    width: 85%;
    margin-top: -15%;
  }
}
.article-7 .img-item-2-1 {
  left: -5%;
  top: 7%;
  width: 57.6%;
  transform: rotate(-20deg);
  z-index: -1;
}
@media (max-width: 1440.98px) {
  .article-7 .img-item-2-1 {
    transform: rotate(-5deg);
    z-index: 1;
    width: 90%;
    top: 10%;
    left: unset;
    right: 5%;
  }
}
@media (max-width: 576.98px) {
  .article-7 .img-item-2-1 {
    width: 95%;
    right: unset;
    margin-top: var(--32);
  }
}
.article-7 .img-item-2-2 {
  right: 0%;
  top: 27%;
  width: 77%;
  transform: rotate(-8deg);
}
@media (max-width: 1440.98px) {
  .article-7 .img-item-2-2 {
    transform: rotate(17deg);
    width: 73%;
    top: 50%;
    right: 20%;
  }
}
@media (max-width: 576.98px) {
  .article-7 .img-item-2-2 {
    right: unset;
    width: 75%;
    margin-top: -5%;
    margin-bottom: 10%;
  }
}
.article-7 .img-item-3-1 {
  left: 10%;
  top: 6%;
  width: 83.3%;
  transform: rotate(4.5deg);
}
@media (max-width: 1440.98px) {
  .article-7 .img-item-3-1 {
    transform: rotate(6.5deg);
    width: 92%;
    top: 15%;
    left: -3%;
  }
}
@media (max-width: 576.98px) {
  .article-7 .img-item-3-1 {
    transform: rotate(4.4deg);
    width: 90%;
    left: unset;
    margin-bottom: var(--24);
    margin-top: var(--24);
  }
}
.article-7 .img-item-3-2 {
  left: 0%;
  top: 57%;
  width: 58.82%;
  transform: rotate(-18.5deg);
  z-index: -1;
}
@media (max-width: 1440.98px) {
  .article-7 .img-item-3-2 {
    width: 80%;
    top: 60%;
    left: unset;
    right: 0;
  }
}
@media (max-width: 576.98px) {
  .article-7 .img-item-3-2 {
    transform: rotate(-13deg);
    margin-top: var(--24);
    width: 100%;
  }
}

@media (max-width: 576.98px) {
  .article-page .img-wrap {
    margin: 0 var(---20);
    width: calc(100% + var(--40));
  }
  .article-page .img-item {
    position: relative;
    top: unset;
  }
}

.article-page .title-bg {
  z-index: -1;
}

.smoke-wrapper {
  top: calc(var(--160) * -1);
}
.smoke-wrapper-right {
  transform: translateX(15%);
  right: 0;
}
.smoke-wrapper-left {
  left: 0;
  transform: translateX(-15%);
}
.article-smoke-art-nav {
  display: none;
}

.article-1 .article-smoke-1 {
  width: 58%;
  left: 0;
  top: 0;
  opacity: 0.6;
  transform: translate(-40%, -11%);
}
@media (max-width: 1440.98px) {
  .article-1 .article-smoke-1 {
    width: 76%;
    transform: translate(-27%, -11%);
  }
}
@media (max-width: 576.98px) {
  .article-1 .article-smoke-1 {
    width: 190%;
    transform: translate(0%, -10%);
  }
}
.article-1 .article-smoke-1:before {
  padding-top: 200%;
}
.article-1 .article-smoke-2 {
  width: 93%;
  bottom: 0;
  right: 0;
  opacity: 0.6;
}
@media (max-width: 1440.98px) {
  .article-1 .article-smoke-2 {
    width: 118%;
    right: -8%;
    bottom: 20%;
  }
}
@media (max-width: 576.98px) {
  .article-1 .article-smoke-2 {
    width: 300%;
    bottom: 35%;
    right: unset;
    left: -30%;
  }
}
.article-1 .article-smoke-2:before {
  padding-top: 120%;
}
@media (max-width: 576.98px) {
  .article-1 .article-smoke-2 {
    padding-top: 115%;
  }
}
.article-1 .article-smoke-3 {
  width: 70%;
  left: 0;
  top: 0;
  opacity: 0.6;
  transform: translate(-46%, -8%);
}
@media (max-width: 1440.98px) {
  .article-1 .article-smoke-3 {
    width: 95%;
    transform: translate(-50%, -28%);
  }
}
@media (max-width: 576.98px) {
  .article-1 .article-smoke-3 {
    width: 266%;
    transform: translate(-28%, -10%);
  }
}
.article-1 .article-smoke-3:before {
  padding-top: 130%;
}
.article-1 .article-smoke-4 {
  width: 67%;
  top: 0;
  right: 0;
  opacity: 0.6;
  transform: translate(23%, -50%);
}
@media (max-width: 1440.98px) {
  .article-1 .article-smoke-4 {
    width: 90%;
    transform: translate(38%, -50%);
  }
}
@media (max-width: 576.98px) {
  .article-1 .article-smoke-4 {
    width: 200%;
    transform: translate(-30%, -3%);
    right: unset;
    left: 0;
  }
}
.article-1 .article-smoke-4:before {
  padding-top: 130%;
}
.article-1 .article-smoke-5 {
  width: 65%;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  transform: translate(-14%, 13%);
}
@media (max-width: 1440.98px) {
  .article-1 .article-smoke-5 {
    width: 75%;
    transform: translate(-14%, 13%);
  }
}
@media (max-width: 576.98px) {
  .article-1 .article-smoke-5 {
    width: 190%;
    top: unset;
    bottom: 0;
    transform: translate(-20%, 50%);
  }
}
.article-1 .article-smoke-5:before {
  padding-top: 150%;
}

@media (max-width: 576.98px) {
  .article-3 .article-smoke-art-nav {
    display: flex;
    width: 250%;
    top: -30%;
    left: -30%;
  }
  .article-3 .article-smoke-art-nav:before {
    padding-top: 148.0435%;
  }
}
.article-3 .article-smoke-1 {
  width: 71.875%;
  opacity: 0.4;
  transform: translateX(15%) scaleX(-1);
}
@media (max-width: 1440.98px) {
  .article-3 .article-smoke-1 {
    width: 86.8056%;
  }
}
@media (max-width: 576.98px) {
  .article-3 .article-smoke-1 {
    width: 187.7333%;
  }
}
.article-3 .article-smoke-1:before {
  padding-top: 148.0435%;
}
.article-3 .article-smoke-2 {
  width: 103.125%;
  opacity: 0.4;
  left: -25%;
}
@media (max-width: 1440.98px) {
  .article-3 .article-smoke-2 {
    width: 137.5%;
  }
}
@media (max-width: 576.98px) {
  .article-3 .article-smoke-2 {
    width: 247.2%;
  }
}
.article-3 .article-smoke-2:before {
  padding-top: 133.3333%;
}
.article-3 .article-smoke-3 {
  width: 96.3021%;
  opacity: 0.4;
  top: 30%;
  right: -25%;
}
@media (max-width: 1440.98px) {
  .article-3 .article-smoke-3 {
    width: 128.4028%;
  }
}
@media (max-width: 576.98px) {
  .article-3 .article-smoke-3 {
    width: 340.2667%;
    top: 30%;
  }
}
.article-3 .article-smoke-3:before {
  padding-top: 119.7945%;
}
.article-3 .article-smoke-4 {
  width: 63.8021%;
  opacity: 0.4;
}
@media (max-width: 1440.98px) {
  .article-3 .article-smoke-4 {
    width: 85.0694%;
  }
}
@media (max-width: 576.98px) {
  .article-3 .article-smoke-4 {
    width: 138.9333%;
  }
}
.article-3 .article-smoke-4:before {
  padding-top: 216.7347%;
}
.article-3 .article-smoke-5 {
  width: 75.8333%;
  opacity: 0.4;
}
@media (max-width: 1440.98px) {
  .article-3 .article-smoke-5 {
    width: 101.1111%;
  }
}
@media (max-width: 576.98px) {
  .article-3 .article-smoke-5 {
    width: 240.8%;
    top: 20%;
  }
}
.article-3 .article-smoke-5:before {
  padding-top: 155.5632%;
}

.article-4 .article-smoke-1 {
  width: 93.9063%;
  opacity: 0.7;
}
.article-4 .article-smoke-1:before {
  padding-top: 155.5186%;
}
@media (max-width: 1440.98px) {
  .article-4 .article-smoke-1 {
    width: 120.6944%;
  }
}
@media (max-width: 576.98px) {
  .article-4 .article-smoke-1 {
    width: 292%;
    top: 20%;
    transform: translateX(-30%);
  }
}
.article-4 .article-smoke-2 {
  width: 89.1667%;
  opacity: 0.7;
  transform: translateX(-25%);
  top: 20%;
}
.article-4 .article-smoke-2:before {
  padding-top: 133.3528%;
}
@media (max-width: 1440.98px) {
  .article-4 .article-smoke-2 {
    width: 123.6111%;
  }
}
@media (max-width: 576.98px) {
  .article-4 .article-smoke-2 {
    width: 342.4%;
    top: 10%;
  }
}
.article-4 .article-smoke-3 {
  width: 95.9375%;
  opacity: 0.6;
  transform: translateX(15%) rotate(6.5deg);
}
.article-4 .article-smoke-3:before {
  padding-top: 133.3333%;
}
@media (max-width: 1440.98px) {
  .article-4 .article-smoke-3 {
    width: 127.9167%;
  }
}
@media (max-width: 576.98px) {
  .article-4 .article-smoke-3 {
    width: 263.7333%;
    transform: translateX(30%) rotate(-4.6deg);
  }
}
.article-4 .article-smoke-4 {
  display: none;
}
@media (max-width: 576.98px) {
  .article-4 .article-smoke-4 {
    display: flex;
    width: 262.1333%;
    opacity: 0.6;
    top: 30%;
    transform: translateX(-20%) rotate(6deg);
  }
  .article-4 .article-smoke-4::before {
    padding-top: 216.6836%;
  }
}
.article-4 .article-smoke-5 {
  width: 58.3854%;
  opacity: 0.4;
  top: -40%;
}
.article-4 .article-smoke-5:before {
  padding-top: 216.6815%;
}
@media (max-width: 1440.98px) {
  .article-4 .article-smoke-5 {
    width: 80.7639%;
  }
}
@media (max-width: 576.98px) {
  .article-4 .article-smoke-5 {
    width: 310.1333%;
    top: -10%;
  }
}
.article-4 .article-smoke-art-nav {
  width: 151.6667%;
  opacity: 0.7;
  display: flex;
  top: 0;
  transform: translateX(40%) translateY(-15%) rotate(6.2deg);
}
.article-4 .article-smoke-art-nav:before {
  padding-top: 133.3448%;
}
@media (max-width: 1440.98px) {
  .article-4 .article-smoke-art-nav {
    width: 202.2222%;
  }
}
@media (max-width: 576.98px) {
  .article-4 .article-smoke-art-nav {
    width: 310.1333%;
  }
}

.article-5 .article-smoke-1 {
  width: 73.2813%;
  opacity: 0.7;
  top: 30%;
}
.article-5 .article-smoke-1:before {
  padding-top: 155.5082%;
}
@media (max-width: 1440.98px) {
  .article-5 .article-smoke-1 {
    width: 103.9583%;
    top: -10%;
    transform: translateX(-5%);
    right: unset;
    left: 0;
  }
}
@media (max-width: 576.98px) {
  .article-5 .article-smoke-1 {
    width: 200.2667%;
  }
}
.article-5 .article-smoke-2 {
  opacity: 0.5;
  display: none;
}
.article-5 .article-smoke-2:before {
  padding-top: 133.2875%;
}
@media (max-width: 1440.98px) {
  .article-5 .article-smoke-2 {
    display: flex;
    width: 100.9722%;
    top: 15%;
  }
}
@media (max-width: 576.98px) {
  .article-5 .article-smoke-2 {
    width: 387.7333%;
    top: 0;
    transform: translateX(35%);
  }
}
.article-5 .article-smoke-3 {
  width: 80.5729%;
  opacity: 0.5;
  transform: translateX(-20%) translateY(-70%);
}
.article-5 .article-smoke-3:before {
  padding-top: 148.0931%;
}
@media (max-width: 1440.98px) {
  .article-5 .article-smoke-3 {
    width: 107.4306%;
    opacity: 0.3;
    transform: translateX(-5%) translateY(-25%);
  }
}
@media (max-width: 576.98px) {
  .article-5 .article-smoke-3 {
    width: 326.1333%;
    opacity: 0.5;
    transform: translateX(-20%) translateY(5%);
  }
}
.article-5 .article-smoke-4 {
  width: 105.6771%;
  opacity: 0.8;
  transform: translateX(-30%) translateY(-5%);
}
.article-5 .article-smoke-4:before {
  padding-top: 119.7634%;
}
@media (max-width: 1440.98px) {
  .article-5 .article-smoke-4 {
    width: 140.9028%;
    transform: translateX(-15%) translateY(-10%);
    opacity: 0.4;
  }
}
@media (max-width: 576.98px) {
  .article-5 .article-smoke-4 {
    width: 332.5333%;
    opacity: 0.6;
    transform: translateX(-35%) translateY(-10%);
  }
}
.article-5 .article-smoke-art-nav {
  opacity: 0.5;
  display: none;
}
.article-5 .article-smoke-art-nav:before {
  padding-top: 133.2962%;
}
@media (max-width: 1440.98px) {
  .article-5 .article-smoke-art-nav {
    display: flex;
    width: 124.7222%;
    transform: translateX(30%) translateY(-5%) rotate(-5deg);
  }
}
@media (max-width: 576.98px) {
  .article-5 .article-smoke-art-nav {
    width: 478.9333%;
    transform: translateX(40%) translateY(-10%) rotate(-5deg);
  }
}

.article-6 .article-smoke-1 {
  width: 57.8125%;
  opacity: 0.7;
  transform: translateX(20%) translateY(-3%);
}
.article-6 .article-smoke-1:before {
  padding-top: 155.5856%;
}
@media (max-width: 1440.98px) {
  .article-6 .article-smoke-1 {
    width: 82.0139%;
  }
}
@media (max-width: 576.98px) {
  .article-6 .article-smoke-1 {
    width: 375.7333%;
    transform: translateX(30%) translateY(-5%);
  }
}
.article-6 .article-smoke-2 {
  width: 60.2083%;
  opacity: 0.4;
  transform: translateX(-25%) translateY(-45%);
}
.article-6 .article-smoke-2:before {
  padding-top: 216.6955%;
}
@media (max-width: 1440.98px) {
  .article-6 .article-smoke-2 {
    width: 113.2639%;
    transform: translateX(-25%) translateY(-35%);
  }
}
@media (max-width: 576.98px) {
  .article-6 .article-smoke-2 {
    width: 208.5333%;
    transform: translateX(-25%) translateY(-15%);
  }
}
.article-6 .article-smoke-3 {
  width: 121.9271%;
  opacity: 0.5;
  transform: translateX(30%) translateY(-40%);
}
.article-6 .article-smoke-3:before {
  padding-top: 119.7779%;
}
@media (max-width: 1440.98px) {
  .article-6 .article-smoke-3 {
    width: 162.5694%;
    transform: translateX(0) translateY(-40%);
    right: unset;
    left: 0;
  }
}
@media (max-width: 576.98px) {
  .article-6 .article-smoke-3 {
    width: 340.5333%;
    transform: translateX(25%) translateY(-100%);
    left: unset;
    right: 0;
  }
}
.article-6 .article-smoke-4 {
  opacity: 0.7;
  display: none;
}
.article-6 .article-smoke-4:before {
  padding-top: 155.5205%;
}
@media (max-width: 576.98px) {
  .article-6 .article-smoke-4 {
    display: flex;
    width: 169.0667%;
    transform: translateX(10%) translateY(-10%);
    right: 0;
  }
}
.article-6 .article-smoke-art-nav {
  width: 80.7292%;
  opacity: 0.5;
  transform: translateX(-25%) translateY(-30%);
  display: flex;
}
.article-6 .article-smoke-art-nav:before {
  padding-top: 119.8065%;
}
@media (max-width: 1440.98px) {
  .article-6 .article-smoke-art-nav {
    width: 133.8889%;
  }
}
@media (max-width: 576.98px) {
  .article-6 .article-smoke-art-nav {
    width: 480%;
    transform: translateX(-30%) translateY(-60%) rotate(2.3deg);
  }
}

.article-7 .article-smoke-art-nav:before {
  padding-top: 133.3525%;
}
@media (max-width: 1440.98px) {
  .article-7 .article-smoke-art-nav {
    display: flex;
    width: 120.5556%;
    top: -200%;
    left: -50%;
  }
}
@media (max-width: 576.98px) {
  .article-7 .article-smoke-art-nav {
    left: unset;
    transform: translateX(-40%);
    width: 234.4%;
  }
}
.article-7 .article-smoke-1 {
  width: 53.75%;
  opacity: 0.4;
}
.article-7 .article-smoke-1:before {
  padding-top: 155.5233%;
}
@media (max-width: 1440.98px) {
  .article-7 .article-smoke-1 {
    width: 95%;
  }
}
@media (max-width: 576.98px) {
  .article-7 .article-smoke-1 {
    width: 286.9333%;
    top: 30%;
    transform: translateX(-40%);
  }
}
.article-7 .article-smoke-2 {
  width: 66.4063%;
  opacity: 0.4;
}
@media (max-width: 1440.98px) {
  .article-7 .article-smoke-2 {
    width: 88.5417%;
  }
}
@media (max-width: 576.98px) {
  .article-7 .article-smoke-2 {
    width: 180.8%;
    top: 30%;
  }
}
.article-7 .article-smoke-2:before {
  padding-top: 148.0784%;
}

.z-2 {
  z-index: 2;
}

.smoke-wrapper {
  z-index: -1;
}

@media (min-width: 1441px) and (max-width: 1900px) {
  .img-wrap .img-item {
    position: static;
  }
}
.introtext-widget {
  background: none;
  margin-bottom: 0 !important;
  overflow: hidden;
  min-height: var(--app-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 767.98px) {
  .introtext-widget .content-container {
    padding: 0;
  }
}
@media (max-width: 767.98px) {
  .introtext-widget {
    padding-top: var(--90) !important;
    padding-bottom: var(--52) !important;
  }
}
.introtext-widget .introtext-inner {
  max-width: var(--1300);
  height: var(--480);
}
@media (max-width: 767.98px) {
.introtext-widget .introtext-inner {height: var(--600);}
}
@media (max-width: 767.98px) {
  .introtext-widget .introtext {
    height: var(--600);
  }
}

.widget-iframe {
  height: 100%;
  width: 100%;
}

.widget-smoke-1 {
  width: 42.9167%;
  top: 0 !important;
  opacity: 0.8;
}
@media (max-width: 1440.98px) {
  .widget-smoke-1 {
    width: 53.9583%;
    right: -8%;
  }
}
@media (max-width: 576.98px) {
  .widget-smoke-1 {
    width: 107.2%;
    top: 80%;
  }
}
.widget-smoke-1:before {
  padding-top: 155.5825%;
}

.widget-smoke-2 {
  width: 66.0417%;
  top: 0 !important;
  opacity: 0.8;
}
@media (max-width: 1440.98px) {
  .widget-smoke-2 {
    width: 62.9861%;
  }
}
@media (max-width: 576.98px) {
  .widget-smoke-2 {
    display: none;
  }
}
.widget-smoke-2:before {
  padding-top: 133.3596%;
}

.lol {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-height: var(--app-height);
  overflow: hidden;
}

.video-header {
  padding-top: var(--148);
}
@media (max-width: 767.98px) {
  .video-header {
    padding-top: var(--90);
  }
}

.video-title {
  margin-bottom: var(--20);
  color: var(--yellow);
  line-height: 1.1;
}
@media (max-width: 1440.98px) {
  .video-title {
    font-size: var(--60);
  }
}
@media (max-width: 767.98px) {
  .video-title {
    font-size: var(--30);
  }
}

.video-subtitle {
  color: var(--yellow);
  margin-bottom: var(--60);
  line-height: 1.1;
}
@media (max-width: 1440.98px) {
  .video-subtitle {
    margin-bottom: var(--52);
    font-size: var(--26);
  }
}
@media (max-width: 767.98px) {
  .video-subtitle {
    margin-bottom: var(--30);
    font-size: calc(var(--18) + var(--1));
  }
}

.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--grey);
  overflow: hidden;
  border: var(--1) solid var(--yellow);
}
@media (max-width: 767.98px) {
  .video {
    margin-bottom: var(--16);
  }
}
.video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.video-play {
  position: absolute;
  inset: 0;
  cursor: pointer;
  transition: opacity 0.25s ease;
}
.video-play img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.video-play-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-play-icon {
  width: calc(var(--56) - var(--2));
  height: calc(var(--56) - var(--2));
  padding: var(--4);
  background: var(--grey);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
@media (max-width: 767.98px) {
  .video-play-icon {
    width: var(--40);
    height: var(--40);
  }
}
.video-play-icon svg {
  width: 100%;
  height: 100%;
}
.video-play-icon svg path {
  fill: var(--white);
}
.video-play:hover .video-play-icon {
  transform: scale(1.06);
}
.video-play:hover .video-play-icon svg path {
  fill: var(--yellow);
}
.video.is-playing .video-play {
  opacity: 0;
  pointer-events: none;
}

.d-only {
  display: none;
}
@media (min-width: 1441px) {
  .d-only {
    display: block;
  }
}

.l-only {
  display: none;
}
@media (max-width: 1440.98px) {
  .l-only {
    display: block;
  }
}
@media (max-width: 767.98px) {
  .l-only {
    display: none;
  }
}

.m-only {
  display: none;
}
@media (max-width: 767.98px) {
  .m-only {
    display: block;
  }
}

.m-none {
  display: block;
}
@media (max-width: 767.98px) {
  .m-none {
    display: none;
  }
}

.l-none {
  display: block;
}
@media (max-width: 1440.98px) {
  .l-none {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .l-none {
    display: block;
  }
}

.d-hidden {
  display: block;
}
@media (min-width: 1441px) {
  .d-hidden {
    display: none;
  }
}