@charset 'utf-8';
@import url('https://dlcdnimgs.asus.com/vendor/public/fonts/css/roboto.css');
@font-face {
  font-family: 'Xolonium_regular';
  src: url('../fonts/xolonium-regular.otf'),
    url('../fonts/xolonium-regular.otf') format('embedded-opentype'),
    url("../fonts/xolonium-regular.ttf") format("opentype"),
    url("../fonts/xolonium-regular.eot");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Xolonium_bold';
  src: url('../fonts/xolonium-bold.otf'),
    url('../fonts/xolonium-bold.otf') format('embedded-opentype'),
    url("../fonts/xolonium-bold.ttf") format("opentype"),
    url("../fonts/xolonium-bold.eot");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ROGFontsv';
  src: url('../fonts/rogfontsv1.5-regular.otf');
  src: url('../fonts/rogfontsv1.5-regular.otf') format('embedded-opentype');
  src: url("../fonts/rog fonts v1.6.1.ttf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
/* --------------------------Reset------------------------ */
body {
  margin: 0;
}
/* RCD 20200610 */
/*
	#hd * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        word-wrap: break-word;
        word-break: break-word;
    }
    */
#solid_power_cooling * {
  margin: 0;
  padding: 0;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-word;
}
#solutions-wrap * {
  margin: 0;
  padding: 0;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-word;
}

::selection {
  background: #1d2124;
  color: #CE0000;
}
::-moz-selection {
  background: #1d2124;
  color: #ffffff;
}
#hd {
  font-family: "Roboto Condensed", "Arial", sans-serif;
  background: black;
  color: #FFF;
  font-size: 16px;
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  background-color: #000;
}
#hd ul {
  list-style: none;
}
#hd ul,
#hd li,
#hd figure {
  margin: 0;
  padding: 0;
}
#hd h1,
#hd h2,
#hd h3,
#hd h4,
#hd p,
#hd a,
#hd li {
  font: inherit;

}
#hd img {
  display: block;
  height: auto;
  border: none;
  max-width: 100% !important;
  margin: 0 auto;
}
/* ---------- BLOCK ---------- */
#hd .w90 {
  width: 90%;
  margin: 0 auto;
  position: relative;
}
#hd .w80 {
  width: 80%;
  margin: 0 auto;
  position: relative;
}
#hd .w900,
#hd .w1200,
#hd .w1400 {
  width: 90%;
  margin: 0 auto;
  position: relative;
}
#hd .w1920 {
  max-width: 1920px;
}
#hd .w1400 {
  max-width: 1400px;
}
#hd .w1200 {
  max-width: 1200px;
}
#hd .w900 {
  max-width: 900px;
}
#hd .col25,
#hd .col33,
#hd .col30,
#hd .col40,
#hd .col45,
#hd .col50,
#hd .col55,
#hd .col60,
#hd .col70,
#hd .col80 {
  display: inline-block;
  margin-left: -5px;
  vertical-align: middle;
}
#hd .col10,
#hd .f15 {
  width: 10%;
}
/*RCD 20200610*/
#hd .col15,
#hd .f15 {
  width: 15%;
}
#hd .col20,
#hd .f20 {
  width: 20%;
}
#hd .col24,
#hd .f24 {
  width: 24%;
}
#hd .col25,
#hd .f25 {
  width: 25%;
}
#hd .col33,
#hd .f33 {
  width: 33.33%;
}
#hd .col30,
#hd .f30 {
  width: 30%;
}
#hd .col40,
#hd .f40 {
  width: 40%;
}
#hd .col45,
#hd .f45 {
  width: 45%;
}
#hd .col50,
#hd .f50 {
  width: 50%;
}
#hd .col55,
#hd .f55 {
  width: 55%;
}
#hd .col60,
#hd .f60 {
  width: 60%;
}
#hd .col70,
#hd .f70 {
  width: 70%;
}
#hd .col80,
#hd .f80 {
  width: 80%;
}
#hd .col100,
#hd .f100 {
  width: 100%;
}
#hd .ib-top {
  vertical-align: top;
}
#hd .ib-bottom {
  vertical-align: bottom;
}

#hd .fleft {
  float: left;
}
#hd .fright {
  float: right;
}
#hd .cf:after {
  content: '';
  display: block;
  clear: both;
}
#hd .d-flex {
  display: flex;
}
#hd .flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
#hd .hidden {
  display: none;
}

#hd .align-items-center {
  align-items: center;
}
#hd .align-items-end {
  align-items: flex-end;
}
#hd .justify-content-center {
  justify-content: center;
}
#hd .justify-content-between {
  justify-content: space-between;
}

#hd .hd_480on,
#hd .hd_620on,
#hd .hd_1024on {
  display: none;
}

#hd .container {
  margin: 0 auto;
}
#hd .mr25 {
  margin-right: 1.5625em;
}
#hd .mt50 {
  margin-top: 3em;
}
#hd .mt70 {
  margin-top: 4.375em;
}
#hd .mt80 {
  margin-top: 5em;
}
#hd .mt100 {
  margin-top: 6.25em;
}
#hd .mt120 {
  margin-top: 7.5em;
}
#hd .mb25 {
  margin-bottom: 1.5625em;
}
#hd .mb80 {
  margin-bottom: 5em;
}

#hd .list-disc{display: block;width: 100%;}
#hd .list-disc li{
  font-size: 16px;
  position: relative;
  padding-left: 1em;
}
#hd .list-disc li:before{
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 6px;
  height: 6px;
  border: 2px #d29c6c solid;
  border-radius: 5px;
}
/* --------------------------TXT-------------------------- */
#hd h1,
#hd h3,
#hd h4,
#hd h5,
#hd h6 {
  font-family: 'Xolonium_regular', sans-serif;
  font-weight: 100;

  /* letter-spacing: .08em; */
}
#hd .txt-title {
  font-family: 'Xolonium_regular', sans-serif;
}
#hd h1 {
  font-size: 5em;
  padding-bottom: 25px;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
  line-height: .8em;
}
#hd h2 {
  /* font-family: "ROGFontsv", sans-serif; */
  font-family: 'Xolonium_regular', sans-serif;
  position: relative;
  font-size: 5em;
  display: block;
  text-transform: uppercase;
  line-height: 1.3em;
  color: #fff;
  letter-spacing: .02em;
  margin-top: 40px;
  margin: 0;
}
#hd h2 span.lowercase {
  text-transform: lowercase;

}
#hd h3 {
  font-size: 3em;
  display: inline-block;
  color: #fff;
  line-height: 1.2em;
  text-shadow: black .1em .1em 0.3em;
  margin: 3% 0;
}
#hd h4 {
  font-size: 2.3em;
  margin-bottom: 0;
  margin-bottom: 4%
}
#hd h5 {
  font-size: 1.7em;
  margin-bottom: 0;
  line-height: 1.1em;
}
#hd h6 {
  font-size: 1.1m;
}
#hd .txt-gradient {
  color: #fff !important;
  background: -webkit-linear-gradient(left, #fff 10%, #999 20%, #fff 50%, #999 80%, #fff 90%);
  background: -o-linear-gradient(left, #fff 10%, #999 20%, #fff 50%, #999 80%, #fff 90%);
  background: -moz-linear-gradient(left, #fff 10%, #999 20%, #fff 50%, #999 80%, #fff 90%);
  background: linear-gradient(to right, #fff 10%, #999 20%, #fff 50%, #999 80%, #fff 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
  font-weight: bold;
}
#hd a,
#hd p,
#hd b,
#hd small {
  font-family: "Roboto Condensed", "Arial", sans-serif;
  font-weight: 400;
  color: inherit;
}

#hd th {
  font-family: "Roboto Condensed", "Arial", sans-serif;
  font-weight: 300;
  padding: 1.8em 2em;
  font-size: 1em;

}
#hd thead th a {
  font-family: 'Xolonium_regular', sans-serif;
  font-weight: 300;
  color: #ffffff;
}
#hd b.controlsTXT {
  font-weight: 400;
}
#hd p,
#hd li {
  font-size: 1.0em;
  letter-spacing: .05em;
  font-weight: 300;
  line-height: 1.5em;
  margin: 0;
  /* margin-bottom: 20px; */
}
#hd li {
  margin-bottom: 0;
}
#hd small {
  font-size: .8em;
  color: #999;
  line-height: .8em;
  font-weight: 300;
  letter-spacing: .08em;

}
#hd .txt-bold {
  font-weight: 500;
}
#hd .txt-gradient-w {
  color: #fff !important;
  background: #f81a1a;
  background: -webkit-linear-gradient(left, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%, #777 100%);
  background: -o-linear-gradient(left, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%, #777 100%);
  background: -moz-linear-gradient(left, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%, #777 100%);
  background: linear-gradient(to right, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%, #777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
}
#hd .txt-gradient-r {
  color: #f81a1a !important;
  background: #f81a1a;
  background: -webkit-linear-gradient(left, #bd0300 0%, #ff0400 30%, #ff0400 70%, #bd0300 100%);
  background: -o-linear-gradient(left, #bd0300 0%, #ff0400 30%, #ff0400 70%, #bd0300 100%);
  background: -moz-linear-gradient(left, #bd0300 0%, #ff0400 30%, #ff0400 70%, #bd0300 100%);
  background: linear-gradient(to right, #bd0300 0%, #ff0400 30%, #ff0400 70%, #bd0300 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
}
/*ie11 above fixed*/
_:-ms-fullscreen,
:root #hd .txt-gradient {
  background: transparent !important;
}
#hd .txt-center {
  text-align: center;
}
#hd .txt-left {
  text-align: left;
}
#hd .txt-right {
  text-align: right;
}
#hd .hd-uppercase{text-transform: uppercase;}

/*----------- COLOR -----------*/
#hd .color-primary {
  color: #c00d3b;
}
#hd .color-red {
  color: #aa0a04;
}
#hd .color-blue {
  color: #3e87d1;
}
#hd .color-grey {
  color: #000;
}
#hd .color-white {
  color: #fff;
}
#hd .txt-grey {
  color: #adadad;
  font-weight: 400;
}
#hd .txt-white {
  color: #ffffff;
}
#hd .txt-link {
  color: #01b1e3;
  text-decoration: underline;
  font-weight: 400;
}
#hd .gradient45d {
  background: linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%);
  background: -moz-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%);
  background: -webkit-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%);
  background: -o-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%);
}

/* ---------- fp-nav --------- */
#fp-nav ul li {
  text-align: center;
}
#fp-nav ul li a span,
#fp-nav ul li:hover a span {
  width: 6px;
  height: 6px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: rgba(255, 255, 255, .6);
}
#fp-nav ul li.active a span,
#fp-nav ul li.active:hover a span {
  top: 0;
  left: 0;
  right: 0;
  height: 13px;
  width: 13px;
  margin: auto;
  background-color: #c00d3b;
}
#fp-nav ul li:hover a span {
  background-color: #c00d3b;
}
#fp-nav ul li .fp-tooltip {
  color: #c00d3b;
  top: -8px;
}
#fp-nav ul li.active .fp-tooltip {
  top: -8px;
}

/* ---------- scrollUp ------- */
#hd #scrollUp {
  float: left;
  position: fixed;
  right: 25px;
  bottom: 40px;
  z-index: 17;
  width: 45px;
  height: 45px;

  cursor: pointer;
  z-index: 999;
  opacity: 0;
  border: 2px solid #585858;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#hd #scrollUp.hd-show {
  opacity: 1;
}
#scrollUp svg {
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 5px;
  left: 0;
  fill: #585858;
  -webkit-transform: rotateZ(270deg);
  -moz-transform: rotateZ(270deg);
  -ms-transform: rotateZ(270deg);
  -o-transform: rotateZ(270deg);
  transform: rotateZ(270deg);
}
#scrollUp:hover svg {
  fill: white;
}
#hd #scrollUp:hover,
#hd #scrollUp:active {
  background-color: #353535;
}

#hd section {
  margin-top: 5%;
}
#hd .mobile-on {
  display: none;
}

/* ----------- select_bar ------------- */
#hd .select_bar {
  margin: auto;
  justify-content: center;

  position: relative;
}
#hd .select_bar::before,
#hd .select_bar::after {
  content: '';
  position: absolute;
  height: 2px;
  background: linear-gradient(to left, rgba(182, 182, 182, 0.205) 0%, rgba(206, 206, 206, 0.562) 3%, rgb(206, 206, 206) 15%, transparent 20%, transparent 50%, transparent 75%, rgb(206, 206, 206) 90%, rgba(206, 206, 206, 0.562) 97%, rgba(182, 182, 182, 0.205) 100%);
  background: -webkit-linear-gradient(to left, rgba(182, 182, 182, 0.205) 0%, rgba(206, 206, 206, 0.562) 3%, rgb(206, 206, 206) 15%, transparent 20%, transparent 50%, transparent 75%, rgb(206, 206, 206) 90%, rgba(206, 206, 206, 0.562) 97%, rgba(182, 182, 182, 0.205) 100%);
  background: -o-linear-gradient(to left, rgba(182, 182, 182, 0.205) 0%, rgba(206, 206, 206, 0.562) 3%, rgb(206, 206, 206) 15%, transparent 20%, transparent 50%, transparent 75%, rgb(206, 206, 206) 90%, rgba(206, 206, 206, 0.562) 97%, rgba(182, 182, 182, 0.205) 100%);
  background: -moz-linear-gradient(to left, rgba(182, 182, 182, 0.205) 0%, rgba(206, 206, 206, 0.562) 3%, rgb(206, 206, 206) 15%, transparent 20%, transparent 50%, transparent 75%, rgb(206, 206, 206) 90%, rgba(206, 206, 206, 0.562) 97%, rgba(182, 182, 182, 0.205) 100%);
  filter: blur(1px);
}
#hd .select_bar_a::before {
  top: 0;
  left: 5%;
  width: 87%;
}
#hd .select_bar_a::after {
  bottom: 0;
  left: 8%;
  width: 87%;
}
#hd .select_bar_b::before {
  top: 0;
  left: 14%;
  width: 69%;
}
#hd .select_bar_b::after {
  bottom: 0;
  left: 17%;
  width: 69%;
}
#hd .select_bar .choose_bg {
  min-width: 330px;
  min-width: 230px;
  /*RCD 20200610*/
  max-width: 375px;
  padding: 17px;
  margin: 0 -1px;
  position: relative;
  cursor: pointer;
  border-radius: 0 20px 0 0;
  background-color: #222;
  transform: skew(30deg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hd .select_bar .choose_bg::before {
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 0 20px 0 0;
  position: absolute;
  top: 0;
  left: 0;
  background: -webkit-linear-gradient(right bottom, #777 0%, #ddd 20%, #777 50%, #ddd 80%, #777 100%);
  background: -o-linear-gradient(right bottom, #777 0%, #ddd 20%, #777 50%, #ddd 80%, #777 100%);
  background: -moz-linear-gradient(right bottom, #777 0%, #ddd 20%, #777 50%, #ddd 80%, #777 100%);
  background: linear-gradient(right bottom, #777 0%, #ddd 20%, #777 50%, #ddd 80%, #777 100%);
  z-index: 0;
}
#hd .select_bar .choose_bg::after {
  content: '';
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  border-radius: 0 20px 0 0;
  position: absolute;
  top: 2px;
  left: 3px;
  background-color: #222;
  background: -webkit-linear-gradient(left, #2222 0%, rgb(32, 32, 32) 90%, rgb(35, 35, 35) 95%, rgb(20, 20, 20) 100%);
  background: -o-linear-gradient(right, #222 0%, rgb(32, 32, 32) 90%, rgb(35, 35, 35) 95%, rgb(20, 20, 20) 100%);
  background: -moz-linear-gradient(right, #222 0%, rgb(32, 32, 32) 90%, rgb(35, 35, 35) 95%, rgb(20, 20, 20) 100%);
  background: linear-gradient(to right, #222 0%, rgb(32, 32, 32) 90%, rgb(35, 35, 35) 95%, rgb(20, 20, 20) 100%);
  z-index: 0;
}
#hd .select_bar .choose_bg .text {
  transform: skew(-30deg);
  opacity: .8;
  /*RCD 20200615*/
  position: relative;
  z-index: 1;
}
#hd .select_bar .choose_bg:hover .text,
#hd .select_bar .choose_bg.hd-active .text {
  opacity: 1;
}
#hd .select_bar .choose_bg:hover {
  opacity: 1;
}
/* #hd .select_bar .choose_bg.hd-active::after{
		background-color: #0470b2;
		background: -webkit-linear-gradient(right, #5f5f5f 0%,#a1a6ac 6%,#5f5f5f 100%);
		background: -o-linear-gradient(right, #5f5f5f 0%,#a1a6ac 6%,#5f5f5f 100%);
		background: -moz-linear-gradient(right, #5f5f5f 0%,#a1a6ac 6%,#5f5f5f 100%);
		background: linear-gradient(right, #5f5f5f 0%,#a1a6ac 6%,#5f5f5f 100%);
		background: linear-gradient(90deg, #aaa 0%,#bbc3d1 29%,#777777 51%,#bbc3d1 78%,#777 100%);
	} */
#hd .select_bar .choose_bg img {
  position: relative;
}
#hd .select_bar .choose_bg h5 {
  color: #FFF;
  position: relative;
  margin-top: 0;
  /* RCD 20200610 */
}
#hd .select_bar .choose_bg.alt h5 {
  color: #f3cf03;
  /*RCD 20200615*/
  font-weight: bold;
}
#hd .select_bar .choose_bg p {
  margin-bottom: 0;
  position: relative;
  font-size: .8em;
}
#hd .select_bar a {
  cursor: auto;
}








#hd h3 {
  text-align: center;
  display: block;
  text-shadow: 2px 2px 10px rgba(140, 160, 184);

}



/* -----------#sec_kv------------- */
#hd .kvBox {
  position: relative;
}
#hd .kvBox .toplogo,
#hd .kvBox .bottomlogo {
  position: absolute;
}
#hd .kvBox img {
  width: 100%;
}
#hd .kv-txt,
#hd .choose-txt {
  padding: 0 6%;
  margin: 3% auto;

}
/*------------new!!!!  tool-ai-audio-------------------*/

#hd #ai-noise-cancelation { margin-top: 4em; padding: 6em 0; position: relative; overflow: hidden; }
#hd #ai-noise-cancelation *{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#hd #ai-noise-cancelation .col50,
#hd #ai-noise-cancelation .col70{margin-left: 0;}
#hd #ai-noise-cancelation .color-primary{color: #02aee5; }
#hd #ai-noise-cancelation small{color: unset;}
#hd .hd-btn.hd-btn-frame {
    font-weight: bold;
    letter-spacing: 0;
    border-radius: 0;
    border: 1px solid #02aee5;
    color: #02aee5;
    background: transparent;
    -moz-transition: color 0.25s ease;
    -o-transition: color 0.25s ease;
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
}

#hd .hd-btn.hd-btn-frame:hover {
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    color: white;
}
#hd #ai-noise-cancelation h2 + p { margin-bottom: 1em; }
#hd #ai-noise-cancelation .hd-feature { width: 100%; max-width: 1200px; margin: 4em auto 2em; }
#hd #ai-noise-cancelation .hd-feature li { padding: 0 2em; }
#hd #ai-noise-cancelation .hd-feature li h3 { font-size: 3em; letter-spacing: -.04em; text-transform: none; margin-bottom: 0; }
#hd #ai-noise-cancelation .hd-feature li p {font-size: 1.5em; line-height: 1.25; font-weight: 600; margin-bottom: 0; }
#hd #ai-noise-cancelation a.hd-btn { font-size: 1.125em; padding: .75em 2em; margin-top: 1.75em; }
#hd #ai-noise-cancelation .chart-container .hd-content { position: relative; z-index: 2; }
#hd #ai-noise-cancelation .chart-container > figure { margin-right: -20%; }
#hd #ai-noise-cancelation .chart-container .hd-chart { display: flex; flex-wrap: nowrap; margin: 2em 0; }
#hd #ai-noise-cancelation .chart-container .hd-title { display: flex; flex-direction: column; padding-right: 1em; }
#hd #ai-noise-cancelation .chart-container .hd-title p { line-height: 1; margin: auto 0; }
#hd #ai-noise-cancelation .chart-container .bar-container { min-width: 20em; padding-right: 2em; border-left: 1px solid white; position: relative; overflow: hidden; }
#hd #ai-noise-cancelation .chart-container .bar-container ul { margin: .5em 0; }
#hd #ai-noise-cancelation .chart-container .bar-container ul:first-child { margin-bottom: 1em; }
#hd #ai-noise-cancelation .chart-container .bar-container ul:first-child li:first-child { width: 98.3%; }
#hd #ai-noise-cancelation .chart-container .bar-container ul:last-child li:first-child { width: 74.6%; }
#hd #ai-noise-cancelation .chart-container .hd-bar { width: 80%; height: 1.25em; margin: .35em 0 .35em -1em; background: #aaaaaa; color: black; -moz-transform: skew(30deg, 0deg); -o-transform: skew(30deg, 0deg); -ms-transform: skew(30deg, 0deg); -webkit-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg); position: relative; }
#hd #ai-noise-cancelation .chart-container .hd-bar.hd-bar-primary { background: #02aee5; color: white; }
#hd #ai-noise-cancelation .chart-container .hd-bar.hd-bar-white { background: white; }
#hd #ai-noise-cancelation .chart-container .hd-bar small { display: block; font-weight: 500; line-height: 1.75; text-align: right; padding-right: 1em; -moz-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); }
#hd #ai-noise-cancelation .chart-container .hd-bar p {font-size: 1.25em; white-space: nowrap; position: absolute; left: 100%; top: -.25em; bottom: 0; margin: auto .5em; -moz-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); }
#hd #ai-noise-cancelation .chart-container .hd-tag { width: 9em; align-self: flex-start; text-align: center; color: #02aee5; margin-top: 1em; position: relative; }
#hd #ai-noise-cancelation .chart-container .hd-tag h4 {font-family: "Roboto Condensed", "Arial", sans-serif; font-size: 1.5em; font-weight: bold; color: #02aee5 !important; margin: 0; }
#hd #ai-noise-cancelation .chart-container .hd-tag p { line-height: 1; font-weight: 500; }
#hd #ai-noise-cancelation .chart-container .hd-tag:before { content: ''; display: block; width: 100%; height: 100%; box-sizing: padding-box; padding: .75em .5em; border: 1px solid #02aee5; -moz-transform: skew(25deg, 0deg); -o-transform: skew(25deg, 0deg); -ms-transform: skew(25deg, 0deg); -webkit-transform: skew(25deg, 0deg); transform: skew(25deg, 0deg); position: absolute; top: -.75em; left: -.5em; }
#hd #ai-audio { margin: 1em 0 3em; position: relative; overflow: hidden; }
#hd #ai-audio h2 small { font: inherit; font-size: .875em; }
#hd #ai-audio .player { width: 100%; height: 0; padding-bottom: 45.4918%; background: url("../img/ai/wave.jpg") center no-repeat; background-size: 100% auto; position: relative; }
#hd #ai-audio .player .icon-mic, #hd #ai-audio .player .icon-sound { width: 13%; position: absolute; left: 0; right: 0; margin: 0 auto; }
#hd #ai-audio .player .icon-mic { bottom: 60%; }
#hd #ai-audio .player .icon-sound { top: 57%; }
#hd #ai-audio .player ul { width: 100%; max-width: none; height: 100%; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; }
#hd #ai-audio .player li { width: 18%; padding: 0; text-align: center; position: absolute; white-space: nowrap; }
#hd #ai-audio .player li:nth-child(1) { left: -2%; top: 7%; }
#hd #ai-audio .player li:nth-child(2) { left: -2%; top: 50%; }
#hd #ai-audio .player li:nth-child(3) { right: 0; top: 7%; }
#hd #ai-audio .player li:nth-child(4) { right: 0; top: 50%; }
#hd #ai-audio .player li img { margin-bottom: -10%; }
#hd #ai-audio .player li h3 { font-size: 2.75em; margin-bottom: -.125em; }
#hd #ai-audio .player li p { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-weight: 400; color: #ff9e19; }
#hd #ai-audio .player .hd-btn { font-size: 1.25em; padding: .35em .75em; }
#hd #ai-audio .player .hd-btn.color-primary { color: #02aee5; }
#hd #ai-audio .player .hd-btn.color-grey { color: #aaaaaa; border-color: #aaaaaa; }
#hd #ai-audio .trigger-play { width: 136px; height: 136px; cursor: pointer; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd #ai-audio .trigger-play:before, #hd #ai-audio .trigger-play:after { content: ''; display: block; height: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd #ai-audio .trigger-play:before { width: 100%; padding-bottom: 100%; background: white; border-radius: 50%; }
#hd #ai-audio .trigger-play:after { width: calc(100% - 10px); padding-bottom: calc(100% - 10px); border-radius: 100%; overflow: hidden; background: rgba(0, 0, 0, 0.78) url("../img/ai/play-icon-play.png") center no-repeat; background-size: 190%; }
#hd #ai-audio .trigger-play.is-playing:after { background-image: url("../img/ai/play-icon-pause.png"); }
#hd #ai-audio .switch-container { margin: 0 auto; }
#hd #ai-audio .switch-btn { width: 80%; max-width: 280px; border: 3px solid white; border-radius: 5px; margin: 2em auto 0; }
#hd #ai-audio .switch-btn div {font-size: 1.5em; padding: .5em .75em .25em; cursor: pointer; }
#hd #ai-audio .switch-btn div.active { background: white; color: black; cursor: default; }
#hd #ai-audio .caption { max-width: 800px; margin: 2em auto; }
#hd #ai-audio .caption li { font-weight: lighter; position: relative; }
#hd #ai-audio .caption li:before { content: ''; display: inline-block; vertical-align: middle; width: 50px; height: 5px; margin-right: 20px; }
#hd #ai-audio .caption li.background:before { background: #aaaaaa; }
#hd #ai-audio .caption li.voice:before { background: #a200ff; }
#hd #ai-audio .caption li.speech:before { background: #70e2ff; }
@media screen and (max-width: 1440px) {
	#hd #ai-noise-cancelation .hd-feature li h3 { font-size: 2.5em; }
  #hd #ai-noise-cancelation .chart-container > figure { width: 60%; margin-right: -10%; }
  #hd #ai-noise-cancelation .chart-container .bar-container { min-width: 18em; }
  #hd #ai-noise-cancelation .chart-container .hd-tag { width: 6em; }
  #hd #ai-audio .switch-btn { max-width: 18vw; margin: 2em auto 0; }
  #hd #ai-audio .switch-btn div { font-size: 1.75vw; }
  #hd #ai-audio .player .icon-mic, #hd #ai-audio .player .icon-sound { width: 12%; }
  #hd #ai-audio .player li { width: 20%; }
  #hd #ai-audio .player li img { width: 12vw; max-width: none !important; margin-bottom: -10%; }
  #hd #ai-audio .player li h3 { font-size: 3vw; }
  #hd #ai-audio .player li p { font-size: 1.75vw; }
  #hd #ai-audio .player .hd-btn { font-size: 1.75vw; margin-top: .5em; }
  #hd #ai-audio .trigger-play { width: 8vw; height: 8vw; }
}
@media screen and (max-width: 1280px) {
	#hd #ai-noise-cancelation .chart-container { padding: 2em 0; }
  #hd #ai-noise-cancelation .chart-container h3 { font-size: 2em; }
  #hd #ai-noise-cancelation .chart-container > figure { width: 70%; margin-left: -7%; margin-right: -15%; }
  #hd #ai-noise-cancelation .chart-container .bar-container { min-width: 18em; }
}
@media screen and (max-width: 1024px) {
  #hd #ai-audio .trigger-play:after { width: calc(100% - 6px); padding-bottom: calc(100% - 6px); }
  #hd #ai-audio .caption li { padding: 0 1em; }
  #hd #ai-noise-cancelation { padding: 4em 0; }
  #hd #ai-noise-cancelation .hd-feature { font-size: 14px; margin: 3em auto 1em; }
  #hd #ai-noise-cancelation .hd-feature li { padding: 0 1em; }
  #hd #ai-noise-cancelation .hd-feature li h3 { font-size: 2.5em; }
  #hd #ai-noise-cancelation .hd-feature li p { font-size: 1.125em; }
}
@media screen and (max-width: 1023px) {
	#hd #ai-noise-cancelation .chart-container .hd-content { width: 100%; }
  #hd #ai-noise-cancelation .chart-container > figure { width: 100%; margin: 0; }
  #hd #ai-noise-cancelation .chart-container .hd-chart { margin: 1em 0; }
  #hd #ai-noise-cancelation .chart-container .bar-container { width: 60%; }
}
@media screen and (max-width: 768px) {
  #hd #ai-noise-cancelation .hd-feature li h3 { font-size: 2.25em; }
  #hd #ai-audio .switch-btn { max-width: 200px; margin: 1em auto; }
  #hd #ai-audio .switch-btn div { font-size: 1.25em; }
  #hd #ai-audio .player { width: 100%; padding-bottom: 60%; }
  #hd #ai-audio .player .icon-mic, #hd #ai-audio .player .icon-sound { width: 16%; }
  #hd #ai-audio .player li { width: 20%; }
  #hd #ai-audio .player li:nth-child(1) { left: -5%; top: 15%; }
  #hd #ai-audio .player li:nth-child(2) { left: -5%; top: 52%; }
  #hd #ai-audio .player li:nth-child(3) { right: 0; top: 15%; }
  #hd #ai-audio .player li:nth-child(4) { right: 0; top: 52%; }
  #hd #ai-audio .player li img { width: 14vw; }
  #hd #ai-audio .player li h3 { font-size: 4vw; }
  #hd #ai-audio .player li p { font-size: 2.5vw; }
  #hd #ai-audio .player .hd-btn { font-size: 2.5vw; }
  #hd #ai-audio .trigger-play { width: 10vw; height: 10vw; }
  #hd #ai-audio .caption li:before { margin-right: 1em; }
}
@media screen and (max-width: 620px) {
  #hd #ai-noise-cancelation { padding: 3em 0; }
  #hd #ai-noise-cancelation .hd-feature { font-size: 14px; }
  #hd #ai-noise-cancelation .hd-feature li { width: 100%; padding: 0 .5em; margin-bottom: 1.5em; }
  #hd #ai-noise-cancelation .hd-feature li p { font-size: 1.25em; }
  #hd #ai-noise-cancelation .hd-feature li p br { display: none; }
  #hd #ai-noise-cancelation .chart-container { font-size: 12px; }
  #hd #ai-noise-cancelation .chart-container > figure { width: 120%; margin-left: -10%; margin-right: -10%; }
  #hd #ai-noise-cancelation .chart-container .hd-title { padding-right: .5em; }
  #hd #ai-noise-cancelation .chart-container .hd-title p { font-size: 10px; }
  #hd #ai-noise-cancelation .chart-container .bar-container { min-width: 14em; }
  #hd #ai-noise-cancelation .chart-container .hd-bar small { font-size: 10px; }
  #hd #ai-noise-cancelation .chart-container .hd-tag p { font-size: 10px; }
  #hd #ai-audio .player { width: 100%; padding-bottom: 60%; }
  #hd #ai-audio .player .icon-mic, #hd #ai-audio .player .icon-sound { width: 16%; }
  #hd #ai-audio .player .icon-mic { bottom: 65%; }
  #hd #ai-audio .player .icon-sound { top: 60%; }
  #hd #ai-audio .player li { width: 25%; }
  #hd #ai-audio .player li:nth-child(1) { left: -5%; top: 5%; }
  #hd #ai-audio .player li:nth-child(2) { left: -5%; top: 50%; }
  #hd #ai-audio .player li:nth-child(3) { right: -5%; top: 5%; }
  #hd #ai-audio .player li:nth-child(4) { right: -5%; top: 50%; }
  #hd #ai-audio .player li img { width: 16vw; }
  #hd #ai-audio .player li h3 { font-size: 4vw; }
  #hd #ai-audio .player li p { font-size: 3.5vw; }
  #hd #ai-audio .player li p br { display: block; }
  #hd #ai-audio .player .hd-btn { font-size: 2.5vw; }
  #hd #ai-audio .trigger-play { width: 15vw; height: 15vw; }
  #hd #ai-audio .caption { max-width: 220px; flex-direction: column; align-items: flex-start; text-align: left; }
}
/*------------end-- tool-ai-audio-------------------*/
/*-------------new!!!!  leading_connectivy------------------*/

#hd #leading_connectivity {
  background-size: contain;
  background: url(../img/new/title-bg.jpg);
  padding: 3% 0;
  background-repeat: no-repeat;
  width: 100%;
  min-height: inherit;
  margin: 7% 0;

}

#hd #leading_connectivity .inner {
  background: url(../img/new/02-bg.png) center top no-repeat;
  background-size: contain;

}

#hd #leading_connectivity .pic_rwd {
  display: none;
}


#hd #leading_connectivity h3 {
  text-align: center;
  display: block;
  margin-bottom: 200px;

}

#hd #leading_connectivity .intel_logo {
  position: absolute;
  left: 0;
  bottom: -33%;

}

#hd #leading_connectivity .txt-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

#hd #leading_connectivity .txt-box li {
  position: absolute;
  width: 38%;

}

#hd #leading_connectivity .txt-box h5 {
  padding-bottom: 10px;

}

#hd #leading_connectivity .txt-box small {
  line-height: 0.1;
  color: white;


}


#hd #leading_connectivity .txt-box li:nth-child(1) {
  top: 15%;
  left: 20%
}
#hd #leading_connectivity .txt-box li:nth-child(2) {
  top: 95%;
  left: 23%
}
#hd #leading_connectivity .txt-box li:nth-child(3) {
  top: 36%;
  left: 70%
}



@media screen and (max-width: 1300px) {

  #hd #leading_connectivity h3 {
    margin-bottom: 20px;
  }
  #hd #leading_connectivity .pic_rwd {
    display: block;
  }
  #hd #leading_connectivity .pic_pc {
    display: none;
  }

  #hd #leading_connectivity .txt-box {
    position: relative;

  }
  #hd #leading_connectivity .txt-box li {
    position: relative;
    padding-left: 40px;
    width: 100%;
    margin: 20px 0;
  }

  #hd #leading_connectivity .intel_logo {
    display: none;


  }


  #hd #leading_connectivity .txt-box li:nth-child(1) {
    top: 11.15%;
    left: 0%
  }
  #hd #leading_connectivity .txt-box li:nth-child(2) {
    top: 11.15%;
    left: 0%
  }
  #hd #leading_connectivity .txt-box li:nth-child(3) {
    top: 11.15%;
    left: 0%
  }



  #hd #leading_connectivity .txt-box li:nth-child(1):after {
    content: "1";
  }
  #hd #leading_connectivity .txt-box li:nth-child(2):after {
    content: "2";
  }
  #hd #leading_connectivity .txt-box li:nth-child(3):after {
    content: "3";
  }
  #hd #leading_connectivity .txt-box li:after {

    counter-increment: li;
    margin-right: 10px;
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 15px;
    line-height: 23px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    background: #1e1e1e;
    border: 1px solid #88D0FF;
    color: #88D0FF;

  }

}




/*-------------new!!!! solid power_cooling------------------*/

#hd #solid_power_cooling {
  background: url(../img/new/title-bg.jpg);
  padding: 3% 0;
  background-repeat: no-repeat;
  width: 100%;
  min-height: inherit;
  background-size: contain;
}
#hd #solid_power_cooling h3 {
  text-align: center;
  display: block;
  margin-bottom: 60px;
}

#hd #solid_power_cooling .flex_power {
  display: flex;
  flex-wrap: wrap;

}



#hd #solid_power_cooling .col50 {
  padding: 10px 30px;

}


#hd #solid_power_cooling h5 {
  padding-bottom: 20px;
}



@media screen and (max-width:1024px) {
  #hd #solid_power_cooling .col50 {
    width: 100%;
  }
}



/*-------------new!!!! diy_friendly------------------*/


#hd #diy_friendly {
  background: url(../img/new/title-bg.jpg);
  padding: 3% 0;
  background-repeat: no-repeat;
  width: 100%;
  min-height: inherit;
  background-size: contain;
}


#hd #diy_friendly .inner {
  display: flex;
  align-items: center;

}
#hd #diy_friendly .txt {
  order: 1;
}
#hd #diy_friendly .pic {
  order: 2;

}


#hd #diy_friendly h5 {
  padding-bottom: 20px;
}



@media screen and (max-width: 1024px) {

  #hd #diy_friendly .inner {
    display: flex;

    flex-wrap: wrap;

  }
  #hd #diy_friendly .col50 {
    width: 100%;
  }
  #hd #diy_friendly .txt {
    order: 2;
  }
  #hd #diy_friendly .pic {
    order: 1;

  }

}





/* -----------#sec_key------------- */
#hd #sec_key>h3 {
  margin-bottom: 50px;
}
#hd #sec_key .key_figure figure.hd-active {
  opacity: 1;
  animation-name: active_fadnIn;
  animation-duration: .9s;
  animation-timing-function: ease-out;
}
#hd #sec_key .key_figure div {
  padding: 1%;
  line-height: 1em !important;
}
#hd #sec_key .key_figure .key_title {
  height: 10%;
  margin-bottom: 3%;
}
#hd #sec_key .key_figure p {
  line-height: 1.4em;
  padding: 0 2%;
  font-size: 1em;
}
#hd #sec_key .key_figure small {
  font-size: .7em;
  padding: 0 2%;
}
#hd #sec_key figure .key_pic {
  transition: .8s;
  overflow: hidden;
}
#hd #sec_key figure .key_pic:hover>img {
  transform: scale(1.1);
}
#hd #sec_key figure.optiMen .col50 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#hd #sec_key figure.optiMen .col50 .key_title {
  padding: 1% 2% !important;
}
#hd #sec_key figure.optiMen .key_pic {
  width: 50%;
}
#hd #sec_key figure.optiMen .txt-box {
  width: 50%;
  text-align: left;
}
#hd #sec_key li {
  /*RCD 20200610*/
  font-size: 0.7em;
}


/*------ new------*/
#hd #sec_key a {
  cursor: pointer;
  width: 100%;
}


/* -----------------#sec_choose------------ */

#hd #sec_choose {

  background: url(../img/new/title-bg.jpg);
  padding-top: 3%;
  background-repeat: no-repeat;
  width: 100%;
  min-height: inherit;
  background-size: contain;


}

#hd #sec_choose h3 {
  text-align: center;
  display: block;
  text-shadow: 2px 2px 10px rgba(140, 160, 184);

}

@media screen and(max-width:768px) {

  #hd #sec_choose .col25 {
    width: 30%;
  }

}



/*--------btn_choicing--------------*/
#hd #sec_choose ul .choose_bg_a h5 {
  color: #FFF;
}
#hd .choose_figure h4 {
  color: #FFF;
}




#hd #sec_choose ul .choose_bg_a {
  position: relative;
  opacity: .5;
  padding: 4% 0;
  background: #000
}
#hd #sec_choose ul .choose_bg_a:nth-child(1):hover,
#hd #sec_choose ul .choose_bg_a:nth-child(1).hd-active {
  background-color: rgb(20, 20, 20);
  cursor: pointer;
  border-top: 3px solid #8c006e;
  opacity: 1;
}
#hd #sec_choose ul .choose_bg_a:nth-child(2):hover,
#hd #sec_choose ul .choose_bg_a:nth-child(2).hd-active {
  background-color: rgb(20, 20, 20);
  cursor: pointer;
  border-top: 3px solid #bda520;
  opacity: 1;
}
#hd #sec_choose ul .choose_bg_a:nth-child(3):hover,
#hd #sec_choose ul .choose_bg_a:nth-child(3).hd-active {
  background-color: rgb(20, 20, 20);
  cursor: pointer;
  border-top: 3px solid #02c5e4;
  opacity: 1;
}
#hd #sec_choose ul .choose_bg_a:nth-child(4):hover,
#hd #sec_choose ul .choose_bg_a:nth-child(4).hd-active {
  background-color: rgb(20, 20, 20);
  cursor: pointer;
  border-top: 3px solid #6f6e6f;
  opacity: 1;
}
#hd #sec_choose .choose_bg_a img {
  position: relative;
}
#hd #sec_choose .choose_bg h5 {
  color: #FFF;
  margin-top: -12%;
  position: relative;
}
#hd #sec_choose .choose_bg p {
  position: relative;
  font-size: 16px;
  letter-spacing: -0.02em
}

#hd #sec_choose>h3 {
  margin-bottom: 30px;
}
#hd #sec_choose a {
  font-family: 'Xolonium_regular', sans-serif;
}
#hd #sec_choose .tab-more {
  margin-bottom: 15px;
  text-align: left;
}
#hd #sec_choose .tab-more li {
  display: inline-block;
  position: relative;
  text-align: center;
  width: 38%;
  min-width: 180px;
  margin: 0 .5% 10px;
  min-height: 3.4rem;
  padding: 0 10px;
  vertical-align: top;
  border-left: #ffffff 2px solid;
  border-right: #ffffff 2px solid;
  -webkit-transform: skewX(25deg);
  -moz-transform: skewX(25deg);
  -ms-transform: skewX(25deg);
  -o-transform: skewX(25deg);
  transform: skewX(25deg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#hd #sec_choose .tab-more li:hover,
#hd #sec_choose .tab-more li.active {
  background-color: #fff;
}
#hd #sec_choose .tab-more li:hover span,
#hd #sec_choose .tab-more li.active span {
  /* color: #33A2D2; */
  color: #0470b2;
}
#hd #sec_choose .tab-more li span {
  font-family: 'Xolonium', sans-serif;
  font-size: .78em;
  font-weight: 600;
  line-height: 1.2em;
  letter-spacing: normal;
  min-height: calc(4rem - 23px);
  color: #ffffff;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: relative;
  -webkit-transform: skewX(-25deg);
  -moz-transform: skewX(-25deg);
  -ms-transform: skewX(-25deg);
  -o-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
#hd #sec_choose .tab-more li::before,
#hd #sec_choose .tab-more li::after {
  content: '';
  width: 100%;
  height: 2px;
  background: -webkit-linear-gradient(right, #ffffff 0%, #ffffff 50%, #ffffff 100%);
  background: -moz-linear-gradient(right, #ffffff 0%, #ffffff 50%, #ffffff 100%);
  background: -o-linear-gradient(right, #ffffff 0%, #ffffff 50%, #ffffff 100%);
  background: linear-gradient(to left, #ffffff 0%, #ffffff 50%, #ffffff 100%);
  position: absolute;
  left: 0;
}
#hd #sec_choose .tab-more li::before {
  top: 0;
}
#hd #sec_choose .tab-more li::after {
  bottom: 0;
}
#hd #sec_choose .txt_list {
  margin-top: 2%;
}
#hd #sec_choose .txt_list small {
  color: #FFF;
  font-size: 0.8em;
  margin-left: 2%;
}
#hd #sec_choose .txt_list li {
  display: flex;
  align-items: center;
  margin: 2% 0;
}
#hd #sec_choose .txt_list li span {
  display: inline-block;
  background-image: url(../img/dot.svg);
  background-repeat: no-repeat;
  height: 15px;
  width: 15px;
}


@media screen and (max-width:1024px) {

  #hd #sec_choose .col25 {
    width: 100%;
  }
}



















/* ---------choose_figure ------------ */
#hd .choose_figure figure {
  background-repeat: no-repeat;
  background-position: right;
}
#hd .choose_figure figure p {
  font-family: "Roboto", "Roboto", "Helvetica", "STHeiti Light", "Apple LiGothic Medium", "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.3em;
  text-align: left;
  width: 100%;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 30px;
}
#hd .choose_figure .f_pic {
  position: relative;
}
#hd .choose_figure .po_re {
  position: relative;
}
#hd .choose_figure .po_ab {
  position: absolute;
}
#hd .choose_figure div.txt_3,
#hd .choose_figure div.txt_4,
#hd .choose_figure div.txt_5 {
  text-align: left;
  padding: 5% 8% 5% 13%;
}
#hd .choose_figure div.txt_1,
#hd .choose_figure div.txt_2 {
  text-align: left;
  padding: 3% 16%;
  padding-left: 10%;
}
#hd .choose_figure img.move {
  left: -25%;
  top: 0;
}
#hd .choose_figure img.bg {
  margin: 0;
  float: right;
}
/* ------------figure 1------------ */
#hd .choose_figure figure:nth-child(1) {}

#hd .choose_figure .txt_1 {
  background: #8c006e;

}
/* ------------figure 2------------ */
#hd .choose_figure figure:nth-child(2) {}
#hd .choose_figure .txt_2 {
  background: linear-gradient(to right, #f4c138, #f3b21b);

}
/* ------------figure 3------------ */
#hd .choose_figure figure:nth-child(3) {}
#hd .choose_figure .txt_3 {
  background: #02c5e4;

}
#hd .choose_figure .txt_3 span {
  display: inline-block;
  width: 100%;
  margin-bottom: 0px;
  padding-left: 20px;
  font-size: 15px;
  font-weight: 300;
  position: relative;
}
#hd .choose_figure .txt_3 span:after {
  content: "●";
  position: absolute;
  top: 0px;
  left: 3px
}
#hd .choose_figure .txt_3 p.note {
  font-size: 13px;
}
/* ---------------figure 4------------ */
#hd .choose_figure figure:nth-child(4) {
  /*background: #fff;*/
  background-position: 0 0;
  background-size: cover;
  background-color: transparent;
  width: 100%;
  height: 0;
  padding-bottom: 38.5416%;
  position: relative;

}
#hd .choose_figure .txt_4 {
  display: flex;
  flex-wrap:wrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  margin-left: auto;
  position: absolute;
  top: 0;right: 0;bottom: 0;
  margin:auto;
  /*background: linear-gradient(to right, #fff, #fff);*/
}
#hd .choose_figure .txt_4 h4{color: #c5a687;}
#hd .choose_figure .txt_4 h4 img{
  max-width: 380px !important;
}
#hd .choose_figure .txt_4 p,
#hd .choose_figure .txt_4 span {
  color: #000
}
#hd .choose_figure .txt_4 .hd-btn{
  display: inline-block;
  border:2px solid black;
  border-radius: 3px;
  padding:.5em 1em;
  margin:2em 0;
}




#hd #sec_choose figure .carousel-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}



#hdfigure .text_1 .carousel-item .more {
  margin-top: 30px;
  background: #8c006e;
  padding: 10px 70px;
  color: #FFF;
  display: block;
  border-radius: 4px;
  font-family: 'Xolonium_regular', sans-serif;
  display: block;
}



#hd figure .text_1 .carousel-item .pro_btn {background: #8c006e; }
#hd figure .text_2 .carousel-item .pro_btn {background: #f4c138; }
#hd figure .text_3 .carousel-item .pro_btn {background: #02c5e4; }
#hd figure .text_4 .carousel-item .pro_btn {background: #6f6e6f; }
#hd figure .carousel-item .pro_btn {
  margin-top: 30px;
  background: #8c006e;
  padding: 10px 70px;
  color: #FFF;
  display: block;
  border-radius: 4px;
  font-family: 'Xolonium_regular', sans-serif;
  display: block;
}
/* ---------- #sec_table ---------- */
#hd #sec_table {
  padding: 0 0 100px 0;
  position: relative;
}
#hd #sec_table .learn {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  padding-top: 55%;
  font-size: 16px;
  color: white;
  opacity: 0;
  transition: all .3s ease;
}
#hd #sec_table a:hover .learn {
  opacity: 1
}
#hd #sec_table h1 {
  text-align: center;
  margin-bottom: 100px;
  text-shadow: 0 0 15px #0000bf;
}
#hd #sec_table table {
  width: 99%;
  border: 0;
  border-collapse: collapse;
}
#hd #sec_table td,
#hd #sec_table th {
  border: 1px solid #888889;
  background-color: transparent;
  padding: 6px 8px;
  text-align: center;
  font-weight: 300;
  line-height: 1.5;
}
#hd #sec_table .hd_pic th {
  border: 0;
  background-color: transparent !important;
  padding-right: 0;
}
#hd #sec_table thead th {
  padding: 20px 5px;

}
#hd #sec_table .mobile-off thead th {
  width: auto;
}
#hd #sec_table .mobile-off thead th:first-child {
  width: 20%;
}
#hd #sec_table th {
  background-color: #16334e;
  font-weight: 400;
}
/* #hd #sec_table .mCustomScrollbar{
	overflow-x:scroll;
} */
#hd #sec_table .table_small {
  margin: 3% auto 0;
  padding: 0 2%;
}


/* -------------table-scroll--------------- */
#hd #sco_style::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #555;
}

#hd #sco_style::-webkit-scrollbar {
  width: 12px;
  background-color: #555;
}

#hd #sco_style::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #F5F5F5;
}


/* ---------table 第一列 固定---------- */

#hd .mobile-off table {
  table-layout: fixed;
  position: relative;
}

#hd .th_fixed {
  position: sticky;
  left: 9.9% !important;
  /* 首行永遠固定於左 */
  z-index: 1;
  border: 1px solid #888889 !important;
  background-color: #1f4468 !important;
}
#hd .th_fixed::after {
  content: "";
  position: absolute;
  width: 1%;
  height: 106%;
  background-color: #888889;
  left: -1%;
  top: 0;
  z-index: -1;
}
#hd .mobile-off table thead tr:nth-child(1) th:nth-child(1),
#hd .mobile-off table thead tr:nth-child(2) th:nth-child(1),
#hd .mobile-off table thead tr:nth-child(3) th:nth-child(1),
#hd .mobile-off table thead tr:nth-child(4) th:nth-child(1),
#hd .mobile-off table tbody tr th:nth-child(1) {
  position: sticky;
  left: -1px;
  /* 首行永遠固定於左 */
  z-index: 1;
  border: 1px solid #888889 !important;
  background-color: #1f4468 !important;
}

#hd .mobile-off table thead tr:nth-child(1) th:nth-child(1) {
  border: none !important;
}


/* ---------hd_footer---------- */
#hd #hd_footer {
  padding: 3% 0;
  background-color: rgb(37, 37, 37);
}
#hd #hd_footer .w1200 {
  max-width: 1380px;
  text-align: center;
}
#hd #hd_footer .hd_logo {
  width: 200px;
  display: inline-block;
  vertical-align: middle;
}
#hd #hd_footer h3 {
  font-family: "Roboto", "Arial", sans-serif;
  font-size: 1.7em;
  line-height: 1.25;
  text-transform: none;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 230px);
  margin-right: -5px;
  padding-left: 20px;
}

/* --------- animation ---------- */
@keyframes active_fadnIn {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 100;
  }
}



/* ---------color ANIMATIONS ----- */
@keyframes colorrun {
  from {
    filter: hue-rotate(359deg);
  }
  to {
    filter: hue-rotate(0deg);
  }
}
@-webkit-keyframes colorrun {
  from {
    -webkit-filter: hue-rotate(359deg);
  }
  to {
    -webkit-filter: hue-rotate(0deg);
  }
}
.colorrun {
  -webkit-animation: colorrun 4s infinite linear;
  -o-animation: colorrun 4s infinite linear;
  animation: colorrun 4s infinite linear;
}