@charset "UTF-8";
@import url("../fonts/fonts.css");
:root {
  --grayscale-100: #000000;
  --grayscale-90: #232323;
  --grayscale-80: #383838;
  --grayscale-70: #4b4b4b;
  --grayscale-60: #979797;
  --grayscale-40: #d8d8d8;
  --grayscale-20: #f2f2f2;
  --grayscale-10: #f6f6f6;
  --grayscale-white: #ffffff;
  --color-blue-primary: #009ff4;
  --color-blue-secondary: #0192df;
  --color-red-primary: #ff6565;
  --color-red-secondary: #c63939;
  --color-green-primary: #00d83a;
  --color-green-secondary: #048000;
  --black-100: var(--grayscale-100);
  --black-90: var(--grayscale-90);
  --black-80: var(--grayscale-80);
  --black-70: var(--grayscale-70);
  --black-60: var(--grayscale-60);
  --black-40: var(--grayscale-40);
  --black-20: var(--grayscale-20);
  --black-10: var(--grayscale-10);
  --black-white: var(--grayscale-white);
  --color-blue-for-dark: var(--color-blue-primary);
  --color-blue-for-light: var(--color-blue-secondary);
  --color-red-for-dark: var(--color-red-primary);
  --color-red-for-light: var(--color-red-secondary);
  --color-green-for-dark: var(--color-green-primary);
  --color-green-for-light: var(--color-green-secondary);
  --logo-filter: brightness(100) grayscale(100%);
  --font-family-primary: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-weight-medium: 500;
}

/* Bold */
body[data-theme=light] {
  --black-100: var(--grayscale-white);
  --black-90: var(--grayscale-white);
  --black-80: var(--grayscale-10);
  --black-70: var(--grayscale-20);
  --black-60: var(--grayscale-40);
  --black-40: var(--grayscale-60);
  --black-20: var(--grayscale-70);
  --black-10: var(--grayscale-80);
  --black-white: #383838;
  --color-blue-for-dark: var(--color-blue-secondary);
  --color-blue-for-light: var(--color-blue-primary);
  --color-red-for-dark: var(--color-red-secondary);
  --color-red-for-light: var(--color-red-primary);
  --color-green-for-dark: var(--color-green-secondary);
  --color-green-for-light: var(--color-green-primary);
  --logo-filter: brightness(1) grayscale(0%);
}
body[data-theme=light] [class^=icon-]::before, body[data-theme=light] [class*=" icon-"]::before {
  content: " ";
  filter: invert(1);
}

body[data-lang=ZHTW], body[data-lang=ZHCN] {
  --font-family-primary: "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang TC", "Microsoft YaHei", "微軟雅黑", "Microsoft JhengHei", "微軟正黑體", "Hiragino Sans GB", sans-serif;
}

body[data-lang=ZHCN] {
  --font-weight-medium: 600;
}

@media screen and (max-width: 1180px) {
  .viewport-pc {
    display: none;
  }
}

@media screen and (min-width: 1181px) {
  .viewport-tb {
    display: none;
  }
}
@media screen and (max-width: 1180px) {
  .viewport-tb {
    display: inherit;
  }
}
@media screen and (max-width: 720px) {
  .viewport-tb {
    display: none;
  }
}

@media screen and (min-width: 721px) {
  .viewport-mobile {
    display: none;
  }
}
@media screen and (max-width: 720px) {
  .viewport-mobile {
    display: inherit;
  }
}

.heading-1 {
  font-size: 68px;
  font-weight: 700;
  line-height: 115%;
  letter-spacing: 1px;
}

.heading-1-s {
  font-size: 40px;
  font-weight: bold;
  line-height: 115%;
  letter-spacing: 1px;
}

.heading-2-bold {
  font-size: 40px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 1px;
}

.heading-2-medium {
  font-size: 40px;
  font-weight: var(--font-weight-medium);
  line-height: 130%;
  letter-spacing: 1px;
}

.heading-3-bold {
  font-size: 30px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 1px;
}

.heading-3-medium {
  font-size: 30px;
  font-weight: var(--font-weight-medium);
  line-height: 130%;
  letter-spacing: 1px;
}

.heading-4-bold {
  font-size: 24px;
  font-weight: 700;
  line-height: 135%;
  letter-spacing: 0.5px;
}

.heading-4-medium {
  font-size: 24px;
  font-weight: var(--font-weight-medium);
  line-height: 135%;
  letter-spacing: 0.5px;
}

.heading-5-bold {
  font-size: 20px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.5px;
}

.heading-5-regular {
  font-size: 20px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 0.5px;
}

.heading-header {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 140%;
  letter-spacing: 0.5px;
}

.heading-footer {
  font-size: 14px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.body-1-bold {
  font-size: 20px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.5px;
}

.body-1-regular {
  font-size: 20px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 0.5px;
}

.body-2-bold {
  font-size: 18px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.body-2-regular {
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.body-3-bold {
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.body-3-regular {
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.body-4-bold {
  font-size: 14px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.body-4-medium {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 140%;
  letter-spacing: 0.5px;
}

.body-5-bold {
  font-size: 13px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.body-5-regular {
  font-size: 13px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.body-6-bold {
  font-size: 11px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.body-6-regular {
  font-size: 11px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.font-tilt-warp {
  font-family: "Tilt Warp", var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-synthesis: none;
}

.color-black-90 {
  color: var(--black-90);
}

.color-black-80 {
  color: var(--black-80);
}

.color-black-70 {
  color: var(--black-70);
}

.color-black-60 {
  color: var(--black-60);
}

.color-black-40 {
  color: var(--black-40);
}

.color-black-20 {
  color: var(--black-20);
}

.color-black-10 {
  color: var(--black-10);
}

.color-black-white {
  color: var(--black-white);
}

[class^=icon-], [class*=" icon-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[class^=icon-]::before, [class*=" icon-"]::before {
  content: " ";
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 8px;
  width: 24px;
  height: 24px;
}

.icon-shopping-bag::before {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M11.9995%202C14.2086%202%2015.9995%203.79086%2015.9995%206H17.1323C17.6299%206%2018.0521%206.36584%2018.1225%206.8584L19.8374%2018.8584C19.9234%2019.4608%2019.4556%2019.9999%2018.8471%2020H5.15281C4.54434%2019.9999%204.07652%2019.4608%204.16257%2018.8584L5.87742%206.8584C5.94788%206.36585%206.37006%206%206.86765%206H7.99948C7.99948%203.79102%209.79056%202.00025%2011.9995%202ZM14.9995%208C14.4474%208.00027%2014.0205%208.47467%2013.7553%208.95898C13.4157%209.5793%2012.7565%2010%2011.9995%2010C11.2426%209.99983%2010.5841%209.57916%2010.2446%208.95898C9.9794%208.47454%209.55177%208%208.99948%208C8.4474%208.00026%207.98729%208.45517%208.12351%208.99023C8.56411%2010.7203%2010.1323%2011.9998%2011.9995%2012C13.8668%2012%2015.4358%2010.7204%2015.8764%208.99023C16.0127%208.45502%2015.5518%208%2014.9995%208ZM11.9995%204C10.8951%204.00025%209.99948%204.89559%209.99948%206H13.9995C13.9995%204.89543%2013.104%204%2011.9995%204Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.icon-globe::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202ZM8.89844%2015.75C9.12495%2016.7635%209.43588%2017.6608%209.80566%2018.4004C10.6308%2020.0506%2011.4935%2020.5%2012%2020.5C12.5065%2020.5%2013.3692%2020.0506%2014.1943%2018.4004C14.5641%2017.6608%2014.8751%2016.7635%2015.1016%2015.75H8.89844ZM4.37109%2015.75C5.31329%2017.6632%206.95374%2019.1686%208.95996%2019.9375C8.25728%2018.8591%207.70155%2017.4164%207.36426%2015.75H4.37109ZM16.6357%2015.75C16.2984%2017.4167%2015.7419%2018.859%2015.0391%2019.9375C17.0457%2019.1688%2018.6866%2017.6634%2019.6289%2015.75H16.6357ZM3.80371%209.75C3.60737%2010.4669%203.5%2011.2208%203.5%2012C3.5%2012.7792%203.60737%2013.5331%203.80371%2014.25H7.12891C7.04575%2013.5267%207%2012.7737%207%2012C7%2011.2263%207.04575%2010.4733%207.12891%209.75H3.80371ZM8.63867%209.75C8.5494%2010.4636%208.5%2011.2171%208.5%2012C8.5%2012.7829%208.5494%2013.5364%208.63867%2014.25H15.3613C15.4506%2013.5364%2015.5%2012.7829%2015.5%2012C15.5%2011.2171%2015.4506%2010.4636%2015.3613%209.75H8.63867ZM16.8711%209.75C16.9543%2010.4733%2017%2011.2263%2017%2012C17%2012.7737%2016.9543%2013.5267%2016.8711%2014.25H20.1963C20.3926%2013.5331%2020.5%2012.7792%2020.5%2012C20.5%2011.2208%2020.3926%2010.4669%2020.1963%209.75H16.8711ZM8.95996%204.06152C6.95359%204.83033%205.31334%206.33674%204.37109%208.25H7.36426C7.70163%206.5832%208.25707%205.14002%208.95996%204.06152ZM12%203.5C11.4935%203.5%2010.6308%203.94942%209.80566%205.59961C9.43588%206.33918%209.12495%207.23646%208.89844%208.25H15.1016C14.8751%207.23646%2014.5641%206.33918%2014.1943%205.59961C13.3692%203.94942%2012.5065%203.5%2012%203.5ZM15.0391%204.06152C15.7421%205.14006%2016.2983%206.58297%2016.6357%208.25H19.6289C18.6865%206.33647%2017.0458%204.83023%2015.0391%204.06152Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E");
}

.icon-globe:hover:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202ZM8.89844%2015.75C9.12495%2016.7635%209.43588%2017.6608%209.80566%2018.4004C10.6308%2020.0506%2011.4935%2020.5%2012%2020.5C12.5065%2020.5%2013.3692%2020.0506%2014.1943%2018.4004C14.5641%2017.6608%2014.8751%2016.7635%2015.1016%2015.75H8.89844ZM4.37109%2015.75C5.31329%2017.6632%206.95374%2019.1686%208.95996%2019.9375C8.25728%2018.8591%207.70155%2017.4164%207.36426%2015.75H4.37109ZM16.6357%2015.75C16.2984%2017.4167%2015.7419%2018.859%2015.0391%2019.9375C17.0457%2019.1688%2018.6866%2017.6634%2019.6289%2015.75H16.6357ZM3.80371%209.75C3.60737%2010.4669%203.5%2011.2208%203.5%2012C3.5%2012.7792%203.60737%2013.5331%203.80371%2014.25H7.12891C7.04575%2013.5267%207%2012.7737%207%2012C7%2011.2263%207.04575%2010.4733%207.12891%209.75H3.80371ZM8.63867%209.75C8.5494%2010.4636%208.5%2011.2171%208.5%2012C8.5%2012.7829%208.5494%2013.5364%208.63867%2014.25H15.3613C15.4506%2013.5364%2015.5%2012.7829%2015.5%2012C15.5%2011.2171%2015.4506%2010.4636%2015.3613%209.75H8.63867ZM16.8711%209.75C16.9543%2010.4733%2017%2011.2263%2017%2012C17%2012.7737%2016.9543%2013.5267%2016.8711%2014.25H20.1963C20.3926%2013.5331%2020.5%2012.7792%2020.5%2012C20.5%2011.2208%2020.3926%2010.4669%2020.1963%209.75H16.8711ZM8.95996%204.06152C6.95359%204.83033%205.31334%206.33674%204.37109%208.25H7.36426C7.70163%206.5832%208.25707%205.14002%208.95996%204.06152ZM12%203.5C11.4935%203.5%2010.6308%203.94942%209.80566%205.59961C9.43588%206.33918%209.12495%207.23646%208.89844%208.25H15.1016C14.8751%207.23646%2014.5641%206.33918%2014.1943%205.59961C13.3692%203.94942%2012.5065%203.5%2012%203.5ZM15.0391%204.06152C15.7421%205.14006%2016.2983%206.58297%2016.6357%208.25H19.6289C18.6865%206.33647%2017.0458%204.83023%2015.0391%204.06152Z%22%20fill%3D%22%230192df%22%2F%3E%0A%3C%2Fsvg%3E");
  filter: unset;
}
.icon-globe:hover > p {
  color: var(--color-blue-for-light);
  text-decoration: underline;
}

.icon-globe:active:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202ZM8.89844%2015.75C9.12495%2016.7635%209.43588%2017.6608%209.80566%2018.4004C10.6308%2020.0506%2011.4935%2020.5%2012%2020.5C12.5065%2020.5%2013.3692%2020.0506%2014.1943%2018.4004C14.5641%2017.6608%2014.8751%2016.7635%2015.1016%2015.75H8.89844ZM4.37109%2015.75C5.31329%2017.6632%206.95374%2019.1686%208.95996%2019.9375C8.25728%2018.8591%207.70155%2017.4164%207.36426%2015.75H4.37109ZM16.6357%2015.75C16.2984%2017.4167%2015.7419%2018.859%2015.0391%2019.9375C17.0457%2019.1688%2018.6866%2017.6634%2019.6289%2015.75H16.6357ZM3.80371%209.75C3.60737%2010.4669%203.5%2011.2208%203.5%2012C3.5%2012.7792%203.60737%2013.5331%203.80371%2014.25H7.12891C7.04575%2013.5267%207%2012.7737%207%2012C7%2011.2263%207.04575%2010.4733%207.12891%209.75H3.80371ZM8.63867%209.75C8.5494%2010.4636%208.5%2011.2171%208.5%2012C8.5%2012.7829%208.5494%2013.5364%208.63867%2014.25H15.3613C15.4506%2013.5364%2015.5%2012.7829%2015.5%2012C15.5%2011.2171%2015.4506%2010.4636%2015.3613%209.75H8.63867ZM16.8711%209.75C16.9543%2010.4733%2017%2011.2263%2017%2012C17%2012.7737%2016.9543%2013.5267%2016.8711%2014.25H20.1963C20.3926%2013.5331%2020.5%2012.7792%2020.5%2012C20.5%2011.2208%2020.3926%2010.4669%2020.1963%209.75H16.8711ZM8.95996%204.06152C6.95359%204.83033%205.31334%206.33674%204.37109%208.25H7.36426C7.70163%206.5832%208.25707%205.14002%208.95996%204.06152ZM12%203.5C11.4935%203.5%2010.6308%203.94942%209.80566%205.59961C9.43588%206.33918%209.12495%207.23646%208.89844%208.25H15.1016C14.8751%207.23646%2014.5641%206.33918%2014.1943%205.59961C13.3692%203.94942%2012.5065%203.5%2012%203.5ZM15.0391%204.06152C15.7421%205.14006%2016.2983%206.58297%2016.6357%208.25H19.6289C18.6865%206.33647%2017.0458%204.83023%2015.0391%204.06152Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E");
}
.icon-globe:active > p {
  color: var(--black-white);
  text-decoration: underline;
}

.icon-search::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17%2010.5C17%206.91015%2014.0899%204%2010.5%204C6.91015%204%204%206.91015%204%2010.5C4%2014.0899%206.91015%2017%2010.5%2017V19C5.80558%2019%202%2015.1944%202%2010.5C2%205.80558%205.80558%202%2010.5%202C15.1944%202%2019%205.80558%2019%2010.5C19%2015.1944%2015.1944%2019%2010.5%2019V17C14.0899%2017%2017%2014.0899%2017%2010.5Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3Cpath%20d%3D%22M15.7071%2017.1213C15.3166%2016.7308%2015.3166%2016.0976%2015.7071%2015.7071C16.0976%2015.3166%2016.7308%2015.3166%2017.1213%2015.7071L21.364%2019.9497C21.7545%2020.3403%2021.7545%2020.9734%2021.364%2021.364C20.9734%2021.7545%2020.3403%2021.7545%2019.9497%2021.364L15.7071%2017.1213Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E");
}

.icon-search:hover:before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17%2010.5C17%206.91015%2014.0899%204%2010.5%204C6.91015%204%204%206.91015%204%2010.5C4%2014.0899%206.91015%2017%2010.5%2017V19C5.80558%2019%202%2015.1944%202%2010.5C2%205.80558%205.80558%202%2010.5%202C15.1944%202%2019%205.80558%2019%2010.5C19%2015.1944%2015.1944%2019%2010.5%2019V17C14.0899%2017%2017%2014.0899%2017%2010.5Z%22%20fill%3D%22%230192df%22%2F%3E%0A%3Cpath%20d%3D%22M15.7071%2017.1213C15.3166%2016.7308%2015.3166%2016.0976%2015.7071%2015.7071C16.0976%2015.3166%2016.7308%2015.3166%2017.1213%2015.7071L21.364%2019.9497C21.7545%2020.3403%2021.7545%2020.9734%2021.364%2021.364C20.9734%2021.7545%2020.3403%2021.7545%2019.9497%2021.364L15.7071%2017.1213Z%22%20fill%3D%22%230192df%22%2F%3E%0A%3C%2Fsvg%3E");
}

.icon-menu::before {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M20%2017C20.5523%2017%2021%2017.4477%2021%2018C21%2018.5523%2020.5523%2019%2020%2019L4%2019C3.44772%2019%203%2018.5523%203%2018C3%2017.4477%203.44772%2017%204%2017L20%2017Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3Cpath%20d%3D%22M20%205C20.5523%205%2021%205.44772%2021%206C21%206.55229%2020.5523%207%2020%207L4%207C3.44772%207%203%206.55228%203%206C3%205.44771%203.44772%205%204%205L20%205Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3Cpath%20d%3D%22M20%2011C20.5523%2011%2021%2011.4477%2021%2012C21%2012.5523%2020.5523%2013%2020%2013L6%2013C5.44771%2013%205%2012.5523%205%2012C5%2011.4477%205.44771%2011%206%2011L20%2011Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.icon-menu:hover:before {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M20%2017C20.5523%2017%2021%2017.4477%2021%2018C21%2018.5523%2020.5523%2019%2020%2019L4%2019C3.44772%2019%203%2018.5523%203%2018C3%2017.4477%203.44772%2017%204%2017L20%2017Z%22%20fill%3D%22%230192df%22%2F%3E%0A%3Cpath%20d%3D%22M20%205C20.5523%205%2021%205.44772%2021%206C21%206.55229%2020.5523%207%2020%207L4%207C3.44772%207%203%206.55228%203%206C3%205.44771%203.44772%205%204%205L20%205Z%22%20fill%3D%22%230192df%22%2F%3E%0A%3Cpath%20d%3D%22M20%2011C20.5523%2011%2021%2011.4477%2021%2012C21%2012.5523%2020.5523%2013%2020%2013L6%2013C5.44771%2013%205%2012.5523%205%2012C5%2011.4477%205.44771%2011%206%2011L20%2011Z%22%20fill%3D%22%230192df%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.icon-close::before {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M12.5352%204.04991C12.9256%203.65955%2013.5588%203.6598%2013.9493%204.04991C14.3398%204.44044%2014.3398%205.07443%2013.9493%205.46495L10.4142%208.99913L13.9493%2012.5353C14.3398%2012.9258%2014.3398%2013.5588%2013.9493%2013.9493C13.5588%2014.3399%2012.9258%2014.3399%2012.5352%2013.9493L8.99912%2010.4142L5.46494%2013.9493C5.07441%2014.3399%204.44042%2014.3399%204.0499%2013.9493C3.65978%2013.5588%203.65954%2012.9257%204.0499%2012.5353L7.58505%208.99913L4.0499%205.46495C3.65937%205.07443%203.65937%204.44044%204.0499%204.04991C4.44042%203.65939%205.07441%203.65939%205.46494%204.04991L8.99912%207.58507L12.5352%204.04991Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A") !important;
}

.icon-close:hover:before {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M12.5352%204.04991C12.9256%203.65955%2013.5588%203.6598%2013.9493%204.04991C14.3398%204.44044%2014.3398%205.07443%2013.9493%205.46495L10.4142%208.99913L13.9493%2012.5353C14.3398%2012.9258%2014.3398%2013.5588%2013.9493%2013.9493C13.5588%2014.3399%2012.9258%2014.3399%2012.5352%2013.9493L8.99912%2010.4142L5.46494%2013.9493C5.07441%2014.3399%204.44042%2014.3399%204.0499%2013.9493C3.65978%2013.5588%203.65954%2012.9257%204.0499%2012.5353L7.58505%208.99913L4.0499%205.46495C3.65937%205.07443%203.65937%204.44044%204.0499%204.04991C4.44042%203.65939%205.07441%203.65939%205.46494%204.04991L8.99912%207.58507L12.5352%204.04991Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A") !important;
}

.icon-arrow-right::before {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M7.25683%202.33105C6.88739%202.74154%206.92059%203.37369%207.33105%203.74316L16.5049%2012L7.33105%2020.2568C6.92059%2020.6263%206.88739%2021.2584%207.25683%2021.6689C7.6263%2022.0794%208.25845%2022.1126%208.66894%2021.7432L19.4951%2012L8.66894%202.25683C8.25845%201.88739%207.6263%201.92059%207.25683%202.33105Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.btn {
  display: inline-block;
  border-radius: 100rem;
  padding: 8px 24px;
  font-size: 20px;
  font-weight: bold;
  line-height: 130%;
  cursor: pointer;
}

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: var(--black-100);
  color: var(--black-white);
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 0.5px;
}
body * {
  box-sizing: border-box;
  margin: 0 auto;
}
body a {
  text-decoration: none;
  color: inherit;
}
body a:hover {
  color: inherit;
}
body[data-lang=EN] .EN:not(.EN), body[data-lang=EN] .ES:not(.EN), body[data-lang=EN] .IT:not(.EN), body[data-lang=EN] .DE:not(.EN), body[data-lang=EN] .ZHTW:not(.EN), body[data-lang=EN] .ZHCN:not(.EN), body[data-lang=ES] .EN:not(.ES), body[data-lang=ES] .ES:not(.ES), body[data-lang=ES] .IT:not(.ES), body[data-lang=ES] .DE:not(.ES), body[data-lang=ES] .ZHTW:not(.ES), body[data-lang=ES] .ZHCN:not(.ES), body[data-lang=IT] .EN:not(.IT), body[data-lang=IT] .ES:not(.IT), body[data-lang=IT] .IT:not(.IT), body[data-lang=IT] .DE:not(.IT), body[data-lang=IT] .ZHTW:not(.IT), body[data-lang=IT] .ZHCN:not(.IT), body[data-lang=DE] .EN:not(.DE), body[data-lang=DE] .ES:not(.DE), body[data-lang=DE] .IT:not(.DE), body[data-lang=DE] .DE:not(.DE), body[data-lang=DE] .ZHTW:not(.DE), body[data-lang=DE] .ZHCN:not(.DE), body[data-lang=ZHTW] .EN:not(.ZHTW), body[data-lang=ZHTW] .ES:not(.ZHTW), body[data-lang=ZHTW] .IT:not(.ZHTW), body[data-lang=ZHTW] .DE:not(.ZHTW), body[data-lang=ZHTW] .ZHTW:not(.ZHTW), body[data-lang=ZHTW] .ZHCN:not(.ZHTW), body[data-lang=ZHCN] .EN:not(.ZHCN), body[data-lang=ZHCN] .ES:not(.ZHCN), body[data-lang=ZHCN] .IT:not(.ZHCN), body[data-lang=ZHCN] .DE:not(.ZHCN), body[data-lang=ZHCN] .ZHTW:not(.ZHCN), body[data-lang=ZHCN] .ZHCN:not(.ZHCN) {
  display: none !important;
}

#all_page.loading {
  filter: blur(3px);
  opacity: 0.33;
  color: transparent !important;
  transition: filter 0.3s ease, opacity 0.3s ease, color 0.3s ease;
}
#all_page.loading h1, #all_page.loading h2, #all_page.loading h3, #all_page.loading h4, #all_page.loading h5, #all_page.loading h6, #all_page.loading p, #all_page.loading span, #all_page.loading li, #all_page.loading a, #all_page.loading button {
  color: transparent !important;
  opacity: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#chatbase-message-bubbles {
  right: 72px !important;
  bottom: 0.5rem !important;
}

nav {
  padding: 0 40px;
  width: 100vw;
  height: -moz-fit-content;
  height: fit-content;
  max-width: 1920px;
  min-height: 56px;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 140%;
  letter-spacing: 0.5px;
}
nav::before {
  content: " ";
  position: fixed;
  width: 200vw;
  max-width: 200vw;
  height: 56px;
  background-color: var(--black-90);
  z-index: -1;
  left: 0;
  transform: translateX(-25%);
}
nav.scroll-top {
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 1s;
}
nav.scroll-top::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--black-90), transparent);
}
nav.scroll-top:hover:before {
  background-image: none;
  background-color: var(--black-90);
  transition-delay: 0s;
}
nav .nav-logo {
  display: inline-block;
  width: 120px;
  height: 56px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%201314.9%20671.6%22%20style%3D%22enable-background%3Anew%200%200%201314.9%20671.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%0A%3Cg%3E%0A%09%3Cpath%20d%3D%22M170.8%2C414.6c-1.6%2C0-3.1-0.2-4.6-0.5c-11.7-2.6-19-14.1-16.5-25.7c15.5-70.1%2C70.3-124.9%2C140.4-140.4%20%20%20c11.6-2.7%2C23.2%2C4.6%2C25.9%2C16.2c2.7%2C11.6-4.6%2C23.2-16.2%2C25.9c-0.1%2C0-0.3%2C0.1-0.4%2C0.1c-53.7%2C11.8-95.6%2C53.8-107.4%2C107.4%20%20%20C189.7%2C407.6%2C180.9%2C414.6%2C170.8%2C414.6z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M103.9%2C393.5c-12%2C0-21.6-9.7-21.6-21.7c0-1.7%2C0.2-3.5%2C0.6-5.1c23.1-92.1%2C95.5-163.8%2C187.8-186%20%20%20c11.7-2.4%2C23.1%2C5.2%2C25.4%2C16.9c2.2%2C11.1-4.5%2C22.1-15.4%2C25.1c-75.9%2C18-137.1%2C78.6-155.9%2C154.4C122.5%2C386.7%2C113.8%2C393.5%2C103.9%2C393.5z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M238.7%2C446c-26.4-55.2%2C14.3-119.9%2C76.2-119.9c26.1%2C0%2C56.3%2C10%2C65.6%2C39.4c5.1%2C16.2%2C5.2%2C29.5-1.3%2C40.6%20%20%20s-22.4%2C21.9-35.5%2C22c-8%2C0.1-15.6%2C0-30%2C0c12.9-14.2%2C25-25.7%2C34.5-36.4c4.2-4.7%2C6.2-5.8%2C6.4-11.9c0.3-8.4-9.1-11.1-15.3-11.1h-54%20%20%20c-7.9%2C0-14.5%2C3.4-14.5%2C12.3s8.4%2C11%2C13.5%2C11.4c9.9%2C0.9%2C29.5%2C0.6%2C29.5%2C0.6s-24%2C24-37%2C37.8c-3.8%2C4.1-8.6%2C12-2.8%2C17.1s12%2C4.7%2C16.2%2C4.7%20%20%20c14%2C0%2C29.5%2C1.7%2C44.5%2C0.6c27.9-2%2C51.7-12.2%2C57.9-25.1C375.2%2C500.9%2C272.2%2C516%2C238.7%2C446z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M569.1%2C475.7h-97.7V205.6h96v30.7h-60V322H563v30.7h-55.6v93.1h61.7V475.7z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M718.1%2C205.6l-85.8%2C239.8h77.5v30.3H587.9l85.4-239.3h-75v-30.7H718.1z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M860.3%2C471c-10.1%2C5-21.3%2C7.7-32.6%2C7.8c-21.8%2C0-40.6-8.4-56.5-25.2c-15.9-16.8-23.8-52-23.8-105.4%20%20%20c0-58%2C8-97%2C23.8-117.1c15.9-20.1%2C35.2-30.1%2C57.8-30.1c8.5%2C0%2C18.9%2C1.4%2C31.4%2C4.2v33c-7.3-3.1-15.2-4.7-23.1-4.9%20%20%20c-14.1%2C0-26.2%2C7.2-36.2%2C21.6c-10%2C14.4-15%2C42.7-15.1%2C85c0%2C25.2%2C1.1%2C44.9%2C3.3%2C59.1c2.2%2C14.2%2C7.2%2C25.6%2C15.2%2C34%20%20%20c7.9%2C8.4%2C17.9%2C12.6%2C29.9%2C12.6c7.1%2C0%2C15.8-2.2%2C26.1-6.6L860.3%2C471z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M1005.3%2C475.7h-34.8v-22.5h-1c-8.9%2C16.7-20.4%2C25-34.5%2C25c-12%2C0-22.6-5.6-31.7-16.9s-13.7-36.4-13.7-75.6%20%20%20c0-34.8%2C3.5-59.8%2C10.4-75.1c6.9-15.3%2C18.7-23%2C35.5-23c7.9%2C0%2C14.3%2C1.8%2C19.1%2C5.5s9.8%2C9.5%2C14.9%2C17.6h1v-20.3h34.8L1005.3%2C475.7z%20%20%20%20M948.5%2C447.9c8.8%2C0%2C14.7-5.3%2C17.6-15.9c2.9-10.6%2C4.4-28.6%2C4.4-54c0-22.3-1.3-38.1-4-47.2c-2.7-9.1-8.3-13.7-16.8-13.7%20%20%20c-8.5%2C0-14.4%2C4.2-17.7%2C12.7s-4.9%2C23.8-4.9%2C46c0%2C26.1%2C1.3%2C44.7%2C3.9%2C55.6C933.5%2C442.4%2C939.4%2C447.9%2C948.5%2C447.9z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M1128.4%2C321.8c-10.6-4.4-19.7-6.6-27.3-6.6c-7.3%2C0-13.2%2C1.9-17.7%2C5.5c-4.4%2C3.7-6.7%2C8.7-6.7%2C15.1%20%20%20c0%2C5.1%2C1.9%2C10.1%2C5.6%2C15.1c3.7%2C5%2C11.4%2C12.5%2C23.1%2C22.6c11.7%2C10.1%2C19.9%2C19.1%2C24.8%2C27.1c4.9%2C7.9%2C7.4%2C17.1%2C7.3%2C26.4%20%20%20c0%2C14.6-4.9%2C26.7-14.8%2C36.3s-22.5%2C14.4-37.7%2C14.4c-9.9%2C0-21.5-2.6-34.8-7.9v-28.6c12.9%2C5.2%2C23.8%2C7.9%2C32.8%2C7.9%20%20%20c6.7%2C0%2C11.9-1.8%2C15.6-5.4s5.6-8.5%2C5.6-14.6c0-5.7-2.5-11.7-7.5-18c-5-6.4-13.7-14.5-26-24.4c-17.7-14.3-26.5-30.7-26.5-49.2%20%20%20c0-14.6%2C4.8-26.7%2C14.5-36.4c9.7-9.7%2C21.7-14.5%2C36.1-14.5c8.9%2C0%2C20.1%2C2.3%2C33.5%2C7L1128.4%2C321.8z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M1232.7%2C317.7h-22.3v157.9h-34.8V317.7h-22.3v-27.3h22.3v-50.5h34.8v50.5h22.3V317.7z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%3C%2Fg%3E%0A%0A%3C%2Fsvg%3E");
  background-size: 108% auto;
  background-repeat: no-repeat;
  background-position: center;
  filter: var(--logo-filter);
  position: fixed;
  left: 40px;
  top: 0;
  z-index: 8;
}
nav .nav-btn {
  background-color: var(--color-blue-for-dark);
  color: var(--grayscale-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
  padding: 0 24px 0 8px;
  height: 36px;
  border-radius: 100rem;
  z-index: 8;
}
nav .nav-btn:hover {
  background-color: var(--grayscale-20);
}
nav .nav-btn:hover > p {
  color: var(--black-90);
}
nav .nav-btn:hover[class^=icon-]::before, nav .nav-btn:hover[class*=" icon-"]::before {
  filter: unset;
}
nav .nav-icon {
  height: 36px;
  z-index: 8;
}
nav #nav-language-mobile {
  display: none;
}
nav #nav-buy, nav #nav-search, nav #nav-language, nav #nav-menu {
  cursor: pointer;
  position: absolute;
  top: 10px;
}
nav #nav-buy {
  right: 150px;
}
nav #nav-buy.icon-shopping-bag:hover:before {
  filter: invert(1);
}
nav #nav-search {
  right: 102px;
}
nav #nav-menu {
  display: none;
  right: 56px;
}
nav #nav-language {
  right: 40px;
}
nav #nav-buy-menu, nav #nav-language-menu, nav #nav-search-box, nav #nav-language-mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 16px;
  background: var(--black-90);
  color: var(--black-white);
  border-radius: 10px;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 6;
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
}
nav #nav-buy-menu.dropdown-visible, nav #nav-language-menu.dropdown-visible, nav #nav-search-box.dropdown-visible, nav #nav-language-mobile-menu.dropdown-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
nav #nav-buy-menu li, nav #nav-language-menu li, nav #nav-search-box li, nav #nav-language-mobile-menu li {
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
nav #nav-buy-menu li:hover, nav #nav-language-menu li:hover, nav #nav-search-box li:hover, nav #nav-language-mobile-menu li:hover {
  background: var(--black-70);
  color: var(--color-blue-for-dark);
}
nav #nav-buy-menu li a, nav #nav-language-menu li a, nav #nav-search-box li a, nav #nav-language-mobile-menu li a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
nav #nav-buy-menu li p, nav #nav-language-menu li p, nav #nav-search-box li p, nav #nav-language-mobile-menu li p {
  margin: 0;
  white-space: nowrap;
}
nav #nav-buy-menu {
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
}
nav #nav-buy-menu.dropdown-visible {
  transform: translateX(-50%) translateY(0);
}
nav #nav-language-menu {
  right: 0;
  left: auto;
}
nav #nav-language-menu li:hover {
  background: transparent;
  color: var(--color-blue-for-dark);
  text-decoration: underline;
}
nav #nav-language-menu li:active {
  background: var(--color-blue-for-dark);
  color: var(--black-white);
}
nav #nav-language-mobile-menu {
  left: auto;
  top: -100%;
  transform: translateY(100%) !important;
  width: auto;
  display: grid;
  grid-template-columns: repeat(3, auto);
  background-color: var(--black-70);
  padding: 12px;
}
nav #nav-language-mobile-menu li {
  padding: 8px 16px;
}
nav #nav-language-mobile-menu li:hover {
  background: transparent;
  color: var(--color-blue-for-dark);
  text-decoration: underline;
}
nav #nav-language-mobile-menu li:active {
  background: var(--color-blue-for-dark);
  color: var(--black-white);
}
nav #nav-language-mobile-menu.dropdown-visible {
  transform: translateY(calc(-100% + 56px)) !important;
}
nav #nav-search-box {
  position: fixed;
  top: 56px;
  left: 0;
  right: auto;
  width: 100%;
  padding: 20px 40px;
  margin-top: 0;
  border-radius: 0;
}
nav #nav-search-box input[type=text] {
  width: calc(100% - 32px);
  margin-left: -32px;
  padding: 12px 48px 12px 32px;
  border: none;
  background: var(--black-70);
  color: var(--black-20);
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  border-radius: 100rem;
}
nav #nav-search-box input[type=text]::-moz-placeholder {
  color: var(--black-20);
}
nav #nav-search-box input[type=text]::placeholder {
  color: var(--black-20);
}
nav #nav-search-box input[type=text]:focus {
  outline: none;
}
nav #nav-search-box .icon-close {
  position: absolute;
  top: 31px;
  right: 32px;
  width: 24px;
  height: 24px;
  border-radius: 100rem;
  padding: 0;
  cursor: pointer;
}
nav #nav-search-box .icon-close::before {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0;
  margin: 0;
}
nav #nav-search-box .search-keywords {
  text-align: left;
  padding: 8px 0;
}
nav #nav-search-box .search-keywords > p {
  display: inline-block;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 140%;
  letter-spacing: 0.5px;
  color: var(--black-white);
  margin-bottom: 8px;
  margin-left: 32px;
  margin: 0 0 0 32px;
}
nav #nav-search-box .search-keywords a {
  display: inline-block;
  padding: 4px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
  background: var(--black-70);
  margin: 0 8px;
  border-radius: 100rem;
}
nav #nav-search-box .search-keywords a:hover {
  color: var(--color-blue-for-dark);
}
nav > ul {
  display: flex;
  position: absolute;
  left: 176px;
  top: 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 56px;
}
nav > ul > li {
  padding: 0 16px;
  margin-right: 16px;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 8;
}
nav > ul > li:last-child {
  margin-right: 0;
}
nav > ul > li:hover {
  background-image: linear-gradient(to top, var(--color-blue-for-dark) 0%, var(--color-blue-for-dark) 2px, transparent 2px, transparent 100%);
  background-size: calc(100% - 32px) 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
}
nav > ul > li#nav-product.menu-active {
  background-image: linear-gradient(to top, var(--color-blue-for-dark) 0%, var(--color-blue-for-dark) 2px, transparent 2px, transparent 100%);
  background-size: calc(100% - 32px) 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
}
nav > ul > li > p, nav > ul > li > a {
  line-height: 56px;
}
nav #nav-product-menu {
  z-index: 7;
  background-color: var(--black-90);
  top: 56px;
  position: fixed;
  left: 0;
  max-width: 1920px;
  display: block;
  opacity: 0;
  overflow: hidden;
  margin-top: -500px;
  width: 100%;
  transition: margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 40px;
  box-shadow: 0 -50vw 0px 50vw var(--black-90);
}
nav #nav-product-menu.menu-visible {
  margin-top: 0;
  opacity: 1;
}
nav #nav-product-menu .nav-menu-close {
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 40px;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M12.5352%204.04991C12.9256%203.65955%2013.5588%203.6598%2013.9493%204.04991C14.3398%204.44044%2014.3398%205.07443%2013.9493%205.46495L10.4142%208.99913L13.9493%2012.5353C14.3398%2012.9258%2014.3398%2013.5588%2013.9493%2013.9493C13.5588%2014.3399%2012.9258%2014.3399%2012.5352%2013.9493L8.99912%2010.4142L5.46494%2013.9493C5.07441%2014.3399%204.44042%2014.3399%204.0499%2013.9493C3.65978%2013.5588%203.65954%2012.9257%204.0499%2012.5353L7.58505%208.99913L4.0499%205.46495C3.65937%205.07443%203.65937%204.44044%204.0499%204.04991C4.44042%203.65939%205.07441%203.65939%205.46494%204.04991L8.99912%207.58507L12.5352%204.04991Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-size: cover;
}
nav #nav-product-menu .nav-menu-main {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 32px 0;
}
nav #nav-product-menu .nav-menu-main .nav-menu-category {
  flex: 3;
  max-width: 420px;
}
nav #nav-product-menu .nav-menu-main .nav-menu-category li {
  cursor: pointer;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-right: 32px;
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}
nav #nav-product-menu .nav-menu-main .nav-menu-category li.cate-title {
  display: none;
}
nav #nav-product-menu .nav-menu-main .nav-menu-category li.cate-on {
  color: var(--color-blue-for-dark);
  background: var(--black-70);
  font-size: 18px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
}
nav #nav-product-menu .nav-menu-main .nav-menu-category li p {
  white-space: nowrap;
}
nav #nav-product-menu .nav-menu-main .nav-menu-content {
  flex: 9;
  max-width: 796px;
  height: 0;
  overflow: hidden;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 4px 0 0 4px;
}
nav #nav-product-menu .nav-menu-main .nav-menu-content.content-visible {
  height: auto;
  min-height: 200px;
}
nav #nav-product-menu .nav-menu-main .nav-menu-content[data-active=wireless-video-transmission] {
  height: 390px;
}
nav #nav-product-menu .nav-menu-main .nav-menu-content[data-active=wireless-display-receiver] {
  height: 195px;
}
nav #nav-product-menu .nav-menu-main .nav-menu-content[data-active=wireless-collaboration-solution] {
  height: 195px;
}
nav #nav-product-menu .nav-menu-main .nav-menu-content li {
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 3% 5%;
  opacity: 0;
  overflow: hidden;
  text-align: center;
  align-content: center;
  background-color: var(--black-70);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
nav #nav-product-menu .nav-menu-main .nav-menu-content li.cate-on {
  order: -1;
  width: 187px;
  height: 187px;
  opacity: 1;
}
nav #nav-product-menu .nav-menu-main .nav-menu-content li:hover, nav #nav-product-menu .nav-menu-main .nav-menu-content li:active {
  background-color: var(--black-80);
  box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.5);
  transform: scale(1.005);
}
nav #nav-product-menu .nav-menu-main .nav-menu-content li:hover .menu-item-img img:nth-child(1), nav #nav-product-menu .nav-menu-main .nav-menu-content li:active .menu-item-img img:nth-child(1) {
  opacity: 0;
}
nav #nav-product-menu .nav-menu-main .nav-menu-content li:hover .menu-item-img img:nth-child(2), nav #nav-product-menu .nav-menu-main .nav-menu-content li:active .menu-item-img img:nth-child(2) {
  opacity: 1;
}
nav #nav-product-menu .nav-menu-main .nav-menu-content li:active {
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
  background-color: var(--black-70);
  color: var(--color-blue-for-dark);
}
nav #nav-product-menu .nav-menu-main .nav-menu-content li .menu-item-img {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1/1;
}
nav #nav-product-menu .nav-menu-main .nav-menu-content li .menu-item-img img {
  margin: 0 auto;
  width: 147px;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
nav #nav-product-menu .nav-menu-main .nav-menu-content li .menu-item-img img:nth-child(1) {
  opacity: 1;
}
nav #nav-product-menu .nav-menu-main .nav-menu-content li .menu-item-img img:nth-child(2) {
  opacity: 0;
  transform: translateY(-100%);
  margin-bottom: -100%;
}
nav #nav-product-menu .nav-menu-main .nav-menu-content li .menu-item-txt {
  text-align: center;
  position: relative;
  transform: translateY(-75%);
}
@media screen and (max-width: 1180px) {
  nav {
    background-color: var(--black-90) !important;
    padding: 0 40px;
    height: auto;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    left: 0;
    transform: none;
    transition: min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 20px;
  }
  nav #nav-language {
    display: none;
  }
  nav .menu-open ~ #nav-language-mobile {
    display: inline-flex;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: max(56px, 100% - 48px);
    z-index: 5;
    cursor: pointer;
    background-color: var(--black-90);
    padding: 0px 12px 0px 2px;
    border-radius: 100rem;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
  nav #nav-menu, nav #nav-search, nav #nav-buy {
    display: inline-flex;
    position: fixed;
  }
  nav #nav-menu {
    right: 40px;
  }
  nav #nav-search {
    right: 80px;
  }
  nav #nav-search #nav-search-box input[type=text] {
    padding: 12px 32px;
  }
  nav #nav-search #nav-search-box .search-keywords {
    text-align: left;
    padding: 0 8px;
  }
  nav #nav-search #nav-search-box .search-keywords > p, nav #nav-search #nav-search-box .search-keywords > a {
    margin-left: 0;
    margin-right: 8px;
  }
  nav #nav-search #nav-search-box .search-keywords a {
    margin-bottom: 8px;
  }
  nav #nav-buy {
    right: 132px;
  }
  nav #nav-menu.menu-open ~ ul {
    top: 56px;
    left: 50vw;
    transform: translateX(-50%);
    box-shadow: 0 800px 0 800px var(--black-90);
    padding-bottom: 0;
    box-sizing: content-box;
    border-left: 220px solid var(--black-90);
    border-right: 220px solid var(--black-90);
    z-index: 5;
  }
  nav #nav-menu.menu-open ~ ul::after {
    display: block;
    background: transparent;
    content: " ";
    height: 112px;
  }
  nav > ul {
    left: 40px;
    top: -100vh;
    width: calc(100vw - 80px);
    max-width: 740px;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    overflow: hidden;
    background-color: var(--black-90);
  }
  nav > ul > li {
    margin: 0;
    text-align: left;
    padding: 0;
    width: calc(100vw - 80px);
    max-width: 740px;
    height: 56px;
  }
  nav > ul > li#nav-product, nav > ul > li#nav-product:hover {
    background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.33106%207.25683C2.74155%206.88739%203.3737%206.92059%203.74317%207.33105L12%2016.5049L20.2568%207.33105C20.6263%206.92059%2021.2585%206.88739%2021.6689%207.25683C22.0794%207.6263%2022.1126%208.25845%2021.7432%208.66894L12%2019.4951L2.25684%208.66894C1.8874%208.25845%201.9206%207.6263%202.33106%207.25683Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A") !important;
    background-size: 18px 18px !important;
    background-repeat: no-repeat !important;
    background-position: center right !important;
  }
  nav > ul > li#nav-product.menu-active {
    background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.33105%2016.7432C2.74155%2017.1126%203.3737%2017.0794%203.74316%2016.6689L12%207.49512L20.2568%2016.6689C20.6263%2017.0794%2021.2585%2017.1126%2021.6689%2016.7432C22.0794%2016.3737%2022.1126%2015.7415%2021.7432%2015.3311L12%204.50488L2.25684%2015.3311C1.88739%2015.7415%201.9206%2016.3737%202.33105%2016.7432Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A") !important;
  }
  nav > ul > li:hover, nav > ul > li:active, nav > ul > li.menu-active {
    background-image: none !important;
  }
  nav > ul > li > p, nav > ul > li > a {
    width: 100%;
  }
  nav #nav-product-menu {
    position: relative;
    margin-left: 0;
    margin-top: -100vh;
    top: 0;
    left: 0;
    padding: 0 !important;
    transition: margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none;
  }
  nav #nav-product-menu .nav-menu-close {
    display: none;
    /* position: absolute;
    top: 16px;
    right: 16px; */
  }
  nav #nav-product-menu .nav-menu-main {
    padding: 0;
  }
  nav #nav-product-menu .nav-menu-main .nav-menu-category {
    display: none;
  }
  nav #nav-product-menu .nav-menu-main .nav-menu-content {
    display: block;
    padding: 0 0 0 3px !important;
    max-width: 737px !important;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
  }
  nav #nav-product-menu .nav-menu-main .nav-menu-content > li {
    width: 240px !important;
    max-width: calc(33% - 4px) !important;
    height: auto !important;
    flex-basis: 33%;
  }
  nav #nav-product-menu .nav-menu-main .nav-menu-content > li.cate-title {
    flex-basis: 100%;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
    background: transparent;
    border-radius: 0;
    text-align: left;
    padding: 8px 0 0 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.5px;
  }
  nav #nav-product-menu .nav-menu-main .nav-menu-content > li.cate-title:not(:first-child) {
    border-top: 1px solid var(--black-60);
    margin-top: 1em;
  }
  nav #nav-product-menu .nav-menu-main .nav-menu-content > li.cate-title:hover, nav #nav-product-menu .nav-menu-main .nav-menu-content > li.cate-title:active {
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  nav #nav-product-menu .nav-menu-main .nav-menu-content > li .menu-item-txt {
    transform: translateY(0);
  }
  nav #nav-product-menu.menu-visible .nav-menu-main .nav-menu-content {
    height: auto !important;
  }
  nav #nav-product-menu.menu-visible .nav-menu-main .nav-menu-content li {
    order: 0 !important;
    opacity: 1 !important;
  }
}
@media screen and (max-width: 720px) {
  nav {
    padding: 0 16px;
  }
  nav .nav-logo {
    left: 16px;
    width: 42px;
    background-size: cover;
    background-position: center left 4px;
  }
  nav #nav-menu {
    right: 16px;
  }
  nav #nav-menu.menu-open ~ ul {
    box-shadow: 0 16px 0 16px var(--black-90);
  }
  nav #nav-search {
    right: 48px;
  }
  nav #nav-search #nav-search-box {
    padding: 20px 16px;
  }
  nav #nav-search #nav-search-box .icon-close {
    right: 16px;
  }
  nav #nav-buy {
    right: 92px;
  }
  nav > ul {
    width: calc(100vw - 64px);
  }
  nav > ul > li {
    width: calc(100vw - 64px);
    max-width: none;
  }
  nav #nav-product-menu .nav-menu-main .nav-menu-content {
    width: calc(100vw - 32px);
    max-width: 489px !important;
  }
  nav #nav-product-menu .nav-menu-main .nav-menu-content > li {
    flex-basis: calc(50% - 4px);
    max-width: 240px !important;
  }
}

#toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-blue-for-dark);
  color: var(--black-white);
  padding: 16px 24px;
  border-radius: 100rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
#toast.hide {
  opacity: 0;
  visibility: hidden;
}

main {
  min-height: 100vh;
  padding: 0;
  width: 100%;
}
main > * {
  max-width: 1920px;
  padding-left: 40px;
  padding-right: 40px;
  margin: 0 auto;
}
main .standard-section {
  width: 100%;
  max-width: 1920px;
  padding: 0 40px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  justify-content: space-between;
}
main .standard-section h1 {
  font-size: 40px;
  font-weight: bold;
  line-height: 115%;
  letter-spacing: 1px;
}
main .standard-section h3 {
  font-size: 30px;
  font-weight: var(--font-weight-medium);
  line-height: 130%;
  letter-spacing: 1px;
}
main .standard-section h4 {
  font-size: 24px;
  font-weight: 700;
  line-height: 135%;
  letter-spacing: 0.5px;
}
main .standard-section.title {
  text-align: center;
  padding: 2em 0 1em;
  flex-direction: column;
}
main .standard-section.title > * {
  text-align: center;
}
main .standard-section.title .btn {
  display: inline-block;
  padding: 4px 32px 4px 16px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%2210%22%20viewBox%3D%220%200%207%2010%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M0.292893%201.70696C-0.0976311%201.31643%20-0.0976311%200.683418%200.292893%200.292893C0.683417%20-0.0976311%201.31643%20-0.0976311%201.70696%200.292893L6.41399%204.99992L1.70696%209.70696C1.31643%2010.0975%200.683418%2010.0975%200.292894%209.70696C-0.0976307%209.31643%20-0.0976307%208.68342%200.292894%208.29289L3.58586%204.99992L0.292893%201.70696Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%0A%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  text-underline-offset: 8px;
}
main .standard-section.title .btn:hover {
  -webkit-text-decoration: underline 1px;
          text-decoration: underline 1px;
}
main .standard-section > .column-1 {
  flex: 1;
}
main .standard-section > .column-2 {
  flex: 2;
}
main .standard-section > .column-3 {
  flex: 3;
}
main .standard-section > .column-4 {
  flex: 4;
}
main .standard-section > .column-5 {
  flex: 5;
}
main .standard-section > .column-6 {
  flex: 6;
}
main .standard-section > .column-7 {
  flex: 7;
}
main .standard-section > .column-8 {
  flex: 8;
}
main .standard-section > .column-9 {
  flex: 9;
}
main .standard-section > .column-10 {
  flex: 10;
}
main .standard-section > .column-11 {
  flex: 11;
}
main .standard-section > .column-12 {
  flex: 12;
}
main #slider-container {
  width: 100%;
  max-width: 100vw;
  position: relative;
  height: auto;
  overflow: hidden;
  padding: 0;
}
main #slider-container #slide-controllers {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 90%;
  max-width: 1920px;
  height: 56px;
  z-index: 2;
  pointer-events: none;
}
main #slider-container #slide-controllers .slide-controller {
  position: absolute;
  display: inline-block;
  pointer-events: all;
  width: 56px;
  height: 56px;
  background-color: rgba(151, 151, 151, 0.3);
  border-radius: 100rem;
  align-items: center;
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
}
main #slider-container #slide-controllers .slide-controller:hover {
  background-color: rgba(151, 151, 151, 0.8);
}
main #slider-container #slide-controllers .slide-controller#slide-prev {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.2383%202.33105C17.6077%202.74154%2017.5745%203.37369%2017.1641%203.74316L7.99024%2012L17.1641%2020.2568C17.5745%2020.6263%2017.6077%2021.2584%2017.2383%2021.6689C16.8688%2022.0794%2016.2367%2022.1126%2015.8262%2021.7432L5%2012L15.8262%202.25683C16.2367%201.88739%2016.8688%201.92059%2017.2383%202.33105Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  left: 32px;
}
main #slider-container #slide-controllers .slide-controller#slide-prev:active {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.2383%202.33105C17.6077%202.74154%2017.5745%203.37369%2017.1641%203.74316L7.99024%2012L17.1641%2020.2568C17.5745%2020.6263%2017.6077%2021.2584%2017.2383%2021.6689C16.8688%2022.0794%2016.2367%2022.1126%2015.8262%2021.7432L5%2012L15.8262%202.25683C16.2367%201.88739%2016.8688%201.92059%2017.2383%202.33105Z%22%20fill%3D%22%230192df%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
main #slider-container #slide-controllers .slide-controller#slide-next {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M7.25683%202.33105C6.88739%202.74154%206.92059%203.37369%207.33105%203.74316L16.5049%2012L7.33105%2020.2568C6.92059%2020.6263%206.88739%2021.2584%207.25683%2021.6689C7.6263%2022.0794%208.25845%2022.1126%208.66894%2021.7432L19.4951%2012L8.66894%202.25683C8.25845%201.88739%207.6263%201.92059%207.25683%202.33105Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  right: 32px;
}
main #slider-container #slide-controllers .slide-controller#slide-next:active {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M7.25683%202.33105C6.88739%202.74154%206.92059%203.37369%207.33105%203.74316L16.5049%2012L7.33105%2020.2568C6.92059%2020.6263%206.88739%2021.2584%207.25683%2021.6689C7.6263%2022.0794%208.25845%2022.1126%208.66894%2021.7432L19.4951%2012L8.66894%202.25683C8.25845%201.88739%207.6263%201.92059%207.25683%202.33105Z%22%20fill%3D%22%230192df%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
main #slider-container #slide-bars {
  position: absolute;
  bottom: 57px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 3;
}
main #slider-container #slide-bars .slide-title {
  position: relative;
  width: 72px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
}
main #slider-container #slide-bars .slide-title::after {
  content: " ";
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 72px;
  height: 4px;
  border-radius: 50rem;
  background-color: var(--black-60);
  transition: all 0.3s ease;
  border-left-color: var(--black-20);
  border-left-style: solid;
  border-left-width: 0px;
}
main #slider-container #slide-bars .slide-title:hover {
  color: var(--black-white);
}
main #slider-container #slide-bars .slide-title.active::after {
  animation: progress-bar 5.5s linear forwards;
}
@keyframes progress-bar {
  0% {
    border-left-width: 0px;
  }
  100% {
    border-left-width: 72px;
  }
}
main #slider-container #slide-bars:hover .slide-title {
  color: transparent !important;
}
main #slider-container #slide-bars:hover .slide-title:hover {
  color: white !important;
}
main #slider-container #slide-list {
  position: relative;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  height: auto;
  width: auto;
  min-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  transition: margin-left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
main #slider-container #slide-list:hover {
  animation-play-state: paused;
}
main #slider-container #slide-list .slide-box {
  width: 100vw;
  min-width: 100vw;
  height: 100vh; /* 100vw * 9/16 = 56.25vw for 16:9 aspect ratio */
  max-height: 1080px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  /* 現代瀏覽器支援 aspect-ratio 的備用方案 */
  aspect-ratio: 16/9;
}
main #slider-container #slide-list .slide-box .slide-content {
  height: 100%;
  position: relative;
}
main #slider-container #slide-list .slide-box .slide-content .slide-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
}
main #slider-container #slide-list .slide-box .slide-content video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
main #slider-container #slide-list .slide-box .slide-content .slide-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  white-space: normal;
}
main #slider-container #slide-list .slide-box .slide-content .slide-info.left-only {
  width: 50%;
  left: 0;
}
main #slider-container #slide-list .slide-box .slide-content .slide-info.left-only > div {
  width: -moz-fit-content;
  width: fit-content;
  text-align: left;
  align-items: flex-start;
}
main #slider-container #slide-list .slide-box .slide-content .slide-info .btn:nth-child(1) {
  margin-right: 16px;
}
main #slider-container #slide-list .slide-box .slide-content .slide-info h1 {
  font-size: 68px;
  font-weight: 700;
  line-height: 115%;
  letter-spacing: 1px;
}
main #slider-container #slide-list .slide-box .slide-content .slide-info h3 {
  font-size: 30px;
  font-weight: var(--font-weight-medium);
  line-height: 130%;
  letter-spacing: 1px;
}
main #slider-container #slide-list .slide-box .slide-content .slide-info p {
  font-size: 24px;
  font-weight: 700;
  line-height: 135%;
  letter-spacing: 0.5px;
}
main #slider-container #slide-list .slide-box .btn {
  color: var(--black-90);
  background-color: var(--black-white);
}
main #slider-container #slide-list .slide-box .btn:hover {
  background-color: var(--black-20);
}
main #slider-container #slide-list .slide-box .btn:active {
  color: var(--color-blue-for-light);
  background-color: var(--black-white);
}
main #slider-container #slide-list .slide-box .btn.dark {
  color: var(--black-white);
  background-color: var(--black-80);
}
main #slider-container #slide-list .slide-box .btn.dark:hover {
  background-color: var(--black-70);
}
main #slider-container #slide-list .slide-box .btn.dark:active {
  color: var(--color-blue-for-dark);
  background-color: var(--black-80);
}
main #album-container {
  width: 100%;
  max-width: 100vw;
  position: relative;
  height: auto;
  overflow: hidden;
  padding: 0 0 64px 0;
}
main #album-container #picture-controllers {
  position: absolute;
  bottom: calc(50% - 28px + 32px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1156px;
  height: 56px;
  z-index: 2;
  pointer-events: none;
}
main #album-container #picture-controllers .picture-controller {
  position: absolute;
  display: inline-block;
  pointer-events: all;
  width: 56px;
  height: 56px;
  background-color: rgba(151, 151, 151, 0.3);
  border-radius: 100rem;
  align-items: center;
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
}
main #album-container #picture-controllers .picture-controller:hover {
  background-color: rgba(151, 151, 151, 0.8);
}
main #album-container #picture-controllers .picture-controller#picture-prev {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.2383%202.33105C17.6077%202.74154%2017.5745%203.37369%2017.1641%203.74316L7.99024%2012L17.1641%2020.2568C17.5745%2020.6263%2017.6077%2021.2584%2017.2383%2021.6689C16.8688%2022.0794%2016.2367%2022.1126%2015.8262%2021.7432L5%2012L15.8262%202.25683C16.2367%201.88739%2016.8688%201.92059%2017.2383%202.33105Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  left: 0;
}
main #album-container #picture-controllers .picture-controller#picture-prev:active {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.2383%202.33105C17.6077%202.74154%2017.5745%203.37369%2017.1641%203.74316L7.99024%2012L17.1641%2020.2568C17.5745%2020.6263%2017.6077%2021.2584%2017.2383%2021.6689C16.8688%2022.0794%2016.2367%2022.1126%2015.8262%2021.7432L5%2012L15.8262%202.25683C16.2367%201.88739%2016.8688%201.92059%2017.2383%202.33105Z%22%20fill%3D%22%230192df%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
main #album-container #picture-controllers .picture-controller#picture-next {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M7.25683%202.33105C6.88739%202.74154%206.92059%203.37369%207.33105%203.74316L16.5049%2012L7.33105%2020.2568C6.92059%2020.6263%206.88739%2021.2584%207.25683%2021.6689C7.6263%2022.0794%208.25845%2022.1126%208.66894%2021.7432L19.4951%2012L8.66894%202.25683C8.25845%201.88739%207.6263%201.92059%207.25683%202.33105Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  right: 0;
}
main #album-container #picture-controllers .picture-controller#picture-next:active {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M7.25683%202.33105C6.88739%202.74154%206.92059%203.37369%207.33105%203.74316L16.5049%2012L7.33105%2020.2568C6.92059%2020.6263%206.88739%2021.2584%207.25683%2021.6689C7.6263%2022.0794%208.25845%2022.1126%208.66894%2021.7432L19.4951%2012L8.66894%202.25683C8.25845%201.88739%207.6263%201.92059%207.25683%202.33105Z%22%20fill%3D%22%230192df%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
main #album-container #picture-bars {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 3;
}
main #album-container #picture-bars .picture-title {
  position: relative;
  width: 32px;
  height: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
}
main #album-container #picture-bars .picture-title::after {
  content: " ";
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 32px;
  height: 4px;
  border-radius: 50rem;
  background-color: var(--black-60);
  transition: all 0.3s ease;
  border-left-color: var(--black-20);
  border-left-style: solid;
  border-left-width: 0px;
}
main #album-container #picture-bars .picture-title.active {
  width: 72px;
}
main #album-container #picture-bars .picture-title.active::after {
  width: 72px;
  animation: progress-bar 5.5s linear forwards;
}
@keyframes progress-bar {
  0% {
    border-left-width: 0px;
  }
  100% {
    border-left-width: 72px;
  }
}
main #album-container #picture-list {
  position: relative;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  height: auto;
  width: auto;
  min-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  transition: margin-left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
main #album-container #picture-list:hover {
  animation-play-state: paused;
}
main #album-container #picture-list .picture-box {
  width: calc(100% - 40px);
  min-width: 1100px;
  height: auto;
  max-height: 540px;
  margin: 0 16px 0 0;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  aspect-ratio: 110/54;
  cursor: pointer;
}
main #album-container #picture-list .picture-box:hover > * {
  transform: scale(1.05);
}
main #album-container #picture-list .picture-box .picture-content {
  height: 100%;
  position: relative;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
main #album-container #picture-list .picture-box .picture-content .picture-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
}
main #album-container #picture-list .picture-box .picture-content video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
main #blog-container {
  margin-bottom: 64px;
}
main #blog-container .blog-card {
  display: block;
  position: relative;
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4/3;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
main #blog-container .blog-card:hover .blog-bg {
  transform: scale(1.05);
}
main #blog-container .blog-card:active .blog-bg {
  transform: scale(1.05);
}
main #blog-container .blog-card .blog-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
main #blog-container .blog-card .blog-info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: none;
  padding: 16px;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.9), transparent 70%);
}
main #blog-container .blog-card .blog-info > * {
  width: 100%;
  text-align: left;
}
main #blog-container .blog-card .blog-info .blog-date {
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
  color: var(--black-10);
}
main #blog-container .blog-card .blog-info .blog-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.5px;
  color: var(--black-white);
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media screen and (max-width: 1180px) {
  main {
    margin-top: 56px;
  }
  main .standard-section h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 1px;
  }
  main .standard-section h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 135%;
    letter-spacing: 0.5px;
  }
  main .standard-section h4 {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    line-height: 135%;
    letter-spacing: 0.5px;
  }
  main #slider-container #slide-controllers {
    width: 100%;
  }
  main #slider-container #slide-bars {
    bottom: 50px;
  }
  main #slider-container #slide-bars .slide-title {
    width: 36px;
    height: 4px;
  }
  main #slider-container #slide-bars .slide-title::after {
    width: 36px;
    bottom: 0;
  }
  main #slider-container #slide-bars .slide-title.active {
    width: 72px;
    color: transparent;
  }
  main #slider-container #slide-bars .slide-title.active::after {
    width: 72px;
  }
  main #slider-container #slide-bars:hover .slide-title:hover {
    color: transparent !important;
  }
  main #slider-container #slide-list .slide-box {
    height: 82vw; /* 在較小螢幕上使用更高的比例以提升可見性 */
    aspect-ratio: 11/9;
  }
  main #slider-container #slide-list .slide-box.xmas2025 .slide-content .slide-info {
    justify-content: flex-start;
    padding-top: 10%;
    width: 100%;
  }
  main #slider-container #slide-list .slide-box .slide-content .slide-info {
    padding-left: 5%;
    padding-right: 5%;
  }
  main #slider-container #slide-list .slide-box .slide-content .slide-info > * {
    text-align: center !important;
  }
  main #slider-container #slide-list .slide-box .slide-content .slide-info.left-only {
    justify-content: flex-start;
    padding-top: 10%;
    width: 100%;
  }
  main #album-container #picture-controllers {
    width: calc(85vw + 56px);
    max-width: calc(85vw + 56px);
  }
  main #album-container #picture-list .picture-box {
    width: 85vw;
    min-width: 85vw;
  }
  main #blog-container {
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 16px;
    padding-bottom: 16px;
  }
  main #blog-container::-webkit-scrollbar {
    background-color: var(--black-90);
    opacity: 1;
    height: 4px;
    width: 4px;
  }
  main #blog-container::-webkit-scrollbar-thumb:horizontal {
    background-color: var(--black-70);
    border-radius: 10px;
  }
  main #blog-container .column-4 {
    display: inline-flex;
    width: 420px;
    white-space: normal;
  }
}
@media screen and (max-width: 720px) {
  main .standard-section {
    padding-left: 16px;
    padding-right: 16px;
  }
  main .standard-section h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 135%;
    letter-spacing: 0.5px;
  }
  main .standard-section h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.5px;
  }
  main #slider-container #slide-controllers {
    display: none;
  }
  main #slider-container #slide-bars .slide-title {
    width: 10px;
  }
  main #slider-container #slide-bars .slide-title::after {
    width: 10px;
  }
  main #slider-container #slide-bars .slide-title.active {
    width: 30px;
  }
  main #slider-container #slide-bars .slide-title.active::after {
    width: 30px;
  }
  main #slider-container #slide-bars .slide-title.active::after {
    animation: progress-bar-mobile 5.5s linear forwards;
  }
  @keyframes progress-bar-mobile {
    0% {
      border-left-width: 0px;
    }
    100% {
      border-left-width: 30px;
    }
  }
  main #slider-container #slide-list .slide-box {
    height: 650px; /* 在手機螢幕上使用更高的比例以提升可見性 */
  }
  main #slider-container #slide-list .slide-box .slide-content .slide-info h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 115%;
    letter-spacing: 1px;
  }
  main #slider-container #slide-list .slide-box .slide-content .slide-info h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 135%;
    letter-spacing: 0.5px;
  }
  main #slider-container #slide-list .slide-box .slide-content .slide-info p {
    font-size: 20px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  main #album-container #picture-controllers {
    display: none;
  }
  main #album-container #picture-bars .picture-title {
    width: 10px;
  }
  main #album-container #picture-bars .picture-title::after {
    width: 10px;
  }
  main #album-container #picture-bars .picture-title.active {
    width: 30px;
  }
  main #album-container #picture-bars .picture-title.active::after {
    width: 30px;
    animation: progress-bar 5.5s linear forwards;
  }
  @keyframes progress-bar {
    0% {
      border-left-width: 0px;
    }
    100% {
      border-left-width: 30px;
    }
  }
  main #album-container #picture-list .picture-box {
    width: 85vw;
    min-width: 85vw;
    aspect-ratio: 4/3;
  }
  main #blog-container .column-4 {
    width: 85vw;
    aspect-ratio: 4/3;
  }
}

footer {
  min-height: 300px;
  background-color: var(--black-90);
  padding: 64px 40px 200px 40px;
  width: 100%;
  max-width: 1920px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  box-shadow: 0 50vw 0px 50vw var(--black-90);
}
footer .site-map {
  margin-bottom: 40px;
  -moz-columns: 4;
       columns: 4;
  -moz-column-gap: 16px;
       column-gap: 16px;
}
footer .site-map > ul:nth-child(2) {
  margin-top: 32px;
}
footer .site-map > ul:nth-child(3) {
  -moz-column-break-before: column;
       break-before: column;
}
footer .site-map > ul:nth-child(4) {
  -moz-column-break-before: column;
       break-before: column;
}
footer .site-map > ul:nth-child(5) {
  margin-top: 32px;
}
footer .site-map > ul:nth-child(6) {
  -moz-column-break-before: column;
       break-before: column;
}
footer .site-map > ul li.cate-title {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
  color: var(--black-20);
}
footer .site-map > ul li.cate-title:nth-child(2) {
  -moz-column-break-before: avoid;
       break-before: avoid;
}
footer .site-map > ul li {
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  cursor: pointer;
}
footer .site-map > ul li:hover a {
  color: var(--color-blue-for-dark);
  text-decoration: underline;
}
footer .site-map > ul li .subscribe-intr {
  color: var(--black-20);
  font-size: 13px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}
footer .site-map > ul li #subscribe-message {
  font-size: 13px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: -6px;
  margin-top: 6px;
}
footer .site-map > ul li #subscribe-message.error {
  color: var(--color-red-for-dark);
}
footer .site-map > ul li #subscribe-message.success {
  color: var(--color-green-for-dark);
}
footer .site-map > ul li #subscribe-message.success::before {
  margin-right: 4px;
  margin-left: 4px;
  content: "✓";
  font-weight: bold;
}
footer .site-map input[type=text], footer .site-map input[type=email] {
  width: 100%;
  padding: 8px 8px 8px 16px;
  border: 2px solid var(--color-blue-for-dark);
  border-radius: 8px;
  background: var(--black-70);
  color: var(--black-white);
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  display: inline-block;
  vertical-align: middle;
  margin-right: -46px;
  outline: none;
}
footer .site-map input[type=text]::-moz-placeholder, footer .site-map input[type=email]::-moz-placeholder {
  color: var(--black-20);
}
footer .site-map input[type=text]::placeholder, footer .site-map input[type=email]::placeholder {
  color: var(--black-20);
}
footer .site-map input[type=text]:focus, footer .site-map input[type=email]:focus {
  outline: 2px solid rgba(0, 159, 244, 0.8);
}
footer .site-map input[type=text] {
  width: calc(50% - 3px);
}
footer .site-map input[type=email] {
  background-image: linear-gradient(to left, var(--color-blue-for-dark) 0, var(--color-blue-for-dark) 40px, transparent 40px, transparent 100%);
}
footer .site-map #email-subscribe {
  color: var(--black-white);
  height: 40px;
  vertical-align: middle;
}
footer .site-map #email-subscribe ::before {
  filter: invert(1);
}
footer .contact-sns-terms .ezcast-about {
  border-bottom: 2px solid var(--black-40);
}
footer .contact-sns-terms .ezcast-about li {
  display: inline-block;
  vertical-align: bottom;
  padding-bottom: 8px;
  margin-right: 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}
footer .contact-sns-terms .ezcast-about li.footer-logo {
  display: inline-block;
  width: 120px;
  height: 56px;
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%201314.9%20671.6%22%20style%3D%22enable-background%3Anew%200%200%201314.9%20671.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%0A%3Cg%3E%0A%09%3Cpath%20d%3D%22M170.8%2C414.6c-1.6%2C0-3.1-0.2-4.6-0.5c-11.7-2.6-19-14.1-16.5-25.7c15.5-70.1%2C70.3-124.9%2C140.4-140.4%20%20%20c11.6-2.7%2C23.2%2C4.6%2C25.9%2C16.2c2.7%2C11.6-4.6%2C23.2-16.2%2C25.9c-0.1%2C0-0.3%2C0.1-0.4%2C0.1c-53.7%2C11.8-95.6%2C53.8-107.4%2C107.4%20%20%20C189.7%2C407.6%2C180.9%2C414.6%2C170.8%2C414.6z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M103.9%2C393.5c-12%2C0-21.6-9.7-21.6-21.7c0-1.7%2C0.2-3.5%2C0.6-5.1c23.1-92.1%2C95.5-163.8%2C187.8-186%20%20%20c11.7-2.4%2C23.1%2C5.2%2C25.4%2C16.9c2.2%2C11.1-4.5%2C22.1-15.4%2C25.1c-75.9%2C18-137.1%2C78.6-155.9%2C154.4C122.5%2C386.7%2C113.8%2C393.5%2C103.9%2C393.5z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M238.7%2C446c-26.4-55.2%2C14.3-119.9%2C76.2-119.9c26.1%2C0%2C56.3%2C10%2C65.6%2C39.4c5.1%2C16.2%2C5.2%2C29.5-1.3%2C40.6%20%20%20s-22.4%2C21.9-35.5%2C22c-8%2C0.1-15.6%2C0-30%2C0c12.9-14.2%2C25-25.7%2C34.5-36.4c4.2-4.7%2C6.2-5.8%2C6.4-11.9c0.3-8.4-9.1-11.1-15.3-11.1h-54%20%20%20c-7.9%2C0-14.5%2C3.4-14.5%2C12.3s8.4%2C11%2C13.5%2C11.4c9.9%2C0.9%2C29.5%2C0.6%2C29.5%2C0.6s-24%2C24-37%2C37.8c-3.8%2C4.1-8.6%2C12-2.8%2C17.1s12%2C4.7%2C16.2%2C4.7%20%20%20c14%2C0%2C29.5%2C1.7%2C44.5%2C0.6c27.9-2%2C51.7-12.2%2C57.9-25.1C375.2%2C500.9%2C272.2%2C516%2C238.7%2C446z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M569.1%2C475.7h-97.7V205.6h96v30.7h-60V322H563v30.7h-55.6v93.1h61.7V475.7z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M718.1%2C205.6l-85.8%2C239.8h77.5v30.3H587.9l85.4-239.3h-75v-30.7H718.1z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M860.3%2C471c-10.1%2C5-21.3%2C7.7-32.6%2C7.8c-21.8%2C0-40.6-8.4-56.5-25.2c-15.9-16.8-23.8-52-23.8-105.4%20%20%20c0-58%2C8-97%2C23.8-117.1c15.9-20.1%2C35.2-30.1%2C57.8-30.1c8.5%2C0%2C18.9%2C1.4%2C31.4%2C4.2v33c-7.3-3.1-15.2-4.7-23.1-4.9%20%20%20c-14.1%2C0-26.2%2C7.2-36.2%2C21.6c-10%2C14.4-15%2C42.7-15.1%2C85c0%2C25.2%2C1.1%2C44.9%2C3.3%2C59.1c2.2%2C14.2%2C7.2%2C25.6%2C15.2%2C34%20%20%20c7.9%2C8.4%2C17.9%2C12.6%2C29.9%2C12.6c7.1%2C0%2C15.8-2.2%2C26.1-6.6L860.3%2C471z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M1005.3%2C475.7h-34.8v-22.5h-1c-8.9%2C16.7-20.4%2C25-34.5%2C25c-12%2C0-22.6-5.6-31.7-16.9s-13.7-36.4-13.7-75.6%20%20%20c0-34.8%2C3.5-59.8%2C10.4-75.1c6.9-15.3%2C18.7-23%2C35.5-23c7.9%2C0%2C14.3%2C1.8%2C19.1%2C5.5s9.8%2C9.5%2C14.9%2C17.6h1v-20.3h34.8L1005.3%2C475.7z%20%20%20%20M948.5%2C447.9c8.8%2C0%2C14.7-5.3%2C17.6-15.9c2.9-10.6%2C4.4-28.6%2C4.4-54c0-22.3-1.3-38.1-4-47.2c-2.7-9.1-8.3-13.7-16.8-13.7%20%20%20c-8.5%2C0-14.4%2C4.2-17.7%2C12.7s-4.9%2C23.8-4.9%2C46c0%2C26.1%2C1.3%2C44.7%2C3.9%2C55.6C933.5%2C442.4%2C939.4%2C447.9%2C948.5%2C447.9z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M1128.4%2C321.8c-10.6-4.4-19.7-6.6-27.3-6.6c-7.3%2C0-13.2%2C1.9-17.7%2C5.5c-4.4%2C3.7-6.7%2C8.7-6.7%2C15.1%20%20%20c0%2C5.1%2C1.9%2C10.1%2C5.6%2C15.1c3.7%2C5%2C11.4%2C12.5%2C23.1%2C22.6c11.7%2C10.1%2C19.9%2C19.1%2C24.8%2C27.1c4.9%2C7.9%2C7.4%2C17.1%2C7.3%2C26.4%20%20%20c0%2C14.6-4.9%2C26.7-14.8%2C36.3s-22.5%2C14.4-37.7%2C14.4c-9.9%2C0-21.5-2.6-34.8-7.9v-28.6c12.9%2C5.2%2C23.8%2C7.9%2C32.8%2C7.9%20%20%20c6.7%2C0%2C11.9-1.8%2C15.6-5.4s5.6-8.5%2C5.6-14.6c0-5.7-2.5-11.7-7.5-18c-5-6.4-13.7-14.5-26-24.4c-17.7-14.3-26.5-30.7-26.5-49.2%20%20%20c0-14.6%2C4.8-26.7%2C14.5-36.4c9.7-9.7%2C21.7-14.5%2C36.1-14.5c8.9%2C0%2C20.1%2C2.3%2C33.5%2C7L1128.4%2C321.8z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%09%3Cpath%20d%3D%22M1232.7%2C317.7h-22.3v157.9h-34.8V317.7h-22.3v-27.3h22.3v-50.5h34.8v50.5h22.3V317.7z%22%20fill%3D%22%231C93D9%22%2F%3E%0A%3C%2Fg%3E%0A%0A%3C%2Fsvg%3E");
  background-size: 108% auto;
  background-repeat: no-repeat;
  background-position: center;
  filter: var(--logo-filter);
}
footer .contact-sns-terms .social-media {
  float: right;
  margin-top: -36px;
}
footer .contact-sns-terms .social-media li {
  display: inline-block;
  margin-left: 16px;
}
footer .contact-sns-terms .terms-policy {
  font-size: 13px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
}
footer .contact-sns-terms .terms-policy li {
  display: inline-block;
  margin-top: 8px;
  padding: 0 16px;
  border-right: 1px solid;
}
footer .contact-sns-terms .terms-policy li:last-child {
  border-right: none;
}
footer #nav-language-footer {
  position: relative;
  float: right;
  cursor: pointer;
  background-color: var(--black-90);
  padding: 0px 12px 0px 2px;
  border-radius: 100rem;
  margin-top: -16px;
}
footer #nav-language-footer #nav-language-footer-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 144px;
  background: var(--black-70);
  color: var(--black-white);
  border-radius: 10px;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-100% + 80px));
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  text-align: center;
}
footer #nav-language-footer #nav-language-footer-menu.dropdown-visible {
  opacity: 2;
  visibility: visible;
  transform: translateY(calc(-100% - 52px));
}
footer #nav-language-footer #nav-language-footer-menu li {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
footer #nav-language-footer #nav-language-footer-menu li:active {
  background: var(--color-blue-for-dark);
}
footer #nav-language-footer #nav-language-footer-menu li:hover {
  background: var(--black-70);
  color: var(--color-blue-for-dark);
}
footer #nav-language-footer #nav-language-footer-menu li a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
}
@media screen and (max-width: 1180px) {
  footer .site-map {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 16px;
  }
  footer .site-map > ul li.cate-title {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 140%;
    letter-spacing: 0.5px;
  }
  footer .site-map > ul:first-child {
    grid-area: 1/1/3/4;
  }
  footer .site-map > ul:nth-child(2) {
    grid-area: 1/4/3/6;
    margin-top: 0;
  }
  footer .site-map > ul:nth-child(3) {
    grid-area: 1/6/3/8;
  }
  footer .site-map > ul:nth-child(4) {
    grid-area: 3/1/4/4;
  }
  footer .site-map > ul:nth-child(5) {
    grid-area: 4/1/5/4;
    margin-top: 0;
  }
  footer .site-map > ul:nth-child(6) {
    grid-area: 3/4/5/8;
  }
  footer #nav-language-footer #nav-language-footer-menu {
    position: fixed !important;
    bottom: -320px;
    left: 0;
    right: auto;
    top: auto;
    transform: translateY(320px);
    margin: 0;
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(3, auto);
    border-radius: 10px 10px 0 0;
  }
  footer #nav-language-footer #nav-language-footer-menu.dropdown-visible {
    bottom: 0;
    transform: none;
  }
}
@media screen and (max-width: 720px) {
  footer {
    position: relative;
    padding: 64px 16px 160px;
  }
  footer .site-map {
    display: block;
    -moz-columns: auto;
         columns: auto;
  }
  footer .site-map > ul:not(.ul-subscribe) {
    overflow: hidden;
    margin-bottom: 16px;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
  footer .site-map > ul:not(.ul-subscribe):nth-child(2), footer .site-map > ul:not(.ul-subscribe):nth-child(5) {
    margin-top: 0;
  }
  footer .site-map > ul:not(.ul-subscribe) li.cate-title {
    cursor: pointer;
    position: relative;
    padding-right: 30px;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 140%;
    letter-spacing: 0.5px;
    color: var(--black-white);
    background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.33106%207.25683C2.74155%206.88739%203.3737%206.92059%203.74317%207.33105L12%2016.5049L20.2568%207.33105C20.6263%206.92059%2021.2585%206.88739%2021.6689%207.25683C22.0794%207.6263%2022.1126%208.25845%2021.7432%208.66894L12%2019.4951L2.25684%208.66894C1.8874%208.25845%201.9206%207.6263%202.33106%207.25683Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center right;
  }
  footer .site-map > ul:not(.ul-subscribe) li.cate-title[data-href] {
    content: "";
    background-image: none;
  }
  footer .site-map > ul:not(.ul-subscribe).expanded {
    border-bottom: 1px solid var(--black-60);
  }
  footer .site-map > ul:not(.ul-subscribe).expanded li.cate-title {
    color: var(--black-40);
    background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.33105%2016.7432C2.74155%2017.1126%203.3737%2017.0794%203.74316%2016.6689L12%207.49512L20.2568%2016.6689C20.6263%2017.0794%2021.2585%2017.1126%2021.6689%2016.7432C22.0794%2016.3737%2022.1126%2015.7415%2021.7432%2015.3311L12%204.50488L2.25684%2015.3311C1.88739%2015.7415%201.9206%2016.3737%202.33105%2016.7432Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  }
  footer .site-map > ul:not(.ul-subscribe).expanded li:not(.cate-title) {
    height: -moz-fit-content;
    height: fit-content;
    min-height: 24px;
    margin-bottom: 12px;
    animation: fadeIn 0.3s ease;
  }
  footer .site-map > ul:not(.ul-subscribe) li:not(.cate-title) {
    height: 0;
    min-height: 0px;
    margin-bottom: 0;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  footer .site-map > ul li.cate-title {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 140%;
    letter-spacing: 0.5px;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  footer .contact-sns-terms .ezcast-about li {
    display: none;
  }
  footer .contact-sns-terms .terms-policy {
    position: absolute;
    bottom: 84px;
  }
  footer .contact-sns-terms .terms-policy li {
    padding: 0 8px;
  }
  footer .contact-sns-terms .terms-policy li:first-child {
    padding-left: 0;
  }
  footer .contact-sns-terms .terms-policy li:last-child {
    padding-right: 0;
  }
  footer #nav-language-footer {
    float: none;
    margin-top: 16px;
    margin-left: -12px;
  }
}

body[data-theme=light] {
  /* nav::before {
  	background: var(--black-90);
  } */
}
body[data-theme=light] footer {
  border-top: 2px solid var(--black-60);
}
body[data-theme=light] .icon-shopping-bag::before {
  filter: invert(0);
}
body[data-theme=light] nav .nav-btn:hover > p {
  color: var(--color-blue-for-dark);
}
body[data-theme=light] nav #nav-buy.icon-shopping-bag:hover:before {
  filter: invert(0);
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M11.9995%202C14.2086%202%2015.9995%203.79086%2015.9995%206H17.1323C17.6299%206%2018.0521%206.36584%2018.1225%206.8584L19.8374%2018.8584C19.9234%2019.4608%2019.4556%2019.9999%2018.8471%2020H5.15281C4.54434%2019.9999%204.07652%2019.4608%204.16257%2018.8584L5.87742%206.8584C5.94788%206.36585%206.37006%206%206.86765%206H7.99948C7.99948%203.79102%209.79056%202.00025%2011.9995%202ZM14.9995%208C14.4474%208.00027%2014.0205%208.47467%2013.7553%208.95898C13.4157%209.5793%2012.7565%2010%2011.9995%2010C11.2426%209.99983%2010.5841%209.57916%2010.2446%208.95898C9.9794%208.47454%209.55177%208%208.99948%208C8.4474%208.00026%207.98729%208.45517%208.12351%208.99023C8.56411%2010.7203%2010.1323%2011.9998%2011.9995%2012C13.8668%2012%2015.4358%2010.7204%2015.8764%208.99023C16.0127%208.45502%2015.5518%208%2014.9995%208ZM11.9995%204C10.8951%204.00025%209.99948%204.89559%209.99948%206H13.9995C13.9995%204.89543%2013.104%204%2011.9995%204Z%22%20fill%3D%22%230192df%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
body[data-theme=light] .icon-search:hover:before {
  filter: invert(0);
}
body[data-theme=light] .icon-globe:hover:before {
  filter: invert(0);
}
body[data-theme=light] .icon-menu:hover:before {
  filter: invert(0);
}
body[data-theme=light] footer .site-map #email-subscribe.icon-arrow-right::before {
  filter: invert(0);
}
@media screen and (max-width: 1180px) {
  body[data-theme=light] nav > ul > li#nav-product, body[data-theme=light] nav > ul > li#nav-product:hover {
    background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.33106%207.25683C2.74155%206.88739%203.3737%206.92059%203.74317%207.33105L12%2016.5049L20.2568%207.33105C20.6263%206.92059%2021.2585%206.88739%2021.6689%207.25683C22.0794%207.6263%2022.1126%208.25845%2021.7432%208.66894L12%2019.4951L2.25684%208.66894C1.8874%208.25845%201.9206%207.6263%202.33106%207.25683Z%22%20fill%3D%22%23000000%22%2F%3E%0A%3C%2Fsvg%3E%0A") !important;
  }
  body[data-theme=light] nav > ul > li#nav-product.menu-active {
    background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.33105%2016.7432C2.74155%2017.1126%203.3737%2017.0794%203.74316%2016.6689L12%207.49512L20.2568%2016.6689C20.6263%2017.0794%2021.2585%2017.1126%2021.6689%2016.7432C22.0794%2016.3737%2022.1126%2015.7415%2021.7432%2015.3311L12%204.50488L2.25684%2015.3311C1.88739%2015.7415%201.9206%2016.3737%202.33105%2016.7432Z%22%20fill%3D%22%23000000%22%2F%3E%0A%3C%2Fsvg%3E%0A") !important;
  }
}
@media screen and (max-width: 720px) {
  body[data-theme=light] footer .site-map > ul:not(.ul-subscribe) li.cate-title {
    background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.33106%207.25683C2.74155%206.88739%203.3737%206.92059%203.74317%207.33105L12%2016.5049L20.2568%207.33105C20.6263%206.92059%2021.2585%206.88739%2021.6689%207.25683C22.0794%207.6263%2022.1126%208.25845%2021.7432%208.66894L12%2019.4951L2.25684%208.66894C1.8874%208.25845%201.9206%207.6263%202.33106%207.25683Z%22%20fill%3D%22%23000000%22%2F%3E%0A%3C%2Fsvg%3E%0A") !important;
  }
  body[data-theme=light] footer .site-map > ul:not(.ul-subscribe).expanded li.cate-title {
    background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.33105%2016.7432C2.74155%2017.1126%203.3737%2017.0794%203.74316%2016.6689L12%207.49512L20.2568%2016.6689C20.6263%2017.0794%2021.2585%2017.1126%2021.6689%2016.7432C22.0794%2016.3737%2022.1126%2015.7415%2021.7432%2015.3311L12%204.50488L2.25684%2015.3311C1.88739%2015.7415%201.9206%2016.3737%202.33105%2016.7432Z%22%20fill%3D%22%23000000%22%2F%3E%0A%3C%2Fsvg%3E%0A") !important;
  }
}/*# sourceMappingURL=basic_v2025.css.map */