/*----------------------------------------------------
 *                 Global Variables
 * ---------------------------------------------------*/
 :root {
  --main-full-width: 100%;
  --main-width: clamp(200px, 93%, 1900px);
  --main-md-width: clamp(200px, 62%, 1200px);
  --cta-btn-width: 228px;
  --hero-btn-width: 190px;
  --hero-cta-btn-height: 70px;
  --cta-btn-height: calc(var(--hero-cta-btn-height) - 20px);
  --section-radius: 30px;
  --video-radius: 20px;
  --video-btn-radius: 10px;
  --cta-btn-radius: 7px;
  --vid-txt-state: block;
  --btn-txt-state: none;
  --markers-visibility: none;
  --prv-nxt-btn-size: 40px;
  --style4-min-height: 650px;
  --style4-height: 37vw;
}

@media (max-width: 1600px) {
  :root {
    --style4-height: 40vw;
  }
}
@media (max-width: 1200px) {
  :root {
    --style4-min-height: 600px;
  }
}
@media (max-width: 950px) {
  :root {
    --main-md-width: clamp(200px, 93%, 1150px);
    --style4-min-height: 650px;
  }
}
@media (max-width: 650px) {
  :root {
    --markers-visibility: flex;
    --vid-txt-state: none;
    --btn-txt-state: block;
  }
}
/*--------------------------------------------------
 *                  Color Chart
 * ----------------------------------------------------*/
/*--------------------------------------------------
 *                   HTML5 Reset
 * --------------------------------------------------*/
html {
  scroll-behavior: smooth;
}

html, body, div, section, article, aside, header,
hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p,
blockquote, address, time, main span, em, strong, img,
ol, ul, li, figure, canvas, video, th, td, tr {
  margin: 0;
  padding: 0;
  border: 0;
}

main *, main *:before, main *:after {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

address, article, aside, canvas, details, figcaption,
figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

picture {
  z-index: 1;
}
img {
  max-width: 100%;
  height: auto;
}

main {
  overflow: clip;
}

main button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-appearance: button;
  appearance: button;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*--------------------------------------------------
 *              Reset RD code
 * --------------------------------------------------*/
.toptop_banner {
  height: 0px;
  margin-bottom: 0px;
}

.pd_purchase_left {
  display: none !important;
}

#pd_purchase {
  display: none !important;
}

/*fix purchase ui issues*/
.banner1200 {
  height: 0px !important;
  overflow: hidden;
}

/*hide pdrm purchase*/
.bundle_pdrm {
  display: none !important;
}

.container {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.on_600 {
  display: none;
}

.back_top {
  z-index: 999 !important;
}

/*----------------------------------------------------
 *                 Display Fonts
 * ----------------------------------------------------*/
main h1, main h2, main h3, main h4, main h5, main span, main ul {
  font-family: "Poppins", sans-serif;
}

main h1 {
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  font-weight: 700;
  line-height: 1;
}
main h2, main h3 {
  line-height: 1.3;
}
main h2 {
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  font-weight: bold;
}
main h3 {
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 700;
}
main h4 {
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  font-weight: 600;
  line-height: 1.4;
}
main p {
  font-size: clamp(0.8rem, 2vw, 1rem);
  line-height: 2rem;
  font-family: system-ui;
  font-weight: 400;
  line-height: 1.2;
}
main a {
  font-family: "Poppins", sans-serif;
  font-style: clamp(0.8rem, 2vw, 1rem);
  font-weight: 600;
}

/*----------------------------------------------------
 *              Base Style
 * ----------------------------------------------------*/
main h1, main h2, main h3, main h4, main p, main a, main i, main span {
  color: #fff;
}
main h1 {
  margin: 2rem 0;
}

main:is(.CHT, .CHS) h1 {
  line-height: 1.2;
}

.title:has(+ p) {
  margin-bottom: 0.5rem;
}

/*----------------------------------------------------
 *              Promotional Ribbon
 * ----------------------------------------------------*/
.promo-ribbon {
  position: absolute;
  background-color: #ff0057;
  padding: 8px 16px;
  color: #fff;
  border-bottom-right-radius: 6px;
  font-weight: 700;
  z-index: 1;
}

@media (max-width: 620px) {
  .promo-ribbon {
    width: 100vw;
    border-radius: 0;
    height: fit-content;
  }
}
/*----------------------------------------------------
 *              CTA buttons style
 * ----------------------------------------------------*/
.btn-cta {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 0.6rem;
  flex-wrap: wrap;
  text-align: center;
}
.btn-cta a {
  border-radius: 7px;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.2s all;
  margin: 12px;
  text-transform: uppercase;
  padding: 1rem 1.2rem;
  width: auto;
  height: auto;
  min-height: 70px;
  min-width: 190px;
}
.btn-cta a:hover {
  transform: scale(1.08);
}

.hero .btn-cta a {
  width: var(--hero-btn-width);
  min-height: 70px;
}

.ENU .btn-cta {
  white-space: nowrap;
}

.trial-btn {
  border: 1px solid white;
  flex-direction: row !important;
}
.trial-btn i {
  font-weight: 100;
  margin-left: 6px;
}
.trial-btn.black-bg, .trial-btn.teal-bg, .trial-btn.blue-grd, .trial-btn.purple-grd {
  border: none;
}
.trial-btn.black-bg {
  background-color: #000;
}
.trial-btn.teal-bg {
  background-color: #22F6F7;
}
.trial-btn.blue-grd {
  background: rgb(34, 246, 247);
  color: black;
}
.trial-btn.blue-grd i {
  color: black;
}
.trial-btn.purple-grd {
  background: hsl(320, 100%, 77%);
  background: linear-gradient(132deg, rgb(231, 125, 233) 0%, rgb(255, 192, 172) 100%);
  color: black;
}
.trial-btn.purple-grd i {
  color: black;
}

.buy-now-btn {
  background: #21EEEF;
  color: #000;
}
.buy-now-btn span {
  color: #000;
  font-size: clamp(0.6rem, 0.6vw, 1rem);
  padding-top: 6px;
}

@media (max-width: 620px) {
  .btn-cta a {
    min-height: 70px;
    min-width: 200px;
  }
}
/*----------------------------------------------------
 *              WebCommerce ad section
 * ----------------------------------------------------*/
.webcommerce-ad {
  display: grid;
  grid-template-columns: 1fr;
  height: fit-content;
}
.JPN .webcommerce-ad {
  display: none;
}

#long-banner {
  justify-self: center;
}

@media (max-width: 620px) {
  .webcommerce-ad {
    display: none;
  }
}
/*--------------------------------------------------
 *                   utilities
 * --------------------------------------------------*/
[data-product=PDR] {
  --main-gradient: linear-gradient(315.52deg, #00FFF0 8.58%, #085AF7 92.82%);
  --secondary-gradient: linear-gradient(316.39deg, #00FFF0 11.84%, #085AF7 70.55%);
  --text-shadow: 2px 2px 6px #c525136b;
  --active-text-color: #2847f8;
}

[data-product=PHD] {
  --main-gradient: linear-gradient(150deg, #ffbc00 0%, #FF69EA 141%);
  --secondary-gradient: var(--main-gradient);
  --text-shadow: 2px 2px 6px #ff44006b;
  --active-text-color: #ff7b00;
}
[data-product=PHD]:not(.footer-hero) .buy-now-btn {
  --buy-button-color: #e76000;
}

main section:not(.main-hero, .footer-hero) {
  margin: 5rem 2rem;
  padding: 0 2rem;
}
main .intro {
  max-width: 750px;
  text-align: center;
  margin: 0 auto;
}
main .intro :is(h3, p) {
  color: black;
}
main .grid {
  display: grid;
  overflow: hidden;
  margin: 0 auto;
}
main img {
  display: block;
  width: 100%;
}
main.KOR .hero h1 {
  line-height: 1.2;
}

@media (max-width: 990px) {
  main a.trial-btn.download {
    background: linear-gradient(137deg, rgba(1, 94, 247, 0.57) 0%, rgba(163, 0, 254, 0.45) 100%);
    backdrop-filter: blur(8px);
  }
}

@media (max-width: 550px) {
  main section:not(.main-hero, .footer-hero) {
    margin: 3rem 2rem;
    padding: 0;
  }
}
/*--------------------------------------------------
 *                Content Creator
 * ----------------------------------------------------*/
#content-creator .grid {
  grid-template-columns: 1fr 1.4fr;
  max-width: 1000px;
  padding-top: 3rem;
  gap: 1rem;
}
#content-creator .grid > .vid:nth-of-type(1) {
  grid-row: 1/3;
}
#content-creator .vid {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
#content-creator .caption {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 35% 2rem 2rem;
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(28, 28, 28, 0.9584208683) 40%, rgba(255, 255, 255, 0) 100%);
}
#content-creator .caption .title {
  max-width: 21ch;
}
#content-creator .vid:is(:nth-of-type(2), :nth-of-type(3)) .caption {
  padding: 15% 2rem 2rem;
}
#content-creator video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 800px) {
  #content-creator .grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  #content-creator .grid > .vid:nth-of-type(1) {
    aspect-ratio: 16/9;
  }
}
/*--------------------------------------------------
 *                Stock footage
 * ----------------------------------------------------*/
#stock-footage .grid {
  grid-template-columns: 1fr 3fr;
  max-width: 1400px;
  padding-top: 3rem;
  gap: 1rem;
}
#stock-footage .btns {
  display: flex;
  flex-direction: column;
  height: fit-content;
  width: 21vw;
  align-self: center;
}
#stock-footage .btns h4 {
  color: #ABABAB;
  padding: 0.5rem 1rem;
  border-left: solid 4px;
  transition: color 0.2s;
}
#stock-footage .btns h4.active {
  color: var(--active-text-color);
}
#stock-footage .btns h4.active:hover {
  cursor: default;
}
#stock-footage .btns h4:hover:not(.active) {
  cursor: pointer;
  color: grey;
}
#stock-footage .vids {
  display: grid;
  border-radius: 20px;
  overflow: hidden;
}
#stock-footage .vids video {
  grid-column: 1/-1;
  grid-row: 1/-1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#stock-footage .vids video.active {
  z-index: 5;
}

@media (max-width: 850px) {
  #stock-footage .grid {
    grid-template-columns: 1fr;
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
  #stock-footage .btns {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    grid-row: 2;
    max-width: 550px;
    margin: 0 auto;
  }
  #stock-footage .btns h4 {
    border-left: none;
    background: white;
    box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.2705882353);
    border-radius: 12px;
  }
}
/*--------------------------------------------------
 *                Perfect Match
 * ----------------------------------------------------*/
#perfect-match .grid {
  grid-template-columns: 1fr 1fr;
  max-width: 1000px;
  padding-top: 3rem;
  gap: 1rem;
}
#perfect-match .grid > div {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--main-gradient);
}
#perfect-match .grid h4 {
  position: absolute;
  top: 0;
  padding: 2rem;
  text-shadow: var(--text-shadow);
}
#perfect-match .grid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}

@media (max-width: 1000px) {
  #perfect-match .grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  #perfect-match .grid picture {
    margin-top: -37%;
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.062745098));
  }
  #perfect-match .grid > div {
    grid-template-columns: 1fr 1fr;
    display: grid;
    overflow: visible;
  }
  #perfect-match .grid > div:first-of-type picture {
    grid-column: 2;
  }
  #perfect-match .grid > div:last-of-type h4 {
    grid-column: 2;
    grid-row: 1;
  }
  #perfect-match .grid h4 {
    position: unset;
    align-self: center;
  }
}
@media (max-width: 700px) {
  #perfect-match .grid > div {
    display: flex;
    flex-direction: column;
  }
}
/*--------------------------------------------------
 *                Royalty Free
 * ----------------------------------------------------*/
#royalty-free {
  background: var(--secondary-gradient);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 8rem 0 5rem !important;
}
#royalty-free .intro {
  max-width: 700px;
  padding: 4rem 1rem;
  margin: unset;
  justify-self: end;
  align-self: center;
  text-align: left;
  text-shadow: var(--text-shadow);
}
#royalty-free .intro :is(h3, p) {
  color: white;
}
#royalty-free video, #royalty-free picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#royalty-free img {
  max-width: 650px;
}

@media (max-width: 1000px) {
  #royalty-free {
    margin: 3rem 0 5rem !important;
  }
}
@media (max-width: 800px) {
  #royalty-free {
    grid-template-columns: 1fr;
  }
  #royalty-free .intro {
    padding-bottom: 0;
  }
}
@media (max-width: 550px) {
  #royalty-free .intro {
    padding: 3rem 2rem;
  }
}
/*--------------------------------------------------
 *                Stock Library
 * ----------------------------------------------------*/
#stock-library :is(h3, h4, p) {
  color: black;
}
#stock-library .title {
  text-align: center;
  max-width: 750px;
  margin: 0 auto;
}
#stock-library .flex {
  display: flex;
  margin: 0 auto;
  max-width: 1000px;
  padding-top: 3rem;
  gap: 1rem;
  flex-wrap: wrap;
}
#stock-library .card {
  flex: 1;
  min-width: 200px;
}
#stock-library img {
  display: block;
  border-radius: 20px 20px 0 0;
}
#stock-library .text {
  padding: 2rem;
  border: solid 2px rgba(76, 76, 76, 0.2196078431);
  border-top: none;
  border-radius: 0 0 20px 20px;
}