/*
Theme Name: LG-WGL
Theme URI: https://utilli.co
Author: LG
Author URI: https://utilli.co
Description: This theme created for Utilli by LG.
Version: 1.0
*/

@charset "UTF-8";

body{ margin: 0px auto; padding: 0; color: #444; font-size: 16px; font-family: ProximaNova,Helvetica,Arial,sans-serif; }
a{ text-decoration: none; color: #005eb8; margin: 0px auto; padding: 0; }
h1, h2, h3, h4, h5, h6{ margin: 0px auto; padding: 0; color: #333; font-weight: 700; }
p{ margin: 0px auto; padding: 0; color: #444; font-weight: normal; }
ol, ul, li{ margin: 0px auto; padding: 0; list-style: none; }
input,select,textarea,button{ outline: none; }

.clear{ clear: both; }
.transn{ transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; }

/* ############################################################ */

.lg-flt-l{ float: left; }
.lg-fullwid-area{ width: 100%; height: auto; margin: 0px auto; padding: 0; }
.lg-minwid-wrapr{ width: 960px; height: auto; margin: 0px auto; padding: 0; }
.lg-fullwid-wrapr{ width: 100%; height: auto; margin: 0px auto; padding: 0; }

/* Header ################## */

.lg-hadr-area{ padding: 40px 0 35px; display: flex; align-items: center; }
.lg-hadr-logo{ width: 50%; height: auto; margin: 0px auto; padding: 0; float: left; }
.lg-hadr-logo img{ width: auto; height: auto; max-height: 80px; margin: 0px auto; padding: 0; float: left; }
.lg-hadr-btns{ width: 50%; height: auto; margin: 0px auto; padding: 0; text-align: right; float: right; }
.pings{
   background: #fff;
   border-radius: 1.25rem;
   padding: 0.5rem 0.9375rem 0.375rem;
   font-size: .875rem;
   color: #005eb8;
   text-align: center;
   border: 1px solid #eef3fa;
   display: inline-block;
}
.pings:hover{ background-color: #eef3fa; }

.lg-hadr-nav{ border-top: 1px solid #e4e9f0; }

.lg-hnav-wrapr{ width: auto; height: auto; margin: 0px auto; padding: 0; float: right; }
.lg-hnav-wrapr li{ width: auto; height: auto; margin: 0px auto; padding: 0; box-sizing: border-box; position: relative; float: left; }
.lg-hnav-wrapr li a{ width: auto; height: auto; margin: 0px auto; padding: 15px 8px; box-sizing: border-box; text-decoration: none; color: #005eb8; text-transform: uppercase; font-size: 14px; font-weight: 700; cursor: pointer; border-bottom: 4px solid #fff; float: left; }
.lg-hnav-wrapr li:hover a{ color: #444; border-bottom: 4px solid #2a2a2b; }

.lg-hnav-sub{ background: #2a2a2b; width: auto; height: auto; max-height: 0; margin: 0px auto; padding: 0; overflow: hidden; position: absolute; top: 50px; left: -250px; display: flex; z-index: 99; float: left; }
.lg-hnav-sub li{ width: auto; height: auto; min-width: 250px; margin: 0px auto; padding: 0; box-sizing: border-box; float: left; }
.lg-hnav-sub li a{ width: 100%; height: auto; margin: 0px auto; padding: 8px 10px; box-sizing: border-box; text-align: center; text-decoration: none; text-align: left; color: #ffc500 !important; font-size: 1.375rem; text-transform: none; font-weight: normal; border: none; float: left; }
.lg-hnav-wrapr li:hover .lg-hnav-sub{ max-height: 800px; padding: 30px; }
.lg-hnav-wrapr li:hover li a{ border: none; }

.lg-hnav-subn{ width: auto; height: auto; margin: 0px auto; padding: 0; overflow: hidden; position: relative; top: 0; left: 0; z-index: 9; float: left; }
.lg-hnav-subn li{ width: 100%; height: auto; margin: 0px auto; padding: 0; box-sizing: border-box; float: left; }
.lg-hnav-subn li a{ width: 100%; height: auto; margin: 0px auto; padding: 8px 10px; box-sizing: border-box; text-align: center; text-decoration: none; text-align: left; color: #fff !important; font-size: 14px; text-transform: none; font-weight: 700; border: none; float: left; }
.lg-hnav-subn li:hover a{ color: #005eb8 !important; }

/* Slider ######################### */

.lg-slidr-area{ width: 100%; height: auto; margin: 0px auto; padding: 0; float: left; }
.lg-slidr-area img{ width: 100%; height: auto; max-width: 100%; margin: 0px auto; padding: 0; float: left; }

/* Sec ################################ */

.lg-sec-area{ margin: 40px auto 0px; padding: 0; }
.lg-sec-hadr{ width: 100%; height: auto; margin: 0px auto 12px; padding: 0; float: left; }
.lg-sec-hadr h2{ width: 100%; height: auto; margin: 0px auto; padding: 0; color: #005eb8; font-size: 2.5rem; line-height: 1; font-weight: 100; font-family:Calibri Light; float: left; }
.lg-sec-cont{ width: 100%; height: auto; margin: 0px auto 10px; padding: 0; float: left; }
.lg-sec-cont p{ width: 100%; height: auto; margin: 0px auto; padding: 0; color: #5f5f5f; font-size: 1.0625rem; line-height: 1.5625; float: left; }

.lg-hmc-area{ width: 100%; height: auto; margin: 0px auto; padding: 0; border: 1px solid #e6e6e6; box-sizing: border-box; float: left; }
.lg-hmc-btnarea{ background: url(https://wgle.utilli.co/wp-content/uploads/2022/07/bg-hmc-green-banner.jpg) top right no-repeat #005eb8; background-size: cover; width: 50%; height: auto; margin: 0px auto; padding: 20px 50px 25px; box-sizing: border-box; float: left; }
.lg-hmc-lside{ width: 100%; height: auto; margin: 0px auto; padding: 0; float: left; }
.lg-hmc-lside h3{ width: 100%; height: auto; margin: 0px auto 15px; padding: 0; color: #fff; text-transform: uppercase; font-size: 1.0625rem; font-weight: normal; float: left; }


.lg-btn-gnrl{ background-color: #fff; width: auto; padding: 8px 20px; box-sizing: border-box; display: inline-block; border: 1px solid #e4e9f0; border-bottom: 4px solid #ffc500; color: #005eb8; font-size: .9375rem; font-weight: 700; line-height: normal; cursor: pointer; float: none; }
.lg-btn-aro{ position: relative; }
.lg-btn-aro:after{ content: ""; margin-left: 0.625rem; color: #005eb8; font-size: .875rem; display: inline-block; font: normal normal normal 14px/1 FontAwesome; position: relative; }
.lg-btn-gnrl:hover{ background: #e4e9f0; }


.lg-hmc-frmarea{ width: 50%; height: auto; margin: 0px auto; padding: 20px 40px 25px; box-sizing: border-box; position: relative; float: left; }
.lg-hmc-rside{ width: 100%; height: auto; margin: 0px auto; padding: 0; float: left; }
.lg-hmc-rtxt{ width: 100%; height: auto; margin: 0px auto 15px; padding: 0; color: #4eaf6b; text-transform: uppercase; font-size: 1.0625rem; float: left; }
.lg-hmc-rform{ width: 100%; height: auto; margin: 0px auto; padding: 0; display: flex; float: left; }
.lg-hmc-rform input[type=text]{ background-color: #fff; width: 100%; height: 38px; margin: 0px auto; padding: 0 .75rem; border: 1px solid #e6e6e6; box-sizing: border-box; font-size: 1.0625rem; font-weight: 400; line-height: 1.2941176471; float: left; }
.lg-hmc-rform button{ width: 70%; height: auto; margin: 0px 0px 0px 10px; padding: 0; float: left; }
.lg-hmc-or{ background: #fff; width: 40px; height: 40px; margin: 0px auto; padding: 0; border-radius: 50px; border: 6px solid #fff; box-shadow: inset 0 0 2px rgb(0 0 0 / 40%); position: absolute; left: -26px; top: calc(50% - 26px); display: flex; align-items: center; justify-content: center; font-size: 1rem; float: left; }


.lg-promo-area{ background: url(https://wgle.utilli.co/wp-content/uploads/2022/07/bg-hmc-green-banner.jpg) top left no-repeat #fff; width: 100%; height: auto; margin: 0px; padding: 28px 40px; border: 1px solid #e6e6e6; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; float: left; }
.lg-promo-txt{ width: 33.33333333%; height: auto; padding: 0; margin: 0px; }
.lg-promo-txt h3{ width: 100%; height: auto; margin: 0px auto; padding: 0; color: #fff; font-size: 1.0625rem; font-weight: normal; float: left; }
.lg-promo-input{ width: 33.33333333%; height: auto; padding: 0; margin: 0px; }
.lg-promo-input input[type=text]{ background-color: #fff; width: 300px; height: 38px; margin: 0px auto; padding: 0 .75rem; border: 1px solid #e6e6e6; box-sizing: border-box; font-size: 1.0625rem; font-weight: 400; line-height: 1.2941176471; float: left; }
.lg-promo-atxt{ text-align: right; }
.lg-promo-btn{ width: auto; height: auto; padding: 0; margin: 0px; }


.lg-hpost-sec{ width: 100%; height: auto; padding: 0; margin: 40px auto 0px; padding: 0; float: left; }
.lg-hpost-area{ width: calc(100% + 16px); height: auto; padding: 0; margin: 0px 0px 0px -8px; float: left; }
.lg-hpost-warpr{ width: 33.3333333333%; height: auto; padding: 0 8px; margin: 0px auto; box-sizing: border-box; float: left; }
.lg-hpost-min{ width: 100%; height: auto; padding: 0; margin: 0px auto; box-sizing: border-box; position: relative; border: 1px solid #e6e6e6; float: left; }
.lg-hpost-new{ width: 40px; height: 40px; padding: 0; margin: 0px auto; box-sizing: border-box; position: absolute; left: -15px; top: -20px; float: left; }
.lg-hpost-new img{ width: 40px; height: 40px; padding: 0; margin: 0px auto; box-sizing: border-box; float: left; }
.lg-hpost-thmb{ background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 161px; padding: 0; margin: 0px auto; box-sizing: border-box; float: left; }
.lg-hpost-cont{ width: 100%; height: 215px; padding: 30px 20px 40px; margin: 0px auto; box-sizing: border-box; overflow: hidden; position: relative; float: left; }
.lg-hpost-cont h3{ width: 100%; height: auto; margin: 0px auto; padding: 0; color: #005eb8; font-size: 1.3rem; font-weight: normal; line-height: 1.1111111111; float: left; }
.lg-hpost-cont p{ width: 100%; height: auto; margin: 0px auto; padding: 0; color: #5f5f5f; font-size: 1.0625rem; font-weight: normal; line-height: 1.6625; float: left; }
.lg-hpost-hcont{ background-image: linear-gradient(rgba(255,255,255,0),#fff 50%); width: 100%; height: 60px; padding: 0; margin: -60px auto 0px; position: relative; float: left; }


.lg-slusn-sec{ background-image: url(https://wgle.utilli.co/wp-content/uploads/2022/07/bg-solutions-grid.jpg); background-size: cover; margin: 90px auto 0px;  }
.lg-slusn-area{ width: 100%; height: auto; margin: 0px auto; padding: 40px 0 50px; box-sizing: border-box; float: left; }
.lg-slusn-area .lg-sec-hadr h2{ color: #fff; font-size: 2.5rem; line-height: 1; }
.lg-slusn-area .lg-sec-cont p{  color: #fff; font-size: 1.0625rem; line-height: 1.5625; }
.lg-slusn-row{ width: calc(100% + 6px); height: auto; margin: 0px 0px 0px -3px; padding: 0; float: left; }
.lg-slusn-wrapr{ width: 25%; height: auto; margin: 0px auto; padding: 0 3px; box-sizing: border-box; float: left; }
.lg-slusn-inner{ width: 100%; height: 225px; margin: 0px auto; padding: 0; position: relative; float: left; }
.lg-slusn-min{ width: 100%; height: 100%; margin: 0px auto; padding: 0; box-sizing: border-box; position: absolute; float: left; }

.lg-slusn-flptop{
background: #005eb8;
display: block;
position: absolute;
height: 100%;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
color: #fff;
}

.lg-hflptop-wrapr{ background-size: cover; width: 100%; height: 100%; display: flex; align-items: center; }
.lg-hflptop-innr{ width: 100%; height: auto; margin: 0px; padding: 0; text-align: center; }
.lg-hflptop-innr img{ width: 96px; height: 96px; margin: 0px; padding: 0; text-align: center; }
.lg-hflptop-innr h4{ margin: 15px auto 10px; color: #fff; font-size: 1.11rem; font-weight: normal; line-height: 1.2222222222; }

.lg-slusn-flpbtm{
   background-color: #fff;
   display: block;
   position: absolute;
   height: 100%;
   width: 100%;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
   color: #090909;
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
   cursor: pointer;
}

.lg-hflpbtm-wrapr{ width: 100%; height: 100%; padding: 8px; box-sizing: border-box; float: left; }
.lg-hflpbtm-wrapr img{ width: 96px; height: 96px; margin: 0px; padding: 0; text-align: center; }
.lg-hflpbtm-wrapr h3{ width: calc(100% - 50px); margin: 0px auto 15px; padding: 0 0 3px; border-bottom: 1px solid #ffedb2; color: #005eb8; font-size: 18px; font-weight: 700; float: left; }
.lg-hflpbtm-wrapr p{ width: 100%; margin: 0px auto 20px; padding: 0; color: #5f5f5f; font-size: 14px; font-weight: normal; line-height: 1.5625; float: left; }


.lg-hflpbtn-p{ margin: 0px !important; text-align: right; }
.lg-hflpbtn-a{ height: auto; padding: 4px 20px; border-bottom: 1px solid #ffc500; font-size: 14px; float: right; }


.side{-webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-transition: transform 1s;
   -moz-transition: transform 1s;
   -ms-transition: transform 1s;
   -o-transition: transform 1s;
   transition: transform 1s;}

.fliped .lg-slusn-flptop{ -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg); }

.fliped .lg-slusn-flpbtm{ -webkit-transform: rotateY(0);
   -moz-transform: rotateY(0);
   -ms-transform: rotateY(0);
   -o-transform: rotateY(0);
   transform: rotateY(0); }

.lg-btmbnr-area{ background: #0f0e30; width: 100%; height: auto; margin: 0px auto; padding: 50px 40px 65px; box-sizing: border-box; float: left; }
.lg-btmbnr-larea{ width: 50%; height: auto; margin: 0px auto; padding: 0 30px; box-sizing: border-box; float: left; }
.lg-btmbnr-thmb{ width: 100%; height: auto; margin: 0px auto; padding: 0; text-align: center; float: left; }
.lg-btmbnr-thmb img{ width: auto; height: auto; max-height: 77px; margin: 0px auto; padding: 0; display: inline-block; }
.lg-btmbnr-txt{ width: 100%; height: auto; margin: 20px auto 0px; padding: 0; text-align: center; float: left; }
.lg-btmbnr-txt h2{ width: 100%; height: auto; margin: 10px auto; padding: 0; color: #83ba30; font-size: 50px; font-weight: 700; float: left; }
.lg-btmbnr-txt h3{ width: 100%; height: auto; margin: 0px auto; padding: 0; color: #fff; text-transform: uppercase; font-size: 30px; font-weight: normal; float: left; }
.lg-btmbnr-btn{ background: #71c5e8; margin: 30px auto 30px; padding: 10px 45px; border-radius: 50px; border: 2px solid #f4f4f4; color: #fff; font-size: .9rem; font-weight: normal; text-transform: uppercase; }
.lg-btmbnr-btn:hover{ background: #71c5e8; }
.lg-btmbnr-txt p{ width: 100%; height: auto; margin: 0px auto; padding: 0; color: #fff; font-size: 1.0225rem; font-style: italic; font-weight: normal; float: left; }

.lg-btmbnr-img{ width: 50%; height: auto; margin: 0px auto; padding: 0 10px 0 10px; box-sizing: border-box; float: left; }
.lg-btmbnr-img img{ width: 100%; height: auto; max-width: 100%; margin: 0px auto; padding: 0; float: left; }


.lg-hfnltxt{ width: 100%; height: auto; margin: 0px auto; padding: 0; float: left; }
.lg-hfnltxt p{ font-size: 1.0225rem; line-height: 1.5625; }

.lg-hvribtm-sec{ background-size: 100% 100%; margin: 40px auto 0px;  }
.lg-hvribtm-wrapr{ width: 100%; height: 108px; margin: 0px auto; padding: 0; display: flex; align-items: center; float: left;  }
.lg-hvribtm-txt{ width: calc(100% - 190px); height: auto; margin: 0px auto; padding: 0 40px 0 0; box-sizing: border-box; float: left;  }
.lg-hvribtm-txt p{ color: #fff; font-size: 1.1rem; line-height: 1.5625; font-weight: normal; }
.lg-hvribtm-txt span{ color: #ffc500; }
.lg-hvribtm-btn{ width: 190px; height: auto; margin: 0px auto; padding: 0; text-align: left; float: right;  }
.lg-hvribtm-btn A{ padding: 12px 30px; }

.lg-footer{ background: #232324; width: 100%; height: auto; margin: 0px auto; padding: 40px 0; box-sizing: border-box; float: left; }
.lg-footer-area{ width: 100%; height: auto; margin: 0px auto; padding: 0; float: left; }
.lg-footer-wrapr{ width: 100%; height: auto; margin: 10px auto; padding: 0; float: left; }
.lg-footer-l{ width: 310px; height: auto; margin: 0px auto; padding: 0 60px 0 0; box-sizing: border-box; float: left; }
.lg-ftr-nav{ width: 100%; height: auto; margin: 0px auto; padding: 0; float: left; }
.lg-ftr-nav li{ width: 100%; height: auto; margin: 0px auto; padding: 0; box-sizing: border-box; float: left; }
.lg-ftr-nav li a{ width: 100%; height: auto; margin: 0px auto; padding: 0; box-sizing: border-box; text-decoration: none; color: #ffc500; font-size: 16px; line-height: 1.6; font-weight: normal; cursor: pointer; float: left; }

.lg-footer-m{ width: 390px; height: auto; margin: 0px auto; padding: 0; float: left; }
.lg-footer-m h3{ color: #ffc500; font-size: 16px; line-height: 1; font-weight: normal; }
.lg-footer-m p{ color: #fff; font-size: 1.0225rem; line-height: 1.25; font-weight: normal; }
.lg-footer-r{ width: 260px; height: auto; margin: 0px auto; padding: 0 0 0 100px; box-sizing: border-box; float: left; }
.lg-footer-ca{ width: 100%; height: auto; margin: 0px auto; padding: 0; float: left; }
.lg-footer-ca a{ width: 100%; height: auto; margin: 0px auto; padding: 0; box-sizing: border-box; text-decoration: none; color: #ffc500; font-size: 15px; line-height: 1.6; font-weight: normal; cursor: pointer; float: left; }
.lg-footer-ca-p{ color: #fff !important; }
.lg-footer-ca-e{ font-size: 12px !important; }
.lg-footer-sm{ width: 100%; height: auto; margin: 6px auto 0px; padding: 0; float: left; }
.lg-footer-sm a{ width: 40px; height: 40px; margin: 0px 6px 0px 0px; padding: 0; box-sizing: border-box; text-decoration: none; color: #ffc500; font-size: 15px; line-height: 1.6; font-weight: normal; cursor: pointer; border: 1px solid #ffc500; border-radius: 40px; display: flex; align-items: center; justify-content: center; float: left; }
.lg-footer-copy{ width: 100%; height: auto; margin: 0px auto; padding: 0; color: #fff; font-size: .8rem; float: left; }