/* technicalsupport + engineering*/
/* header */
.parent-pageid-18.header_scrolled .site-header {
 animation: header_drop .5s ease-out 0s 1 alternate none running !important;
 width: 100%;
 max-width: 100%;
 background: #fff !important;
}
.parent-pageid-18.header_scrolled.admin-bar .site-header {
 animation: header_drop_admin .5s ease-out 0s 1 alternate none running !important;
}
.parent-pageid-18.header_scrolled .site-header .menu-item-has-children .global-nav-name{
    color: #333;
}
.header_scrolled .global-nav {
 margin-right: 0 !important;
 text-align: left !important;
}
.site-header {
 background: none !important;
}
.global-nav-name {
 color: #fff;
}
#menu-item-128 .global-nav-name {
 color: #333;
}
.parent-pageid-18.page-child h1 {
 position: absolute !important;
 top: calc(225px - 1em)!important;
 color: #fff !important;
 background: none;
 right: 0 !important;
 margin: auto;
 text-align: center;
}
.parent-pageid-18.page-child h1::after {
 display: block;
 font-size: .4em;
 font-weight: 500;
 letter-spacing: .2em;
}
.page-id-20 h1::after{
  content: "Technical Support";
}
.page-id-22 h1::after{
  content: "Engineering";
}
.parent-pageid-18 .page-header {
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 height: 450px;
 position: relative;
 top: -64px;
 z-index: 0;
}

/* body */
body::before {
 z-index: -1;
 mix-blend-mode:luminosity;
 z-index: 1;
 left: 2%;
 top: 5%;
}
div.site-body {
 padding-top: 64px;
 z-index: 0;
 margin-top: 0 !important;
}
div.site-body::before,
div.site-body::after{
 content: "";
 background: linear-gradient(to bottom, #fff,#004F85,#002A46,#004F85, #fff);
 width: 10%;
 height: calc(100% + 800px);
 display: block;
 position: absolute;
 top: 0;
 z-index: -1;
}
div.site-body::before {
 left: 0;
}
div.site-body::after {
 right: 0;
}
.detail01 *,.detail02 * {
 border-radius: 8px;
}
p.section-description{
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 background: linear-gradient(90deg, #fff 180px,#333 180px);
 background-clip: text;
 text-fill-color: transparent;
 -webkit-background-clip: text;
 -webkit-text-fill-color:  transparent;
 padding: 0 15px;
}
p.section-description + p {
 margin-top: var(--vk-margin-element-bottom);
}
.detail01,.detail02 {
 position: relative;
}
.detail01 .wp-block-columns,
.detail02 .wp-block-columns{
 gap: 0;
}
.detail01 .wp-block-columns figure,
.detail02 .wp-block-columns figure{
 margin: 0;
 position: absolute;
 right: 0;
 z-index: -1;
 width: 60%;
}
.detail01 .wp-block-columns figure,
.detail02 .wp-block-columns figure{
}
.detail01 .wp-block-columns > div:first-of-type,
.detail02 .wp-block-columns > div:first-of-type{
 padding: 3em 3em 3em 0!important;
 margin-top: 120px;
 background: linear-gradient(to top, #fff 65%,transparent) !important;
}
.detail01 h2,
.detail02 h2 {
 display: inline-block !important;
 width: auto !important;
 padding: .5em 1.5em .5em 2.5em!important;
}
.detail01 h2::before,
.detail02 h2::before{
 margin-right: .5em;
 font-size: .6em;
 position: absolute;
 left:1.5em;
 top:1em;
}
.detail01 h2::before {
 content: "01 /";
}
.detail02 h2::before {
 content: "02 /";
}
.detail02.last-article h2::before {
 content: "03 /";
}
h3.example {
 display: flex;
}
h3.example:before {
 content: "";
 display: inline-block;
 background: #006fb9;
 width: .3em;
 height: 1.5em;
 margin-right: 1em;
 line-height: unset !important;
}

/* slider */
.business-slider {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}
@media(min-width: 1720px) {
 .business-slider {
   width: 100%;
   margin: 0;
 }
}
.business-slider > div {
 max-width: 990px;
 padding: 0;
 margin: 0 auto !important;
}
.business-slider .slick-track {
 display: flex;
}
.business-slider .slick-slide{
 height: auto !important;
 padding-bottom: 3em !important;
 margin-right: 2.5em;
}
.business-slider .slick-slide figure img{
 height: 200px !important;
 width: auto;
}
.business-slider .is-style-vk-group-solid-roundcorner {
 border: none !important;
}
.business-slider .slick-list {
 overflow: visible;
}
.business-slider .slick-arrow {
 top: -1.8%;
 width: 50px;
 height: 50px;
 border: 2px solid #004F85;
 border-radius: 100%;
 transition-duration: .3s;
 display: flex;
 align-items: center;
 justify-content: center;
}
.business-slider .slick-next:hover::before,
.business-slider .slick-prev:hover::before{
 position: absolute;
 width: 50px;
 height: 50px;
 margin: auto;
 color: #fff !important;
 background: #004F85;
 display: flex;
 align-items: center;
 justify-content: center;
 #border: 2px solid #004F85;
 transition-duration: .3s;
}
.business-slider .slick-disabled {
 opacity: .2;
 pointer-events: none !important;
 background: none !important;
}
.business-slider .slick-disabled:hover::before {
 display: none;
}
.business-slider .slick-prev {
 right: calc(5% + 70px);
 left: unset;
}
.business-slider .slick-next {
 right: 5%;
}
.business-slider .slick-next:before,
.business-slider .slick-prev:before{
 color:#004F85 !important;
 font: normal 20px FontAwesome;
 font-weight: 900;
 border-radius: 100%;
}
.business-slider .slick-next:before,
.business-slider .slick-next:hover::before{
 content: "\f054";
}
.business-slider .slick-prev:before,
.business-slider .slick-prev:hover::before{
 content: "\f053";
}
.business-slider .slick-disabled:before {
 opacity: 1 !important;
}

/* engineering */
h2.strong-points-title strong{
 width: auto;
 display: inline-block;
 margin: auto;
 background: linear-gradient(to right,#006fb9,#73b8e5,#006fb9);
 background-clip: text;
 -webkit-background-clip: text;
 color: transparent;
 letter-spacing: .1em;
 filter: drop-shadow(0 0 10px #fff);
}
h2.strong-points-title strong:after {
 content: "";
 background: #006fb9;
 width: 100%;
 height: 5px;
 display: block;
 margin: .5em auto 0;
}
h2.strong-points-title strong:first-letter {
 font-size: 1.5em;
}
h2.strong-points-title strong span {
 margin: 0 .1em;
}
.strong-points {
 position: relative;
 width: 100vw;
 margin: 0 calc(50% - 50vw);
}
.strong-points::before,
.strong-points::after{
 content: "";
 width: 30%;
 height: 60%;
 display: block;
 position: absolute;
 top: calc(50% - 30%);
 z-index: 0;
 background-size: cover;
}
.strong-points::before {
 background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/07/engineering-strong-points-bg01.jpg');
 background-position: center right;
 left: 0;
}
.strong-points::after {
 background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/07/engineering-strong-points-bg02.jpg');
 background-position: top 30% right;
 right: 0;
 z-index: 0;
}
.strong-points > div {
 max-width: 990px;
 margin: auto;
 z-index: 1;
 position: relative;
}
.strong-points h3 strong{
 font-weight: 900  !important;
}
.strong-points p strong{
 font-weight: 600 !important;
}
.strong-points .wp-block-column {
 border: 1px solid #006FB9;
 padding-bottom: 3em;
 position: relative;
 background: rgb(255 255 255 / 90%);
}
.strong-points .wp-block-column > p:first-child strong {
 font-weight: 900  !important;
 position: relative;
 top: -.7em;
 font-size: 1.5em;
 filter: drop-shadow(.1em 0 0 rgb(0 79 133 / 10%));
}
.strong-points .wp-block-column::before {
 content: "";
 background: rgb(0 79 133 / 70%);
 width: 100%;
 height: 100%;
 display: block;
 z-index: -1;
 position: absolute;
 left: -1em;
 bottom: -1em;
}
.strong-points .wp-block-column p:last-child {
 line-height: 2.2em;
}

/* responsive */

@media(min-width: 1280px) {
 div.site-body::before,
 div.site-body::after{
  width: 150px;
 }
}
@media(max-width: 1500px) {
 .detail01 .wp-block-columns > div:first-of-type,
 .detail02 .wp-block-columns > div:first-of-type{
  padding: 3em !important;
  margin-top: 120px;
  background: linear-gradient(to top, #fff 65%,transparent) !important;
 }
}
@media(max-width: 1280px) {
 .detail01 .wp-block-columns > div:first-of-type,
 .detail02 .wp-block-columns > div:first-of-type{
  padding: 3em !important;
  margin-top: 120px;
  background: linear-gradient(to top, #fff 65%,transparent) !important;
 }
 div.site-body::before{
  background: linear-gradient(to bottom,#fff,#77a6c5,#004F85);
  min-width: 180px;
  width: 10%;
  height: 100lvh;
  position: fixed;
 }
 div.site-body::after {
  display: none;
 }
 h3.example{
  padding: .7em 0;
  justify-content: center;
  position: relative;
 }
 h3.example::before{
  width: 150px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  height: 5px;
 }
 .business-slider {
   width: auto;
 }
 div#contact-us {
  background: transparent !important;
 }
 body::before {
  mix-blend-mode:multiply;
  filter: grayscale(1);
 }
 p.section-description{
  background: linear-gradient(90deg, #004F85,#333);
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color:  transparent;
  mix-blend-mode:multiply;
 }
}
@media (max-width: 1030px) {
 .business-slider {
   width: 100%;
   margin: auto;
 }
 .strong-points {
 width: 95% !important;
 margin: auto;
 }
 .strong-points::before,
 .strong-points::after {
  display: none;
 }
}
@media (max-width: 992px) {
 .parent-pageid-18.header_scrolled .site-header {
  animation: none !important;
 }
 .parent-pageid-18.header_scrolled.admin-bar .site-header {
  animation: none !important;
 }
 .page-header {
  border-radius: 0 !important;
 }
}
@media (max-width: 782px) {
 .parent-pageid-18.header_scrolled .site-header {
  animation: none !important;
 }
 .parent-pageid-18.header_scrolled.admin-bar .site-header {
  animation: none !important;
 }
 .page-header {
  height: 50svh !important;
  top:0 !important;
 }
 div.site-body {
  padding-top: 50px;
 }
 div.site-body::after {
  display: none;
 }
 p.section-description{
  text-align: left;
 }
 p.section-description br{
  display: none;
 }
 .page-id-20 p.section-description br:first-of-type {
  display: block;
 }
 .parent-pageid-18.page-child h1 {
  top: calc(25svh - 1em) !important;
  color: #fff !important;
  background: none;
  right: 0 !important;
  text-align: center;
 }
 .parent-pageid-18.page-child h1::after {
  display: block;
  font-size: .4em;
  font-weight: 500;
  letter-spacing: .2em;
 }
 .detail01 .wp-block-columns > div:first-of-type,
 .detail02 .wp-block-columns > div:first-of-type{
  padding: 1em !important;
  margin-top: 0;
  padding: 10px 0px 60px 20px !important;
  left: 0;
  position: relative;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(to top, #fff 70%,transparent) !important;
 }
 .detail01 h2,
 .detail02 h2{
  font-size: 1.5em;
  left: -40px;
  margin-bottom: 10px !important;
  z-index: 2;
  border-radius: 0 8px 8px 0;
 }
 .detail01 h3,
 .detail02 h3{
  margin-top: 150px !important;
 }
 .detail01 .wp-block-columns figure,
 .detail02 .wp-block-columns figure{
  margin: 0;
  position: absolute;
  right: -15px;
  top: -15px;
  z-index: 1;
  width: auto;
  height: 190px !important;
  width: calc(100% - 15px);
  aspect-ratio: unset !important;
  display: block;
  object-fit: cover;
 }
 .detail01 .wp-block-columns figure img,
 .detail02 .wp-block-columns figure img{
  border-radius: 10px 0 0 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
 h3.example{
  margin-top: 2em !important;
 }
 .business-slider .slick-slide figure img{
  height: 100px !important;
  width: auto !important;
 }
 .business-slider .slick-slide{
  padding-top: 1em;
  padding-bottom: 2em !important;
  margin-right: 1em;
  margin-top: 1em;
  margin-bottom: .5em;
 }
 .business-slider .slick-arrow {
  top: -5%;
  display: none !important;
 }
 .business-slider h4 {
  text-align: center !important;
 }
 h2.strong-points-title + p span{
  display: block;
 }
 h2.strong-points-title + p br{
  display: none;
 }
 .strong-points .wp-block-columns {
  gap: 80px;
 }
}

@media (max-width: 500px) {
 div.site-body::before{
  min-width: 80px;
 }
 .business-slider .slick-next:hover::before,
 .business-slider .slick-prev:hover::before{
  position: absolute;
  width: 40px;
  height: 40px;
 }
 .business-slider .slick-prev {
  right: 55px;
  top: -25px;
 }
 .business-slider .slick-next {
  right: 0;
  top: -25px;
 }
 .business-slider .slick-dots li{
  margin: 0;
 }
}