@import url('https://fonts.googleapis.com/css?family=Catamaran:300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&display=swap&subset=korean');

section { overflow: hidden; }
.wrapper{ padding:0 12vw; width: 100%; max-width: 2560px;}
@media (max-width: 1023px){
  .wrapper{ padding:0 8vw; width: 100%;}
}
@media (max-width: 767px){
.wrapper{padding: 0 8vw;width: 100%;}
}
@media (max-width: 420px){
.wrapper{padding: 0 6vw;width: 100%;}
}
main {
  padding: 0 0 0 !important;
}
/*---------------Menu---------------*/

.home-menu{background:none;position: absolute;right: 0;top: 0;}
.head-home span{color:#FFF;position: relative;height: 0; top: -12px; left: 35px;}
.head-home.logo-head a {
  background-image: url(/common/images/logo_w.svg) !important;
}

.menu-home > li > a::after{color:#FFF !important;}
.menu-home > li > a{color: #FFF !important; border-bottom: 0;}
.menu-home > li > a:hover{color: #FFF !important;}

.menu-home > li > a:after {
	content: '';
	background: #fff;
	width: 0;
	height: 2px;
	display: block;
	transition: all 0.3s;
}
.menu-home > li > a:hover:after {
	content: '';
	width: 100%;
}

.wsmenucontainer{z-index:unset;}
.arrow-home span, .arrow-home span::before, .arrow-home span::after{background: #FFF !important;}
.wsoffcanvasopener .arrow-home span{background: none !important;}
.wsmenu-list{position: relative; z-index: 2;}
.animated-arrow{position:absolute;}
.wsoffcanvasopener .animated-arrow{position:fixed;}
.head-home{position: relative; z-index: 2;}

/*---------------Slide---------------*/

.showmore{text-align: center; width: 70%; margin: 0 auto 20px; background: #000; color: #FFF; font-weight: 700; padding: 10px 0; cursor: pointer; transition: all ease-in-out 0.3s; display: block;}

/*---------------Service---------------*/

/* .service{ font-family: 'Nanum Gothic', sans-serif;} */
.sub-title {font-size: 2.1vw;text-transform: uppercase; font-weight: 700 !important;font-family: 'Poppins', sans-serif !important;}
.sub-title span { display: inline-block; position: relative; color: #ffffff; transition: all 0.8s cubic-bezier(0.860, 0.000, 0.070, 1.000); font-weight: 700 !important;font-family: 'Poppins', sans-serif !important; }
.sub-title span.active { color: #000; }
.sub-title span::before { content: ''; background: #ffffff; width: 100%; height: 100%; position: absolute; top: 0; right: 0; transition: all 0.8s cubic-bezier(0.860, 0.000, 0.070, 1.000); }
.sub-title span.active::before { width: 0; background: #000000; }
/* .sub-title span::after { content: ''; background: #000000; width: 100%; height: 100%; position: absolute; top: 0; right: 0; transition: all 0.4s; }
.sub-title span.active::after { width: 0; } */

.sub-title small { display: block; font-size: 16px; font-weight: 600; }
#section-company .sub-title span { color: #f1f1f1; }
#section-company .sub-title span.active { color: #000; }
#section-company .sub-title span::before { background: #f1f1f1; }
#section-company .sub-title span.active::before { width: 0; background: #000000; }
.topic-service {display: block;padding: 5vw 0;width: 63%;font-size: 16px;font-weight: 500;}
.topic-service strong { display: block; font-size: 20px; font-weight: 700;}
.title-service {font-size: 2.1vw;font-weight: 700;font-family: 'Poppins', sans-serif;transition: all 0.8s cubic-bezier(0.860, 0.000, 0.070, 1.000);letter-spacing: 0;/* letter-spacing: 0.02em; */}

/* stockcar */
/* .stock-car { position: relative; z-index: 10;
    background: linear-gradient(270deg, #0a53ca, #6eccfb);
    background-size: 400% 400%;
} */
.stock-car { position: relative; z-index: 10; 
    background: rgba(10,84,202,1);
    background: -moz-linear-gradient(left, rgba(10,84,202,1) 0%, rgba(110,204,251,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(10,84,202,1)), color-stop(100%, rgba(110,204,251,1)));
    background: -webkit-linear-gradient(left, rgba(10,84,202,1) 0%, rgba(110,204,251,1) 100%);
    background: -o-linear-gradient(left, rgba(10,84,202,1) 0%, rgba(110,204,251,1) 100%);
    background: -ms-linear-gradient(left, rgba(10,84,202,1) 0%, rgba(110,204,251,1) 100%);
    background: linear-gradient(to right, rgba(10,84,202,1) 0%, rgba(110,204,251,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a54ca', endColorstr='#6eccfb', GradientType=1 ); }
/* .stock-car::after { content: url(../images/bg-car.png); position: absolute; max-width: 100%; right: 25%; bottom: 1rem; } */
.stock-car .mockup-mobile {position: absolute;bottom: 0;right: 0;width: 43vw;} 
.text-service {display: block;width: 100%;color: #fff;padding: 5vw 0 12vw;position: relative;}
.text-service strong {display: block;font-size: 25px;font-weight: bold;}
.text-service small {display: block;font-size: 16px;font-weight: 400;}

.position-more {margin-top: 3rem;position: relative;}
.position-more .btn-more {transition: all 0.5s;display: block;width: 110px;height: 35px;line-height: 35px;/* padding: 8px; */border-radius: 35px;color: #fff;text-transform: uppercase;font-size: 14px;font-weight: 300;text-align: center;transition: all 0.4s;position: relative;z-index: 13;font-family: 'Poppins', sans-serif;}
.position-more .btn-more{
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.position-more .btn-more::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.position-more .btn-more,
.position-more .btn-more::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .8s;
  transition: all .8s;
}
.position-more .btn-more::after {
  top: 0;
  left: -180%;
  width: 150%;
  height: 100%;
  transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
}
.position-more .btn-more:hover {
  color: #fff;
}
.position-more .btn-more:hover::after {
  top: 0;
  left: -10px;
  background: rgba(255, 255, 255, 0.2);
  width: 200%;
}
.stock-car-more,.ecosystem-more{
  display: inline-block;
  padding: 1px;
  border-radius: 35px;
}
.stock-car-more{
  background: linear-gradient(90deg, #b1feff, #70cefb);
}
.ecosystem-more{
  background: linear-gradient(90deg, #fcfb9c, #ffd739);
}
.stock-car-more .btn-more {
  background-color: #1865d1;
}
.ecosystem-more .btn-more {
  background-color: #f8aa17;
}


.position-more .minicar { position: absolute; right: 0; bottom: 0; z-index: 1; }


/* item service */
.item-service {display: flex;flex-wrap: wrap;width: 100%;padding: 3rem 0 9rem;font-family: 'Poppins', sans-serif;font-size: 13px;max-width: 980px;margin: auto;}
.item-service li { display: block; width: 33.33%; padding: 12px; text-align: center; }
.item-service .icon-service { border: 2px solid #000; background: #fff; border-radius: 50%; padding: 5px; display: inline-block;  }
.item-service .icon-service span { display: flex; align-items: center; justify-content: center; background: #000; border-radius: 50%; width: 128px; height: 128px; margin: auto; }
.item-service strong {display: block;font-size: 26px;font-weight: 700;padding: 8px 0;letter-spacing: 0;}
.item-service p span { font-size: 16px; display: block; margin-bottom: 5px; font-weight: 600;}

.item-service li .icon-service img { max-width: 100%; transform: rotate(0); transition: all 0.6s; }
.item-service li:hover .icon-service img { transform: rotate(360deg); }

/* ecosystem */
/* .ecosystem { position: relative; margin-top: 5rem; text-align: right;
    background: linear-gradient(270deg, #fbb400, #e48a02);
    background-size: 400% 400%; } */
.ecosystem { position: relative; margin-top: 5rem; text-align: right;
    background: rgba(248,203,42,1);
    background: -moz-linear-gradient(left, rgba(248,203,42,1) 0%, rgba(248,154,14,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248,203,42,1)), color-stop(100%, rgba(248,154,14,1)));
    background: -webkit-linear-gradient(left, rgba(248,203,42,1) 0%, rgba(248,154,14,1) 100%);
    background: -o-linear-gradient(left, rgba(248,203,42,1) 0%, rgba(248,154,14,1) 100%);
    background: -ms-linear-gradient(left, rgba(248,203,42,1) 0%, rgba(248,154,14,1) 100%);
    background: linear-gradient(to right, rgba(248,203,42,1) 0%, rgba(248,154,14,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8cb2a', endColorstr='#f89a0e', GradientType=1 ); }
.ecosystem .mockup-pc {position: absolute;bottom: 0;left: 5vw;max-width: 927px;width: 40vw;}
.text-ecosystem {display: inline-block;width: 47%;color: #fff;padding: 4vw 0 7vw 1rem;text-align: left;}
.text-ecosystem strong {display: block;font-size: 25px;font-weight: bold;}
.text-ecosystem small {display: block;font-size: 16px;font-weight: 400;}
.position-more .graph { position: absolute; right: -150px; bottom: -60px; }


/*---------------Recruit---------------*/
#section-recruit { position: relative; overflow: hidden; }
.recruit { padding: 4rem 0; text-align: center; position: relative; z-index: 10; }
.img-recruit { display: block; padding: 2rem 0; text-align: center; }
.img-recruit img { max-width: 100%; }


/*---------------Company---------------*/
.company { background: #f1f1f1; text-align: center; padding: 4rem 0; }
.company .wrapper{max-width:980px;padding: 0;}
.address { width: 100%; margin-top: 18px; }
.address dd{ display:flex;}
.address dd div { width: 50%; padding: 16px 8px; text-align: left;}
.address dd div:first-child { text-align: right;}



.star5_box{max-width:1040px;padding: 0;}
.star5{width: 100%;margin: 8rem 0 2rem;border: 2px solid #000;padding: 3px;display: block;font-family: 'Poppins', sans-serif;/* max-width: 980px; */ }
.star5 .autostar {width: 100%;display: flex;flex-wrap: wrap;align-items: flex-start;justify-content: space-around;border: 1px solid #000;text-align: center;padding: 24px 10px;}
.star5 .autostar .rate-star {/* display: block; *//* width: 200px; */padding: 8px 10px;text-align: center;}
.star5 .autostar .rate-star p{font-size:12px;}
.star5 .autostar .yellow-line {display: inline-block;/*border-bottom: 6px solid #fff551;*/font-weight: 600;font-size: 22px;margin-top: 1rem;}
.star5 .crown i { font-size: 25px;}
.star5 .autostar .rate-star .color_red{color:#f31a1a;}
.star_icon{height: 30px;line-height: 30px;}


/*---------------Responsive---------------*/
@media (max-width:1870px) {
    .ecosystem .mockup-pc {width: 47vw;left: 3vw;}
    .stock-car .mockup-mobile {width: 49vw;}
    .sub-title,.title-service {font-size: 3vw;}
    .text-ecosystem {width: 47%;/* padding: 2vw 0 3vw 1rem; */text-align: left;}


}

@media (max-width:1400px) {
    .ecosystem .mockup-pc {width: 50vw;/* left: -8%; */}
    .text-ecosystem {width: 45%;}
   .sub-title,.title-service {font-size: 3.5vw;}
    .text-ecosystem strong {font-size: 1.8vw;}

    
}

@media (max-width:1200px){
    .text-service {padding: 8vw 1rem;}
    .stock-car .mockup-mobile { max-width: 630px; right: 0; }
    
    .ecosystem .mockup-pc {/* left: -60px; */}

    .position-more .graph { right: 0;}
   .sub-title,.title-service {font-size: 4vw;}


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

/* .head-home span {top: -2px;} */

  .star5_box {
      padding: 0 20px;
  }
  .item-service-box{
      padding: 0 20px;

  }

}

@media(max-width:980px) {
   .sub-title,.title-service {font-size: 45px;}
   .ecosystem { text-align: center;} 
    .text-ecosystem { width: 100%; text-align: left;} 
    .ecosystem .mockup-pc { position: relative; left: 0; bottom: 0; max-width: 80%; } 
    .text-service strong { font-size: 20px;}
    .text-ecosystem strong { font-size: 20px; }   

}


@media (max-width:920px) {
    .stock-car .mockup-mobile { max-width: 530px;}
}


@media (max-width:768px){
    .topic-service { width: 100%; padding: 8rem 1rem;}

    .item-service { padding: 4rem 0 0;}
    .item-service strong {font-size: 20px;}
    .item-service  p {
      font-size:12px
      }    

    .text-ecosystem { width: 100%; padding: 4rem 1rem 2rem;}

    .flex-direction-nav a { display: none!important; }
    .sub-title,.title-service {font-size: 7vw;}
    
    .star5 .autostar .rate-star {
        padding: 8px 0px;
        text-align: center;
    }
    .star5 .autostar .rate-star{
      width:30%;
    }
    .star5 .autostar .rate-star p {
      font-size:10px
      }
    .star5 .autostar .yellow-line {
    font-size: 18px;
    margin-top: 0.5rem;}
    .star5 .autostar .rate-star p br{
      display:none;
    }


}

@media (max-width:680px){
    .topic-service { width: 100%; padding: 6rem 1rem;}

    .text-service { width: 100%; padding: 2rem 1rem 0; }
    .stock-car .mockup-mobile { position: relative; right: 0; max-width: 100%; }
    .position-more .minicar { display: none; }

    .item-service .icon-service { border: 2px solid #000; background: #fff; border-radius: 50%; padding: 5px; display: inline-block;  }
    .item-service .icon-service span {width: 110px;height: 110px;}
    .item-service .icon-service span img{ width:80%;}
     .item-service li p br{ display:none;}
    .item-service li { width: 100%; }

    .text-ecosystem {width: 100%;padding: 2rem 1rem 1rem;}

    .star5_box {
        padding: 0 10px;
    }
    .star5 .autostar {
        padding: 15px 10px;
    }    
    .star5 {width: 100%;margin: 4rem 0 0rem;}
    .star5 .autostar .yellow-line { margin-top: 0;}

    .star5 .autostar .rate-star{
      width:100%;
    }
    .star5 .autostar .yellow-line {
    font-size: 18px;
    margin-top: 0.5rem;}
    .star5 .autostar .rate-star p br{
      display:none;
    }


}

@media (max-width:480px){
    .sub-title { font-size: 9vw;}
    .title-service { font-size: 9vw;}

    .text-service strong { font-size: 20px;}
    .text-ecosystem strong { font-size: 20px; }   

    .position-more { margin-top: 3rem;}

    .star5 {/* width: 80%; */}
    .star5 .rate-star { width: 100%; text-align: center; padding: 1rem;}

    .recruit { padding: 2rem 0;}

    .company { padding: 2rem 0 4rem;}
    .stock-car .mockup-mobile {width: 100%;}
    .ecosystem .mockup-pc {width: 100% !important;max-width: 100%;}   

    .address dd {
      flex-wrap: wrap;
      flex-flow: wrap-reverse;
      padding: 6px 0;
      margin: 0 15px;
    }
    .address dd div {
      width: 100%;
      text-align: center !important;
      padding: 0px 0px 0;
    }
    .address dd div:first-child {
      font-size:14px;
      border-bottom: 1px solid #e1e0e0;
      padding: 5px 0px 17px;
    }   

}

@media (max-width:420px) {
    .topic-service { padding: 4rem 0;}

    .text-service {padding: 4rem 0 0rem;}
    .text-ecosystem { padding: 4rem 0 2rem; }
  
}

@media (max-width:380px) {
    .star5 { width: 100%;}

    .topic-service strong{ font-size:18px}
    .text-service strong {/* font-size: 18px; */}
    
}

@media only screen and (max-width: 1026px) {
    .wsmenu > .wsmenu-list > li > a{color: #000 !important;}
}



/* Animation */
.kenburns-right {-webkit-animation:kenburns-right 60s ease-out infinite both;animation:kenburns-right 60s ease-out infinite both}
 @-webkit-keyframes kenburns-right{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:84% 50%;transform-origin:84% 50%}100%{-webkit-transform:scale(1.25) translateX(20px);transform:scale(1.25) translateX(20px);-webkit-transform-origin:right;transform-origin:right}}@keyframes kenburns-right{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:84% 50%;transform-origin:84% 50%}100%{-webkit-transform:scale(1.25) translateX(20px);transform:scale(1.25) translateX(20px);-webkit-transform-origin:right;transform-origin:right}}

.bg-pan-left {-webkit-animation:bg-pan-left 8s infinite both; -moz-animation:bg-pan-left 8s infinite both; animation:bg-pan-left 8s infinite both}
@-webkit-keyframes bg-pan-left{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes bg-pan-left{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes bg-pan-left{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}




/* animation background */
/* ---- reset ---- */


canvas{ display: block; vertical-align: bottom; } 
/* ---- particles.js container ---- */ 
#particles-js{ position:absolute; z-index: 9; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } 
#particles-js2{ position:absolute; z-index: 9; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } 
/* ---- stats.js ---- */ 
.count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } 
.js-count-particles{ font-size: 1.1em; } 
#stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; }
#stats{ border-radius: 3px 3px 0 0; overflow: hidden; } 
.count-particles{ border-radius: 0 0 3px 3px; }


/* cursor top */
.cursor {
  position: absolute;
  /* background-color: #ffffff;
  border: 1px solid #cccccc; */
  background-color: rgba(50, 132, 222, 0.2);
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  z-index: 1;
  transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
      0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
  user-select: none;
  pointer-events: none;
  z-index: 10000;
  transform: scale(1);}   
.cursor.active {
  opacity: 0.5;
  transform: scale(0); }
.cursor.hovered {
  opacity: 0.08; }
.cursor-follower {

  position: absolute;
  /* background-color: #ffffff;
  border: 1px solid #cccccc; */
  background-color: rgba(50, 132, 222, 0.2);
  width: 20px;
  height: 20px;
  border-radius: 100%;
  z-index: 1;
  transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
      0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
  user-select: none;
  pointer-events: none;
  z-index: 10000;
  transform: translate(5px, 5px);
  }
  
.cursor-follower.active {
  opacity: 0;
  transform: scale(1); }
.cursor-follower.hovered {
  opacity: 0.08; }



  .cls-1 {
    fill: #fff;
    fill-rule: evenodd;
  }

  
    

  /**/
#text_svg{
    position: absolute;
    bottom: 100px;
    left: 12vw;
    width: 90%;
    max-width: 980px;
    
}

  #svg-logo {
    
  }
  #Car_distribution_Inovation {
    fill-opacity: 0;/*塗りの透明度*/
    fill: #FFF;/*塗りの色*/
    stroke: #FFF;/*線の色*/
    stroke-width: 2;/*/線の幅*/
    stroke-linecap: round;/*線を角丸*/
    stroke-dasharray: 600;/*線の長さ*/
    stroke-dashoffset: 600;/*線の間隔*/
  }
  @media (max-width: 1260px){
    #text_svg {
      width: 65%;
    }
  }
  @media (max-width: 1023px){

    #text_svg {
      left: 8vw;
      width: 83%;
    }
  }



/*modal*/
.modal{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}
.modal__bg{
  background: rgba(0,0,0,0.6);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__content{
  background: #fff;
  left: 50%;
  /* padding: 0 0 20px; */
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 60%;
}
.modal__content p{
  text-align:center;
  font-size:20px;
  font-weight:700;
  background: #000;
  margin: 0 0 30px;
  color: #FFF;
  padding: 30px 0;
}
.modal__content div.modal_btn{
  display:flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  padding: 0 30px;
  flex-wrap: wrap;
}
.modal__content div.modal_btn a{
        border: 2px solid #0b55cb;
        color: #0b55cb;
        font-size: 18px;
        padding: 25px 0;
        font-weight: bold;
        width: 235px;
        text-align: center;
        overflow: hidden;
        position: relative;
        margin: 0px 7px 15px;
}
.modal__content div.modal_btn a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
  background:#0b55cb;
}
.modal__content div.modal_btn a,
.modal__content div.modal_btn a::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .5s;
transition: all .5s;
}
.modal__content div.modal_btn a::after {
top: 0;
left: -180%;
width: 150%;
height: 100%;
transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
}
.modal__content div.modal_btn a:hover {
color: #fff;
}
.modal__content div.modal_btn a:hover::after {
top: 0;
left: -30px;
background:#0b55cb;
width: 200%;
}
.modal__content div.text-right{
  text-align: right;

}
a.js-modal-close{
  background-color:#e4e4e4;
  font-size: 32px;
  font-weight:bold;
  width: 65px;
  height: 65px;
  text-align: center;
  line-height: 65px;
  display: inline-block;
}
.modal__content a.js-modal-close:hover{
  color: #000;
  opacity: 0.8;
}
@media (max-width: 1270px){

  .modal__content div.modal_btn{
    margin: 0 0 3px;
  }
  .modal__content div.modal_btn a{
          padding: 19px 0;
          width: 28%;
          margin: 0 7px 20px;
  }  
}
@media (max-width: 1020px){
    .modal__content{
      width: 95%;
    }
}
@media (max-width: 700px){
    .modal__content{
      width: 95%;
    }

  .modal__content p {
      font-size: 18px;
      margin: 0 0 20px;
      padding: 15px 0;
  }
  .modal__content div.modal_btn{
    justify-content:space-between;
    /* flex-wrap: wrap; */
  }
  .modal__content div.modal_btn a {
    padding: 25px 0;
    width: 49%;
    margin: 0 0;
  }


}
@media (max-width: 480px){
    .modal__content div.modal_btn a {
      padding: 11px 0;
      width: 100%;
      margin: 0px 0 8px;
    }
    .modal__content div.modal_btn {
      flex-wrap: wrap;
  }


}