@charset "UTF-8";
:root {
  font-family: "Noto Sans KR", sans-serif;
}

html {
  scroll-behavior: smooth;
}

:lang(ko) {
  font-family: "Noto Sans KR", sans-serif; /* 韓文字體 */
}

:lang(en) {
  font-family: "Ubuntu", sans-serif; /* 英文字體 */
}

.description {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .description {
    font-size: 22px;
  }
}

img {
  max-width: 100%;
}

.mobile-trigger {
  cursor: pointer;
  display: block;
  height: 20px;
  position: relative;
  transition: 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 30px;
}
.mobile-trigger span,
.mobile-trigger span:after,
.mobile-trigger span:before {
  background: #fff;
  content: "";
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 50%;
  transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s, transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.mobile-trigger span:after,
.mobile-trigger span:before {
  transform: rotate(0deg);
}
.mobile-trigger span:before {
  top: -10px;
}
.mobile-trigger span:after {
  top: 10px;
}
.mobile-trigger span.mobile-menu-active:before {
  transform: rotate(45deg);
}
.mobile-trigger span.mobile-menu-active:after,
.mobile-trigger span.mobile-menu-active:before {
  top: 0;
}
.mobile-trigger span.mobile-menu-active,
.mobile-trigger span.mobile-menu-active:after,
.mobile-trigger span.mobile-menu-active:before {
  transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s, top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
}
.mobile-trigger span.mobile-menu-active:after {
  transform: rotate(-45deg);
  width: 100%;
}
.mobile-trigger span.mobile-menu-active {
  background: 0;
}

.nav {
  min-height: 70px;
  background-color: rgba(13, 5, 27, 0.95);
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  color: #ffffff;
}

.navHover {
  position: relative;
}
.navHover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 0;
  height: 2px;
  background-color: #d71920;
  transition: width 0.2s;
}
.navHover:hover::after {
  width: 100%;
}

.navActive::after {
  width: 100% !important;
}

.afterRed::after {
  content: "";
  width: 159px;
  height: 4px;
  background: #db0531;
  display: block;
  margin: 1rem 0;
  border-radius: 2px;
}
@media screen and (min-width: 768px) {
  .afterRed::after {
    margin: 30px 0;
  }
}

.afterRed_center::after {
  content: "";
  width: 159px;
  height: 4px;
  background: #db0531;
  display: block;
  margin: 1rem auto;
  border-radius: 2px;
}
@media screen and (min-width: 768px) {
  .afterRed_center::after {
    margin: 30px auto;
  }
}

.button {
  border: none;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 7px;
  position: relative;
  text-decoration: none;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  background: linear-gradient(to bottom, #d71920 0%, rgba(215, 25, 32, 0.7) 100%);
}
.button:hover {
  background: #db3238;
  color: #fff;
}

.button--chevron {
  padding: 7px 25px 7px 15px;
}
@media screen and (min-width: 768px) {
  .button--chevron {
    padding: 14px 48px 14px 26px;
  }
}
.button--chevron::after {
  background-image: url("https://global.txone.com/l/998661/2024-06-11/2gfy7/998661/1718092899aIZ0rGll/Global_Element_Campaign_chevron.svg");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(25%, -50%);
  width: 20px;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .button--chevron::after {
    right: 1rem;
  }
}

.indexHeader {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}
@media screen and (min-width: 1200px) {
  .indexHeader {
    background-position: 40%;
  }
}

.videoSection .container {
  max-width: 920px;
}

.videobox {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.videobox iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.networksSection .cardWrap {
  background-color: #1c0e38;
  color: #ffffff;
}
.networksSection .cardWrap .pic {
  height: 235px;
}
.networksSection .cardWrap .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.solutionOverviewSection {
  background-color: #161327;
}
.solutionOverviewSection .card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #1c0e38;
  color: white;
  border: 1px solid #8050fe;
  box-shadow: 0 0px 10px 9px rgba(128, 80, 254, 0.38);
  transition: all 0.3s;
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  .solutionOverviewSection .card {
    padding: 2rem;
  }
}
.solutionOverviewSection .card .button {
  background: linear-gradient(to bottom, #6357a3 0%, rgba(99, 87, 163, 0.9) 100%);
}
.solutionOverviewSection .card:hover {
  background-color: #fff;
  transform: scale(1.05);
  color: #161327;
}
.solutionOverviewSection .card:hover .button {
  background: linear-gradient(to bottom, #d71920 0%, rgba(215, 25, 32, 0.7) 100%);
}
.solutionOverviewSection .card:hover .hoverImg {
  filter: invert(1) brightness(0) sepia(1) saturate(10000%) hue-rotate(0deg);
}
.solutionOverviewSection ul {
  list-style-type: disc;
  list-style-position: inside;
}
.solutionOverviewSection ul li::marker {
  color: #89b829;
}
.solutionOverviewSection .card-body {
  flex: 1 1 auto;
}

.contactSection {
  background-color: #131021;
}

.footer {
  background-color: #161327;
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-weight: 100;
  font-size: 12px;
}
@media screen and (min-width: 567px) {
  .footer {
    font-size: 1rem;
  }
}
.footer a {
  color: #ffffff;
}

form.form {
  font-family: "Noto Sans KR", sans-serif;
}
form.form p {
  padding: 0 !important;
  margin: 0 !important;
  color: white;
}
form.form .form-field,
form.form .no-label,
form.form .submit {
  margin-bottom: 1rem !important;
  color: #212529;
}
form.form .required label {
  background: none !important;
}
form.form .required label::after {
  content: "*";
  color: #8b0000;
  margin-left: 0.25rem;
}
form.form p.errors {
  margin-bottom: 1em !important;
}
form.form .red-color,
form.form div.error,
form.form p.error,
form.form p.error label,
form.form span.error {
  color: #ffffff !important;
}
form.form .form-field {
  position: relative !important;
}
form.form .field-label {
  position: absolute !important;
  top: 0;
  left: 0;
  height: 100% !important;
  pointer-events: none;
  width: auto !important;
  padding: 0.25rem 2rem !important;
}
form.form input:not([type=submit]) {
  display: block !important;
  width: 100% !important;
  font-size: 1rem !important;
  height: calc(3.5rem + 2px) !important;
  line-height: 1.25 !important;
  padding: 0 1.75rem !important;
  background-color: #f7f7fd !important;
  border: none !important;
  border-radius: 33px !important;
  color: #212529 !important;
}
form.form select {
  display: block !important;
  width: 100% !important;
  padding: 0 1.75rem !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: #212529 !important;
  height: calc(3.5rem + 2px) !important;
  line-height: 1.25 !important;
  background-color: #f7f7fd !important;
  border: none !important;
  border-radius: 33px !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("https://www.txone.com/app/themes/TXOne/assets/images/chevron-down-dark.svg");
  background-repeat: no-repeat, repeat;
  background-position: right 1em top 50%, 0 0;
  background-size: 0.65em auto, 100%;
}
form.form textarea.standard {
  display: block !important;
  width: 100% !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: #212529 !important;
  background-clip: padding-box !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  line-height: 1.25 !important;
  padding: 1.625rem 1.75rem 0.625rem !important;
  background-color: #f7f7fd !important;
  border: none !important;
  border-radius: 33px !important;
  height: 100px !important;
}
form.form input[type=submit] {
  border: none;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 7px;
  position: relative;
  text-decoration: none;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  background: linear-gradient(to bottom, #d71920 0%, rgba(215, 25, 32, 0.7) 100%);
  width: 100%;
  font-size: 20px;
  padding: 14px !important;
  margin-top: 1rem !important;
}
form.form a {
  text-decoration: underline;
}

form.formThankYouWrap {
  background-color: white;
  padding: 36px !important;
  border-radius: 30px;
}
form.formThankYouWrap p {
  color: #212529 !important;
  font-size: 1rem !important;
}

::-moz-placeholder {
  color: #212529 !important;
}

::placeholder {
  color: #212529 !important;
}

.absoluteBg {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}
.absoluteBg img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.whyChooseSection {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}
.whyChooseSection ul {
  list-style-type: disc;
  list-style-position: inside;
}
.whyChooseSection ul li::marker {
  color: #db0632;
}

.edgeHeader {
  background-color: #02050e;
}
@media screen and (min-width: 1024px) and (max-width: 1536px) {
  .edgeHeader .absoluteBg img {
    -o-object-position: 15vw;
       object-position: 15vw;
  }
}
@media screen and (min-width: 1536px) and (max-width: 1725px) {
  .edgeHeader .absoluteBg img {
    -o-object-position: 11vw;
       object-position: 11vw;
  }
}

.stellarHeader {
  background-color: #161327;
}
@media screen and (min-width: 1024px) {
  .stellarHeader {
    background-color: #140927;
  }
}

.solutionHighlightsSection {
  background-color: #1b1731;
}
.solutionHighlightsSection .card {
  display: flex;
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: #fff;
  transition: all 0.3s;
  padding: 2rem;
}
@media screen and (min-width: 768px) {
  .solutionHighlightsSection .card {
    padding: 1rem;
  }
}
@media screen and (min-width: 1024px) {
  .solutionHighlightsSection .card {
    padding: 3rem;
  }
}
.solutionHighlightsSection .card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 10px 0px 0px rgba(255, 255, 255, 0.25);
}
.solutionHighlightsSection .card-header {
  flex: 1 1 auto;
}
@media screen and (min-width: 768px) {
  .solutionHighlightsSection .card-header {
    max-height: 176px;
  }
}
.solutionHighlightsSection .card-body {
  flex: 1 1 auto;
}

.whyImportantSection {
  background-color: #1b1731;
}
.whyImportantSection ul {
  list-style-type: disc;
  list-style-position: inside;
}
.whyImportantSection ul li::marker {
  color: #db0632;
}
.whyImportantSection .bookImg {
  filter: drop-shadow(0px 0px 80px rgba(128, 80, 254, 0.8));
}

.whyUseEdgeSection {
  background-color: #131021;
}
@media screen and (min-width: 1680px) {
  .whyUseEdgeSection {
    min-height: 800px;
  }
}
.whyUseEdgeSection ul {
  list-style-type: disc;
  list-style-position: inside;
}
.whyUseEdgeSection ul li::marker {
  color: #db0632;
}
@media screen and (min-width: 1024px) and (max-width: 1100px) {
  .whyUseEdgeSection .absoluteBg img {
    -o-object-position: left;
       object-position: left;
  }
}
@media screen and (min-width: 1100px) and (max-width: 1296px) {
  .whyUseEdgeSection .absoluteBg img {
    -o-object-position: 7vw;
       object-position: 7vw;
  }
}

.dataSheetSection table {
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  .dataSheetSection table {
    font-size: 20px;
  }
}
.dataSheetSection table,
.dataSheetSection th,
.dataSheetSection td {
  border: 1px solid #f2f2f2;
  border-collapse: collapse;
}
.dataSheetSection th {
  background-color: #161327;
  color: white;
}
.dataSheetSection th,
.dataSheetSection td {
  padding: 6px;
}
.dataSheetSection td {
  background-color: white;
}
.dataSheetSection th:first-child {
  border-top-left-radius: 10px;
}
.dataSheetSection tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}
.dataSheetSection th:last-child {
  border-top-right-radius: 10px;
}
.dataSheetSection tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

.partnersSection .cardWrap {
  background-color: #e3e2e9;
}
.partnersSection .cardWrap .pic {
  background-color: #fff;
  height: 155px;
  display: flex;
  justify-content: center;
  align-items: center;
}