/*  Box Sizing */
/*  Text Truncate */
/* TRANSITION */
/* TRANSFORM */
/* ANIMATION */
/* GRADIENT */
/* -----RESET---------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, input, textarea, button, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, main, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; }

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

input::-moz-focus-inner, button::-moz-focus-inner, select::-moz-focus-inner { border: 0; }

select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }

input[type="search"], input[type="search"]:hover, input[type="search"]:focus, input[type="search"]:active { -webkit-appearance: none; }

select::-ms-expand { display: none; }

button, input[type="submit"], input[type="reset"] { background: none; border: none; cursor: pointer; }

option { background-color: transparent; }

code { display: block; background: #999; padding: 10px; border-left: 3px solid #0990ae; }

figure, main { display: block; }

/* ---------- ANIMATIONS ---------- */
@-webkit-keyframes zoomIn { 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); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-moz-keyframes zoomIn { 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); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-ms-keyframes zoomIn { 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); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-o-keyframes zoomIn { 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); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@keyframes zoomIn { 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); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-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; } }
@-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); } }
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-2em); -o-transform: translateY(-2em); -ms-transform: translateY(-2em); -webkit-transform: translateY(-2em); transform: translateY(-2em); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-2em); -o-transform: translateY(-2em); -ms-transform: translateY(-2em); -webkit-transform: translateY(-2em); transform: translateY(-2em); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-ms-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-2em); -o-transform: translateY(-2em); -ms-transform: translateY(-2em); -webkit-transform: translateY(-2em); transform: translateY(-2em); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-o-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-2em); -o-transform: translateY(-2em); -ms-transform: translateY(-2em); -webkit-transform: translateY(-2em); transform: translateY(-2em); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-2em); -o-transform: translateY(-2em); -ms-transform: translateY(-2em); -webkit-transform: translateY(-2em); transform: translateY(-2em); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes hint { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -ms-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@-moz-keyframes hint { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -ms-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@-ms-keyframes hint { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -ms-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@-o-keyframes hint { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -ms-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@keyframes hint { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -ms-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
.bg-light { background-color: #c8ecfa; }

.bg-primary-lighter { background-color: #67cfff; }

.bg-primary-light { background-color: #00c1e2; }

.bg-primary { background-color: #0990ae; }

.bg-primary-dark { background-color: #0468b8; }

.bg-dark { background-color: #45458d; }

.bg-darker { background-color: #303076; }

.bg-secondary-light { background-color: #80bad2; }

.bg-secondary { background-color: #93c6fb; }

.bg-secondary-dark { background-color: #097081; }

.bg-black { background-color: #000000; }

.bg-white { background-color: #ffffff; }

.bg-grey { background-color: #ebebeb; }

.btn { display: inline-block; font-family: "Myriad Pro", "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", "Arial", sans-serif; font-weight: bold; font-size: 1.25em; background: #08809B; padding: .5em 1.5em; margin: 1em auto 0; color: white; position: relative; z-index: 2; cursor: pointer; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
.btn:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: transparent; background-image: linear-gradient(135deg, #00c1e2 8%, transparent 8%, transparent 50%, #00c1e2 50%, #00c1e2 58%, transparent 58%, transparent 100%); background-size: 5px 5px; z-index: -2; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
.btn:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #08809B; z-index: -1; }
.btn:hover { -moz-transform: translate(-0.25em, -0.25em); -o-transform: translate(-0.25em, -0.25em); -ms-transform: translate(-0.25em, -0.25em); -webkit-transform: translate(-0.25em, -0.25em); transform: translate(-0.25em, -0.25em); }
.btn:hover:before { -moz-transform: translate(0.25em, 0.25em); -o-transform: translate(0.25em, 0.25em); -ms-transform: translate(0.25em, 0.25em); -webkit-transform: translate(0.25em, 0.25em); transform: translate(0.25em, 0.25em); }
.btn:active { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.btn:active:before { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.btn.btn-darker:before { background-image: linear-gradient(135deg, #303076 8%, transparent 8%, transparent 50%, #303076 50%, #303076 58%, transparent 58%, transparent 100%); }
.btn.btn-darker:after { background: #303076; }
.btn.btn-disabled { pointer-events: none; background: #587C84; }

.btn-more { color: white; font-weight: bold; padding: 1em; }
.btn-more p { display: inline-block; font-size: 1.5em; line-height: 1; letter-spacing: .04em; margin-bottom: 0; position: relative; }
.btn-more p:before, .btn-more p:after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: .5em .5em 0 .5em; border-color: #ffffff transparent transparent transparent; position: absolute; top: .25em; margin: 0 1em; opacity: .75; -moz-transition: transform 0.25s ease, opacity 0.4s ease; -o-transition: transform 0.25s ease, opacity 0.4s ease; -webkit-transition: transform 0.25s ease, opacity 0.4s ease; transition: transform 0.25s ease, opacity 0.4s ease; }
.btn-more p:before { right: 100%; }
.btn-more p:after { left: 100%; }
.btn-more span.off { display: none; }
.btn-more:hover p:before, .btn-more:hover p:after { opacity: 1; }
.btn-more.active p:before, .btn-more.active p:after { -moz-transform: scale(1, -1); -o-transform: scale(1, -1); -ms-transform: scale(1, -1); -webkit-transform: scale(1, -1); transform: scale(1, -1); }
.btn-more.active span.on { display: none; }
.btn-more.active span.off { display: inline; }

@media screen and (max-width: 1024px) { .btn { font-size: 1.125em; } }
@media screen and (max-width: 768px) { .btn { padding: .5em 1em; margin: 1em 0 0; } }
@media screen and (max-width: 480px) { .btn { font-size: 1em; }
  .btn-more p { font-size: 1.25em; } }
@font-face { font-family: 'Myriad Pro'; src: url("../fonts/MyriadPro-Regular.otf"), url("../fonts/MyriadPro-Regular.ttf"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Myriad Pro'; src: url("../fonts/MyriadPro-Light.otf"), url("../fonts/MyriadPro-Light.ttf"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Myriad Pro'; src: url("../fonts/MyriadPro-Bold.otf"), url("../fonts/MyriadPro-Bold.ttf"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'KGBlankSpaceSketch'; src: url("../fonts/KGBlankSpaceSketch.woff"), url("../fonts/KGBlankSpaceSketch.woff2"); font-style: normal; font-display: swap; }
@font-face { font-family: 'KGBlankSpaceSolid'; src: url("../fonts/KGBlankSpaceSolid.woff"), url("../fonts/KGBlankSpaceSolid.woff2"); font-style: normal; font-display: swap; }
body { font-size: 16px; }

h1 { font-size: 0; text-indent: -99999px; opacity: 0; visibility: hidden; }

h2 { font-family: "KGBlankSpaceSketch", "Myriad Pro", "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", "Arial", sans-serif; font-size: 3.875em; line-height: 1; color: #ffffff !important; letter-spacing: .05em; padding: .65em 0 .5em; }

h3 { font-family: "KGBlankSpaceSolid", "Myriad Pro", "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", "Arial", sans-serif; font-size: 2.5em; line-height: 1.25; color: #ffffff; margin-bottom: .5em; }

h4 { font-family: "Myriad Pro", "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.5em; font-weight: bold; line-height: 1.125; margin-bottom: .5em; color: #ffffff; }

h5 { font-family: "Myriad Pro", "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.125em; font-weight: bold; margin-bottom: .5em; }

h6 { font-family: "Myriad Pro", "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1em; font-weight: bold; margin-bottom: .5em; }

p, small, a, li { font-family: "Myriad Pro", "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", "Arial", sans-serif; }

p { font-size: 1em; font-weight: 400; line-height: 1.25; letter-spacing: .018em; }

strong { font-weight: bold; }

small { font-size: .9em; letter-spacing: .018em; }

.align-center { text-align: center; }

.align-left { text-align: left; }

.align-italic { font-style: italic; }

a { text-decoration: none; }
a.txt-link { display: inline-block; text-decoration: underline; font-weight: 400; margin-top: .5em; }
a.txt-link:hover { color: white; }

.color-primary { color: #0990ae !important; }

.color-primary-dark { color: #0468b8 !important; }

.color-darker { color: #303076 !important; }

.color-dark-grey { color: #404040; }

.color-light-grey { color: #ebebeb; }

.color-grey { color: #999; }

.color-white { color: white; }

.uppercase { text-transform: uppercase; }

.line-clamp.line-1 { height: 1.25em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp.line-3 { height: 4.5em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

@media screen and (min-width: 2560px) { body { font-size: 20px; } }
@media screen and (min-width: 3000px) { body { font-size: 28px; } }
@media screen and (max-width: 1440px) { h2 { font-size: 3.5em; }
  h3 { font-size: 2.25em; } }
@media screen and (max-width: 1280px) { h2 { font-size: 3em; }
  h3 { font-size: 2em; } }
@media screen and (max-width: 1024px) { h2 { font-size: 2.25em; }
  h3 { font-size: 1.875em; } }
@media screen and (max-width: 768px) { h2 { font-size: 2em; }
  h3 { font-size: 1.5em; }
  h4 { font-size: 1.25em; } }
@media screen and (max-width: 480px) { h2 { font-size: 1.5em; }
  h3 { font-size: 1.25em; }
  h4 { font-size: 1.125em; } }
.mw800 { max-width: 800px; margin-left: auto; margin-right: auto; }

.mw900 { width: 80%; max-width: 900px; margin-left: auto; margin-right: auto; }

.mw1000 { max-width: 1000px; margin-left: auto; margin-right: auto; }

.w1000, .w1100, .w1200, .w1300, .w1400, .w1600 { width: 90%; margin: 0 auto; position: relative; }

.w1000 { max-width: 1100px; }

.w1100 { max-width: 1100px; }

.w1200 { max-width: 1200px; }

.w1300 { max-width: 1300px; }

.w1400 { max-width: 1400px; }

.w1600 { max-width: 1600px; }

.col20 { width: 20%; }

.col25 { width: 25%; }

.col33 { width: 33.3333%; }

.col35 { width: 35%; }

.col40 { width: 40%; }

.col45 { width: 45%; }

.col50 { width: 50%; }

.col55 { width: 55%; }

.col60 { width: 60%; }

.col65 { width: 65%; }

.col66 { width: 66.6666%; }

.col70 { width: 70%; }

.col75 { width: 75%; }

.col80 { width: 80%; }

.col100 { width: 100%; }

.ib-top { display: inline-block; vertical-align: top; }

.ib-bottom { display: inline-block; vertical-align: bottom; }

.flex-wrap { display: flex; flex-wrap: wrap; }

.flex-nowrap { display: flex; flex-wrap: nowrap; }

.align-items-center { align-items: center; }

.align-items-start { align-items: flex-start; }

.align-items-end { align-items: flex-end; }

.justify-content-center { justify-content: center; }

.justify-content-start { justify-content: flex-start; }

.justify-content-end { justify-content: flex-end; }

.justify-content-between { justify-content: space-between; }

.justify-content-around { justify-content: space-around; }

.ml-auto { margin-left: auto; }

.mr-auto { margin-right: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }

.m-auto { margin: auto; }

.d-none { display: none; }

@media screen and (min-width: 2560px) { .mw900 { max-width: 1100px; }
  .w1000 { max-width: 1300px; }
  .w1200 { max-width: 1400px; }
  .w1300 { max-width: 1700px; }
  .w1400 { max-width: 1800px; }
  .w1600 { width: 90%; max-width: 2000px; } }
@media screen and (min-width: 3000px) { .mw900 { max-width: 1600px; }
  .w1000 { max-width: 1800px; }
  .w1200 { max-width: 2560px; }
  .w1300 { max-width: 2600px; }
  .w1400 { max-width: 2700px; }
  .w1600 { width: 90%; max-width: 3000px; } }
@media screen and (max-width: 1024px) { .d-1024-none { display: none; }
  .d-1024-block { display: block; }
  .d-1024-inline-block { display: inline-block; }
  .w900 { width: 90%; } }
@media screen and (max-width: 1023px) { .d-1023-none { display: none; }
  .d-1023-block { display: block; }
  .d-1023-inline-block { display: inline-block; } }
@media screen and (max-width: 768px) { .d-768-none { display: none; }
  .d-768-block { display: block; } }
@media screen and (max-width: 620px) { .d-620-none { display: none; }
  .d-620-block { display: block; } }
@media screen and (max-width: 480px) { .d-480-none { display: none; }
  .d-480-block { display: block; } }
.lightbox { width: 100%; height: 100vh; padding: 20px; position: fixed; top: 0; left: 0; display: none; z-index: 10; }
.lightbox .filter { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); position: absolute; top: 0; left: 0; }
.lightbox .box { width: 100%; height: 100%; background: #0a181b; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; box-sizing: border-box; overflow-y: auto; }
.lightbox .box::-webkit-scrollbar { width: .25em; }
.lightbox .box::-webkit-scrollbar-track { background: transparent; }
.lightbox .box::-webkit-scrollbar-thumb { background: #888; border-radius: 1em; }
.lightbox .box::-webkit-scrollbar-thumb:hover { background: #555; }
.lightbox .box iframe { width: calc(100% - 40px); height: calc(100% - 40px); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
.lightbox .trigger-close { width: 3.5em; height: 3.5em; position: absolute; top: 0; right: 0; cursor: pointer; z-index: 2; }
.lightbox .trigger-close:hover:before, .lightbox .trigger-close:hover:after { background: white; }
.lightbox .trigger-close:before, .lightbox .trigger-close:after { content: ''; display: block; width: 2.5em; height: 3px; background: #00c1e2; -webkit-border-radius: 1.5px; -moz-border-radius: 1.5px; border-radius: 1.5px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
.lightbox .trigger-close:before { -moz-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }
.lightbox .trigger-close:after { -moz-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); }
.lightbox.lightbox-vid .box { width: 90%; height: auto; max-width: 1440px; max-height: 90%; padding: 4em 4em 2em; border-radius: 5px; bottom: auto; top: 2em; margin: 0 auto; }
.lightbox.lightbox-vid .vid-container { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; }
.lightbox.lightbox-spotlight .box { width: 90%; height: auto; max-width: 1440px; max-height: 90%; padding: 4em 4em 2em; border-radius: 5px; bottom: auto; top: 2em; margin: 0 auto; }
.lightbox.lightbox-spotlight .content { padding-right: 5%; }
.lightbox.lightbox-spotlight .content .owl-dots { margin: 1em 0; }
.lightbox.lightbox-spotlight .content .vid-container { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; }
.lightbox.lightbox-spotlight .content .vid-container iframe, .lightbox.lightbox-spotlight .content .vid-container video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.lightbox.lightbox-spotlight .content p { font-size: 1.125em; font-weight: 300; }
.lightbox.lightbox-spotlight .content p a { color: white; text-decoration: underline; }
.lightbox.lightbox-spotlight .content p a:hover { color: #c8ecfa; }
.lightbox.lightbox-spotlight .content .btn-container .btn:before { background-image: linear-gradient(135deg, #0e5a6c 8%, transparent 8%, transparent 50%, #0e5a6c 50%, #0e5a6c 58%, transparent 58%, transparent 100%); }
.lightbox.lightbox-spotlight .content .btn-container .btn:after { background: #0e5a6c; }
.lightbox.lightbox-spotlight .list h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox.lightbox-spotlight .list h4 p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox.lightbox-spotlight .list .btn-container { display: flex; align-items: flex-start; justify-content: center; text-align: center; }
.lightbox.lightbox-spotlight .list .btn-container .btn { width: 100%; font-size: 1.75em; }
.lightbox.lightbox-gallery .box { width: 90%; height: auto; max-width: 1000px; max-height: 90%; padding: 4em 4em 2em; border-radius: 5px; bottom: auto; top: 2em; margin: 0 auto; }
.lightbox.lightbox-gallery .gallery-container { display: none; }
.lightbox.lightbox-gallery .gallery-container.active { display: block; }
.lightbox.lightbox-gallery .slider-galleryBox .owl-nav .owl-prev:before, .lightbox.lightbox-gallery .slider-galleryBox .owl-nav .owl-next:before { border-width: 1.5em 0 1.5em 1.5em; }
.lightbox.lightbox-gallery .slider-galleryBox .item { width: 100%; height: 0; padding-bottom: 56.25%; background: center no-repeat; background-size: contain; }
.lightbox.lightbox-gallery .slider-thumbnail { margin-top: 2em; }
.lightbox.lightbox-gallery .slider-thumbnail .item { width: 100%; height: 0; padding-bottom: 100%; border: 1px solid #404040; background: center no-repeat; background-size: cover; cursor: pointer; }
.lightbox.lightbox-gallery .slider-thumbnail .owl-item.current .item { border-color: #0990ae; }

@media screen and (min-width: 2560px) { .lightbox.lightbox-spotlight .box { max-width: 1800px; }
  .lightbox.lightbox-gallery .box { max-width: 1300px; } }
@media screen and (min-width: 3000px) { .lightbox.lightbox-spotlight .box { max-width: 2700px; }
  .lightbox.lightbox-gallery .box { max-width: 1800px; } }
@media screen and (max-width: 1280px) { .lightbox .trigger-close { width: 40px; height: 40px; }
  .lightbox .trigger-close:before, .lightbox .trigger-close:after { width: 20px; height: 2px; }
  .lightbox.lightbox-spotlight .box { padding: 3em 2em 2em; }
  .lightbox.lightbox-spotlight .content { padding-right: 2%; }
  .lightbox.lightbox-spotlight .content p { font-size: 1em; } }
@media screen and (max-width: 1024px) { .lightbox.lightbox-spotlight .content { width: 55%; }
  .lightbox.lightbox-spotlight .list { width: 45%; } }
@media screen and (max-width: 768px) { .lightbox .box { top: 5%; }
  .lightbox.lightbox-vid .box { width: 100%; padding: 4em 0 2em; }
  .lightbox.lightbox-spotlight .box > .container { flex-direction: column; }
  .lightbox.lightbox-spotlight .box .content { width: 100%; padding-right: 0; margin-bottom: 2em; }
  .lightbox.lightbox-spotlight .box .list { width: 100%; }
  .lightbox.lightbox-gallery .box { padding: 3em 2em 2em; }
  .lightbox.lightbox-gallery .slider-galleryBox .owl-nav .owl-prev:before, .lightbox.lightbox-gallery .slider-galleryBox .owl-nav .owl-next:before { border-width: 1em 0 1em 1em; }
  .lightbox.lightbox-gallery .slider-galleryBox .item { padding-bottom: 80%; }
  .lightbox.lightbox-gallery .slider-thumbnail { margin-top: 1em; } }
@media screen and (max-width: 620px) { .lightbox .box { top: 0; }
  .lightbox.lightbox-spotlight .box { width: 100%; height: 100%; padding: 3em 1em 2em; }
  .lightbox.lightbox-gallery .box { width: 100%; height: 100%; padding: 4em 1em 2em; } }
.list-component-full > li { display: flex; align-items: flex-start; background: #172526; padding: .5em .5em .5em .5em; margin-bottom: .125em; }
.list-component-full > li:nth-child(2n) { background: #212c30; }
.list-component-full h4 { font-size: 1.125em; font-weight: normal; padding-top: .375em; padding-right: 1em; margin-bottom: 0; }
.list-component-full a { display: block; color: white; }
.list-component-full a:hover { text-decoration: underline; }
.list-component-full .btn { min-width: 4em; flex-shrink: 0; font-weight: 300; background: transparent; border: 1px solid #405155; border-radius: 5px; padding: .4em .5em .25em; margin: 0 0 0 auto; text-align: center; text-decoration: none !important; position: relative; -moz-transition: background 0.25s ease; -o-transition: background 0.25s ease; -webkit-transition: background 0.25s ease; transition: background 0.25s ease; }
.list-component-full .btn:before, .list-component-full .btn:after { display: none; }
.list-component-full .btn:hover { -moz-transform: none; -o-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; background: #0990ae; }

.icon { display: inline-block; vertical-align: middle; width: 2.5em; height: 2em; flex-shrink: 0; background: center no-repeat; background-size: contain; margin-right: .5em; }
.icon.icon-headset { background-image: url(../img/icons/headset.png); }
.icon.icon-othercooling { background-image: url(../img/icons/othercooling.png); }
.icon.icon-chassis { background-image: url(../img/icons/chassis.png); }
.icon.icon-cpu { background-image: url(../img/icons/cpu.png); }
.icon.icon-cpucooler { background-image: url(../img/icons/cpucooler.png); }
.icon.icon-display { background-image: url(../img/icons/display.png); }
.icon.icon-vga { background-image: url(../img/icons/vga.png); }
.icon.icon-keyboard { background-image: url(../img/icons/keyboard.png); }
.icon.icon-memory { background-image: url(../img/icons/memory.png); }
.icon.icon-motherboard { background-image: url(../img/icons/motherboard.png); }
.icon.icon-mouse { background-image: url(../img/icons/mouse.png); }
.icon.icon-networking { background-image: url(../img/icons/networking.png); }
.icon.icon-psu { background-image: url(../img/icons/psu.png); }
.icon.icon-storage { background-image: url(../img/icons/storage.png); }
.icon.icon-os { background-image: url(../img/icons/os.png); }
.icon.icon-other { background-image: url(../img/icons/other.png); }

.trigger-reseller.active { z-index: 3; }
.trigger-reseller.active .list-reseller { display: block; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.25s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.25s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }

.list-reseller { display: none; background: white; min-width: 160px; max-width: 240px; border-radius: 4px; padding: .125em 0; margin: .5em 0; box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.2); position: absolute; top: 100%; right: 0; z-index: 5; }
.list-reseller li { border-bottom: 1px solid #ebebeb; }
.list-reseller li:last-child { border-bottom: none; }
.list-reseller:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 .75em 1em .75em; border-color: transparent transparent white transparent; position: absolute; right: 0; top: -.25em; margin: 0 auto; z-index: -1; }
.list-reseller a { display: block; padding: .25em .5em; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
.list-reseller a:hover { background-color: #f8f8f8; box-shadow: inset 3px 0 0 #0990ae, inset -3px 0 0 #0990ae; }
.list-reseller a img { margin: 0 auto; width: auto; max-width: none; height: 40px; -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); }

@media screen and (max-width: 480px) { .list-component-full > li { padding-left: .5em; }
  .list-component-full h4 { font-size: 1em; } }
.owl-carousel .owl-dots { text-align: center; margin: 2.5em auto 0; }
.owl-carousel .owl-dots .owl-dot { display: inline-block; vertical-align: top; width: 1em; height: .6em; border: 1px solid white; border-radius: 1em; margin: 0 .35em; background: transparent; -moz-transition: width 0.25s ease; -o-transition: width 0.25s ease; -webkit-transition: width 0.25s ease; transition: width 0.25s ease; }
.owl-carousel .owl-dots .owl-dot:hover { background: rgba(255, 255, 255, 0.25); }
.owl-carousel .owl-dots .owl-dot.active { width: 3em; background: white; pointer-events: none; }
.owl-carousel.nav-arrow { padding: 0 2em; }
.owl-carousel.nav-arrow .owl-nav { width: 100%; height: 2.625em; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; pointer-events: none; }
.owl-carousel.nav-arrow .owl-nav .owl-prev, .owl-carousel.nav-arrow .owl-nav .owl-next { width: 0; height: 0; margin: 1em; pointer-events: all; position: absolute; top: 0; }
.owl-carousel.nav-arrow .owl-nav .owl-prev:before, .owl-carousel.nav-arrow .owl-nav .owl-next:before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 2.5em 0 2.5em 2.5em; border-color: transparent transparent transparent white; opacity: .5; position: absolute; top: 0; right: 0; bottom: 50%; left: 0; margin: auto; }
.owl-carousel.nav-arrow .owl-nav .owl-prev:hover:before, .owl-carousel.nav-arrow .owl-nav .owl-next:hover:before { opacity: .75; }
.owl-carousel.nav-arrow .owl-nav .owl-prev.disabled, .owl-carousel.nav-arrow .owl-nav .owl-next.disabled { opacity: 0; pointer-events: none; }
.owl-carousel.nav-arrow .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); }
.owl-carousel.nav-arrow .owl-nav .owl-next { left: 100%; }

@media screen and (max-width: 1280px) { .owl-carousel.nav-arrow { padding: 0 1em; }
  .owl-carousel.nav-arrow .owl-nav { height: 2.25em; }
  .owl-carousel.nav-arrow .owl-nav .owl-prev, .owl-carousel.nav-arrow .owl-nav .owl-next { margin: .5em; }
  .owl-carousel.nav-arrow .owl-nav .owl-prev:before, .owl-carousel.nav-arrow .owl-nav .owl-next:before { border-width: 2em 0 2em 2em; } }
@media screen and (max-width: 1024px) { .owl-carousel.nav-arrow .owl-nav .owl-prev, .owl-carousel.nav-arrow .owl-nav .owl-next { margin: .5em; }
  .owl-carousel.nav-arrow .owl-nav .owl-prev:before, .owl-carousel.nav-arrow .owl-nav .owl-next:before { border-width: 1.25em 0 1.25em 1.25em; } }
@media screen and (max-width: 480px) { .owl-carousel .owl-dots { margin: 1.5em auto 0; }
  .owl-carousel.nav-arrow { padding: 0; } }
body { background: #0990ae; padding-top: 4.125em; }

#OfficialFooterWrapper { width: 100%; position: relative; z-index: 6; }
#OfficialFooterWrapper .Footer_bottomListContainer_1Oilhou2 .Footer_bottomListEntry_2CZKa7xl { display: none !important; }
#OfficialFooterWrapper .Footer_wrapper_2AIWQkgx .Footer_communityListContainer_3TMRvqk1 ul { flex-wrap: wrap !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; }

#header { width: 100%; font-size: 1.125em; background: #303076; border-bottom: 2px solid white; position: fixed; top: 0; left: 0; z-index: 9; }
#header .container { align-items: stretch; }
#header .logo-container { padding: .5em 0; margin-right: auto; position: relative; }
#header .logo-container:before { content: ''; display: block; width: calc(25em + 5vw); min-width: calc(25em + ( 100vw - 1200px ) / 2); height: 100%; position: absolute; top: 0; right: -1.6666em; background-color: #0990ae; z-index: -1; -moz-transform: skew(-18deg, 0deg); -o-transform: skew(-18deg, 0deg); -ms-transform: skew(-18deg, 0deg); -webkit-transform: skew(-18deg, 0deg); transform: skew(-18deg, 0deg); }
#header .logo-asus { width: 8.5em; padding: .75em 0; padding-right: .5em; margin-right: .65em; margin-left: -.25em; }
#header .logo-rog { width: 2.6em; margin-right: .875em; }
#header .logo-tuf { width: 2.25em; margin-right: 1.25em; }
#header .logo-proart { width: 4.5em; }

#nav-menu { align-self: center; margin-left: auto; margin-right: auto; }
#nav-menu a { display: block; font-size: 1.25em; font-weight: 400; letter-spacing: .06em; color: white; padding: 1em 1.5em; text-align: center; cursor: pointer; -moz-transition: color 0.25s ease; -o-transition: color 0.25s ease; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; }
#nav-menu a:hover { color: #00c1e2; }
#nav-menu a.active { color: #00c1e2; font-weight: bold; cursor: default; }

#hamburger { display: none; }

#scrollTop { position: fixed; right: 3.25em; bottom: 1.5em; width: 3em; height: 3em; border-radius: 2em; text-align: center; cursor: pointer; background: rgba(255, 255, 255, 0.125); border: 2px solid #999; opacity: 0; pointer-events: none; z-index: 7; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; }
#scrollTop.is-active { opacity: 1; pointer-events: all; }
#scrollTop svg { display: block; width: 55%; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; fill: #999; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); }
#scrollTop:hover { border-color: #0990ae; background-color: #0990ae; }
#scrollTop:hover svg { fill: white; }

#ctnBtn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 9em; height: 9em; border-radius: 5em; position: fixed; right: 1em; top: 30%; bottom: 0; margin: auto 0; background: #303076; border: 2px solid white; color: white; z-index: 5; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
#ctnBtn:before { content: ''; display: block; width: calc(100% + .5em); height: calc(100% + .5em); border-radius: 5em; border: 2px dashed #45458d; position: absolute; top: calc(-.25em - 2px); left: calc(-.25em - 2px); -webkit-animation-delay: 0s; -webkit-animation-duration: 30s; -webkit-animation-name: hint; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 30s; -moz-animation-name: hint; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 30s; -o-animation-name: hint; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 30s; animation-name: hint; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#ctnBtn img { width: 55%; margin: -.5em auto .5em; -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); }
#ctnBtn p { font-weight: bold; line-height: 1.125; letter-spacing: 0; padding: 0 .5em; text-align: center; text-transform: uppercase; }
#ctnBtn:hover { background: #45458d; -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); }
#ctnBtn:hover:before { -webkit-animation-delay: 0s; -webkit-animation-duration: 20s; -webkit-animation-name: hint; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 20s; -moz-animation-name: hint; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 20s; -o-animation-name: hint; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 20s; animation-name: hint; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: forwards; }

@media screen and (max-width: 1440px) { body { padding-top: 3.9em; }
  #nav-menu a { font-size: 1.125em; } }
@media screen and (max-width: 1280px) { #header .logo-container { padding: .25em 0; }
  #nav-menu a { padding: 1em .75em; } }
@media screen and (max-width: 1024px) { body { padding-top: 2.5em; }
  #hamburger span, #hamburger:before, #hamburger:after { content: ''; display: block; width: 1.25em; height: .125em; background: white; border-radius: .2em; position: absolute; top: 1.25em; left: 0; right: 0; margin: 0 auto; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; }
  #header .container { width: 100%; flex-wrap: wrap; }
  #header .logo-container { padding-left: 5%; z-index: 2; }
  #nav-menu { display: none; width: 100%; background: #303076; font-size: 1.25em; padding: 1em 0; position: relative; }
  #nav-menu ul { flex-direction: column; }
  #nav-menu li { width: 100%; }
  #nav-menu a { display: block; padding: 1em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
  #nav-menu a:last-child { border-bottom: none; }
  #hamburger { display: block; align-self: center; width: 2.5em; height: 2.5em; background: #303076; position: relative; margin-left: auto; z-index: 2; cursor: pointer; }
  #hamburger:before { -moz-transform: translate(0, -0.4em); -o-transform: translate(0, -0.4em); -ms-transform: translate(0, -0.4em); -webkit-transform: translate(0, -0.4em); transform: translate(0, -0.4em); }
  #hamburger:after { -moz-transform: translate(0, 0.4em); -o-transform: translate(0, 0.4em); -ms-transform: translate(0, 0.4em); -webkit-transform: translate(0, 0.4em); transform: translate(0, 0.4em); }
  #hamburger.active:before { opacity: 1; -moz-transform: translate(0, 0) rotate(-45deg); -o-transform: translate(0, 0) rotate(-45deg); -ms-transform: translate(0, 0) rotate(-45deg); -webkit-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); }
  #hamburger.active:after { opacity: 1; -moz-transform: translate(0, 0) rotate(45deg); -o-transform: translate(0, 0) rotate(45deg); -ms-transform: translate(0, 0) rotate(45deg); -webkit-transform: translate(0, 0) rotate(45deg); transform: translate(0, 0) rotate(45deg); }
  #hamburger.active span { opacity: 0; }
  #hamburger.active ~ #nav-menu { display: block; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.6s; -webkit-animation-name: fadeInDown; -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: fadeInDown; -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: fadeInDown; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.6s; animation-name: fadeInDown; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
  #scrollTop { right: 1.25em; bottom: 3.5em; }
  #ctnBtn { flex-direction: row; flex-wrap: nowrap; width: 100%; height: auto; padding: .75em 1em .25em; border-radius: 0; border: none; border-top: 2px white solid; top: auto; bottom: 0; left: 0; right: 0; margin: 0; }
  #ctnBtn:before { display: none; }
  #ctnBtn img { width: 4em; margin: -.25em 1em .25em 0; }
  #ctnBtn p { font-size: 1.25em; } }
@media screen and (max-width: 480px) { #header { font-size: .95em; }
  #header .logo-container:before { right: -1em; }
  #scrollTop { width: 2.5em; height: 2.5em; right: .75em; bottom: 4em; }
  #ctnBtn p { font-size: 1.125em; } }
.sec-kv { position: relative; }
.sec-kv a { display: block; cursor: pointer; }
.sec-kv a span { -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
.sec-kv a:hover .btn span { -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); }
.sec-kv .bg { width: 100%; position: relative; }
.sec-kv .container { width: 80%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
.sec-kv .logo { width: 18.75%; -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); }
.sec-kv h2 { font-size: 2.875vw; letter-spacing: 0; text-transform: none; padding: .5em 0; }
.sec-kv .btn { margin-left: 0; font-size: 1.66vw; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius: .25em; pointer-events: none; }
.sec-kv .btn span { display: block; }
.sec-kv .btn:before, .sec-kv .btn:after { display: none; }

@media screen and (max-width: 768px) { .sec-kv .container { width: 85%; padding-top: 5%; justify-content: flex-start; }
  .sec-kv .title-container { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: flex-end; justify-content: center; }
  .sec-kv .logo { width: 50%; flex-shrink: 0; }
  .sec-kv h2 { font-size: 6vw; line-height: 1.125; padding: 0 0 0 5%; margin-bottom: -.05em; }
  .sec-kv .btn { font-size: 4vw; padding: .4em 1em .35em; margin: 1.125em auto 0; } }
@media screen and (max-width: 480px) { .sec-kv .container { padding-top: 5%; }
  .sec-kv .title-container { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: flex-end; justify-content: center; }
  .sec-kv .btn { font-size: 5vw; } }
.sec-spotlight .container { padding-bottom: 1px; }
.sec-spotlight .build-container { padding: 6.25em 0 0; }
.sec-spotlight .build-container .build:nth-child(n+3) { display: none; opacity: 0; }
.sec-spotlight .build-container.active .build:nth-child(n+3) { display: flex; opacity: 1; }
.sec-spotlight .build { margin-bottom: 4.5em; }
.sec-spotlight .build > figure { position: relative; overflow: hidden; }
.sec-spotlight .build > figure .vid-container { width: 100%; height: 100%; }
.sec-spotlight .build > figure iframe, .sec-spotlight .build > figure img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.sec-spotlight .build > figure p { width: 100%; font-size: 1.25em; line-height: 1; padding: 1em; background-color: rgba(48, 48, 118, 0.5); background-image: -moz-linear-gradient(180deg, rgba(48, 48, 118, 0.5), #303076); background-image: -webkit-linear-gradient(180deg, rgba(48, 48, 118, 0.5), #303076); background-image: linear-gradient(180deg, rgba(48, 48, 118, 0.5), #303076); background-color: transparent; position: absolute; bottom: 0; left: 0; }
.sec-spotlight .build > .content { padding: 2em 4% 5em; background: #549ebb; color: white; clip-path: polygon(100% 0, 100% calc(100% - 2.5em), calc(100% - 2.5em) 100%, 0 100%, 0 0); position: relative; }
.sec-spotlight .build > .content > h3 { text-shadow: 0 0 10px rgba(0, 0, 0, 0.25); }
.sec-spotlight .build > .content > p { font-size: 1.5em; font-weight: 300; line-height: 1.125; margin-bottom: 1em; }
.sec-spotlight .build > .content > .btn-container { display: flex; flex-wrap: nowrap; width: 100%; position: absolute; bottom: 0; left: 0; }
.sec-spotlight .build > .content > .btn-container > .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: none; font-size: 1.5em; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); padding: 0.75em; margin: 0; }
.sec-spotlight .build > .content > .btn-container > .btn:before, .sec-spotlight .build > .content > .btn-container > .btn:after { display: none; }
.sec-spotlight .build > .content > .btn-container > .btn span { display: block; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
.sec-spotlight .build > .content > .btn-container > .btn:hover { -moz-transform: none; -o-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; }
.sec-spotlight .build > .content > .btn-container > .btn:hover span { -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); }
.sec-spotlight .build > .content > .btn-container > .btn.btn-darker { background: #303076; }
.sec-spotlight .build:nth-child(2n) { flex-direction: row-reverse; }
.sec-spotlight .build:nth-child(2n) > .content { clip-path: polygon(0 0, 100% 0, 100% 100%, 2.5em 100%, 0 calc(100% - 2.5em)); }
.sec-spotlight .build:nth-child(2n) figure { margin-left: -1px; }
.sec-spotlight .btn-more { width: 100%; padding-bottom: 3em; position: relative; }
.sec-spotlight .btn-more:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(9, 144, 174, 0.5); background-image: -moz-linear-gradient(180deg, rgba(9, 144, 174, 0.5) 30%, transparent); background-image: -webkit-linear-gradient(180deg, rgba(9, 144, 174, 0.5) 30%, transparent); background-image: linear-gradient(180deg, rgba(9, 144, 174, 0.5) 30%, transparent); background-color: transparent; }

.slider-pd { width: 100%; margin: 0 auto; }
.slider-pd .item { display: block; padding: 8%; }
.slider-pd .item img { width: 80%; margin: 0 auto; }
.slider-pd .item p { font-size: .9em; line-height: 1.125; color: white; margin-top: .5em; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.slider-pd .item:hover > img { opacity: .5; }
.slider-pd .item:hover .btn { opacity: 1; }
.slider-pd .item .btn { opacity: 0; min-width: 5em; max-height: 1.5em; white-space: nowrap; padding: .25em .25em .125em; position: absolute; top: 30%; left: 0; right: 0; margin: 0 auto; -moz-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; }
.slider-pd .item .btn:before { display: none; }
.slider-pd .item .btn:hover { -moz-transform: none; -o-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; }
.slider-pd .item .btn.active { width: 100%; height: 100%; top: 0; bottom: auto; opacity: 1; }
.slider-pd .item .list-reseller { min-width: 116px; max-width: 100%; left: 0; right: 0; margin: 0 auto; }
.slider-pd .item .list-reseller:after { left: 0; right: 0; margin: 0 auto; }
.slider-pd .item .list-reseller a { padding: 0; }
.slider-pd .item .list-reseller img { width: auto; }
.slider-pd .owl-nav .owl-prev:before, .slider-pd .owl-nav .owl-next:before { border-width: 1em 0 1em 1em !important; }

@media screen and (max-width: 1440px) { .sec-spotlight .build-container { padding: 4em 0; } }
@media screen and (max-width: 1280px) { .sec-spotlight .build { margin-bottom: 2.5em; }
  .sec-spotlight .build > .content p { font-size: 1.125em; } }
@media screen and (max-width: 1024px) { .sec-spotlight .build { margin-bottom: 1.5em; }
  .sec-spotlight .build > figure p { padding: .75em 1em; }
  .sec-spotlight .build > .content { padding-bottom: 4em; clip-path: polygon(100% 0, 100% calc(100% - 1.5em), calc(100% - 1.5em) 100%, 0 100%, 0 0); }
  .sec-spotlight .build > .content h3 { margin-bottom: .25em; }
  .sec-spotlight .build > .content p { font-size: 1em; margin-bottom: 1em; }
  .sec-spotlight .build > .content > .btn-container > .btn { padding: .75em 1em; }
  .sec-spotlight .build:nth-child(2n) > .content { clip-path: polygon(0 0, 100% 0, 100% 100%, 1.5em 100%, 0 calc(100% - 1.5em)); } }
@media screen and (max-width: 768px) { .sec-spotlight .build:nth-child(n) { flex-direction: column; }
  .sec-spotlight .build:nth-child(n) > figure { width: 100%; margin: 0; }
  .sec-spotlight .build:nth-child(n) > figure .vid-container { width: 100%; height: 0; padding-bottom: 56.25%; }
  .sec-spotlight .build:nth-child(n) > figure iframe { position: absolute; top: 0; left: 0; }
  .sec-spotlight .build:nth-child(n) > figure p { font-size: 1em; background: #303076; position: relative; }
  .sec-spotlight .build:nth-child(n) > .content { width: 100%; padding: 1.5em .5em 4em; clip-path: polygon(100% 0, 100% calc(100% - 1.5em), calc(100% - 1.5em) 100%, 0 100%, 0 0); }
  .sec-spotlight .build:nth-child(n) > .content > .btn-container > .btn { font-size: 1.125em; }
  .sec-spotlight .slider-pd .owl-dots .owl-dot { background: #c8ecfa; }
  .sec-spotlight .slider-pd .owl-dots .owl-dot.active { background: #0990ae; }
  .sec-spotlight .slider-pd .item .btn { font-size: 1.25em; } }
@media screen and (max-width: 480px) { .sec-spotlight .build-container { padding: 2em 0; }
  .sec-spotlight .build:nth-child(n) > .content > .btn-container { flex-direction: column; } }
.sec-academy .container { padding: 5.25em 0; }
.sec-academy .owl-stage { display: flex; }
.sec-academy .owl-stage .item { display: flex; flex-direction: column; height: 100%; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1)); margin: 1em 0; position: relative; overflow: hidden; }
.sec-academy .owl-stage .content { height: 100%; }
.sec-academy figure { width: 100%; height: 0; padding-bottom: 80%; box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); position: relative; z-index: 2; overflow: hidden; }
.sec-academy figure img { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; object-fit: cover; -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-transition: transform 2s ease; -o-transition: transform 2s ease; -webkit-transition: transform 2s ease; transition: transform 2s ease; }
.sec-academy figure.vid-cover { cursor: pointer; position: relative; }
.sec-academy figure.vid-cover:before { content: ''; display: block; width: 150px; height: 150px; border-radius: 50%; background: #999; border: 6px solid white; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; opacity: .5; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; z-index: 2; pointer-events: none; }
.sec-academy figure.vid-cover:after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 30px 0 30px 50px; border-color: transparent transparent transparent #ffffff; position: absolute; top: 0; right: 0; bottom: 0; left: 5%; margin: auto; opacity: .75; z-index: 3; pointer-events: none; }
.sec-academy figure.vid-cover a { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.sec-academy figure.vid-cover:hover:before { background: #0990ae; -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); }
.sec-academy .content { background: #eaeaea; padding: 1.25em 1.5em; clip-path: polygon(100% 0, 100% calc(100% - 2.5em), calc(100% - 2.5em) 100%, 0 100%, 0 0); }
.sec-academy h3 { color: #404040; font-size: 1.5em; text-align: center; -moz-transition: color 0.25s ease; -o-transition: color 0.25s ease; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; }
.sec-academy p { font-size: 1.125em; }
.sec-academy a { cursor: pointer; }
.sec-academy a:hover h3 { color: #0990ae; }
.sec-academy a:hover img { -moz-transform: scale(1.03, 1.03); -o-transform: scale(1.03, 1.03); -ms-transform: scale(1.03, 1.03); -webkit-transform: scale(1.03, 1.03); transform: scale(1.03, 1.03); }

@media screen and (max-width: 1440px) { .sec-academy .container { padding: 4em 0; } }
@media screen and (max-width: 1280px) { .sec-academy figure.vid-cover:before { width: 100px; height: 100px; }
  .sec-academy figure.vid-cover:after { border-width: 25px 0 25px 40px; }
  .sec-academy h3 { font-size: 1.25em; } }
@media screen and (max-width: 1024px) { .sec-academy .content { padding: 1.25em 1em; clip-path: polygon(100% 0, 100% calc(100% - 1.5em), calc(100% - 1.5em) 100%, 0 100%, 0 0); }
  .sec-academy h3 { font-size: 1.125em; } }
@media screen and (max-width: 480px) { .sec-academy .container { padding: 2em 0; } }
.sec-community { position: relative; overflow: hidden; }
.sec-community .container { padding: 6.25em 0; }
.sec-community .frame { background: white; margin-right: 6em; clip-path: polygon(100% 0, 100% calc(100% - 2.5em), calc(100% - 2.5em) 100%, 0 100%, 0 0); }
.sec-community .frame h3 { background: #0990ae; padding: .45em .75em; margin-bottom: 0; }
.sec-community .frame .content { padding: 2em; }
.sec-community .frame h4, .sec-community .frame h5, .sec-community .frame h6 { color: #303076; }
.sec-community .frame p { margin-bottom: 1em; }
.sec-community .frame ul { list-style-type: disc; list-style-position: inside; margin: 1em 0; }
.sec-community .frame ol { list-style-type: decimal; list-style-position: inside; margin: 1em 0; }
.sec-community .frame li { font-size: 1em; font-weight: 400; line-height: 1.5; letter-spacing: .04em; text-indent: -1.5em; padding-left: 1.5em; }
.sec-community .frame hr { opacity: .5; margin: 1.5em 0; }
.sec-community .frame a { color: #0990ae; word-break: break-all; }
.sec-community .frame a:hover { text-decoration: underline; }
.sec-community .ggsi .ggs-gallery-empty__img { display: inline-block; }

@media screen and (max-width: 1440px) { .sec-community .container { padding: 4em 0; }
  .sec-community .frame { margin-right: 4em; } }
@media screen and (max-width: 1024px) { .sec-community .frame { margin-right: 2em; }
  .sec-community .frame .content { padding: 1.5em 1.5em; } }
@media screen and (max-width: 768px) { .sec-community .container { flex-direction: column; flex-wrap: wrap; }
  .sec-community .frame { width: 100%; margin-bottom: 2em; }
  .sec-community .gleam { width: 100%; } }
@media screen and (max-width: 480px) { .sec-community .container { padding: 2em 0; }
  .sec-community .frame .content { padding: 1.5em 1em; } }
.sec-rewards .container { padding: 6.25em 0; }
.sec-rewards .owl-stage-outer { background: #45458d; clip-path: polygon(100% 0, 100% calc(100% - 2.5em), calc(100% - 2.5em) 100%, 0 100%, 0 0); }
.sec-rewards .item { padding: 1em; }
.sec-rewards figure { position: relative; overflow: hidden; -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); }
.sec-rewards figure img { width: 100%; }
.sec-rewards .content { padding: .5em 5%; }
.sec-rewards .content h3 { font-size: 1.75em; }
.sec-rewards .content p { font-weight: 300; font-size: 1.25em; margin-bottom: 1em; }
.sec-rewards .content .btn { font-size: 1.5em; }

@media screen and (max-width: 1440px) { .sec-rewards .container { padding: 4em 0; } }
@media screen and (max-width: 1280px) { .sec-rewards .content { padding: .5em 3% .5em 6%; }
  .sec-rewards .content p { font-size: 1.125em; }
  .sec-rewards .content .btn { font-size: 1.25em; } }
@media screen and (max-width: 1024px) { .sec-rewards .owl-stage-outer { clip-path: polygon(100% 0, 100% calc(100% - 1.5em), calc(100% - 1.5em) 100%, 0 100%, 0 0); }
  .sec-rewards .content h3 { font-size: 1.25em; }
  .sec-rewards .content p { font-size: 1em; margin-bottom: 0; } }
@media screen and (max-width: 620px) { .sec-rewards .item { flex-direction: column; }
  .sec-rewards figure { width: 100%; }
  .sec-rewards .content { width: 100%; padding: 2em 0; } }
@media screen and (max-width: 480px) { .sec-rewards .container { padding: 2em 0; } }
.sec-partners .container { width: 80%; padding: 6.25em 0; }
.sec-partners .container ul { margin: 0 -1.5em; }
.sec-partners .container ul li:nth-child(n+13) { display: none; }
.sec-partners .container ul.active li:nth-child(n+13) { display: block; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.4s; -webkit-animation-name: fadeInUp; -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: fadeInUp; -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: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.4s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
.sec-partners .container li { width: calc(25% - 1.5em); height: 0; padding-bottom: calc(25% - 1.5em); margin: 0 .75em 2.25em; position: relative; z-index: 2; }
.sec-partners .container li:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #303076; background-image: linear-gradient(135deg, #00c1e2 8%, transparent 8%, transparent 50%, #00c1e2 50%, #00c1e2 58%, transparent 58%, transparent 100%); background-size: 5px 5px; z-index: -1; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
.sec-partners .container li:hover:before { -moz-transform: translate(0.25em, 0.25em); -o-transform: translate(0.25em, 0.25em); -ms-transform: translate(0.25em, 0.25em); -webkit-transform: translate(0.25em, 0.25em); transform: translate(0.25em, 0.25em); }
.sec-partners .container li:hover a { -moz-transform: translate(-0.25em, -0.25em); -o-transform: translate(-0.25em, -0.25em); -ms-transform: translate(-0.25em, -0.25em); -webkit-transform: translate(-0.25em, -0.25em); transform: translate(-0.25em, -0.25em); }
.sec-partners .container li:hover img { -moz-transform: scale(1.25, 1.25); -o-transform: scale(1.25, 1.25); -ms-transform: scale(1.25, 1.25); -webkit-transform: scale(1.25, 1.25); transform: scale(1.25, 1.25); }
.sec-partners .container li:active:before { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.sec-partners .container li:active a { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.sec-partners .container li:active img { -moz-transform: scale(1.25, 1.25); -o-transform: scale(1.25, 1.25); -ms-transform: scale(1.25, 1.25); -webkit-transform: scale(1.25, 1.25); transform: scale(1.25, 1.25); }
.sec-partners .container a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 1em; background: white; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 2; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
.sec-partners .container img { width: 150px; -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease; transition: transform 0.4s ease; }

@media screen and (max-width: 1440px) { .sec-partners .container { padding: 4em 0; } }
@media screen and (max-width: 1024px) { .sec-partners .container ul { margin: 0 -1em; }
  .sec-partners .container li { width: calc(25% - 1em); padding-bottom: calc(25% - 1em); margin: 0 .5em 1.5em; }
  .sec-partners .container li:hover img { -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); } }
@media screen and (max-width: 768px) { .sec-partners .container ul { margin: 0 -.5em; }
  .sec-partners .container li { width: calc(25% - .5em); padding-bottom: calc(25% - .5em); margin: 0 .25em .75em; } }
@media screen and (max-width: 620px) { .sec-partners .container li { width: calc(33.3333% - .5em); padding-bottom: calc(33.3333% - .5em); } }
@media screen and (max-width: 480px) { .sec-partners .container { padding: 2em 0; }
  .sec-partners .container ul li:nth-child(n+7) { display: none; }
  .sec-partners .container ul.active li:nth-child(n+7) { display: block; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.4s; -webkit-animation-name: fadeInUp; -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: fadeInUp; -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: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.4s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
  .sec-partners .container li { width: calc(50% - .5em); padding-bottom: calc(50% - .5em); margin: 0 .25em .5em; } }
.sec-timeline .container { padding: 3em 0; }
.sec-timeline .intro { font-size: 1.25em; letter-spacing: .018em; margin-bottom: 2em; }
.sec-timeline .starter { width: 90%; margin: 0 auto; }
.sec-timeline .timeline-container { position: relative; }
.sec-timeline .timeline-container:before { content: ''; display: block; width: 2px; height: 100%; background-color: #0990ae; background-image: -moz-linear-gradient(180deg, #0990ae 0, #0990ae 50%, transparent 50%); background-image: -webkit-linear-gradient(180deg, #0990ae 0, #0990ae 50%, transparent 50%); background-image: linear-gradient(180deg, #0990ae 0, #0990ae 50%, transparent 50%); background-color: transparent; background-size: 2px 28px; background-repeat: repeat-y; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; pointer-events: none; }
.sec-timeline .timeline-container:after { content: ''; display: block; width: 1em; height: 1em; border-radius: 1em; background: #0990ae; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; }
.sec-timeline .timeline-container li { display: flex; align-items: center; justify-content: center; padding: 3em 0; }
.sec-timeline .timeline-container li:nth-child(2n) { flex-direction: row-reverse; }
.sec-timeline .timeline-container li:nth-child(2n) .content { padding-left: 0; padding-right: 3em; text-align: right; }
.sec-timeline .timeline-container li:nth-child(2n) figure { padding-right: 0; padding-left: 2em; }
.sec-timeline .timeline-container li:nth-child(2n) figure img { margin-left: 0; }
.sec-timeline .timeline-container figure { padding-right: 2em; }
.sec-timeline .timeline-container figure img { margin-left: auto; -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease; transition: transform 0.4s ease; }
.sec-timeline .timeline-container figure:hover img { -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); }
.sec-timeline .timeline-container .content { padding-left: 3em; }
.sec-timeline .timeline-container h3 { font-family: "KGBlankSpaceSketch", "Myriad Pro", "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", "Arial", sans-serif; font-size: 2em; display: inline-block; padding: .25em .75em; background: #0990ae; }
.sec-timeline .timeline-container h4 { font-size: 1.75em; }
.sec-timeline .timeline-container p { font-size: 1.05em; line-height: 1.25; letter-spacing: .018em; }

@media screen and (max-width: 1440px) { .sec-timeline .starter { max-width: 300px; } }
@media screen and (max-width: 1280px) { .sec-timeline .timeline-container li { padding: 2em 0; } }
@media screen and (max-width: 1024px) { .sec-timeline .timeline-container { width: 100%; }
  .sec-timeline .timeline-container h3 { margin-bottom: .25em; } }
@media screen and (max-width: 768px) { .sec-timeline .intro { width: 100%; font-size: 1.125em; }
  .sec-timeline .timeline-container li:nth-child(2n) .content { padding-right: 2em; }
  .sec-timeline .timeline-container li:nth-child(2n) figure { padding-left: 2em; }
  .sec-timeline .timeline-container figure { padding-right: 2em; }
  .sec-timeline .timeline-container .content { padding-left: 2em; } }
@media screen and (max-width: 480px) { .sec-timeline .container { padding: 2em 0; }
  .sec-timeline .intro { font-size: 1em; }
  .sec-timeline .starter { max-width: 220px; margin-bottom: 3em; }
  .sec-timeline .timeline-container:before { height: calc(100% - 90vw); top: auto; right: auto; bottom: 0; margin: 0; }
  .sec-timeline .timeline-container:after { left: calc(-.5em + 2px); right: auto; margin: 0; }
  .sec-timeline .timeline-container li:nth-child(n) { flex-direction: column; }
  .sec-timeline .timeline-container li:nth-child(n) figure { width: 100%; padding: 0; }
  .sec-timeline .timeline-container li:nth-child(n) figure img { max-width: 90%; margin: 0 auto; }
  .sec-timeline .timeline-container li:nth-child(n) .content { width: 100%; padding: 2em 0; text-align: left; }
  .sec-timeline .timeline-container li:nth-child(n) h4 { margin-left: .5em; }
  .sec-timeline .timeline-container li:nth-child(n) p { margin-left: 1em; } }
.sec-banner { padding: 4em 0 5em; background: url(../img/banner.jpg) center bottom no-repeat; background-size: cover; position: relative; overflow: hidden; }
.sec-banner .container { width: 90%; position: relative; z-index: 2; }
.sec-banner .container:before { content: ''; display: block; width: 110%; height: 400%; background-color: transparent; background-image: -moz-linear-gradient(90deg, transparent, #b523b4 20%, #b523b4 80%, transparent); background-image: -webkit-linear-gradient(90deg, transparent, #b523b4 20%, #b523b4 80%, transparent); background-image: linear-gradient(90deg, transparent, #b523b4 20%, #b523b4 80%, transparent); -moz-transform: skew(165deg, 0deg); -o-transform: skew(165deg, 0deg); -ms-transform: skew(165deg, 0deg); -webkit-transform: skew(165deg, 0deg); transform: skew(165deg, 0deg); position: absolute; top: -100%; left: -5%; z-index: -1; }
.sec-banner .container img { width: 17em; -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); }
.sec-banner .container h2 { padding: 0; padding-top: .5em; margin-left: .75em; }

.sec-step1 .w1200, .sec-step2 .w1200, .sec-step3 .w1200 { width: 80%; }
.sec-step1 h2, .sec-step2 h2, .sec-step3 h2 { font-family: "Myriad Pro", "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", "Arial", sans-serif; font-size: 2.75em; font-weight: bold; letter-spacing: 0; color: #303076 !important; padding: 0 0 0 2em; margin-bottom: 1.125em; text-align: left; position: relative; }
.sec-step1 h2 .title-deco, .sec-step2 h2 .title-deco, .sec-step3 h2 .title-deco { display: block; width: 1.5em; height: 1.5em; font-family: "KGBlankSpaceSketch", "Myriad Pro", "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", "Arial", sans-serif; font-weight: normal; font-size: .9em; text-align-last: center; color: white; padding: .25em 0; margin-right: .5em; position: absolute; left: 0; top: -.15em; z-index: 2; }
.sec-step1 h2 .title-deco:before, .sec-step2 h2 .title-deco:before, .sec-step3 h2 .title-deco:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #404040; clip-path: polygon(100% 0, 100% calc(100% - .25em), calc(100% - .25em) 100%, 0 100%, 0 0); z-index: -1; }
.sec-step1 h2 .title-deco:after, .sec-step2 h2 .title-deco:after, .sec-step3 h2 .title-deco:after { content: ''; display: block; width: 40%; height: 0; padding-bottom: 40%; border-top: 2px solid #00c1e2; border-left: 2px solid #00c1e2; position: absolute; top: 0; left: 0; margin: -5px; }

.sec-step1 { padding: 3em 0 5em; }
.sec-step1 .item { background: #c8ecfa; margin: 8% 1em; }
.sec-step1 .item figure img { width: 100%; }
.sec-step1 .item h3 { font-family: "Myriad Pro", "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", "Arial", sans-serif; font-size: 2em; font-weight: bold; padding: .25em .5em; background: #303076; margin-bottom: 0; }
.sec-step1 .item .list-component { display: flex; flex-wrap: wrap; padding: 1.5em 1em; }
.sec-step1 .item .list-component li { width: 50%; align-self: center; line-height: 1.2; padding: .25em .5em; text-align: left; }
.sec-step1 .item .btn-container { display: flex; flex-wrap: nowrap; }
.sec-step1 .item .btn-container .btn { width: 100%; padding: .75em .25em; margin: 0; }
.sec-step1 .item .btn-container .btn:hover { -moz-transform: translate(0, -0.25em); -o-transform: translate(0, -0.25em); -ms-transform: translate(0, -0.25em); -webkit-transform: translate(0, -0.25em); transform: translate(0, -0.25em); }
.sec-step1 .item .btn-container .btn:hover:before { -moz-transform: translate(0, 0.25em); -o-transform: translate(0, 0.25em); -ms-transform: translate(0, 0.25em); -webkit-transform: translate(0, 0.25em); transform: translate(0, 0.25em); }
.sec-step1 .owl-item { -moz-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); -moz-transition: transform 0.6s ease; -o-transition: transform 0.6s ease; -webkit-transition: transform 0.6s ease; transition: transform 0.6s ease; }
.sec-step1 .owl-item.center { -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); }
.sec-step1 .slider-build { padding: 0 1em; }
.sec-step1 .slider-build .owl-nav .owl-prev:before, .sec-step1 .slider-build .owl-nav .owl-next:before { border-color: transparent transparent transparent #0990ae; }
.sec-step1 .slider-build .owl-dots .owl-dot { border-color: #0990ae; }
.sec-step1 .slider-build .owl-dots .owl-dot.active { background: #0990ae; }

.sec-step2, .sec-step3 { position: relative; z-index: 7; padding: 3em 0 5em; }
.sec-step2 .container > .col50, .sec-step3 .container > .col50 { width: calc(50% - 1em); }
.sec-step2 .content, .sec-step3 .content { padding-right: 5%; }
.sec-step2 .slider-gallery .owl-dots, .sec-step3 .slider-gallery .owl-dots { margin: 1em 0; }
.sec-step2 .slider-gallery .owl-dots .owl-dot, .sec-step3 .slider-gallery .owl-dots .owl-dot { border-color: #0990ae; }
.sec-step2 .slider-gallery .owl-dots .owl-dot.active, .sec-step3 .slider-gallery .owl-dots .owl-dot.active { background-color: #0990ae; }
.sec-step2 .list, .sec-step3 .list { width: 100%; height: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); }
.sec-step2 .list h3, .sec-step3 .list h3 { font-family: "Myriad Pro", "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", "Arial", sans-serif; font-weight: 500; font-size: 1.75em; text-align: center; background: #303076; padding: .25em .5em; margin-bottom: 0; }
.sec-step2 .list:not(.list-alt) .list-component-full, .sec-step3 .list:not(.list-alt) .list-component-full { overflow-y: auto; }
.sec-step2 .list:not(.list-alt) .list-component-full > li, .sec-step3 .list:not(.list-alt) .list-component-full > li { padding: .25em .5em; }
.sec-step2 .list:not(.list-alt) .list-component-full > li .icon, .sec-step3 .list:not(.list-alt) .list-component-full > li .icon { margin-top: .25em; margin-bottom: .25em; }
.sec-step2 .list:not(.list-alt) .list-component-full::-webkit-scrollbar, .sec-step3 .list:not(.list-alt) .list-component-full::-webkit-scrollbar { width: .3em; }
.sec-step2 .list:not(.list-alt) .list-component-full::-webkit-scrollbar-track, .sec-step3 .list:not(.list-alt) .list-component-full::-webkit-scrollbar-track { background: #b2edfd; border: 1px solid #0990ae; border-radius: 1em; }
.sec-step2 .list:not(.list-alt) .list-component-full::-webkit-scrollbar-thumb, .sec-step3 .list:not(.list-alt) .list-component-full::-webkit-scrollbar-thumb { background: #303076; border-radius: 1em; }
.sec-step2 .list:not(.list-alt) .list-component-full::-webkit-scrollbar-thumb:hover, .sec-step3 .list:not(.list-alt) .list-component-full::-webkit-scrollbar-thumb:hover { background: #45458d; }
.sec-step2 .list-component-full, .sec-step3 .list-component-full { padding: .75em .5em .25em; display: flex; flex-wrap: wrap; }
.sec-step2 .list-component-full > li, .sec-step3 .list-component-full > li { width: calc(50% - .5em); align-items: center; background: #b8e8f6; margin: 0 .25em .5em; cursor: pointer; }
.sec-step2 .list-component-full > li:nth-child(1), .sec-step3 .list-component-full > li:nth-child(1) { order: 1; }
.sec-step2 .list-component-full > li:nth-child(2), .sec-step3 .list-component-full > li:nth-child(2) { order: 3; }
.sec-step2 .list-component-full > li:nth-child(3), .sec-step3 .list-component-full > li:nth-child(3) { order: 5; }
.sec-step2 .list-component-full > li:nth-child(4), .sec-step3 .list-component-full > li:nth-child(4) { order: 7; }
.sec-step2 .list-component-full > li:nth-child(5), .sec-step3 .list-component-full > li:nth-child(5) { order: 9; }
.sec-step2 .list-component-full > li:nth-child(6), .sec-step3 .list-component-full > li:nth-child(6) { order: 11; }
.sec-step2 .list-component-full > li:nth-child(7), .sec-step3 .list-component-full > li:nth-child(7) { order: 13; }
.sec-step2 .list-component-full > li:nth-child(8), .sec-step3 .list-component-full > li:nth-child(8) { order: 2; }
.sec-step2 .list-component-full > li:nth-child(9), .sec-step3 .list-component-full > li:nth-child(9) { order: 4; }
.sec-step2 .list-component-full > li:nth-child(10), .sec-step3 .list-component-full > li:nth-child(10) { order: 6; }
.sec-step2 .list-component-full > li:nth-child(11), .sec-step3 .list-component-full > li:nth-child(11) { order: 8; }
.sec-step2 .list-component-full > li:nth-child(12), .sec-step3 .list-component-full > li:nth-child(12) { order: 10; }
.sec-step2 .list-component-full > li:nth-child(13), .sec-step3 .list-component-full > li:nth-child(13) { order: 12; }
.sec-step2 .list-component-full > li:nth-child(14), .sec-step3 .list-component-full > li:nth-child(14) { order: 14; }
.sec-step2 .list-component-full > li:nth-child(1):nth-last-child(14), .sec-step3 .list-component-full > li:nth-child(1):nth-last-child(14) { order: 1; }
.sec-step2 .list-component-full > li:nth-child(2):nth-last-child(13), .sec-step3 .list-component-full > li:nth-child(2):nth-last-child(13) { order: 3; }
.sec-step2 .list-component-full > li:nth-child(3):nth-last-child(12), .sec-step3 .list-component-full > li:nth-child(3):nth-last-child(12) { order: 5; }
.sec-step2 .list-component-full > li:nth-child(4):nth-last-child(11), .sec-step3 .list-component-full > li:nth-child(4):nth-last-child(11) { order: 7; }
.sec-step2 .list-component-full > li:nth-child(5):nth-last-child(10), .sec-step3 .list-component-full > li:nth-child(5):nth-last-child(10) { order: 9; }
.sec-step2 .list-component-full > li:nth-child(6):nth-last-child(9), .sec-step3 .list-component-full > li:nth-child(6):nth-last-child(9) { order: 11; }
.sec-step2 .list-component-full > li:nth-child(7):nth-last-child(8), .sec-step3 .list-component-full > li:nth-child(7):nth-last-child(8) { order: 13; }
.sec-step2 .list-component-full > li:nth-child(8):nth-last-child(7), .sec-step3 .list-component-full > li:nth-child(8):nth-last-child(7) { order: 2; }
.sec-step2 .list-component-full > li:nth-child(9):nth-last-child(6), .sec-step3 .list-component-full > li:nth-child(9):nth-last-child(6) { order: 4; }
.sec-step2 .list-component-full > li:nth-child(10):nth-last-child(5), .sec-step3 .list-component-full > li:nth-child(10):nth-last-child(5) { order: 6; }
.sec-step2 .list-component-full > li:nth-child(11):nth-last-child(4), .sec-step3 .list-component-full > li:nth-child(11):nth-last-child(4) { order: 8; }
.sec-step2 .list-component-full > li:nth-child(12):nth-last-child(3), .sec-step3 .list-component-full > li:nth-child(12):nth-last-child(3) { order: 10; }
.sec-step2 .list-component-full > li:nth-child(13):nth-last-child(2), .sec-step3 .list-component-full > li:nth-child(13):nth-last-child(2) { order: 12; }
.sec-step2 .list-component-full > li:nth-child(14):nth-last-child(1), .sec-step3 .list-component-full > li:nth-child(14):nth-last-child(1) { order: 14; }
.sec-step2 .list-component-full > li:nth-child(1):nth-last-child(15), .sec-step3 .list-component-full > li:nth-child(1):nth-last-child(15) { order: 1; }
.sec-step2 .list-component-full > li:nth-child(2):nth-last-child(14), .sec-step3 .list-component-full > li:nth-child(2):nth-last-child(14) { order: 3; }
.sec-step2 .list-component-full > li:nth-child(3):nth-last-child(13), .sec-step3 .list-component-full > li:nth-child(3):nth-last-child(13) { order: 5; }
.sec-step2 .list-component-full > li:nth-child(4):nth-last-child(12), .sec-step3 .list-component-full > li:nth-child(4):nth-last-child(12) { order: 7; }
.sec-step2 .list-component-full > li:nth-child(5):nth-last-child(11), .sec-step3 .list-component-full > li:nth-child(5):nth-last-child(11) { order: 9; }
.sec-step2 .list-component-full > li:nth-child(6):nth-last-child(10), .sec-step3 .list-component-full > li:nth-child(6):nth-last-child(10) { order: 11; }
.sec-step2 .list-component-full > li:nth-child(7):nth-last-child(9), .sec-step3 .list-component-full > li:nth-child(7):nth-last-child(9) { order: 13; }
.sec-step2 .list-component-full > li:nth-child(8):nth-last-child(8), .sec-step3 .list-component-full > li:nth-child(8):nth-last-child(8) { order: 15; }
.sec-step2 .list-component-full > li:nth-child(9):nth-last-child(7), .sec-step3 .list-component-full > li:nth-child(9):nth-last-child(7) { order: 2; }
.sec-step2 .list-component-full > li:nth-child(10):nth-last-child(6), .sec-step3 .list-component-full > li:nth-child(10):nth-last-child(6) { order: 4; }
.sec-step2 .list-component-full > li:nth-child(11):nth-last-child(5), .sec-step3 .list-component-full > li:nth-child(11):nth-last-child(5) { order: 6; }
.sec-step2 .list-component-full > li:nth-child(12):nth-last-child(4), .sec-step3 .list-component-full > li:nth-child(12):nth-last-child(4) { order: 8; }
.sec-step2 .list-component-full > li:nth-child(13):nth-last-child(3), .sec-step3 .list-component-full > li:nth-child(13):nth-last-child(3) { order: 10; }
.sec-step2 .list-component-full > li:nth-child(14):nth-last-child(2), .sec-step3 .list-component-full > li:nth-child(14):nth-last-child(2) { order: 12; }
.sec-step2 .list-component-full > li:nth-child(15):nth-last-child(1), .sec-step3 .list-component-full > li:nth-child(15):nth-last-child(1) { order: 14; }
.sec-step2 .list-component-full > li:nth-child(1):nth-last-child(16), .sec-step3 .list-component-full > li:nth-child(1):nth-last-child(16) { order: 1; }
.sec-step2 .list-component-full > li:nth-child(2):nth-last-child(15), .sec-step3 .list-component-full > li:nth-child(2):nth-last-child(15) { order: 3; }
.sec-step2 .list-component-full > li:nth-child(3):nth-last-child(14), .sec-step3 .list-component-full > li:nth-child(3):nth-last-child(14) { order: 5; }
.sec-step2 .list-component-full > li:nth-child(4):nth-last-child(13), .sec-step3 .list-component-full > li:nth-child(4):nth-last-child(13) { order: 7; }
.sec-step2 .list-component-full > li:nth-child(5):nth-last-child(12), .sec-step3 .list-component-full > li:nth-child(5):nth-last-child(12) { order: 9; }
.sec-step2 .list-component-full > li:nth-child(6):nth-last-child(11), .sec-step3 .list-component-full > li:nth-child(6):nth-last-child(11) { order: 11; }
.sec-step2 .list-component-full > li:nth-child(7):nth-last-child(10), .sec-step3 .list-component-full > li:nth-child(7):nth-last-child(10) { order: 13; }
.sec-step2 .list-component-full > li:nth-child(8):nth-last-child(9), .sec-step3 .list-component-full > li:nth-child(8):nth-last-child(9) { order: 15; }
.sec-step2 .list-component-full > li:nth-child(9):nth-last-child(8), .sec-step3 .list-component-full > li:nth-child(9):nth-last-child(8) { order: 2; }
.sec-step2 .list-component-full > li:nth-child(10):nth-last-child(7), .sec-step3 .list-component-full > li:nth-child(10):nth-last-child(7) { order: 4; }
.sec-step2 .list-component-full > li:nth-child(11):nth-last-child(6), .sec-step3 .list-component-full > li:nth-child(11):nth-last-child(6) { order: 6; }
.sec-step2 .list-component-full > li:nth-child(12):nth-last-child(5), .sec-step3 .list-component-full > li:nth-child(12):nth-last-child(5) { order: 8; }
.sec-step2 .list-component-full > li:nth-child(13):nth-last-child(4), .sec-step3 .list-component-full > li:nth-child(13):nth-last-child(4) { order: 10; }
.sec-step2 .list-component-full > li:nth-child(14):nth-last-child(3), .sec-step3 .list-component-full > li:nth-child(14):nth-last-child(3) { order: 12; }
.sec-step2 .list-component-full > li:nth-child(15):nth-last-child(2), .sec-step3 .list-component-full > li:nth-child(15):nth-last-child(2) { order: 14; }
.sec-step2 .list-component-full > li:nth-child(16):nth-last-child(1), .sec-step3 .list-component-full > li:nth-child(16):nth-last-child(1) { order: 16; }
.sec-step2 .list-component-full > li:hover, .sec-step3 .list-component-full > li:hover { background: #8adcf1; }
.sec-step2 .list-component-full > li.active, .sec-step3 .list-component-full > li.active { background: #0468b8; box-shadow: 0 0 0.5em rgba(0, 193, 226, 0.5); text-shadow: 0 0 5px #00c1e2; }
.sec-step2 .list-component-full > li.active h4, .sec-step3 .list-component-full > li.active h4 { color: white; }
.sec-step2 .list-component-full h4, .sec-step3 .list-component-full h4 { font-size: 1em; line-height: 1; width: calc(100% - 2.5em); padding-top: 0; color: black; }
.sec-step2 .list-component-full h4 span, .sec-step3 .list-component-full h4 span { display: block; width: 100%; margin: .125em 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-step2 .list-alt, .sec-step3 .list-alt { height: calc(100% - 3.4em); }
.sec-step2 .list-alt h3, .sec-step3 .list-alt h3 { display: flex; align-items: center; text-align: left; }
.sec-step2 .list-alt h3 .icon, .sec-step3 .list-alt h3 .icon { flex-shrink: 0; width: 1.25em; height: 1.25em; }
.sec-step2 .list-alt .list-component-full, .sec-step3 .list-alt .list-component-full { padding-top: 0; }
.sec-step2 .list-alt .list-component-full > li, .sec-step3 .list-alt .list-component-full > li { width: 100%; padding-top: .75em; padding-bottom: .75em; margin-bottom: .25em; }
.sec-step2 .list-alt .alt-container, .sec-step3 .list-alt .alt-container { height: calc(100% - 4.4em); }
.sec-step2 .alt-list-container, .sec-step3 .alt-list-container { max-height: 23.5em; margin-bottom: .5em; overflow-y: auto; }
.sec-step2 .alt-list-container::-webkit-scrollbar, .sec-step3 .alt-list-container::-webkit-scrollbar { width: .3em; }
.sec-step2 .alt-list-container::-webkit-scrollbar-track, .sec-step3 .alt-list-container::-webkit-scrollbar-track { background: #b2edfd; border: 1px solid #0990ae; border-radius: 1em; }
.sec-step2 .alt-list-container::-webkit-scrollbar-thumb, .sec-step3 .alt-list-container::-webkit-scrollbar-thumb { background: #303076; border-radius: 1em; }
.sec-step2 .alt-list-container::-webkit-scrollbar-thumb:hover, .sec-step3 .alt-list-container::-webkit-scrollbar-thumb:hover { background: #45458d; }
.sec-step2 .alt-list-container .list-component-full > li, .sec-step3 .alt-list-container .list-component-full > li { order: 0 !important; }
.sec-step2 .split-title, .sec-step3 .split-title { display: flex; flex-wrap: nowrap; align-items: center; margin: .25em 1em; position: relative; text-align: center; }
.sec-step2 .split-title p, .sec-step3 .split-title p { flex-shrink: 0; color: #097081; padding: 0 .25em; }
.sec-step2 .split-title:before, .sec-step3 .split-title:before, .sec-step2 .split-title:after, .sec-step3 .split-title:after { content: ''; display: block; width: 100%; height: 2px; border-top: 2px dotted #00c1e2; }
.sec-step2 .detail-container, .sec-step3 .detail-container { min-height: 20em; padding: 0 .75em 0 .5em; }
.sec-step2 .detail-container figure, .sec-step3 .detail-container figure { width: 100%; height: 0; padding-bottom: 100%; background: #b8e8f6 url(../img/notfound.png) center no-repeat; background-size: 80%; border-radius: .5em; position: relative; overflow: hidden; }
.sec-step2 .detail-container .pd-name, .sec-step3 .detail-container .pd-name { display: block; min-height: 2.5em; font-weight: bold; text-align: center; margin: .5em 0; }
.sec-step2 .detail-container .split-title, .sec-step3 .detail-container .split-title { margin-left: 0; margin-right: 0; }
.sec-step2 .btn-container .btn, .sec-step3 .btn-container .btn { width: 100%; font-size: 1.5em; text-align: center; margin-top: .25em; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
.sec-step2 .btn-container .btn:hover, .sec-step3 .btn-container .btn:hover { background: #08809B; -moz-transform: translate(0, -0.25em); -o-transform: translate(0, -0.25em); -ms-transform: translate(0, -0.25em); -webkit-transform: translate(0, -0.25em); transform: translate(0, -0.25em); }
.sec-step2 .btn-container .btn:hover:before, .sec-step3 .btn-container .btn:hover:before, .sec-step2 .btn-container .btn:hover:after, .sec-step3 .btn-container .btn:hover:after { display: block; }
.sec-step2 .btn-container .btn:hover:before, .sec-step3 .btn-container .btn:hover:before { -moz-transform: translate(0, 0.25em); -o-transform: translate(0, 0.25em); -ms-transform: translate(0, 0.25em); -webkit-transform: translate(0, 0.25em); transform: translate(0, 0.25em); }
.sec-step2 .btn, .sec-step3 .btn { display: inline-block; background: #08809B; border: none; border-radius: 0; text-align: center; padding: .4em 1em .25em; margin: .5em auto; position: relative; -moz-transition: background 0.25s ease; -o-transition: background 0.25s ease; -webkit-transition: background 0.25s ease; transition: background 0.25s ease; }
.sec-step2 .btn:before, .sec-step3 .btn:before, .sec-step2 .btn:after, .sec-step3 .btn:after { display: none; }
.sec-step2 .btn.btn-disabled, .sec-step3 .btn.btn-disabled { background: #587C84; }
.sec-step2 .btn:hover, .sec-step3 .btn:hover { -moz-transform: none; -o-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; background: #303076; }
.sec-step2 .btn.trigger-step3, .sec-step3 .btn.trigger-step3 { padding: .5em; margin-bottom: 0; }

.sec-step3 .title-container h3 { text-align: center; }
.sec-step3 .title-container h3:nth-child(1) { width: 5.45em; }
.sec-step3 .title-container h3:nth-child(2) { width: calc(100% - 17em); padding-left: 1em; text-align: left; }
.sec-step3 .title-container h3:nth-child(3) { width: 11.25em; }
.sec-step3 .list-component-final { display: block; }
.sec-step3 .list-component-final > li { width: 100%; padding-top: 0; padding-bottom: 0; cursor: default; }
.sec-step3 .list-component-final > li.d-none { display: none; }
.sec-step3 .list-component-final > li:hover { background: #b8e8f6; }
.sec-step3 .list-component-final .thumbnail { width: 7em; height: 7em; background: url(../img/notfound.png) center no-repeat; background-size: 80%; margin-right: 1em; }
.sec-step3 .list-component-final .content { width: calc(100% - 25em); padding: .125em 1em; }
.sec-step3 .list-component-final p { font-size: 1.25em; font-weight: 600; color: #0464b1; margin-bottom: .1em; }
.sec-step3 .list-component-final h4 { width: 100%; font-size: 2em; line-height: 1.25; font-weight: 600; color: black; }
.sec-step3 .etailer-list { width: 23em; padding-top: .125em; padding-bottom: .125em; }
.sec-step3 .etailer-list a { font-size: 1.35em; margin-right: .25em; }
.sec-step3 .btn { font-size: 1.5em; font-weight: bold; }

.filter-list { padding: .5em .75em; overflow-x: auto; }
.filter-list::-webkit-scrollbar { height: 0; }
.filter-list::-webkit-scrollbar-track { background: transparent; }
.filter-list::-webkit-scrollbar-thumb { background: #303076; }
.filter-list::-webkit-scrollbar-thumb:hover { background: #45458d; }
.filter-list li { display: block; flex-shrink: 0; padding: .25em 1em; color: white; background: #6d6d6d; text-shadow: 0 0 5px #303076; border-radius: 1em; margin-right: .5em; cursor: pointer; }
.filter-list li.active { background: #303076; }

.etailer-list { display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: center; }
.etailer-list a { display: block; width: 2.5em; height: 2.5em; border-radius: 2em; border: 1px solid #999; background: white center no-repeat; background-size: 90%; position: relative; overflow: hidden; margin-right: -.5em; margin-bottom: .25em; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
.etailer-list a.larger { width: 5.5em; }
.etailer-list a:hover { -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); z-index: 2; }
.etailer-list img { width: 60%; }

@media screen and (max-width: 1440px) { .sec-step1 { padding: 2em 0 4em; }
  .sec-step3 .list-component-final .content { width: calc(100% - 17em); }
  .sec-step3 .list-component-final p { font-size: 1em; }
  .sec-step3 .list-component-final h4 { font-size: 1.5em; }
  .sec-step3 .etailer-list { width: 20em; }
  .sec-step3 .etailer-list a { font-size: 1.125em; } }
@media screen and (max-width: 1280px) { .sec-banner { padding: 3em 0 4em; }
  .sec-banner .container img { width: 13em; }
  .sec-step1 .container, .sec-step2 .container, .sec-step3 .container { width: 90%; }
  .sec-step1 h2, .sec-step2 h2, .sec-step3 h2 { font-size: 2.5em; }
  .sec-step1 .item { margin: 8% .5em; }
  .sec-step1 .item h3 { font-size: 1.75em; }
  .sec-step1 .item .list-component { padding: 1em 1em; }
  .sec-step2 .container > .col50, .sec-step3 .container > .col50 { width: calc(50% - .5em); } }
@media screen and (max-width: 1024px) { .sec-banner .container img { width: 10em; }
  .sec-step1 .item { margin: 8% 0; }
  .sec-step1 .item h3 { font-size: 1.5em; }
  .sec-step1 .owl-item.center { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  .sec-step3 .list-component-final .thumbnail { margin-right: 0; }
  .sec-step3 .list-component-final .content { width: calc(100% - 16em); }
  .sec-step3 .etailer-list a { margin-right: .125em; }
  .sec-step3 .btn.trigger-reseller { font-size: 1.25em; } }
@media screen and (max-width: 1023px) { .sec-step2 .container > .col50, .sec-step3 .container > .col50 { width: 100%; margin-bottom: 1em; } }
@media screen and (max-width: 768px) { .sec-step1 .w1200, .sec-step2 .w1200, .sec-step3 .w1200 { width: 90%; }
  .sec-step1 h2, .sec-step2 h2, .sec-step3 h2 { font-size: 2em; }
  .sec-step1 .item { margin: 0; }
  .sec-step1 .slider-build { width: 90%; max-width: 500px; margin: 0 auto; }
  .sec-step2 .list h3, .sec-step3 .list h3 { font-size: 1.5em; }
  .sec-step2 .list-alt h3, .sec-step3 .list-alt h3 { text-align: center; }
  .sec-step3 .title-container { display: none; }
  .sec-step3 .list { background: none; box-shadow: none; }
  .sec-step3 .list-component-final { padding: 0; }
  .sec-step3 .list-component-final > li { flex-wrap: wrap; padding: 0; margin-left: 0; margin-right: 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); }
  .sec-step3 .list-component-final > li:last-child { margin-bottom: 0; }
  .sec-step3 .list-component-final .thumbnail { width: 6em; padding: 0 .5em; }
  .sec-step3 .list-component-final .content { width: calc(100% - 6em); padding-left: 0; }
  .sec-step3 .list-component-final p { font-size: .9em; }
  .sec-step3 .list-component-final h4 { font-size: 1.25em; }
  .sec-step3 .etailer-list { width: 100%; position: relative; }
  .sec-step3 .etailer-list:before { content: ''; display: block; width: 100%; height: 2em; background: #0990ae; position: absolute; left: 0; bottom: 0; }
  .sec-step3 .etailer-list a { font-size: 1em; margin: .5em .25em; } }
@media screen and (max-width: 620px) { .sec-step2 .list-component-full, .sec-step3 .list-component-full { column-count: 1; } }
@media screen and (max-width: 480px) { .sec-banner { padding: 1em 0 2em; }
  .sec-banner .container { flex-direction: column; }
  .sec-banner .container img { width: 6em; }
  .sec-banner .container h2 { font-size: 2em; }
  .sec-step1 h2, .sec-step2 h2, .sec-step3 h2 { font-size: 1.75em; padding-left: 0; text-align: center; }
  .sec-step1 h2 .title-deco, .sec-step2 h2 .title-deco, .sec-step3 h2 .title-deco { font-size: 1.5em; position: relative; top: 0; margin: 0 auto .5em; }
  .sec-step1 .item .list-component li { width: 100%; }
  .sec-step2, .sec-step3 { padding: 2em 0 4em; }
  .sec-step2 .list:not(.list-alt) .list-component-full, .sec-step3 .list:not(.list-alt) .list-component-full { max-height: 21em; }
  .sec-step2 .list-component-full, .sec-step3 .list-component-full { padding: 1em .25em; }
  .sec-step2 .list-component-full li, .sec-step3 .list-component-full li { width: 100%; }
  .sec-step2 .list-component-full li:nth-child(n), .sec-step3 .list-component-full li:nth-child(n) { order: 1; }
  .sec-step2 .alt-list-container, .sec-step3 .alt-list-container, .sec-step2 .detail-container, .sec-step3 .detail-container { width: 100%; }
  .sec-step2 .alt-list-container, .sec-step3 .alt-list-container { max-height: 15em; }
  .sec-step3 .list-component-final { display: flex; flex-direction: column; max-height: none !important; }
  .sec-step3 .list-component-final > li { flex-wrap: wrap; padding: 0; margin-left: 0; margin-right: 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); }
  .sec-step3 .list-component-final > li:last-child { margin-bottom: 0; }
  .sec-step3 .list-component-final .thumbnail { width: 100%; padding: .5em 1em; }
  .sec-step3 .list-component-final .thumbnail img { max-width: 120px; margin: 0 auto; }
  .sec-step3 .list-component-final .content { width: 100%; padding: .5em 1em; text-align: center; }
  .sec-step3 .list-component-final h4 { height: auto !important; overflow: visible; text-overflow: unset; -webkit-line-clamp: initial; -webkit-box-orient: unset; } }
.sec-rules { position: relative; overflow: hidden; }
.sec-rules .container { padding: 4em 0; }
.sec-rules .content { width: 90%; max-width: 31em; font-size: 1.25em; }
.sec-rules .content ul { list-style-type: disc; list-style-position: inside; margin: 0 auto 1em; padding-left: 1em; }
.sec-rules .content ol { list-style-type: decimal; list-style-position: inside; margin: 1em 0; }
.sec-rules .content li { font-size: 1em; font-weight: 400; line-height: 1.5; letter-spacing: .04em; list-style-position: outside; }
.sec-rules .content hr { width: 1.5em; opacity: .5; margin: 1.5em auto; }
.sec-rules .content a { color: #0990ae; word-break: break-all; }
.sec-rules .content a:hover { text-decoration: underline; }
.sec-rules .content p { margin-bottom: 1em; }
.sec-rules .content .color-grey { color: #757575; }

.e-widget-wrapper { width: 100%; background: white; }
.e-widget-wrapper .e-widget-preloader, .e-widget-wrapper iframe.e-embed-frame { min-width: 280px; }

.ggsi img { display: inline-block; }

.sec-gleam .container { padding: 3em 0; }

.sec-prizes .container { padding: 4em 0; }
.sec-prizes figure { margin-bottom: 2em; }
.sec-prizes .prize-name { color: #303076; font-weight: bold; letter-spacing: 0; margin-bottom: .25em; }
.sec-prizes h4 { font-size: 1.5em; margin-left: -1em; margin-right: -1em; }
.sec-prizes .content { width: calc(50% - 1.5em); }
.sec-prizes .content .item { padding: 0 2em; margin-top: 2em; }

@media screen and (min-width: 2560px) { .sec-rules .content { max-width: 32em; } }
@media screen and (max-width: 1280px) { .sec-gleam .container { padding: 2em 0; }
  .sec-prizes .container { padding: 2em 0; }
  .sec-prizes h4 { font-size: 1.25em; }
  .sec-prizes .title-deco { width: 3em; height: 3em; padding-bottom: .75em; font-size: 1.125em; }
  .sec-prizes .title-deco strong { font-size: 1.5em; } }
@media screen and (max-width: 1024px) { .sec-prizes .slider-prize { padding: 0; }
  .sec-prizes figure { margin-bottom: 1em; } }
@media screen and (max-width: 768px) { .sec-prizes .content { width: 100%; }
  .sec-prizes .content:first-child { padding-bottom: 2em; margin-bottom: 2em; position: relative; }
  .sec-prizes .content:first-child:after { content: ''; display: block; width: 1.5em; height: 1px; background: rgba(0, 0, 0, 0.25); position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; }
  .sec-prizes h4 { margin-left: 0; margin-right: 0; } }
@media screen and (max-width: 620px) { .sec-rules .content { font-size: 1.125em; }
  .sec-prizes h4 { font-size: 1.125em; } }
@media screen and (max-width: 480px) { .sec-rules .container { padding: 2em 0; }
  .sec-rules .container.mw900 { width: 85%; }
  .sec-prizes .content:first-child { padding-bottom: 0; }
  .sec-prizes .content .item { width: 100%; max-width: 400px; margin: 2em auto; } }

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