@import url('https://fonts.googleapis.com/css?family=Kanit:200,300,400,700,900|Source+Sans+Pro:300,400,700,900');


body,html{ overflow-x: hidden;}
body {
  
    background:#FFF ; font-family:Source Sans Pro,Kanit;
    color:#63676b;
    font-size: 14px;
  }
  
  a,a *{ text-decoration: none !important; transition: ease-in-out 0.5s;color: #377cfb;cursor: pointer; }
  a img { border: 0; text-decoration: none;}
  p { line-height: 1.5;}

    .Kanit { font-family: Kanit;}

  :focus {
    outline: -webkit-focus-ring-color auto 0px;
}
@media screen and (max-width:814px){

     h1 { font-size: 1.8rem;}

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

  h1 { font-size: 1.5rem;}
  .modal-content .font-size-16px { font-size: 12px; }
  .nav-link.py-4 { padding: 10px  !important;}
  .modal-content  .pl-3 { padding-left: 0!important;}
}

button:focus {
  outline: 0px dotted;
  outline: 0px auto -webkit-focus-ring-color;
}
.bg-default,.bg-green{background:#178258;color: #FFF;}
.navbar-brand{ font-family: 'Kanit';}
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255,255,255,1);
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{color:#86d4f1 !important}
@media screen and (max-width:1024px){
.navbar-brand { font-size: 1em;}
}
@media screen and (max-width:768px){

    .logo-main { width: 200px;}
}

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

.navbar-brand { font-size:13px;}
html,body{overflow-x: hidden;}
}


.color-white {color: #FFF;}
.color-hard-white {color:#bbb;}
a.color-white:hover {color: #FFF;}
.color-grey{ color:#555;}
.color-midium-grey {color:#6d6e71;}
.color-dark-grey{ color:#222;}
.color-black { color: #000;}
.color-light-black {color:#141c0a;}
.color-purple{color:#d662d4}
.color-d-purple{color:#5d3a9d}

.border-purple{ border: 1px solid #5d3a9d;} 
.border-l-purple{ border: 1px solid #d662d4;} 
.dropdown-menu{

  font-size:14px; padding-top: 1rem; padding-bottom: 1rem;
}

.dropdown-menu small {

  font-size:16px;

}



.dropdown-item { color:#22a85b; padding: 0.3rem 1.5rem;}

/* dropdown hover str */
 /*.dropdown:hover>.dropdown-menu {
  display: block;
}
 */

  /*Without this, clicking will make it sticky*/
/*
.dropdown>.dropdown-toggle:active {
     pointer-events: none;
}
 */
.navbar a .letter-text{ color: #FFF;}
/* dropdown hover end  */
@media screen and (min-width:768px){

  .navbar-nav .dropdown-menu { background-color: #31304D; margin-top: 0; border-radius:0 .25rem .25rem .25rem;
    border:1px solid #495396}
  .navbar-nav .dropdown-item { color: #FFF;}
  .navbar-nav .dropdown-item:hover { color: #38b96f;}
  .nav-item.dropdown.show{ 
    border: 1px solid #38b96f;
      border-bottom: 0 solid #ccc;
      margin-bottom: 0px;
  }
}
.dropdown-toggle::after{color: #d662cc;}
.nav-link.active.dropdown-toggle::after {
  color: #FFF;
}
.nav-link.active {color: #86d4f1 !important; }

.navbar-light .navbar-nav .nav-link { line-height: 1;}

.mainBanner { background: #5d3a9e; position: relative; }

.mainBanner:before { content:""; position: absolute; top: 0; width: 100%; 
   height: 150px;
  background: -moz-linear-gradient(top,  rgba(93,58,158,1) 0%, rgba(93,58,158,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(93,58,158,1) 0%,rgba(93,58,158,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(93,58,158,1) 0%,rgba(93,58,158,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d3a9e', endColorstr='#005d3a9e',GradientType=0 ); /* IE6-9 */
  } 

  /*.mainBanner:after{
    content:""; bottom:0px;left: 0; width:230px; height:250px;position: absolute;transform:rotatey(180deg) rotatex(180deg);
     background-image:url(../image/bg/logo-bg.png) ; background-repeat: no-repeat; background-size: contain;-ms-transform-origin-z:180;
    background-position: left;
    }*/

.mainBanner-one { background-image:url(../image/bg/bg-graphic.jpg) ; background-position: center; background-size: cover; background-repeat: no-repeat;   }
.mainBanner-job{ background-image:url(../image/bg/jobs-roo-cut.jpg) ; background-position: center; background-size: cover; background-repeat: no-repeat;   }
.mainBanner-findjob{ background-image:url(../image/bg/findjopbs.jpg) ; background-position: center; background-size: cover; background-repeat: no-repeat;   }

.mainBanner-about{ background-image:url(../image/about/aboutus-bn.jpg) ; background-position: center; background-size: cover; background-repeat: no-repeat;   }
.mainBanner-uc{ background-image:url(../image/uc/ud-bn.jpg) ; background-position: center; background-size: cover; background-repeat: no-repeat;   }

.mainBanner-our-service-solutions {background-image:url(../image/bg/solution-service-bg.jpg) ; background-position: center; background-size: cover; background-repeat: no-repeat;   }
.toppic-box{    min-height: calc(100vh - 56px); display: flex; align-items: center; justify-content: center; flex-direction: column; text-shadow:0 1px 2px rgba(0,0,0,.5) ; }

.card { background: #fff; box-shadow: ;}

.mb-0{ margin-bottom: 0 !important;}

/*banner text-edit str*/
.font-x-banner-h1 { font-size:55px; line-height: 1.0;text-align: left;  }

.font-x-banner-h1.pos2 { font-size:38px !important;}
.font-x-banner-h1.pos2 b { display: block; font-size: 52px;}
.font-x-banner-h1.pos3 b { display: block; font-size: 67px;}

.font-x-banner-main-1 {
  font-size: 29.4px;
}

.font-x-banner-main-2 {
  font-size: 38.2px;
}

.font-x-banner-main-3{
  font-size: 31px;

}

.f35 { font-size: 35px;}

@media screen and (min-width:970px){
  .font-x-banner-h1.pos3 span {letter-spacing: 4px;}
  .font-x-banner-main-2 b{letter-spacing: 7.8px;}
}
@media screen and (max-width:970px){

  .font-x-banner-h1 { font-size:2rem; line-height: 1; text-align: left ;}
.font-x-banner-main-1,.font-x-banner-main-2,.font-x-banner-main-3 {
  font-size:25px;line-height: 1; text-align: left;  
}
.font-x-banner-h1.pos3 b { display: block; font-size: 37px; text-align: left;}
.font-x-banner-h1.pos2 b { display: block; font-size: 25px;text-align: left;}
.f35 {
  font-size: 22px;
}
}
@media screen and (max-width:449px){
  .font-x-banner-main-1 {
    font-size:22px;line-height: 1;
  }

}

@media screen and (max-width:367px){
  .font-x-banner-main-1 {
    font-size:95%;line-height: 1;
  }

}
/*banner text-edit str*/


@media screen and (max-width:1500px){
  .toppic-box{ 
   
    display: flex;
   /* align-items: flex-end;*/
    justify-content: center;
    /*padding-right: 5%;*/
    flex-direction: column;}
}

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

 /* .mainBanner-one { background-position-x: 60vw;}*/
  
}
@media screen and (max-width:986px){

  /*.mainBanner-one { background-position-x: 40%;}*/
  .mainBanner:before { content:""; position: absolute; top: 0; width: 100%; 
    height: 100vh;
  }
  .toppic-box h1 {position: absolute;padding-left: 15px;}


}
@media screen and (max-width:768px){
  /*.mainBanner-one{background-size: auto 800px; background-position-y: 100%;}*/
.toppic-box{  align-items:center;}

}
.bg-product-grey{background: url(../image/banner-grey.jpg) #fff center center; color: #FFF; box-shadow: 0 2px 10px #ccc ;}
.bg-product { background: url(../image/banner-bg.png) center center; color: #FFF;}

.bg-product-greenbg{ background: url(../image/bg-green.jpg) center center; color: #FFF;}

.bg-product-redbg{ background: url(../image/banner/bg-red.png) center center; color: #FFF;}

.bg-product-bluebg{ background: url(../image/banner/bg-blue.png) center center; color: #FFF;}
 
.bg-product-whitebg{ background:  #fff center center; color: #22a85b;}

.bg-product-purple-bg { background:#5d3a9e url(../image/bg/bg-logo-pruple.jpg) right bottom no-repeat; background-size:600px auto  !important;  }

.bg-purple-gardient-right {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a44b9e+0,5d3a9e+100&1+0,0+100 */
background: -moz-linear-gradient(left,  rgba(164,75,158,1) 0%, rgba(93,58,158,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(164,75,158,1) 0%,rgba(93,58,158,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(164,75,158,1) 0%,rgba(93,58,158,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a44b9e', endColorstr='#005d3a9e',GradientType=1 ); /* IE6-9 */


}

.bg-dark-purple {background: #22154a;color: #FFF;}
.bg-dark-purple  .close { color: #FFF;font-size: 2.5rem;margin-right: 10px;
  font-weight: 300;}
  .bg-dark-purple a{ color: rgb(10 236 247 / 97%);}

.bg-dark-purple .nav-pills .nav-link.active,.nav-pills .show>.nav-link {background: #22154a !important;
  box-shadow: -2px 0px 3px #1b0927;color: #FFF!important;
  border-radius: 0;}
.bg-light-blue { background-color:#bef0ff!important;}
.bg-lighty-blue {background-color:#87d4f0}
.white-grey-bg {background-color:#f8f8f8 ;}
@media screen and (min-width:768px){
  .bg-prism{background: URL(../image/bg/bg-prism.jpg) top no-repeat  #77bbdb !important; background-size: 100% auto;}
}

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

  .hl-t-absolute-lg { position: absolute; left: 0; width: 100%;   }

}




.hr-od-bn-1 { background: url(../image/bg/hr-solutuion1.jpg) no-repeat right  ; background-size: contain;background-size: 40%; background-position-y: 20%;  }
.hr-od-bn-2 { background: url(../image/bg/staff-outsourcing.jpg) no-repeat right; background-size: contain;  }
.hr-od-bn-3 { background: url(../image/bg/hr-solutuion2.jpg) no-repeat right; background-size: contain;  }
.hr-od-bn-4 { background:#FFF url(../image/bg/hr-solutuion3a.jpg) no-repeat right; background-size: contain;   }

@media screen and (min-width:1200px){
  .hr-od-bn-1,.hr-od-bn-2,.hr-od-bn-3{background-position-x: 80%; }

}
@media screen and (max-width:1200px)and (min-width:768px){
  .hr-od-bn-1{background-size: auto 100%;}
}
@media screen and (min-width:768px){

.banner-main .h-400-md  { height: 400px!important;}
.right-box-menu { margin-left: 15px;}}

@media screen and (max-width:768px){
  
  .swiper-slide { position: relative;}
  .swiper-slide:before { background:rgba(255,255,255,.75); position: absolute; content:""; width: 100%; height: 100%; top:0;left: 0;z-index: 0;}
  .swiper-slide.hr-od-bn-4:before { background:rgba(255,255,255,.75); position: absolute; content:""; width: 100%; height: 100%; top:0;left: 0;z-index: 0;}
  .hr-od-bn-2 * { z-index: 9 !important; color: #000;}
  .hr-od-bn-3{background-size: auto 100%; background-position-x: 70%; }
  .hr-od-bn-1{background-size:auto 100%; background-position-x: 70%; }
  .hr-od-bn-4{background-size: auto 100%; background-position-x: 70%; }
}

@media screen and (max-width:992px){
  .right-box-menu{ 
    padding-bottom: 10px; 
    padding-top: 20px;
    margin-left: 0;}
}
@media screen and (max-width:768px){
 
  .banner-main .h-400-md  {  height: 400px !important; width: 100% !important; height: auto!important;}
  h2 { font-size: 23px;}
  h3 { font-size: 20px;}
  }

/*btn str*/

.primary-btn {color: #FFF; background: #377cfb; font-family: 700; border-radius: 10px; padding: 10px 20px; margin-top: 10px; margin-bottom: 10px;  }

/*btn end*/

/*a-product str*/

.a-product { transition:  ease-in  0.5s ease-out 0s; position: relative; display:block ; overflow: hidden !important; }


/*.a-product * { transition: ease-in 0.25s; transform: all 0.25s;}*/
.a-product:hover { padding-bottom: 37px;}
.a-product:hover img {height: calc(100% + 37px); }
.a-product:hover .bg-dark-30  { position: absolute; width: 100%; height: 100%; 
  top:0; display: flex; align-items: center; justify-content: center;
background-color:#178257d3;}

.a-product:hover .bg-dark-30::after{ content: ' ';
    background: url(../image/icon/click.png) no-repeat center; background-position-y:90% ; background-size: 40% auto; 
    width: 100%; height: 100%; position: absolute;
}  

@media screen and (max-width:450px){
  .a-product:hover .bg-dark-30::after{background-size: 60% auto;background-position-y:98% ; }

}

/*a-product end*/



.lh-100 {line-height: 1;}

 .bg-black{ background-color: #000;}

.bg-grey-light { background-color: #e6e7e8;}

.bg-grey-lighter {background-color:#f1f2f2}

.bg-dark-30 {background-color: #178258;z-index: 99;position: inherit;}
.bg-dark-60 {background-color: rgba(0,0,0,.6);}

.bg-light-back {background-color:#31304d;}
.bg-light-back a {color:#FFF} 
.bg-red { background-color: #d3436b;}
.bg-mid-red { background-color: #f04837;}
.bg-l-blue {background-color: #2fb9ea;}
.bg-l-green {background-color: #0c6a89;}
.bg-yellow {background-color: #f9b808;}
.bg-mid-yellow{background-color: #f79601;}

.bg-pinkred { background-color: #f35844;}
.bg-d-purple{ background-color: #31304d;}
.bg-purple{background-color: #a44b9e;}
.bg-light-purple{background-color:#5d3a9e;}
.bg-green{background-color: #aad356;}
.bg-mid-green{background-color: #67aa28;}
 
.bg-adaman-blue { background-color:#127196;}

.font-weight-600 { font-weight: 600;}
.font-weight-900 { font-weight: 900;}

.font-size-70px { font-size: 70px;}
.font-size-60px { font-size: 60px !important;}
.font-size-40px { font-size:40px !important;}
.font-size-35px { font-size:35px !important;}
.font-size-30px { font-size:30px !important;}
.font-size-20px { font-size:20px !important;}
.font-size-20px button {font-size: 20px;}
.font-size-18px { font-size:18px;}
.font-size-16px { font-size:16px !important;}
.font-size-14px { font-size:14px;}
.font-size-12px { font-size:12px;}

.fx-05 { font-size: 0.5em;}
.fx-075 { font-size: 0.75em;}
.fx-08 { font-size: 0.8em;}
.fx-09 { font-size: 0.9em;}

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

  .font-size-70px { font-size: 45px;}
  .font-size-60px { font-size:30px;}
  .font-size-40px { font-size:30px;}
  .font-size-35px { font-size:20px !important;}
  .font-size-30px { font-size:15px;} 
  .font-size-20px { font-size:12px;}

}

.text-shadow { text-shadow: 0 2px 20px rgba(0,0,0,.2);}
.text-justify{ text-align: justify; text-justify: inter-word;}
/* filter color str */
.transition{transition: all ease-in-out 0.5s;}
.img-grey { filter: grayscale(100%);  }
a:hover img.img-brightnees { filter: brightness(120%);}
img.img-grey:hover {filter: grayscale(0%);}

/* filter color end */



/*menu str*/

.navbar-nav .nav-link {
  padding-right: 5px;
  padding-left: 5px;
}


@media screen and (min-width:1350px){

        .nav-link{ font-size: 16px !important;}
        .navbar-nav .nav-link {
          padding-right:13px !important;
          padding-left:13px !important;
        }
}

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

    .logo-main { max-width: 100px !important;}

}

/*menu end*/


/*social str*/

.social-box{ display: flex; align-items: center; justify-content: center;}
.social-box a { display: block; width: 28px; height: 28px; position: relative;margin-right: 5px;}
.social-box a span{width: 100%; height: 100%; background-size: contain;display: block;  }
.facebook-icon span { background: url(../image/social/facebook.png) no-repeat;   }
.linkin-icon span { background: url(../image/social/linkin.png) no-repeat;   }
.line-icon span { background: url(../image/social/line.png) no-repeat;   }
.clubhouse-icon span { background: url(../image/social/clubhouose.png) no-repeat;   }
.language { color: #ccc;}
.language a { padding-left:10px; padding-right: 10px ;}
.language  .active{ color: #fff;}
/*social end*/

/*btn str*/

@media screen and (min-width:814px){

.topic {  font-size: 50px;   }
}
.topic strong{ display: block;}
.topic em{ font-style: normal;}

.topic span{ font-weight: 300;font-size: 80%;}
.topic span em{  font-size: 110%;}
.bn-btn{    
  border-radius: 100px;
  display: inline;
  width: fit-content;
  margin: 0 auto;
  padding: 5px 20px;  }

/*bt end*/

.line-heright-1-5 { line-height: 1.5;}


.bot-b-1 { border-bottom:1px solid #444 ;}
.bot-green{ border-color:#22a85b;}
.bot-purple{border-color:#a44b9e}
/*footer str*/

footer a { color:#fff}
footer a:hover { color: #377cfb}

footer p { font-size: 13px;}

footer p.my-3 { margin-left: -15px;}
footer .nav-link {
  font-size: 14px !important;
}
footer .nav-link {
  display: block;
  padding:  1rem;
  line-height: 1.2;
}
footer .nav-link.active {
  color: #d662d4 !important;
}
.min-h-400 { min-height: 250px;}
.min-h-40vh { min-height: 50vh;}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link { 

   background: #31304d !important;
   box-shadow: -2px 0px 2px #201f3c;
   border-radius: 0;

}

.bg-product-purple-bg .nav-pills .nav-link.active { 

  background: #5d3a9e !important;
  box-shadow: -2px 0px 2px #201f3c;
  border-radius: 0;

}

.bg-dark-purple  .nav-pills a.nav-link { color:rgb(255,112,211) !important}


.nav.flex-column{ border-right: #a44b9e 1px solid;height: 100%;}

.nav.flex-column .nav-link { 
  margin-right: -2px;
}
@media screen and (max-width:400px){

  #footer .bg-purple-gardient-right  img.m-4 { margin-bottom: 0 !important; }
  #footer .bg-purple-gardient-right {text-align: center;}
  #footer .bg-purple-gardient-right  .row div { width: 100%;}
  #footer h5 { font-size: 16px ; width: 100%;}
  #footer .bg-light-purple  { text-align: center;}
  
}
.color-green { color: #22a85b;}

.arrow-green { background: url(../image/icon/allow.png) no-repeat center left ; background-size: 5px auto;}

.object-fit-img { object-fit: cover;}

.w100 { width: 100%;}
.max-w-700 {width: 100%; max-width: 700px; }
.max-w-970 {width: 100%; max-width: 970px; }
.max-w-1200 {width: 100%; max-width: 1200px; }
.max-w-550 {width: 100%; max-width: 550px;}
.max-w-500 {width: 100%; max-width: 500px;}

.min-w-550 {width: 100%; min-width: 550px;}

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

  .min-w-550 {

    width: 100%; min-width: 300px;

  }

}


@media screen and (max-width:815px){
  
  .topic strong { font-size: 35px!important;;}
  .font-size-30px { font-size: 20px !important;}
  .font-size-20px { font-size: 15px !important;}
}
@media screen and (max-width:578px){
  .max-w-500 {padding-right:5%;padding-left: 5%;}
  
}
@media screen and (max-width:470px){
.topic span {
  font-weight: 300;
  font-size: 65%;
}}
.height-100{height: 100px;}
.height-80{height: 80px;}
.link-first  { position: absolute; width: 60px;  height: 32px;top: 0; left: 0; }

.bg-product-greenbg h1 { line-height: 1.1; }


.bg-product-greenbg h1::after {content: ""; width: 100px; height: 2px; background-color: #FFF; display: block; margin:20px auto 0 auto; border-radius: 4px;}
.bg-product-whitebg h1::after {
  content: "";
  width: 100px;
  height: 2px;
  background-color: #22a85b;
  display: block;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}
@media screen and (min-width:578px){
 
  .bg-product-greenbg h1.text-sm-right::after ,.bg-product-whitebg h1.text-sm-right::after{ margin:20px  0  0 auto !important;}
}

/* card */

.box-shadow { box-shadow: 0 4px 24px #ddd; margin-bottom: 0; padding-bottom: 0;}
.box-shadow:hover { box-shadow: 0 4px 24px #bbb;}
.border-radius-6 { border-radius: 6px;}
.border-radius-4 { border-radius: 4px;}
.border-none{ border: 0px solid #FFF ;}
.box-sizing { box-sizing: border-box;}


.border-radius-cricle { border-radius: 400px;}

/*ratio 4x3 str*/
.ratio-5x3 {position: relative ; padding-top:67%; width: 100%; display: block; overflow: hidden;   }
.ratio-5x3 img {position: absolute; width: 100%; height: auto; 
  top: -20%;
  left: 0;
  bottom: 0;
  right: 0;}
.ratio-4x3 { position: relative ; padding-top:65%; width: 100%; display: block; overflow: hidden; margin-bottom: 20px;  }
.ratio-4x3 img { position: absolute; width: 100%; height: auto; 
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;}
  .ratio-4x3 iframe,.ratio-4x3 video { position: absolute; width: 100%; height:100%; 
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;}

  .objectfit-w300 {    
    width: 300%;
    left: -100%;
    top: -50%;}

/*ratio 1x1 end*/
.ratio-1x1{ position: relative ; padding-top:100%; width: 100%; display: block; overflow: hidden; margin-bottom: 20px;  }
.ratio-1x1 img { position: absolute; width: 100%; height: auto; 
  top: -10px;
  left: 0;
  bottom: 0;
  right: 0;}


  /*ratio 6x9 str*/

  
.ratio-6x9 { position: relative ; padding-top:51%; width: 100%; display: block; overflow: hidden;    }
.ratio-6x9 video,.ratio-6x9 iframe { position: absolute; width: 100%; height:100%; 
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;}

@media screen and (max-width:768px){
.img-banner{ max-height: 300px !important; width: 100%;}
}

.letter-text { letter-spacing: 2px;}
.line-height-1{line-height: 1; }
.max-w-458 { max-width: 458px;}
.max-w-600 {max-width: 600px;}
.product-icon{ width:40px; height:40px;   align-items: center; justify-content: center;
  border-radius:400px; background-color: #FFF ; margin-right: 10px; overflow: hidden;  
}
.product-icon img { width: 40px; height: 40px; object-fit: cover;}
@media screen and (min-width:768px){

.dropdown02{ width: 500px !important;  }   

}
@media screen and (max-width:768px){
  .hide-sm { display: none;}
  .dropdown:hover>.dropdown-menu { margin-bottom: 10px;}
  .font-size-12px-sm { font-size: 12px;}
  .bg-dark-30 { line-height: 1.2; font-size: 12px;}
  }

  .name-employee { position: absolute; bottom: 0 ; left: 0; width: 100%; padding: 3px; color:#e6e7e8;}

  .name-employee small { display: block;}

  .opacity-100 { opacity: 200%;}

  .opacity-80 { opacity: 40%;}

  .bg-cover {background-size: cover; background-position: center;}
  a.color-white, a.color-white *{color:#FFF ;}


  /*swiper str*/

  .swiper-container {
    width: 100%;
    height: 700px;
    min-height: 600px;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px; 
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
@media screen and ( max-width:970px){

    .swiper-slide { align-items:center;}
    .swiper-container { height: 500px ;}
}

@media screen and ( max-width:470px){
  .swiper-slide p { font-size: 14px;  }
  .swiper-slide h1 {  font-size: 1.5rem;}
}
  /*swiper end*/

/*six keys list str*/
  
.ul-six-keys-list{ margin: 0; padding: 0;line-height: 1 !important ; display: flex;     flex-wrap: wrap;}
.ul-six-keys-list li { list-style: none; margin: 5px; margin-left: 0px;   background: #FFF; float: left;font-size: 18px; line-height: 1 !important; 
width: 45%; box-sizing: border-box; display: flex; align-items: center; color: #141c0a; font-weight: 700; position: relative; min-height: 70px;padding-left: 15px;}
.ul-six-keys-list li span { width: 8px ; min-height:50px;height: 100%;margin-right: 10px;position: absolute;
  left: 0;}


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

  .ul-six-keys-list li{font-size: 14px !important; }

}


.sourcing-6-keys {  width:100%;max-width: 610px; height: 610px; margin: 30px auto;position: relative; background:   url(../image/sourcing/sourcing.png) center center no-repeat; background-size: 150px;}
.sourcing-6-keys a { position:absolute; background-size: contain; background-repeat: no-repeat; display: block; font-size: 0%!important;}
.s6k-1 { background: url('../image/sourcing/asset1.png'); width: 290px; height: 203px; top: 8px; left: 160px;  }
.s6k-2 { background: url('../image/sourcing/asset2.png'); width: 230px;height: 254px; right:5px;top:50px; z-index: 9;}
.s6k-3 { background: url('../image/sourcing/asset3.png');width: 225px;height: 248px;right:5px; bottom: 42px; z-index: 9;}
.s6k-4 { background: url('../image/sourcing/asset4.png'); width: 290px;height: 203px; bottom:5px;left: 160px;}
.s6k-5 { background: url('../image/sourcing/asset5.png');width: 225px;height: 254px;left:5px; bottom: 42px;}
.s6k-6 { background: url('../image/sourcing/asset6.png');width: 230px; height: 254px;left:5px; top:50px;}

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

  .sourcing-6-keys {  width:100%;max-width: 450px; height: 450px;background-size: 75px; }
  .s6k-1 {   width: 220px; height:161px; top: 8px; left: 115px;  }
  .s6k-2 {   width: 170px;height: 188px; right:5px;top:38px;}
  .s6k-3 {  width: 165px;height: 188px;right:5px; bottom: 30px;}
  .s6k-4 {   width: 220px;height: 161px; bottom:0px;left: 115px;}
  .s6k-5 {  width: 165px;height: 188px;left:5px; bottom: 30px;}
  .s6k-6 {  width: 170px; height: 188px;left:5px; top:38px;}
}

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

  .sourcing-6-keys {  width:100%;max-width: 305px; height: 305px;background-size: 75px; }
  .s6k-1 {  width: 145px; height: 101px; top: 4px; left: 80px;  }
  .s6k-2 { width: 115px;height: 127px; right:2px;top:25px;}
  .s6k-3 {  width: 114px;height: 127px;right:2px; bottom: 21px;}
  .s6k-4 {   width: 145px;height: 101px; bottom:2px;left: 80px;}
  .s6k-5 {  width: 114px;height: 127px;left:2px; bottom: 21px;}
  .s6k-6 {  width: 115px; height: 127px;left:2px; top:25px;}
}

.sourcing-6-keys a:hover { width: 45%; height: 45%; left: 2%; z-index: 99;}
.sourcing-6-keys a.s6k-6:hover{    top: 8%;   }
.sourcing-6-keys a.s6k-5:hover{   bottom: 5%;  }
.sourcing-6-keys a.s6k-2:hover{  right: -8% !important; top: 6%; left: auto;width: 48%; height: 48%;  }
.sourcing-6-keys a.s6k-3:hover {  right: -5% !important; left: auto; }
.sourcing-6-keys a.s6k-1:hover  {  right:auto !important; left: 23%; top: -1%;width: 54%; height: 54%; }

.sourcing-6-keys a.s6k-4:hover {  right:auto !important; left: 25%; bottom: -13%; top: auto;width: 52%; height: 52%;}


.popover.six-key {   
  position: relative;  
  will-change: transform; 
  top: 0px;
  left: 0px;
  width: 100%; height: 100%;
  will-change: transform;
  max-width: none;
   background: transparent;
   border:0;
}
.popover-body {padding: 0;}

.popover-body ul { padding-left: 0;}
  .popover.six-key .popover-header {

    font-size: 30px;
    text-transform: uppercase;
    display: flex;
    width: 100%;
    align-items: center;
    padding: 0;

  }

  .popover.six-key .popover-header {

    font-size: 30px;
    text-transform: uppercase;
    display: flex;
    width: 100%;
    align-items: center;
    padding: 0;

  }

  .popover.six-key .popover-header  span { display: inline-block; background: rgba(0,0,0,.2); padding: 20px; margin-right: 20px;}

  .popover.six-key .ul-list-arrow  {

font-size: 18px;

  }

  .popover.six-key .arrow {left:100% !important;top:100px !important;} 
/*six keys list end*/
/*card box str*/
.card-box {/*background: url(../image/logo-conner.png) right bottom no-repeat;*/
   background-size: 15% auto; box-shadow: 0 2px 16px #ccc ; box-shadow: 0 2px 5px #bbc1c7; transition: ease-in-out all .5s; background-position: 101%  101% ; 
 }
 .card-box:hover
{  
  transform: scale(103%);
  /*left: -1%;*/
  transform: translateY(-1%);
 
  
  box-shadow: 0 2px 30px #5d7791;}

.card-box-20 {/*background: url(../image/logo-conner.png) right bottom no-repeat;*/ background-size: 25% auto; padding-bottom: 20px; background-position: 101%  101% ; }




.img-w-conner { max-height: 644px; position: relative;}
.img-w-conner img {
  display:block;
}

.img-w-conner:before {
  position:absolute; right:-1px;bottom:-1px; content:''; width:100px;height: 100%;
  background: url(../image/pictrue/w-corner.png) no-repeat right   ; background-size:auto 100%; 
}



.img-w-conner-r { position: relative;}
.img-w-conner-r img {
  display:block;
}

.img-w-conner-r:before {
  position:absolute;left:0px;bottom:-1px; content:''; width:100%;height: 50px;
  background: url(../image/pictrue/w-r-corner.png) no-repeat right   ; background-size:auto 100%; 
}


@media screen and (max-width:768px){
  .card-box {/*background: url(../image/logo-conner.png) right bottom no-repeat;*/ background-size: 25% auto; padding-bottom: 20px; }


  .img-w-conner { max-height: auto; position: relative;}
  .img-w-conner:before {
    position:absolute;left:-1px;bottom:-1px; content:''; width:100%;height: 50px;
    background: url(../image/pictrue/w-r-corner.png) no-repeat right   ; background-size:auto 100%; 
   
  }
 .m-wsm-3 { margin-left: 15px; margin-right: 20px;}
}

.ul-list-arrow { padding: 0; margin: 5px; margin-top:15px;}

.ul-list-arrow li { list-style: none; background:url(../image/bullet/bullet-arrow.jpg) no-repeat; 
padding-left: 20px; background-size: 5px auto; background-position-y: 8px; margin-top: 5px; }


 
/*card box end*/


.social-banner { background: #5d3a9e url(../image/bg/bg-banner-main.jpg) no-repeat right ; text-align: center; }

.bs-popover-auto[x-placement^=left]>.arrow::before, .bs-popover-left>.arrow::before {
  right: -9px;
  border-width: 1rem 0 1rem 1rem;
  border-left-color: rgba(0,0,0,.25);
}

.bs-popover-auto[x-placement^=left]>.arrow::after, .bs-popover-left>.arrow::after {
  right: -8px;
  border-width: 1rem 0 1rem 1rem;
  border-left-color: #fff;
}

.object-contain { object-fit: contain;}

@media screen and (min-width:768px){

footer .sm-border-left {
  border-left: 1px solid #a44b9e!important;
}
}
nav .breadcrumb-item   {  font-size: 16px;}

nav .breadcrumb-item a {color:#d662d4 !important;  }

.bootstrap-select.form-control {border: 1px solid #ced4da !important;}


 
.bootstrap-select .dropdown-menu li {
    position: relative;
}
.dropdown-divider {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef !important;
}

.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: calc(1.5em + .75rem);
  padding: .375rem .75rem;
  line-height: 1.5;
  color: #321142;
  content: "Browse";
  background-color: #cab6d1;
  border-left: inherit;
  border-radius: 0 .25rem .25rem 0;
}

.breadcrumb-top .breadcrumb {background-color: #fff;}
.breadcrumb-top {

  margin-top: -50px !important;
    opacity: 1;
    box-shadow: 0 -1px 10px rgb(0 0 0 / 25%);
}

/*bg-about str*/

.bg-about { background: url(../image/about/aboutus-bg.jpg) bottom center no-repeat; background-size: 800px auto; min-height:700px;}
.topic-about { position: relative;margin-top: 0px;} 
.topic-about::before { content:""; width:10%; height: 74px; background: url(../image/about/aboutus-border-l.png) no-repeat top left  ; background-size: contain; display: block;
  position: absolute; top: 0; left: 0; }

.topic-about::after { content:""; width: 10%; height: 73px; background: url(../image/about/aboutus-border-r.png) no-repeat bottom right  ;background-size: contain; display: block; 
  position: absolute; bottom: 0; right: 0;
}

.bg-about-1 { background:url(../image/about/aboutustable-1.png) ; background-size: 100% 100%; padding:30px 20px 50px 20px;}
.bg-about-2 { background:url(../image/about/aboutustable-2.png) ; background-size: 100% 100%; padding:30px 20px 50px 20px;}
.bg-about-3 { background:url(../image/about/aboutustable-3.png) ; background-size: 100% 100%; padding:30px 20px 50px 20px;}

.bg-about-all  { padding-bottom: 30px;}

.bg-about-all p { margin-left:30px ;margin-right:30px ; margin-bottom: 40px; }

.bg-about-all img { margin-top: 20px;}

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

  .bg-about-all img { width: 130px !important;}

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

  .bg-about-all p { margin-left:2% ;margin-right:2% ; margin-bottom: 40px; }

}

@media screen and (max-width:770px){
  .bg-about-all {padding-bottom: 60px;}
  .bg-about-1,.bg-about-2,.bg-about-3 { background-image: none; padding:20px 20px 20px 20px ;}
  .bg-about-all img { margin-top: 0px;}
  .bg-about-all p {margin-bottom: 0px;}
  .topic-about {  width:90%;}

}

/*our-service-solution str*/
.our-service-solution-3-box a { transition: all .5s ;}
.our-service-solution-3-box a:hover{
z-index: 9;
box-shadow: 1px 1px 20px rgba(0,0,0,.75) ;
}

/*our-service-solution end*/
/* searching Jop str*/

.searchingJop-top {background-color: #FFF;}
.searchingJop-top {

  margin-top: -50px !important;
    opacity:1;
    box-shadow: 0 -1px 10px rgb(0 0 0 / 25%);
}


.searchingJop-top .bootstrap-select.form-control { border: 0px solid #FFF !important; background: #FFF !important;}

.searchingJop-top .btn-light {
  color: #212529;
  background-color: #FFF;
  border-color: #f8f9fa;
}
@media screen and (max-width:991px){

.btn-m-970{

  width: 100%;

}
}

label.form-check-label{font-size: 15px;}
.form-check { padding-top: 5px;}

.company-cricle,.company-cricle img {width: 110px; height: 110px;}


@media screen and (min-width:768px) { 

  .md-show { display:none;}

}

@media screen and (max-width:768px) { 
  .sideSearch-btn { border-bottom:#cccccc 1px solid; margin-bottom: 20px; }
  .sideSearch-btn  a { color:#5d3a9d !important;}
  .md-hide { display:none}

}

@media screen and (max-width:518px) { 
  .company-cricle, .company-cricle img {width: 50px !important; height: 50px; flex: 0 0 50px;align-self: flex-start; margin-top: 10px;}
  .company-cricle.mr-4 {margin-right: 0.5rem!important;}
  .card.box-shadow.p-4 { padding: 0.5rem !important;}
  .border-l-purple.font-size-18px {
    font-size: 14px; 
}

.card.box-shadow  .h5,.card.box-shadow h5 {
  font-size: 1rem;
}
}
/* searching Jop end*/