@import url("fonts.css");

/*********************************RESET******************************/
*{margin:0;padding:0;box-sizing:border-box;}
.clear{ clear:both;}
.cfix:after, .container:after, .row:after {clear: both;}
.cfix:before, .cfix:after, .container:before, .container:after, .row:before, .row:after {content: "";display: table;}
img a{ border:none; }
img{ display:block; max-width:100%; }
a, button{text-decoration:none;color:inherit;transition: all .25s ease-in-out;}
a:hover,a:focus,a:active,button.btn:focus, button.btn:hover {outline:none;text-decoration:none;cursor:pointer;}
input:focus, button:focus, textarea:focus, select:focus{outline:none;transition: all .25s ease-in-out;}
h1,h2,h3,h4{font-weight:400}
p{ line-height:1.5; }
ul{ list-style:none;}
li{ list-style:none; }
strong{font-weight:700;}
html.sr .sr-hidden{ visibility:hidden; }/* class to prevent scrollreveal flickering*/
/*hide scrollbar*/
html{ scrollbar-width:none; }/*ff*/
::-webkit-scrollbar{ display:none; }/*chrome/edge*/

/*
fonts
font-family: "neue-haas-grotesk-display", sans-serif; 400-500-600-700 light-roman-medium-bold
font-family: "mango-grotesque", sans-serif; 500 medium
*/

:root { 
--dark:#011E35;
--dark2:#002746;
--dark3:#1b1e21;
--light:#f4faff;
--light2:#f0f4f8;
--light3:#d7e0e7;
--light4:#c3d4e4;
--light5:#b2c3d3;
--grey:#29435c;
--grey2:#6d879c;
--grey3:#73838f;
--main:#005da8;
--main2:#00457c;
}

/*********************************BASE******************************/
body{ background:var(--light); font-family: "neue-haas-grotesk-display", sans-serif; font-size:24px; font-weight:400; line-height:1; position:relative; overflow-x:hidden; color:var(--dark); }
body.dark{ background:var(--dark); color:var(--light2); }
body.blocked{ overflow:hidden; }
.outer-body{ /*overflow-x:hidden;*/ }
.trans{ transition: all .25s ease-in-out; }
h1,h2,h3,h4,h5,.f-title{ font-family: "mango-grotesque", sans-serif; font-weight:500; text-transform:uppercase; line-height:1; }
.italic{  }
.t-br{ display:block; }
.center{ text-align:center; }
p{ font-family: "neue-haas-grotesk-display", sans-serif; }
p a{ text-decoration:underline; }
p a:hover{ opacity:0.4; text-decoration:underline; }
.wysiwyg h1,.wysiwyg h2{ font-size:1.9em; margin:0 0 10px; }
.wysiwyg h3,.wysiwyg h4,.wysiwyg h5,.wysiwyg h6{ font-size:1.6em; margin:0 0 10px; }
.wysiwyg p{ margin:0 0 20px; }
.wysiwyg ul{ margin:0 0 20px; padding:0 0 0 30px; font-family: "neue-haas-grotesk-display", sans-serif; }
.wysiwyg li{ margin:0 0 10px; list-style:disc; }
sup{ vertical-align: super; font-size: smaller; }
.underline{ text-decoration:underline; }
.nw{ white-space:nowrap; }
.round{ border-radius:8px; }
a:hover{ }
.container{ margin:0 auto; position:relative; max-width:1740px; /*1680*/ width:100%; padding:0 30px; }
.container.xsm{ max-width:1220px; /*1160*/ }
.container.sm{ max-width:1420px; /*1360*/ }
.container.md{ max-width:1620px; /*1560*/ }
.container.lg{ max-width:1960px; /*1900*/ }
/*.container:after{ clear: both; content: ""; display: block; height: 0; line-height: 0;  visibility: hidden; }*/
.fcol{ display:flex; flex-direction:column; }
.fcenter{ display:flex; justify-content:center; align-items:center; }
b, strong, .strong{ font-weight:700; }
.btn{ font-size:18px; font-weight:600; display:flex; justify-content:center; align-items:center; height:66px; width:fit-content; padding:0 32px; background:var(--main); border:2px solid var(--main); border-radius:6px; color:#fff; }
.btn:hover{ background-color:var(--main2); border-color:var(--main2); color:#fff; }
.btn.light{ background:var(--light); border:2px solid var(--light); color:var(--dark); }
.btn.light:hover{ background-color:var(--main2); border-color:var(--main2); color:#fff; }
.btn.dark{ background:var(--dark); border:2px solid var(--dark); color:#fff; }
.btn.dark:hover{ background-color:var(--dark2); border-color:var(--dark2); color:#fff; }
.btn .arrow{ width:16px; height:auto; margin:0 0 0 24px; }
.btn.light .arrow{ color:var(--main); }
.btn.light:hover .arrow{ color:#fff; }
@media (max-width: 1679px) {

}
@media (max-width: 1479px) {

}
@media (max-width: 1359px) {

}
@media (max-width: 1279px) {
	
}
@media (max-width: 1019px) {
	.container.mobile{ max-width:700px; }
}
@media (max-width: 879px) {
	
}
@media (max-width: 759px) {
	
}
@media (max-width: 619px) {
	body{ font-size:15px; }
	.container{ padding:0 20px; }
	.btn{ padding:0 26px; height:50px; font-size:13px; border-width:1px; }
    .btn .arrow{ width:12px; margin:0 0 0 15px; }
}

/*FORM*/
.outer-form input.input,
.outer-form textarea.input,
.outer-form select.input{ font-size:18px; padding:25px 30px; border-radius:6px; font-family: "neue-haas-grotesk-display", sans-serif; font-weight:500; width:100%; border:2px solid var(--light3); background:var(--light3); color:var(--dark);  }
.outer-form input.input::placeholder,
.outer-form textarea.input::placeholder{ color:var(--grey3); }
.form-row .input:focus{ border:2px solid var(--grey3); }
.form-row .input.in-error{ border-color:#dd0000; }
.form-row textarea.input{ height:200px; resize:none; }
.form-row select.input{ -moz-appearance:none; -webkit-appearance:none; background:url("../img/icn/angle-down.svg") right 20px center no-repeat var(--light3); background-size:18px auto; padding-right:50px; }
.form-row  select.input::-ms-expand{ display:none; }
.form-row{ margin:0 0 0 -20px; }
.form-row .lg{ display:flex; flex-direction:column; width:100%; padding:20px 0 0 20px; }
.form-row .md{ display:flex; flex-direction:column; width:50%; padding:20px 0 0 20px; position:relative; }
.outer-form .text-danger{ margin:5px 0 0; font-size:15px; font-weight:700; color:#dd0000; }
.outer-form .form-bottom{ text-align:center; }
.outer-form .alert{ margin:30px 0 0; padding:30px 4vw; font-size:15px; line-height:1.3; border:1px solid var(--dark); border-radius:6px; }
.outer-form .alert-success{ color:#155724; background-color:#d4edda; border-color:#c3e6cb; }
.outer-form .alert-failed{ color:#dd0000; background-color:#f8d7da; border-color:#f5c6cb; }
.outer-form .btn{ margin:30px auto 0; min-width:200px; font-family: "neue-haas-grotesk-display", sans-serif; border:none; color:#fff;  }
.outer-form .btn:hover{  }
.outer-form .note{ font-size:13px; margin-top:20px; }
.form-item{ margin:20px 0 0; }
.outer-form .fl{ position:relative; }
.outer-form .fl .input{ background:var(--light); }
.outer-form .fl .input::placeholder{ color:transparent; }
.outer-form .fl .input:not(:placeholder-shown){ border-color:var(--light3); }
.outer-form .fl .input:focus{ border-color:var(--grey3); }
.outer-form .fl .label{ position:absolute; left:20px; top:29px; font-size:18px; font-weight:500; padding:0 10px; background:var(--light); color:var(--grey3); pointer-events: none;  }
.outer-form .fl .input:focus+.label,
.outer-form .fl .input.input:not(:placeholder-shown)+.label{ top:-7px; font-size:16px; }
/*.file-choice{ margin:50px 0 0; }
.file-choice .wrap{ justify-content:space-between; align-items:center; }
.file-choice .desc{ padding:0 80px 0 0; font-size:18px; }
.file-choice .line{ height:2px; flex-grow:1; background:var(--main); }
.file-choice .options{ padding:0 0 0 80px; }
.file-choice .options>div{ display:flex; }
.file-choice .options a{ font-size:18px; height:60px; padding:0 40px; border:2px solid var(--dark2); }
.file-choice .options a+a{ margin:0 0 0 20px; }
.file-choice .options a:hover{ border-color:var(--dark3); }
.file-choice .options a.active{ background:var(--dark2); border-color:var(--dark2); }
#file{ display:none; }
#file.active{ display:block; }*/
.label-file input[type="file"]{position:absolute; left:-9999em; }
.label-file{cursor:pointer;	border:2px dashed var(--light3); border-radius:6px; padding:40px; margin:0; display:block;}
.label-file:hover{border-color:var(--grey3);}
.label-file .wrap{ align-items:center; justify-content:center; }
.label-file .icn{ width:21px; }
.label-file .desc{ padding:0 0 0 20px; }
.label-file .desc .lg{ font-size:18px; font-weight:600; margin:0 0 5px; color:var(--grey3); }
.label-file .desc .sm{ font-size:14px; color:var(--grey3);  }
@media (max-width: 1019px) {
	.form-row .md{ width:100%; }
	/*.file-choice .desc{ padding:0; }
	.file-choice .line{ margin:30px 0; width:100%; }
	.file-choice .options{ padding:0; }*/
}
@media (max-width: 619px) {
	.outer-form input.input,
	.outer-form textarea.input,
	.outer-form select.input{ font-size:14px; padding:18px 20px; border-width:2px; }
	.outer-form select.input{ background-position:right 15px center; background-size:12px auto; }
	.form-row .lg{ padding:15px 0 0 20px; }
	.form-row .md{ width:100%; padding:20px 0 0 20px; }
	.outer-form .btn svg{ width:10px; margin:0 0 0 10px; }
	.outer-form .text-danger{ font-size:13px; }
	.outer-form .alert{ font-size:13px; border-radius:12px; }
	.outer-form .note{ font-size:10px; }
    .outer-form .fl .label{ left:10px; top:20px; font-size:14px;  }
    .outer-form .fl .input:focus+.label,
    .outer-form .fl .input.input:not(:placeholder-shown)+.label{ top:-5px; font-size:13px; }
	/*.file-choice .desc{ font-size:13px; }
	.file-choice .line{ margin:20px 0; }
	.file-choice .options a{ font-size:10px; height:40px; padding:0 20px; }
	.file-choice .options a+a{ margin:0 0 0 10px; }*/
	.label-file .desc{ padding:20px 0 0; width:100%; text-align:center; }
	.label-file .desc .f-title .lg{ font-size:14px; }
	.label-file .desc .f-title .sm{ font-size:12px; }
}

/*LAYOUT*/
.wrap{ display:flex; flex-flow:row wrap; }
.wrap-alt, .wrap-alt-sm, .wrap-alt-xsm{ display:flex; flex-flow:row wrap; flex-direction:row-reverse; }
.wrap-center{ display:flex; flex-flow: row wrap; justify-content: center;}
@media (max-width: 1279px) {
	.wrap-alt{ flex-direction:row; }	
}
@media (max-width: 1019px) {
	.wrap-alt-sm{ flex-direction:row; }	
}
@media (max-width: 759px) {
	.wrap-alt-xsm{ flex-direction:row; }	
}

/*LOCOMOTIVE*/
body{ height:100vh; }
.c-scrollbar{ z-index:6; }
.scroll-view{ transition: all .7s ease-in-out; }
.scroll-view{ opacity:0; transform:translateY(60px); }
.scroll-view.from-left{ transform:translateX(-60px); }
.scroll-view.fade{ transform:none; }
.scroll-view.delay-1{ transition-delay:0.2s; }
.scroll-view.is-inview,
.scroll-view.from-left.is-inview{ opacity:1; transform:none; } 

/*HEADER*/
.main-header{ padding:20px 0; /*border-bottom:1px solid var(--light4);*/ background:var(--light); position:relative; z-index:5; }
body.dark .main-header{ border-bottom:1px solid var(--light4); }
/*.main-header.scroll{ position:fixed; top:0; left:0; }*/
.main-header .wrap{ justify-content:space-between; align-items:center; }
.main-header .logo{ /*width:300px; justify-content:center;*/ }
.main-header .btns{ /*width:300px;*/ }
.main-header .btns .inner{ display:flex; justify-content:flex-end; }
.main-header .btns .btn.lang{ font-size:14px; padding:0 15px; margin:0 10px 0 0; border-color:var(--light4); background:var(--light4); color:var(--dark); }
.main-header .btns .btn.lang:hover{ background-color:var(--light5); border-color:var(--light5); }
@media (max-width: 879px) {
    .main-header .logo{ width:140px; }
}
@media (max-width: 619px) {
    .main-header .logo{ width:100px; }
    .main-header .btns .btn.lang{ font-size:12px; margin:0 5px 0 0; }
}

/*BACK TO TOP*/
#back-to-top{ display:flex; width:50px; height:50px; border-radius:6px; background-color:var(--main); color:#fff; position:fixed; right:15px; bottom:5px; visibility:hidden; opacity:0; z-index:4; }
#back-to-top.scroll{ bottom:15px; visibility:visible; opacity:1; }
#back-to-top:hover{ background-color:var(--main2);  color:#fff; }
#back-to-top svg{ width:18px; transform:rotate(-90deg); }
@media (max-width: 619px) {
	#back-to-top{ width:50px; height:50px; right:15px; bottom:5px; }
    #back-to-top.scroll{ bottom:15px; }
    #back-to-top svg{ width:15px; }
}
    
/*FOOTER*/
.main-footer .dark{ background:var(--dark); color:#fff; }
.main-footer .dark .row-2-outer{ border-bottom:1px solid var(--grey); }
.main-footer .dark .row-2 .col-1{ width:50%; padding:25px 80px 25px 0; border-right:1px solid var(--grey); justify-content:center; }
.main-footer .dark .row-2 .col-2{ width:50%; padding:25px 0 25px 80px; justify-content:center; }
.main-footer .dark .row-2 .inner{ display:flex; align-items:center; gap:30px; line-height:1.2; }
.main-footer .dark .row-2 .inner .icn{ width:50px; flex-shrink:0; }
.main-footer .dark .row-2 .inner .desc a:hover{ color:var(--main); }
.main-footer .dark .row-3{ padding:25px 0; display:flex; justify-content:space-between; align-items:center; }
.main-footer .dark .row-3 .col-1{ width:50%; padding:0 80px 0 0; align-items:flex-start; }
.main-footer .dark .row-3 .col-2{ width:50%; display:flex; justify-content:flex-end; align-items:center; gap:40px; }
.main-footer .dark .row-3 a:hover{ opacity:0.6; }
.main-footer .bottom-bar{ padding:20px 0; font-size:14px; background:var(--light); color:var(--dark); }
.main-footer .bottom-bar a:hover{ opacity:0.6; }
.main-footer .bottom-bar .inner{ display:flex; justify-content:center; align-items:center; }
.main-footer .bottom-bar .col-1{ display:flex; align-items:center; gap:40px; }
.main-footer .bottom-bar .dgk a{ display:inline-flex; align-items:center; }
.main-footer .bottom-bar .dgk a img{ width:28px; margin:0 0 0 8px; }
@media (max-width: 1479px) {
    .main-footer .dark .row-2 .inner{ gap:20px; }
    .main-footer .dark .row-2 .col-1{ padding:25px 50px 25px 0; }
    .main-footer .dark .row-2 .col-2{ padding:25px 0 25px 50px; }
}
@media (max-width: 1019px) {
    .main-footer .dark .row-2-outer{ border:0; }
    .main-footer .dark .row-2 .col-1{ width:100%; padding:25px 0; border-bottom:1px solid var(--grey); border-right:none; }
    .main-footer .dark .row-2 .col-2{ width:100%; padding:25px 0; }
    .main-footer .bottom-bar .col-1{ gap:30px; }
}
@media (max-width: 619px) {
    .main-footer .dark .row-2 .inner .icn{ width:30px; }
    .main-footer .dark .row-2 .inner .icn img{ height:30px; }
    .main-footer .dark .row-3 .col-1{ width:35%; padding:0 40px 0 0; }
    .main-footer .dark .row-3 .col-2{ width:65%; gap:20px; }
    .main-footer .dark .row-3 .col-2 a{ max-width:30%; max-height:10vw; }
    .main-footer .bottom-bar{ font-size:8px; }
    .main-footer .bottom-bar .col-1{ gap:15px; }
    .main-footer .bottom-bar .dgk a img{ width:20px; margin:0 0 2px 5px; }
    .main-footer .bottom-bar .col-2 a img{ height:20px; }
}

/*PORTAL*/
.portal{ padding:0 5px; }
.portal .container{ padding:0; max-width:2000px; }
.portal .item{ width:25%; padding:5px; }
.portal .item:nth-child(2){ transition-delay:0.2s; }
.portal .item:nth-child(3){ transition-delay:0.4s; }
.portal .item:nth-child(4){ transition-delay:0.6s; }
.portal .item .box{ min-height:420px; height:calc(100dvh - 180px); max-height:800px; border-radius:6px; overflow:hidden; position:relative; background:center center / cover no-repeat var(--light4); }
.portal .item.bg-1 a.box{ background-image:url("../img/portal-bg-ebm-laser.jpg"); }
.portal .item.bg-2 a.box{ background-image:url("../img/portal-bg-despres.jpg"); }
.portal .item.bg-3 a.box{ background-image:url("../img/portal-bg-kamellya.jpg"); }
.portal .item.bg-4 a.box{ background-image:url("../img/portal-bg-qualitech.jpg"); }
.portal .item a.box:before{ content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:var(--dark3); opacity:0.6; transition: all .25s ease-in-out; }
.portal .item a.box:hover:before{ opacity:0.9; }
.portal .item .box .inner{ padding:30px; position:absolute; width:100%; height:100%; top:0; left:0; flex-direction:column; }
.portal .item .box .ad-icn{ max-width:60%; }
.portal .item .box .desc{ font-size:24px; font-weight:600; margin:40px 0 0; text-align:center; }
.portal .item a.box .icn{ width:70px; height:70px; border-radius:6px 6px 0 0; background:var(--main); position:absolute; left:50%; bottom:-30px; margin:0 0 0 -35px; opacity:0; }
.portal .item a.box:hover .icn{ bottom:0; opacity:1; }
.portal .item a.box .icn img{ width:24px; }
.portal .item a.box:hover .icn img{ transform:rotate(-45deg); }
@media (max-width: 1279px) and (orientation: portrait) {
    .portal .item{ width:50%; }
    .portal .item .box{ height:calc(50dvh - 100px); }
}
@media (max-width: 879px) {
    .portal .item .box .desc{ font-size:20px; }
}
@media (max-width: 619px) {
    .portal .item .box{ min-height:200px; height:calc(50dvh - 80px); }
    .portal .item .box .desc{ font-size:14px; margin:20px 0 0; }
    .portal .item a.box .icn{ width:50px; height:50px; margin:0 0 0 -25px; }
    .portal .item a.box .icn img{ width:18px; }
}

/*HERO*/
.hero-1{ background:url("../img/bg-career.jpg") center center / cover no-repeat var(--dark); }
.hero-1 .title{ min-height:700px; height:calc(100dvh - 112px); padding:80px 0; justify-content:flex-end; }

.hero-2{ position:relative; }
.hero-2 .outer-img{ min-height:480px; height:calc(100dvh - 112px); max-height:900px; justify-content:flex-end; overflow:hidden; position:relative; }
.hero-2 .inner-img{ position:absolute; top:-50px; bottom:-50px; width:100%; left:0; }
.hero-2 .outer-img img{ min-height:480px; height:calc(100dvh - 12px); max-height:1000px; object-fit:cover; width:100%; }
.hero-2 .title{ padding:80px 0; position:absolute; left:0; bottom:0; width:100%; }
.hero-2 .title .tag{ padding:12px 20px; font-size:20px; font-weight:600; border-radius:4px; margin:0 0 40px; width:fit-content; background:var(--main2); }
.hero-2 .title h1{ font-size:120px; line-height:1; color:#fff; max-width:1200px; text-wrap:balance; }
@media (max-width: 1479px) {
    .hero-2 .title h1{ font-size:100px; }
}
@media (max-width: 879px) {
    .hero-2 .outer-img{ max-height:700px; }
    .hero-2 .outer-img img{ max-height:800px; }
}
@media (max-width: 619px) {
    .hero-2{ overflow-x:clip; }
    .hero-2 .outer-img{ min-height:280px; max-height:400px; }
    .hero-2 .outer-img img{ min-height:280px; max-height:500px; }
    .hero-2 .title{ padding:50px 0; }
    .hero-2 .title .tag{ padding:8px 15px; font-size:12px; margin:0 0 20px; }
    .hero-2 .title h1{ font-size:60px; }
}

.hero-3{ position:relative; }
.hero-3 .outer-img{ min-height:480px; height:calc(100dvh - 232px); max-height:900px; justify-content:flex-end; overflow:hidden; position:relative; }
.hero-3 .inner-img{ position:absolute; top:-100px; bottom:0; width:100%; left:0; }
.hero-3 .outer-img img{ min-height:480px; height:calc(100dvh - 132px); max-height:1000px; object-fit:cover; width:100%; }
.hero-3 .title{ padding:80px 0; position:absolute; left:0; bottom:0; width:100%; }
.hero-3 .title .tag{ padding:12px 20px; font-size:20px; font-weight:600; border-radius:4px; margin:0 0 40px; width:fit-content; background:var(--main2); }
.hero-3 .title h1{ font-size:120px; line-height:1; color:#fff; max-width:800px; text-wrap:balance; }
@media (max-width: 1479px) {
    .hero-3 .title h1{ font-size:100px; }
}
@media (max-width: 879px) {
    .hero-3 .outer-img{ max-height:700px; }
    .hero-3 .outer-img img{ max-height:800px; }
}
@media (max-width: 619px) {
    .hero-3{ overflow-x:clip; }
    .hero-3 .outer-img{ min-height:280px; max-height:400px; }
    .hero-3 .outer-img img{ min-height:280px; max-height:500px; }
    .hero-3 .title{ padding:50px 0; }
    .hero-3 .title .tag{ padding:8px 15px; font-size:12px; margin:0 0 20px; }
    .hero-3 .title h1{ font-size:60px; }
}

/*CONTENT SECTIONS*/
.cs-1{ padding:160px 0 0; }
.cs-1 .col-1{ width:60%; padding:0 0 0 100px; align-items:flex-end; justify-content:center; transition-delay:0.4s; }
.cs-1 .col-1>div{ max-width:800px; }
.cs-1 .col-1 h2{ font-size:100px; margin:0 0 40px; text-wrap:balance; }
.cs-1 .col-2{ width:40%; }
@media (max-width: 1479px) {
    .cs-1 .col-1 h2{ font-size:80px; margin:0 0 30px; }
}
@media (max-width: 1019px) {
    .cs-1 .col-1{ width:100%; padding:0 0 50px; transition-delay:0s; }
    .cs-1 .col-2{ width:100%; }
}
@media (max-width: 619px) {
    .cs-1{ padding:100px 0 0; }
    .cs-1 .col-1 h2{ font-size:50px; margin:0 0 20px; }
}

.cs-2{ padding:180px 0; text-align:center; overflow-x:clip; }
.cs-2 .title{ padding:0 0 30px; margin:0 0 30px; border-bottom:2px solid var(--grey); }
.cs-2 .title h2{ font-size:100px; text-wrap:balance;  }
.cs-2 .items{ margin:0 -30px; }
.cs-2 .item{ width:25%; padding:30px; }
.cs-2 .item:nth-child(4n+2){ transition-delay:0.2s; }
.cs-2 .item:nth-child(4n+3){ transition-delay:0.4s; }
.cs-2 .item:nth-child(4n+4){ transition-delay:0.6s; }
.cs-2 .item img{ margin:0 auto 20px; }
.cs-2 .item h3{ font-size:42px; text-wrap:balance; }
@media (max-width: 1019px) {
    .cs-2 .title h2{ font-size:80px; }
    .cs-2 .item{ width:50%; }
    .cs-2 .item:nth-child(4n+2){ transition-delay:0s; }
    .cs-2 .item:nth-child(4n+3){ transition-delay:0s; }
    .cs-2 .item:nth-child(4n+4){ transition-delay:0s; }
    .cs-2 .item:nth-child(2n+2){ transition-delay:0.2s; }
}
@media (max-width: 619px) {
    .cs-2{ padding:100px 0; }
    .cs-2 .title h2{ font-size:50px; }
    .cs-2 .item{ width:100%; }
    .cs-2 .item:nth-child(2n+2){ transition-delay:0s; }
    .cs-2 .item h3{ font-size:32px; }
}

.cs-3 .box{ width:50%; min-height:600px; padding:100px; background:var(--light); text-align:center;  }
.cs-3 .box:hover{ background:var(--light3); }
.cs-3 .box:nth-child(2){ border-left:1px solid var(--light3); }
.cs-3 .box:nth-child(2) .inner{ transition-delay:0.2s; }
.cs-3 .box .f-title{ font-size:100px; color:var(--dark); }
.cs-3 .box .icn{ width:70px; height:70px; border-radius:6px; margin:40px auto 0; background:var(--main); }
.cs-3 .box:hover .icn{ background:var(--main2); transform:scale(0.9); }
.cs-3 .box .icn>img{ width:24px; }
@media (max-width: 1279px) {
    .cs-3 .box .f-title{ font-size:70px; }
}
@media (max-width: 879px) {
    .cs-3 .box{ width:100%; min-height:0; padding:100px 30px;  }
    .cs-3 .box:nth-child(2){ border-left:0; border-top:1px solid var(--light3); }
    .cs-3 .box:nth-child(2) .inner{ transition-delay:0s; }
}
@media (max-width: 619px) {
    .cs-3 .box .f-title{ font-size:50px; }
    .cs-3 .box .icn{ width:50px; height:50px; margin:30px auto 0; }
    .cs-3 .box .icn>img{ width:19px; }
}

.cs-4{ padding:160px 0; background:var(--main2); overflow:hidden; }
.cs-4 .col-1{ width:35%; padding:0 100px 0 0; justify-content:center; }
.cs-4 .col-1 h2{ font-size:100px; }
.cs-4 .col-2{ width:65%; transition-delay:0.2s; }
.cs-4 .outer-slider{ width:calc(100% + 500px); margin:0 -500px 0 0; position:relative; }
.cs-4 .inner-slide{ padding:0 20px 0 0; }
.cs-4 .inner-slide img{ width:100%; border-radius:8px; }
.cs-4 .nav-slider{ display:flex; gap:10px; margin:30px 0 0; }
.cs-4 .nav-slider .control{ width:70px; height:70px; border-radius:6px; background:var(--dark); color:#fff; cursor:pointer; }
.cs-4 .nav-slider .control:hover{ background:var(--dark2); color:#fff; }
.cs-4 .nav-slider .control svg{ width:19px; }
.cs-4 .nav-slider .prev svg{ transform:rotate(-180deg); }
@media (max-width: 1479px) {
    .cs-4 .col-1 h2{ font-size:80px; }
    .cs-4 .outer-slider{ width:calc(100% + 300px); margin:0 -300px 0 0; }
}
@media (max-width: 1279px) {
    .cs-4 .col-1 h2{ font-size:70px; }
}
@media (max-width: 1019px) {
    .cs-4 .col-1{ width:100%; padding:0 0 50px; }
    .cs-4 .col-1 h2{ font-size:100px; }
    .cs-4 .col-2{ width:100%; transition-delay:0s; }
}
@media (max-width: 619px) {
    .cs-4{ padding:100px 0; }
    .cs-4 .col-1 h2{ font-size:60px; text-wrap:balance; }
    .cs-4 .nav-slider .control{ width:50px; height:50px; }
    .cs-4 .nav-slider .control svg{ width:15px; }
}

.cs-5{ padding:180px 0; background:var(--light); }
.cs-5 .container{ max-width:1000px; }
.cs-5 .title h2{ font-size:100px; margin:0 auto 30px; text-align:center; text-wrap:balance; color:var(--dark); }
.cs-5 .note{ font-size:14px; color:var(--grey2); }
@media (max-width: 1019px) {
    .cs-5 .title h2{ font-size:70px; }
}
@media (max-width: 619px) {
    .cs-5{ padding:100px 0; }
    .cs-5 .title h2{ font-size:40px; margin:0 auto 10px; }
}

.cs-6 .bar{ padding:20px 0; background:var(--main2); display:flex; height:120px; align-items:center; overflow:hidden; }
.cs-6 .bar .wrap{ justify-content:space-between; align-items:center; }
.cs-6 .bar .col-1{ padding:0 30px 0 0; font-size:20px; font-weight:600; }
.cs-6 .bar .col-2{ display:flex; }
.cs-6 .bar .col-2 .outer-select{ width:500px; max-width:30vw; margin:0 0 0 10px; }
.cs-6 .bar .col-2 .outer-select select{ font-size:18px; font-weight:600; padding:24px 30px; width:100%; border-radius:6px; border:none; color:#fff; font-family: "neue-haas-grotesk-display", sans-serif; -moz-appearance:none; -webkit-appearance:none; background:url("../img/icn/angle-down.svg") right 20px center no-repeat var(--dark); background-size:16px auto; padding-right:50px; }
.cs-6 .bar .col-2 .outer-select select::-ms-expand{ display:none; }
.cs-6 .bar .col-2 .outer-select select:focus{ background-color:var(--dark2); }
.cs-6 .listing{ padding:100px 0 160px; }
.cs-6 .masonry-items{ position:relative; margin:0 -30px; }
.cs-6 .masonry-items .item{ position:absolute; }
.cs-6 .listing .item a{ padding:30px; border-radius:8px; border:2px solid var(--grey); display:block; }
.cs-6 .listing .item a:hover{ border-color:var(--main2); background:var(--main2); }
.cs-6 .listing .item .desc{ margin:20px 0 0; }
.cs-6 .listing .item .desc>.wrap{ align-items:center; }
.cs-6 .listing .item .desc .dd{ width:calc(100% - 45px); padding:0 20px 0 0; }
.cs-6 .listing .item .desc .dd h2{ font-size:45px; }
.cs-6 .listing .item .desc .icn{ width:45px; height:45px; border-radius:6px; background:var(--main); flex-shrink:0; }
.cs-6 .listing .item a:hover .desc .icn{ background:#fff; color:var(--main2); }
.cs-6 .listing .item .desc .icn>svg{ width:15px; }
@media (max-width: 619px) {
    .cs-6 .bar{ padding:30px 0; display:block; height:auto; }
    .cs-6 .bar .wrap{ display:block; }
    .cs-6 .bar .col-1{ width:100%; font-size:16px; padding:0 0 10px; }
    .cs-6 .bar .col-2{ display:block; }
    .cs-6 .bar .col-2 .outer-select{ width:100%; max-width:100%; margin:10px 0 0; }
    .cs-6 .bar .col-2 .outer-select select{ font-size:14px; padding:20px 24px; background-size:12px auto; padding-right:50px; }
    .cs-6 .listing{ padding:50px 0 100px; }
    .cs-6 .masonry-items{ margin:0 -20px; }
    .cs-6 .listing .item .logo img{ height:26px; }
    .cs-6 .listing .item .desc .dd h2{ font-size:35px; }
}

.cs-7{ padding:120px 0; background:var(--main2); text-align:center; }
.cs-7 .title h2{ font-size:90px; }
.cs-7 .title .btns{ margin:30px auto 0; }
@media (max-width: 619px) {
    .cs-7{ padding:100px 20px; }
    .cs-7 .title h2{ font-size:50px; }
}

.cs-8{ padding:100px 0 180px; }
.cs-8 .top{ display:flex; justify-content:space-between; align-items:center; padding:0 0 30px; border-bottom:2px solid var(--grey); margin:0 0 30px; }
.cs-8 .top .col-1 .back-btn{ display:flex; align-items:center; }
.cs-8 .top .col-1 .back-btn:hover{ color:var(--main2); }
.cs-8 .top .col-1 .back-btn .icn{ width:40px; height:40px; border-radius:6px; background:var(--grey); color:#fff; flex-shrink:0; }
.cs-8 .top .col-1 .back-btn:hover .icn{ background:var(--main2); }
.cs-8 .top .col-1 .back-btn .icn>svg{ width:12px; transform:rotate(180deg); }
.cs-8 .top .col-1 .back-btn .f-title{ font-size:26px; padding:2px 0 0 10px; }
.cs-8 .top .col-2 .f-title{ font-size:26px; }
.cs-8 .content .title{ max-width:1200px; margin:50px 0 100px; }
.cs-8 .content .title .logo img{ height:50px; }
.cs-8 .content .title h1{ font-size:100px; margin:40px 0 0; }
.cs-8 .content .col-1{ width:calc(100% - 400px); padding:0 0 0 100px; align-items:flex-end; }
.cs-8 .content .col-1>div{ max-width:1000px; }
.cs-8 .content .col-1 h2{ font-size:60px; margin:0 0 20px; }
.cs-8 .content .col-1 .wysiwyg{ margin:0 0 100px; }
.cs-8 .content .col-1 .icn-list li{ display:flex; margin:0 0 20px; }
.cs-8 .content .col-1 .icn-list li .icn{ width:28px; flex-shrink:0; }
.cs-8 .content .col-1 .icn-list li .desc{ padding:3px 0 0 10px; }
.cs-8 .content .col-2{ width:400px; }
.cs-8 .content .col-2 .box{ padding:30px; margin:0 0 10px; border-radius:8px; border:2px solid var(--grey); display:flex; align-items:center; }
.cs-8 .content .col-2 .box .icn{ width:60px; flex-shrink:0; }
.cs-8 .content .col-2 .box .desc{ padding:0 0 0 20px; }
.cs-8 .content .col-2 .box .desc .lg{ font-weight:600; }
.cs-8 .content .col-2 .box .desc .sm{ font-size:21px; margin:5px 0 0; }
.cs-8 .content .col-2 .btns .btn{ width:100%; }
@media (max-width: 1019px) {
    .cs-8 .content .col-1{ width:100%; padding:0 0 50px; align-items:flex-start; }
    .cs-8 .content .col-2{ width:100%; }
}
@media (max-width: 619px) {
    .cs-8{ padding:50px 0 100px; }
    .cs-8 .top .col-1 .back-btn .icn{ width:32px; height:32px; border-radius:4px; }
    .cs-8 .top .col-1 .back-btn .icn>svg{ width:10px; }
    .cs-8 .top .col-1 .back-btn .f-title{ font-size:20px; padding:1px 0 0 8px; }
    .cs-8 .top .col-2 .f-title{ font-size:20px; }
    .cs-8 .content .title{ margin:30px 0 50px; }
    .cs-8 .content .title .logo img{ height:40px; }
    .cs-8 .content .title h1{ font-size:50px; margin:40px 0 0; }
    .cs-8 .content .col-1 h2{ font-size:40px; margin:0 0 20px; }
    .cs-8 .content .col-1 .wysiwyg{ margin:0 0 50px; }
    .cs-8 .content .col-1 .icn-list li{ line-height:1.3; }
    .cs-8 .content .col-1 .icn-list li .icn{ width:20px; }
    .cs-8 .content .col-1 .icn-list li .desc{ padding:2px 0 0 10px; }
    .cs-8 .content .col-2 .box .icn{ width:50px; }
    .cs-8 .content .col-2 .box .desc .lg{ font-size:18px; }
    .cs-8 .content .col-2 .box .desc .sm{ font-size:15px; }
}

.cs-error{ padding:30vh 0; text-align:center; border-bottom:1px solid var(--grey); }
.cs-error .lg{ font-size:100px; margin:0 0 20px; }
.cs-error .sm{ font-size:30px; line-height:1.2; }
.cs-error .btns{ margin:40px auto 0; }
@media (max-width: 619px) {
    .cs-error{  }
    .cs-error .lg{ font-size:60px;}
    .cs-error .sm{ font-size:20px; }
}

.cs-privacy{ padding:160px 0; border-bottom:1px solid var(--grey);  }
.cs-privacy .title h1{ font-size:70px; margin:0 0 50px; }
.cs-privacy .update{ font-weight:600; margin:0 0 30px; }
.cs-privacy .container{ max-width:1000px; }
@media (max-width: 619px) {
    .cs-privacy{ padding:100px 0; }
    .cs-privacy .title h1{ font-size:40px; margin:0 0 30px; }
}

.ld-ring {
    width: 1em;
    height: 1em;
    position: relative;
    color: inherit;
    display: inline-block;
    box-sizing: content-box
}

.ld-ring:after {
    content: " ";
    display: block;
    width: 2em;
    height: 2em;
    box-sizing: border-box;
    transform-origin: 0 0;
    transform: translateZ(0) scale(.5);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 50%;
    border: .3em solid currentColor;
    border-left-color: transparent
}

@-webkit-keyframes ld-spin {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
        animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes ld-spin {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
        animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.ld.ld-spin {
    -webkit-animation: ld-spin 1s infinite linear;
    animation: ld-spin 1s infinite linear
}