@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 | ------------------------------------------------------------------------------------------------------------ */ * { 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 { }f ::-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', Arial, Helvetica, sans-serif; color: var(--color-dropblack); font-size: 15px; -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', Arial, Helvetica, sans-serif; font-size: 15px; 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', Arial, Helvetica, sans-serif; font-size: 15px; 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: 15px; 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: 15px; 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: #333; --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-dropblack); -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-blue); } 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; 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: 32px; } 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-family: 'Roboto Condensed'; font-size: 14px; text-transform: uppercase; color: var(--color-drop2gray); z-index: 1 } label { display: inline-flex; padding-bottom: 5px; } /*html:lang(en) body { font-family: 'Roboto Condensed'; }*/ html:lang(th) body { font-family: 'Roboto', 'Prompt', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 15px; } html:lang(th) input { font-family: 'Roboto', 'Prompt', Arial, Helvetica, sans-serif; } html:lang(th) h1 { font-weight: 600 } html:lang(th) h2 { font-weight: 600 } html:lang(th) h3 { font-weight: 400 } html:lang(th) h4 { font-weight: 400 } html:lang(th) h5 { font-size: 19px; font-weight: 400 } html:lang(th) h6 { font-size: 17px; font-weight: 400 } html:lang(th) .header-fixed nav ul dl a { font-size: 15px; font-weight: 300 !important } html:lang(th) .nav-mobile aside ol li a { font-weight: 300; } html:lang(th) .banner article h1 { line-height: 1.2 } html:lang(th) .home-about main .text p { font-size: 19px; } html:lang(th) .home-training article .text p { font-size: 17px; } html:lang(th) .home-press article .text p { font-size: 17px; } html:lang(th) footer .footer-nav li.menu span { font-size: 16px; } html:lang(th) footer .footer-nav ol li a { font-size: 12.6px; } html:lang(th) .carousel-nav .carousel-cell .name { font-size: 18px; } html:lang(en) .editor b, .editor strong { font-weight: 600 !important; } /* ------------------------------------------------------------------------------------------------------------ | 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: 40px; 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: 17px; 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-family: 'Roboto Condensed','Prompt'; 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); -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-family: 'Roboto Condensed','Prompt'; font-weight: 400; 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: 600; } .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; width: 100%; height: 100%; overflow: hidden; } .banner p { font-size: 19px; } .banner main { position: relative; width: 100%; height: 100%; } .banner article { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; width: 100%; max-width: 1170px; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, .5); left: 0; margin: auto; 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%; display: flex; align-items: center; justify-content: center; text-align: center; background-size: cover; background-repeat: no-repeat; background-position: center; } .banner .background:before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(25, 65, 140, 0.4); } .banner .owl-item { height: 100%; } .banner .owl-carousel .owl-stage-outer { height: 100%; } .banner .owl-carousel .owl-stage { height: 100%; } .banner .owl-theme .owl-dots { z-index: 6666; } .banner .owl-theme .owl-nav.disabled+.owl-dots { bottom: 30px; } .banner .owl-theme .owl-dots .owl-dot span { margin: 0 7px; } /* Slider */ .lSSlideOuter .lSPager.lSpg { position: absolute; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; left: 0; width: 100%; 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; width: 50%; } .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); line-height: 1.2 } .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 h4 { font-size: 20px; font-weight: 500; z-index: 2; } .home-services li a { height: 100%; } .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 h4 { color: var(--color-white); } .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 { width: 30%; 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: 15px 0; } .home-certificate main .home-certificate-slider { display: flex; flex-wrap: wrap; justify-content: center; margin: auto; } .home-certificate main figure { position: relative; padding: 20px; background: var(--color-white) } .home-certificate main 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 { padding: 0 } .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) } .home-certificate .owl-theme .owl-nav.disabled+.owl-dots { bottom: -30px; } .home-certificate .owl-theme .owl-dots .owl-dot.active span { background: var(--color-blue) } .home-certificate .owl-theme .owl-dots .owl-dot span { background: var(--color-drop999) } .home-certificate .owl-theme .owl-dots .owl-dot:hover span { background: var(--color-sky); } /* ------------------------------------------------------------------------------------------------------------ | 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%; padding-top: 40px; 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%; padding-top: 20px; /*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 { padding-bottom: 40px; } .about-milestones .events-content h4 { padding-bottom: 0; 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: 1170px; min-height: 400px; margin: 0 auto; padding: 60px 0 ; z-index: 1 } .about-milestones .events-content li .box-detail { position: relative; width: 100%; } .about-milestones .events-content li .box-detail .row { display: flex; flex-wrap: wrap; margin: 0 -20px; } .about-milestones .events-content li .box-detail .box { width: 50%; padding: 0 20px; } .about-milestones .events-content li .box-detail .box img { padding: 15px 0; } /*.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%; padding: 60px 0; background: url(../images/about-vision-bg.jpg) no-repeat center; background-size: cover; } .about-vision .box { width: 100%; max-width: 1170px; margin: 0 auto; } .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 .left { width: 35%; } .about-vision article .right { width: 65%; } .about-vision article h2 { padding: 0; text-transform: uppercase; color: var(--color-blue); } .about-vision-img { width: 100%; max-width: 1170px; margin: auto; } /*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; flex: 1; padding-left: 15px; } .about-business-overview-center span { position: relative; width: 110px; 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: 0; 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 } /*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 { } .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 .title h2 { font-weight: 400; font-size: 32px; } .content-detail article .motto { padding-bottom: 40px; } .content-detail article .motto .title { text-transform: uppercase; padding-bottom: 10px; } .content-detail article .motto .title h2 { font-size: 36px; font-weight: 400; } .content-detail article h5 span { font-weight: inherit; color: var(--color-sky); } .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;*/border-top: 1px solid var(--color-dropdfdf) } .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 .in-menu h6 { text-transform: inherit; font-weight: 500; line-height: 1.3; } .content-submenu .in-menu h6 span { font-weight: inherit; } .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: -14px; top: 10px; -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 { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; } .investor .warpper { flex-wrap: wrap; } .investor .title { width: 100%; justify-content: flex-start; padding-bottom: 30px; } /* ------------------------------------------------------------------------------------------------------------ | 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: 0 15px; text-align: left; } .sustainability-award .list-award article h5 { text-transform: inherit; font-size: 17px; 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 h5 { padding-top: 30px; font-size: 20px; text-transform: inherit; color: var(--color-blue); } .detail-award figure { position: relative; width: 100%; background: var(--color-white); } .detail-award img { width: 100%; 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: 300px; 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 { } .esg-activity .select-filter .chosen-container { margin-right: 15px; } .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-latest li:last-child { display: none; } .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 .resp-tabs-list dt { min-width: 130px; } .clients-motto { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 50px 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 h5 { text-transform: inherit; font-weight: 500; } /* ------------------------------------------------------------------------------------------------------------ | 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 { position: relative; width: 100%; 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; /*border-bottom: 1px solid var(--color-dropdfdf)*/ } .training-list li:last-child { border-bottom: none; } .training-list .share-social { padding-bottom: 15px; } .training-list .month { position: relative; padding-bottom: 15px; color: var(--color-blue); font-weight: 500; font-size: 24px; } .training-list .date { width: 300px; } .training-list table { table-layout: fixed; width: 100%; margin: 0; padding: 0; border-collapse: collapse; } .training-list table th { padding: 15px; text-align: center; font-weight: 500; font-size: 18px; color: var(--color-blue); background: var(--color-dropwhite); border-top: 4px solid var(--color-blue); border-bottom: 1px solid var(--color-blue) } .training-list table tr { padding: 15px; border-bottom: 1px solid var(--color-dropdfdf); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /*.training-list table tr:nth-child(odd) { background: #f2f5fa } .training-list table tr:nth-child(even) { background: #fff }*/ .training-list table td { padding: 15px; font-size: 18px; text-align: left; border-right: 1px solid var(--color-dropdfdf); } .training-list table td:last-child { border-right: none; } .training-list table tr td:first-child { text-align: left; } .training-list table tr:hover { background: var(--color-dropwhite) ; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} .training-list table td small { display: block; font-size: 10px; color: #989fab; } .training-list table a { font-weight: 500; } .training-relate { margin-top: 50px; } .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; display: flex; flex-direction: column; justify-content: center; 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 .date .button-pdf a { display: inline-flex; position: relative; padding: 0; font-size: 15px; text-align: center; } .training-detail .date .button-pdf a:hover { color: var(--color-sky) !important } .training-detail .date .button-pdf span { position: relative; display: flex; align-items: center; z-index:1; } .training-detail .date .button-pdf span svg { width: 18px; height: 18px; margin-right: 5px; } .training-detail .date .button-pdf 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; } .training-detail .date .button-pdf 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; } .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-detail-apply { width: 100%; max-width: 720px; padding: 30px 40px; background: var(--color-white) url(../images/bg-content-2.png) no-repeat top left; } .training-detail-apply h3 { color: var(--color-blue) } .training-detail-apply ul { display: flex; flex-wrap: wrap; margin: 0 -15px; } .training-detail-apply li { position: relative; width: 50%; padding-top: 15px; padding-left: 15px; padding-right: 15px; } .training-detail-apply input { width: 100%; } .training-detail-apply li small { color: var(--color-drop999); } .training-detail-apply li.full { width: 100% } .training-detail-apply textarea { height: 100px; } .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 h3 { color: var(--color-blue) } .jobs-apply li { position: relative; 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: 1440px; 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: 50px 60px; 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: 45px; } .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: 0; } .contactus-support .contact-list dl { display: flex; flex-wrap: wrap; margin: 0 -20px; } .contactus-support .contact-list dt { width: 50%; padding: 0 20px 20px 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 p.position { padding-left: 0; margin-top: 0; color: var(--color-blue); } .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%; max-width: 1440px; margin: auto; 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 h5 { 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%; } footer .footer-address { position: relative; width: 50%; padding-left: 90px; } footer .footer-address h4 { font-weight: 600; color: var(--color-blue); } footer .footer-address p { padding: 5px 0 0 0; font-size: 15px; } footer .footer-address p span.tag { width: 100px; display: table-cell; font-weight: 400; color: var(--color-blue); } footer .footer-address p span.des { flex: 1; display: table-cell; } 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 .short-support { position: relative; width: 100%; } footer .short-support ul { display: flex; flex-wrap: wrap; /*margin: 0 -15px;*/ } footer .short-support li { display: flex; flex-wrap: wrap; align-items: center; width: 50%; padding: 0; } footer .short-support li a { display: flex; flex-wrap: wrap; align-items: center; } footer .short-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 .short-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 .short-support li h6 { padding-left: 15px; font-weight: 500; } footer .short-support li li svg { width: 100%; } footer .short-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 .short-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: 50% } footer .footer-follow ul { display: 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: 50%; margin-left: auto; } 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) } footer .copy .warpper p a {display: inline-flex; color: var(--color-whiteblue);} footer .copy .warpper p 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-box p { padding: 0; } .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: 1360px; 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 { display: inline-flex; 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: 88%; background: var(--color-blue); } .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: 0; 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: 10px 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 .row-center { display: flex; flex-wrap: wrap; align-items: center; } .editor .colum-50 { width: 50%; } .editor .esg-1-row { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--color-dropdfdf) } .editor .esg-1-colum-200 { width: 200px; padding: 15px; } .editor .esg-1-colum-full { flex: 1; 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); } .inside-img { margin: 0 auto; width: 100%; max-width: 1280px; padding: 30px 0 } .inside-img figure { position: relative; } .inside-img figure:after { content: ''; position: absolute; width: 50%; height: 10px; background: var(--color-blue); right: 0; bottom: -10px; } .inside-img img { display: block; } .inside-content { width: 100%; max-width: 80%; } .color-sky { color: var(--color-sky); } .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; } /* ------------------------------------------------------------------------------------------------------------ | Cookie | ------------------------------------------------------------------------------------------------------------ */ .cookie-consent { position: fixed; bottom: 10px; right: 0; left: 0; padding: 20px; width: 100%; max-width: 1660px; margin: 0 auto; z-index: 4 } .cookie-consent .box { position: relative; width: 100%; display: flex; flex-wrap: wrap; font-size: 14px; align-items: center; padding: 20px; background: var(--color-white); border-radius: 4px; box-shadow: 0px 1px 8px 1px rgb(12 23 83 / 20%); } .cookie-consent .text { flex: 1; padding-right: 20px; color: var(--color-black); } .cookie-consent .text p { margin-bottom: 0 } .cookie-consent .text a { display: inline-flex; color: var(--color-sky); } .cookie-consent .text a:hover { color: var(--color-blue); } .cookie-consent .btn-consent { margin-left: auto; display: flex; flex-wrap: wrap } .cookie-consent .btn-consent span { display: flex; flex-wrap: wrap; padding: 10px 15px; width: 150px; height: 40px; font-size: 14px; justify-content: center; align-items: center; cursor: pointer; color: #fff; background: var(--color-blue); border-radius: 4px; transition: all .3s ease } .cookie-consent .btn-consent span:hover { background: var(--color-sky); transition: all .3s ease } /* ------------------------------------------------------------------------------------------------------------ | 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; } .editor-row img { display: block; } .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 { background: 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: 400; 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; width: 40px; 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 } .error { color: #fa5058; font-size: 14px; font-weight: 400; order: 2; } .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-10 { margin-top: 10px !important } .mt-15 { margin-top: 15px !important } .mt-20 { margin-top: 20px !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; } .j-content-center { justify-content: center; } .full { width: 100% !important } /*Fancybox*/ .fancybox-close-small { position:absolute; top: -20px; right: -20px; width:40px; height:40px; padding:0; margin:0; border:0; border-radius:0; opacity: 1; outline:none; background:transparent; z-index:10; cursor:pointer } .fancybox-close-small:after { content:"×"; position:absolute; top:5px; right:5px; width:40px; height:40px; font:36px/40px Arial, Helvetica Neue, Helvetica, sans-serif; color:#162570; font-weight:300; text-align:center; border-radius:50%; border-width:0; background:#eaedff; transition:background .25s; box-sizing:border-box; } .fancybox-close-small:focus:after { /*outline:1px dotted #888*/ } .fancybox-close-small:hover:after { color:#188cde; background:#fff; } .fancybox-thumbs__list a:before { border: 4px solid var(--color-sky) } /**/ /*Flickity*/ .carousel-cell { width: 100%; max-width: 1440px; } .carousel.is-fullscreen .carousel-cell { height: 100%; } .carousel-cell img { display: block; max-height: 100%; } .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-family: 'Roboto Condensed'; 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: -12px; height: 25px; width: 68px; /* border-radius: 50%; border: 2px solid #dfdfdf;*/ background: url(../images/timeline-wait.png) no-repeat; -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);*/ background: url(../images/timeline-current.png) no-repeat; } .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);*/ background: url(../images/timeline-current.png) no-repeat; } .cd-horizontal-timeline .events a.older-event::after { /* border-color: var(--color-sky);*/ background: url(../images/timeline-current.png) no-repeat; } @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%); } } .grecaptcha-badge { right: -600px !important; }