@import url(../lib/owl-carousel/owl.carousel.css);
/*  Box Sizing */
/*  Text Truncate */
/* TRANSITION */
/* TRANSFORM */
/* ANIMATION */
/* GRADIENT */
/* OUTER */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap");
#special-sectionOverview { margin-bottom: 100px; }

.width-line-gray { background: none; }

/* ---------- RESET ---------- */
#hd { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; background: black; color: white; font-size: 16px; margin: 0; padding: 0; /* ---------- SCREEN READER ---------- */ }
#hd * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; word-break: break-word; }
#hd * ::selection { background: #1d2124; color: #76d4fe; }
#hd * ::-moz-selection { background: #1d2124; color: #76d4fe; }
#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; padding: 0; margin: 0; }
#hd img { display: block; height: auto; border: none; max-width: 100% !important; margin: 0 auto; }
#hd img.lazyload { opacity: 0; -moz-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; }
#hd img.lazyload.lazyloaded { height: auto; opacity: 1; }
#hd video { max-width: 100%; }
#hd button { display: block; font: inherit; background: none; border: none; border-radius: 0; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
#hd .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#hd a:focus-visible, #hd button:focus-visible, #hd input:focus-visible, #hd select:focus-visible, #hd textarea:focus-visible, #hd [role="button"]:focus-visible, #hd [tabindex="0"]:focus-visible { outline: 1px solid #76d4fe; }
#hd a:focus:not(:focus-visible), #hd button:focus:not(:focus-visible), #hd input:focus:not(:focus-visible), #hd select:focus:not(:focus-visible), #hd textarea:focus:not(:focus-visible), #hd [role="button"]:focus:not(:focus-visible), #hd [tabindex="0"]:focus:not(:focus-visible) { outline: none; }

/* ---------- ANIMATIONS ---------- */
@-webkit-keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
@-moz-keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
@-ms-keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
@-o-keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
@keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
.hd-colorrun { -webkit-animation-delay: 0s; -webkit-animation-duration: 4s; -webkit-animation-name: colorrun; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 4s; -moz-animation-name: colorrun; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 4s; -o-animation-name: colorrun; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 4s; animation-name: colorrun; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: forwards; }

@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-ms-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-o-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
.fadeIn { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.6s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.6s; -moz-animation-name: fadeIn; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.6s; -o-animation-name: fadeIn; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.6s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }

@-webkit-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-ms-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-o-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
#hd .hd-btn { display: flex; justify-content: center; align-items: center; width: 141px; height: 42px; margin: 0 40px; background-image: url(../img/btn-border.png); background-size: 100% auto; color: #fff; position: relative; cursor: pointer; }
#hd .hd-btn p { font-size: 16px !important; font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; padding-top: .2em; position: absolute; z-index: 2; }
#hd .hd-btn .border-full { width: 0; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#hd .hd-btn:hover, #hd .hd-btn:focus-visible { color: black; }
#hd .hd-btn:hover .border-full, #hd .hd-btn:focus-visible .border-full { width: 100%; background-image: url(../img/border-full.png); background-repeat: no-repeat; background-size: cover; }
#hd .hd-btn:before, #hd .hd-btn:after { content: ''; height: 100%; width: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: left top; position: absolute; }
#hd .hd-btn:before { background-image: url(../img/border-light-bottom.png); top: 1px; left: -5px; }
#hd .hd-btn:after { background-image: url(../img/border-light-left.png); background-size: 100% auto; top: 0; left: -6px; }

@font-face { font-family: 'ROGFonts'; src: url("../fonts/ROGFonts-Regular_ES.eot") format("embedded-opentype"), url("../fonts/ROGFonts-Regular_ES.otf") format("opentype"), url("../fonts/ROGFonts-Regular_ES.ttf") format("truetype"), url("../fonts/ROGFonts-Regular_ES.woff") format("woff"), url("../fonts/ROGFonts-Regular_ES.woff2"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'TradeGothicLTPro'; src: url("../fonts/TradeGothicLTPro-Bold.ttf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
#hd { font-size: 16px; }
#hd h2 { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 3.5em; letter-spacing: 0; line-height: 1; color: #ffffff !important; margin-bottom: .25em; word-break: normal; word-wrap: normal; }
#hd h3 { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 2em; letter-spacing: 0; line-height: 1.25; color: #ffffff !important; margin-bottom: .25em; }
#hd h3.color-primary { color: #76d4fe !important; }
#hd h4 { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.25em; font-weight: bold; letter-spacing: .26em; line-height: 1.25; margin-bottom: 1.35em; color: #ffffff !important; opacity: .6; }
#hd h5 { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; color: #ffffff !important; }
#hd h6 { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; color: #ffffff !important; }
#hd p, #hd small, #hd a, #hd li { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }
#hd p { font-size: 1em; line-height: 1.6; font-weight: 300; }
#hd p.color-primary { font-weight: 400; }
#hd b, #hd strong { font-weight: bold; }
#hd small { font-size: .875em; font-weight: 400; letter-spacing: .04em; }
#hd .align-center { text-align: center; }
#hd .align-left { text-align: left; }
#hd .align-italic { font-style: italic; }
#hd a.txt-link { display: inline-block; text-decoration: underline; font-weight: 400; margin-top: .5em; }
#hd a.txt-link:hover { color: white; }
#hd .font-rog { font-family: "ROGFonts", "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }
#hd .color-primary { color: #76d4fe; }
#hd .color-white { color: white; }
#hd .color-grey { color: #777777; }
#hd .color-gradient { display: inline-block; color: #76d4fe !important; background-color: #4c97dc; background-image: -moz-linear-gradient(0deg, #4c97dc, #76d4fe); background-image: -webkit-linear-gradient(0deg, #4c97dc, #76d4fe); background-image: linear-gradient(0deg, #4c97dc, #76d4fe); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/*ie11 above fixed*/
_:-ms-fullscreen, :root #hd .color-gradient { background: transparent !important; }

@media screen and (max-width: 1440px) { #hd h2 { font-size: 2.5em; }
  #hd p { font-size: 1.125em; } }
@media screen and (max-width: 1024px) { #hd { font-size: 14px; }
  #hd h2 { font-size: 2.5em; }
  #hd h3 { font-size: 1.75em; }
  #hd p { font-size: 1em; line-height: 1.66; } }
@media screen and (max-width: 768px) { #hd h3 { font-size: 2em; } }
#hd .w95 { width: 94%; margin: 0 auto; position: relative; }
#hd .hd-w900, #hd .hd-w1000, #hd .hd-w1100, #hd .hd-w1200 { width: 80%; max-width: 1200px; margin: 0 auto; position: relative; }
#hd .hd-w900 { max-width: 900px; }
#hd .hd-w1000 { max-width: 1000px; }
#hd .hd-w1100 { max-width: 1100px; }
#hd .hd-col20 { width: 20%; }
#hd .hd-col25 { width: 25%; }
#hd .hd-col33 { width: 33.3333%; }
#hd .hd-col40 { width: 40%; }
#hd .hd-col45 { width: 45%; }
#hd .hd-col50 { width: 50%; }
#hd .hd-col55 { width: 55%; }
#hd .hd-col60 { width: 60%; }
#hd .hd-col65 { width: 65%; }
#hd .hd-col66 { width: 66.6666%; }
#hd .hd-col70 { width: 70%; }
#hd .hd-col75 { width: 75%; }
#hd .hd-col80 { width: 80%; }
#hd .hd-col100 { width: 100%; }
#hd .ib-top { display: inline-block; vertical-align: top; }
#hd .ib-bottom { display: inline-block; vertical-align: bottom; }
#hd .flex-wrap { display: flex; flex-wrap: wrap; }
#hd .flex-nowrap { display: flex; flex-wrap: nowrap; }
#hd .align-items-center { align-items: center; }
#hd .align-items-start { align-items: flex-start; }
#hd .align-items-end { align-items: flex-end; }
#hd .justify-content-center { justify-content: center; }
#hd .justify-content-start { justify-content: flex-start; }
#hd .justify-content-end { justify-content: flex-end; }
#hd .justify-content-between { justify-content: space-between; }
#hd .justify-content-around { justify-content: space-around; }
#hd .flex-row-reverse { flex-direction: row-reverse; }
#hd .hd-d-none { display: none; }
#hd .hd-d-ib { display: inline-block; }

@media screen and (min-width: 2000px) { #hd .hd-w900 { max-width: 1200px; }
  #hd .hd-w1000 { max-width: 1400px; }
  #hd .hd-w1200 { max-width: 1600px; } }
@media screen and (max-width: 1023px) { #hd .hd-w900, #hd .hd-w1000, #hd .hd-w1200 { width: 90%; } }
@media screen and (max-width: 1023px) { #hd .hd-d-1023-none { display: none; }
  #hd .hd-d-1023-block { display: block; }
  #hd .hd-d-1023-inline-block { display: inline-block; } }
@media screen and (max-width: 768px) { #hd .hd-d-768-none { display: none; }
  #hd .hd-d-768-block { display: block; } }
@media screen and (max-width: 620px) { #hd .hd-d-620-none { display: none; }
  #hd .hd-d-620-block { display: block; } }
@media screen and (max-width: 480px) { #hd .hd-d-480-none { display: none; }
  #hd .hd-d-480-block { display: block; } }
body.no-scroll { overflow: hidden; }

#hd .sec-armor, #hd .sec-spec { padding: 5em 0; }
#hd .sec-kv { position: relative; overflow: hidden; }
#hd .sec-kv figure { width: 100%; position: relative; }
#hd .sec-kv .hd-container { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto auto 10%; z-index: 2; }
#hd .sec-kv p { font-size: 1.125em; }
#hd .sec-kv .owl-nav { width: 100%; height: 2em; position: absolute; top: 0; bottom: 15%; margin: auto 0; pointer-events: none; }
#hd .sec-kv .owl-nav .owl-prev, #hd .sec-kv .owl-nav .owl-next { width: 3em; height: 3em; pointer-events: all; background-image: url(../img/arrow-white.png); background-repeat: no-repeat; background-position: center center; background-size: 50%; position: absolute; top: 0; margin: 0 1em; opacity: .75; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
#hd .sec-kv .owl-nav .owl-prev:hover, #hd .sec-kv .owl-nav .owl-next:hover { opacity: 1; }
#hd .sec-kv .owl-nav .owl-prev { left: 0; -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); }
#hd .sec-kv .owl-nav .owl-next { right: 0; }
#hd .sec-kv .owl-dots { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; margin: 1em auto; }
#hd .sec-kv .owl-dots .owl-dot { display: inline-block; vertical-align: top; }
#hd .sec-kv .owl-dots .owl-dot span { display: block; width: .5em; height: .5em; border-radius: 50%; margin: 0 .5em; border: 1px solid white; }
#hd .sec-kv .owl-dots .owl-dot:hover span { background: #777777; }
#hd .sec-kv .owl-dots .owl-dot.active span { background: white; }
#hd .sec-armor { background: url(../img/bg-armor.jpg) center top no-repeat; background-size: cover; }
#hd .sec-armor .hd-lightbox { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 10; display: none; }
#hd .sec-armor .hd-lightbox.hd-active { display: block; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.4s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.4s; -moz-animation-name: fadeIn; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.4s; -o-animation-name: fadeIn; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.4s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .sec-armor .hd-lightbox .hd-filter { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; }
#hd .sec-armor .hd-lightbox .trigger-close { width: 60px; height: 60px; border-radius: 50%; position: absolute; top: 0; right: 0; cursor: pointer; pointer-events: all; z-index: 2; }
#hd .sec-armor .hd-lightbox .trigger-close:before, #hd .sec-armor .hd-lightbox .trigger-close:after { content: ''; display: block; width: 24px; height: 2px; background: #76d4fe; border-radius: 1.5px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; -moz-transition: background 0.25s ease; -o-transition: background 0.25s ease; -webkit-transition: background 0.25s ease; transition: background 0.25s ease; }
#hd .sec-armor .hd-lightbox .trigger-close:before { -moz-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }
#hd .sec-armor .hd-lightbox .trigger-close:after { -moz-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); }
#hd .sec-armor .hd-lightbox .trigger-close:hover:before, #hd .sec-armor .hd-lightbox .trigger-close:hover:after { background: white; }
#hd .sec-armor .hd-lightbox .hd-box { width: 60%; height: calc(100% - 120px); max-width: 1000px; position: absolute; top: 100px; right: 0; bottom: 20px; left: 0; margin: auto; overflow-y: auto; }
#hd .sec-armor .hd-lightbox .hd-box::-webkit-scrollbar { width: 3px; }
#hd .sec-armor .hd-lightbox .hd-box::-webkit-scrollbar-track { background: #272727; }
#hd .sec-armor .hd-lightbox .hd-box::-webkit-scrollbar-thumb { background: #777777; }
#hd .sec-armor .hd-lightbox .hd-box::-webkit-scrollbar-thumb:hover { background: #76d4fe; }
#hd .sec-armor .single-box { pointer-events: all; }
#hd .sec-armor .single-box > figure img { width: 40%; margin: -16% auto; opacity: 0; -moz-transform: rotate(270deg) translate3d(-10%, 0, 0); -o-transform: rotate(270deg) translate3d(-10%, 0, 0); -ms-transform: rotate(270deg) translate3d(-10%, 0, 0); -webkit-transform: rotate(270deg) translate3d(-10%, 0, 0); transform: rotate(270deg) translate3d(-10%, 0, 0); -moz-transition: all 0.4s 0.25s ease; -o-transition: all 0.4s 0.25s ease; -webkit-transition: all 0.4s 0.25s ease; transition: all 0.4s 0.25s ease; }
#hd .sec-armor .single-box .hd-container { padding: 2em; background-size: cover; background-position: center; background-repeat: no-repeat; }
#hd .sec-armor .single-box .hd-container figure { padding: 2em; }
#hd .sec-armor .single-box .hd-content { display: flex; flex-direction: column; padding: 4em 2em; }
#hd .sec-armor .single-box .hd-content h3 { padding-left: 1em; }
#hd .sec-armor .single-box .hd-content ul { padding-bottom: 1em; margin-bottom: auto; padding-left: 4em; }
#hd .sec-armor .single-box .hd-content span { display: inline-block; vertical-align: top; width: 1em; height: 1em; margin-right: 1em; margin-top: .25em; border: 1px solid transparent; }
#hd .sec-armor .single-box .hd-content span.hd-border { border-color: #76d4fe; }
#hd .sec-armor .single-box .hd-content p { display: inline-block; }
#hd .sec-armor .single-box .hd-btn { margin-bottom: .25em; background-repeat: no-repeat; }
#hd .sec-armor .center .single-box > figure img { opacity: 1; -moz-transform: rotate(270deg) translate3d(0, 0, 0); -o-transform: rotate(270deg) translate3d(0, 0, 0); -ms-transform: rotate(270deg) translate3d(0, 0, 0); -webkit-transform: rotate(270deg) translate3d(0, 0, 0); transform: rotate(270deg) translate3d(0, 0, 0); }
#hd .slider-armor .item { position: relative; overflow: hidden; cursor: pointer; }
#hd .slider-armor .item:hover img { -moz-transform: translate3d(0, -5%, 0); -o-transform: translate3d(0, -5%, 0); -ms-transform: translate3d(0, -5%, 0); -webkit-transform: translate3d(0, -5%, 0); transform: translate3d(0, -5%, 0); }
#hd .slider-armor img { -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
#hd .slider-armor .owl-stage { padding: 5% 0; }
#hd .slider-armor .owl-item { -ms-touch-action: auto; touch-action: auto; opacity: .4; -moz-transform: scale(0.8, 0.8); -o-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); -moz-transition: transform 0.6s ease, opacity, 0.4s ease; -o-transition: transform 0.6s ease, opacity, 0.4s ease; -webkit-transition: transform 0.6s ease, opacity, 0.4s ease; transition: transform 0.6s ease, opacity, 0.4s ease; }
#hd .slider-armor .owl-item.active { opacity: .4; -moz-transform: scale(0.8, 0.8); -o-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); }
#hd .slider-armor .owl-item.active + .active { opacity: .7; -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
#hd .slider-armor .owl-item.active + .center { opacity: 1; -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }
#hd .slider-armor .owl-item.center + .active { opacity: .7; -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
#hd .slider-armor .owl-item.active + .active + .active + .active + .active { opacity: .4; -moz-transform: scale(0.8, 0.8); -o-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); }
#hd .slider-armor .owl-item:hover { opacity: 1 !important; }
#hd .slider-armor .owl-nav { width: 100%; height: 2em; position: absolute; top: 0; bottom: 0; margin: auto 0; pointer-events: none; }
#hd .slider-armor .owl-nav .owl-prev, #hd .slider-armor .owl-nav .owl-next { width: 2em; height: 2em; pointer-events: all; background-image: url(../img/arrow.png); background-position: center center; background-size: contain; position: absolute; top: 0; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
#hd .slider-armor .owl-nav .owl-prev:hover, #hd .slider-armor .owl-nav .owl-next:hover { background-image: url(../img/arrow-hover.png); }
#hd .slider-armor .owl-nav .owl-prev { right: 100%; -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); }
#hd .slider-armor .owl-nav .owl-next { left: 100%; }
#hd .slider-armor .owl-dots { text-align: center; margin: 1em auto; }
#hd .slider-armor .owl-dots .owl-dot { display: inline-block; vertical-align: top; }
#hd .slider-armor .owl-dots .owl-dot span { display: block; width: 8px; height: 8px; border-radius: 50%; margin: 0 5px; background: #272727; }
#hd .slider-armor .owl-dots .owl-dot:hover span { background: #777777; }
#hd .slider-armor .owl-dots .owl-dot.active span { background: #76d4fe; }
#hd .sec-product { background: url(../img/bg-pd.jpg) center top no-repeat; background-size: 100% auto; padding: 4em 0; }
#hd .sec-product ul { margin-top: 1.5em; }
#hd .sec-product li { padding: 0 1em; }
#hd .sec-product a { display: block; margin-bottom: 2em; }
#hd .sec-product a:hover figure:before, #hd .sec-product a:focus-visible figure:before { opacity: 1; -moz-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); }
#hd .sec-product a:hover figure:after, #hd .sec-product a:focus-visible figure:after { opacity: 1; }
#hd .sec-product a:hover img, #hd .sec-product a:focus-visible img { -moz-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); }
#hd .sec-product a:hover h3, #hd .sec-product a:focus-visible h3 { color: #76d4fe !important; }
#hd .sec-product figure { padding: 1em 0; background: #0d0d0d; position: relative; }
#hd .sec-product figure:before { content: ''; display: block; width: calc(100% - 2px); height: calc(100% - 2px); border-style: solid; border-image-slice: 1; border-width: 1px; border-image-source: linear-gradient(135deg, rgba(118, 212, 254, 0.75), black, black, black, rgba(118, 212, 254, 0.75)); position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; opacity: 0; -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); -moz-transition: transform 0.4s ease, opacity 0.25s ease; -o-transition: transform 0.4s ease, opacity 0.25s ease; -webkit-transition: transform 0.4s ease, opacity 0.25s ease; transition: transform 0.4s ease, opacity 0.25s ease; }
#hd .sec-product figure:after { content: ''; display: block; width: 4em; height: 4em; background: url(../img/outbound-link.png) center no-repeat; background-size: 30%; position: absolute; top: 0; right: 0; opacity: 0; -moz-transition: transform 0.4s ease, opacity 0.25s ease; -o-transition: transform 0.4s ease, opacity 0.25s ease; -webkit-transition: transform 0.4s ease, opacity 0.25s ease; transition: transform 0.4s ease, opacity 0.25s ease; }
#hd .sec-product img { width: 90%; -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -moz-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease; transition: transform 0.4s ease; }
#hd .sec-product h3 { font-size: 1em; letter-spacing: .06em; padding: 1em 1em; -moz-transition: color 0.4s ease; -o-transition: color 0.4s ease; -webkit-transition: color 0.4s ease; transition: color 0.4s ease; }
#hd .sec-spec { background: url(../img/bg-spec.jpg) center bottom no-repeat; background-size: 100% auto; }
#hd .sec-spec table { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; border-collapse: collapse; width: 100%; margin: 2em 0; }
#hd .sec-spec table th, #hd .sec-spec table td { vertical-align: top; text-align: left; padding: 10px; }
#hd .sec-spec table th { font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.75em; color: #76d4fe; text-align: center; }
#hd .sec-spec table td { padding-left: 1.5em; padding-right: 1.5em; -moz-transition: background 0.8s ease; -o-transition: background 0.8s ease; -webkit-transition: background 0.8s ease; transition: background 0.8s ease; }
#hd .sec-spec table td img { width: auto; max-width: 100%; max-height: 280px; }
#hd .sec-spec table td:nth-child(2) { padding-left: 2.5em; padding-right: 2.5em; position: relative; }
#hd .sec-spec table td:nth-child(2):before, #hd .sec-spec table td:nth-child(2):after { content: ''; display: block; width: 1px; height: 110%; background-color: transparent; background-image: -moz-linear-gradient(0deg, transparent, #76d4fe, #76d4fe, transparent); background-image: -webkit-linear-gradient(0deg, transparent, #76d4fe, #76d4fe, transparent); background-image: linear-gradient(0deg, transparent, #76d4fe, #76d4fe, transparent); background-color: transparent; position: absolute; top: -10%; }
#hd .sec-spec table td:nth-child(2):before { left: 0; }
#hd .sec-spec table td:nth-child(2):after { right: 0; }
#hd .sec-spec table td:nth-child(2) p { padding: 0 3% 0 5%; }
#hd .sec-spec table td:nth-child(3) img { width: 80%; max-width: 140px !important; margin: .5em auto 0; }
#hd .sec-spec table p, #hd .sec-spec table li { font-size: 1em; font-weight: 300; line-height: 1.5; }
#hd .sec-spec table li { padding-left: 2em; margin-bottom: .75em; position: relative; }
#hd .sec-spec table li:before { content: ''; display: block; width: 4px; height: 4px; border-radius: 4px; background: white; position: absolute; top: .5em; left: 1em; }
#hd .sec-spec table .hd-btn { max-width: 45%; margin: .5em .75em 1em; }
#hd .sec-gallery { padding: 6em .35em; background: url(../img/bg-gallery.jpg) center top no-repeat; background-size: 100% auto; position: relative; }
#hd .sec-gallery:after { content: ''; display: table; clear: both; }
#hd .sec-gallery h2 + p { margin-bottom: 4em; }
#hd .sec-gallery .grid-item { float: left; padding: .35em; }

@media screen and (max-width: 1440px) { #hd .sec-kv .hd-container { margin-bottom: 8%; }
  #hd .sec-armor .single-box .hd-container { padding: 0 2em; }
  #hd .sec-armor .single-box .hd-content { padding: 3em 2em; } }
@media screen and (max-width: 1280px) { #hd .sec-armor .single-box .hd-container { padding: 0; }
  #hd .sec-armor .single-box .hd-content h3 { padding-left: 0; }
  #hd .sec-armor .single-box .hd-content ul { padding-left: 1em; }
  #hd .sec-armor .single-box .hd-content .hd-btn { margin-left: 0; } }
@media screen and (max-width: 1024px) { #hd .sec-armor, #hd .sec-spec { padding: 4em 0; }
  #hd .sec-kv .hd-container { margin-bottom: 5%; }
  #hd .sec-product li { padding: 0 .5em; }
  #hd .sec-product a { margin-bottom: 1em; }
  #hd .sec-gallery { padding-top: 5em; } }
@media screen and (max-width: 1023px) { #hd .sec-armor .hd-lightbox .hd-box { width: 80%; }
  #hd .sec-armor .single-box .hd-content ul { padding: 1.5em 0 2em; } }
@media screen and (max-width: 768px) { body.no-scroll { overflow: auto; }
  #hd .sec-kv .hd-container { margin-bottom: 2em; }
  #hd .sec-kv .hd-item { position: relative; overflow: hidden; }
  #hd .sec-kv img { width: 140%; max-width: none !important; margin-left: -20%; }
  #hd .sec-kv .owl-dots { margin: 0 auto .25em; }
  #hd .sec-armor .hd-w1100 { width: 100%; }
  #hd .sec-armor .hd-lightbox { height: auto; position: relative; }
  #hd .sec-armor .hd-lightbox .hd-filter { display: none; }
  #hd .sec-armor .hd-lightbox .trigger-close { left: 0; right: 0; margin: 0 auto; }
  #hd .sec-armor .hd-lightbox .trigger-close:before, #hd .sec-armor .hd-lightbox .trigger-close:after { width: 10px; }
  #hd .sec-armor .hd-lightbox .trigger-close:before { left: 6px; }
  #hd .sec-armor .hd-lightbox .trigger-close:after { left: -6px; }
  #hd .sec-armor .hd-lightbox .hd-box { width: 100%; max-width: none; max-height: none; position: relative; }
  #hd .sec-armor .single-box .hd-container { padding: 2em; }
  #hd .slider-armor .owl-stage { padding: 5% 0; }
  #hd .sec-spec table th, #hd .sec-spec table td { padding: .5em; }
  #hd .sec-spec table th { font-size: 1.75em; }
  #hd .sec-spec table td:nth-child(2) { padding-left: 1em; padding-right: 1em; }
  #hd .sec-spec table ul { width: 110%; } }
@media screen and (max-width: 620px) { #hd .sec-armor, #hd .sec-spec { padding: 3em 0; }
  #hd .sec-kv .hd-container { position: relative; padding: 2em 0; }
  #hd .sec-kv .hd-item:before { content: ''; display: block; width: 110%; height: 20%; position: absolute; bottom: 0; left: -5%; background-color: black; background-image: -moz-linear-gradient(0deg, black, transparent); background-image: -webkit-linear-gradient(0deg, black, transparent); background-image: linear-gradient(0deg, black, transparent); background-color: transparent; z-index: 2; }
  #hd .sec-kv img { width: 160%; margin-left: -30%; }
  #hd .sec-kv p { width: 100%; }
  #hd .sec-kv .owl-dots { margin: 1em 0 0; position: relative; z-index: 2; }
  #hd .sec-armor .single-box > figure img { margin-top: -6%; margin-bottom: -10%; }
  #hd .sec-armor .single-box .hd-container figure { width: 100%; padding-bottom: 0; }
  #hd .sec-armor .single-box .hd-content { width: 100%; padding: 0 2em; text-align: center; }
  #hd .sec-armor .single-box .hd-content ul { column-count: 2; column-gap: 10; }
  #hd .sec-armor .single-box .hd-content li { max-width: 6em; text-align: left; margin: 0 auto; }
  #hd .sec-armor .single-box .hd-content .hd-btn { margin: 0 auto; }
  #hd .slider-armor .owl-stage { padding: 10% 0; }
  #hd .slider-armor .owl-item { opacity: .7; -moz-transform: scale(0.8, 0.8); -o-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); -moz-transition: transform 0.6s ease; -o-transition: transform 0.6s ease; -webkit-transition: transform 0.6s ease; transition: transform 0.6s ease; }
  #hd .slider-armor .owl-item.active, #hd .slider-armor .owl-item.center + .active { opacity: .7 !important; -webkit-transform: scale(0.8, 0.8) !important; -moz-transform: scale(0.8, 0.8) !important; -ms-transform: scale(0.8, 0.8) !important; -o-transform: scale(0.8, 0.8) !important; transform: scale(0.8, 0.8) !important; }
  #hd .slider-armor .owl-item.center { opacity: 1 !important; -webkit-transform: scale(1, 1) !important; -moz-transform: scale(1, 1) !important; -ms-transform: scale(1, 1) !important; -o-transform: scale(1, 1) !important; transform: scale(1, 1) !important; }
  #hd .sec-product ul { max-width: 480px; margin-left: auto; margin-right: auto; }
  #hd .sec-product li { width: 50%; padding: 0 .25em; }
  #hd .sec-product h3 { padding: 1em .5em; }
  #hd .sec-spec table { display: block; max-width: 400px; margin: 0 auto; }
  #hd .sec-spec table thead { display: none; }
  #hd .sec-spec table tr { display: block; flex-wrap: wrap; flex-direction: column; margin-bottom: 1em; }
  #hd .sec-spec table td { display: block; width: 100%; padding: 2em 0; }
  #hd .sec-spec table td:before { content: attr(data-title); display: block; font-family: "TradeGothicLTPro", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.5em; font-weight: 600; text-align: center; color: #76d4fe; }
  #hd .sec-spec table td:nth-child(1) { border-bottom: none; }
  #hd .sec-spec table td:nth-child(2):before { content: attr(data-title); width: 100%; height: auto; background: none; text-align: center; top: auto; position: relative; }
  #hd .sec-spec table td:nth-child(2):after { display: none; }
  #hd .sec-spec table td:nth-child(3) { border-top: none; }
  #hd .sec-spec table ul { width: 100%; }
  #hd .sec-gallery { padding: 4em 0; background-size: 150% auto; }
  #hd .sec-gallery .grid-item { width: 50%; } }
@media screen and (max-width: 480px) { #hd .slider-armor .owl-stage { padding: 15% 0; }
  #hd .sec-gallery .grid-item { width: 100%; }
  #hd .sec-spec table .flex-nowrap { flex-wrap: wrap; }
  #hd .sec-spec table .hd-btn { width: 90%; } }
@media screen and (max-width: 360px) { #hd .sec-product ul { margin-top: 1em; }
  #hd .sec-product h3 { font-size: .875em; letter-spacing: .06em; } }

/*# sourceMappingURL=hd-style.css.map */