:root {
--title_color:#1f1f1f;
}
html {
  font-size: 10px;
}
* {
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;
 }
section {
 background-color: rgb(255, 255, 255);
 position: relative;
 z-index: 2;
 }
.template_apply {
 margin: 0px auto;
 padding: 0px 0px 5.9rem;
 }
body > section {
 position: relative;
 }
body > section:hover {
  }
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_apply {
 padding-top: 4.8rem;
 padding-bottom: 3.9rem;
 }}
@media screen and (max-width: 767px){
.template_apply {
 padding: 9.6rem 0px 2.4rem;
 }}
.content {
 max-width: 134.4rem;
 margin: 0px auto;
 position: relative;
 }
@media (min-width: 1220px){
.template_apply .content_apply {
 max-width: 120rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1440px){
.content_small, .content {
 padding: 0px 2rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.content_small, .content {
 max-width: 1000px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.content {
 max-width: 736px;
 padding: 0px;
 }}
@media screen and (max-width: 767px){
.content, .content_small {
 padding: 0px 16px;
 }}
.head h2 {
 font-size: 5.6rem;
 line-height: 6.4rem;
 color: var(--title_color);
 font-weight: 400;
 }
@media screen and (max-width: 767px){
.head h2 {
 font-size: 24px;
 line-height: 32px;
 }}
.template_apply .con {
 position: relative;
 margin: 2.6rem auto 0px;
 }
 .template_apply .con .syeditorlist {
  position: static;
}
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_apply .con {
 display: flex;
 gap: 0.7rem;
 margin-top: 2.4rem;
 align-items: center;
 }}
@media screen and (max-width: 767px){
.template_apply .con {
 display: flex;
 flex-direction: column;
 }}
.template_apply .con .img {
 aspect-ratio: 1 / 1;
 max-width: 38rem;
 margin: 0px auto;
 width: 100%;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_apply .con .img {
 margin-left: 0px;
 }}
@media screen and (max-width: 767px){
.template_apply .con .img {
 max-width: 15.2rem;
 order: 2;
 aspect-ratio: 152 / 175;
 }}
.img.img_ct img {
 width: 100%;
 height: 100%;
 object-fit: contain;
 display: block;
 transition: 0.5s;
 }
.template_apply .con .img img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
 }
ul {
 list-style: none;
 }
.template_apply .con li {
 font-size: 1.6rem;
 font-weight: 700;
 color: rgb(31, 31, 31);
 line-height: 2.4rem;
 border-radius: 2rem;
 border: 1px solid rgb(228, 228, 231);
 width: fit-content;
 padding: 1.2rem 2.4rem;
 position: absolute;
 top: 0px;
 background-color: rgb(255, 255, 255);
 opacity: 0;
 }
.template_apply .con li::after {
 content: "";
 display: block;
 width: 1.7rem;
 height: 1.7rem;
 top: 55%;
 transform: translateY(-50%) rotate(45deg);
 background-color: rgb(255, 255, 255);
 position: absolute;
 right: -1rem;
 border-top: 1px solid rgb(228, 228, 231);
 border-right: 1px solid rgb(228, 228, 231);
 border-radius: 0.4rem;
 }
.template_apply .con li.right::after {
 left: -0.9rem;
 right: unset;
 transform: translateY(-50%) rotate(-135deg);
 }
.template_apply .con li:nth-child(1) {
 left: 70%;
 top: 8.5%;
 opacity: 1;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_apply .con ul li {
 position: relative;
 margin-bottom: 1.6rem;
 left: 0px !important;
 top: 0px !important;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_apply .con ul li::after {
 right: unset;
 left: 1px;
 transform: translateX(-50%) rotate(-135deg);
 }}
@media screen and (max-width: 767px){
.template_apply .con ul li {
 position: relative;
 margin-left: auto;
 margin-bottom: 0.8rem;
 font-size: 1.4rem;
 line-height: 2.2rem;
 padding: 0.4rem 2rem;
 box-shadow: rgba(184, 184, 184, 0.1) 0px 12px 26px;
 border-radius: 4.8rem 10rem 10rem 4.8rem;
 top: 0px !important;
 left: 0px !important;
 }}
.template_apply .con li:nth-child(2) {
 left: 70%;
 top: 43%;
 opacity: 1;
 }
@media screen and (max-width: 767px){
.template_apply .con ul li:nth-child(2n) {
 margin-left: 0px;
 margin-right: auto;
 border-radius: 2.4rem;
 }}
@media screen and (max-width: 767px){
.template_apply .con ul li:nth-child(2n)::after {
 left: unset;
 right: 1px;
 top: 40%;
 transform: translateX(50%) rotate(45deg);
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_apply .con ul li:nth-child(2) br {
 display: none;
 }}
.template_apply .con li:nth-child(3) {
 left: 9.2%;
 top: 13%;
 opacity: 1;
 }
@media screen and (min-width: 768px) and (max-width: 1220px){
.template_apply .con li:nth-child(3), .template_apply .con li:nth-child(4) {
 left: 2.2%;
 }}
@media screen and (max-width: 767px){
.template_apply .con ul li:nth-child(3)::after {
 right: unset;
 left: -1px;
 top: 40%;
 transform: translateX(-50%) rotate(-135deg);
 }}
.template_apply .con li:nth-child(4) {
 left: 9.2%;
 top: 48%;
 opacity: 1;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_apply .con ul li:last-child {
 margin-bottom: 0px;
 }}
@media screen and (max-width: 767px){
.template_apply .con ul li:last-child {
 margin-bottom: 0px;
 }}
button, input, textarea {
 outline: none;
 border: none;
 font-family: unset;
 color: var(--title_color);
 }
input[type="submit"], button {
 cursor: pointer;
 }
.sytech_export_template {
 display: none;
 }
 
@media screen and (max-width: 786px){


}
 
/*
Theme Name: Sytech Web
Author: The Sytech Team
Author URI:  https://sytech-web.cn
Description: A Beautiful, Fast Loading and SEO Ready Website
Version: 2.0.0
*/

* {
	margin:0;
	padding: 0;
	box-sizing: border-box;
}
.content { 
	margin: 0 auto;
	position: relative;
}

html {
	scroll-behavior: smooth;
}
.flex {
	display: flex;
}
.wrap {
	flex-wrap: wrap;
}
.flex1 {
	flex:1;
}
.flex2 {
	flex:2;
}
.flex3 {
	flex:3;
}
.between {
	justify-content: space-between;
}
.center {
	text-align: center;
}
.boxshadow {
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
	background: white;
}


.tools_part_vendor .tools_part_box{
  padding: 4rem 0px;
  text-align: center;
}

.tools_part_vendor .tools_part_box input{
  padding: .8rem 1rem;
  border-radius: 5px;
  min-width: 300px;
  border: 1px #ddd solid ;
}
.tools_part_vendor .tools_part_box button{
  background: white;
  border: 1px solid #f8f8f8;
  color: #4c4c4c;
  padding: 0.8rem 1.5rem;
  display: inline-block;
  font-weight: 500;
  border: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 10px;
  background-color: #33bde9;
  border: 1px solid #33bde9;
  color: white;
  padding: 0.8rem 1.5rem;
}
 
@media screen and (min-width: 786px)  and (max-width: 1600px) {
  
}
@media screen and (min-width: 786px)  and (max-width: 1400px) {
  .content {
    padding: 0 1.2rem;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1200px) {
  .content {
    max-width: 1000px;
  }
  .swiper_content {
    max-width: 1020px;
  }
  .solution_strength .head p {
    width: 70%;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1000px) {
  .content {
    max-width: 786px;
  }
  .swiper_content {
    max-width: 806px;
  }
  .solution_strength .head p {
    width: 90%;
  }
}
 
@media screen and (max-width: 786px) {
  .content {
    padding: 0 1.2rem;
  }
}

 
:root {
--title_color:#1f1f1f;
--color:;
}
.template_light {
 margin: 0px auto;
 padding-top: 6rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_light {
 padding-top: 4rem;
 }}
@media screen and (max-width: 767px){
.template_light {
 padding: 2.4rem 0px;
 }}
.content_small {
 max-width: 128rem;
 margin: 0px auto;
 position: relative;
 }
@media screen and (min-width: 768px) and (max-width: 1440px){
.content_small, .content {
 padding: 0px 2rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.content_small, .content {
 max-width: 1000px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.content {
 max-width: 736px;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.content_small {
 max-width: 720px;
 padding: 0px;
 }}
@media screen and (max-width: 767px){
.content, .content_small {
 padding: 0px 16px;
 }}
.template_light div.head {
  margin-bottom: 0;
 padding-bottom: 2.6rem;
 }
@media screen and (max-width: 767px){
.head h2 {
 font-size: 24px;
 line-height: 32px;
 }}
.template_light .light_item {
 max-width: 105rem;
 margin: 0px auto;
 padding-bottom: 8.2rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_light .light_item {
 padding-bottom: 3.6rem;
 }}
@media screen and (max-width: 767px){
.template_light .light_item {
 padding-bottom: 0px;
 margin-bottom: 2.4rem;
 }}
.template_light .light_item h3 {
 font-size: 4rem;
 color: rgb(31, 31, 31);
 line-height: 4.8rem;
 font-weight: 400;
 text-align: center;
 }
@media screen and (max-width: 767px){
.template_light .light_item h3 {
 font-size: 1.6rem;
 line-height: 2.4rem;
 }}
.template_light .light_item strong {
 font-size: 2.4rem;
 color: rgb(0, 0, 0);
 line-height: 3.2rem;
 text-align: center;
 display: block;
 font-weight: 400;
 margin-top: 2.6rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item strong {
 font-size: 1.2rem;
 line-height: 1.6rem;
 margin-top: 0.4rem;
 }}
.template_light .light_item .curve {
 aspect-ratio: 1050 / 284;
 background: url("https://www.drillinsight.com/wp-content/plugins/sytech-fronteditor/sytpl/template_3_0/assets/img/curvebackground.jpg") center center / contain no-repeat;
 margin-top: -1.7rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item .curve {
 display: none;
 }}
.template_light .light_item .curve ul {
 display: flex;
 justify-content: space-between;
 margin-top: auto;
 height: 100%;
 align-items: end;
 }
.template_light .light_item .curve ul li {
 flex: 1 1 0%;
 font-size: 1.2rem;
 color: rgb(89, 89, 89);
 line-height: 1.6rem;
 text-align: center;
 padding: 1.5rem 2%;
 }
.template_light .light_item .curve ul li:nth-child(2) {
 padding-bottom: 4.4rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_light .light_item .curve ul li:nth-child(2) {
 padding-bottom: 2.2rem;
 }}
.template_light .light_item .curve ul li:nth-child(3) {
 padding-bottom: 6.9rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_light .light_item .curve ul li:nth-child(3) {
 padding-bottom: 3.2rem;
 }}
.template_light .light_item .title {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr auto;
 margin-top: 2rem;
 margin-bottom: 5.6rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item .title {
 display: none;
 }}
.template_light .light_item .title p {
 font-size: 1.2rem;
 color: rgb(191, 191, 191);
 text-align: center;
 padding: 0px 1rem;
 }
.template_light .light_item .title span {
 font-weight: 600;
 color: rgb(0, 0, 0);
 }
.template_light .mobile_dom {
 display: none;
 }
@media screen and (max-width: 767px){
.template_light .light_item .mobile_dom {
 display: block;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .table {
 width: 100%;
 overflow: auto;
 margin-top: 2rem;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .table table {
 width: 100%;
 border-collapse: collapse;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .table table tr {
 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }}
@media screen and (max-width: 767px){
.template_light .light_item .table table td {
 font-size: 1.2rem;
 min-width: 16rem;
 padding: 1rem 0.5rem;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .table table td:first-child {
 min-width: 5rem;
 font-weight: 500;
 font-size: 1.3rem;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .table table tr:last-child {
 border: none;
 }}
.template_light .light_item .desc {
 font-size: 1.4rem;
 color: rgb(89, 89, 89);
 line-height: 2.4rem;
 text-align: center;
 }
@media screen and (max-width: 767px){
.template_light .light_item .desc {
 margin: 0.8rem 0px 0px;
 font-size: 1.2rem;
 line-height: 1.6rem;
 }}
.template_light .light_item .desc2 {
 font-size: 1.4rem;
 color: rgb(89, 89, 89);
 line-height: 1.9rem;
 text-align: center;
 margin-top: 2.4rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item .desc2 {
 font-size: 1.2rem;
 line-height: 1.6rem;
 margin-top: 0.4rem;
 }}
.template_light .light_item .img {
 margin: 2.4rem auto 5.2rem;
 max-width: 100%;
 text-align: center;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_light .light_item .img {
 margin-bottom: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_light .aws_item .img {
 max-width: 49rem;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .img {
 margin: 1.4rem 0px 2.4rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_light .light_item .img img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .img img {
 display: block;
 width: 100%;
 object-fit: contain;
 }}
.template_light .light_item .optimize_con {
 border-radius: 4.8rem;
 margin-top: 2.4rem;
 width: 121.905%;
 position: relative;
 left: 50%;
 transform: translateX(-50%);
 background: url("https://www.drillinsight.com/wp-content/plugins/sytech-fronteditor/sytpl/template_3_0/assets/img/optimizebackground.png") center center / cover no-repeat;
 padding: 4rem 4.0625% 5.5rem;
 box-shadow: rgba(186, 186, 186, 0.2) 0px 0.7rem 1.5rem 0px;
 }
@media screen and (min-width: 768px) and (max-width: 1440px){
.template_light .light_item .advanced_con, .template_light .light_item .optimize_con {
 width: 100%;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .optimize_con {
 box-shadow: unset;
 background: unset;
 width: 100%;
 padding: 0px;
 margin: 0px;
 }}
.template_light .light_item .optimize_con .describe {
 font-size: 1.4rem;
 color: rgb(89, 89, 89);
 line-height: 1.9rem;
 margin-bottom: 5.5rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item .optimize_con .describe {
 margin-top: 0.4rem;
 font-size: 1.2rem;
 line-height: 1.6rem;
 text-align: center;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_light .light_item .optimize_con .roll {
 width: 100%;
 overflow: auto;
 padding-bottom: 2rem;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .optimize_con .roll {
 width: 100%;
 overflow: auto;
 padding-bottom: 2rem;
 }}
.template_light .light_item .optimize_con .toptitles {
 display: grid;
 grid-template-columns: 12.3% 1fr 1fr 1fr 1fr 1fr;
 margin-bottom: 0.7px;
 padding-right: 8%;
 gap: 1.2rem;
 }
.template_light .light_item .optimize_con .toptitles::before {
 content: "";
 display: block;
 }
@media screen and (max-width: 767px){
.template_light .light_item .optimize_con .roll .toptitles {
 gap: 1rem;
 width: 100%;
 padding: 0px;
 margin-bottom: 1.2rem;
 grid-template-columns: 8rem 15rem 15rem 15rem 15rem 15rem;
 }}
.template_light .light_item .optimize_con .toptitles strong {
 font-size: 1.4rem;
 font-weight: 400;
 color: rgb(31, 31, 31);
 margin: 0px;
 text-align: start;
 padding: 0px 1.4rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_light .light_item .optimize_con .roll .toptitles strong {
 min-width: 18rem;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .optimize_con .roll .toptitles strong {
 padding: 0px;
 font-size: 12px;
 text-wrap: nowrap;
 }}
.template_light .light_item .optimize_con .con {
 display: grid;
 grid-template-columns: 12.3% 1fr 1fr 1fr 1fr 1fr;
 gap: 1.2rem;
 padding-right: 8%;
 }
@media screen and (max-width: 767px){
.template_light .light_item .optimize_con .roll .con {
 gap: 1rem;
 grid-template-columns: 8rem 15rem 15rem 15rem 15rem 15rem;
 }}
.template_light .light_item .optimize_con .con strong {
 font-size: 1.4rem;
 font-weight: 400;
 color: rgb(31, 31, 31);
 line-height: 1.9rem;
 text-align: end;
 margin: 0px;
 padding-right: 1.3rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item .optimize_con .roll .con strong {
 display: block;
 font-size: 1.2rem;
 }}
.template_light .light_item .optimize_con .con .grid-item {
 border-radius: 1.2rem;
 background-color: rgb(255, 255, 255);
 min-height: 16.2rem;
 padding: 1.1rem 1.4rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.template_light .light_item .optimize_con .roll .con .grid-item {
 min-width: 18rem;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .optimize_con .roll .con .grid-item {
 padding: 0px;
 min-height: unset;
 }}
.template_light .light_item .optimize_con .con span {
 display: block;
 font-size: 1.2rem;
 font-weight: 600;
 color: var(--color);
 }
.template_light .light_item .optimize_con .con p {
 font-size: 1.2rem;
 color: rgb(89, 89, 89);
 line-height: 1.6rem;
 margin-top: 1.1rem;
 }
.template_light .light_item .optimize_con .con + .con {
 margin-top: 1.2rem;
 }
.template_light .light_item .advanced_con {
 display: flex;
 position: relative;
 width: 121.905%;
 left: 50%;
 transform: translateX(-50%);
 background: url("https://www.drillinsight.com/wp-content/plugins/sytech-fronteditor/sytpl/template_3_0/assets/img/advancbackground.jpg") center center / cover no-repeat;
 box-shadow: rgba(186, 186, 186, 0.2) 0px 2.8rem 2rem;
 padding: 3rem 5% 6.4rem 3.125%;
 margin-top: 2.5rem;
 justify-content: space-between;
 align-items: center;
 gap: 2rem;
 border-radius: 4.8rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item .advanced_con {
 margin: 0px;
 width: 100%;
 padding: 0px;
 background: unset;
 box-shadow: unset;
 flex-direction: column;
 gap: 1.2rem;
 }}
.template_light .light_item .advanced_con .describe {
 flex: 1 1 0%;
 max-width: 32rem;
 font-size: 1.4rem;
 color: rgb(89, 89, 89);
 line-height: 2.2rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item .advanced_con .describe {
 font-size: 1.2rem;
 line-height: 1.6rem;
 margin-top: 0.4rem;
 max-width: unset;
 width: 100%;
 }}
.template_light .light_item .advanced_con .right {
 width: 64.9916%;
 }
.template_light .light_item .advanced_con .right strong {
 font-size: 1.6rem;
 font-weight: 400;
 color: rgb(31, 31, 31);
 text-transform: uppercase;
 display: block;
 text-align: center;
 margin: 0px;
 }
@media screen and (max-width: 767px){
.template_light .light_item .advanced_con .right strong {
 font-size: 1.2rem;
 line-height: 1.6rem;
 }}
.template_light .light_item .advanced_con .right .img {
 width: 100%;
 text-align: center;
 margin: 5.5rem 0px 2rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item .advanced_con .right .img {
 margin: 0.7rem 0px 0px;
 }}
.template_light .light_item .advanced_con .right .img img {
 max-width: 100%;
 }
.template_light .gather.light_item h3 {
 margin-bottom: 2.2rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item.gather h3 {
 margin-bottom: 0.4rem;
 }}
.template_light .light_item .desc.start {
 text-align: start;
 }
.template_light .gather.light_item .desc {
 line-height: 1.9rem;
 margin-bottom: 2.6rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item.gather .desc {
 margin-top: 0.4rem;
 text-align: center;
 }}
.template_light .light_item .desc p + p {
 margin-top: 1.9rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item.gather .desc p + p {
 margin-top: 0px;
 }}
.template_light .gather.light_item .strong {
 font-size: 4rem;
 font-weight: 600;
 color: rgb(31, 31, 31);
 line-height: 5.6rem;
 padding-left: 2.2rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item.gather .strong {
 font-size: 1.4rem;
 line-height: 1.6rem;
 margin-bottom: 2.2rem;
 }}
.template_light .contrast {
 display: flex;
 gap: 1rem;
 max-width: 81rem;
 margin-left: auto;
 align-items: end;
 margin-top: -5.1rem;
 margin-right: 7.9%;
 }
@media screen and (max-width: 767px){
.template_light .light_item .contrast {
 flex-direction: column;
 margin: 0px;
 padding: 0px 1.2rem;
 }}
.template_light .contrast_item {
 position: relative;
 border-radius: 1.2rem;
 z-index: 2;
 padding: 0px 5.1259% 3.9rem;
 flex: 1 1 0%;
 }
.template_light .contrast_item::after {
 content: "";
 display: block;
 width: 2.4rem;
 height: 2.4rem;
 background-color: rgb(255, 255, 255);
 position: absolute;
 transform: rotate(45deg);
 right: -1rem;
 top: 37%;
 z-index: 2;
 pointer-events: none;
 opacity: 0;
 }
.template_light .contrast_item:first-child::after {
 opacity: 1;
 }
@media screen and (max-width: 767px){
.template_light .light_item .contrast .contrast_item {
 padding-bottom: 2.3rem;
 margin-bottom: 2rem;
 }}
.template_light .contrast .bg {
 position: absolute;
 left: 50%;
 bottom: 0px;
 width: 100%;
 transform: translateX(-50%);
 z-index: -1;
 box-shadow: rgba(171, 171, 171, 0.3) 0px 0.5rem 1.1rem;
 border-radius: 1.2rem;
 overflow: hidden;
 }
@media screen and (max-width: 767px){
.template_light .light_item .contrast .bg {
 height: 100%;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .contrast .bg::after {
 content: "";
 display: block;
 width: 100%;
 height: 1.8rem;
 background-color: rgb(255, 215, 206);
 position: absolute;
 bottom: 0px;
 left: 0px;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .contrast .bg::before {
 content: "";
 display: block;
 width: 100%;
 height: 6rem;
 position: absolute;
 bottom: 0px;
 left: 0px;
 background-color: rgb(255, 235, 230);
 }}
.template_light .contrast .bg img {
 display: block;
 width: 100%;
 object-fit: contain;
 }
@media screen and (max-width: 767px){
.template_light .light_item .contrast .bg img {
 object-position: center bottom;
 display: none;
 }}
.template_light .contrast_item strong {
 font-size: 2.4rem;
 display: flex;
 align-items: center;
 font-weight: 700;
 gap: 0.5rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item .contrast strong {
 transform: translateY(-50%);
 margin: 0px auto;
 justify-content: center;
 font-size: 1.3rem;
 }}
i {
 font-style: normal;
 }
.template_light .contrast_item strong i {
 display: flex;
 width: 5.6rem;
 height: 5.6rem;
 font-weight: 600;
 font-size: 4.8rem;
 background: url("https://www.drillinsight.com/wp-content/plugins/sytech-fronteditor/sytpl/template_3_0/assets/img/Vector294.png") center center / contain no-repeat;
 justify-content: center;
 line-height: 0.9;
 color: rgb(255, 255, 255);
 }
@media screen and (max-width: 767px){
.template_light .light_item .contrast strong i {
 width: 2.2rem;
 height: 2.2rem;
 font-size: 1.7rem;
 }}
.template_light .contrast_item p {
 font-size: 1.6rem;
 color: rgb(255, 53, 9);
 line-height: 2.2rem;
 margin-top: 3rem;
 }
@media screen and (max-width: 767px){
.template_light .light_item .contrast p {
 font-size: 1.2rem;
 line-height: 1.6rem;
 margin-top: 0.9rem;
 }}
.template_light .contrast_item:nth-child(2) {
 z-index: 1;
 }
@media screen and (max-width: 767px){
.template_light .light_item .contrast .contrast_item:last-child {
 margin-bottom: 0px;
 }}
@media screen and (max-width: 767px){
.template_light .light_item .contrast .contrast_item:nth-child(2) .bg::after {
 background-color: rgb(214, 243, 178);
 }}
@media screen and (max-width: 767px){
.template_light .light_item .contrast .contrast_item:nth-child(2) .bg::before {
 background-color: rgb(241, 251, 229);
 }}
.template_light .contrast_item:nth-child(2) strong i {
 line-height: 1.1;
 background: url("https://www.drillinsight.com/wp-content/plugins/sytech-fronteditor/sytpl/template_3_0/assets/img/Vector295.png") center center / contain no-repeat;
 }
.template_light .contrast_item:nth-child(2) p {
 color: rgb(89, 89, 89);
 margin-top: 5rem;
 }
.template_light .contrast_item:nth-child(2) p span {
 color: rgb(120, 214, 0);
 font-weight: 700;
 }
 
@media screen and (max-width: 786px){


}
 
:root {
  --title_color: #1f1f1f;
  --content_color: #595959;
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
section {
  background-color: rgb(255, 255, 255);
  position: relative;
  z-index: 2;
}
body > section {
  position: relative;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .course_light_3 {
    padding: 4rem 0px;
  }
}
@media screen and (max-width: 767px) {
  .course_light_3 {
    padding: 2.4rem 0px;
  }
}

.course_light_3 {
  padding: 8rem 0px;
  overflow: hidden;
}

.course_light_3_container {
  max-width: 112rem;
  margin: 0px auto;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8rem;
}

.course_light_3 .course_light_item {
  border: 1px solid #d9d9d9;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0px 86px 49px 0px rgba(186, 186, 186, 0),
    0px 60px 45px 0px rgba(186, 186, 186, 0.01),
    0px 63px 38px 20px rgba(186, 186, 186, 0.05),
    0px 28px 28px 0px rgba(186, 186, 186, 0.09),
    0px 7px 15px 0px rgba(186, 186, 186, 0.1);
  padding: 1.2rem;
  padding-bottom: 2.4rem;
  width: 54rem;
}

.course_light_item .course_light_item_banner {
  width: 100%;
  border-radius: 24px;
  margin-bottom: 2.4rem;
}

.course_light_item .course_light_item_title {
  color: var(--title_color);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 16px;
}
.course_light_item .course_light_item_desc {
  color: var(--content_color);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

.course_light_item_banner > img {
  width: 100%;
  height: 26rem;
  border-radius: 24px;
}

@media screen and (min-width: 1220px) and (max-width: 1440px) {
  .course_light_3_container {
    padding: 0px 2rem;
    padding-bottom: 8rem;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .course_light_3_container {
    padding: 0px 2rem;
    max-width: 1000px;
    padding-bottom: 8rem;
  }
  .course_light_3 .course_light_item {
    width: 460px;
  }
  .course_light_item .course_light_item_banner {
    margin-bottom: 2.4rem;
  }
  .course_light_item .course_light_item_desc {
    height: 66px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .course_light_3_container {
    padding: 0px 2rem;
    padding-bottom: 8rem;
    max-width: 720px;
    flex-direction: column;
    gap: 24px;
  }
}
@media screen and (max-width: 767px) {
  .course_light_3_container {
    max-width: 720px;
    padding: 0px 16px;
    padding-bottom: 4rem;
    flex-direction: column;
    gap: 24px;
  }
  .course_light_3 .course_light_item {
    width: 100%;
  }
  .course_light_item .course_light_item_banner {
    height: 100%;
  }
  .course_light_item .course_light_item_banner {
    margin-bottom: 36px;
  }
  .course_light_item_banner > img {
    height: 18rem;
  }
}

 
@media screen and (max-width: 786px){


}
 
:root {
--title_color:#1f1f1f;
--content_color:#595959;
--swiper-wrapper-transition-timing-function, initial:;
--subtheme_color:#fff;
}
.lightspot_section {
 padding: 6rem 0px;
 overflow: hidden;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section {
 padding: 4rem 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section {
 padding: 2.4rem 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1440px){
.content_small, .content {
 padding: 0px 2rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.content_small, .content {
 max-width: 1000px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.content_small {
 max-width: 720px;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .content_small {
 padding: 0px 4.7rem;
 }}
@media screen and (max-width: 767px){
.content, .content_small {
 padding: 0px 16px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .content_small {
 padding: 0px 1.6rem;
 }}
.fadeInLeft {
 animation-name: fadeInLeft;
 }
@media screen and (max-width: 767px){
.head h2 {
 font-size: 24px;
 line-height: 32px;
 }}
.lightspot_section .platform {
 max-width: 104.9rem;
 width: calc(100% - 4rem);
 margin: 2.6rem auto 2.4rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .platform {
 width: 100%;
 margin-top: 4.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform {
 width: 100%;
 max-width: unset;
 padding: 0px;
 }}
.center {
 text-align: center;
 }
.lightspot_section h3 {
 font-size: 4rem;
 line-height: 4.8rem;
 font-weight: 400;
 color: var(--title_color);
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section h3 {
 font-size: 2.25rem;
 line-height: 2.7rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section h3 {
 font-size: 1.6rem;
 line-height: 2.4rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform .rout {
 zoom: 0.7;
 }}
.img.img_cv {
 overflow: hidden;
 }
@media screen and (max-width: 767px){
.lightspot_section .platform .img {
 margin-bottom: 0.8rem;
 }}
.img.img_cv img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: 0.5s;
 }
.lightspot_section .desc {
 color: var(--content_color);
 font-size: 1.4rem;
 line-height: 1.9rem;
 margin-top: 2.4rem;
 }
.lightspot_section .platform .desc {
 line-height: 2.4rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .desc {
 font-size: 0.8rem;
 margin-top: 1.4rem;
 line-height: normal !important;
 }}
@media screen and (max-width: 767px){
.lightspot_section .desc {
 font-size: 1.2rem;
 line-height: 1.6rem;
 margin-top: 4px;
 }}
.lightspot_section .items {
 max-width: 112rem;
 width: calc(100% - 4rem);
 margin: 0 auto 0px;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items {
 max-width: unset;
 width: 100%;
 margin-top: 4.5rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items {
 margin-top: 2.4rem;
 padding: 0px;
 max-width: unset;
 width: 100%;
 }}
.lightspot_section .items > div {
 display: flex;
 flex-direction: column;
 gap: 8rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items > div {
 gap: 4.5rem;
 }}
.lightspot_section .items .item {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 2rem 7%;
 margin-top: 8rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .item {
 padding-right: 4.5rem;
 gap: 1.2rem 4%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .item {
 flex-direction: column;
 padding: 0px;
 text-align: center;
 }}
.lightspot_section .items .info {
 flex: 1 1 0%;
 padding-bottom: 8.3%;
 }
@media screen and (max-width: 767px){
.lightspot_section .items .info {
 padding: 0px;
 }}
.lightspot_section .items .desc {
 padding-right: 5%;
 }
.lightspot_section .items .pic {
 width: 57%;
 aspect-ratio: 640 / 386;
 background: url("https://www.drillinsight.com/wp-content/plugins/sytech-fronteditor/sytpl/ace_3_4/assets/img/light_bg.png") center center / cover no-repeat;
 position: relative;
 overflow: hidden;
 display: inline-block;
 }
.lightspot_section .items .pic::before {
 width: 12%;
 aspect-ratio: 60 / 9;
 background: url("https://www.drillinsight.com/wp-content/plugins/sytech-fronteditor/sytpl/ace_3_4/assets/img/mac_notch.svg") center center / contain no-repeat;
 content: "";
 position: absolute;
 top: 4px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 3;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .pic {
 width: 57%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .pic {
 width: 100%;
 }}
.video.video_cv {
 overflow: hidden;
 }
.lightspot_section .items .pic .video, .lightspot_section .items .pic .img, .lightspot_section .items .pic .formulation_swiper {
 width: 80%;
 aspect-ratio: 512 / 332;
 border-radius: 1rem;
 margin: 0.8rem auto 0px;
 overflow: hidden;
 z-index: 2;
 position: relative;
 }
.video.video_cv video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: 0.5s;
 }
.lightspot_section .items .item:nth-child(2n) {
 flex-direction: row-reverse;
 }
.lightspot_section .items .item:nth-child(2n) .info {
 padding-bottom: 3.5%;
 }
.swiper-wrapper {
 position: relative;
 width: 100%;
 height: 100%;
 z-index: 1;
 display: flex;
 transition-property: transform;
 transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
 box-sizing: content-box;
 }
.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
 transform: translate3d(0px, 0px, 0px);
 }
li.swiper-slide {
 height: auto;
 }
.swiper-slide {
 flex-shrink: 0;
 width: 100%;
 height: 100%;
 position: relative;
 transition-property: transform;
 display: block;
 }
.lightspot_section .items .pic .video:hover img, .lightspot_section .items .pic .img:hover img, .lightspot_section .items .pic .formulation_swiper:hover img {
 transform: scale(1.02);
 }
.lightspot_section .items .pic .video .swiper-slide img, .lightspot_section .items .pic .img .swiper-slide img, .lightspot_section .items .pic .formulation_swiper .swiper-slide img {
 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;
 transition: 0.3s;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .item:last-child {
 padding-right: 0px;
 }}
.lightspot_section .items .item:has(.back_img) .info {
 padding-bottom: 0px;
 }
.lightspot_section .items .item:has(.back_img) .info .desc {
 padding-right: 9%;
 }
.lightspot_section .items .back_img {
 width: 60.7%;
 margin-right: -7.2%;
 border-radius: 4.8rem;
 }
@media screen and (min-width: 768px) and (max-width: 1440px){
.lightspot_section .items .back_img {
 width: 56%;
 margin-right: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .back_img {
 width: 56%;
 margin-right: 0px;
 border-radius: 2.7rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .back_img {
 width: 100%;
 margin: 0px;
 }}
.lightspot_section .items .back_img:hover img {
 transform: scale(1.02);
 }
.lightspot_section .lightspot_swiper {
 overflow: hidden;
 margin-top: 9.7rem;
 position: relative;
 padding-bottom: 0.5rem;
 }
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper {
 margin-top: 2.4rem;
 padding-bottom: 0px;
 }}
.flex {
 display: flex;
 }
.wrap {
 flex-wrap: wrap;
 }
.between {
 justify-content: space-between;
 }
.flex_middle {
 align-items: center;
 }
.gap {
 gap: 2rem;
 }
.lightspot_section .lightspot_swiper .info {
 flex: 1 1 0%;
 padding-left: 6%;
 padding-right: 3%;
 }
@media screen and (min-width: 768px) and (max-width: 1220px){
.lightspot_section .lightspot_swiper .info {
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .info {
 padding: 0px 3% 0px 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .info {
 text-align: center;
 padding: 0px;
 }}
.lightspot_section .lightspot_swiper .info .desc {
 line-height: 1.9rem;
 }
.lightspot_section .lightspot_swiper .flex .img {
 width: 54.6875%;
 aspect-ratio: 700 / 536;
 margin: 0px;
 }
.lightspot_section .lightspot_swiper .img {
 width: 89%;
 margin: 4.8rem auto 0px;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .flex .img {
 width: 58%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .img {
 width: 100% !important;
 }}
.lightspot_section .lightspot_swiper .img:hover img {
 transform: scale(1.02);
 }
.lightspot_section .lightspot_swiper .bold {
 font-weight: 700;
 }
.lightspot_section .lightspot_swiper .swiper-slide:nth-child(3) .img {
 width: 81%;
 margin-top: 3.7rem;
 }
.lightspot_section .lightspot_swiper .swiper-pagination {
 --swiper-pagination-bullet-horizontal-gap: 0.8rem;
 --swiper-pagination-bottom: 0;
 }
.swiper-pagination {
 position: absolute;
 text-align: center;
 transition: opacity 0.3s;
 transform: translate3d(0px, 0px, 0px);
 z-index: 10;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .swiper-pagination {
 --swiper-pagination-bullet-width: 5px;
 --swiper-pagination-bullet-height: 5px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .swiper-pagination {
 --swiper-pagination-bullet-width: 6px;
 --swiper-pagination-bullet-height: 6px;
 }}
.lightspot_section .skill {
 max-width: 112rem;
 width: calc(100% - 4rem);
 margin: 8rem auto 0px;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill {
 max-width: unset;
 width: 100%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill {
 max-width: unset;
 width: 100%;
 margin-top: 2.4rem;
 }}
.lightspot_section .skill .title {
 font-size: 4rem;
 line-height: 5.6rem;
 color: var(--title_color);
 font-weight: 600;
 margin-top: 2.4rem;
 padding-left: 2rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .title {
 font-size: 2.25rem;
 line-height: 2.7rem;
 margin-top: 1.3rem;
 margin-left: 1.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .title {
 padding: 0px;
 margin-top: 1.2rem;
 font-size: 1.6rem;
 line-height: 2.4rem;
 text-align: center;
 font-weight: 400;
 }}
.lightspot_section .skill .desc_list {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 align-items: flex-end;
 gap: 1rem;
 width: 72.32%;
 margin: 1rem auto 0px;
 position: relative;
 }
@media screen and (min-width: 768px) and (max-width: 1220px){
.lightspot_section .skill .desc_list {
 width: 89%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_list {
 max-width: 45.6rem;
 width: 100%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_list {
 margin-top: 2rem;
 max-width: 34.3rem;
 width: 100%;
 }}
.lightspot_section .skill .desc_item {
 font-size: 1.6rem;
 line-height: 2.2rem;
 color: rgb(255, 53, 9);
 display: flex;
 flex-direction: column;
 align-items: center;
 border-radius: 1.2rem;
 position: relative;
 padding: 4.3rem 3.3rem 4.8rem 4.7rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_item {
 font-size: 0.9rem;
 line-height: normal;
 padding: 2.4rem 1.5rem 3rem 2.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_item {
 font-size: 0.7rem;
 padding: 1.4rem 1rem 2rem 2rem;
 line-height: normal;
 }}
.lightspot_section .skill .desc_subtitle {
 display: flex;
 align-items: center;
 gap: 0.3rem;
 position: absolute;
 top: -2.8rem;
 z-index: 2;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_subtitle {
 top: -0.5rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_subtitle {
 top: -0.5rem;
 }}
.lightspot_section .skill strong {
 color: var(--title_color);
 text-shadow: rgb(255, 255, 255) 4px 0px, rgb(255, 255, 255) -4px 0px, rgb(255, 255, 255) 0px 4px, rgb(255, 255, 255) 0px -4px, rgb(255, 255, 255) 4px 4px, rgb(255, 255, 255) -4px -4px, rgb(255, 255, 255) 4px -4px, rgb(255, 255, 255) -4px 4px;
 font-size: 2.4rem;
 font-weight: 700;
 line-height: 1;
 display: inline-block;
 padding-bottom: 0.8rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill strong {
 font-size: 1.4rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill strong {
 font-size: 1rem;
 margin-bottom: 0.5rem;
 }}
.lightspot_section .skill strong ~ span {
 font-size: 4.8rem;
 color: var(--subtheme_color);
 font-weight: 600;
 background: url("https://www.drillinsight.com/wp-content/plugins/sytech-fronteditor/sytpl/ace_3_4/assets/img/skill-bg1.svg") center center / contain no-repeat;
 display: inline-block;
 text-align: center;
 line-height: 0.8;
 padding: 0px 1.2rem 1.3rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill strong ~ span {
 font-size: 2.7rem;
 padding: 0px 1rem 1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill strong ~ span {
 font-size: 2rem;
 padding: 0px 8px 0.5rem;
 }}
.lightspot_section .skill p {
 position: relative;
 z-index: 2;
 margin-top: auto;
 }
.lightspot_section .skill .desc_item:nth-child(2) {
 color: var(--content_color);
 padding-top: 38%;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_item:nth-child(2) {
 padding-top: 28%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_item:nth-child(2) {
 padding-top: 13%;
 }}
.lightspot_section .skill .desc_item:nth-child(2) .desc_subtitle {
 top: -3.8rem;
 }
.lightspot_section .skill .desc_item:nth-child(2) strong ~ span {
 background-image: url("https://www.drillinsight.com/wp-content/plugins/sytech-fronteditor/sytpl/ace_3_4/assets/img/skill-bg2.svg");
 padding: 0px 1.5rem 0.8rem;
 line-height: 1.1;
 }
.lightspot_section .skill em {
 font-style: normal;
 color: rgb(120, 214, 0);
 font-size: 1.8rem;
 font-weight: 700;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill em {
 font-size: 1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill em {
 font-size: 1rem;
 }}
.lightspot_section .skill .bg {
 position: absolute;
 width: 108%;
 left: 50%;
 top: 63%;
 transform: translate(-50%, -50%);
 border-radius: 1.2rem;
 overflow: hidden;
 pointer-events: none;
 z-index: -1;
 }
.lightspot_section .skill .bg img {
 display: block;
 width: 100%;
 object-fit: contain;
 }
 
@media screen and (max-width: 786px){


}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section {
 padding: 4rem 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section {
 padding: 2.4rem 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1440px){
.content_small, .content {
 padding: 0px 2rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.content_small, .content {
 max-width: 1000px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.content_small {
 max-width: 720px;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .content_small {
 padding: 0px 4.7rem;
 }}
@media screen and (max-width: 767px){
.content, .content_small {
 padding: 0px 16px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .content_small {
 padding: 0px 1.6rem;
 }}
@media screen and (max-width: 767px){
.head h2 {
 font-size: 24px;
 line-height: 32px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .platform {
 width: 100%;
 margin-top: 4.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform {
 width: 100%;
 max-width: unset;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section h3 {
 font-size: 2.25rem;
 line-height: 2.7rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section h3 {
 font-size: 1.6rem;
 line-height: 2.4rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform .rout {
 zoom: 0.7;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform .img {
 margin-bottom: 0.8rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .desc {
 font-size: 0.8rem;
 margin-top: 1.4rem;
 line-height: normal !important;
 }}
@media screen and (max-width: 767px){
.lightspot_section .desc {
 font-size: 1.2rem;
 line-height: 1.6rem;
 margin-top: 4px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items {
 max-width: unset;
 width: 100%;
 margin-top: 4.5rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items {
 margin-top: 2.4rem;
 padding: 0px;
 max-width: unset;
 width: 100%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items > div {
 gap: 4.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .item {
 padding-right: 4.5rem;
 gap: 1.2rem 4%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .item {
 flex-direction: column;
 padding: 0px;
 text-align: center;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .info {
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .pic {
 width: 57%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .pic {
 width: 100%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .item:last-child {
 padding-right: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1440px){
.lightspot_section .items .back_img {
 width: 56%;
 margin-right: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .back_img {
 width: 56%;
 margin-right: 0px;
 border-radius: 2.7rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .back_img {
 width: 100%;
 margin: 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper {
 margin-top: 2.4rem;
 padding-bottom: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.lightspot_section .lightspot_swiper .info {
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .info {
 padding: 0px 3% 0px 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .info {
 text-align: center;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .flex .img {
 width: 58%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .img {
 width: 100% !important;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .swiper-pagination {
 --swiper-pagination-bullet-width: 5px;
 --swiper-pagination-bullet-height: 5px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .swiper-pagination {
 --swiper-pagination-bullet-width: 6px;
 --swiper-pagination-bullet-height: 6px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill {
 max-width: unset;
 width: 100%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill {
 max-width: unset;
 width: 100%;
 margin-top: 2.4rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .title {
 font-size: 2.25rem;
 line-height: 2.7rem;
 margin-top: 1.3rem;
 margin-left: 1.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .title {
 padding: 0px;
 margin-top: 1.2rem;
 font-size: 1.6rem;
 line-height: 2.4rem;
 text-align: center;
 font-weight: 400;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.lightspot_section .skill .desc_list {
 width: 89%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_list {
 max-width: 45.6rem;
 width: 100%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_list {
 margin-top: 2rem;
 max-width: 34.3rem;
 width: 100%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_item {
 font-size: 0.9rem;
 line-height: normal;
 padding: 2.4rem 1.5rem 3rem 2.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_item {
 font-size: 0.7rem;
 padding: 1.4rem 1rem 2rem 2rem;
 line-height: normal;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_subtitle {
 top: -0.5rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_subtitle {
 top: -0.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill strong {
 font-size: 1.4rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill strong {
 font-size: 1rem;
 margin-bottom: 0.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill strong ~ span {
 font-size: 2.7rem;
 padding: 0px 1rem 1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill strong ~ span {
 font-size: 2rem;
 padding: 0px 8px 0.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_item:nth-child(2) {
 padding-top: 28%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_item:nth-child(2) {
 padding-top: 13%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill em {
 font-size: 1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill em {
 font-size: 1rem;
 }}
 
@media screen and (max-width: 786px){


}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section {
 padding: 4rem 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section {
 padding: 2.4rem 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1440px){
.content_small, .content {
 padding: 0px 2rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.content_small, .content {
 max-width: 1000px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.content_small {
 max-width: 720px;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .content_small {
 padding: 0px 4.7rem;
 }}
@media screen and (max-width: 767px){
.content, .content_small {
 padding: 0px 16px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .content_small {
 padding: 0px 1.6rem;
 }}
@media screen and (max-width: 767px){
.head h2 {
 font-size: 24px;
 line-height: 32px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .platform {
 width: 100%;
 margin-top: 4.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform {
 width: 100%;
 max-width: unset;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section h3 {
 font-size: 2.25rem;
 line-height: 2.7rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section h3 {
 font-size: 1.6rem;
 line-height: 2.4rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform .rout {
 zoom: 0.7;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform .img {
 margin-bottom: 0.8rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .desc {
 font-size: 0.8rem;
 margin-top: 1.4rem;
 line-height: normal !important;
 }}
@media screen and (max-width: 767px){
.lightspot_section .desc {
 font-size: 1.2rem;
 line-height: 1.6rem;
 margin-top: 4px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items {
 max-width: unset;
 width: 100%;
 margin-top: 4.5rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items {
 margin-top: 2.4rem;
 padding: 0px;
 max-width: unset;
 width: 100%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items > div {
 gap: 4.5rem;
 }}
 .lightspot_section .items .item.r {
  flex-direction: row-reverse;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .item {
 padding-right: 4.5rem;
 gap: 1.2rem 4%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .item {
 flex-direction: column;
 padding: 0px;
 text-align: center;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .info {
 padding: 0px;
 }}
.lightspot_section .items .pic {
 width: 57%;
 aspect-ratio: 640 / 386;
 background: url("https://www.drillinsight.com/wp-content/plugins/sytech-fronteditor/sytpl/ace_3_4_1/assets/img/light_bg.png") center center / cover no-repeat;
 position: relative;
 overflow: hidden;
 display: inline-block;
 }
.lightspot_section .items .pic::before {
 width: 12%;
 aspect-ratio: 60 / 9;
 background: url("https://www.drillinsight.com/wp-content/plugins/sytech-fronteditor/sytpl/ace_3_4_1/assets/img/mac_notch.svg") center center / contain no-repeat;
 content: "";
 position: absolute;
 top: 4px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 3;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .pic {
 width: 57%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .pic {
 width: 100%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .item:last-child {
 padding-right: 0px;
 }}
 .lightspot_section .items .r .back_img {
  margin-right: 0;
  margin-left: -7.2%;
 }
@media screen and (min-width: 768px) and (max-width: 1440px){
.lightspot_section .items .back_img {
 width: 56%;
 margin-right: 0px;
 }
 .lightspot_section .items .r .back_img {
margin-left: 0;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .back_img {
 width: 56%;
 margin-right: 0px;
 border-radius: 2.7rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .back_img {
 width: 100%;
 margin: 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper {
 margin-top: 2.4rem;
 padding-bottom: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.lightspot_section .lightspot_swiper .info {
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .info {
 padding: 0px 3% 0px 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .info {
 text-align: center;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .flex .img {
 width: 58%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .img {
 width: 100% !important;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .swiper-pagination {
 --swiper-pagination-bullet-width: 5px;
 --swiper-pagination-bullet-height: 5px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .swiper-pagination {
 --swiper-pagination-bullet-width: 6px;
 --swiper-pagination-bullet-height: 6px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill {
 max-width: unset;
 width: 100%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill {
 max-width: unset;
 width: 100%;
 margin-top: 2.4rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .title {
 font-size: 2.25rem;
 line-height: 2.7rem;
 margin-top: 1.3rem;
 margin-left: 1.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .title {
 padding: 0px;
 margin-top: 1.2rem;
 font-size: 1.6rem;
 line-height: 2.4rem;
 text-align: center;
 font-weight: 400;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.lightspot_section .skill .desc_list {
 width: 89%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_list {
 max-width: 45.6rem;
 width: 100%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_list {
 margin-top: 2rem;
 max-width: 34.3rem;
 width: 100%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_item {
 font-size: 0.9rem;
 line-height: normal;
 padding: 2.4rem 1.5rem 3rem 2.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_item {
 font-size: 0.7rem;
 padding: 1.4rem 1rem 2rem 2rem;
 line-height: normal;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_subtitle {
 top: -0.5rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_subtitle {
 top: -0.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill strong {
 font-size: 1.4rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill strong {
 font-size: 1rem;
 margin-bottom: 0.5rem;
 }}
.lightspot_section .skill strong ~ span {
 font-size: 4.8rem;
 color: var(--subtheme_color);
 font-weight: 600;
 background: url("https://www.drillinsight.com/wp-content/plugins/sytech-fronteditor/sytpl/ace_3_4_1/assets/img/skill-bg1.svg") center center / contain no-repeat;
 display: inline-block;
 text-align: center;
 line-height: 0.8;
 padding: 0px 1.2rem 1.3rem;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill strong ~ span {
 font-size: 2.7rem;
 padding: 0px 1rem 1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill strong ~ span {
 font-size: 2rem;
 padding: 0px 8px 0.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_item:nth-child(2) {
 padding-top: 28%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_item:nth-child(2) {
 padding-top: 13%;
 }}
.lightspot_section .skill .desc_item:nth-child(2) strong ~ span {
 background-image: url("https://www.drillinsight.com/wp-content/plugins/sytech-fronteditor/sytpl/ace_3_4_1/assets/img/skill-bg2.svg");
 padding: 0px 1.5rem 0.8rem;
 line-height: 1.1;
 }
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill em {
 font-size: 1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill em {
 font-size: 1rem;
 }}
 
@media screen and (max-width: 786px){


}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section {
 padding: 4rem 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section {
 padding: 2.4rem 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1440px){
.content_small, .content {
 padding: 0px 2rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.content_small, .content {
 max-width: 1000px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.content_small {
 max-width: 720px;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .content_small {
 padding: 0px 4.7rem;
 }}
@media screen and (max-width: 767px){
.content, .content_small {
 padding: 0px 16px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .content_small {
 padding: 0px 1.6rem;
 }}
@media screen and (max-width: 767px){
.head h2 {
 font-size: 24px;
 line-height: 32px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .platform {
 width: 100%;
 margin-top: 4.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform {
 width: 100%;
 max-width: unset;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section h3 {
 font-size: 2.25rem;
 line-height: 2.7rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section h3 {
 font-size: 1.6rem;
 line-height: 2.4rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform .rout {
 zoom: 0.7;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform .img {
 margin-bottom: 0.8rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .desc {
 font-size: 0.8rem;
 margin-top: 1.4rem;
 line-height: normal !important;
 }}
@media screen and (max-width: 767px){
.lightspot_section .desc {
 font-size: 1.2rem;
 line-height: 1.6rem;
 margin-top: 4px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items {
 max-width: unset;
 width: 100%;
 margin-top: 4.5rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items {
 margin-top: 2.4rem;
 padding: 0px;
 max-width: unset;
 width: 100%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items > div {
 gap: 4.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .item {
 padding-right: 4.5rem;
 gap: 1.2rem 4%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .item {
 flex-direction: column;
 padding: 0px;
 text-align: center;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .info {
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .pic {
 width: 57%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .pic {
 width: 100%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .item:last-child {
 padding-right: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1440px){
.lightspot_section .items .back_img {
 width: 56%;
 margin-right: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .back_img {
 width: 56%;
 margin-right: 0px;
 border-radius: 2.7rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .back_img {
 width: 100%;
 margin: 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper {
 margin-top: 2.4rem;
 padding-bottom: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.lightspot_section .lightspot_swiper .info {
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .info {
 padding: 0px 3% 0px 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .info {
 text-align: center;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .flex .img {
 width: 58%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .img {
 width: 100% !important;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .swiper-pagination {
 --swiper-pagination-bullet-width: 5px;
 --swiper-pagination-bullet-height: 5px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .swiper-pagination {
 --swiper-pagination-bullet-width: 6px;
 --swiper-pagination-bullet-height: 6px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill {
 max-width: unset;
 width: 100%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill {
 max-width: unset;
 width: 100%;
 margin-top: 2.4rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .title {
 font-size: 2.25rem;
 line-height: 2.7rem;
 margin-top: 1.3rem;
 margin-left: 1.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .title {
 padding: 0px;
 margin-top: 1.2rem;
 font-size: 1.6rem;
 line-height: 2.4rem;
 text-align: center;
 font-weight: 400;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.lightspot_section .skill .desc_list {
 width: 89%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_list {
 max-width: 45.6rem;
 width: 100%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_list {
 margin-top: 2rem;
 max-width: 34.3rem;
 width: 100%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_item {
 font-size: 0.9rem;
 line-height: normal;
 padding: 2.4rem 1.5rem 3rem 2.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_item {
 font-size: 0.7rem;
 padding: 1.4rem 1rem 2rem 2rem;
 line-height: normal;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_subtitle {
 top: -0.5rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_subtitle {
 top: -0.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill strong {
 font-size: 1.4rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill strong {
 font-size: 1rem;
 margin-bottom: 0.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill strong ~ span {
 font-size: 2.7rem;
 padding: 0px 1rem 1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill strong ~ span {
 font-size: 2rem;
 padding: 0px 8px 0.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_item:nth-child(2) {
 padding-top: 28%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_item:nth-child(2) {
 padding-top: 13%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill em {
 font-size: 1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill em {
 font-size: 1rem;
 }}
 
@media screen and (max-width: 786px){


}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section {
 padding: 4rem 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section {
 padding: 2.4rem 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1440px){
.content_small, .content {
 padding: 0px 2rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.content_small, .content {
 max-width: 1000px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.content_small {
 max-width: 720px;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .content_small {
 padding: 0px 4.7rem;
 }}
@media screen and (max-width: 767px){
.content, .content_small {
 padding: 0px 16px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .content_small {
 padding: 0px 1.6rem;
 }}
@media screen and (max-width: 767px){
.head h2 {
 font-size: 24px;
 line-height: 32px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .platform {
 width: 100%;
 margin-top: 4.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform {
 width: 100%;
 max-width: unset;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section h3 {
 font-size: 2.25rem;
 line-height: 2.7rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section h3 {
 font-size: 1.6rem;
 line-height: 2.4rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform .rout {
 zoom: 0.7;
 }}
@media screen and (max-width: 767px){
.lightspot_section .platform .img {
 margin-bottom: 0.8rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .desc {
 font-size: 0.8rem;
 margin-top: 1.4rem;
 line-height: normal !important;
 }}
@media screen and (max-width: 767px){
.lightspot_section .desc {
 font-size: 1.2rem;
 line-height: 1.6rem;
 margin-top: 4px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items {
 max-width: unset;
 width: 100%;
 margin-top: 4.5rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items {
 margin-top: 2.4rem;
 padding: 0px;
 max-width: unset;
 width: 100%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items > div {
 gap: 4.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .item {
 padding-right: 4.5rem;
 gap: 1.2rem 4%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .item {
 flex-direction: column;
 padding: 0px;
 text-align: center;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .info {
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .pic {
 width: 57%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .pic {
 width: 100%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .item:last-child {
 padding-right: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1440px){
.lightspot_section .items .back_img {
 width: 56%;
 margin-right: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .items .back_img {
 width: 56%;
 margin-right: 0px;
 border-radius: 2.7rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .items .back_img {
 width: 100%;
 margin: 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper {
 margin-top: 2.4rem;
 padding-bottom: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.lightspot_section .lightspot_swiper .info {
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .info {
 padding: 0px 3% 0px 0px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .info {
 text-align: center;
 padding: 0px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .flex .img {
 width: 58%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .img {
 width: 100% !important;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .lightspot_swiper .swiper-pagination {
 --swiper-pagination-bullet-width: 5px;
 --swiper-pagination-bullet-height: 5px;
 }}
@media screen and (max-width: 767px){
.lightspot_section .lightspot_swiper .swiper-pagination {
 --swiper-pagination-bullet-width: 6px;
 --swiper-pagination-bullet-height: 6px;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill {
 max-width: unset;
 width: 100%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill {
 max-width: unset;
 width: 100%;
 margin-top: 2.4rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .title {
 font-size: 2.25rem;
 line-height: 2.7rem;
 margin-top: 1.3rem;
 margin-left: 1.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .title {
 padding: 0px;
 margin-top: 1.2rem;
 font-size: 1.6rem;
 line-height: 2.4rem;
 text-align: center;
 font-weight: 400;
 }}
@media screen and (min-width: 768px) and (max-width: 1220px){
.lightspot_section .skill .desc_list {
 width: 89%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_list {
 max-width: 45.6rem;
 width: 100%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_list {
 margin-top: 2rem;
 max-width: 34.3rem;
 width: 100%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_item {
 font-size: 0.9rem;
 line-height: normal;
 padding: 2.4rem 1.5rem 3rem 2.1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_item {
 font-size: 0.7rem;
 padding: 1.4rem 1rem 2rem 2rem;
 line-height: normal;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_subtitle {
 top: -0.5rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_subtitle {
 top: -0.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill strong {
 font-size: 1.4rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill strong {
 font-size: 1rem;
 margin-bottom: 0.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill strong ~ span {
 font-size: 2.7rem;
 padding: 0px 1rem 1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill strong ~ span {
 font-size: 2rem;
 padding: 0px 8px 0.5rem;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill .desc_item:nth-child(2) {
 padding-top: 28%;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill .desc_item:nth-child(2) {
 padding-top: 13%;
 }}
@media screen and (min-width: 768px) and (max-width: 1024px){
.lightspot_section .skill em {
 font-size: 1rem;
 }}
@media screen and (max-width: 767px){
.lightspot_section .skill em {
 font-size: 1rem;
 }}
 
@media screen and (max-width: 786px){


}
 
@media screen and (min-width: 786px)  and (max-width: 1600px) {
  
}
@media screen and (min-width: 786px)  and (max-width: 1400px) {
  .content {
    padding: 0 1.2rem;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1200px) {
  .content {
    max-width: 1000px;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1000px) {
  .content {
    max-width: 786px;
  }
}
 
@media screen and (max-width: 786px) {
  .content {
    padding: 0 1.2rem;
  }
}
 
@media screen and (min-width: 786px)  and (max-width: 1600px) {
  
}
@media screen and (min-width: 786px)  and (max-width: 1400px) {
  .content {
    padding: 0 1.2rem;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1200px) {
  .content {
    max-width: 1000px;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1000px) {
  .content {
    max-width: 786px;
  }
}
 
@media screen and (max-width: 786px) {
  .content {
    padding: 0 1.2rem;
  }
} 

.tools_template_vendor .tools_template_box{
  padding: 4rem 0px;
  text-align: center;
}

.tools_template_vendor .tools_template_box input{
  padding: .8rem 1rem;
  border-radius: 5px;
  min-width: 300px;
  border: 1px #ddd solid;
}

.tools_template_vendor .tools_template_box button{
  background: white;
  border: 1px solid #f8f8f8;
  color: #4c4c4c;
  padding: 0.8rem 1.5rem;
  display: inline-block;
  font-weight: 500;
  border: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 10px;
  background-color: #33bde9;
  border: 1px solid #33bde9;
  color: white;
  padding: 0.8rem 1.5rem;
}

 
@media screen and (min-width: 786px)  and (max-width: 1600px) {
  
}
@media screen and (min-width: 786px)  and (max-width: 1400px) {
  .content {
    padding: 0 1.2rem;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1200px) {
  .content {
    max-width: 1000px;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1000px) {
  .content {
    max-width: 786px;
  }
}
 
@media screen and (max-width: 786px) {
  .content {
    padding: 0 1.2rem;
  }
}

 
@media screen and (min-width: 786px)  and (max-width: 1600px) {
  
}
@media screen and (min-width: 786px)  and (max-width: 1400px) {
  .content {
    padding: 0 1.2rem;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1200px) {
  .content {
    max-width: 1000px;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1000px) {
  .content {
    max-width: 786px;
  }
}
 
@media screen and (max-width: 786px) {
  .content {
    padding: 0 1.2rem;
  }
}
 
@media screen and (min-width: 786px)  and (max-width: 1600px) {
  
}
@media screen and (min-width: 786px)  and (max-width: 1400px) {
  .content {
    padding: 0 1.2rem;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1200px) {
  .content {
    max-width: 1000px;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1000px) {
  .content {
    max-width: 786px;
  }
}
 
@media screen and (max-width: 786px) {
  .content {
    padding: 0 1.2rem;
  }
}

 
@media screen and (min-width: 786px)  and (max-width: 1600px) {
  
}
@media screen and (min-width: 786px)  and (max-width: 1400px) {
  .content {
    padding: 0 1.2rem;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1200px) {
  .content {
    max-width: 1000px;
  }
}
@media screen and (min-width: 786px)  and (max-width: 1000px) {
  .content {
    max-width: 786px;
  }
}
 
@media screen and (max-width: 786px) {
  .content {
    padding: 0 1.2rem;
  }
}