@charset "UTF-8";

/* ------------------------------------------------------------------------------------------------------------
|  Import CSS  |
------------------------------------------------------------------------------------------------------------ */
/*-------- Import Font ------*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Prompt:300,300i,400,400i,500,500i,600,600i,700,700i&display=swap');
/*-------- Light Slider ------*/
@import url('lightslider.css');
/*-------- Fancybox ------*/
@import url('jquery.fancybox.min.css');
/*-------- Chosen ------*/
@import url('chosen.css');
/*-------- Owl ------*/
@import url('owl.carousel.min.css');

/* ------------------------------------------------------------------------------------------------------------
|  Reset  |
------------------------------------------------------------------------------------------------------------ */
html:lang(en) body { font-family: 'Roboto Condensed','Prompt'; }
html:lang(th) body { font-family: 'Roboto Condensed','Prompt'; font-weight: 400; font-size: 15px; }

* { margin: 0;/* padding: 0; */list-style-type: none; text-decoration: none; border: none; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box; }
::selection { color:#fff; background:#333; }
::-moz-selection { color:#fff; background:#333;}
::-webkit-input-placeholder {  }
::-moz-placeholder {  } 
:-ms-input-placeholder { } 
input:-moz-placeholder { }
input,
textarea,
button,
select,
a:hover,a,a:focus,a:active { -webkit-tap-highlight-color: rgba(0,0,0,0); }
input { font-family: 'Roboto Condensed','Prompt'; color: var(--color-dropblack); font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
input[type="text"], input[type="password"], input[type="email"], textarea, select { height: 40px; padding: 10px; border: 1px solid var(--color-dropdfdf); background: var(--color-white); border-radius: 0; }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus, select:focus { border: 1px solid var(--color-dropblue) }
button { height: 100%; font-family: 'Roboto Condensed','Prompt'; font-size: 16px; font-weight: 500; line-height: 1; text-transform: uppercase; color: var(--color-white); background: var(--color-blue); cursor: pointer; -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 { background: var(--color-sky); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
textarea,select,option { font-family: 'Roboto Condensed','Prompt'; color: var(--color-dropblack); -webkit-appearance: none; -moz-appearance: none; appearance: none; webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
select { height: 40px; padding: 6px 18px 6px 10px; font-size: 16px; border-radius: 0; background: var(--color-white) url(../images/icon-select.svg) no-repeat right center;  }
textarea { width: 100%; }
[type=file] { position: absolute; filter: alpha(opacity=0); opacity: 0; width: 100%; left: 0; top: 0; }
[type=file] + label { position: relative; width: 100%; height: 40px; padding: 6px 10px; margin: 0; left: 0;  text-align: left; border: 1px solid var(--color-dropdfdf); top: 0;  background: var(--color-white); color: var(--color-dropblack); font-size: 16px; font-weight: normal; cursor: pointer;  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
[type=file] + label:hover { border: 1px solid var(--color-dropblue);  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

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,font,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,caption,tfoot,{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1.2}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0; }

html, body { height: 100%; }

body { 
--color-blue: #162570;
--color-dropblue: #8b92b8;
--color-drop2blue: #5c6073;
--color-sky: #188cde;
--color-dropsky: #4bb4ff;
--color-drop2sky: #a2c9e4;
--color-white: #fff;
--color-whiteblue: #c8cde2;
--color-dropwhite: #f6f6f8;
--color-dropwhitefooter: #ededf3;
--color-dropblack: #444;
--color-dropgray:#ededf3;
--color-drop2gray: #8fa0ab;
--color-hoverborder: #c5c5ce;
--color-drop555: #555;
--color-drop777: #777;
--color-drop999: #999;
--color-dropdfdf: #e4e4ea;
--color-8484: #84848f;
--color-eee: #eee;
--color-drop-gray-fill: #e0e0e6; font-family: 'Roboto Condensed','Prompt', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 15px; color: var(--color-dropblack); line-height: 1.5;  background: var(--color-white); -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }

a { display: block; color: var(--color-blue); -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 { color: var(--color-sky); }

a:hover img {/* -webkit-transform: scale(1.05); transform: scale(1.05);*/ }
img { display: block; width: 100%; object-fit: cover; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

h1, h2, h3, h4, h5, h6 { position: relative; padding: 15px 0;  line-height: 1.2; font-weight: 700; text-transform: uppercase;  }

h1 { padding-bottom: 30px; font-size: 70px; font-weight: 700; }
h1 span { font-weight: 300; }
h2 { font-size: 46px; }
h2 span { font-weight: 300; }
h3 { font-size: 30px; }
h3 span { font-weight: 300; }
h4 { font-size: 24px; }
h4 span { font-weight: 300; }
h5 { font-size: 20px; }
h5 span { font-weight: 300; }
h6 { font-size: 18px; }
h6 span { font-weight: 300; }

p { padding: 10px 0; }

section { position: relative; width: 100%; overflow-x: hidden; }

figure { position: relative; }
figure:before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0); left: 0; top: 0;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 1 }
a:hover figure:before { background: rgba(0,0,0,.3); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

time { position: relative; font-size: 14px;  text-transform: uppercase; color: var(--color-drop2gray); z-index: 1 }

label { display: inline-flex; padding-bottom: 5px; }

/* ------------------------------------------------------------------------------------------------------------
|  All  |
------------------------------------------------------------------------------------------------------------ */
.warpper { display: flex; position: relative; margin: 0 auto; width: 100%; max-width: 1680px; height: inherit; padding: 0 30px; }

.title { display: flex; justify-content: center; position: relative; padding-bottom: 60px; line-height: 1; text-transform: uppercase; color: var(--color-blue) }
.title h1 { font-size: 60px;  padding: 0; }
.title h1 span { color: var(--color-sky); font-weight: 300; }
.title h2 { padding: 0; }
.title h2 span { color: var(--color-sky); font-weight: 300; }
.title h3 { padding: 0; }
.title h3 span { color: var(--color-sky); }

.title-detail { text-transform: uppercase; color: var(--color-blue); }

.cover { height: 360px; background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; }
.cover:before { content: ''; position: absolute; width: 50%; height: 40px; left: 0; bottom: 0; background: var(--color-blue) }
.cover:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(22,37,112,0.35); }
.cover main { position: relative; display: flex; align-items: flex-end; width: 100%; padding: 50px 0; z-index: 1; }
.cover .title { margin-left: auto; color: var(--color-white); padding-bottom: 15px; }
.cover .navigation { display: flex; flex-wrap: wrap; padding-bottom: 25px; font-size: 14px; }
.cover .navigation a { color: var(--color-white) }
.cover .navigation span { position: relative; }
.cover .navigation span:first-child { padding-right: 10px; }
.cover .navigation span:nth-child(2) { padding-left: 40px; }
.cover .navigation span:nth-child(2):before { content: ''; position: absolute; width: 10px; height: 1px; background: var(--color-white); top: 50%; left: 0; }
.cover .navigation span:nth-child(2):after { content: ''; position: absolute; width: 20px; height: 1px; background: var(--color-white); top: 50%; left: 10px; }
.cover .navigation span:nth-child(2) { text-transform: uppercase; }
.cover .navigation span:nth-child(3) { padding-left: 30px; }
.cover .navigation span:nth-child(3) a { min-width: 30px;max-width: 200px; vertical-align: middle;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover .navigation span:nth-child(3):before { content: ''; position: absolute; width: 10px; height: 1px; background: var(--color-white); top: 50%; left: 10px; }
.cover .navigation span:nth-child(4) { padding-left: 30px; }
.cover .navigation span:nth-child(4) a { min-width: 30px;max-width: 200px; vertical-align: middle;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover .navigation span:nth-child(4):before { content: ''; position: absolute; width: 10px; height: 1px; background: var(--color-white); top: 50%; left: 10px; }
.cover .navigation .icon-home { display: inline-flex; width: 20px; height: 20px; background: url(../images/icon-home.svg) no-repeat center; background-size: 100%; }

.select-filter { display: flex; flex-wrap: wrap; width: 100%; position: relative; padding-bottom: 30px; z-index: 2 }
.select-filter select { min-width: 200px; }
.select-filter .chosen-container-single .chosen-single { border: 1px solid var(--color-dropdfdf); }
.select-filter .chosen-container-single .chosen-single:hover { border: 1px solid var(--color-dropblue) }
.select-filter .chosen-container:hover .chosen-single { border: 1px solid var(--color-dropblue); }
.select-filter .chosen-container .chosen-results li { padding: 10px 6px !important; }
.select-filter .chosen-container-single .chosen-drop { border: 1px solid var(--color-dropblue); border-top: none !important; }
.select-filter .mini-class { min-width: 150px; }

/* ------------------------------------------------------------------------------------------------------------
|  Header Bar  |
------------------------------------------------------------------------------------------------------------ */
.header-less  { height: 100px !important; background: rgba(255,255,255,1) !important; -webkit-box-shadow: 0 -2px 5px 0 rgba(0,0,0,.5) !important; -moz-box-shadow: 0 -2px 5px 0 rgba(0,0,0,.5) !important;  box-shadow: 0 -2px 5px 0 rgba(0,0,0,.5) !important; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;  }
.header-less header figure { width: 70px !important; }
.header-less nav li a { color: var(--color-dropblack) !important; }
.header-less nav li:hover > a { color: var(--color-sky) !important }
.header-less li a:hover { color: var(--color-sky) !important; }
.header-less li a.current { color: var(--color-dropblack) !important;  }
.header-less .lang a path { fill:  var(--color-dropblack) !important; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.header-less .lang a:hover path { fill:  var(--color-sky) !important; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.header-less .lang a { color: var(--color-dropblack) !important }
.header-less .lang a:hover { color: var(--color-sky) !important }

.header-fixed { position: fixed; display: flex; flex-wrap: wrap; width: 100%; height: 160px; background: rgba(255,255,255,0); -webkit-box-shadow: 0 -2px 5px 0 rgba(0,0,0,0);  -moz-box-shadow: 0 -2px 5px 0 rgba(0,0,0,0);  box-shadow: 0 -2px 5px 0 rgba(0,0,0,0);  overflow: inherit;  z-index: 9999; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;  }
.header-fixed .warpper { padding-top: 0; padding-bottom: 0; }

.header-fixed header { display: flex; width: 90px; height: 100%; z-index: 9;  }
.header-fixed header h1 { position: relative; width: 100%; height: 100%; padding: 0; line-height: 1;  }
.header-fixed header h1 a { display: inline-block; position: relative; width: 100%; height: 100%;  }
.header-fixed header figure { position: relative; display: inline-block; width: 100%;  height: 100%; vertical-align: middle; -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
.header-fixed header figure:before { display: none; }
.header-fixed header img { position: absolute; width: 100%; left: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; margin-left: auto; -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease;  transition: all 0.2s ease; }
.header-fixed header span { display: inline-block; vertical-align: middle; padding-left: 15px; }

.header-fixed nav { display: flex; align-items: center; margin-left: auto; position: relative; width: auto; height: 100%; padding-right: 100px; z-index: 8; }
.header-fixed nav ul { display: flex; align-items: center; }
.header-fixed nav li { display: flex; align-items: center; position: relative; height: 100%; padding-left: 40px; text-align: center; }
.header-fixed nav li a { display: flex; align-items: center; position: relative; height: 100px; color: var(--color-white);  font-size: 16px; text-transform: uppercase; font-weight: 500; line-height: 1.2; vertical-align: middle;  }
.header-fixed nav li a:hover { color: var(--color-white); }
.header-fixed nav li a.current { position: relative; color: #fff;  }
.header-fixed nav li a span { display: flex; align-items: center; position: relative; height: 100%; }
.header-fixed nav li a span:before { content: ''; position: absolute; width: 0%; height: 4px; left: 0; bottom: 0; margin-top: auto; background: var(--color-sky); -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;  transition: all 0.3s ease; }
.header-fixed nav li a:hover span:before { width: 100%; -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;  transition: all 0.3s ease;  }
.header-fixed nav li a.current span:before { width: 100%; -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;  transition: all 0.3s ease;  }
.header-fixed nav li span { position: relative;  width: 100%; vertical-align: middle; z-index: 1; }

.header-fixed nav ul dl { visibility: hidden; opacity: 0; position: absolute; min-width: 280px; padding: 15px; top: 100%; left: 40px; background: var(--color-blue) ; -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 999; }
/*.header-fixed nav ul dl:after { content:""; position: absolute; width: 0; height: 4px;  bottom: 100%; left: 0; background: var(--color-sky); pointer-events: none; -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;  transition: all 0.3s ease;   }
.header-fixed nav ul li:hover dl:after { width: 50%; -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;  transition: all 0.3s ease;   }*/

.header-fixed nav ul dl dt { position: relative; width: 100%; height: inherit; padding: 2px; text-align: left; }
/*.header-fixed nav ul dl dt:before { content:''; position: absolute; width: 6px; height: 6px; border: 2px solid rgba(255,255,255,.5); border-radius: 50%; left: 3px; top: 12px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.header-fixed nav ul dl dt:hover:before { border: 2px solid rgba(255,255,255,1); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }*/
.header-fixed nav ul dl a { height: inherit; padding: 4px 10px ; color: var(--color-white) !important; text-transform: inherit !important; font-size: 16px; font-weight: 400 !important; overflow: hidden; background: none;  }
.header-fixed nav ul dl a:hover,
.header-fixed nav ul dl a.current { color: var(--color-sky) !important; background:none; }
.header-fixed nav ul li:hover > dl { visibility: visible; opacity: 1; -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.header-fixed nav ul li:hover > a { color: var(--color-white) }
.header-fixed nav ul li:hover > a span:before { width: 100%; }

.header-fixed aside { display: flex; flex-wrap: wrap; margin-left: auto; width: auto; align-items: center; }

.header-less .lang { top: 5px !important; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;  }
.header-fixed .lang { position: absolute; top: 15px; right: 30px; z-index: 99999; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;  }
.header-fixed .lang ul {  display: flex; flex-wrap: wrap; justify-content: center; }
.header-fixed .lang ul li { display: flex; align-items: center; justify-content: center; position: relative; padding: 0 6px; }
.header-fixed .lang ul li:last-child { padding-right: 0; }
.header-fixed .lang a { display: flex; justify-content: center; align-items: center; width: 25px; height: 30px;  font-size: 15px; text-transform: uppercase; font-weight: 500; line-height: 1.2; color: var(--color-white) }
.header-fixed .lang svg { width: 16px; height: 16px; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; }
.header-fixed .lang a path { fill:  var(--color-white); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
/*.header-fixed .lang a:hover path { fill: var(--color-sky); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }*/

.header-fixed .social span { position: relative;  width: 100%; height: 100%; vertical-align: middle; z-index: 1; }
.header-fixed .social a { position:relative; display: table-cell; height: 100%; font-weight: 400; font-size: 20px; vertical-align: middle; }
.header-fixed .social a:hover,.header-fixed .social:hover { color: #555; }
.header-fixed .show-top-social:hover > .top-social { visibility: visible; opacity: 1; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }

.header-fixed .top-social { visibility: hidden; opacity: 0; position: absolute; width: 40px; top: 100%; left: -50%; right: -50%; margin-left: auto; margin-right: auto; padding: 5px; z-index: 1;  background: var(--color-dropgray); border-radius: 4px; box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
.header-fixed .top-social:after { content:""; position: absolute; width: 0; height: 0;  bottom: 100%; left: 0; right: 0; margin-left: auto; margin-right: auto; border: solid transparent; pointer-events: none; border-bottom-color: var(--color-dropgray); border-width: 4px; }
.header-fixed .top-social dl { }
.header-fixed .top-social dt { display: flex; align-items: center; justify-content: center; width: 100%; padding: 4px 0; }
.header-fixed .top-social a { width: 25px; height: 25px; }

.icon-svg a {display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; background: var(--color-blue); color: var(--color-white); border-radius: 50%; }
.icon-svg a path { fill:  var(--color-white)!important; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.icon-svg svg { width: 15px !important; height: 15px !important; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; }

.link-fb a:hover { background: #4267b2; }
.link-yt a:hover { background: #fe0000; }
.link-tw a:hover { background: #1da1f3; }
.link-li a:hover { background: #00b900; }

.header-less .lang .top-social a path { fill: var(--color-white) !important; }

.header-full { background: rgba(255,255,255,1) !important; }
.header-full nav li a { position: relative; display: table-cell; height: 100%; color: #333 !important; font-size: 18px; text-transform: uppercase; font-weight: 500; vertical-align: middle;  }
.header-full li a:hover { color: #0089eb !important; }
.header-full li a.current { color: #0089eb !important;  }
.header-full nav li a span:before { opacity: 0 !important; content: ''; position: absolute; width: 0; height: 1px; left: 0; right: 0; bottom: -10px; margin-top: auto; margin-left: auto; margin-right: auto; background: #1b1464; -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;  transition: all 0.3s ease; }


/* ------------------------------------------------------------------------------------------------------------
|  Nav Mobile  |
------------------------------------------------------------------------------------------------------------ */
.open-nav { opacity: 1; visibility: visible; right: 0 !important; transition-timing-function: cubic-bezier(0.76, 0.22, 0.38, 0.9); transition-duration: 0.5s; webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; }
.show-nav { top: 0 !important; background: #ddd; -webkit-transition: all 0.8s cubic-bezier(1, .1, .2, 1); -moz-transition: all 0.8s cubic-bezier(1, .1, .2, 1); -o-transition: all 0.8s cubic-bezier(1, .1, .2, 1); transition: all 0.8s cubic-bezier(1, .1, .2, 1);}

.list-nav {  display: none; float: left; position: relative; width: 115px; height:50px; margin-left: 5px; text-align: center; text-transform: uppercase; background: #fff; }
.list-nav a { display: inline-table; position: relative; width: 100%; height: 100%; color: #333; padding: 6px 0; font-size:16px; font-weight: 500; cursor: pointer; }

.current-nav { background: #333; }
.current-nav a { color: #fff; }
.current-nav .menu-icon::before { background: #fff; }

.nav { display: flex; position: relative; height: 40px; z-index: 9999; cursor: pointer;  }
.nav a { display: flex; flex-wrap: wrap; align-items: center; position: relative; width: 100%; height: 100%; }

.gray-menu .menu-icon.is-clicked::before,.gray-menu .menu-icon.is-clicked::after { background: var(--color-sky)  }

.header-less .menu-icon, .header-less .menu-icon::before, .header-less .menu-icon::after { background: var(--color-sky)  }
.less-nav .nav-mobile:before { height: 100px !important; -webkit-transition: all 0.8s cubic-bezier(1, .1, .2, 1); -moz-transition: all 0.8s cubic-bezier(1, .1, .2, 1); -o-transition: all 0.8s cubic-bezier(1, .1, .2, 1); transition: all 0.8s cubic-bezier(1, .1, .2, 1); }

.menu-icon { position: relative; right: 0; width: 30px; height: 2px; background-color: var(--color-white); -webkit-transition: background-color 0.3s;-moz-transition: background-color 0.3s; transition: background-color 0.3s;}
.menu-icon::before, .menu-icon::after { content: ''; width: 100%; height: 100%; position: absolute; background-color: var(--color-white); right: 0;-webkit-transition: -webkit-transform .3s, top .3s, background-color 0s; -moz-transition: -moz-transform .3s, top .3s, background-color 0s;  transition: transform .3s, top .3s, background-color 0s;}
.menu-icon::before { top: -8px; }
.menu-icon::after { top: 8px; }
.menu-icon.is-clicked { background-color: rgba(255, 255, 255, 0); }
.menu-icon.is-clicked::before { background: var(--color-blue); top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);-o-transform: rotate(45deg); transform: rotate(45deg); }
.menu-icon.is-clicked::after {  background: var(--color-blue); top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.menu-text { position: relative; margin-right: auto; padding-right: 8px; color: var(--color-white);  font-size: 16px; text-transform: uppercase; }
.gray-menu .menu-text { color: var(--color-dropblack) }

.nav-overay { opacity:0; visibility:hidden; }

.nav-overay {  position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.5); z-index: 888; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}
.active-nav-overay  { opacity: 1; visibility: visible; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }

.nav-mobile { position: fixed; width: 100%; height: 100%; padding: 0; margin: 0; text-align: center; top: -100%; right: 0; overflow: hidden; z-index: 999; -webkit-transition: all 0.8s cubic-bezier(1, .1, .2, 1); -moz-transition: all 0.8s cubic-bezier(1, .1, .2, 1); -o-transition: all 0.8s cubic-bezier(1, .1, .2, 1); transition: all 0.8s cubic-bezier(1, .1, .2, 1); }
.nav-mobile:before { content: ''; position: absolute; width: 100%; height: 160px; background: var(--color-sky); top: 0; left: 0; z-index: 1; -webkit-transition: all 0.8s cubic-bezier(1, .1, .2, 1); -moz-transition: all 0.8s cubic-bezier(1, .1, .2, 1); -o-transition: all 0.8s cubic-bezier(1, .1, .2, 1); transition: all 0.8s cubic-bezier(1, .1, .2, 1); }
.nav-mobile .warpper { display: block; padding-top: 0; padding-bottom: 0; }

.nav-mobile aside { position: fixed; width: 100%; height: 100%; padding-top: 160px; overflow: auto; background: var(--color-blue); }
.nav-mobile aside ul { }
.nav-mobile aside ul li { position: relative; padding: 0; text-align: left; }
.nav-mobile aside ul li.menu { position: relative; }
.nav-mobile aside ul li.menu span { position: relative; width: 100%; display: inline-flex; padding: 0 0 5px 0; }
.nav-mobile aside ul li a { display: inherit; padding: 0; ; font-size: 18px; font-weight: 500; text-transform: uppercase; }
.nav-mobile aside ul li a.current { color: var(--color-sky); }
.nav-mobile aside ul li a:hover {  }
.nav-mobile aside ul li span { color: var(--color-sky); font-weight: 700; }

.nav-mobile-fix { position: relative; width: 100%; padding: 40px 0; overflow: hidden; }

.nav-mobile-list { display: block;  -webkit-columns: 4; -moz-columns: 4; columns: 4; }
.nav-mobile aside ol { padding: 0 0 15px 0 }
.nav-mobile aside ol li { width: 100%; padding: 3px 10px; }
.nav-mobile aside ol li a { display: inline-block; text-transform: inherit; color: var(--color-white); font-weight: 400; font-size: 15px; line-height: 1; }
.nav-mobile aside ol li a.current { color: var(--color-sky); }
.nav-mobile aside ol li a:hover { color: var(--color-dropsky) }
.nav-mobile aside ol li dl { position: relative;  }
.nav-mobile aside ol li dl dt { position: relative; padding: 0 0 0 10px; }
.nav-mobile aside ol li dl dt:before { content: ''; position: absolute; width: 4px; height: 4px; background: var(--color-drop2gray); left: 0; top: 9px; border-radius: 50%; }
.nav-mobile aside ol li dl a { color: var(--color-drop2gray);  }

.nav-mobile aside ul li .toggle-subnav { display: block; padding-bottom: 20px; }
.nav-mobile aside ul li .toggle-subnav a {  }

.subplus { display: none; position: absolute; width: 14px; height: 14px; right: 0; top: 7px; background: url(../images/icon-arrow-down.svg) no-repeat center; background-size: 100%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;  }
.subplus-rotate { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;  }

.nav-mobile .break { -webkit-column-break-inside: avoid;  page-break-inside: avoid; break-inside: avoid; }

.toggle--sub .pc-nonexpend { display: block; }
.toggle--sub .mobile-expend { display: none; }

/* ------------------------------------------------------------------------------------------------------------
|  Banner  |
------------------------------------------------------------------------------------------------------------ */
.banner { position: relative; height: 100%; display: flex; }
.banner p { font-size: 19px; }
.banner main { display: flex; align-items: center; position: relative; width: 100%; height: 100%; }
.banner article { position: absolute; width: 50%; padding-right: 200px; color: #fff; right: 0; z-index: 1 }
.banner article h1 { padding: 0 0 15px 0; color: var(--color-white); text-transform: uppercase; line-height: 1 }
.banner .background { position: relative; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; }
.banner .background:before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(22,37,112,0.4); }

/* Slider */
 .lSSlideOuter .lSPager.lSpg { position: absolute; display: flex; flex-wrap: wrap; width: 50%; height:50px; margin-top: 0; bottom: 30px; right: 0; z-index: 9 }

.lSSlideOuter .lSPager.lSpg > li { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; position:relative; width: 30px; height: 30px;  }
.lSSlideOuter .lSPager.lSpg > li a { position: absolute; margin:auto; width: 12px;  height: 12px; text-indent: -999em; top:0; bottom:0; left:0; right:0; z-index: 99;  background-color: var(--color-white); border-radius: 50%; z-index:3;  overflow: hidden; }
.lSSlideOuter .lSPager.lSpg > li a:hover { background: var(--color-sky) }
.lSSlideOuter .lSPager.lSpg > li.active a { background: var(--color-blue); }

.lSAction { position: absolute; display: flex; flex-wrap: wrap; justify-content: center; width: 100px; height: 30px; bottom: 30px; right: 50px; z-index: 99 } 
.lSAction .link-text { display: flex; flex-wrap: wrap; justify-content: center; }
.lSAction .link-text a { width: 50px; height: 30px; cursor:pointer; }
.lSAction .link-text a:hover {  }
.lSAction .lSPrev { background: url(../images/icon-back.svg) no-repeat center; opacity: .4; }
.lSAction .lSPrev:hover { opacity: 1; }
.lSAction .lSNext { background: url(../images/icon-next.svg) no-repeat center; opacity: .4; }
.lSAction .lSNext:hover { opacity: 1; }

/* ------------------------------------------------------------------------------------------------------------
|  Home  |
------------------------------------------------------------------------------------------------------------ */
.home-about {  }
.home-about .title { width: 100% }
.home-about main { position: relative; width: 100%; }
.home-about main:before { content: ''; position: absolute; width: 50%; height: 100%; background: var(--color-blue); right: 0; top: 0; }
.home-about main article { position: relative; display: flex; width: 100%; padding-bottom: 100px; }
.home-about main figure { position: relative; margin-left: auto; }
.home-about main figure img { position: relative; z-index: 1 }
.home-about main .text { position: absolute; width: 580px; left: 120px; top: 100px; z-index: 1 }
.home-about main .text h2 { color: var(--color-blue) }

.home-vdo { padding: 0 0 100px 0; }
.home-vdo main { margin: 0 auto; width: 100%; max-width: 1170px; }
.home-vdo main video { cursor: pointer; }

.home-successful {  }
.home-successful main { position: relative; width: 100%; }
.home-successful main:before { content: ''; position: absolute; width: 50%; height: 100%; background: var(--color-blue); left: 0; top: 0; }
.home-successful article { position: relative; margin: 0 auto; width: 100%; padding: 60px 0; }
.home-successful article:after { content: ''; position: absolute; width: 50%; height: 100%; background: var(--color-dropwhite); right: 0; top: 0; }
.home-successful article ul { display: flex; flex-wrap: wrap; position: relative; z-index: 1 }
.home-successful article ul li { display: flex; align-items: center; position: relative; width: 50%; padding-top: 10px; padding-bottom: 10px; font-size: 24px; font-weight: 300; text-transform: uppercase; }
.home-successful article ul li:nth-child(odd) { color: var(--color-white); justify-content: flex-end; text-align: right; line-height: 1; padding-right: 150px; }
.home-successful article ul li:nth-child(odd):before { content: ''; position: absolute; width: 100px; height: 1px; background: var(--color-white); right: 0; top: 50%; }
.home-successful article ul li:nth-child(even) { color: var(--color-dropblack); padding-left: 150px; font-size: 40px; }
.home-successful article ul li:nth-child(even):before { content: ''; position: absolute; width: 100px; height: 1px; background: var(--color-blue); left: 0; top: 50%; }
.home-successful article ul li:nth-child(even) span { position: relative; padding-left: 25px; line-height: 1; font-weight: 300; }
.home-successful article ul li:nth-child(even) span:before { content: ''; position: absolute; width: 10px; height: 10px; background: var(--color-sky); border-radius: 50%; left: 0; top: 15px; }

.home-services {  }
.home-services main { position: relative; }
.home-services ul { display: flex; flex-wrap: wrap; }
.home-services li { width: 25%; }
.home-services .text { position: relative; display: flex; justify-content: center; align-items: center; padding: 15px 20px; z-index: 1; }
.home-services .text:after { content: ''; position: absolute; width: 100%; height: 0; background: var(--color-blue); left: 0; bottom: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.home-services .text h3 { z-index: 2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.home-services li a:hover .text:after { height: 120%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.home-services li a:hover h3 { color: var(--color-white);  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.home-services li figure { position: relative; }

.home-news { background: var(--color-dropwhite) }
.home-news ul { display: flex; flex-wrap: wrap; margin: 0 -30px; }
.home-news li { position: relative; width: 33.3333%; padding: 0 30px; }
.home-news li:last-child { display: none; }
.home-news .photo { position: relative;  }
.home-news .photo figure { position: relative; width: 100%; height: 0; padding: 32%; overflow: hidden; }
.home-news .photo img { object-fit: cover; position: absolute; height: 100%; width: 100%; top: 0; left: 0; margin: auto; }
.home-news .text { position: relative; padding-top: 17px; }
.home-news .text span { position: relative; display: flex; width: 100%; }
.home-news .text span:after { content: ''; position: absolute; width: 100%; height: 1px; background: var(--color-drop2gray); left: 0; top: 50%; }
.home-news .text span time { margin-left: 15px; padding: 0 15px; background: var(--color-dropwhite); }
.home-news h5 { text-transform: inherit; font-weight: 400; }

.home-training { }
.home-training main { display: flex; width: 100%; max-width: 1440px; margin: 0 auto; }
.home-training article { position: relative; display: flex; flex-wrap: wrap; align-items: center; width: 580px; padding: 80px 100px; color: var(--color-white); background: var(--color-blue); order: 1; }
.home-training figure { flex: 1; height: 100%; order: 2; overflow: hidden; }
.home-training figure img { position: absolute; width: 100%; height: 100%; top: 0; right: 0; }
.home-training h2 { padding-top: 0 }
.home-training p { color: var(--color-whiteblue);  }

.home-press { padding: 0; }
.home-press main { display: flex; width: 100%; max-width: 1440px; margin: 0 auto; }
.home-press article { position: relative; display: flex; flex-wrap: wrap; align-items: center; width: 580px; padding: 80px 100px;  background: var(--color-dropwhite); order: 2; }
.home-press figure { flex: 1; height: 100%; order: 2; overflow: hidden; }
.home-press figure img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.home-press figure:before { content: ''; position: absolute; width: 120px; height: 100%; left: inherit; right: 0; top: 0; background: var(--color-blue); z-index: 1; }
.home-press h2 { padding-top: 0; color: var(--color-blue) }
.home-press h2 span { color: var(--color-sky) }

.home-shortlink { }
.home-shortlink main { width: 100%; max-width: 1440px; margin: 0 auto; }
.home-shortlink ul { display: flex; flex-wrap: wrap; justify-content: space-around; flex-flow: row wrap; }
.home-shortlink li { padding: 0 20px }
.home-shortlink li h4 { padding-bottom: 0 }
.home-shortlink li p { padding-top: 10px; color: var(--color-whiteblue); }
.home-shortlink li svg { width: 80px; padding-top: 15px; }
.home-shortlink li a path { fill: var(--color-sky); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.home-shortlink li a:hover path { fill: var(--color-white); }
.home-shortlink li a { height: 100%; padding: 30px 60px; text-align: center; color: var(--color-white); background: var(--color-blue) }
.home-shortlink li a:hover { background: var(--color-sky) }

.home-certificate { background: var(--color-dropwhite) }
.home-certificate main { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding-bottom: 15px; }
.home-certificate main ul { display: flex; flex-wrap: wrap; justify-content: center; }
.home-certificate main li { width: 400px; padding: 0 30px; }
.home-certificate main li figure { position: relative; padding: 20px; background: var(--color-white) }
.home-certificate main li figure img { padding: 15px; border: 1px solid var(--color-dropdfdf) }
.home-certificate .lSSlideOuter .lSPager.lSpg { width: max-content; height: max-content; justify-content: center; bottom: -30px; ; left: 0; margin-left: auto; margin-right: auto; }
.home-certificate .lSSlideOuter .lSPager.lSpg > li a { background: var(--color-drop999) }
.home-certificate .lSSlideOuter .lSPager.lSpg > li a:hover { background: var(--color-sky) }
.home-certificate .lSSlideOuter .lSPager.lSpg > li.active a { background: var(--color-blue) }

/* ------------------------------------------------------------------------------------------------------------
|  About Us  |
------------------------------------------------------------------------------------------------------------ */
.about {  }

/*Company History*/
.about-company-history { position: relative; display: flex; position: relative; width: 100%; overflow-x: hidden; }
.about-company-history .title { justify-content: flex-end; }
.about-company-history .box-colum { width: 50%; position: relative; }
.about-company-history .right50 { width: 100%; max-width: 810px; padding: 160px 0 80px 100px }
.about-company-history header { margin-left: auto; }
.about-company-history figure { width: 100%; overflow: hidden; }
.about-company-history figure img {  }
.about-company-history .right-blue { position: relative; width: 100%; max-width: 810px; padding: 80px 0 80px 100px; color: var(--color-white); background: var(--color-blue); }
.about-company-history .right-blue:after { content: ''; position: absolute; width: 100%; height: 100%; background: var(--color-blue); top: 0; right: -50%; z-index: 0; }
.about-company-history aside { width: 100%; max-width: 1170px; margin: 0 auto; padding: 80px 0 }

/*Milestones*/
.about-milestones { position: relative; width: 100%; /*background: var(--color-dropwhite) */}
.about-milestones main { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: 80px 0 0 0; }
.about-milestones .title { justify-content: flex-start; } 
.about-milestones .events-content h3 { text-align: center; text-transform: inherit; font-weight: 400; color: var(--color-blue); }
.about-milestones .events-content time { display: block; padding: 10px 0; text-align: center; margin: 0 auto; color: var(--color-sky); }
.about-milestones .events-content li article { position: relative; width: 100%; max-width: 960px; min-height: 400px; margin: 0 auto; padding: 60px 0 80px 0; z-index: 1 }
.about-milestones .events-content li .box-detail { position: relative; width: 100%; }
/*.about-milestones .events-content li .box-detail:after { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.80); left: 0; top: 0 }*/
.about-milestones-timeline { position: relative; overflow-x: hidden; }

/*Vision*/
.about-vision { width: 100%; max-width: 1170px; margin: 0 auto; padding: 60px 0 }
.about-vision ul { display: flex; flex-wrap: wrap; }
.about-vision li { width: 100%; padding: 30px 0; border-bottom: 1px solid var(--color-dropdfdf) }
.about-vision li:last-child { border-bottom: none; }
.about-vision article { display: flex; flex-wrap: wrap; }
.about-vision article h2 { width: 35%; padding-top: 8px; text-transform: uppercase; color: var(--color-blue); }
.about-vision article h5 { width: 65%; }

/*Policy*/
.about-policy { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: 80px 140px; color: var(--color-white); background: var(--color-blue); overflow-x: hidden; }
.about-policy .title { padding-bottom: 30px; justify-content: flex-start; color: var(--color-white) }
.about-policy-list { position: relative; width: 100%; }
.about-policy-list ul { flex-flow: column wrap; columns: 2; margin: 0 -40px; padding: 0 !important; }
.about-policy-list li { position: relative; display: flex; padding: 20px 40px; list-style: none !important; }
.about-policy-list .des { position: relative;  padding: 20px 0 0 0; }
.about-policy-list .resp-tab-content { border-top: 1px solid var(--color-sky) }
.about-policy-list .resp-tabs-list dt { background: none; }
.about-policy-list span { position: absolute; margin-top: 5px; font-size: 24px; color: var(--color-sky) }
.about-policy-list span:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-whiteblue); right: -40px; top: 18px; }

/*Business Overview*/
.about-business-overview { position: relative; width: 100%; }
.about-business-overview .title { max-width: 1280px; width: 100%; margin: 0 auto; justify-content: flex-start; }
.about-business-overview-center { position: relative; width: 100%; }
.about-business-overview-center ul { display: flex; flex-wrap: wrap; padding: 0 !important; }
.about-business-overview-center li { position: relative; display: flex; width: 100%; padding: 5px 40px; list-style: none !important; }
.about-business-overview-center .des { position: relative; padding-left: 100px; }
.about-business-overview-center span { position: absolute; margin-top: 5px; font-size: 24px; color: var(--color-sky) }
.about-business-overview-center span:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-whiteblue); right: -40px; top: 18px; }
.about-business-overview-map { position: relative; width: 100%; max-width: 800px; min-height: 860px; margin: 0 auto; background: url(../images/about-thailand.png) no-repeat center; background-size: auto 100%; }

.about-business-overview .topcontent { width: 100%; max-width: 1280px; margin: 0 auto; margin-top: 60px; padding: 0 0 30px 0 }
.about-business-overview .inside-img { margin: 0 auto; width: 100%; max-width: 1280px; padding: 30px 0 }
.about-business-overview .inside-img figure { position: relative; }
.about-business-overview .inside-img figure:after { content: ''; position: absolute; width: 50%; height: 10px; background: var(--color-blue); right: 0; bottom: -10px; }
.about-business-overview .inside-content { width: 100%; max-width: 80%; }

/*Business Structure*/
.about-business-structure { position: relative; width: 100%; margin-top: 80px; padding: 100px 0; background: var(--color-dropwhite)  }
.about-business-structure .warpper { display: block; }
.about-business-structure .title { margin: 0 auto }
.about-business-structure article { position: relative; width: 100%; display: flex; }

/*Organizations Business Operation*/
.about-business-organizations { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: 100px 120px; }
.about-business-organizations .warpper { display: block; }
.about-business-organizations .title { position: relative; width: 100%; padding-bottom: 30px; justify-content: flex-start;  }
.about-business-organizations-list { position: relative; width: 100%; }
.about-business-organizations-list ul { flex-flow: column wrap; columns: 2; margin: 0 -40px; padding: 0 !important; }
.about-business-organizations-list li { position: relative; display: flex; padding: 20px 40px; list-style: none !important; }
.about-business-organizations-list .des { position: relative; padding-left: 100px; }
.about-business-organizations-list span { position: absolute; margin-top: 5px; font-size: 24px; color: var(--color-sky) }
.about-business-organizations-list span:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-whiteblue); right: -40px; top: 18px; }

/*Standards*/
.about-business-standards { position: relative; width: 100%; padding: 80px 0 100px 0; background: var(--color-dropwhite); }
.about-business-standards .warpper { display: block; }
.about-business-standards article { position: relative; width: 100%; }
.about-business-standards article dl.resp-tabs-list { justify-content: center; }

.about-business-standards .standards-list { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: 30px 0 }
.about-business-standards .standards-list ul { display: flex; flex-wrap: wrap; justify-content: center; margin: -20px; }
.about-business-standards .standards-list li { width: 25%; padding: 20px; text-align: center; }
.about-business-standards .standards-list li figure { position: relative; padding: 20px; background: var(--color-white) }
.about-business-standards .standards-list li figure img { padding: 15px; border: 1px solid var(--color-dropdfdf) }
.about-business-standards .motto { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 40px 0 20px 0 }
.about-business-standards .standards-list .lSSlideOuter .lSPager.lSpg { width: max-content; height: max-content; justify-content: center; bottom: -30px; ; left: 0; margin-left: auto; margin-right: auto; }
.about-business-standards .standards-list .lSSlideOuter .lSPager.lSpg > li a { background: var(--color-drop999) }
.about-business-standards .standards-list .lSSlideOuter .lSPager.lSpg > li a:hover { background: var(--color-sky) }
.about-business-standards .standards-list .lSSlideOuter .lSPager.lSpg > li.active a { background: var(--color-blue) }

.about-business-standards .carousel-standards .flickity-viewport { transition: height 0.2s; border-top: 1px solid var(--color-dropdfdf) }

/*Organizational*/
.about-organizational { width: 100%; max-width: 1480px; margin: 0 auto; overflow: hidden; }
.about-organizational .title { justify-content: flex-start; }
.about-organization-chart { position: relative; width: 100%; }
.about-organization-chart .level { display: flex; flex-wrap: wrap; position: relative; width: 100%; padding: 15px 0; }
.about-organization-chart .left-20 { left: 200px; }
.about-organization-chart .box-position { position: relative; width: 120px; }
.about-organization-chart .box-position i { position: relative; display: block; width: 120px; height: 140px; background: url(../images/icon-organization.png) no-repeat center; z-index: 1 }
.about-organization-chart .box-position .name { position: absolute; padding: 0 0 10px 15px; bottom: 80%; left: 100px; border-bottom: 1px solid var(--color-8484); background: var(--color-white) }
.about-organization-chart .box-position .name h5 { padding: 0; text-transform: inherit; font-weight: 400; }
.about-organization-chart .box-position .name .in-side { position: relative; width: max-content; line-height: 1.2 }
.about-organization-chart .box-position .name .in-side:before { content: ''; position: absolute; width: 20px; height: 1px; background: var(--color-8484); left: -68px; bottom: -36px; transform: rotate(-30deg) translate(40px, 0px); }
.about-organization-chart .box-position .name .in-side:after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--color-8484); left: -40px; bottom: -27px; }

.about-organization-chart .under { position: relative; }
.about-organization-chart .under-left-150:after { content: ''; position:  absolute; width: 150%; height: 4px; background: var(--color-dropdfdf); left: -100%; bottom: 30px; z-index: 0; }
.about-organization-chart .under-left-100:after { content: ''; position:  absolute; width: 100%; height: 4px; background: var(--color-dropdfdf); left: -50%; bottom: 30px; z-index: 0; }
.about-organization-chart .under-left-50:after { content: ''; position:  absolute; width: 50%; height: 4px; background: var(--color-dropdfdf); left: -10%; bottom: 30px; z-index: 0; }
.about-organization-chart .under-right-150:after { content: ''; position:  absolute; width: 150%; height: 4px; background: var(--color-dropdfdf); right: -100%; bottom: 30px; z-index: 0; }

.about-organization-chart .under-bottom-150:before { content: ''; position:  absolute; width: 4px; height: 160px; background: var(--color-dropdfdf); left: -10px; bottom: 0; z-index: 0; transform: rotate(-20deg) translate(50px, 160px);  }
.about-organization-chart .under-left-top:after { content: ''; position:  absolute; width: 4px; height: 180px; background: var(--color-dropdfdf); left: -125px; top: 0; z-index: 0; transform: rotate(-20deg) translate(100px, -35px);  }

.about-organization-chart .under-dotted-left-300:after { content: ''; position:  absolute; width: 300px; height: 4px; border-bottom: 4px dotted var(--color-dropdfdf); left: -250px; bottom: 30px; z-index: 0; }

.about-organization-chart .step-2 { padding-left: 60px; }
.about-organization-chart .step-3 { padding-left: 120px; }
.about-organization-chart .step-4 { padding-left: 180px; }
.about-organization-chart .step-5 { padding-left: 240px; }
.about-organization-chart .step-6 { padding-left: 300px; }
.about-organization-chart .step-7 { padding-left: 360px; }
.about-organization-chart .step-8 { padding-left: 420px; }

/*Board*/
.about-board { width: 100%; max-width: 1280px; margin: 0 auto; }
.about-board .title { justify-content: flex-start; }
.about-board-category { position: relative; width: 100%; padding: 60px 0 30px 0; }
.about-board-category ul { display: flex; flex-wrap: wrap; margin: -15px; }
.about-board-category li { width: 33.3333%; position: relative; padding: 15px; }
.about-board-category li .box { position: relative; width: 100%; height: 100%; background: var(--color-white) url(../images/bg-content-2.png) no-repeat top right; }
.about-board-category li a { position: relative; display: flex; flex-wrap: wrap; height: 100%; min-height: 170px; padding: 15px 30px 30px 30px; color: var(--color-blue); border: 1px solid var(--color-dropdfdf) }
.about-board-category li a:hover { background: var(--color-sky) ; color: var(--color-white); border: 1px solid var(--color-sky) }
.about-board-category li a:hover .btn-more { color: var(--color-white) }
.about-board-category li a:hover .btn-more:before { width: 60px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.about-board-category li h4 { display: block; width: 100%; text-transform: inherit; font-weight: 400 }
.about-board-category li .btn-more { position: relative; margin-top: auto; text-transform: uppercase; font-size: 15px; color: var(--color-sky); }
.about-board-category li .btn-more:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-blue); left: 110%; top: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.about-board-list { position: relative; width: 100%; padding: 30px 0; }
.about-board-list ul { display: flex; flex-wrap: wrap; margin: -15px; }
.about-board-list li { width: 25%; position: relative; padding: 15px; }
.about-board-list li .box { position: relative; width: 100%; height: 100%; text-align: center;  }
.about-board-list li a { display: inline-flex; position: relative; color: var(--color-blue); }
.about-board-list li a:hover { color: var(--color-sky); }
.about-board-list li h5 { display: block; padding-top: 20px; width: 100%; text-transform: inherit; font-weight: 400; padding-bottom: 0 }
.about-board-list li a:hover figure { background: var(--color-sky); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.about-board-list li figure { margin: 0 auto; width: 230px; height: 230px; background: var(--color-dropwhitefooter); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%); clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%); }
.about-board-list li figure:before { display: none; }
.about-board-list .img { display: flex; justify-content: center; width: 100%; }

.about-board-cover { display: flex; flex-wrap: wrap; position: relative; width: 100%; padding: 0 0 40px 0; align-items: center; background: url(../images/bg-content-3.png) no-repeat top right; }
.about-board-cover .box-cover { position: relative; }
.about-board-cover .box-cover figure { margin: 0 auto; width: 260px; height: 260px; background: var(--color-dropwhitefooter); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%); clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%); }
.about-board-cover .box-cover figure:before { display: none; }
.about-board-cover .box-name { position: relative; padding-left: 60px; }
.about-board-cover .box-name h3 { padding-bottom: 20px; text-transform: inherit; font-weight: 400; color: var(--color-blue); }
.about-board-cover .box-name h3:before { content: ''; position: absolute; width: 34px; height: 4px; background: var(--color-sky); bottom: 0; left: 0; }
.about-board-cover .box-name p { font-size: 24px; }

.about-board .authority-charter { position: relative; width: 100%; padding: 30px 0; }
.about-board .authority-charter ul { display: flex; flex-wrap: wrap; margin: -15px; }
.about-board .authority-charter li { width: 50%; position: relative; padding: 15px; }
.about-board .authority-charter li .box { position: relative; width: 100%; height: 100%; background: var(--color-white) url(../images/bg-content-2.png) no-repeat top right; }
.about-board .authority-charter li a { position: relative; display: flex; flex-wrap: wrap; height: 100%; min-height: 170px; padding: 15px 30px 30px 30px; color: var(--color-blue); border: 1px solid var(--color-dropdfdf) }
.about-board .authority-charter li a:hover { background: var(--color-sky) ; color: var(--color-white); border: 1px solid var(--color-sky) }
.about-board .authority-charter li a:hover .btn-more { color: var(--color-white) }
.about-board .authority-charter li a:hover .btn-more:before { width: 60px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.about-board .authority-charter li h4 { display: block; width: 100%; text-transform: inherit; font-weight: 400 }
.about-board .authority-charter li .btn-more { position: relative; margin-top: auto; text-transform: uppercase; font-size: 15px; color: var(--color-sky); }
.about-board .authority-charter li .btn-more:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-blue); left: 110%; top: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }


/* ------------------------------------------------------------------------------------------------------------
|  Services  |
------------------------------------------------------------------------------------------------------------ */
.services {  }
.service-slocan { position: relative; width: 100%; display: flex; justify-content: center; padding-bottom: 30px; }
.service-slocan h4 { text-transform: inherit; font-weight: 400; }
.services header { display: flex; width: 100%; justify-content: center; }
.services main { position: relative; width: 100%; }

.services-category { position: relative; width: 100%; }
.services-category ul { display: flex; flex-wrap: wrap; }
.services-category li { position: relative; overflow: hidden; }
.services-category .text { position: absolute; display: flex; justify-content: center; align-items: center; padding: 30px; top: 0; left: 0; bottom: 0; right: 0; }
.services-category .text h3 { color: var(--color-white); text-shadow: 1px 1px 2px rgba(0, 0, 0, .5); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 2 }
.services-category a .text:after { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(22,37,112,0.2); left: 0; bottom: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.services-category a:hover .text:after { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(22,37,112,0.4); left: 0; bottom: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.services-category a { height: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.services-category a:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); transition: 0.8s; }
.services-category figure { position: relative; width: 100%; height: 100%; }
.services-category figure img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; -webkit-transform: scale(1);  transform: scale(1); transition: 0.8s; }

.services-subcategory { position: relative; width: 100%; }
.services-subcategory ul { margin: -15px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.services-subcategory li { position: relative; padding: 15px; }
.services-subcategory li.item-1 { grid-row: 1/span 2; grid-column: span 2; }
.services-subcategory li.item-6 { grid-row: 3/span 1; grid-column: span 2; }
.services-subcategory li.item-11 { grid-column-start: 2; grid-column-end: 4; grid-row: 4/span 2; }

.services-subcategory article { position: relative; width: 100%; height: 100%; overflow: hidden; }
.services-subcategory .text { position: absolute; display: flex; justify-content: center; align-items: center; padding: 30px; top: 0; left: 0; bottom: 0; right: 0; }
.services-subcategory .text h4 { text-transform: inherit; font-weight: 400; color: var(--color-white); text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, .5); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 2 }
.services-subcategory a .text:after { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(22,37,112,0.2); left: 0; bottom: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.services-subcategory a:hover .text:after { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(22,37,112,0.4); left: 0; bottom: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.services-subcategory a { height: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.services-subcategory a:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); transition: 0.8s; }
.services-subcategory figure { position: relative; width: 100%; height: 100%; padding: 30%; }
.services-subcategory figure img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; -webkit-transform: scale(1);  transform: scale(1); transition: 0.8s; }

.services-des-subject { margin: 0 auto; position: relative; width: 100%; max-width: 1170px; padding-bottom: 60px; text-align: center; }
.services-des-subject h5:first-child { padding-top: 0; }
.services-des-subject p:first-child { padding-top: 0; }

.service-colum-two li { width: 50%; height: 560px; }
.service-colum-three li { width: 33.33333%; height: 560px; }
.service-colum-four li { width: 25%; }
.service-colum-four li:first-child { width: 50%; }
.service-colum-four li:nth-child(10) { width: 50%; }
.service-colum-four li:nth-child(12) { width: 50%; }
.service-colum-four li:nth-child(18) { width: 50%; }
.service-colum-four li:nth-child(26) { width: 50%; }
.service-colum-four li:nth-child(32) { width: 50%; }


/* ------------------------------------------------------------------------------------------------------------
|  Content  |
------------------------------------------------------------------------------------------------------------ */
.content-detail { display: flex; justify-content: space-between; margin: 0 auto; position: relative; width: 100%; }
.content-detail aside { width: 25%; max-width: 300px; }
.content-detail aside .other-link { padding: 15px 0; }
.content-detail aside .other-link li { padding: 0 0 1px 0; }
.content-detail aside .other-link a { padding: 10px 25px 12px 25px; line-height: 1.2; background: var(--color-dropwhite)  }
.content-detail aside .other-link a:hover { background: var(--color-dropwhitefooter)   }
.content-detail aside .other-link a.current { color: var(--color-sky); }
.content-detail article { flex: 1; width: 100%; padding-left: 120px; }
.content-detail article .motto { padding-bottom: 40px; }
.content-detail article .motto .title { text-transform: uppercase; }
.content-detail .title { justify-content: flex-start; padding-bottom: 40px; text-transform: initial; }
.content-detail .detail-cover { position: relative; margin-bottom: 40px; }
.content-detail .detail-cover:before { content: ''; position: absolute; width: 70%; height: 55%; background: var(--color-blue); right: -20px; bottom: -20px;  }
.content-detail .detail-cover p { padding: 0; }
.content-detail .detail-cover picture { position: relative; }
.content-detail .detail-cover figure { display: flex; justify-content: center; }

.content-submenu {  }
.content-submenu .subplus { display: block; position: absolute; width: 16px; height: 16px; right: 15px; top: 19px; background: url(../images/icon-arrow-down.svg) no-repeat center; background-size: 100%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;  }
.content-submenu .subplus-rotate { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;  }
.content-submenu .in-menu { position: relative; margin-bottom: 1px; }
.content-submenu .in-menu a { padding: 0 50px 0 25px; background: var(--color-dropwhitefooter) }
.content-submenu .in-menu a:hover { background: var(--color-dropwhite) }
.content-submenu .in-menu a.active { background: none; color: var(--color-blue) }
.content-submenu .inner { display: none; overflow: hidden; border-top: 1px solid var(--color-dropdfdf)  }
.content-submenu ul { padding: 0 15px 30px 40px; }
.content-submenu li:first-child { margin-top: 10px; }
.content-submenu li { position: relative; padding: 4px 0 }
.content-submenu li a { position: relative; display: inline-block; padding: 0 !important; line-height: 1.2; background: none !important }
.content-submenu li a:before { content: ''; position: absolute; width: 0; height: 1px; background: var(--color-sky); left: -12px; top: 12px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
.content-submenu li a.current:before { width: 6px;  }
.content-submenu li a:hover,.content-submenu li a.current { color: var(--color-sky); }
.content-submenu li a:hover:before { width: 6px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}


/* ------------------------------------------------------------------------------------------------------------
|  Investor  |
------------------------------------------------------------------------------------------------------------ */
.investor-relations { }
.investor-relations-tndt { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;  }
.investor-relations-tndt .title { justify-content: flex-start; }
.investor-relations main { display: flex; width: 100%; max-width: 1440px; margin: 0 auto; }
.investor-relations article { position: relative; display: flex; flex-wrap: wrap; align-items: center; width: 580px; padding: 80px 100px; color: var(--color-white); background: var(--color-blue); order: 1; }
.investor-relations figure { flex: 1; height: 100%; order: 2; overflow: hidden; }
.investor-relations figure img { position: absolute; width: 100%; height: 100%; top: 0; right: 0; }
.investor-relations h2 { padding-top: 0; padding-bottom: 0;}
.investor-relations p { color: #444444;  }

/* ------------------------------------------------------------------------------------------------------------
|  Sustainability  |
------------------------------------------------------------------------------------------------------------ */
.sustainability {  }
.sustainability .warpper { display: block; }

/*Sustainability TNDT*/
.sustainability-tndt { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;  }
.sustainability-tndt .title { justify-content: flex-start; }

/*Sustainability Award*/
.sustainability-award { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;  }
.sustainability-award .title { justify-content: flex-start; }

.sustainability-award .type-award { position: relative; width: 100%;  }
.sustainability-award .type-award ul { display: flex; flex-wrap: wrap; justify-content: center; }
.sustainability-award .type-award li { width: 50%; display: flex; justify-content: center; }
.sustainability-award .type-award li a { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; padding: 5px 50px; text-align: center; background: var(--color-dropwhitefooter); }
.sustainability-award .type-award li a:hover { background: var(--color-blue); color: var(--color-white) }
.sustainability-award .type-award li a.current { color: var(--color-white); background: var(--color-sky); }

.sustainability-award .year-award { position: relative; width: 100%; display: flex; flex-wrap: wrap; padding: 20px 0 } 
.sustainability-award .year-award .select-filter { padding-bottom: 15px; }

.sustainability-award .list-award { position: relative; width: 100%; }
.sustainability-award .list-award ul { display: flex; flex-wrap: wrap; margin: -20px }
.sustainability-award .list-award li { width: 25%; padding: 20px; }
.sustainability-award .list-award article { display: flex; flex-wrap: wrap; text-align: center; position: relative; width: 100%; height: 100%; background: var(--color-dropwhite); border: 1px solid var(--color-dropdfdf); }
.sustainability-award .list-award article a { display: block; width: 100%; }
.sustainability-award .list-award article figure { position: relative; width: 100%; height: 0; padding: 30%; background: var(--color-white) }
.sustainability-award .list-award article figure img { object-fit: cover; position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: auto; }
.sustainability-award .list-award article .des { flex: 1; padding: 15px 30px; }
.sustainability-award .list-award article h5 { text-transform: inherit; font-weight: 400; }

.detail-award { width: 100%; max-width: 600px; padding: 40px 30px; background: var(--color-white) url(../images/bg-content-2.png) no-repeat top left; }
.detail-award h3 { padding-top: 30px; text-transform: inherit; color: var(--color-blue); } 
.detail-award figure { position: relative; width: 100%; background: var(--color-white); }
.detail-award img { width: 320px; margin: auto; }

/*Sustainability Report*/
.sustainability-report { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;  }
.sustainability-report .title { justify-content: flex-start; }

.sustainability-report .list-report { position: relative; width: 100%; }
.sustainability-report .list-report ul { display: flex; flex-wrap: wrap; margin: -20px }
.sustainability-report .list-report li { width: 25%; padding: 20px; }
.sustainability-report .list-report article { display: flex; flex-wrap: wrap; text-align: center; position: relative; width: 100%; height: 100%; background: var(--color-dropwhite); border: 1px solid var(--color-dropdfdf); }
.sustainability-report .list-report article a { display: block; width: 100%; }
.sustainability-report .list-report article figure { position: relative; width: 100%; }
.sustainability-report .list-report article figure img { object-fit: cover;  }
.sustainability-report .list-report article .des { flex: 1; padding: 15px; }
.sustainability-report .list-report article h5 { text-transform: inherit; font-weight: 400; }

/*Sustainability Governance Download*/
.sustainability-governance { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;  }
.sustainability-governance .title { justify-content: flex-start; }
.sustainability-governance .download { position: relative; width: 100%; padding: 60px 0; }
.sustainability-governance .download ul { display: flex; flex-wrap: wrap; margin: -15px; }
.sustainability-governance .download li { width: 50%; position: relative; padding: 15px; }
.sustainability-governance .download li .box { position: relative; width: 100%; height: 100%; background: var(--color-white) url(../images/bg-content-2.png) no-repeat top right; }
.sustainability-governance .download li a { position: relative; display: flex; flex-wrap: wrap; height: 100%; min-height: 170px; padding: 15px 30px 30px 30px; color: var(--color-blue); border: 1px solid var(--color-dropdfdf) }
.sustainability-governance .download li a:hover { background: var(--color-sky) ; color: var(--color-white); border: 1px solid var(--color-sky) }
.sustainability-governance .download li a:hover .btn-more { color: var(--color-white) }
.sustainability-governance .download li a:hover .btn-more:before { width: 60px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.sustainability-governance .download li h4 { display: block; width: 100%; text-transform: inherit; font-weight: 400 }
.sustainability-governance .download li .btn-more { position: relative; margin-top: auto; text-transform: uppercase; font-size: 15px; color: var(--color-sky); }
.sustainability-governance .download li .btn-more:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-blue); left: 110%; top: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

/*Sustainability Governance Report*/
.sustainability-governance-report { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding-top: 30px; }
.sustainability-governance-report .title {  }
.sustainability-governance-report .detail-report { position: relative; width: 100%; padding: 30px 40px; border: 1px solid var(--color-dropdfdf); overflow: hidden; }
.sustainability-governance-report .detail-report .detail-report-fix { position: relative; width: 100%; height: 360px; margin-bottom: 60px; overflow: hidden; }
.sustainability-governance-report .detail-report .detail-report-fix:before { content: ''; position: absolute; width: 100%; height: 120px; background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); left: 0; bottom: 0; z-index: 2 }
.sustainability-governance-report .detail-report .button-readmore { position: absolute; bottom: 0; right: 0; left: 0; margin: auto; z-index: 3 }

/*Sustainability Achievement*/
.sustainability-governance-achievement { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding-top: 90px; }
.sustainability-governance-achievement .title { }
.sustainability-governance-achievement .detail-achievement { position: relative; width: 100%; padding: 30px 40px; border: 1px solid var(--color-dropdfdf); overflow: hidden; }
.sustainability-governance-achievement .detail-achievement img { max-width: 800px; margin: auto; }

/*Sustainability Conduct*/
.sustainability-conduct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;  }
.sustainability-conduct .title { justify-content: flex-start; }
.sustainability-conduct .download { position: relative; width: 100%; padding: 60px 0; }
.sustainability-conduct .download ul { display: flex; flex-wrap: wrap; margin: -15px; }
.sustainability-conduct .download li { width: 50%; position: relative; padding: 15px; }
.sustainability-conduct .download li .box { position: relative; width: 100%; height: 100%; background: var(--color-white) url(../images/bg-content-2.png) no-repeat top right; }
.sustainability-conduct .download li a { position: relative; display: flex; flex-wrap: wrap; height: 100%; min-height: 170px; padding: 15px 30px 30px 30px; color: var(--color-blue); border: 1px solid var(--color-dropdfdf) }
.sustainability-conduct .download li a:hover { background: var(--color-sky) ; color: var(--color-white); border: 1px solid var(--color-sky) }
.sustainability-conduct .download li a:hover .btn-more { color: var(--color-white) }
.sustainability-conduct .download li a:hover .btn-more:before { width: 60px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.sustainability-conduct .download li h4 { display: block; width: 100%; text-transform: inherit; font-weight: 400 }
.sustainability-conduct .download li .btn-more { position: relative; margin-top: auto; text-transform: uppercase; font-size: 15px; color: var(--color-sky); }
.sustainability-conduct .download li .btn-more:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-blue); left: 110%; top: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

/*Sustainability Conduct List*/
.sustainability-conduct-list { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding-top: 30px; }
.sustainability-conduct-list .title {  }
.sustainability-conduct-list .detail-list { position: relative; width: 100%; padding: 30px 40px; border: 1px solid var(--color-dropdfdf); overflow: hidden; }
.sustainability-conduct-list .detail-list .detail-list-fix { position: relative; width: 100%; height: 300px; margin-bottom: 60px; overflow: hidden; }
.sustainability-conduct-list .detail-list .detail-list-fix:before { content: ''; position: absolute; width: 100%; height: 120px; background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); left: 0; bottom: 0; z-index: 2 }
.sustainability-conduct-list .detail-list .button-readmore { position: absolute; bottom: 0; right: 0; left: 0; margin: auto; z-index: 3 }
.sustainability-conduct-list article { padding-bottom: 60px; }

/*Sustainability ESG*/
.esg-activity {  }
.activity-list ul { display: flex; flex-wrap: wrap; margin: -20px; }
.activity-list li { position: relative; width: 33.3333%; padding: 20px; }
.activity-list .photo { position: relative; }
.activity-list .photo figure { position: relative; width: 100%; height: 0; padding: 32%; overflow: hidden; }
.activity-list .photo img { object-fit: cover; position: absolute; height: 100%; width: 100%; top: 0; left: 0; margin: auto; }
.activity-list .text { position: relative; padding-top: 17px; }
.activity-list .text span { position: relative; display: flex; width: 100%; }
.activity-list .text span:after { content: ''; position: absolute; width: 100%; height: 1px; background: var(--color-drop2gray); left: 0; top: 50%; }
.activity-list .text span time { margin-left: 15px; padding: 0 15px; background: var(--color-white); }
.activity-list h5 { text-transform: inherit; font-weight: 400; }
.activity-latest { padding-top: 60px; }

.activity-detail {  }
.activity-detail main { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; }
.activity-detail .in-detail { width: 100%; padding-top: 5px; }
.activity-detail .in-detail h3 { padding-top: 0; text-transform: inherit; color: var(--color-blue); font-weight: 500; }
.activity-detail .time-share { display: flex; flex-wrap: wrap; align-items: center; padding-top: 20px; }
.activity-detail .time-share time { display: block; font-size: 16px; color: var(--color-dropblack) }

.activity-detail .photo-descrtion { display: flex; flex-wrap: wrap; width: auto; max-width: 800px; margin: 0 auto; padding-top: 40px; }
.activity-detail .photo-gallery { position: relative; width: 100%; padding-bottom: 60px; overflow: hidden; }
.activity-detail .photo-gallery:before { content: ''; position: absolute; width: 100%; height: 100%; background: var(--color-blue); left: 80px; top: 0; }
.activity-detail .photo img { display: block; width: 100%; }
.activity-detail article { width: 100%; padding-top: 30px; padding-left: 80px; }
.activity-detail .lSSlideOuter .lSPager.lSpg { width: 100%; left: 100px; bottom: 15px; margin-top: 0 !important; height: 30px; justify-content: flex-start; }
.activity-detail .lSSlideOuter .lSPager.lSpg > li.active a { background: var(--color-sky) ; }
.activity-detail .lSSlideOuter .lSPager.lSpg > li a { background: var(--color-dropblue) }
.activity-detail .lSSlideOuter .lSPager.lSpg > li a:hover { background: var(--color-white) }
.activity-detail .lSSlideWrapper { overflow: inherit; }
.activity-detail .lSSlideWrapper .lSAction { bottom: -45px; right: 15px; }

/* ------------------------------------------------------------------------------------------------------------
|  Clients  |
------------------------------------------------------------------------------------------------------------ */
.clients {  }
.clients main { position: relative; width: 100%; margin: -40px 0; }
.clients .warpper { display: block; }
.clients-motto { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 40px 0 20px 0 }
.clients-list { position: relative; width: 100%; padding: 40px 0 }
.clients-list ul { display:  flex; flex-wrap: wrap; margin: -30px; }
.clients-list li { width: 50%; padding: 30px; }
.clients-list article { display: flex; flex-wrap: wrap; position: relative; width: 100%; height: 100%; background: var(--color-dropwhite); border: 1px solid var(--color-dropdfdf); }
.clients-list article figure { display: flex; align-items: center; justify-content: center; width: 200px; background: var(--color-white) }
.clients-list article .des { flex: 1; padding: 15px 30px; }
.clients-list article h4 { text-transform: inherit; font-weight: 400; }

/* ------------------------------------------------------------------------------------------------------------
|  News  |
------------------------------------------------------------------------------------------------------------ */
.news { padding-top: 30px !important;  }
.news main { display: flex; flex-wrap: wrap; }
.news ul { display: flex; flex-wrap: wrap; margin: -30px; }
.news li { position: relative; width: 33.3333%; padding: 30px; }
.news .photo { position: relative; }
.news .photo figure { position: relative; width: 100%; height: 0; padding: 32%; overflow: hidden; }
.news .photo img { object-fit: cover; position: absolute; height: 100%; width: 100%; top: 0; left: 0; margin: auto; }
.news .text { position: relative; padding-top: 17px; }
.news .text span { position: relative; display: flex; width: 100%; }
.news .text span:after { content: ''; position: absolute; width: 100%; height: 1px; background: var(--color-drop2gray); left: 0; top: 50%; }
.news .text span time { margin-left: 15px; padding: 0 15px; background: var(--color-white); }
.news h5 { text-transform: inherit; font-weight: 400; }

.news-detail {  }
.news-detail main { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; }
.news-detail .in-detail { width: 100%; }
.news-detail .in-detail h3 { padding-top: 0; text-transform: inherit; color: var(--color-blue); font-weight: 500; }
.news-detail .time-share { display: flex; flex-wrap: wrap; align-items: center; padding-top: 20px; }
.news-detail .time-share time { display: block; font-size: 16px; color: var(--color-dropblack) }

.news-detail .photo-descrtion { display: flex; flex-wrap: wrap; width: 100%; max-width: 800px; margin: 0 auto; padding-top: 40px; }
.news-detail .photo-gallery { position: relative; width: 100%; padding-bottom: 60px; overflow: hidden; }
.news-detail .photo-gallery:before { content: ''; position: absolute; width: 100%; height: 100%; background: var(--color-blue); left: 80px; top: 0; }
.news-detail .photo img { display: block; width: 100%; }
.news-detail article { width: 100%; padding-top: 30px; padding-left: 80px; }
.news-detail .lSSlideOuter .lSPager.lSpg { width: 100%; left: 100px; bottom: 15px; margin-top: 0 !important; height: 30px; justify-content: flex-start; }
.news-detail .lSSlideOuter .lSPager.lSpg > li.active a { background: var(--color-sky) ; }
.news-detail .lSSlideOuter .lSPager.lSpg > li a { background: var(--color-dropblue) }
.news-detail .lSSlideOuter .lSPager.lSpg > li a:hover { background: var(--color-white) }
.news-detail .lSSlideWrapper { overflow: inherit; }
.news-detail .lSSlideWrapper .lSAction { bottom: -45px; right: 15px; }

.news-latest { background: var(--color-dropwhite) }
.news-latest .title { justify-content: flex-start; }
.news-latest ul { display: flex; flex-wrap: wrap; margin: -30px; }
.news-latest li { position: relative; width: 33.3333%; padding: 30px; }
.news-latest li:last-child { display: none; }
.news-latest .photo { position: relative; }
.news-latest figure { position: relative; width: 100%; height: 0; padding: 32%; overflow: hidden; }
.news-latest img { object-fit: cover; position: absolute; height: 100%; width: 100%; top: 0; left: 0; margin: auto; }
.news-latest .text { position: relative; padding-top: 17px; }
.news-latest .text span { position: relative; display: flex; width: 100%; }
.news-latest .text span:after { content: ''; position: absolute; width: 100%; height: 1px; background: var(--color-drop2gray); left: 0; top: 50%; }
.news-latest .text span time { margin-left: 15px; padding: 0 15px; background: var(--color-dropwhite); }
.news-latest h5 { text-transform: inherit; font-weight: 400; }

/* ------------------------------------------------------------------------------------------------------------
|  Press  |
------------------------------------------------------------------------------------------------------------ */
.press {  }
.press main { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; }
.press-list { position: relative; display: flex; flex-wrap: wrap; width: 100%; padding: 0 90px; }
.press-list h5 { text-transform: inherit; }
/*.press-list h5:before { content: ''; position: absolute; width: 1px; height: 100%; background: var(--color-blue); left: -90px; top: 0; }*/
.press-list ul { display: flex; flex-wrap: wrap; }
.press-list li { padding: 15px 0; border-bottom: 1px solid var(--color-dropdfdf) }
.press-list li:last-child { border-bottom: none; }
.press-list .share-social { padding-bottom: 15px; }
.press-list .button-con { padding-top: 10px; }
.press-list .button-con a:hover path { fill: var(--color-blue);  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.press .pagination { margin-top: 40px; }

/* ------------------------------------------------------------------------------------------------------------
|  Training  |
------------------------------------------------------------------------------------------------------------ */
.training {  }
.training main { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; }
.training-list { position: relative; display: flex; flex-wrap: wrap; width: 100%; padding: 0 90px; }
.training-list h5 { text-transform: inherit; }
.training-list ul { display: flex; flex-wrap: wrap; }
.training-list li { position: relative; width: 100%; padding: 15px 0 0 0;  /*border-bottom: 1px solid var(--color-dropdfdf)*/ }
.training-list li:last-child { border-bottom: none; }
.training-list .share-social { padding-bottom: 15px; }

.training-detail { position: relative; width: 100%; padding: 15px 0; }
.training-detail dl { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.training-detail dt { width: max-content ; padding: 0 15px; }
.training-detail .date { position: relative; width: max-content; height: 100%; padding: 15px 20px; border: 1px solid var(--color-dropdfdf) }
.training-detail .date p { padding: 0; }
.training-detail .date .icon-contact { display: flex; flex-wrap: wrap; width: 100%; }
.training-detail .date .icon-mini { position: relative; padding-left: 25px; padding-right: 30px;  }
.training-detail .date .icon-mini:last-child { padding-right: 0 }
.training-detail small { position: absolute; padding: 0 10px; top: -12px; left: 10px; font-size: 14px; text-transform: uppercase; color: var(--color-drop2gray); background: var(--color-white); z-index: 1 }
.training-detail span.icon { position: absolute; left: 0; top: 2px; display: flex; align-items: center; width: 20px; }
.training-detail span svg { width: 18px; }
.training-detail span path { fill: var(--color-blue); }
.training-detail a path { fill: var(--color-sky) }

.training .pagination { margin-top: 40px; }

/* ------------------------------------------------------------------------------------------------------------
|  Jobs  |
------------------------------------------------------------------------------------------------------------ */
.jobs {  }

.jobs main { display: flex; flex-wrap: wrap; width: 100%; max-width: 1440px; margin: 0 auto; }
.jobs-intro { position: relative; width: 100%; display: flex; flex-wrap: wrap; }
.jobs-intro article { position: relative; display: flex; flex-wrap: wrap; align-items: center; width: 50%; padding: 80px 100px;  background: var(--color-dropwhite);  }
.jobs-intro figure { flex: 1; height: 100%; overflow: hidden; }
.jobs-intro figure img { position: absolute; width: 100%; height: 100%; top: 0; right: 0; }
.jobs-intro h2 { padding-top: 0; color: var(--color-blue) }
.jobs-intro h2 span { color: var(--color-sky) }

.jobs-list { display: flex; flex-wrap: wrap; width: 100%; padding-top: 60px; }
.jobs-filter { display: flex; flex-wrap: wrap; align-items: center; width: 100%; padding-bottom: 15px; }
.jobs-filter .title { padding-bottom: 0 }
.jobs-search-fill { display: flex; flex-wrap: wrap; margin-left: auto; width: 50%; }

.jobs-input { flex: 1; padding-right: 10px; }
.jobs-input input[type="text"] { width: 100%; }
.jobs-sort-btn { display: flex; flex-wrap: wrap; }
.jobs-sort-btn .select-filter { width: max-content; padding-bottom: 0; padding-right: 10px; }
.jobs-sort-btn button { width: 40px; height: 40px; background: var(--color-drop2blue) }
.jobs-sort-btn button:hover { background: var(--color-sky) }
.jobs-sort-btn button svg { width: 20px; height: 20px; }
.jobs-sort-btn button path { fill: var(--color-white) }

.jobs-position { position: relative; width: 100%; min-height: 200px; border-top: 1px solid var(--color-dropdfdf) }
.jobs-position h5 { width: 50%; padding-right: 30px; text-transform: inherit; font-weight: 400; }
.jobs-position h5 span { font-size: 18px; }
.jobs-position li { border-bottom: 1px solid var(--color-dropwhitefooter) }
.jobs-position a { display: flex; flex-wrap: wrap; align-items: center; padding: 0 20px }
.jobs-position a:hover { background: var(--color-dropwhite)  }
.jobs-position .in-detail { display: flex; flex-wrap: wrap; width: 50%; margin-left: auto; }
.jobs-position .in-detail span { width: 50%; }

.jobs-detail { position: relative; width: 100%; padding: 80px 100px; background: var(--color-dropwhite) url(../images/bg-content.png) no-repeat top left; }
.jobs-detail h3 { text-transform: inherit; color: var(--color-blue) }
.jobs-detail h4 { padding-bottom: 0 }
.jobs-detail .in-des-share { position: relative; width: 100%; display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 15px; padding: 15px 0; color: var(--color-sky); font-size: 24px; text-transform: uppercase; border-bottom: 1px solid var(--color-dropdfdf) }
.jobs-detail .in-des-share .in-value { width: 30%; }
.jobs-detail .in-des-share .in-depart { display: flex; width: 30%; justify-content: flex-end; }
.jobs-detail .in-des-share .share-social { font-size: inherit; color: var(--color-dropblack); }
.jobs-detail .button-readmore { display: flex; margin-top: 15px; padding-top: 25px; justify-content: center; border-top: 1px solid var(--color-dropdfdf) }

.jobs-apply { width: 100%; max-width: 720px; padding: 30px 40px; background: var(--color-white) url(../images/bg-content-2.png) no-repeat top left; }
.jobs-apply h2 { color: var(--color-blue) }
.jobs-apply li { width: 100%; padding-top: 15px; }
.jobs-apply input { width: 100%; }
.jobs-apply li small { color: var(--color-drop999); }
/*.jobs-apply [type=file] + label:before { content: '*'; position: absolute; width: 10px; height: 10px; color: #ff0000; line-height: 1; font-size: 16px; right: 6px; top: 0; bottom: 0; margin-bottom: auto; margin-top: auto; }*/


/* ------------------------------------------------------------------------------------------------------------
|  Contactus  |
------------------------------------------------------------------------------------------------------------ */
.contactus {  }
.contactus main { display: flex; flex-wrap: wrap; width: 100%; max-width: 1680px; padding: 0 30px; margin: 0 auto; }
.contactus .title { width: 100%; padding-bottom: 30px; justify-content: center; }
.contactus h2 { color: var(--color-blue) }
.contactus h2 span { color: var(--color-sky) }
.contactus h5 { text-transform: inherit; font-weight: 400; }

.contactus-location { position: relative; width: 100%; text-align: center; }
.contactus-location h4 { text-transform: inherit; padding-top: 0; color: var(--color-blue); font-weight: 400; }
.contactus-location aside { position: relative; width: 100%; padding: 30px 0 0 0 }
.contactus-location-list { display: flex; flex-wrap: wrap; width: 100%; padding: 40px 0; }
.contactus-location-list .address { position: relative; width: 50%; padding: 80px 100px; background: var(--color-dropwhite); }
.contactus-location-list .address p { position: relative; display: flex; flex-wrap: wrap; align-items: center; padding: 0 0 0 35px; margin: 15px 0 0 0 }
.contactus-location-list .address span.icon { position: absolute; left: 0; top: 2px; display: flex; align-items: center; width: 40px; }
.contactus-location-list .address span svg { width: 20px; }
.contactus-location-list .address span path { fill: var(--color-blue); }
.contactus-location-list .address a path { fill: var(--color-sky) }
.contactus-location-list .get-con { position: relative; display: flex; flex-wrap: wrap; padding-top: 25px; }
.contactus-location-list .get-con .button-con { padding-left: 30px; }

.contactus .location-map { position: relative; width: 100%; }
.contactus .google-map { position: relative; width: 100%; height: 460px; background: var(--color-dropwhitefooter); border-bottom: 4px solid var(--color-blue) }
.contactus .google-map iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0;  }
.contactus .button-download { z-index: 999; position: absolute; bottom: 0; left: 10px; }

.contactus .address-des { position: relative; width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 0 100px 0 }
.contactus .address-des ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -20px; }
.contactus .address-des li { width: 25%; padding: 20px 20px 0 20px; }
.contactus .address-des h5 { padding-bottom: 30px; }
.contactus .address-des h5:before { content: ''; position: absolute;  width: 1px;  height: 16px;  background: var(--color-whiteblue); right: 0; left: 0;  bottom: 2px; margin-left: auto; margin-right: auto;  }

/*Owl*/
.carousel-nav { z-index: 1; }
.carousel-nav .carousel-cell { display: flex; align-items: center; justify-content: center; width: auto;/* height: 140px;*/ margin-right: 1px; background: none;   }
.carousel-nav .carousel-cell .name { position: relative; padding: 13px 25px 15px 25px; color: var(--color-dropblack); background: var(--color-dropwhitefooter); font-size: 20px; font-weight: 400; text-transform: inherit; white-space: nowrap; z-index: 2; cursor: pointer; -webkit-touch-callout: none;  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;   user-select: none;  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.carousel-nav .carousel-cell .name:hover { color: var(--color-white); background: var(--color-blue) }
.carousel-nav .carousel-cell.is-nav-selected:before { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;  }
.carousel-nav .carousel-cell.is-nav-selected .name { color: var(--color-white); background: var(--color-sky); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;  } 
/*.carousel-nav .carousel-cell.is-nav-selected .name:before { content: ''; position: absolute; width: 100%; height: 3px; bottom: 0; background: var(--color-blue); }*/
.carousel-nav .carousel-cell.is-nav-selected { background: none }
/*.carousel-nav .carousel-cell.is-nav-selected {  background: ; }*/
 .carousel-nav .flickity-slider { }

.carousel-map { width: 100%;/* margin-top: -3px;*//* border-top: 1px solid var(--color-dropwhitefooter);*/ }
.carousel-map .carousel-cell { width: 100%; }
.carousel-map .carousel-cell .bg-thumb { position: absolute;  top: 0; width: 100%; background-size: cover; background-position: center center; bottom: 0; z-index: 0;}
.carousel-map img { display: block;  margin: 0 auto;  }
.carousel-map .flickity-viewport { overflow: inherit; }

.contactus-support { position: relative; width: 100%; }
.contactus-support ul { display: flex; flex-wrap: wrap; padding-top: 30px; margin: -40px; }
.contactus-support li { display: flex; flex-wrap: wrap; width: 50%; padding: 40px }
.contactus-support .department { position: relative; display: flex; width: 100%; padding: 80px 100px; border: 1px solid var(--color-dropdfdf); background: var(--color-white) url(../images/bg-content-2.png) no-repeat top right }
.contactus-support .department:before { content: ''; position: absolute; width: 1px; height: 50px; background: var(--color-blue); right: -1px; top: 70px; }
.contactus-support .department h3 { color: var(--color-blue); padding-top: 0 }
.contactus-support .contact-list { position: relative; width: 100%; padding-top: 15px; }
.contactus-support .contact-list h5 { padding-bottom: 5px; }
.contactus-support .contact-list dl { display: flex; flex-wrap: wrap; margin: 0 -20px; }
.contactus-support .contact-list dt { width: 50%; padding: 0 20px; }
.contactus-support .contact-list p { position: relative; display: flex; flex-wrap: wrap; align-items: center; padding: 0 0 0 35px; margin: 15px 0 0 0 }
.contactus-support .contact-list span.icon { position: absolute; left: 0; top: 2px; display: flex; align-items: center; width: 40px; }
.contactus-support .contact-list span svg { width: 20px; }
.contactus-support .contact-list span path { fill: var(--color-blue); }
.contactus-support .contact-list a path { fill: var(--color-sky) }

.contactus-form { position: relative; width: 100%; padding: 80px 100px; text-align: center; background: var(--color-dropwhite) url(../images/bg-content.png) no-repeat top left; }
.contactus-form-fill { position: relative; width: 100%; max-width: 960px; margin: 0 auto; text-align: left; }
.contactus-form-fill ul { display: flex; flex-wrap: wrap; margin: 0 -30px; }
.contactus-form-fill li { display: flex; flex-wrap: wrap; width: 50%; padding: 15px 30px 0 30px; }
.contactus-form-fill li:last-child { width: 100%; }
.contactus-form-fill .con-department { }
.contactus-form-fill .con-subject { }
.contactus-form-fill .select-filter { padding-bottom: 0 }
.contactus-form-fill .select-filter select { width: 100%; }
.contactus-form-fill input { width: 100%; }
.contactus-form-fill textarea { height: 100px; }
.contactus-form-fill label { width: 100%; }
.contactus-form-fill small { color: var(--color-drop999); }

/*Search*/
.search-detail { position: relative; width: 100%; max-width: 1280px; min-height: 200px; margin: 0 auto;  }
.search-detail h3 { padding-top: 30px; text-transform: inherit; font-weight: 400; color: var(--color-blue) }
.search-detail h3 span { color: var(--color-sky);  }
.search-detail h4 { padding: 0 0 10px 0; text-transform: inherit; font-weight: 400; }
.search-detail ul { display: flex; flex-wrap: wrap; margin: 0 ; }
.search-detail ul li { flex: 0 0 100%; width: 100%; padding: 15px 0; border-bottom: 1px dotted var(--color-dropdfdf) }
.search-detail ul li p { padding: 0; font-size: 16px; color: #777; }

.search-detail .form-search { position: relative; display: flex; flex-wrap: wrap; }
.search-detail .form-search input[type="text"] { flex: 1; margin-right: 5px; height: 40px; }
.search-detail .form-search button { position: absolute; top: 0; bottom: 0; right: 0; width: 100px; min-width: 100px; height: 40px; font-weight: 500; }


/* ------------------------------------------------------------------------------------------------------------
|  Footer  |
------------------------------------------------------------------------------------------------------------ */
footer { position: relative; width:100%; }
footer main { position: relative; width: 100%; padding: 100px 0; background: var(--color-dropwhitefooter)  }
footer main .warpper { flex-wrap: wrap; }
footer .footer-adress-support { display: flex; flex-wrap: wrap; width: 100%; padding-bottom: 50px; }

footer .footer-address { position: relative; width: 50%; padding-left: 90px; }
footer .footer-address h4 { color: var(--color-blue); }
footer .footer-address p { padding: 5px 0 0 0; font-size: 16px; }
/*footer .footer-address p span { width: 100px; display: inline-flex; font-weight: 600; color: var(--color-blue); }*/
footer .footer-address .footer-logo { position: absolute; width: 60px; height: 60px; left: 0; top: 0; }

footer .footer-support { position: relative; width: 50%; padding-left: 60px; } 
footer .footer-support ul { display: inline-flex; flex-wrap: wrap; justify-content: space-around; margin: 0 -15px; }
footer .footer-support li { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0 15px; }
footer .footer-support li a { display: flex; flex-wrap: wrap; align-items: center; }
footer .footer-support li a i { width: 60px; height: 60px; padding: 12px; border-radius: 50%; background: var(--color-white); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;  }
footer .footer-support li a:hover i { background: var(--color-sky); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;  }
footer .footer-support li h6 { padding-left: 15px; }
footer .footer-support li li svg { width: 100%; }
footer .footer-support a path { fill: var(--color-sky); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
footer .footer-support a:hover path { fill: var(--color-white); }

footer .footer-nav-social { display: flex; flex-wrap: wrap; align-items: flex-start; position: relative; width: 100%; } 
footer .footer-nav-social h6 { padding-top: 0; font-weight: 500; }

footer .footer-nav { width: 80%; padding-left: 90px; }

footer .footer-nav-list { align-items: flex-start; -webkit-columns: 4; -moz-columns: 4; columns: 4; }
footer .footer-nav ol { padding: 0 0 15px 0 }
footer .footer-nav ol li { width: 100%; padding: 0 10px 2px 0; }
footer .footer-nav ol li a { display: inline-block; text-transform: inherit; color: var(--color-drop777); text-transform: inherit; font-weight: 400; font-size: 14px; line-height: 1 }
footer .footer-nav ol li a:hover { color: var(--color-dropblack) }
footer .footer-nav ol li dl { position: relative;  }
footer .footer-nav ol li dl dt { position: relative; padding: 0 0 0 10px; }
footer .footer-nav ol li dl dt:before { content: ''; position: absolute; width: 4px; height: 4px; background: var(--color-drop999); left: 0; top: 9px; border-radius: 50%; }
footer .footer-nav ol li dl a { color: var(--color-drop999);  }
footer .footer-nav .break { -webkit-column-break-inside: avoid;  page-break-inside: avoid; break-inside: avoid; }
footer .footer-nav li.menu { position: relative; }
footer .footer-nav li.menu span { display: inline-flex; padding: 0 0 5px 0; font-size: 16px; text-transform: uppercase; }
footer .footer-nav li.menu a:hover { color: var(--color-sky) }

footer .footer-social-subscription { display: flex; flex-wrap: wrap; flex: 1; padding-top: 40px; }

footer .footer-follow { width: 100%; }
footer .footer-follow ul { display: inline-flex; flex-wrap: wrap; margin: 0 -8px; }
footer .footer-follow li { padding: 0 8px; }
footer .footer-follow .icon-svg svg { width: 18px !important; height: 18px !important;  }
footer .footer-follow .icon-svg a { width: 36px; height: 36px; }

footer .footer-subscription { width: 100%; padding-top: 50px; }
footer .footer-subscription .box-subscription { position: relative; }
footer .footer-subscription input[type="email"] { width: 100%; height: 40px; padding: 0 80px 0 10px; }
footer .footer-subscription button { position: absolute; top: 0; right: 0; width: 100px; min-width: 100px; }


footer .copy { display: flex; position: relative; width: 100%; padding: 30px 0; font-size: 14px; color: var(--color-whiteblue); background: var(--color-blue)  }
footer .copy span { right: 0; top: -15px; position: absolute; height: 20px; padding-right: 50px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); }
footer .copy span:after { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-sky); top: 50%; left: 65%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
footer .copy span:hover:after { width: 50px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
footer .copy span a { text-transform: uppercase; color: var(--color-whiteblue) }
footer .copy span a:hover { color: var(--color-sky) }

/* ------------------------------------------------------------------------------------------------------------
|  Popup Event  |
------------------------------------------------------------------------------------------------------------ */
.home-event { display: flex; justify-content: center; align-items: center; position: fixed; width: 100%; height: 100%; padding: 20px; margin: auto; left: 0; right: 0; top: 0; bottom: 0; z-index: 99999; background: rgba(0,0,0,0.3); }
.home-event-box { position: relative; width: 100%; max-width: max-content; box-shadow : 0 1em 2em 0 rgba(1, 12, 41, 0.5); z-index: 999999; }
.home-event-vdo { position: relative; display: flex; width: 100%; min-width: 960px; height: 0; padding: 0 0 56.25%; margin: 0 auto; overflow: hidden; }
.home-event-vdo iframe { position: absolute; display: block; max-width: 100%; width: 100%; height: 100%;  margin: 0;   top: 0; left: 0; } 
.home-event-vdo video { position: absolute; display: block; max-width: 100%; width: 100%; height: 100%;  margin: 0;   top: 0; left: 0; background: var(--color-blue); } 

/* ------------------------------------------------------------------------------------------------------------
|  Landing Page  |
------------------------------------------------------------------------------------------------------------ */
.landing-page { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; min-height: 100%; padding: 30px 0; background: url(../images/bg-landing.png) repeat; }
.landing-page article { position: relative; flex-wrap: wrap; justify-content: center; height: 100%; padding: 30px 0; }
.landing-page-img { width: 100%; max-width: 940px; padding: 0 20px; }
.landing-page-img img { min-width: inherit !important; max-width: 100% !important; width: auto !important; height: auto !important; box-shadow: 0 1em 2em 0 rgba(0, 0, 0, 0.3); }
.enter-site { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 30px;  }
.enter-site a { display: block; width: 180px; padding: 10px 15px; text-align: center; color: #fff; font-weight: 400; text-transform: uppercase; border-radius: 4px; background: var(--color-blue);  }
.enter-site a:hover { background: var(--color-sky); box-shadow: 0px 12px 5px -8px rgba(0, 0, 0, 0.3); }

/* ------------------------------------------------------------------------------------------------------------
|  Share  |
------------------------------------------------------------------------------------------------------------ */
.share-social { display: flex; align-items: center; margin-left: auto; font-size: 14px; font-weight: 500; text-transform: uppercase; }
.share-social .text { margin-right: 10px; font-size: 16px; }

.share-facebook { display: flex; align-items: center; justify-content: center; position: relative; width: 34px; height: 34px; margin: 0 4px; padding: 0; text-align: center; }
.share-facebook a { display: block; width: 100%; height: 100%; color: var(--color-dropblack); background: var(--color-dropwhitefooter); border-radius: 50%; }
.share-facebook a:hover { background: #4267b2; }
.share-facebook a path { fill: #4267b2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.share-facebook a:hover path {  fill: var(--color-white); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.share-facebook svg { width: 16px; height: 34px; }
.share-facebook span { display: inline-block; padding: 0 0 0 5px; }
.share-facebook sup { position: absolute; background: #ff0000;  z-index: 1; }

.share-twitter { display: flex; align-items: center; justify-content: center; position: relative; width: 34px; height: 34px; margin: 0 4px; padding: 0; text-align: center; }
.share-twitter a { display: block; width: 100%; height: 100%; color: var(--color-dropblack); background: var(--color-dropwhitefooter); border-radius: 50%;; }
.share-twitter a:hover { background: #03a9f4; }
.share-twitter a path { fill: #03a9f4; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.share-twitter a:hover path { fill: var(--color-white); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.share-twitter svg { display: inline-block; width: 16px; height: 34px; }
.share-twitter span { display: inline-block; padding: 0 0 0 5px; }

.share-line { display: flex; align-items: center; justify-content: center; position: relative; width: 34px; height: 34px; margin: 0 0 0 4px; padding: 0; text-align: center; }
.share-line a { display: block; width: 100%; height: 100%; color: var(--color-dropblack); background: var(--color-dropwhitefooter); border-radius: 50%; }
.share-line a:hover { background: #00b900; }
.share-line a path { fill: #00b900; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.share-line a:hover path { fill: var(--color-white); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.share-line svg { display: inline-block; width: 16px; height: 34px; }
.share-line span { display: inline-block; padding: 0 0 0 5px; }

/* ------------------------------------------------------------------------------------------------------------
|  Editor  |
------------------------------------------------------------------------------------------------------------ */
.editor {  }
.editor a { display: inline-block; color: var(--color-sky) }
.editor a:hover { color: var(--color-blue) }
.editor h1,.editor h2,.editor h3,.editor h4,.editor h5,.editor h6 { text-transform: inherit; font-weight: 400; }
.editor ul { padding-left: 20px; padding-top: 15px; padding-bottom: 15px; }
.editor ul li { list-style: circle; padding: 4px 0; }
.editor ol { padding-left:20px; padding-top: 15px; padding-bottom: 15px; counter-reset: item;  }
.editor ol li { list-style: decimal; padding: 4px 0; }
.editor ol li ul li { list-style: circle; }
.editor p { position: relative; z-index: 1 }
.editor u { text-decoration: underline; }
.editor i { font-style: italic; }
.editor b,.editor strong { font-weight: 500; }
.editor img { min-width: inherit !important; max-width: 100% !important; width: auto !important; height: auto !important; }

/*.editor .title:before { content: ''; position: absolute; width: 100%; height: 1px; background: var(--color-dropdfdf); bottom: 25px; left: 0; }*/

.editor .detail-box-line { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--color-dropdfdf) }
.editor .detail-box-photo { position: relative; width: 100%; margin: 40px 0; padding: 40px 0 0 0; }
.editor .detail-box-photo:before { content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 40%; height: 90%; background: var(--color-dropwhitefooter); }
.editor .detail-box-photo figure { position: relative; width: 52%; }
.editor .detail-box-photo figure:last-child { position: absolute; top: 0; right: 0; z-index: 1; }
.editor .fix-font { position: absolute; width: max-content; padding: 10px 20px; z-index: 1; left: 0; right: 0; bottom: 20px; background: rgba(22,37,112,0.7); color: var(--color-white) }
.editor .images-overflow { position: relative; overflow: hidden; }

.editor .table-s1 { position: relative; width: 100%; margin: 25px 0; border: 1px solid var(--color-dropdfdf); }
.editor .table-s1 ul { padding: 0 !important; }
.editor .table-s1 li { display: flex; width: 100%; padding: 0; border-bottom: 1px solid var(--color-dropdfdf); list-style: none !important; }
.editor .table-s1 li:last-child { border-bottom: none; }
.editor .table-s1 li .left { position: relative; padding: 15px; min-width: 200px; background: var(--color-dropwhite);  }
.editor .table-s1 li .left:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-left-color: var(--color-dropwhite);
	border-width: 8px;
	margin-top: -8px;
}

.editor .box-spac-style1 { position: relative; width: 100%; margin: 15px 0 40px 0; background: url(../images/bg-content-3.png) no-repeat top right; }
.editor .box-spac-style1:before { content: ''; position: absolute; width: 50px; height: 50px; background: url(../images/icon-frame-top-left.svg) no-repeat; background-size: 100%; left: 0; top: 0; }
.editor .box-spac-style1:after { content: ''; position: absolute; width: 50px; height: 50px; background: url(../images/icon-frame-top-right.svg) no-repeat; background-size: 100%; right: 0; top: 0; }
.editor .box-spac-style1 .in-frame { position: relative; width: 100%; padding: 30px; }
.editor .box-spac-style1 .in-frame:before { content: ''; position: absolute; width: 50px; height: 50px; background: url(../images/icon-frame-bottom-left.svg) no-repeat; background-size: 100%; left: 0; bottom: 0; }
.editor .box-spac-style1 .in-frame:after { content: ''; position: absolute; width: 50px; height: 50px; background: url(../images/icon-frame-bottom-right.svg) no-repeat; background-size: 100%; right: 0; bottom: 0; }

.editor .table-s1 li .right { padding: 15px; }

.editor table { width: 100%; margin: 25px 0; border: 1px solid var(--color-dropdfdf) }
.editor table thead tr { background: #f3f5f7; }
.editor table thead tr th { padding: 15px; text-align: left; border-right: 1px solid var(--color-dropdfdf); border-bottom: 1px solid var(--color-dropdfdf) }
.editor table tbody tr { border-bottom: 1px solid var(--color-dropdfdf) }
.editor table tbody tr td { padding: 15px; text-align: left; border-right: 1px solid var(--color-dropdfdf); }
.editor table tbody tr td:first-child { background: var(--color-dropwhite); }

.color-sky { color: var(--color-sky) !important; }
.color-blue { color: var(--color-blue); }

/* ------------------------------------------------------------------------------------------------------------
|  Pagination  |
------------------------------------------------------------------------------------------------------------ */
.pagination { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; margin: 60px 0 0 0; padding: 0; font-weight: 500; }
.pagination a { display: inline-flex; width: 40px; height: 40px; margin: 0 4px; justify-content: center; align-items: center; font-family: 'Roboto Condensed'; background: var(--color-dropwhitefooter) }
.pagination a:first-child { margin-left: 0; }
.pagination a:last-child { margin-right: 0; }
.pagination a svg { fill: var(--color-dropblack); width: 15px; height: 15px; }
.pagination a:hover {  color: var(--color-white); background: var(--color-sky)  }
.pagination a:hover svg { fill: var(--color-white); }
.pagination a.current { background: var(--color-blue); color: #fff; border: 1px solid var(--color-blue); }
.pagination a.prve {  background: var(--color-dropwhitefooter) }
.pagination a.prve:hover { background: var(--color-sky)  } 
.pagination a.next {  background: var(--color-dropwhitefooter) }
.pagination a.next:hover { background: var(--color-sky)  } 
.pagination .none-border { border:none; padding-left:0; }
.pagination .none-border a:hover { border:nene;  }
.pagination .disable { pointer-events: none !important; cursor: default; opacity: 0.5; }

/* ------------------------------------------------------------------------------------------------------------
|  Other  |
------------------------------------------------------------------------------------------------------------ */
.box-row { display: flex; flex-wrap: wrap; margin: -60px; }
.box-colum-100 { display: flex; flex-wrap: wrap; position: relative; width: 100%; padding: 60px; }
.box-colum-50 { display: flex; flex-wrap: wrap; position: relative; width: 50%; padding: 60px; }
.box-colum-33 { display: flex; position: relative; width: 33.3333%; padding: 60px; }
.box-colum-25 { display: flex; position: relative; width: 25%; padding: 60px; }
.box-colum-20 { display: flex; position: relative; width: 20%; padding: 60px; }

.editor-row { display: flex; flex-wrap: wrap; margin: -15px -30px; padding: 30px 0; }
.editor-colum-50 { position: relative; width: 50%; padding: 30px; }
.editor-colum-33 { position: relative; width: 33.3333%; padding: 30px; }

.img-lineheri-color:before { content: ''; position: absolute; width: 40px; height: 100%; background: var(--color-blue); left: 0; top: 0; z-index: 1; }

.display-block { display: block; }

.button-readmore { position: relative; padding: 20px 0; }
.button-readmore a { position: relative; display: block; width: 180px; height: 46px; padding: 0; font-size: 15px; font-weight: 500; text-align: center; color: var(--color-white); line-height: 45px; text-transform: uppercase; background: var(--color-blue);  }
.button-readmore a:hover { color: var(--color-sky); }
.button-readmore span { position: relative; display: block; width: 100%; height: 100%; z-index:1; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.button-readmore span:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-blue); top: 50%; right: -30px; }
.button-readmore span:after { content: ''; position: absolute; width: 0; height: 1px; background: var(--color-sky); top: 50%; left: 180px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button-readmore a:hover span:after { width: 30px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button-readmore a:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-sky); top: 50%; right: 0; }

.button-readmore-- { position: relative; padding: 20px 0; }
.button-readmore-- a { position: relative; display: block; width: 180px; height: 46px; padding: 0; font-size: 15px; font-weight: 500; text-align: center; color: var(--color-white); line-height: 45px; text-transform: uppercase; background: var(--color-sky);  }
.button-readmore-- a:hover { color: var(--color-blue) }
.button-readmore-- span { position: relative; display: block; width: 100%; height: 100%; z-index:1; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.button-readmore-- span:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-sky); top: 50%; right: -30px; }
.button-readmore-- span:after { content: ''; position: absolute; width: 0; height: 1px; background: var(--color-white); top: 50%; left: 180px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button-readmore-- a:hover span:after { width: 30px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button-readmore-- a:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-white); top: 50%; right: 0; }

.button-auto { position: relative; width: inherit; display: inline-flex; padding: 20px 0; }
.button-auto a { position: relative; height: 46px; padding: 0 40px; font-size: 15px; font-weight: 500; text-align: center; color: var(--color-white) !important; line-height: 45px; text-transform: uppercase; background: var(--color-blue);  }
.button-auto a:hover { color: var(--color-sky) !important }
.button-auto span { position: relative; display: flex; align-items: center; width: 100%; height: 100%; z-index:1; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.button-auto span svg { width: 18px; height: 18px; margin-right: 15px;  }
.button-auto a:hover path { fill: var(--color-white);  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button-auto a path { fill: var(--color-sky);  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button-auto span:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-blue); top: 50%; right: -30px; }
.button-auto span:after { content: ''; position: absolute; width: 0; height: 1px; background: var(--color-sky); top: 50%; left: 180px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button-auto a:hover span:after { width: 30px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button-auto a:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-sky); top: 50%; right: 0; }

.button-download { position: relative; width: inherit; display: inline-flex; padding: 20px 0; }
.button-download a { position: relative; min-width: 180px; height: 46px; padding: 0 20px; font-size: 15px; font-weight: 500; text-align: center; color: var(--color-white) !important; line-height: 45px; text-transform: uppercase; background: var(--color-blue);  }
.button-download a:hover { color: var(--color-sky) !important }
.button-download span { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index:1; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.button-download span svg { width: 18px; height: 18px; margin-right: 15px;  }
.button-download a:hover path { fill: var(--color-white);  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button-download a path { fill: var(--color-sky);  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
/*.button-download span:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-blue); top: 50%; right: -30px; }
.button-download span:after { content: ''; position: absolute; width: 0; height: 1px; background: var(--color-sky); top: 50%; left: 180px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button-download a:hover span:after { width: 30px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button-download a:before { content: ''; position: absolute; width: 30px; height: 1px; background: var(--color-sky); top: 50%; right: 0; }*/

.button-con { position: relative; width: inherit; display: inline-flex; padding: 20px 0; }
.button-con a { position: relative; min-width: 180px; height: 46px; padding: 0 20px; font-size: 15px; font-weight: 500; text-align: center; color: var(--color-blue) !important; line-height: 45px; text-transform: uppercase; background: var(--color-white); border: 1px solid var(--color-blue)  }
.button-con a:hover { color: var(--color-sky) !important }
.button-con span { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index:1; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.button-con span svg { width: 18px; height: 18px; margin-right: 15px;  }
.button-con a:hover path { fill: var(--color-white);  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button-con a path { fill: var(--color-sky);  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.button-outsize { position: relative; width: inherit; display: inline-flex; padding: 0; }
.button-outsize a { position: relative; height: 46px; padding: 0 0; font-size: 15px; font-weight: 500; text-align: center; color: var(--color-blue) !important; line-height: 45px; text-transform: uppercase;  }
.button-outsize a:hover { color: var(--color-sky) !important }
.button-outsize span { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index:1; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.button-outsize span svg { width: 18px; height: 18px; margin-right: 15px;  }
.button-outsize a:hover path { fill: var(--color-blue);  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.button-outsize a path { fill: var(--color-sky);  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.btn-submit { display: flex; justify-content: center; padding: 20px 0 15px 0; }
.btn-submit button { min-width: 200px; height: 46px; background: var(--color-blue) }
.btn-submit button:hover { background: var(--color-sky) }

.fix-gototop { position:fixed; width:26px; height:26px; bottom:12px; right:10px; z-index:7; }
.fix-gototop a { display:inline-table; width:100%; height:100%; font-size: 20px; color:#fff !important; text-align:center; text-transform:uppercase; background:#666; }
.fix-gototop a:hover { color:#fff; background:#333; }
.fix-gototop i { display:table-cell; vertical-align:middle; }
.top-hide { bottom:-40px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
.top-show { bottom:12px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
.icon-top { display: table-cell;vertical-align: middle; background: url(../images/icon-arrow-top.svg) no-repeat; background-size: 100%; }

.ui-loader { display:none !important; visibility:hidden !important; }

.blockPage { width: 260px !important; left: 0 !important; right: 0 !important; border:none !important; background:none !important; margin: 0 auto !important;  }
.blockPage .waiting { width: 260px; padding: 15px;
    text-align: center; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.35); }
.blockPage .waiting img { display: inline-block; padding: 10px 0; }

.hide { display: none; }

.animated-modal { max-width: inherit; width: auto; min-width: 720px; border-radius: 10px; overflow: hidden; background: var(--color-white);  transform: translateY(-80px);  transition: all .5s; }
.fancybox-slide--current .animated-modal { transform: translateY(0); opacity: 1; transition-duration: .3s; }
.fancybox-close-small:hover { background: none }

.space-tb100 { padding: 100px 0; }
.space-t100 { padding-top: 100px; }
.space-t0 { padding-bottom: 0 !important; }
.space-b100 { padding-bottom: 100px; }
.space-b0 { padding-bottom: 0 !important; }

.mt { margin-top: 0 !important }
.mt-30 { margin-top: 30px !important }

.ml-15 { margin-left: 15px !important }
.mb-30 { margin-bottom: 30px !important }
.mb-60 { margin-bottom: 60px !important }

.pt { padding-top: 0 !important }
.pt-5 { padding-top: 5px !important }
.pt-30 { padding-top: 30px !important }
.pt-60 { padding-top: 60px !important }

.pl { padding-left: 0 !important }
.pl-10 { padding-left: 10px !important }
.pl-15 { padding-left: 15px !important }
.pl-20 { padding-left: 20px !important }
.pl-30 { padding-left: 30px !important }
.pl-40 { padding-left: 40px !important }
.pl-50 { padding-left: 50px !important }

.pb { padding-bottom: 0 !important }
.pb-30 { padding-bottom: 30px !important }

.left-line { padding-left: 20px; margin: 15px 0 }
.left-line:before { content: ''; position: absolute; width: 1px; height: 50%; left: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; background: var(--color-sky) }

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

.full { width: 100% !important }


/**/

/*Flickity*/
.carousel-cell {  width: 100%; max-width: 1440px;  }

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
          tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button { 
  position: absolute;
  top: 50%;
  width: 44px; min-width: inherit;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: white;
  background: hsla(0, 0%, 100%, 0.75);
  cursor: pointer;
  /* vertically center */
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.flickity-prev-next-button:hover { background: white; }

.flickity-prev-next-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #09F;
}

.flickity-prev-next-button:active {
  opacity: 0.6;
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }


.flickity-prev-next-button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.flickity-prev-next-button svg {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

.flickity-prev-next-button .arrow {
  fill: #3c4542;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
  z-index: 99;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 8px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
    background: #007548;
}

/* flickity-fade */

.flickity-enabled.is-fade .flickity-slider > * {
  pointer-events: none;
  z-index: 0;
}

.flickity-enabled.is-fade .flickity-slider > .is-selected {
  pointer-events: auto;
  z-index: 1;
}


/*Easy Tabs*/
dl.resp-tabs-list {
  margin: 0px;
  padding: 15px 0 0 0;
  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  flex-wrap:wrap; 
  position: relative; z-index: 9;
}
.resp-tabs-list dt { -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    display: flex; align-items: center; justify-content: center;
  padding: 0 25px;
  margin: 0 1px 0 0;
  list-style: none;
  cursor: pointer; background: var(--color-dropwhitefooter);
  text-align: center; text-transform:uppercase; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; 
}
.resp-tabs-list dt span { padding: 8px 10px 10px 10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;   -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently */  }

.resp-tabs-list dt:hover { background: var(--color-blue); color: var(--color-white); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease }

.resp-tab-active { color: var(--color-white);   border-bottom: none;
    background: var(--color-sky) !important; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease }
.resp-tab-active dt:hover { color: var(--color-white) }

.resp-tabs-container {
  padding: 0px;
  clear: left;
}

div.resp-accordion {
  cursor: pointer;
  padding: 5px;
  display: none;
}

.resp-tab-content {
  display: none;
  /*padding:15px 15px 10px 15px;*/
}

.resp-tab-active:hover {  color: var(--color-white) !important }

.resp-content-active,
.resp-accordion-active { display: block; }

.resp-tab-content { border-top: 1px solid var(--color-dropdfdf); }
.resp-tab-content p { padding-bottom: 0; }

.resp-tab-content dl dt { position: relative; padding: 15px 0 0 20px; }
.resp-tab-content dl dt:before { content: ''; position: absolute; width: 6px; height: 6px; left: 5px; top: 24px; border-radius: 50%; background: #777; }

div.resp-accordion {
  border: 1px solid #eee;
  border-top: 0px solid #d70a0a;
  margin: 0px;
  padding: 10px 15px;
  font-size:19px;
}

div.resp-tab-active {
  border-bottom: 0px solid #eee !important;
  margin-bottom: 0px !important;
  padding: 10px 15px !important;
}

div.resp-tab-title:last-child {
  border-bottom: 12px solid #eee !important;
  background: blue;
}

/*-----------Vertical tabs-----------*/

.resp-vtabs dl.resp-tabs-list {
  float: left;
  width: 30%;
}

.resp-vtabs .resp-tabs-list dt {
  display: block;
  padding: 15px 15px !important;
  margin: 0;
  cursor: pointer;
  float: none;
}

.resp-vtabs .resp-tabs-container {
  padding: 0px;
  background-color: #fff;
  border: 1px solid #eee;
  float: left;
  width: 68%;
  min-height: 250px;
  border-radius: 4px;
  clear: none;
}

.resp-vtabs .resp-tab-content { border: none; }

.resp-vtabs dt.resp-tab-active {
  border: 1px solid #ddd;
  border-right: none;
  background-color: #fff;
  position: relative;
  z-index: 1;
  margin-right: -1px !important;
  padding: 14px 15px 15px 14px !important;
}

.resp-arrow {
  width: 0;
  height: 0;
  float: right;
  margin-top: 10px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #ccc;
}

div.resp-tab-active span.resp-arrow {
  border: none;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #777;
}

/*-----------Accordion styles-----------*/

div.resp-tab-active { background: #333 !important; }

.resp-easy-accordion div.resp-accordion { display: block; }

.resp-easy-accordion .resp-tab-content { border: 1px solid #eee; }

.resp-easy-accordion .resp-tab-content:last-child { border-bottom: 1px solid #eee !important; }

.resp-jfit {
  width: 100%;
  margin: 0px;
}

.resp-tab-content-active { display: block; }

div.resp-accordion:first-child { border-top: 1px solid #eee !important; }

/*Timeline Lib*/
.cd-horizontal-timeline {
  opacity: 0;
  margin: 2em auto;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.cd-horizontal-timeline::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
.cd-horizontal-timeline.loaded {
  /* show the timeline after events position has been set (using JavaScript) */
  opacity: 1;
}
.cd-horizontal-timeline .timeline {
  position: relative;
  height: 100px;
  max-width: 100%;
  margin: 0 auto;
}
.cd-horizontal-timeline .events-wrapper {
  position: relative;
  height: 100%;
  margin: 0 40px;
  overflow: hidden;
}

.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
  /* these are used to create a shadow effect at the sides of the timeline */
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  height: 100%;
  width: 30px;
}
.cd-horizontal-timeline .events-wrapper::before {
  left: 0;
  background-image: -webkit-linear-gradient( left , #fff, rgba(248, 248, 248, 0));
  background-image: linear-gradient(to right, #fff, rgba(248, 248, 248, 0));
}
.cd-horizontal-timeline .events-wrapper::after {
  right: 0;
  background-image: -webkit-linear-gradient( right , #fff, rgba(248, 248, 248, 0));
  background-image: linear-gradient(to left, #fff, rgba(248, 248, 248, 0));
}
.cd-horizontal-timeline .events {
  /* this is the grey line/timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 49px;
  height: 2px;
  /* width will be set using JavaScript */
  background: var(--color-dropdfdf);
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
}
.cd-horizontal-timeline .filling-line {
  /* this is used to create the green line filling the timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: var(--color-sky);
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-horizontal-timeline .events a {
  position: absolute;
  bottom: 0;
  z-index: 2;
  text-align: center;
  font-size: 1.3rem;
  padding-bottom: 15px;
  color: #383838;
  /* fix bug on Safari - text flickering while timeline translates */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.cd-horizontal-timeline .events a::after {
  /* this is used to create the event spot */
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -7px;
  height: 13px;
  width: 13px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  background-color: #fff;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  -moz-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .cd-horizontal-timeline .events a:hover::after {
  background-color var(--color-sky);
  border-color: var(--color-sky);
}
.cd-horizontal-timeline .events a.selected {
  pointer-events: none;
}
.cd-horizontal-timeline .events a.selected::after {
  background-color: var(--color-sky);
  border-color: var(--color-sky);
}
.cd-horizontal-timeline .events a.older-event::after {
  border-color: var(--color-sky);
}
@media only screen and (min-width: 1100px) {
  .cd-horizontal-timeline {
    margin: 0;
  }
  .cd-horizontal-timeline::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

.cd-timeline-navigation a {
  /* these are the left/right arrows to navigate the timeline */
  position: absolute;
  z-index: 1;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 34px;
  width: 34px;
  border-radius: 50%;
  border: 2px solid var(--color-dropdfdf);
  /* replace text with an icon */
  overflow: hidden;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
  /*.cd-timeline-navigation a::after {
 arrow icon
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
background: url(../img/cd-arrow.svg) no-repeat 0 0;
}*/
.cd-timeline-navigation a.prev {
  left: 0;
  background: url(../images/icon-back-sky.svg) no-repeat center;
  background-size: 40%;

}
.cd-timeline-navigation a.next {
  right: 0;
   background: url(../images/icon-next-sky.svg) no-repeat center;
   background-size: 40%;
}
.no-touch .cd-timeline-navigation a:hover {
  border-color: var(--color-sky);
}
.cd-timeline-navigation a.inactive {
  /*cursor: none;*/ opacity: 0.5;
}
.cd-timeline-navigation a.inactive::after {
  background-position: 0 -16px;
}
.no-touch .cd-timeline-navigation a.inactive:hover {
  border-color: #dfdfdf;
}

.cd-horizontal-timeline .events-content {
  position: relative;
  width: 100%;
  margin: 0 0 20px 0;
  overflow: hidden;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  transition: height 0.4s;
  background: url(../images/about-miles-3.jpg) no-repeat top right; background-size: cover;
}
.cd-horizontal-timeline .events-content:after { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.80); left: 0; top: 0 }
.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  left: 0;
  top: 0;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
  -webkit-animation-name: cd-enter-right;
  -moz-animation-name: cd-enter-right;
  animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-name: cd-enter-left;
  -moz-animation-name: cd-enter-left;
  animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
}
.cd-horizontal-timeline .events-content li > * {
 /*max-width: 960px;*/
  margin: 0 auto;
}

.cd-horizontal-timeline .events-content em {
  display: block;
  font-style: italic;
  margin: 10px auto;
}
.cd-horizontal-timeline .events-content em::before {
  content: '- ';
}
.cd-horizontal-timeline .events-content p {

}
.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p {
  line-height: 1.6;
}


@-webkit-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}

/* cookie */
.cover-cookie-card {
    background-color: rgb(246, 246, 246);
    border-color: rgb(223 223 230);
    color: rgb(0, 0, 0);
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 5px;
    align-items: center;
    flex-direction: row;
    margin: 0.8em;
    padding: 0.8em;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    font-family: 'Roboto Condensed','Prompt';
    font-size: 15px;
    overflow: hidden;
    position: fixed;
    transition: opacity 1s ease 0s;
    z-index: 9999;
    text-align: left;
    box-shadow: 0px 1px 8px 1px rgb(12 23 83 / 20%);
}
.cookie-card-pic {
    width: 60px;
    height: auto;
    margin-right: 20px;
    margin-left: 10px;
}
.cover-cookie-card span.t1 {
    display: block;
    flex: 1 1 auto;
    margin-right: 1em;
    max-width: 100%;
    line-height: 1.3;
}
.cover-cookie-card span.t1 a {
    color: #162570;
    transition: 0.25s;
    display: inline-block;
}
.cover-cookie-card span.t1 a:hover {
    color: #828282;
    transition: 0.25s;
}
.bt-accept-cookie a.accept {
    font-family: 'Roboto Condensed','Prompt';
    font-size: 17px;
    font-weight: 100;
    color: aliceblue;
    background-color: #172570;
    padding: 11.5px 50px;
    height: 45px;
    margin-right: 20px;
    transition: 0.25s;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.bt-accept-cookie a.accept:hover {
    background-color: #434343;
    transition: 0.25s;
}
.bt-accept-cookie a.accept:active, .bt-accept-cookie a.accept:focus {
	outline: none;
	border: none;
}
/* cookies policy */
.a-cookies-policy {
	color: #45906b;
    transition: 0.25s;
}
.a-cookies-policy:hover {
    color: #9c9c9c;
    transition: 0.25s;
}
a.cp-bt {
    font-family: 'Roboto Condensed','Prompt';
    font-style: normal;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    color: var(--color-whiteblue);
}
a.cp-bt:hover {
    color: #6e7698;
}
@media (max-width: 767px) {
    .cover-cookie-card {
        display: block;
    }
    .cover-cookie-card span.t1 {
        display: inline-block;
        flex: 1 1 auto;
        margin-right: 1em;
        max-width: 61%;
        line-height: 1.5;
        margin-left: 0px;
        float: left;
        font-size: 15px;
    }
    .cookie-card-pic {
        width: 60px;
        height: auto;
        display: block;
    }
    .cookie-card-pic {
        margin-bottom: 10px;
        margin-top: 0px;
    }
	.bt-accept-cookie a.accept {
	    display: inline-block;
	}
}
@media (max-width: 545px) {
    .cover-cookie-card span.t1 {
        max-width: 100%;
        padding-right: 0px;
        margin-bottom: 15px;
    }
}
@media (max-width: 426px) {
    .cover-cookie-card {
        padding: 15px 0px 20px 5px;
    }
    .cookie-card-pic {
        margin: auto;
        width: 60px;
        margin-bottom: 10px;
    }
    .cover-cookie-card span.t1 {
        max-width: 100%;
        margin-bottom: 15px;
        text-align: center;
        margin-right: 0px;
        padding: 3px 15px 3px 15px;
        font-size: 14px;
    }
    .bt-accept-cookie {
        text-align: center;
    }
    .bt-accept-cookie a.accept {
        margin-right: 0px;
        font-size: 14px;
    }
}