:root {
  --v_gree1: #00D15F;
  --v_gree2: #9CFFA3;
  --v_gree3: #007F49;
  --v_blu1: #3700FF;
  --v_blu2: #57E0FF;
  --v_grey1: #505861;
  --v_grey2: #ADACAF;
  --v_grey3: #EFEFEF;
  --v_red: #ed2b3d;
  --v_yel: #FFD836;
  --v_ora: #FE8A25;
  --v_pur: #8E71F4;
  --white: #fff;
  --black: #031624;
}

@font-face {
  font-family: ESBuild;
  src: url("https://css.veeam.com/fonts/es-build-family/web/ES-Build.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
html {
  font-size: 16px;
}

body {
  font-family: ESBuild, "Source Sans 3", "Microsoft Yahei", "Noto Sans TC", sans-serif;
  overflow-x: hidden;
  color: var(--black);
}

a {
  color: inherit;
}

.sec_wrap {
  margin: 0 auto;
  padding: 3rem 0;
}

@media screen and (min-width: 1440px) {
  .sec_wrap {
    max-width: 1440px;
  }
}
.fix_aside {
  position: fixed;
  z-index: 99;
  right: 16px;
  bottom: 16px;
  -webkit-transform: translateX(150%);
          transform: translateX(150%);
  -webkit-transition: -webkit-transform 600ms;
  transition: -webkit-transform 600ms;
  transition: transform 600ms;
  transition: transform 600ms, -webkit-transform 600ms;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.fix_aside.is_active {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.fix_aside .fx_item {
  position: relative;
  display: block;
  border-radius: 0.5em;
  width: 4em;
  height: 4em;
  background: #fff linear-gradient(120deg, #fff, #ddd);
  font-size: 0.95rem;
  cursor: pointer;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.19);
  -webkit-transition: -webkit-transform 240ms, -webkit-box-shadow 240ms;
  transition: -webkit-transform 240ms, -webkit-box-shadow 240ms;
  transition: transform 240ms, box-shadow 240ms;
  transition: transform 240ms, box-shadow 240ms, -webkit-transform 240ms, -webkit-box-shadow 240ms;
}
.fix_aside .fx_item:nth-child(n+2) {
  margin-top: 10px;
}
.fix_aside .fx_item.is_primary {
  background-image: linear-gradient(135deg, var(--v_blu2), var(--v_pur), var(--v_blu1));
  color: #fff;
}
.fix_aside .fx_item:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.19);
}
.fix_aside .fx_item .in_wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.fix_aside .fx_item .in_wrap.txt {
  text-align: center;
  line-height: 1.3;
}
.fix_aside .fx_item .in_wrap.ic {
  width: 100%;
  height: 100%;
  padding: 0.6em;
}
.fix_aside .fx_item .in_wrap .ic_top {
  width: 100%;
  padding-top: 100%;
  background: url("img/ui/arrow_top.png") center/contain no-repeat;
}

@-webkit-keyframes roundAni {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes roundAni {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    opacity: 1;
  }
}
@-webkit-keyframes bounsAni {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes bounsAni {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.key_visual {
  position: relative;
  overflow: hidden;
  padding-top: 56.25vw;
  background: url("img/kvbg.png") center/cover no-repeat;
}
.key_visual img {
  width: 100%;
}
.key_visual .kv__logo {
  position: absolute;
  left: 6.7708333333vw;
  top: 6.7708333333vw;
  z-index: 10;
  width: 15%;
}
.key_visual .kv__title {
  position: absolute;
  left: 6.7708333333vw;
  top: 30vh;
  z-index: 8;
  padding-left: 1rem;
  font-size: 1vw;
}
.key_visual .kv__title .t0 {
  width: 12.5vw;
}
.key_visual .kv__title .t1 {
  margin-top: 1vh;
  color: #fff;
  width: 51.3541666667vw;
}
.key_visual .kv__date {
  margin-top: 2.5em;
  width: 42.0833333333vw;
  margin-left: -1rem;
}
.key_visual .kv__main {
  position: absolute;
  right: 6.7708333333vw;
  top: 0;
  width: 33.3333333333vw;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.key_visual .kv__main .kv__main__pic {
  width: 100%;
  -webkit-animation: bounsAni 8s linear infinite;
          animation: bounsAni 8s linear infinite;
}

.g_main .sc_title {
  text-align: center;
  margin-bottom: 2.5rem;
}
.g_main .sc_title .tit {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--v_gree3);
}
.g_main .sc_title .tip {
  margin-top: 0.5rem;
  font-size: 1.25em;
}

:root {
  --sc_pdd: 4rem;
}

.sc_part1 {
  padding-top: var(--sc_pdd);
  padding-bottom: calc(1.25 * var(--sc_pdd));
  background: url("img/p1bg.png") center/cover no-repeat;
}
.sc_part1 .sc_title .tit {
  color: var(--v_gree1);
}
.sc_part1 .sc_title .tip {
  color: #fff;
}
.sc_part1 .items {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.sc_part1 .item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 32%;
          flex: 0 0 32%;
  text-align: center;
  padding: 0 15px;
}
.sc_part1 .item .pic {
  padding: 0;
  width: 50%;
  margin: 0 auto;
}
.sc_part1 .item .pic .wrap {
  position: relative;
  padding-top: 100%;
  background-color: #fff;
  border-radius: 50%;
  -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.19);
}
.sc_part1 .item .pic .icon {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
}
.sc_part1 .item .txt {
  margin-top: -1.5em;
  line-height: 1.4;
  background-color: #fff;
  border-radius: 1em;
  padding: 2.5em 1em 2em;
  -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.19);
}
.sc_part1 .item .txt .t {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--v_gree1);
}
.sc_part1 .item .txt .ul {
  font-size: 1.2em;
}
.sc_part1 .item .txt .li {
  padding: 3px 0;
}

.sc_part2 {
  padding-top: var(--sc_pdd);
  padding-bottom: calc(1.25 * var(--sc_pdd));
  background: url("img/p2bg.jpeg") center/cover;
}
.sc_part2 .sc_title .tit {
  color: var(--v_gree1);
}
.sc_part2 .items {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.sc_part2 .item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 31.5%;
          flex: 0 0 31.5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.sc_part2 .chart {
  position: relative;
  border-radius: 50%;
  padding: 100px;
  overflow: hidden;
  background: conic-gradient(var(--v_red), var(--v_red) calc(3.6deg * var(--h-stats-chart-value)), var(--v_grey3) calc(3.6deg * var(--h-stats-chart-value)));
}
.sc_part2 .chart::before {
  content: "";
  position: absolute;
  left: 6%;
  bottom: 6%;
  z-index: 1;
  width: 88%;
  height: 88%;
  background: #002833;
  border-radius: 50%;
}
.sc_part2 .num {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: var(--v_yel);
  color: #fff;
}
.sc_part2 .num b {
  font-size: 4.5em;
}
.sc_part2 .num span {
  padding-left: 4px;
  font-size: 2em;
}
.sc_part2 .txt {
  padding: 0 3em;
  text-align: center;
  margin-top: 1rem;
  line-height: 1.4;
  font-size: 1.25em;
  color: var(--v_blu2);
}
.sc_part2 .tip {
  margin-top: 2em;
  text-align: center;
  color: var(--v_grey3);
}
.sc_part2 .tip span {
  color: var(--v_gree1);
}

.sc_part3 {
  background: radial-gradient(circle, var(--v_gree2) 2px, transparent 3px) 0 0 repeat;
  background-size: 24px 24px;
}
.sc_part3 .container {
  padding: 0;
}
.sc_part3 .sc_title {
  margin-bottom: 1.5rem;
}
.sc_part3 .sec_cnts .cnt_point,
.sc_part3 .sec_cnts .cnt_speaker {
  padding: calc(0.5 * var(--sc_pdd)) 20px;
}
.sc_part3 .sec_cnts .cnt_point {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 75%;
          flex: 0 1 75%;
  background-color: #fff;
}
.sc_part3 .sec_cnts .cnt_speaker {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 25%;
          flex: 0 1 25%;
  background: -webkit-gradient(linear, left bottom, left top, from(var(--v_pur)), to(var(--v_blu2)));
  background: linear-gradient(0deg, var(--v_pur), var(--v_blu2));
}

.cnt_point .pic {
  padding: 0 10px;
}
.cnt_point .pic img {
  width: 100%;
}
.cnt_point .pit_item {
  text-align: center;
}
.cnt_point .pit_item .text {
  margin-top: 1rem;
  padding: 0 1em;
  font-size: 1.125em;
  line-height: 1.2;
  color: var(--v_blu1);
}

.cnt_speaker .items {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.cnt_speaker .spk_item {
  position: relative;
  padding: 0 10px;
}
.cnt_speaker .spk_item .photo {
  position: relative;
  z-index: 3;
  max-width: 220px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}
.cnt_speaker .spk_item img {
  max-width: 100%;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.cnt_speaker .spk_item .job {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 1.125em;
  padding: 10px 1em;
  color: #fff;
  border-radius: 32px;
  background-image: linear-gradient(135deg, var(--v_blu2), var(--v_blu1), var(--v_grey2));
  text-align: center;
  -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.cnt_speaker .spk_item .text {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 1rem;
  text-align: center;
  font-size: 1.125em;
}
.cnt_speaker .spk_item .name {
  line-height: 1;
  color: var(--v_yel);
  font-size: 1.25em;
  font-weight: 700;
}
.cnt_speaker .spk_item .name .en {
  padding-left: 0.5rem;
}
.cnt_speaker .spk_item .tit {
  margin-top: 6px;
  line-height: 1.3;
  color: #fff;
}

.sc_cta {
  padding-top: var(--sc_pdd);
  padding-bottom: var(--sc_pdd);
  background: linear-gradient(120deg, var(--v_blu2), var(--v_blu1) 50%, var(--v_pur));
}
.sc_cta .cta {
  text-align: center;
}
.sc_cta .cta .bttn {
  position: relative;
  display: inline-block;
  margin: 0 1em;
  font-size: 1.5em;
}
.sc_cta .cta .bttn .bttn_inwrap {
  position: relative;
  z-index: 2;
  border-radius: 3em;
  padding: 1.2em 0.5em 1.3em;
  width: 16em;
  line-height: 1;
  -webkit-transition: -webkit-transform 300ms;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;
  -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.19);
}
.sc_cta .cta .bttn span {
  font-weight: 700;
}
.sc_cta .cta .bttn:hover {
  text-decoration: none;
}
.sc_cta .cta .bttn:hover .bttn_inwrap {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.sc_cta .cta .bttn.btn_main .bttn_inwrap {
  background-color: var(--v_gree1);
  color: #fff;
}
.sc_cta .cta .bttn.btn_sup .bttn_inwrap {
  background-color: var(--v_gree3);
  color: var(--v_gree2);
}

.sc_gift {
  position: relative;
  padding-top: var(--sc_pdd);
  padding-bottom: var(--sc_pdd);
  overflow: hidden;
}
.sc_gift .pattern {
  position: absolute;
}
.sc_gift .pattern.p1 {
  left: 15%;
  bottom: 0;
  width: 20%;
  height: 10vw;
  background: radial-gradient(circle, var(--v_gree2) 2px, transparent 3px) 0 0 repeat;
  background-size: 24px 24px;
}
.sc_gift .pattern.p2 {
  right: 15%;
  top: 5px;
  width: 10vw;
  height: 10vw;
  background: radial-gradient(circle, var(--v_blu2) 2px, transparent 3px) 0 0 repeat;
  background-size: 24px 24px;
}
.sc_gift .container {
  position: relative;
  z-index: 2;
  max-width: min(1440px, 100%);
}
.sc_gift .items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.gft_item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
  padding: 0 15px;
}
.gft_item .categ_wrapper {
  -webkit-box-flex: 0;
      -ms-flex: 0;
          flex: 0;
  border-radius: 20px 20px 0 0;
  padding: 18px 30px 12px;
  background-image: -webkit-gradient(linear, left top, right top, from(#8C4FFF), to(#40A7FF));
  background-image: linear-gradient(90deg, #8C4FFF, #40A7FF);
  -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
.gft_item .categ {
  font-size: 20px;
  line-height: 1;
  color: #fff;
}
.gft_item .categ .c {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.7em;
  padding: 0.4em 1em;
  border-radius: 1em;
  line-height: 1;
  font-size: 0.75em;
  font-weight: 400;
  border: 1px solid currentColor;
  color: #fff;
  margin-top: -0.2em;
}
.gft_item .wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  border-radius: 0 0 20px 20px;
  height: 100%;
  overflow: hidden;
  padding: 20px 30px;
  -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  background-color: #fff;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.gft_item .text {
  position: relative;
  font-size: 1.25em;
}
.gft_item .name {
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.3;
  height: 2.6em;
  color: var(--v_blu1);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.gft_item .detail {
  margin-top: 0.5em;
  font-size: 0.875em;
  line-height: 1.4;
  text-align: justify;
}
.gft_item .pic {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  margin: 20px auto 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.gft_item .pic img {
  width: 100%;
}
.gft_item .tip {
  padding: 15px 0 0;
  line-height: 1.3;
  font-size: 0.875em;
  color: var(--v_gree3);
  text-align: center;
}

.g_footer {
  background: url("img/security_bg.png") right center/cover no-repeat, linear-gradient(45deg, #00D15F 50%, #007F49);
}
.g_footer .sc_company {
  position: relative;
  padding: 4rem 0;
  overflow: hidden;
}
.g_footer .sc_company .container {
  position: relative;
  padding-left: 7%;
  padding-right: 7%;
}
.g_footer .sc_company .parag_wrap {
  position: relative;
  border-radius: 20px;
  border: 1px solid #fff;
  padding: 30px 50px 40px;
  width: 80%;
  margin: 0 auto;
}
.g_footer .sc_company .parag_wrap .parag {
  position: relative;
  z-index: 2;
  color: #fff;
  line-height: 1.8;
}
.g_footer .sc_company .parag_wrap .parag a {
  color: var(--v_blu2);
  text-decoration: underline;
}
.g_footer .sc_company .parag_wrap .parag a:hover {
  color: var(--v_yel);
}
.g_footer .sc_company .company_tit {
  z-index: 3;
  text-align: center;
  margin-bottom: 20px;
}
.g_footer .sc_company .company_tit .ti,
.g_footer .sc_company .company_tit .nam {
  display: inline-block;
  vertical-align: middle;
}
.g_footer .sc_company .company_tit .ti {
  border-radius: 20px;
  padding: 4px 12px;
  border: 1px solid currentColor;
  color: #fff;
}
.g_footer .sc_company .company_tit .nam {
  margin-left: 6px;
  width: 150px;
}

@media (max-width: 992px) {
  html {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  html {
    font-size: 16px;
  }
  .fix_aside {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .fix_aside .fx_item:nth-child(n+2) {
    margin-top: 0;
    margin-left: 10px;
  }
  .g_first {
    position: relative;
  }
  .g_first .kv__main {
    position: absolute;
    left: 0;
    bottom: 2vh;
    width: 100%;
    text-align: center;
  }
  .g_first .kv__main img {
    width: 80%;
    -webkit-animation: bounsAni 4s linear infinite;
            animation: bounsAni 4s linear infinite;
  }
  .g_main .sc_title {
    margin-bottom: 2rem;
  }
  :root {
    --sc_pdd: 3rem;
  }
  .sc_part1 .sc_title .tip {
    padding: 0 2em;
  }
  .sc_part1 .item {
    margin-top: 2rem;
  }
  .sc_part1 .item .pic {
    width: 35%;
  }
  .sc_part2 .item {
    margin-bottom: 3rem;
  }
  .sc_part3 {
    padding: 20px 20px 40px;
    background: #fff;
  }
  .sc_part3 .sec_cnts .cnt_point {
    padding: 20px 0;
  }
  .sc_part3 .sec_cnts .cnt_speaker {
    padding: 40px 0;
    border-radius: 30px;
  }
  .cnt_point .pic {
    text-align: center;
  }
  .cnt_point .pic img {
    width: 60%;
  }
  .cnt_point .pit_item {
    margin-bottom: 3rem;
  }
  .cnt_point .pit_item .text {
    margin-top: 0;
  }
  .cnt_speaker {
    padding-top: 1rem;
  }
  .cnt_speaker .spk_item .photo {
    max-width: 240px;
  }
  .sc_cta {
    padding-left: 30px;
    padding-right: 30px;
    background: linear-gradient(-15deg, var(--v_blu2), var(--v_blu1), var(--v_grey3));
  }
  .sc_cta .cta .bttn {
    display: block;
    margin: 0;
    font-size: 1.25em;
  }
  .sc_cta .cta .bttn .bttn_inwrap {
    width: 100%;
  }
  .sc_cta .cta .bttn:last-child {
    margin-top: 1.25em;
  }
  .sc_gift .pattern {
    position: absolute;
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
  .sc_gift .pattern.p1 {
    left: -36px;
    bottom: -36px;
    width: 50%;
    height: 160px;
  }
  .sc_gift .pattern.p2 {
    right: -40px;
    top: -70px;
    width: 40%;
    height: 200px;
  }
  .gft_item {
    margin-bottom: 30px;
  }
  .gft_item .name {
    font-size: 1.2em;
  }
  .gft_item .name span {
    display: block;
  }
  .gft_item:last-child {
    margin-bottom: 0;
  }
  .g_footer .container {
    padding-bottom: 2rem;
  }
  .g_footer .sc_company .parag_wrap {
    padding: 40px;
    width: 100%;
  }
}