@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&subset=vietnamese");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap&subset=vietnamese");
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,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
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-family: inherit;
  outline: none !important; }

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

html,
body {
  min-height: 100%; }

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
  font-weight: 400;
  color: #333333; }

ol,
ul {
  list-style: none; }

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

table {
  border-collapse: collapse;
  border-spacing: 0; }

button {
  outline: none !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  button:hover {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

a {
  text-decoration: none !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  a:hover {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }

input[type=text],
textarea {
  -webkit-appearance: none; }

@font-face {
  font-family: 'icomoon';
  src: url("./../fonts/icomoon/fonts/icomoon.eot?4p8xrb");
  src: url("./../fonts/icomoon/fonts/icomoon.eot?4p8xrb#iefix") format("embedded-opentype"), url("./../fonts/icomoon/fonts/icomoon.ttf?4p8xrb") format("truetype"), url("./../fonts/icomoon/fonts/icomoon.woff?4p8xrb") format("woff"), url("./../fonts/icomoon/fonts/icomoon.svg?4p8xrb#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }

@font-face {
  font-family: "slick";
  src: url("./../fonts/slick.eot");
  src: url("./../fonts/slick.eot?#iefix") format("embedded-opentype"), url("./../fonts/slick.woff") format("woff"), url("./../fonts/slick.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

/* Slider */
.slick-loading .slick-list {
  background: #fff slick-image-url("./../images/ajax-loader.gif") center center no-repeat; }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-play:before {
  content: "\e91d"; }

.icon-bonus:before {
  content: "\e917"; }

.icon-bus:before {
  content: "\e918"; }

.icon-calendar:before {
  content: "\e919"; }

.icon-insurance:before {
  content: "\e91a"; }

.icon-salary:before {
  content: "\e91b"; }

.icon-training:before {
  content: "\e91c"; }

.icon-download:before {
  content: "\e916"; }

.icon-link:before {
  content: "\e904"; }

.icon-share-facebook:before {
  content: "\e906"; }

.icon-upload:before {
  content: "\e914"; }

.icon-view:before {
  content: "\e915"; }

.icon-expired:before {
  content: "\e911"; }

.icon-people:before {
  content: "\e912"; }

.icon-postition:before {
  content: "\e913"; }

.icon-close:before {
  content: "\e90e"; }

.icon-slide-next:before {
  content: "\e90f"; }

.icon-slide-prev:before {
  content: "\e910"; }

.icon-call:before {
  content: "\e902"; }

.icon-facebook:before {
  content: "\e909"; }

.icon-instagram:before {
  content: "\e90a"; }

.icon-maps:before {
  content: "\e90b"; }

.icon-youtube:before {
  content: "\e90c"; }

.icon-zoom:before {
  content: "\e90d"; }

.icon-next:before {
  content: "\e908"; }

.icon-dropdown:before {
  content: "\e900"; }

.icon-email:before {
  content: "\e901"; }

.icon-language:before {
  content: "\e903"; }

.icon-linkedin:before {
  content: "\e905"; }

.icon-search:before {
  content: "\e907"; }

.clearfix {
  clear: both; }

.m0 {
  margin: 0 !important; }

.mt0 {
  margin-top: 0 !important; }

.mr0 {
  margin-right: 0 !important; }

.mb0 {
  margin-bottom: 0 !important; }

.ml0 {
  margin-left: 0 !important; }

.m5 {
  margin: 5px !important; }

.mt5 {
  margin-top: 5px !important; }

.mr5 {
  margin-right: 5px !important; }

.mb5 {
  margin-bottom: 5px !important; }

.ml5 {
  margin-left: 5px !important; }

.m10 {
  margin: 10px !important; }

.mt10 {
  margin-top: 10px !important; }

.mr10 {
  margin-right: 10px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.ml10 {
  margin-left: 10px !important; }

.m15 {
  margin: 15px !important; }

.mt15 {
  margin-top: 15px !important; }

.mr15 {
  margin-right: 15px !important; }

.mb15 {
  margin-bottom: 15px !important; }

.ml15 {
  margin-left: 15px !important; }

.m20 {
  margin: 20px !important; }

.mt20 {
  margin-top: 20px !important; }

.mr20 {
  margin-right: 20px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.ml20 {
  margin-left: 20px !important; }

.m25 {
  margin: 25px !important; }

.mt25 {
  margin-top: 25px !important; }

.mr25 {
  margin-right: 25px !important; }

.mb25 {
  margin-bottom: 25px !important; }

.ml25 {
  margin-left: 25px !important; }

.m30 {
  margin: 30px !important; }

.mt30 {
  margin-top: 30px !important; }

.mr30 {
  margin-right: 30px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.ml30 {
  margin-left: 30px !important; }

.m35 {
  margin: 35px !important; }

.mt35 {
  margin-top: 35px !important; }

.mr35 {
  margin-right: 35px !important; }

.mb35 {
  margin-bottom: 35px !important; }

.ml35 {
  margin-left: 35px !important; }

.m40 {
  margin: 40px !important; }

.mt40 {
  margin-top: 40px !important; }

.mr40 {
  margin-right: 40px !important; }

.mb40 {
  margin-bottom: 40px !important; }

.ml40 {
  margin-left: 40px !important; }

.m45 {
  margin: 45px !important; }

.mt45 {
  margin-top: 45px !important; }

.mr45 {
  margin-right: 45px !important; }

.mb45 {
  margin-bottom: 45px !important; }

.ml45 {
  margin-left: 45px !important; }

.m50 {
  margin: 50px !important; }

.mt50 {
  margin-top: 50px !important; }

.mr50 {
  margin-right: 50px !important; }

.mb50 {
  margin-bottom: 50px !important; }

.ml50 {
  margin-left: 50px !important; }

.m55 {
  margin: 55px !important; }

.mt55 {
  margin-top: 55px !important; }

.mr55 {
  margin-right: 55px !important; }

.mb55 {
  margin-bottom: 55px !important; }

.ml55 {
  margin-left: 55px !important; }

.m60 {
  margin: 60px !important; }

.mt60 {
  margin-top: 60px !important; }

.mr60 {
  margin-right: 60px !important; }

.mb60 {
  margin-bottom: 60px !important; }

.ml60 {
  margin-left: 60px !important; }

.m65 {
  margin: 65px !important; }

.mt65 {
  margin-top: 65px !important; }

.mr65 {
  margin-right: 65px !important; }

.mb65 {
  margin-bottom: 65px !important; }

.ml65 {
  margin-left: 65px !important; }

.p0 {
  padding: 0 !important; }

.pt0 {
  padding-top: 0 !important; }

.pr0 {
  padding-right: 0 !important; }

.pb0 {
  padding-bottom: 0 !important; }

.pl0 {
  padding-left: 0 !important; }

.p5 {
  padding: 5px !important; }

.pt5 {
  padding-top: 5px !important; }

.pr5 {
  padding-right: 5px !important; }

.pb5 {
  padding-bottom: 5px !important; }

.pl5 {
  padding-left: 5px !important; }

.p10 {
  padding: 10px !important; }

.pt10 {
  padding-top: 10px !important; }

.pr10 {
  padding-right: 10px !important; }

.pb10 {
  padding-bottom: 10px !important; }

.pl10 {
  padding-left: 10px !important; }

.p15 {
  padding: 15px !important; }

.pt15 {
  padding-top: 15px !important; }

.pr15 {
  padding-right: 15px !important; }

.pb15 {
  padding-bottom: 15px !important; }

.pl15 {
  padding-left: 15px !important; }

.p20 {
  padding: 20px !important; }

.pt20 {
  padding-top: 20px !important; }

.pr20 {
  padding-right: 20px !important; }

.pb20 {
  padding-bottom: 20px !important; }

.pl20 {
  padding-left: 20px !important; }

.p25 {
  padding: 25px !important; }

.pt25 {
  padding-top: 25px !important; }

.pr25 {
  padding-right: 25px !important; }

.pb25 {
  padding-bottom: 25px !important; }

.pl25 {
  padding-left: 25px !important; }

.p30 {
  padding: 30px !important; }

.pt30 {
  padding-top: 30px !important; }

.pr30 {
  padding-right: 30px !important; }

.pb30 {
  padding-bottom: 30px !important; }

.pl30 {
  padding-left: 30px !important; }

.p35 {
  padding: 35px !important; }

.pt35 {
  padding-top: 35px !important; }

.pr35 {
  padding-right: 35px !important; }

.pb35 {
  padding-bottom: 35px !important; }

.pl35 {
  padding-left: 35px !important; }

.p40 {
  padding: 40px !important; }

.pt40 {
  padding-top: 40px !important; }

.pr40 {
  padding-right: 40px !important; }

.pb40 {
  padding-bottom: 40px !important; }

.pl40 {
  padding-left: 40px !important; }

.p45 {
  padding: 45px !important; }

.pt45 {
  padding-top: 45px !important; }

.pr45 {
  padding-right: 45px !important; }

.pb45 {
  padding-bottom: 45px !important; }

.pl45 {
  padding-left: 45px !important; }

.p50 {
  padding: 50px !important; }

.pt50 {
  padding-top: 50px !important; }

.pr50 {
  padding-right: 50px !important; }

.pb50 {
  padding-bottom: 50px !important; }

.pl50 {
  padding-left: 50px !important; }

.p55 {
  padding: 55px !important; }

.pt55 {
  padding-top: 55px !important; }

.pr55 {
  padding-right: 55px !important; }

.pb55 {
  padding-bottom: 55px !important; }

.pl55 {
  padding-left: 55px !important; }

.p60 {
  padding: 60px !important; }

.pt60 {
  padding-top: 60px !important; }

.pr60 {
  padding-right: 60px !important; }

.pb60 {
  padding-bottom: 60px !important; }

.pl60 {
  padding-left: 60px !important; }

.p65 {
  padding: 65px !important; }

.pt65 {
  padding-top: 65px !important; }

.pr65 {
  padding-right: 65px !important; }

.pb65 {
  padding-bottom: 65px !important; }

.pl65 {
  padding-left: 65px !important; }

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }

@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px); } }

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce; }

@-webkit-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1; }
  25%,
  75% {
    opacity: 0; } }

@keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1; }
  25%,
  75% {
    opacity: 0; } }

.flash {
  -webkit-animation-name: flash;
  animation-name: flash; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse; }

@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); } }

@keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px); }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px); } }

.shake {
  -webkit-animation-name: shake;
  animation-name: shake; }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg); }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg); }
  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg); }
  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg); }
  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); } }

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing; }

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  10%,
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  10%,
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }

.tada {
  -webkit-animation-name: tada;
  animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg); }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg); }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg); }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg); }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%); }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg); }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg); }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg); }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg); }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg); }
  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%); } }

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble; }

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px); }
  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px); }
  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px); }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px); }
  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight; }

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px); }
  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp; }

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); } }

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  25% {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3); } }

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut; }

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); } }

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); } }

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown; }

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft; }

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight; }

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig; }

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0%, 0);
    transform: translate3d(-20%, 0%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig; }

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig; }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig; }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); } }

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); } }

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown; }

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); } }

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); } }

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig; }

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); } }

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); } }

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft; }

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig; }

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); } }

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); } }

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight; }

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig; }

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); } }

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp; }

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig; }

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip; }

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX; }

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY; }

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important; }

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY; }

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1; }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1; }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn; }

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft; }

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight; }

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft; }

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight; }

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut; }

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft; }

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight; }

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft; }

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight; }

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown; }

.slideInUp {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown; }

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight; }

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft; }

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight; }

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp; }

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  20%,
  60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0; } }

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  20%,
  60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0; } }

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg); } }

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg); } }

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut; }

body {
  overflow-x: hidden;
  height: 100%;
  width: 100%; }

.in-down {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s; }

.in-left {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-duration: 1s;
  animation-delay: 1s; }

@-webkit-keyframes slideInWidth {
  0% {
    width: 0; }
  100% {
    width: 100%; } }

@keyframes slideInWidth {
  0% {
    width: 0; }
  100% {
    width: 100%; } }

.slideInWidth {
  -webkit-animation-name: slideInWidth;
  animation-name: slideInWidth; }

@-webkit-keyframes slideInHieght {
  0% {
    height: 0; }
  100% {
    height: auto; } }

@keyframes slideInHieght {
  0% {
    height: 0; }
  100% {
    height: auto; } }

.slideInHieght {
  -webkit-animation-name: slideInHieght;
  animation-name: slideInHieght; }

/*!
 * Waves v0.6.0
 * http://fian.my.id/Waves
 *
 * Copyright 2014 Alfiana E. Sibuea and other contributors
 * Released under the MIT license
 * https://github.com/fians/Waves/blob/master/LICENSE
 */
.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  transition: .3s ease-out; }
  .waves-effect .waves-ripple {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.7s ease-out;
    transition-property: transform, opacity;
    transform: scale(0);
    pointer-events: none; }
  .waves-effect.waves-light .waves-ripple {
    background-color: rgba(255, 255, 255, 0.45); }
  .waves-effect.waves-red .waves-ripple {
    background-color: rgba(244, 67, 54, 0.7); }
  .waves-effect.waves-yellow .waves-ripple {
    background-color: rgba(255, 235, 59, 0.7); }
  .waves-effect.waves-orange .waves-ripple {
    background-color: rgba(255, 152, 0, 0.7); }
  .waves-effect.waves-purple .waves-ripple {
    background-color: rgba(156, 39, 176, 0.7); }
  .waves-effect.waves-green .waves-ripple {
    background-color: rgba(76, 175, 80, 0.7); }
  .waves-effect.waves-teal .waves-ripple {
    background-color: rgba(0, 150, 136, 0.7); }
  .waves-effect input[type="button"], .waves-effect input[type="reset"], .waves-effect input[type="submit"] {
    border: 0;
    font-style: normal;
    font-size: inherit;
    text-transform: inherit;
    background: none; }
  .waves-effect img {
    position: relative;
    z-index: -1; }

.waves-notransition {
  transition: none !important; }

.waves-circle {
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); }

.waves-input-wrapper {
  border-radius: 0.2em;
  vertical-align: bottom; }
  .waves-input-wrapper .waves-button-input {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1; }

.waves-circle {
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
  -webkit-mask-image: none; }

.waves-block {
  display: block; }

/* Firefox Bug: link not triggered */
.waves-effect .waves-ripple {
  z-index: -1; }

.tab-container {
  background: #ffffff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  padding: 0 100px; }
  .tab-container.sticky {
    position: fixed;
    left: 0;
    top: 73px;
    right: 0;
    width: 100%;
    z-index: 3;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); }
  .tab-container .tab-list {
    display: flex;
    justify-content: center; }
  .tab-container a {
    position: relative;
    opacity: 0.85;
    padding: 20px 0;
    text-decoration: none;
    text-align: center;
    margin: 0 16px;
    font-size: 16px;
    line-height: 24px;
    color: #434343;
    font-weight: 500; }
    .tab-container a.active {
      color: #EE2E35;
      font-weight: 600; }
      .tab-container a.active::after {
        width: 100%;
        transition: all 0.3s ease-in-out; }
    .tab-container a::after {
      content: "";
      position: absolute;
      width: 0%;
      height: 2px;
      top: 100%;
      left: 0;
      background-color: #EE2E35; }
  @media only screen and (max-width: 1336px) {
    .tab-container {
      padding: 0 100px; }
      .tab-container .link {
        font-size: 14px;
        margin: 0 12px;
        padding: 12px 0; } }

/**/
.tab-link-container {
  background: #ffffff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  padding: 0 100px; }
  .tab-link-container.sticky {
    position: fixed;
    left: 0;
    top: 73px;
    right: 0;
    width: 100%;
    z-index: 3;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); }
  .tab-link-container .tab-link-list {
    display: flex;
    justify-content: center; }
  .tab-link-container a {
    position: relative;
    opacity: 0.85;
    padding: 20px 0;
    text-decoration: none;
    text-align: center;
    margin: 0 16px;
    font-size: 16px;
    line-height: 24px;
    color: #434343;
    font-weight: 500; }
    .tab-link-container a.active {
      color: #EE2E35;
      font-weight: 600; }
      .tab-link-container a.active::after {
        width: 100%;
        transition: all 0.3s ease-in-out; }
    .tab-link-container a::after {
      content: "";
      position: absolute;
      width: 0%;
      height: 2px;
      top: 100%;
      left: 0;
      background-color: #EE2E35; }
  @media only screen and (max-width: 1336px) {
    .tab-link-container {
      padding: 0 15px; }
      .tab-link-container .link {
        font-size: 14px;
        margin: 0 12px;
        padding: 12px 0; } }

/**/
.banner-general .banner-image {
  height: 500px !important; }

.general-title {
  font-size: 32px;
  line-height: 44px;
  font-weight: 700;
  color: #000100;
  text-transform: uppercase;
  position: relative;
  padding-left: 70px; }
  .general-title:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 10px;
    left: 0;
    top: 17px;
    background-color: #EE2E35; }
  .general-title.general-title-white {
    color: #ffffff; }
  @media only screen and (max-width: 767px) {
    .general-title {
      font-size: 26px;
      line-height: 34px;
      padding-left: 55px; }
      .general-title::before {
        width: 40px;
        height: 6px;
        top: 15px; } }

.center-title {
  position: relative;
  font-size: 32px;
  line-height: 44px;
  color: #000100;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 10px; }
  .center-title::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    left: 0;
    bottom: 0;
    background-color: #EE2E35; }
  @media only screen and (max-width: 767px) {
    .center-title {
      font-size: 26px;
      line-height: 34px; }
      .center-title::after {
        height: 4px; } }

.center-title-white {
  position: relative;
  font-size: 32px;
  line-height: 44px;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 10px; }
  .center-title-white::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    left: 0;
    bottom: 0;
    background-color: #ffffff; }

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

.title-under {
  display: flex;
  justify-content: center; }

.content-detail {
  margin-top: 40px; }
  .content-detail p {
    font-size: 16px;
    line-height: 24px;
    color: #000100;
    margin-bottom: 20px; }
  .content-detail img {
    max-width: 100%;
    height: auto; }

/*Pagination*/
.work-pagination {
  margin-top: 20px; }

.paginationjs-pages ul {
  display: flex;
  padding: 0;
  justify-content: center;
  list-style: none;
  flex-wrap: nowrap;
  margin-bottom: 0; }

.paginationjs-pages li {
  margin: 0 4px; }

.paginationjs-pages a {
  width: 38px;
  height: 38px;
  display: block;
  display: table;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  color: #434343;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  border: none;
  text-decoration: none; }

@media only screen and (max-width: 475px) {
  .paginationjs-pages li {
    margin: 0 3px; }
  .paginationjs-pages a {
    width: 34px;
    height: 34px; } }

.paginationjs-pages li.paginationjs-prev a {
  position: relative;
  border: 1px solid #e2e2e2;
  color: #434343;
  visibility: hidden; }
  .paginationjs-pages li.paginationjs-prev a:after {
    position: absolute;
    content: "\e910";
    font-family: "icomoon";
    font-size: 14px;
    visibility: visible;
    border: 1px solid #e2e2e2;
    color: #434343;
    height: 100%;
    width: 100%;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0; }

.paginationjs-pages li.paginationjs-next a {
  position: relative;
  border: 1px solid #e2e2e2;
  color: #434343;
  visibility: hidden; }
  .paginationjs-pages li.paginationjs-next a:after {
    position: absolute;
    content: "\e90f";
    font-family: "icomoon";
    font-size: 14px;
    visibility: visible;
    border: 1px solid #e2e2e2;
    color: #434343;
    height: 100%;
    width: 100%;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0; }
  .paginationjs-pages li.paginationjs-next a li.paginationjs-ellipsis a {
    background-color: transparent;
    color: #fff; }

.paginationjs-pages li.active a {
  background: #EE2E35;
  border: 1px solid #EE2E35;
  color: #fff; }

/*Advertise-Popup*/
#advertise-popup .modal-content {
  background: transparent !important;
  border: none !important; }

#advertise-popup .modal-header {
  padding: 0 !important;
  background: transparent !important;
  border-bottom: none !important; }

#advertise-popup .modal-body {
  padding: 0 !important; }
  #advertise-popup .modal-body .advertise-image img {
    width: 100% !important;
    border-radius: 4px !important; }

#advertise-popup .close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  min-width: 25px !important;
  height: 25px !important;
  background-color: #fff !important;
  border-radius: 100% !important;
  margin-right: -30px !important;
  margin-bottom: 5px !important;
  opacity: .5 !important;
  transition: 0.3s all; }
  @media only screen and (max-width: 1600px) {
    #advertise-popup .close {
      min-width: 23px !important;
      height: 23px !important; } }
  @media only screen and (max-width: 575px) {
    #advertise-popup .close {
      min-width: 22px !important;
      height: 22px !important;
      margin-right: 0px !important;
      margin-bottom: 8px !important; } }
  #advertise-popup .close:hover {
    opacity: 1 !important; }
  #advertise-popup .close span {
    font-size: 14px !important;
    vertical-align: middle !important;
    text-align: center !important;
    color: #3e3e3e !important;
    margin-left: 1px;
    margin-top: 1px; }
    @media only screen and (max-width: 575px) {
      #advertise-popup .close span {
        margin-left: 1px;
        margin-top: 1px;
        font-size: 11px !important; } }

.modal-backdrop.show {
  opacity: 0.65 !important; }

/* /////////// HEADER CONTAINER /////////// */
.header-container {
  position: fixed;
  padding: 0 80px;
  left: 0;
  top: 0;
  right: 0;
  background-color: #ffffff;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
  z-index: 999; }
  .header-container .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    position: relative; }
    .header-container .header-content .language {
      position: absolute;
      right: 0;
      margin-right: 70px; }
      .header-container .header-content .language img {
        width: 30px;
        height: 30px;
        object-fit: cover; }
      .header-container .header-content .language a {
        display: inline-block; }
        .header-container .header-content .language a:first-of-type {
          margin-right: 10px; }
      .header-container .header-content .language a.active {
        padding: 5px 10px;
        background-color: #EFEFEF;
        border: 1px solid #D7D7D7;
        border-radius: 4px; }
      .header-container .header-content .language span {
        font-size: 14px;
        line-height: 26px;
        color: #84837E;
        text-transform: uppercase;
        margin-right: 16px; }

.logo {
  z-index: 10; }
  .logo a img {
    width: 194px;
    height: 30px; }

.logo-white {
  display: none;
  opacity: 0;
  transition: 0.3s all; }

.logo-dark {
  display: block;
  opacity: 1;
  transition: 0.3s all; }

.open .logo-white {
  display: block;
  opacity: 1; }

.open .logo-dark {
  display: none;
  opacity: 0; }

/**/
.menu-pc-toggle {
  position: absolute;
  display: block;
  width: 46px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  transition: 0.5s all;
  cursor: pointer; }
  .menu-pc-toggle:hover {
    width: 50px; }

.open .menu-pc-toggle {
  transition: 0.5s all; }
  .open .menu-pc-toggle:hover {
    width: 46px; }

.menu-pc-toggle .menu-icon-toggle span {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  background-color: transparent;
  color: transparent;
  transform: translate(0, -50%);
  transition: opacity 0.3s 0.3s;
  font-size: 16px;
  text-transform: uppercase; }

.menu-pc-toggle .menu-icon-toggle::before, .menu-pc-toggle .menu-icon-toggle::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  background-color: #5B5D5A;
  transition: transform 0.3s, top 0.3s 0.3s, bottom 0.3s 0.3s; }

.menu-pc-toggle:hover span {
  color: #000100;
  transition: 0.5s all; }

.menu-pc-toggle:hover .menu-icon-toggle::before {
  background-color: transparent;
  transition: 0.5s all; }

.menu-pc-toggle:hover .menu-icon-toggle::after {
  background-color: transparent;
  transition: 0.5s all; }

.menu-pc-toggle .menu-icon-toggle::before {
  top: 6px; }

.menu-pc-toggle .menu-icon-toggle::after {
  bottom: 6px; }

.open .menu-icon-toggle span {
  opacity: 0;
  transition: opacity 0.3s; }

.open .menu-pc-toggle .menu-icon-toggle::before, .open .menu-pc-toggle .menu-icon-toggle::after {
  background-color: rgba(255, 255, 255, 0.35); }

.open .menu-pc-toggle .menu-icon-toggle::before {
  top: calc(50% - 1px);
  transform: rotate(45deg); }

.open .menu-pc-toggle .menu-icon-toggle::after {
  bottom: calc(50% - 1px);
  transform: rotate(-45deg); }

.open .menu-pc-toggle .menu-icon-toggle::before, .open .menu-pc-toggle .menu-icon-toggle::after {
  transition: top 0.3s, bottom 0.3s, transform 0.3s 0.3s; }

.menu-pc-content {
  visibility: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #ffffff;
  opacity: 0;
  transition: 0.6s ease-in-out;
  z-index: 8; }
  .menu-pc-content .menu-pc-wrap {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -8%);
    text-align: center; }
  .menu-pc-content .menu-pc-left {
    transition: 180ms all; }

.open .menu-pc-content {
  visibility: visible;
  opacity: 1;
  background-color: #222528; }
  .open .menu-pc-content .menu-pc-left {
    transform: translateY(0); }

.menu-pc-left li {
  display: none;
  color: #fff;
  padding: 16px 0;
  font-size: 16px;
  opacity: 0;
  bottom: -100px; }
  .menu-pc-left li a {
    margin-left: 0;
    font-size: 30px;
    line-height: 38px;
    font-weight: 500;
    color: #ffffff;
    opacity: .65;
    transition: 0.4s all;
    white-space: nowrap; }
  .menu-pc-left li.active a {
    margin-left: 40px;
    opacity: 1; }
    .menu-pc-left li.active a:before {
      width: 50px;
      height: 10px; }

.open .menu-pc-left li:nth-child(1) {
  opacity: 1;
  bottom: 0;
  transition: 180ms ease-in-out; }

.open .menu-pc-left li:nth-child(2) {
  opacity: 1;
  bottom: 0;
  transition: 240ms ease-in-out; }

.open .menu-pc-left li:nth-child(3) {
  opacity: 1;
  bottom: 0;
  transition: 300ms ease-in-out; }

.menu-pc-left li a {
  position: relative;
  padding: 0 70px; }
  .menu-pc-left li a:before {
    content: "";
    position: absolute;
    width: 0;
    height: 10px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #EE2E35;
    transition: 0.4s all; }

.menu-pc-left li a:hover {
  margin-left: 40px;
  opacity: 1; }
  .menu-pc-left li a:hover:before {
    width: 50px; }

.open .dropdown_menu--animated {
  display: block; }

.dropdown_menu--animated {
  display: none; }

.dropdown_menu--animated li {
  display: block;
  opacity: 1; }

/*SEARCH*/
.icon-search-menu {
  padding: 15px;
  border: 1px solid rgba(34, 37, 40, 0.1);
  border-radius: 100%;
  color: #EE2E35;
  z-index: 10; }
  .icon-search-menu:hover {
    cursor: pointer; }

.search-open .icon-search-menu {
  color: #ffffff; }
  .search-open .icon-search-menu::before {
    content: "\e90e";
    transition: 0.3s all; }

.search-box {
  visibility: hidden;
  width: 100%;
  height: 0;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #ffffff;
  opacity: 0;
  transition: 0.5s ease-in-out;
  z-index: 9; }
  .search-box form {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 35vw; }
    .search-box form .search-content {
      display: flex;
      align-items: center; }
      .search-box form .search-content input {
        width: 100%;
        padding: 15px 60px 15px 0;
        border-top: none;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.85);
        border-left: none;
        box-shadow: none;
        color: rgba(255, 255, 255, 0.85);
        background-color: transparent;
        font-size: 28px;
        line-height: 36px; }
        .search-box form .search-content input::-webkit-input-placeholder {
          /* Edge */
          font-size: 30px;
          line-height: 42px;
          color: rgba(255, 255, 255, 0.35); }
        .search-box form .search-content input:-ms-input-placeholder {
          /* Internet Explorer 10-11 */
          font-size: 30px;
          line-height: 42px;
          color: rgba(255, 255, 255, 0.35); }
        .search-box form .search-content input::placeholder {
          font-size: 30px;
          line-height: 42px;
          color: rgba(255, 255, 255, 0.35); }
        .search-box form .search-content input:focus {
          outline: none; }
      .search-box form .search-content button {
        border: none;
        background-color: transparent;
        padding: 0;
        margin-left: -24px; }
        .search-box form .search-content button i {
          font-size: 24px;
          color: #ffffff; }

.search-open .search-box {
  visibility: visible;
  opacity: 1;
  background-color: #222528;
  height: 100%; }

.search-open .logo-white {
  display: block;
  opacity: 1; }

.search-open .logo-dark {
  display: none;
  opacity: 0; }

.list-number-slider {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 9;
  display: flex;
  justify-content: center;
  flex-direction: column;
  transform: translateY(-50%);
  width: 72px;
  transition: all 0.5s; }
  .list-number-slider.black span::before {
    background-color: #fff; }
  .list-number-slider.white span::before {
    background-color: #9d9d9d; }
  .list-number-slider.white span::after {
    background-color: rgba(0, 1, 0, 0.15); }
  .list-number-slider span {
    height: 70px;
    width: 70px;
    position: relative;
    left: -50%;
    cursor: pointer; }
    .list-number-slider span i {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 500;
      font-style: normal;
      text-align: center;
      width: 70px;
      height: 70px;
      opacity: 0;
      border-radius: 50%;
      color: #fff;
      transition: all 0.5s;
      transform: scale(0.5); }
    .list-number-slider span.active i {
      opacity: 1;
      transform: scale(1);
      color: #ffffff;
      background-color: #EE2E35; }
    .list-number-slider span.active::before {
      width: 7px;
      height: 7px;
      transition: all 1s ease-in-out; }
    .list-number-slider span::before {
      content: "";
      width: 7px;
      height: 7px;
      background-color: #fff;
      border-radius: 50%;
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      transition: all 0.5s;
      transform: translate(-50%, -50%); }
    .list-number-slider span::after {
      content: "";
      width: 1px;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.3);
      display: block;
      position: absolute;
      left: 50%;
      top: 0;
      transition: all 0.5s;
      transform: translate(-50%, 0);
      z-index: -1; }
    .list-number-slider span:first-child::after {
      top: auto;
      bottom: 0;
      height: 50%; }
    .list-number-slider span:last-child::after {
      top: 0;
      bottom: auto;
      height: 50%; }

.footer-container {
  padding-top: 40px;
  background-color: #1a1a1a; }
  .footer-container .logo-footer img {
    width: 194px;
    height: 30px; }
  .footer-container .footer-link {
    display: flex;
    flex-wrap: wrap; }
    .footer-container .footer-link li {
      width: 50%;
      padding-bottom: 15px; }
      .footer-container .footer-link li a {
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        color: #ffffff;
        text-transform: uppercase; }
  .footer-container .footer-infor {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start; }
    .footer-container .footer-infor p {
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      color: #ffffff;
      text-transform: uppercase; }
    .footer-container .footer-infor i {
      font-size: 20px;
      color: #ffffff;
      margin-right: 12px; }
  .footer-container .copyright-container {
    padding: 10px 0;
    background-color: #232323;
    margin-top: 20px; }
    .footer-container .copyright-container .copyright-content {
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .footer-container .copyright-container .copyright-content .social {
        display: inherit; }
        .footer-container .copyright-container .copyright-content .social .social-link {
          padding: 10px;
          background-color: #363636;
          border-radius: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 15px;
          transition: 0.3s all; }
          .footer-container .copyright-container .copyright-content .social .social-link img {
            width: 20px;
            height: 20px;
            object-fit: contain; }
          .footer-container .copyright-container .copyright-content .social .social-link:hover {
            background-color: #EE2E35; }
    .footer-container .copyright-container .copyright {
      font-size: 14px;
      line-height: 22px;
      font-weight: 600;
      color: #ffffff; }

/* /////////// IMAGE ZOOM /////////// */
@keyframes zoomInImage {
  from {
    transform: scale3d(1, 1, 1);
    transition: 1s; }
  to {
    transform: scale3d(1.1, 1.1, 1.1);
    transition: 1s; } }

.zoomInImage {
  animation-name: zoomInImage; }

.lg-video-cont {
  width: 100% !important;
  max-width: 90vw !important; }

img {
  max-width: 100%; }

.extra-col, .col-2-5 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px; }

.col-2-5 {
  flex: 0 0 19.833333325%;
  max-width: 19.833333325%; }
  @media (max-width: 992px) {
    .col-2-5 {
      flex: 0 0 33.33%;
      max-width: 33.33%; } }
  @media (max-width: 767px) {
    .col-2-5 {
      flex: 0 0 50%;
      max-width: 50%; } }
  @media (max-width: 456px) {
    .col-2-5 {
      flex: 0 0 100%;
      max-width: 100%; } }

@media (min-width: 768px) {
  .container {
    max-width: 920px; } }

@media (min-width: 1200px) {
  .container {
    max-width: 1184px !important; } }

html {
  -webkit-text-size-adjust: none;
  touch-action: manipulation; }

body {
  background-color: #ffffff;
  font-family: 'Montserrat', sans-serif; }

.wrapper {
  overflow-x: hidden !important; }

.open {
  overflow-y: hidden; }

.search-open {
  overflow-y: hidden; }

.pp-section {
  height: 100%;
  position: absolute;
  width: 100%;
  backface-visibility: hidden; }

.container-fluid {
  padding-right: 10vw;
  padding-left: 10vw; }

/* /////////// BANNER CONTAINER /////////// */
.banner-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 76px; }
  .banner-container .banner-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .banner-container .banner-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      animation: scale 5s ease-in-out; }
    .banner-container .banner-image video {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .banner-container .banner-image iframe {
      width: 100%;
      height: 100%; }
    .banner-container .banner-image::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(33, 37, 45, 0.2); }
    .banner-container .banner-image .image {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .banner-container .banner-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    width: 66%; }
    .banner-container .banner-content.banner-full {
      width: 100%; }
    .banner-container .banner-content.banner-bottom {
      transform: unset;
      left: 80px;
      bottom: 80px;
      top: unset;
      text-align: left;
      width: 50%; }
    .banner-container .banner-content .title {
      font-weight: 700;
      font-size: 62px;
      line-height: 80px;
      color: #ffffff;
      padding-top: 40px;
      margin-bottom: 20px;
      text-transform: uppercase;
      position: relative; }
      .banner-container .banner-content .title::before {
        content: "";
        position: absolute;
        width: 106px;
        height: 13px;
        background-color: #EE2E35;
        top: 0;
        left: 50%;
        transform: translateX(-50%); }
    .banner-container .banner-content .button {
      background-color: #02a959;
      border-radius: 5px;
      padding: 15px 56px;
      font-style: normal;
      font-size: 18px;
      line-height: 26px;
      text-align: center;
      color: #ffffff; }
    .banner-container .banner-content .button-outline {
      background-color: transparent;
      border: 1px solid #ffffff;
      text-transform: uppercase;
      color: #ffffff;
      display: inline-block;
      transition: 0.3s all; }
      .banner-container .banner-content .button-outline:hover {
        background-color: #EE2E35;
        border: 1px solid #EE2E35; }

.banner-home-container .banner-image::after {
  background-color: rgba(33, 37, 45, 0.5); }

@keyframes scale {
  0% {
    transform: scale(1.4); }
  100% {
    transform: scale(1); } }

/* /////////// BANNER CONTAINER /////////// */
/* /////////// SECTION CONTAINER /////////// */
.section-container {
  height: 100%;
  width: 100%;
  padding-top: 63px; }
  .section-container .section-content .sub-title {
    font-size: 24px;
    line-height: 29px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #000100;
    position: relative;
    padding-left: 70px;
    margin-bottom: 38px; }
    .section-container .section-content .sub-title:before {
      content: "";
      position: absolute;
      width: 50px;
      height: 10px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background-color: #EE2E35; }

.section-product {
  background-color: #222528; }
  .section-product .section-content {
    padding-top: 40px;
    padding-bottom: 40px; }
    .section-product .section-content .title-under {
      display: flex;
      justify-content: flex-end; }
      .section-product .section-content .title-under h2 {
        position: relative;
        font-size: 50px;
        line-height: 0px;
        color: #ffffff;
        font-weight: 700;
        text-transform: uppercase; 
        margin-top: 0px;
        margin-bottom: 0px;
      }
        .section-product .section-content .title-under h2::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 5px;
          left: 0;
          bottom: 0;
          background-color: #EE2E35; }
  .section-product .product-row {
    margin-left: -30px;
    margin-right: -30px;
    align-items: flex-end; }
    .section-product .product-row .product-item {
      width: 50%;
      padding-left: 30px;
      padding-right: 30px; }
      .section-product .product-row .product-item .product-item-content .product-image img {
        width: 80%;
        height: 60vh;
        object-fit: cover; }
      .section-product .product-row .product-item .product-item-content .product-title {
        margin-bottom: 12px;
        text-align: right; }
        .section-product .product-row .product-item .product-item-content .product-title a {
          font-size: 80px;
          line-height: 88px;
          font-weight: 700;
          color: #000100;
          text-transform: uppercase;
          transition: 0.4s all;
          text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff; }
          .section-product .product-row .product-item .product-item-content .product-title a:hover {
            color: #EE2E35;
            text-shadow: -1px -1px 0 #EE2E35, 1px -1px 0 #EE2E35, -1px 1px 0 #EE2E35, 1px 1px 0 #EE2E35; }
      .section-product .product-row .product-item:nth-of-type(1) .product-title {
        width: 80%; }
      .section-product .product-row .product-item:nth-of-type(2) .product-image img {
        width: 100%;
        height: 55vh; }

.section-product-2 .section-content {
  padding-top: 20px; }

.section-product-2 .product-row {
  margin-left: -30px;
  margin-right: -30px;
  align-items: flex-end; }
  .section-product-2 .product-row .product-item {
    width: 50%;
    padding-left: 30px;
    padding-right: 30px; }
    .section-product-2 .product-row .product-item:nth-of-type(1) .product-title {
      width: 100%; }
    .section-product-2 .product-row .product-item:nth-of-type(1) .product-image img {
      width: 100%;
      height: 52vh; }
    .section-product-2 .product-row .product-item:nth-of-type(2) .product-item-content {
      text-align: right; }
    .section-product-2 .product-row .product-item:nth-of-type(2) .product-title {
      width: 80%;
      margin-right: 0;
      margin-left: auto; }
    .section-product-2 .product-row .product-item:nth-of-type(2) .product-image img {
      width: 80%;
      height: 62vh; }

.section-about-us {
  position: relative; }
  .section-about-us .section-content {
    padding-top: 40px;
    padding-bottom: 40px; }
    .section-about-us .section-content .container-fluid > h2 {
      width: 545px;
      font-size: 60px;
      line-height: 78px;
      font-weight: 700;
      color: #000100;
      text-transform: uppercase;
      margin-bottom: 54px; }
    .section-about-us .section-content .about-item {
      display: flex; }
      .section-about-us .section-content .about-item .about-item-content {
        width: 100%;
        text-align: center;
        padding: 40px 30px 32px 30px;
        background-color: #ffffff;
        box-shadow: 0px 0px 83px rgba(0, 0, 0, 0.09); }
        .section-about-us .section-content .about-item .about-item-content h3 {
          font-size: 24px;
          line-height: 32px;
          font-weight: 500;
          text-transform: uppercase;
          color: #EE2E35;
          padding-top: 54px;
          padding-bottom: 20px; }
        .section-about-us .section-content .about-item .about-item-content p {
          font-size: 18px;
          line-height: 26px;
          color: #000100;
          letter-spacing: 0.06em; }
  .section-about-us .section-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: -1; }
    .section-about-us .section-image img {
      width: 100%;
      height: 100%;
      object-fit: cover; }

.section-career {
  height: 100%;
  position: relative; }
  .section-career .section-content {
    padding-top: 40px !important;
    padding-bottom: 40px;
    display: flex;
    align-items: center; }
    .section-career .section-content .career-slider {
      margin-left: -15px;
      margin-right: -15px; }
    .section-career .section-content .career-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 38px; }
      .section-career .section-content .career-title .slide-button-custom {
        display: flex; }
      .section-career .section-content .career-title .sub-title {
        margin-bottom: 0; }
      .section-career .section-content .career-title .view-all {
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        color: #EE2E35; }
      .section-career .section-content .career-title .slide-arrow {
        width: 40px;
        height: 40px;
        padding: 0;
        margin-left: 12px;
        border: 1px solid rgba(34, 37, 40, 0.35);
        background-color: transparent;
        transition: 0.3s all;
        display: flex;
        align-items: center;
        justify-content: center; }
        .section-career .section-content .career-title .slide-arrow i {
          color: rgba(0, 1, 0, 0.35); }
        .section-career .section-content .career-title .slide-arrow:hover {
          border: 1px solid #EE2E35; }
          .section-career .section-content .career-title .slide-arrow:hover i {
            color: #000100; }
    .section-career .section-content .career-item {
      display: flex !important; }
      .section-career .section-content .career-item .career-item-content {
        display: flex;
        width: 100%;
        padding: 30px 30px 18px 30px;
        background-color: #ffffff;
        border: 1px solid #e6e6e6;
        margin-left: 15px;
        margin-right: 15px; }
        .section-career .section-content .career-item .career-item-content a img {
          min-width: 100px;
          width: 100px;
          height: 100px;
          object-fit: cover; }
  .section-career .career-infor {
    margin-left: 25px; }
    .section-career .career-infor h3 {
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      color: #000100;
      padding-bottom: 20px; }
      .section-career .career-infor h3 a {
        color: inherit; }
      .section-career .career-infor h3:hover {
        color: #EE2E35; }
    .section-career .career-infor p {
      font-size: 14px;
      line-height: 22px;
      color: #000100;
      margin-bottom: 12px;
      display: flex;
      align-items: center; }
      .section-career .career-infor p i {
        font-size: 18px; }
      .section-career .career-infor p span {
        font-size: 14px;
        line-height: 22px;
        color: #000100;
        margin-left: 12px; }
  .section-career .career-view-all {
    text-align: center;
    margin-top: 30px; }
    .section-career .career-view-all .view-all {
      padding: 12px 20px;
      background-color: #EE2E35;
      color: #ffffff;
      display: inline-block; }
  .section-career .footer-container {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 3; }

/* /////////// SECTION CONTAINER /////////// */
/* /////////// TABS CONTAINER /////////// */
.tabs-container {
  padding: 0 80px;
  border-bottom: 1px solid #d5dce2; }
  .tabs-container .tab-content {
    display: flex;
    align-items: center; }
    .tabs-container .tab-content .link {
      position: relative;
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 30px;
      color: #000100;
      padding: 15px 0;
      margin: 0 20px; }
      .tabs-container .tab-content .link:first-child {
        margin-left: 0; }
      .tabs-container .tab-content .link:hover {
        color: #02a959; }
        .tabs-container .tab-content .link:hover::after {
          width: 100%; }
      .tabs-container .tab-content .link::after {
        content: "";
        position: absolute;
        width: 0%;
        height: 2px;
        background-color: #02a959;
        top: 100%;
        left: 0;
        transition: 0.3s ease-in; }
      .tabs-container .tab-content .link.active {
        color: #02a959;
        font-weight: 600; }
        .tabs-container .tab-content .link.active::after {
          width: 100%; }

/* /////////// TABS CONTAINER /////////// */
/* /////////// SECTION DETAILS /////////// */
.section-details {
  padding: 60px 80px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  flex-wrap: wrap; }
  .section-details .item {
    margin: 15px 0; }
  .section-details .section-content {
    width: 50%;
    padding: 0 40px 0 0; }
    .section-details .section-content .title {
      font-style: normal;
      font-weight: 900;
      font-size: 20px;
      line-height: 30px;
      color: #000100; }
    .section-details .section-content .norm {
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 30px;
      color: #000100;
      margin-bottom: 10px; }
    .section-details .section-content .list {
      padding-left: 18px; }
      .section-details .section-content .list a {
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 30px;
        text-decoration: underline !important;
        color: #3e464d; }
      .section-details .section-content .list li::before {
        content: "\2022";
        color: #02a959;
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: -1em; }
    .section-details .section-content .button {
      background-color: #02a959;
      border-radius: 5px;
      padding: 13px 30px;
      font-style: normal;
      font-weight: 800;
      font-size: 14px;
      line-height: 24px;
      text-align: center;
      color: #ffffff; }
  .section-details .section-image {
    width: 50%;
    height: 100%; }
    .section-details .section-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px; }

/* /////////// SECTION DETAILS /////////// */
.section.section-first {
  background-color: transparent !important; }
  .section.section-first .banner-container {
    padding-top: 0; }

/*!
 * pagepiling.js 1.5.6
 *
 * https://github.com/alvarotrigo/pagePiling.js
 * @license MIT licensed
 *
 * Copyright (C) 2016 alvarotrigo.com - A project by Alvaro Trigo
 */
html,
body {
  margin: 0;
  padding: 0;
  /*Avoid flicker on slides transitions for mobile phones #336 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.pp-section {
  height: 100%;
  position: absolute;
  width: 100%;
  /* fixes flickering in firefox*/
  backface-visibility: hidden; }

.pp-easing {
  -webkit-transition: all 500ms cubic-bezier(0.55, 0.085, 0, 0.99);
  -moz-transition: all 500ms cubic-bezier(0.55, 0.085, 0, 0.99);
  -o-transition: all 500ms cubic-bezier(0.55, 0.085, 0, 0.99);
  transition: all 500ms cubic-bezier(0.55, 0.085, 0, 0.99);
  /* custom */
  -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0, 0.99);
  -moz-transition-timing-function: cubic-bezier(0.55, 0.085, 0, 0.99);
  -o-transition-timing-function: cubic-bezier(0.55, 0.085, 0, 0.99);
  transition-timing-function: cubic-bezier(0.55, 0.085, 0, 0.99);
  /* custom */ }

#pp-nav {
  position: fixed;
  z-index: 100;
  margin-top: -32px;
  top: 50%;
  opacity: 1; }

#pp-nav.right {
  right: 17px; }

#pp-nav.left {
  left: 17px; }

.pp-tableCell {
  width: 100%;
  height: 100%; }

.pp-slidesNav {
  position: absolute;
  z-index: 4;
  left: 50%;
  opacity: 1; }

.pp-slidesNav.bottom {
  bottom: 17px; }

.pp-slidesNav.top {
  top: 17px; }

#pp-nav ul,
.pp-slidesNav ul {
  margin: 0;
  padding: 0; }

#pp-nav li,
.pp-slidesNav li {
  display: block;
  width: 14px;
  height: 13px;
  margin: 7px;
  position: relative; }

.pp-slidesNav li {
  display: inline-block; }

#pp-nav li a,
.pp-slidesNav li a {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none; }

#pp-nav li .active span,
.pp-slidesNav .active span {
  background: #333; }

/* Menu
 * --------------------------------------- */
#menu li {
  display: inline-block;
  margin: 10px;
  color: #000;
  background: #fff;
  background: rgba(255, 255, 255, 0.5);
  -webkit-border-radius: 10px;
  border-radius: 10px; }

#menu li.active {
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  color: #fff; }

#menu li a {
  text-decoration: none;
  color: #000; }

#menu li.active a:hover {
  color: #000; }

#menu li:hover {
  background: rgba(255, 255, 255, 0.8); }

#menu li a,
#menu li.active a {
  padding: 9px 18px;
  display: block; }

#menu li.active a {
  color: #fff; }

#menu {
  position: fixed;
  top: 50%;
  right: 0;
  height: 40px;
  z-index: 70;
  width: 100%;
  padding: 0;
  margin: 0; }

.pp-easing {
  -webkit-transition: all 1100ms cubic-bezier(0.55, 0.085, 0, 0.99);
  -moz-transition: all 1100ms cubic-bezier(0.55, 0.085, 0, 0.99);
  -o-transition: all 1100ms cubic-bezier(0.55, 0.085, 0, 0.99);
  transition: all 1100ms cubic-bezier(0.55, 0.085, 0, 0.99);
  /* custom */
  -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0, 0.99);
  -moz-transition-timing-function: cubic-bezier(0.55, 0.085, 0, 0.99);
  -o-transition-timing-function: cubic-bezier(0.55, 0.085, 0, 0.99);
  transition-timing-function: cubic-bezier(0.55, 0.085, 0, 0.99);
  /* custom */ }

.about-container {
  padding: 60px 0; }

.overview .overview-image img {
  width: 100%; }

.overview .overview-infor {
  margin-left: 30px; }
  .overview .overview-infor p {
    font-size: 16px;
    line-height: 26px;
    margin-top: 22px;
    color: #000100; }

/* HISTORY */
.history {
  padding: 100px 0;
  background-color: #222528; }
  .history .heading-content {
    color: #ffffff;
    margin-bottom: 20px; }
    .history .heading-content::after {
      z-index: 0; }
  .history .slider-years {
    position: relative; }
    .history .slider-years .slick-prev {
      position: absolute;
      top: 48px;
      z-index: 99;
      left: 0;
      height: 38px;
      width: 38px;
      border-radius: 100%;
      border: 1px solid #ffffff; }
      .history .slider-years .slick-prev::before {
        content: "\e910";
        font-family: "icomoon";
        font-size: 14px; }
    .history .slider-years .slick-next {
      position: absolute;
      top: 48px;
      right: 0;
      z-index: 99;
      width: 38px;
      height: 38px;
      border-radius: 100%;
      border: 1px solid #ffffff; }
      .history .slider-years .slick-next::before {
        content: "\e90f";
        font-family: "icomoon";
        font-size: 14px; }
    .history .slider-years .slick-slide.slick-current .dot {
      height: 14px;
      width: 14px;
      background-color: #EE2E35;
      border: 2px solid #ffffff; }
    .history .slider-years .slick-slide .item-years {
      display: flex;
      flex-direction: column;
      align-items: center; }
    .history .slider-years .slick-slide p {
      color: #ffffff;
      margin-bottom: 17px; }
    .history .slider-years .slick-slide .dot {
      display: block;
      height: 12px;
      width: 12px;
      background-color: #ffffff;
      border-radius: 100%;
      border: 2px solid transparent; }
  .history .timeline-year {
    position: relative;
    margin: 0 auto;
    margin-top: 60px; }
    .history .timeline-year .timeline {
      margin-left: 50px;
      position: absolute;
      width: calc(100% - 100px);
      height: 2px;
      background-color: #d7d7d7;
      top: 47px; }
  .history .slider-process {
    margin: 50px auto 0 auto;
    position: relative; }
  .history .item-process {
    border-radius: 2px;
    margin: 20px auto 0 auto;
    width: 60%; }
    .history .item-process .images img {
      width: 100%;
      height: 400px;
      object-fit: cover; }
    .history .item-process .content {
      text-align: center; }
      .history .item-process .content h3 {
        font-size: 20px;
        line-height: 32px;
        font-weight: 700;
        color: #ffffff;
        padding: 0 0 25px 0; }
      .history .item-process .content p {
        font-size: 14px;
        line-height: 22px;
        color: #ffffff;
        opacity: 0.85;
        margin-bottom: 15px; }

/* WHAT WE DO */
.work {
  background-color: #f5f5f5;
  padding: 200px 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; }
  .work:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0; }
  .work .work-list {
    margin-top: 60px; }
    .work .work-list .work-item {
      display: flex;
      margin-bottom: 30px; }
      .work .work-list .work-item .work-item-content {
        width: 100%;
        text-align: center;
        padding: 40px 16px;
        background-color: #ffffff;
        box-shadow: 0px 0px 83px rgba(34, 37, 40, 0.1); }
        .work .work-list .work-item .work-item-content h3 {
          font-size: 20px;
          line-height: 28px;
          font-weight: 500;
          color: #000100;
          margin-top: 35px;
          text-transform: uppercase; }
        .work .work-list .work-item .work-item-content p {
          font-size: 16px;
          line-height: 24px;
          color: #000100;
          margin-top: 25px; }
        .work .work-list .work-item .work-item-content img {
          width: 80px;
          height: 80px;
          object-fit: cover; }

/* SUSTAINABILITY */
.sustainability {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; }
  .sustainability .sustainability-list {
    margin-top: 60px; }
    .sustainability .sustainability-list .sustainability-item {
      display: flex; }
      .sustainability .sustainability-list .sustainability-item .sustainability-item-content {
        width: 100%;
        text-align: left;
        padding: 30px;
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0px 0px 83px rgba(34, 37, 40, 0.1); }
        .sustainability .sustainability-list .sustainability-item .sustainability-item-content .sustainability-title {
          display: flex;
          align-items: flex-start;
          margin-bottom: 20px; }
          .sustainability .sustainability-list .sustainability-item .sustainability-item-content .sustainability-title h3 {
            font-size: 22px;
            line-height: 32px;
            font-weight: 600;
            color: #000100;
            margin-left: 30px; }
          .sustainability .sustainability-list .sustainability-item .sustainability-item-content .sustainability-title p {
            font-size: 16px;
            line-height: 24px;
            color: #000100; }
        .sustainability .sustainability-list .sustainability-item .sustainability-item-content img {
          width: 60px;
          height: 60px;
          object-fit: cover; }

/* CUSTOMER */
.page-description {
  font-size: 16px;
  line-height: 24px;
  color: #000100;
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
  width: 80%; }

.customer {
  background-color: #f5f5f5; }
  .customer .customer-list {
    margin-top: 40px; }
    .customer .customer-list .customer-item {
      margin-bottom: 30px; }
      .customer .customer-list .customer-item .customer-item-content {
        width: 100%;
        padding: 20px;
        background-color: #ffffff;
        box-shadow: 0px 0px 83px rgba(34, 37, 40, 0.1);
        transition: 0.5s all; }
        .customer .customer-list .customer-item .customer-item-content:hover {
          transform: scale(1.08); }
        .customer .customer-list .customer-item .customer-item-content img {
          width: 100%;
          max-height: 80px;
          object-fit: cover; }

/* NETWORK */
.network .network-content {
  height: 100%;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative; }

.network .network-content-mobile {
  display: none; }

.network .network-point .point:nth-child(1) > img {
  width: 20px;
  height: 43px;
  position: absolute;
  top: 350px;
  right: 308px; }

.network .network-point .point:nth-child(1) .network-item {
  bottom: 62%;
  right: 20%; }

.network .network-point .point:nth-child(2) > img {
  width: 20px;
  height: 43px;
  position: absolute;
  top: 385px;
  right: 345px; }

.network .network-point .point:nth-child(2) .network-item {
  bottom: 58%;
  right: 22%; }

.network .network-point .point:nth-child(3) > img {
  width: 20px;
  height: 43px;
  position: absolute;
  top: 465px;
  right: 395px; }

.network .network-point .point:nth-child(3) .network-item {
  bottom: 49%;
  right: 25%; }

.network .network-point .point:hover > img {
  filter: invert(38%) sepia(89%) saturate(5887%) hue-rotate(343deg) brightness(97%) contrast(93%); }

.network .network-point .point:hover:nth-child(1) .network-item {
  visibility: visible;
  opacity: 1; }

.network .network-point .point:hover:nth-child(2) .network-item {
  visibility: visible;
  opacity: 1; }

.network .network-point .point:hover:nth-child(3) .network-item {
  visibility: visible;
  opacity: 1; }

.network .drag-image {
  width: 1600px;
  position: relative;
  margin: 0 auto; }
  .network .drag-image > img {
    width: 1600px; }

.network .drag {
  width: 110%;
  padding: 10px;
  cursor: grab;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none; }

.network .network-item {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s all; }
  .network .network-item .network-item-infor {
    display: flex;
    align-items: flex-start;
    padding: 22px;
    background-color: #ffffff; }
    .network .network-item .network-item-infor img {
      width: 158px;
      height: 158px;
      object-fit: cover; }
    .network .network-item .network-item-infor > div {
      margin-left: 25px;
      max-width: 400px; }
      .network .network-item .network-item-infor > div h2 {
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        color: #000100;
        margin-bottom: 12px; }
      .network .network-item .network-item-infor > div p {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 6px; }
  .network .network-item > img {
    position: absolute;
    right: 22px;
    top: 35px; }

.popup {
  display: none;
  position: fixed;
  display: flex;
  align-items: flex-start;
  padding: 20px;
  background-color: #ffffff; }
  .popup img {
    width: 158px;
    height: auto;
    max-height: 158px;
    object-fit: cover; }
  .popup > div {
    margin-left: 25px;
    max-width: 350px; }
    .popup > div h2 {
      font-size: 16px;
      line-height: 24px;
      font-weight: 700;
      color: #000100;
      margin-bottom: 12px; }
    .popup > div p {
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 6px; }

.hoveredBlue {
  cursor: pointer;
  z-index: 100;
  filter: invert(38%) sepia(89%) saturate(5887%) hue-rotate(90deg) brightness(97%) contrast(93%); }

#US {
  fill: #B82694; }

#JP {
  fill: #BC002D; }

#MX {
  fill: #026847; }

#TW {
  fill: #2fff00; }

#ID {
  fill: #FF0000; }

#PH {
  fill: #FCD116; }

#IN {
  fill: #F15B25; }

#LK {
  fill: #8D153A; }

#BD {
  fill: #006657; }

.icon {
  width: 21px;
  height: 42px;
  object-fit: cover; }

.ag-canvas {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  visibility: visible;
  width: 100%;
  height: 100%;
  padding: 3rem 1rem;
  opacity: 1;
  transition: opacity 0.5s; }

.ag-canvas_svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  margin-left: 1rem; }

.ag-canvas_svg path {
  fill: #cfcfcf;
  fill-opacity: 1;
  stroke: #858585;
  stroke-opacity: 1;
  stroke-width: 0.5;
  transition: 0.5s;
  z-index: 1000;
  cursor: pointer; }

.ag-canvas_svg .active {
  fill: #12126b; }

.ag-canvas_svg .active:hover {
  fill: #12126b;
  fill-opacity: 1;
  stroke: #21252b;
  stroke-opacity: 1;
  stroke-width: 0.5;
  transition: 0.5s; }

@media screen and (max-width: 767px) {
  .ag-canvas {
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    height: auto;
    padding: 4rem 1rem 1rem; }
  .ag-canvas_svg {
    max-height: calc(100% - 6rem);
    margin-left: 0; }
  .popup {
    padding: 5px; }
    .popup img {
      width: 70px;
      height: 70px;
      object-fit: cover; }
    .popup > div {
      margin-left: 15px;
      max-width: 150px; }
      .popup > div h2 {
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
        color: #000100;
        margin-bottom: 8px; }
      .popup > div p {
        font-size: 11px;
        line-height: 16px;
        margin-bottom: 2px; } }

.contact .contact-title {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: #000100;
  margin-bottom: 40px;
  text-transform: uppercase; }

.contact .contact-infor-item {
  margin-bottom: 30px; }
  .contact .contact-infor-item h3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #000100;
    margin-bottom: 16px; }
  .contact .contact-infor-item p {
    font-size: 16px;
    line-height: 24px;
    color: #000100; }

.form-container .form-item {
  margin-bottom: 20px; }
  .form-container .form-item label {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #434343;
    margin-bottom: 8px; }
  .form-container .form-item .form-control {
    width: 100%;
    background-color: #E7E7E7;
    border-radius: 0;
    border: none;
    height: 46px;
    padding: 6px 15px;
    color: #000100; }
    .form-container .form-item .form-control:focus, .form-container .form-item .form-control:hover {
      outline: none;
      box-shadow: none;
      border: none; }
  .form-container .form-item button {
    padding: 12px 40px;
    border: none;
    background-color: #222528;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #ffffff; }

.contact-map {
  background-color: #F3F3F3; }
  .contact-map .map-container iframe {
    border: 0;
    width: 100%;
    height: 500px; }

.page-detail .content-detail {
  margin-top: 0; }
  .page-detail .content-detail p {
    font-size: 16px;
    line-height: 24px;
    color: #000100;
    margin-bottom: 20px; }
  .page-detail .content-detail img {
    max-width: 100%;
    height: auto; }

.page-detail .slider-detail {
  width: 80%;
  margin: 0 auto;
  padding-top: 20px; }
  .page-detail .slider-detail .slider-for .slick-slide {
    margin: 0 6px; }
    .page-detail .slider-detail .slider-for .slick-slide > div {
      height: 500px;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25); }
    .page-detail .slider-detail .slider-for .slick-slide img {
      width: 100%;
      height: 500px;
      object-fit: cover; }
  .page-detail .slider-detail .slider-for .slick-next {
    top: 50%;
    right: -70px;
    transform: translateY(-50%); }
    .page-detail .slider-detail .slider-for .slick-next::before {
      content: "\e90f"; }
  .page-detail .slider-detail .slider-for .slick-prev {
    top: 50%;
    left: -70px;
    transform: translateY(-50%); }
    .page-detail .slider-detail .slider-for .slick-prev::before {
      content: "\e910"; }
  .page-detail .slider-detail .slider-for .slick-arrow {
    position: absolute;
    z-index: 10;
    width: 46px;
    height: 46px;
    border-radius: 100%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
    background-color: #ffffff; }
    .page-detail .slider-detail .slider-for .slick-arrow::before {
      font-family: "icomoon";
      font-size: 18px;
      color: #434343;
      transition: 0.3s all; }
    .page-detail .slider-detail .slider-for .slick-arrow:hover::before {
      color: #EE2E35; }
  .page-detail .slider-detail .slider-nav {
    margin-top: 15px; }
    .page-detail .slider-detail .slider-nav .slick-slide {
      margin: 0 6px; }
      .page-detail .slider-detail .slider-nav .slick-slide > div {
        height: 78px;
        border: 1px solid #ffffff;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25); }
      .page-detail .slider-detail .slider-nav .slick-slide img {
        width: 100%;
        height: 78px;
        object-fit: cover; }
    .page-detail .slider-detail .slider-nav .slick-current {
      position: relative; }
      .page-detail .slider-detail .slider-nav .slick-current::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(34, 37, 40, 0.7); }
      .page-detail .slider-detail .slider-nav .slick-current::after {
        content: "\e915";
        font-family: "icomoon";
        font-size: 24px;
        color: #ffffff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }

.page-detail .image-detail {
  margin-top: 40px; }
  .page-detail .image-detail .image-list .image-item {
    width: 33.33%;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 30px; }
    .page-detail .image-detail .image-list .image-item .image-item-content {
      padding: 20px 30px;
      background-color: #ffffff;
      box-shadow: 0px 0px 83px rgba(0, 0, 0, 0.09); }
      .page-detail .image-detail .image-list .image-item .image-item-content img {
        width: 100%;
        height: 140px;
        object-fit: contain; }

.page-detail .image-award {
  margin-top: 0; }
  .page-detail .image-award .image-list .image-item {
    width: 33.33%; }
    .page-detail .image-award .image-list .image-item .image-item-content {
      padding: 5px;
      background-color: #ffffff;
      box-shadow: 0px 0px 83px rgba(0, 0, 0, 0.09); }
      .page-detail .image-award .image-list .image-item .image-item-content img {
        width: 100%;
        height: auto;
        object-fit: contain; }

.product-banner {
  padding: 140px 0 200px 0;
  background-color: #222528;
  margin-top: 76px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative; }
  .product-banner:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    top: 0;
    left: 0; }
  .product-banner .product-banner-infor h1 {
    font-size: 100px;
    line-height: 120px;
    font-weight: 700;
    color: #000100;
    text-transform: uppercase;
    transition: 0.4s all;
    text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff; }
  .product-banner .product-banner-infor p {
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
    margin-top: 40px; }
  .product-banner .product-banner-row {
    align-items: center; }

.tree-chart-section .tree-chart {
  padding-top: 60px; }
  .tree-chart-section .tree-chart .parent-chart {
    max-width: 386px;
    padding-bottom: 30px;
    text-align: center;
    margin: 0 auto;
    position: relative; }
    .tree-chart-section .tree-chart .parent-chart::before {
      position: absolute;
      content: "";
      width: 1px;
      height: 30px;
      background-color: #e2e2e2;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%); }
    .tree-chart-section .tree-chart .parent-chart p {
      padding: 30px 80px;
      background-color: #ffffff;
      border: 1px solid #EE2E35;
      font-size: 18px;
      line-height: 26px;
      font-weight: 700;
      color: #EE2E35;
      text-transform: uppercase; }
  .tree-chart-section .tree-chart .child-chart {
    display: flex;
    justify-content: space-between;
    width: 100%; }
    .tree-chart-section .tree-chart .child-chart .child-chart-item {
      padding: 30px 10px 0 10px;
      position: relative; }
      .tree-chart-section .tree-chart .child-chart .child-chart-item::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 1px;
        background-color: #e2e2e2;
        top: 0;
        left: 0; }
      .tree-chart-section .tree-chart .child-chart .child-chart-item:first-child::before {
        width: 50%;
        left: auto;
        right: 0; }
      .tree-chart-section .tree-chart .child-chart .child-chart-item:last-child::before {
        width: 50%;
        left: 0;
        right: auto; }
      .tree-chart-section .tree-chart .child-chart .child-chart-item a {
        display: block;
        padding: 30px 10px;
        background-color: #ffffff;
        border: 1px solid #e2e2e2;
        text-align: center;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        text-transform: uppercase;
        color: #434343; }
        .tree-chart-section .tree-chart .child-chart .child-chart-item a::before {
          position: absolute;
          content: "";
          width: 1px;
          height: 30px;
          background-color: #e2e2e2;
          top: 0;
          left: 50%;
          transform: translateX(-50%); }
        .tree-chart-section .tree-chart .child-chart .child-chart-item a:hover {
          background-color: #EE2E35;
          color: #ffffff; }
      .tree-chart-section .tree-chart .child-chart .child-chart-item a.active {
        background-color: #EE2E35;
        color: #ffffff; }

.somasom {
  padding-bottom: 0; }
  .somasom .btn-view-detail {
    padding: 12px 30px;
    border: none;
    background-color: #222528;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    margin-top: 30px;
    display: inline-block; }
    .somasom .btn-view-detail:hover {
      background-color: #EE2E35; }

.product-page-category {
  padding-bottom: 30px;
  border-bottom: 1px solid #e2e2e2; }

.product-slider-nav .slick-slide > div {
  height: 20vh; }

.product-slider-nav .slick-slide p {
  display: none; }

.product-slider-nav .slick-slide img {
  width: 100%;
  height: 20vh;
  object-fit: cover; }

.product-slider-nav .slick-next {
  top: 50%;
  right: -25px;
  transform: translateY(-50%); }
  .product-slider-nav .slick-next::before {
    content: "\e90f"; }

.product-slider-nav .slick-prev {
  top: 50%;
  left: -25px;
  transform: translateY(-50%); }
  .product-slider-nav .slick-prev::before {
    content: "\e910"; }

.product-slider-nav .slick-arrow {
  position: absolute;
  z-index: 10;
  width: 46px;
  height: 46px;
  border-radius: 100%;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
  background-color: #ffffff; }
  .product-slider-nav .slick-arrow::before {
    font-family: "icomoon";
    font-size: 18px;
    color: #434343;
    transition: 0.3s all; }
  .product-slider-nav .slick-arrow:hover::before {
    color: #EE2E35; }

.product-slider-nav .slick-current {
  position: relative; }
  .product-slider-nav .slick-current::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(34, 37, 40, 0.7); }
  .product-slider-nav .slick-current::after {
    content: "";
    width: 100%;
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #EE2E35; }
  .product-slider-nav .slick-current p {
    display: block;
    position: absolute;
    width: 80%;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center; }

.product-slider-for .product-item {
  display: flex !important; }

.page-detail .product-slider-detail {
  width: 100%;
  padding-top: 30px; }
  @media only screen and (max-width: 575px) {
    .page-detail .product-slider-detail {
      padding-top: 0; } }

.lg-sub-html {
  display: none; }

.slider-child-nav {
  margin-top: 15px; }
  .slider-child-nav .slick-list {
    margin-left: -6px;
    margin-right: -6px; }
  .slider-child-nav .slick-slide {
    padding: 0 6px;
    margin: 0 auto; }
    .slider-child-nav .slick-slide > div {
      height: 100px;
      border: 1px solid #ffffff;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25); }
    .slider-child-nav .slick-slide img {
      width: 100%;
      height: 100px;
      object-fit: cover; }

.product-infor {
  padding-top: 45px;
  padding-left: 60px; }
  .product-infor p {
    font-size: 22px;
    line-height: 30px;
    color: #84837E;
    margin-bottom: 15px; }
  .product-infor h2 {
    font-size: 38px;
    line-height: 46px;
    font-weight: 700;
    color: #EE2E35;
    text-transform: uppercase; }
  .product-infor .product-property {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px; }
    .product-infor .product-property .product-property-item {
      margin-bottom: 30px;
      width: 50%; }
      .product-infor .product-property .product-property-item label {
        font-size: 16px;
        line-height: 24px;
        color: #434343;
        margin-bottom: 8px; }
      .product-infor .product-property .product-property-item p {
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        color: #000100; }

.slider-child-for .slick-slide > div {
  height: 400px; }

.slider-child-for .slick-slide img {
  width: 100%;
  height: 400px;
  object-fit: cover; }

.see-product {
  padding: 12px 32px;
  border: none;
  background-color: #222528;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #ffffff;
  display: inline-block;
  transition: 0.4s all; }
  .see-product:hover {
    background-color: #EE2E35;
    color: #ffffff; }

.news-list .product-item {
  margin-bottom: 0 !important;
  padding: 40px 0;
  display: flex;
  align-items: center; }
  .news-list .product-item:nth-child(odd) {
    flex-direction: row-reverse; }
  .news-list .product-item .content {
    margin-top: 0 !important; }
    .news-list .product-item .content .excerpt {
      font-size: 38px !important;
      line-height: 52px !important;
      color: #EE2E35 !important; }
  .news-list .product-item p {
    margin-bottom: 24px; }
  .news-list .product-item img {
    height: 46vh !important; }

.product-sub-list {
  padding-top: 40px; }
  @media only screen and (max-width: 575px) {
    .product-sub-list {
      padding-top: 30px; } }
  .product-sub-list .product-item {
    display: block;
    padding-top: 0 !important; }
    .product-sub-list .product-item img {
      height: 200px !important; }
      @media only screen and (max-width: 575px) {
        .product-sub-list .product-item img {
          height: 230px !important; } }
    .product-sub-list .product-item .content .excerpt {
      font-size: 20px !important;
      line-height: 32px !important;
      font-weight: 600 !important;
      color: #000100 !important;
      margin-top: 20px !important; }

.product-infor {
  padding-top: 0; }
  .product-infor .product-property .product-property-item-vertical {
    display: flex; }
    .product-infor .product-property .product-property-item-vertical label {
      margin-right: 24px;
      margin-bottom: 0; }
    .product-infor .product-property .product-property-item-vertical p {
      margin-bottom: 0; }
    @media only screen and (max-width: 992px) {
      .product-infor .product-property .product-property-item-vertical {
        margin-bottom: 0 !important; } }
  .product-infor .product-property .product-property-item {
    margin-bottom: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
    .product-infor .product-property .product-property-item:last-child {
      border-bottom: none; }

.breadcrumb-content {
  background-color: transparent; }
  .breadcrumb-content .breadcrumb-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 0;
    list-style: none; }
    @media only screen and (max-width: 768px) {
      .breadcrumb-content .breadcrumb-item {
        flex-wrap: wrap; } }
  .breadcrumb-content li {
    display: inline-block;
    white-space: nowrap; }
    .breadcrumb-content li a {
      font-size: 14px;
      line-height: 24px;
      font-weight: 500;
      color: #444444;
      opacity: .65; }
    .breadcrumb-content li span {
      font-size: 14px;
      line-height: 24px;
      font-weight: 500;
      color: #444444;
      opacity: .4; }
    .breadcrumb-content li::after {
      content: "/";
      color: #131313;
      font-size: 10px;
      padding-right: 8px;
      padding-left: 8px; }
    .breadcrumb-content li:last-child {
      width: calc(100% - 144px);
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .breadcrumb-content li:last-child::after {
        display: none; }

.product-detail-page {
  padding-top: 10px; }

.related-section {
  background-color: #F5F5F5; }

/* WORK ENVIRONMENT */
.work-environment .content-detail {
  margin-top: 40px; }

.top-element h2 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #000100;
  margin-bottom: 30px; }

.top-element .element-item {
  display: flex;
  margin-bottom: 30px; }
  .top-element .element-item .element-item-content {
    padding: 40px 50px;
    background-color: #ffffff;
    box-shadow: 0px 0px 83px rgba(0, 0, 0, 0.09);
    text-align: center;
    width: 100%; }
    .top-element .element-item .element-item-content h3 {
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      color: #000100;
      transition: 0.3s all;
      text-transform: uppercase;
      margin-top: 35px; }
    .top-element .element-item .element-item-content img {
      width: 80px;
      height: 80px;
      object-fit: contain;
      margin: 0 auto; }
    .top-element .element-item .element-item-content a:hover h3 {
      color: #EE2E35; }

.page-des {
  font-size: 16px;
  line-height: 24px;
  color: #000100;
  margin-top: 30px;
  margin-bottom: 60px; }
  .page-des.page-des-center {
    font-weight: 700;
    text-align: center; }

/* JOB VACANCY */
.btn-download {
  padding: 12px 20px;
  background-color: #EE2E35;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center; }
  .btn-download i {
    font-size: 18px;
    margin-right: 12px; }
  .btn-download span {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: inherit; }
  .btn-download:hover {
    color: #ffffff; }

.job-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
  margin-top: 20px; }

.job-list-container {
  margin-top: 30px; }

.new-job {
  font-size: 12px;
  line-height: 24px;
  color: #ffffff;
  padding: 3px 7px;
  top: -1px;
  position: relative;
  background-color: #EE2E35;
  border-radius: 0 6px 0 6px;
  animation: newjob 1s ease-in-out infinite; }

@keyframes newjob {
  0% {
    opacity: 1; }
  50% {
    opacity: .8; }
  100% {
    opacity: 1; } }

.job-list .career-item {
  display: flex;
  margin-bottom: 30px; }
  .job-list .career-item .career-item-content {
    display: flex;
    width: 100%; }
    .job-list .career-item .career-item-content a img {
      min-width: 100px;
      width: 100px;
      height: 100px;
      object-fit: cover; }

.job-list .career-infor {
  margin-left: 25px; }
  .job-list .career-infor h3 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #000100;
    padding-bottom: 20px; }
    .job-list .career-infor h3 a {
      color: inherit; }
    .job-list .career-infor h3:hover {
      color: #EE2E35; }
  .job-list .career-infor p {
    font-size: 14px;
    line-height: 22px;
    color: #000100;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start; }
    .job-list .career-infor p i {
      font-size: 18px;
      margin-top: 2px; }
    .job-list .career-infor p span {
      font-size: 14px;
      line-height: 22px;
      color: #000100;
      margin-left: 12px; }

/* JOB DETAIL */
.page-no-banner {
  padding-top: 116px; }

.detail-page-title {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: #000100;
  margin-bottom: 20px; }

.detail-page-infor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e2e2; }
  .detail-page-infor p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #84837E; }
  .detail-page-infor .share {
    display: flex;
    align-items: center; }
    .detail-page-infor .share .share-item {
      min-width: 34px;
      height: 34px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100%;
      background-color: transparent;
      margin-left: 15px;
      transition: .3s all;
      border: 1px solid #e2e2e2;
      cursor: pointer; }
      .detail-page-infor .share .share-item i {
        font-size: 12px; }
      .detail-page-infor .share .share-item .icon-share-facebook {
        color: #1877F2; }
      .detail-page-infor .share .share-item .icon-link {
        color: #84837E; }

.detail-no-banner {
  margin-top: 30px !important; }

.main-job-infor {
  display: flex;
  justify-content: space-between; }

.job-benefit {
  margin-top: 40px; }
  .job-benefit h3 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #000100;
    margin-bottom: 20px; }

.job-benefit-item {
  margin-bottom: 12px; }
  .job-benefit-item p {
    display: flex;
    align-items: center; }
    .job-benefit-item p i {
      font-size: 24px;
      color: #EE2E35; }
    .job-benefit-item p img {
      width: 24px;
      height: 24px;
      object-fit: contain; }
    .job-benefit-item p span {
      font-size: 16px;
      line-height: 24px;
      color: #000100;
      padding-left: 15px; }

.job-des-content p {
  font-size: 16px;
  line-height: 24px;
  color: #000100;
  padding-bottom: 15px; }

.related-block {
  padding: 30px 20px;
  background-color: #F5F5F5; }
  .related-block > h3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #EE2E35;
    text-transform: uppercase;
    margin-bottom: 30px; }

.left-block {
  padding-right: 60px; }

/* RECRUITMENT */
.process-list .process-item {
  display: flex;
  align-items: center;
  margin-bottom: 60px; }
  .process-list .process-item .process-number {
    font-size: 46px;
    line-height: 150px;
    font-weight: 700;
    color: #EE2E35;
    min-width: 150px;
    width: 150px;
    height: 150px;
    text-align: center;
    background-color: #E5E5E5;
    border-radius: 100%;
    position: relative; }
    .process-list .process-item .process-number:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: #EE2E35;
      top: 75%;
      left: 25%;
      transform: rotate(-45deg); }
  .process-list .process-item .process-des {
    padding-left: 40px; }
    .process-list .process-item .process-des h3 {
      font-size: 16px;
      line-height: 24px;
      font-weight: 700;
      color: #000100;
      padding-bottom: 15px; }
    .process-list .process-item .process-des p {
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #434343; }

/* CAREER OPPORTUNITY */
.career-form {
  max-width: 60%;
  margin: 0 auto;
  padding-top: 20px; }
  .career-form .form-container .form-item .col-form-label {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    line-height: 22px;
    color: #2c2c2c; }
    .career-form .form-container .form-item .col-form-label.col-form-required::after {
      content: '*';
      color: #000100;
      margin-left: 3px; }
  .career-form .form-container .form-item .description {
    display: block;
    font-style: italic;
    font-size: 14px;
    line-height: 22px;
    color: #434343;
    opacity: 0.65;
    margin-bottom: 8px; }
  .career-form .form-container .form-item .file {
    margin: 5px 0; }
  .career-form .form-container .form-item .item-file {
    display: block;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #EE2E35;
    margin-left: 20px; }
    .career-form .form-container .form-item .item-file .icon-close {
      color: #84837E;
      margin-left: 5px;
      cursor: pointer; }
  .career-form .form-container .form-item .form-input-file {
    display: none; }
  .career-form .form-container .form-item .form-input-file {
    display: none; }
  .career-form .form-container .form-item .custom-file-upload {
    width: auto;
    background-color: #434343;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    color: #ffffff !important;
    padding: 13px 30px;
    margin-bottom: 0;
    cursor: pointer; }
    .career-form .form-container .form-item .custom-file-upload .icon-upload {
      font-size: 16px;
      padding-right: 8px;
      position: relative;
      top: 2px; }
  .career-form .form-container .form-item .upload-container {
    display: flex;
    align-items: center; }

.content-detail .career-form-link {
  font-weight: 700;
  color: #EE2E35;
  text-decoration: underline !important; }

.form-container .form-item textarea {
  height: auto !important; }

.news-list .news-item {
  margin-bottom: 40px; }
  .news-list .news-item .image {
    overflow: hidden; }
    .news-list .news-item .image img {
      width: 100%;
      height: 30vh;
      object-fit: cover;
      transition: all .5s ease-in-out; }
    .news-list .news-item .image:hover img {
      transform: scale(1.15) rotate(-3deg); }
  .news-list .news-item .content {
    margin-top: 20px; }
    .news-list .news-item .content .excerpt {
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      color: #000100;
      margin-bottom: 12px; }
      .news-list .news-item .content .excerpt a {
        color: inherit; }
      .news-list .news-item .content .excerpt:hover a {
        color: #EE2E35; }
    .news-list .news-item .content .date {
      font-size: 14px;
      line-height: 22px;
      color: #434343;
      margin-bottom: 12px; }
    .news-list .news-item .content .des {
      font-size: 14px;
      line-height: 22px;
      color: #434343; }

.related-news-list .related-news-item {
  margin-bottom: 30px; }
  .related-news-list .related-news-item .related-item-content img {
    width: 100%;
    height: 280px;
    object-fit: cover; }
  .related-news-list .related-news-item .related-item-content h3 {
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    color: #434343;
    margin-top: 15px; }
    .related-news-list .related-news-item .related-item-content h3 a {
      color: inherit; }
    .related-news-list .related-news-item .related-item-content h3:hover {
      color: #EE2E35; }
  .related-news-list .related-news-item:last-child {
    margin-bottom: 10px; }

.gallery-list {
  margin-top: 40px; }
  .gallery-list .gallery-item {
    margin-bottom: 40px; }
  .gallery-list .video-gallery {
    margin-bottom: 40px; }

.card-library .card-image {
  height: 30vh;
  width: 100%;
  overflow: hidden;
  border-radius: 2px; }
  .card-library .card-image a:hover img {
    transform: scale(1.15) rotate(-3deg); }
  .card-library .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s ease-in-out; }
  .card-library .card-image .hidden {
    display: none; }

.card-library .card-content {
  padding-top: 20px; }
  .card-library .card-content h3 {
    color: #434343;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    cursor: pointer; }
    .card-library .card-content h3:hover {
      color: #EE2E35; }
  .card-library .card-content p {
    font-size: 14px;
    line-height: 22px;
    color: #84837E;
    margin-top: 10px; }

.card-library .card-video {
  position: relative; }
  .card-library .card-video .icon-play {
    width: 46px;
    height: 46px;
    font-size: 46px;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    cursor: pointer; }
    .card-library .card-video .icon-play:hover ~ .cover-image img {
      transform: scale(1.15) rotate(-3deg); }
  .card-library .card-video:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(23, 37, 77, 0.25); }

.lg-video-cont {
  max-width: 80vw !important; }

.error-container {
  padding: 5vh 0;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; }
  .error-container .images {
    padding: 40px; }
    .error-container .images img {
      width: 100%; }
  .error-container .content {
    padding: 20px; }
    .error-container .content h3 {
      font-size: 20px;
      line-height: 28px;
      font-weight: 600;
      color: #000100;
      margin-bottom: 12px; }
    .error-container .content p {
      font-size: 14px;
      line-height: 22px;
      color: #434343;
      margin-bottom: 20px; }
    .error-container .content a {
      padding: 12px 40px;
      border: none;
      background-color: #434343;
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      color: #ffffff;
      transition: all .2s ease-in-out;
      text-align: center; }
  @media only screen and (max-width: 992px) {
    .error-container {
      height: auto; }
      .error-container .content {
        padding: 0; } }

.search-result {
  max-width: 80%;
  margin: 0 auto; }
  @media only screen and (max-width: 992px) {
    .search-result {
      max-width: 100%; } }
  .search-result .search-result-count span {
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    color: #434343; }
    .search-result .search-result-count span:last-child {
      font-weight: 600;
      color: #EE2E35; }
  .search-result .search-list {
    margin-top: 30px; }
    .search-result .search-list .search-item {
      display: flex;
      align-items: center;
      margin-bottom: 40px; }
      .search-result .search-list .search-item .search-image {
        width: 300px;
        min-width: 300px;
        height: 200px;
        object-fit: cover; }
        @media only screen and (max-width: 1440px) {
          .search-result .search-list .search-item .search-image {
            width: 255px;
            min-width: 255px;
            height: 160px; } }
        @media only screen and (max-width: 475px) {
          .search-result .search-list .search-item .search-image {
            width: 100%;
            height: 220px;
            object-fit: cover; } }
      @media only screen and (max-width: 475px) {
        .search-result .search-list .search-item {
          display: block; } }
      .search-result .search-list .search-item .search-content {
        margin-left: 40px; }
        @media only screen and (max-width: 992px) {
          .search-result .search-list .search-item .search-content {
            margin-left: 30px; } }
        @media only screen and (max-width: 475px) {
          .search-result .search-list .search-item .search-content {
            margin-left: 0;
            margin-top: 15px; } }
        .search-result .search-list .search-item .search-content .search-title {
          font-size: 18px;
          line-height: 26px;
          font-weight: 700;
          color: #000100;
          margin-bottom: 12px; }
        .search-result .search-list .search-item .search-content .search-des {
          font-size: 14px;
          line-height: 22px;
          color: #434343; }

@media only screen and (max-width: 1600px) {
  .section-career .section-content .career-title {
    margin-bottom: 30px; }
  .section-career .section-content .career-item .career-item-content {
    padding: 20px 25px 8px 25px; } }

@media only screen and (max-width: 1440px) {
  .section-about-us .section-content .container-fluid > h2 {
    font-size: 40px;
    line-height: 52px;
    margin-bottom: 30px; }
  .section-about-us .section-content .about-item .about-item-content h3 {
    padding-top: 40px; }
  .section-about-us .section-content .about-item .about-item-content img {
    width: 120px;
    height: 90px;
    object-fit: contain; }
  .section-about-us .section-content .about-item .about-item-content p {
    font-size: 16px;
    line-height: 24px; }
  .section-product .product-row .product-item .product-item-content .product-title a {
    font-size: 64px;
    line-height: 76px; }
  .section-career .footer-container .footer-link li a {
    font-size: 14px;
    line-height: 22px; }
  .section-career .footer-container .footer-infor p {
    font-size: 14px;
    line-height: 22px; } }

@media only screen and (max-width: 1366px) {
  .menu-pc-content .menu-pc-wrap {
    transform: translate(-50%, -12%); }
  .menu-pc-left li {
    padding: 16px 0; }
    .menu-pc-left li a {
      font-size: 30px;
      line-height: 38px; }
  .container-fluid {
    padding-right: 8vw;
    padding-left: 8vw; }
  .section-about-us .section-content .container-fluid > h2 {
    font-size: 40px;
    line-height: 52px;
    margin-bottom: 30px; }
  .section-about-us .section-content .about-item .about-item-content h3 {
    padding-top: 40px; }
  .section-about-us .section-content .about-item .about-item-content img {
    width: 120px;
    height: 90px;
    object-fit: contain; }
  .section-about-us .section-content .about-item .about-item-content p {
    font-size: 16px;
    line-height: 24px; }
  .section-product .product-row .product-item .product-item-content .product-title a {
    font-size: 56px;
    line-height: 64px; }
  .section-career .section-content {
    padding-top: 25px !important; }
    .section-career .section-content .career-title {
      margin-bottom: 30px; }
    .section-career .section-content .career-item .career-item-content {
      padding: 15px 15px 5px 15px; }
  .section-career .career-infor {
    margin-left: 25px; }
    .section-career .career-infor h3 {
      padding-bottom: 15px; }
    .section-career .career-infor p {
      margin-bottom: 8px; }
  .section-career .footer-container .footer-link li a {
    font-size: 14px;
    line-height: 22px; }
  .section-career .footer-container .footer-infor p {
    font-size: 14px;
    line-height: 22px; } }

@media only screen and (max-width: 992px) {
  /* HEADER */
  .header-container {
    padding: 0 40px; }
  .open .menu-pc-toggle:hover {
    width: 40px; }
  .logo a img {
    width: 160px;
    height: auto; }
  .container-fluid {
    padding-right: 8vw;
    padding-left: 8vw; }
  .menu-pc-content .menu-pc-wrap {
    transform: translate(-50%, -20%); }
  /**/
  .list-number-slider {
    display: none; }
  /* BANNER */
  .banner-container .banner-content {
    padding-top: 35px; }
    .banner-container .banner-content .title {
      font-size: 36px;
      line-height: 44px;
      padding-top: 30px; }
      .banner-container .banner-content .title::before {
        height: 10px; }
  .tab-container {
    display: none; }
  /* PRODUCT */
  .section-product {
    padding-top: 0; }
    .section-product .section-content {
      padding-bottom: 0; }
      .section-product .section-content .title-under {
        justify-content: flex-start; }
    .section-product .product-row .product-item {
      width: 100%;
      margin-bottom: 40px; }
      .section-product .product-row .product-item .product-item-content .product-image img {
        width: 100%;
        height: 470px;
        object-fit: cover; }
      .section-product .product-row .product-item .product-item-content .product-title a {
        font-size: 60px;
        line-height: 68px; }
      .section-product .product-row .product-item:nth-of-type(1) .product-title {
        width: 100%; }
      .section-product .product-row .product-item:nth-of-type(2) .product-image img {
        width: 100%; }
  .section-product-2 {
    padding-top: 0; }
    .section-product-2 .product-row .product-item:nth-of-type(2) .product-title {
      width: 100%; }
  /* ABOUT US */
  .section-about-us .section-content {
    padding-top: 20px; }
    .section-about-us .section-content .container-fluid > h2 {
      width: 100%;
      font-size: 48px;
      line-height: 58px; }
    .section-about-us .section-content .about-item {
      margin-bottom: 30px;
      display: block; }
      .section-about-us .section-content .about-item .about-item-content img {
        width: 100px;
        height: auto;
        object-fit: cover; }
      .section-about-us .section-content .about-item .about-item-content h3 {
        padding-top: 30px; }
  /* CAREER */
  .section-career {
    padding-top: 0; }
    .section-career .section-content {
      padding-top: 0 !important; }
    .section-career .footer-container {
      position: relative;
      margin-top: 30px; }
    .section-career .slick-slide img {
      height: 220px; }
  /* FOOTER */
  .footer-container .logo-footer img {
    width: 160px;
    height: auto; }
  .footer-container .footer-link li {
    padding-right: 15px; }
  .footer-container .footer-contact {
    margin-top: 20px; } }

/* SCREEN 768 */
@media only screen and (max-width: 768px) {
  .container-fluid {
    padding-right: 6vw;
    padding-left: 6vw; }
  .icon-search-menu {
    padding: 10px;
    border: none; }
  .header-container .header-content .language {
    margin-right: 55px; }
    .header-container .header-content .language img {
      width: 24px;
      height: 24px;
      object-fit: cover; } }

/* SCREEN 767 */
@media only screen and (max-width: 767px) {
  .header-container .header-content {
    padding: 8px 0; }
  /* /////////// TABS CONTAINER /////////// */
  .tabs-container {
    padding: 0 10px;
    border-bottom: 1px solid #d5dce2; }
    .tabs-container .tab-content {
      display: flex;
      align-items: center; }
      .tabs-container .tab-content .link {
        color: #000100;
        padding: 8px 0;
        margin: 0 10px; }
        .tabs-container .tab-content .link:hover {
          color: #02a959; }
          .tabs-container .tab-content .link:hover::after {
            width: 100%; }
        .tabs-container .tab-content .link::after {
          content: "";
          position: absolute;
          width: 0%;
          height: 2px;
          background-color: #02a959;
          top: 100%;
          left: 0;
          transition: 0.3s ease-in; }
        .tabs-container .tab-content .link.active {
          color: #02a959; }
          .tabs-container .tab-content .link.active::after {
            width: 100%; }
  /* /////////// TABS CONTAINER /////////// */
  /* FOOTER */
  .section-career .career-view-all {
    margin-top: 20px;
    margin-bottom: 30px; }
  .footer-container .footer-link li a {
    font-size: 14px;
    line-height: 22px; } }

/* SCREEN 475 */
@media only screen and (max-width: 475px) {
  .header-container {
    padding: 0 15px; }
    .header-container .header-content {
      position: unset; }
      .header-container .header-content .language {
        margin-right: 65px; }
        .header-container .header-content .language img {
          width: 24px;
          height: 24px;
          object-fit: cover; }
        .header-container .header-content .language span {
          display: none; }
        .header-container .header-content .language a {
          display: inline-block; }
          .header-container .header-content .language a:first-of-type {
            margin-right: 5px; }
        .header-container .header-content .language a.active {
          padding: 2px 7px; }
  .menu-pc-toggle {
    width: 30px;
    height: 22px; }
    .menu-pc-toggle:hover {
      width: 36px; }
    .menu-pc-toggle .menu-icon-toggle span {
      font-size: 12px; }
  .open .menu-pc-toggle {
    width: 28px; }
    .open .menu-pc-toggle:hover {
      width: 28px; }
  .container-fluid {
    padding-right: 15px;
    padding-left: 15px; }
  .logo a img {
    width: 120px;
    height: auto; }
  .section-container {
    padding-top: 20px !important; }
  /* MENU */
  .menu-pc-toggle {
    left: auto;
    right: 0; }
  .menu-pc-left li {
    padding: 12px 0; }
    .menu-pc-left li a {
      font-size: 20px;
      line-height: 28px;
      padding: 0 40px; }
    .menu-pc-left li.active a {
      margin-left: 40px;
      opacity: 1; }
      .menu-pc-left li.active a:before {
        width: 30px;
        height: 5px; }
  .menu-pc-left li a:hover:before {
    width: 30px;
    height: 5px; }
  .menu-pc-content .menu-pc-wrap {
    width: calc(100% - 30px); }
  .search-box form {
    width: calc(100% - 30px); }
    .search-box form .search-content input {
      font-size: 18px;
      line-height: 26px;
      padding: 12px 50px 12px 0; }
      .search-box form .search-content input::-webkit-input-placeholder {
        /* Edge */
        font-size: 18px;
        line-height: 26px; }
      .search-box form .search-content input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        font-size: 18px;
        line-height: 26px; }
      .search-box form .search-content input::placeholder {
        font-size: 18px;
        line-height: 26px; }
    .search-box form .search-content button {
      margin-left: -18px; }
      .search-box form .search-content button i {
        font-size: 18px; }
  .icon-search-menu {
    margin-right: 130px;
    transition: 0.4s all; }
  .open .icon-search-menu {
    z-index: 7; }
  .search-open .icon-search-menu {
    margin-right: 0; }
  /* BANNER */
  .banner-container {
    padding-top: 52px; }
    .banner-container .banner-content {
      width: 80%; }
      .banner-container .banner-content .title {
        font-size: 28px;
        line-height: 36px;
        padding-top: 18px; }
        .banner-container .banner-content .title:before {
          width: 90px;
          height: 6px; }
      .banner-container .banner-content .button {
        padding: 10px 30px;
        font-size: 16px;
        line-height: 24px; }
    .banner-container .banner-image {
      height: 360px !important; }
  .home .banner-container .banner-content .title {
    font-size: 24px;
    line-height: 32px;
    padding-top: 22px; }
  .home .banner-container .banner-image {
    height: 400px !important; }
  /* PRODUCT */
  .section-product .section-content {
    padding-top: 20px; }
    .section-product .section-content .title-under {
      margin-bottom: 20px; }
      .section-product .section-content .title-under h2 {
        font-size: 22px;
        line-height: 32px; }
  .section-product .product-row .product-item {
    margin-bottom: 30px; }
    .section-product .product-row .product-item .product-item-content .product-title {
      text-align: left; }
      .section-product .product-row .product-item .product-item-content .product-title a {
        font-size: 36px;
        line-height: 44px; }
    .section-product .product-row .product-item .product-item-content .product-image img {
      height: 280px; }
  .section-product-2 {
    padding-top: 0 !important; }
    .section-product-2 .section-content {
      padding-top: 0; }
  /* ABOUT US */
  .section-about-us .section-content {
    padding-bottom: 20px; }
    .section-about-us .section-content .sub-title {
      font-size: 22px;
      line-height: 30px;
      margin-bottom: 25px;
      padding-left: 55px; }
      .section-about-us .section-content .sub-title::before {
        width: 40px;
        height: 5px; }
    .section-about-us .section-content .container-fluid > h2 {
      font-size: 36px;
      line-height: 44px;
      margin-bottom: 25px; }
    .section-about-us .section-content .about-item {
      margin-bottom: 15px; }
      .section-about-us .section-content .about-item .about-item-content {
        padding: 20px; }
        .section-about-us .section-content .about-item .about-item-content p {
          font-size: 16px;
          line-height: 24px; }
        .section-about-us .section-content .about-item .about-item-content h3 {
          font-size: 22px;
          line-height: 30px;
          padding-top: 25px;
          padding-bottom: 12px; }
        .section-about-us .section-content .about-item .about-item-content img {
          width: 80px; }
  .section-about-us .section-image {
    display: none; }
  /* CAREER */
  .section-career .section-content {
    padding-top: 20px; }
    .section-career .section-content .career-title {
      margin-bottom: 25px; }
      .section-career .section-content .career-title .sub-title {
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 0;
        padding-left: 55px; }
        .section-career .section-content .career-title .sub-title::before {
          width: 40px;
          height: 5px; }
      .section-career .section-content .career-title .slide-arrow {
        width: 36px;
        height: 36px; }
    .section-career .section-content .career-item {
      margin-bottom: 20px; }
      .section-career .section-content .career-item .career-item-content {
        box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.09); }
        .section-career .section-content .career-item .career-item-content a img {
          min-width: 80px;
          width: 80px;
          height: 80px; }
        .section-career .section-content .career-item .career-item-content .career-infor {
          margin-left: 15px; }
  .section-career .footer-container {
    margin-top: 0; }
  /* FOOTER */
  .footer-container .logo-footer {
    display: inline-block;
    margin-bottom: 30px; }
    .footer-container .logo-footer img {
      width: 120px;
      height: auto; }
  .footer-container .footer-link li {
    padding-bottom: 12px; }
    .footer-container .footer-link li a {
      font-size: 12px;
      line-height: 20px; }
  .footer-container .footer-infor p {
    font-size: 12px;
    line-height: 20px; }
  .footer-container .footer-infor i {
    font-size: 16px; }
  .footer-container .copyright-container .copyright {
    font-size: 12px;
    line-height: 20px;
    padding-bottom: 15px; }
  .footer-container .copyright-container .copyright-content {
    flex-direction: column; }
    .footer-container .copyright-container .copyright-content .social .social-link i {
      font-size: 16px; }
  /* TAB OTHER PAGE*/
  .tab-link-container {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
    padding: 6px 15px; }
    .tab-link-container.sticky {
      position: relative;
      left: unset;
      top: unset;
      right: unset;
      z-index: 1; }
    .tab-link-container .tab-link-list {
      display: flex;
      justify-content: center;
      flex-direction: column; }
    .tab-link-container a {
      padding: 5px 0;
      font-size: 16px;
      line-height: 24px;
      color: #434343;
      font-weight: 500;
      text-align: left; }
      .tab-link-container a.active {
        color: #EE2E35;
        font-weight: 600; }
        .tab-link-container a.active::after {
          width: 0; }
      .tab-link-container a::after {
        content: "";
        position: absolute;
        width: 0%;
        height: 2px;
        top: 100%;
        left: 0;
        background-color: #EE2E35; }
    .tab-link-container .link {
      font-size: 14px;
      margin: 2px 0; } }

@media (min-width: 1600px) {
  .customer .customer-list .customer-item .customer-item-content img {
    max-height: 100px; }
  .network .drag {
    width: 100%; }
  .history .item-process .images img {
    height: 500px; } }

@media only screen and (max-width: 992px) {
  .sustainability {
    padding: 30px 0; }
    .sustainability .sustainability-list .sustainability-item {
      margin-bottom: 30px; }
  .work {
    padding: 30px 0; }
  .customer {
    padding: 30px 0; }
  .overview-infor {
    margin-left: 0 !important;
    margin-top: 30px; }
  .history {
    padding: 40px 0; }
    .history .item-process {
      width: 80%; }
      .history .item-process .images img {
        height: 350px; } }

@media only screen and (max-width: 767px) {
  .drag-box {
    display: none; }
  .network .network-content-mobile {
    display: block; }
    .network .network-content-mobile .network-list {
      margin-top: 30px; }
    .network .network-content-mobile .network-item {
      visibility: visible;
      opacity: 1;
      position: relative;
      margin-bottom: 20px; }
      .network .network-content-mobile .network-item .network-item-infor {
        box-shadow: 0px 0px 20px rgba(34, 37, 40, 0.1); }
        .network .network-content-mobile .network-item .network-item-infor > div {
          max-width: 100%; } }

@media only screen and (max-width: 475px) {
  /* ABOUT */
  .about-container {
    padding: 30px 0; }
  .overview .overview-infor {
    margin-left: 0;
    margin-top: 30px; }
  /* HISTORY */
  .history .item-process {
    width: 100%;
    margin-bottom: 0; }
    .history .item-process .images img {
      height: 220px; }
    .history .item-process .content h3 {
      font-size: 18px;
      line-height: 26px; }
  .history .timeline-year .timeline {
    width: calc(100% - 90px); }
  .history .slider-process {
    margin: 35px auto 0 auto; }
  /* WORK */
  .work {
    background-color: #F5F5F5;
    padding: 30px 0 15px 0; }
    .work .work-list {
      margin-top: 30px; }
      .work .work-list .work-item {
        margin-bottom: 15px; }
        .work .work-list .work-item .work-item-content img {
          width: 60px;
          height: 60px; }
        .work .work-list .work-item .work-item-content h3 {
          margin-top: 25px;
          margin-bottom: 0; }
  /* SUSTAINABILITY */
  .sustainability {
    padding: 30px 0 15px 0; }
    .sustainability .sustainability-list {
      margin-top: 30px; }
      .sustainability .sustainability-list .sustainability-item {
        margin-bottom: 15px; }
  /* CUSTOMER */
  .customer {
    padding: 30px 0 15px 0; }
    .customer .customer-list {
      margin-top: 30px; }
      .customer .customer-list .customer-item {
        margin-bottom: 20px; }
  .page-description {
    width: 100%; }
  /* NETWORK */
  .network {
    padding: 30px 0 15px 0; }
    .network .network-content-mobile .network-item .network-item-infor {
      flex-wrap: wrap; }
      .network .network-content-mobile .network-item .network-item-infor > div {
        max-width: 100%;
        margin-left: 0;
        margin-top: 15px; }
      .network .network-content-mobile .network-item .network-item-infor img {
        width: 100%;
        height: 220px; } }

@media only screen and (max-width: 768px) {
  .contact .contact-title {
    margin-bottom: 18px; }
  .contact .contact-form {
    padding-top: 30px; }
  .contact .contact-infor-item {
    margin-bottom: 20px; }
    .contact .contact-infor-item h3 {
      font-size: 20px;
      line-height: 28px; }
    .contact .contact-infor-item p {
      font-size: 16px;
      line-height: 24px; } }

@media only screen and (max-width: 475px) {
  .contact {
    padding-bottom: 15px; }
    .contact .contact-title {
      font-size: 20px;
      line-height: 28px; }
    .contact .contact-form {
      padding-top: 30px; }
    .contact .contact-infor-item {
      margin-bottom: 20px; }
      .contact .contact-infor-item h3 {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 12px; }
      .contact .contact-infor-item p {
        font-size: 14px;
        line-height: 22px; }
    .contact .form-container .form-item label {
      font-size: 16px;
      line-height: 24px; }
  .contact-map .map-container iframe {
    height: 350px; } }

@media (min-width: 1600px) {
  .page-detail .slider-detail .slider-for .slick-slide > div {
    height: 650px; }
  .page-detail .slider-detail .slider-for .slick-slide img {
    height: 650px; }
  .page-detail .slider-detail .slider-nav .slick-slide > div {
    height: 120px; }
  .page-detail .slider-detail .slider-nav .slick-slide img {
    height: 120px; } }

@media only screen and (max-width: 1366px) {
  .page-detail .image-detail .image-list .image-item .image-item-content img {
    height: 100px; }
  .page-detail .image-award {
    margin-top: 0; }
    .page-detail .image-award .image-list .image-item .image-item-content img {
      height: auto; } }

@media only screen and (max-width: 992px) {
  .page-detail .slider-detail {
    width: 100%; }
    .page-detail .slider-detail .slider-for .slick-slide > div {
      height: 400px; }
    .page-detail .slider-detail .slider-for .slick-slide img {
      height: 400px; }
    .page-detail .slider-detail .slider-for .slick-next {
      right: -20px; }
    .page-detail .slider-detail .slider-for .slick-prev {
      left: -20px; }
    .page-detail .slider-detail .slider-nav .slick-slide > div {
      height: 100px; }
    .page-detail .slider-detail .slider-nav .slick-slide img {
      height: 100px; }
  .page-detail .image-detail {
    margin-top: 40px; }
    .page-detail .image-detail .image-list .image-item .image-item-content img {
      height: 82px; }
  .page-detail .image-award {
    margin-top: 0; }
    .page-detail .image-award .image-list .image-item .image-item-content img {
      height: auto; } }

@media only screen and (max-width: 768px) {
  .page-detail .image-detail {
    margin-top: 40px; }
    .page-detail .image-detail .image-list .image-item {
      width: 33.33%; }
      .page-detail .image-detail .image-list .image-item .image-item-content {
        padding: 20px 30px; }
        .page-detail .image-detail .image-list .image-item .image-item-content img {
          height: 82px; }
  .page-detail .image-award {
    margin-top: 0; }
    .page-detail .image-award .image-list .image-item .image-item-content {
      padding: 5px; }
      .page-detail .image-award .image-list .image-item .image-item-content img {
        height: auto; } }

@media only screen and (max-width: 475px) {
  .page-detail .slider-detail .slider-for .slick-slide > div {
    height: 240px; }
  .page-detail .slider-detail .slider-for .slick-slide img {
    height: 240px; }
  .page-detail .slider-detail .slider-for .slick-next {
    right: -15px; }
  .page-detail .slider-detail .slider-for .slick-prev {
    left: -15px; }
  .page-detail .slider-detail .slider-nav .slick-slide > div {
    height: 100px; }
  .page-detail .slider-detail .slider-nav .slick-slide img {
    height: 100px; }
  .page-detail .image-detail {
    margin-top: 40px; }
    .page-detail .image-detail .image-list {
      margin-left: -10px;
      margin-right: -10px; }
      .page-detail .image-detail .image-list .image-item {
        width: 50%;
        margin-bottom: 20px;
        padding: 0 10px; }
        .page-detail .image-detail .image-list .image-item .image-item-content {
          padding: 10px 20px; }
          .page-detail .image-detail .image-list .image-item .image-item-content img {
            height: 82px; }
  .page-detail .image-award {
    margin-top: 0; }
    .page-detail .image-award .image-list .image-item {
      width: 100%; }
      .page-detail .image-award .image-list .image-item .image-item-content {
        padding: 5px; }
        .page-detail .image-award .image-list .image-item .image-item-content img {
          height: auto; } }

@media (min-width: 1600px) {
  .product-slider-nav .slick-slide > div {
    height: 200px; }
  .product-slider-nav .slick-slide img {
    height: 200px; }
  .slider-child-nav .slick-slide > div {
    height: 120px; }
  .slider-child-nav .slick-slide img {
    height: 120px; }
  .slider-child-for .slick-slide > div {
    height: 500px; }
  .slider-child-for .slick-slide img {
    height: 500px; } }

@media only screen and (max-width: 992px) {
  .tree-chart-section .tree-chart {
    padding-top: 60px; }
    .tree-chart-section .tree-chart .parent-chart {
      display: none; }
      .tree-chart-section .tree-chart .parent-chart::before {
        display: none; }
    .tree-chart-section .tree-chart .child-chart {
      display: block; }
      .tree-chart-section .tree-chart .child-chart .child-chart-item {
        padding: 0;
        margin-bottom: 15px; }
        .tree-chart-section .tree-chart .child-chart .child-chart-item::before {
          display: none; }
        .tree-chart-section .tree-chart .child-chart .child-chart-item a {
          display: block;
          padding: 16px 10px; }
          .tree-chart-section .tree-chart .child-chart .child-chart-item a::before {
            display: none; }
  /**/
  .product-banner {
    padding: 50px 0;
    background-color: #222528;
    margin-top: 52px; }
    .product-banner .product-banner-infor h1 {
      font-size: 60px;
      line-height: 68px; }
    .product-banner .product-banner-infor p {
      font-size: 16px;
      line-height: 24px; }
    .product-banner .product-banner-infor {
      padding-right: 15px;
      margin-bottom: 30px; }
  /**/
  .product-slider-nav .slick-slide > div {
    height: 150px; }
  .product-slider-nav .slick-slide img {
    height: 150px; }
  .product-infor {
    padding-top: 0;
    padding-left: 30px; }
    .product-infor p {
      font-size: 18px;
      line-height: 26px;
      margin-bottom: 12px; }
    .product-infor h2 {
      font-size: 30px;
      line-height: 38px; }
    .product-infor .product-property .product-property-item {
      margin-bottom: 15px;
      width: 100%; }
      .product-infor .product-property .product-property-item label {
        margin-bottom: 5px; }
      .product-infor .product-property .product-property-item p {
        font-size: 18px;
        line-height: 26px; }
  .slider-child-for .slick-slide > div {
    height: 250px; }
  .slider-child-for .slick-slide img {
    height: 250px; } }

@media only screen and (max-width: 767px) {
  .tree-chart-section .tree-chart {
    padding-top: 30px; }
    .tree-chart-section .tree-chart .parent-chart {
      display: none; }
      .tree-chart-section .tree-chart .parent-chart::before {
        display: none; }
    .tree-chart-section .tree-chart .child-chart {
      display: block; }
      .tree-chart-section .tree-chart .child-chart .child-chart-item {
        padding: 0;
        margin-bottom: 12px; }
        .tree-chart-section .tree-chart .child-chart .child-chart-item::before {
          display: none; }
        .tree-chart-section .tree-chart .child-chart .child-chart-item:last-child {
          margin-bottom: 0; }
        .tree-chart-section .tree-chart .child-chart .child-chart-item a {
          display: block;
          padding: 10px 10px;
          font-size: 14px;
          line-height: 22px; }
  /**/
  .product-banner {
    padding: 40px 0; }
    .product-banner .product-banner-infor h1 {
      font-size: 36px;
      line-height: 44px; }
    .product-banner .product-banner-infor p {
      margin-top: 25px; }
    .product-banner .product-banner-infor {
      margin-bottom: 30px; }
  /**/
  .product-slider-nav .slick-slide > div {
    height: 120px; }
  .product-slider-nav .slick-slide img {
    height: 120px; }
  .product-slider-nav .slick-next {
    right: -15px; }
  .product-slider-nav .slick-prev {
    left: -15px; }
  .product-slider-for .product-item {
    width: auto !important; }
  .product-infor {
    padding-top: 30px;
    padding-left: 15px; }
    .product-infor .product-property-item {
      margin-bottom: 5px; }
      .product-infor .product-property-item:last-child {
        margin-bottom: 0; } }

@media only screen and (max-width: 992px) {
  /* WORK ENVIRONMENT */
  .work-environment .content-detail {
    margin-top: 20px; }
  .top-element .element-item .element-item-content {
    padding: 30px; }
    .top-element .element-item .element-item-content a:hover h3 {
      color: #EE2E35; }
  .page-des {
    margin-top: 20px;
    margin-bottom: 20px; }
  /* JOB VACANCY */
  .job-list-container {
    flex-direction: column-reverse; }
  .job-image {
    display: none; }
  .btn-download {
    display: inline-block; }
  .job-list {
    margin-top: 40px; } }

@media only screen and (max-width: 768px) {
  /* WORK ENVIRONMENT */
  .top-element .element-item .element-item-content h3 {
    margin-top: 25px; }
  .top-element .element-item .element-item-content img {
    width: 65px;
    height: 65px; }
  /* JOB-DETAIL */
  .left-block {
    padding-right: 15px; }
  .page-no-banner {
    padding-top: 80px; }
  .related-block {
    margin-top: 20px; }
    .related-block .career-item:last-child {
      margin-bottom: 0; }
  /* RECRUITMENT */
  .process-list .process-item {
    align-items: flex-start; }
  /* CAREER OPPORTUNITY */
  .career-form {
    max-width: 100%; } }

@media only screen and (max-width: 767px) {
  /* RECRUITMENT */
  .process-list .process-item {
    display: block;
    margin-bottom: 25px; }
    .process-list .process-item .process-number {
      font-size: 30px;
      line-height: 90px;
      min-width: 90px;
      width: 90px;
      height: 90px; }
    .process-list .process-item .process-des {
      padding-left: 0;
      padding-top: 20px; }
    .process-list .process-item:last-child {
      margin-bottom: 0; } }

@media only screen and (max-width: 475px) {
  .top-element .element-item {
    margin-bottom: 20px; }
    .top-element .element-item .element-item-content h3 {
      font-size: 18px;
      line-height: 26px; }
  /* JOB-DETAIL */
  .detail-page-title {
    font-size: 24px;
    line-height: 32px; }
  .detail-page-infor {
    padding-bottom: 16px; }
    .detail-page-infor p {
      font-size: 14px;
      line-height: 22px;
      font-weight: 400; }
    .detail-page-infor .share .share-item {
      margin-left: 10px; }
  .job-benefit-item {
    margin-bottom: 16px; }
  .main-job-infor {
    flex-direction: column; }
    .main-job-infor .job-infor {
      margin-bottom: 16px; }
  .job-des-content p {
    font-size: 14px;
    line-height: 22px; }
  .job-des-content img {
    max-width: 100%;
    height: auto;
    object-fit: cover; }
  .related-block .job-list {
    margin-top: 30px; }
  /* CAREER OPPORTUNITY */
  .career-form .form-container .form-item .upload-container {
    display: block; }
  .career-form .form-container .form-item .item-file {
    margin-left: 0;
    margin-top: 4px; } }

@media (min-width: 1600px) {
  .related-news-list .related-news-item .related-item-content img {
    height: 300px; }
  .news-list .news-item .image img {
    height: 300px; }
  .card-library .card-image {
    height: 300px; }
  .news-list .product-item .image img {
    height: 230px; }
  .news-list .product-item .content .excerpt {
    text-transform: uppercase; } }

@media only screen and (max-width: 1440px) {
  .related-news-list .related-news-item .related-item-content img {
    height: 230px; } }

@media only screen and (max-width: 992px) {
  .news-list .news-item .image img {
    height: 230px; }
  .related-news-list {
    display: flex;
    margin-left: -15px;
    margin-right: -15px; }
    .related-news-list .related-news-item {
      width: 33.33%;
      padding: 0 15px; }
      .related-news-list .related-news-item .related-item-content img {
        height: 150px; }
  .gallery-list {
    margin-top: 30px; }
  .card-library .card-image {
    height: 230px; } }

@media only screen and (max-width: 475px) {
  .news-list .news-item {
    margin-bottom: 25px; }
  .related-news-list {
    display: block;
    margin-left: 0;
    margin-right: 0; }
    .related-news-list .related-news-item {
      width: 100%;
      padding: 0; }
      .related-news-list .related-news-item .related-item-content img {
        height: 220px; }
  .gallery-list .gallery-item {
    margin-bottom: 25px; }
  .gallery-list .video-gallery {
    margin-bottom: 25px; } }

.section-container {
  padding-top: 76px; }
  .section-container .section-content {
    position: relative;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0; }

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

/* width */
body::-webkit-scrollbar {
  width: 6px;
  border-radius: 100px; }

/* Track */
body::-webkit-scrollbar-track {
  background: #f1f1f1; }

/* Handle */
body::-webkit-scrollbar-thumb {
  background-color: #222528;
  border-radius: 10px; }

/* Handle on hover */
body::-webkit-scrollbar-thumb:hover {
  background-color: #222528; }