@charset "utf-8";
/* ============= business 1 ============= */
/* service */
.business1 .service{}
.business1 .service .title_box{
  width: 1094px; margin: 0 auto; padding: 91px 0 174px;
}
.business1 .service .title_box .title{
  font-size: 38px; color: #2E2E2E;
  text-align: left;
}
.business1 .service .title_box .fw_bold{
  display: inline-flex; align-items: center;
  margin-top: 11px;
}
.business1 .service .title_box .fw_bold span{
  display: inline-flex; align-items: center;
  font-weight: bold;
}
.business1 .service .title_box .fw_bold span:not(:last-child)::after{
  content: ''; display: inline-block;
  width: 80px; height: 3px;
  background: #D50E62;
  margin: 0 20px;
}
.business1 .service .title_box .description{
  line-height: 1.67; font-size: 15px; color: #2E2E2E;
  margin-top: 45px;
  text-align: left;
}
.business1 .service .title_box .description .color{
  color: #D50E62; font-weight: bold;
}

.business1 .service .service_area{
  position: relative;
}
.business1 .service_list{
  position: absolute; top: -64px; left: 50%; transform: translateX(-50%);
  width: 872px;
  display: flex; align-items: center; flex-wrap: wrap;
}
.business1 .service_list li{
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  width: 206px; height: 304px;
  padding: 40px 0 58px;
  background: #fff; border: 1px solid #ddd;
  border-radius: 2px;
  overflow: hidden;
}
.business1 .service_list li:not(:last-child){margin-right: 16px;}
.business1 .service_list .num{
  font-size: 40px; color: #D50E62;
}
.business1 .service_list .num::after{
  content: '';
  display: block;
  width: 40px; height: 1px;
  background: #ACACAC;
  margin: 16px auto 0;
}
.business1 .service_list .text_box{
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  height: 132px;
  margin-top: 10px;
}
.business1 .service_list .text_box .text{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 38px;
  line-height: 1.2; font-size: 16px; color: #2E2E2E; text-align: center;
}
.business1 .service_list .text_box .icon{margin: 0 auto;}
.business1 .service_list .text_box .icon.icon1{width: 73px;}
.business1 .service_list .text_box .icon.icon2{width: 70px;}
.business1 .service_list .text_box .icon.icon3{width: 78px;}
.business1 .service_list .text_box .icon.icon4{width: 78px;}

.business1 .service .service_banner{
  width: 100%; height: 398px; overflow: hidden;
}
.business1 .service .service_banner img{
  width: 100%; height: 100%;
  object-fit: cover;
}

/* company info */
.business1 .company_info{
  padding: 180px 0 230px;
}
.business1 .company_info .list_area{
  width: 1094px; margin: 0 auto;
}
.business1 .company_info .list_area .list{
  display: flex; align-items: center; justify-content: space-between;
}
.business1 .company_info .list_area .list:not(:last-child){margin-bottom: 160px;}

.business1 .company_info .list_area .list .title::before{
  content: '';
  display: block;
  margin-bottom: 41px;
}
.business1 .company_info .list_area .list:nth-child(1) .title::before,
.business1 .company_info .list_area .list:nth-child(3) .title::before{
  width: 80px; height: 1px;
  background: url("../img/icon/led_line_icon1.svg") no-repeat center/contain;
}
.business1 .company_info .list_area .list:nth-child(2) .title::before{
  width: 75px; height: 75px;
  background: url("../img/icon/led_line_icon2.svg") no-repeat center/contain;
}

.business1 .company_info .list_area .list:nth-child(1) .num{left: -20px;}
.business1 .company_info .list_area .list:nth-child(2) .num,
.business1 .company_info .list_area .list:nth-child(3) .num{right: -20px;}

.business1 .company_info .list_area .list:nth-child(2) .text_box{
    margin-left: 160px;
}
.business1 .company_info .title{
  line-height: 1.56; font-size: 32px; color: #2E2E2E; font-weight: bold;
  text-align: left;
}
/* .business1 .company_info li:nth-child(2) .title,
.business1 .company_info li:nth-child(2) .text{
  text-align: right;
} */
.business1 .company_info .text{
  line-height: 1.67; font-size: 15px; color: #2E2E2E;
  margin-top: 45px;
}
.business1 .company_info .img_box{
  position: relative;
  width: 380px; height: 443px;
  overflow: hidden;
  flex-shrink: 0;
}
.business1 .company_info .img_box .num{
  position: absolute; top: 0;
  font-size: 176px; color: #fff; font-weight: 100;
  z-index: 1;
}

/* sub banner */
.business1 .sub_banner{
  width: 100%; height: 422px;
  position: relative; overflow: hidden;
}
.business1 .sub_banner .text_box{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1094px;
  z-index: 1;
}
.business1 .sub_banner .text_box .title{
  line-height: 1.5; font-size: 36px; color: #fff;
  margin-bottom: 30px;
  text-align: left;
  font-weight: 600;
}
.business1 .sub_banner .text_box .title b{color: #fff;}
.business1 .sub_banner .text_box .text_p{
  line-height: 1.67; font-size: 15px; color: #fff;
}
.business1 .sub_banner .img_box{
  width: 100%; height: 100%;
}
.business1 .sub_banner .img_box img{
  width: auto; height: 100%;
  object-fit: cover;
}

/* solution */
.business1 .solution{
  width: 1094px; margin: 0 auto;
  padding: 156px 0 140px;
}
.business1 .solution h1{
  line-height: 1.5; font-size: 38px; color: #2E2E2E; font-weight: bold;
}
.business1 .solution h1 .mb_br{display: none;}
.business1 .solution .info_box{margin-top: 51px;}
.business1 .solution .info_box .list{
  padding: 40px 0;
}
.business1 .solution .info_box .list:not(:last-child){border-bottom: 1px solid #D9D9D9;}
.business1 .solution .info_box .title{
  font-size: 28px; font-weight: 500;
  text-align: left;
}
.business1 .solution .info_box .text{
  line-height: 1.5; font-size: 16px;
  margin-top: 20px;
}
.business1 .solution .info_box p{color: #2E2E2E;}

/* ============= business 2 ============= */
.business2{
  padding-bottom: 170px;
}
/* about us */
.business2 .about_us{
  width: 1094px;
  margin: 0 auto;
  padding: 91px 0 85px;
}
.business2 .about_us .title{
  font-size: 38px; color: #2E2E2E; text-align: left;
}
.business2 .about_us .title span{
  display: block;
  margin-top: 16px;
}
.business2 .about_us .text_area{
  display: flex; flex-wrap: wrap; justify-content: space-between;
  margin-top: 100px;
}
.business2 .about_us .text_box{
  width: 497px;
  padding-bottom: 30px;
  border-bottom: 1px solid #D9D9D9;
  margin-bottom: 85px;
}
.business2 .about_us .sub_title{
  font-size: 24px; color: #2E2E2E;
}
.business2 .about_us .redB{
  display: block;
  color: #D50E62; font-weight: bold;
  margin-bottom: 12px;
}
.business2 .about_us .text{
  line-height: 1.67; font-size: 15px; color: #2E2E2E;
  margin-top: 50px;
}

/* technology */
.business2 .technology{}
.business2 .technology .area{
  position: relative;
}
.business2 .technology .inner{
  position: absolute; top: 105px; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 1094px; margin: 0 auto;
}
.business2 .technology .description{
  width: 100%;
  display: flex; justify-content: space-between;
}
.business2 .technology .description .title{
  line-height: 1.5; font-size: 36px; color: #fff; font-weight: bold; text-align: left;
}
.business2 .technology .description .text_box{text-align: left;}
.business2 .technology .description .text{
  font-size: 28px; color: #fff;
}
.business2 .technology .description .text:not(:last-child){
  margin-bottom: 31px;
}

.business2 .technology_list{
  display: flex; justify-content: space-between;
  margin-top: 100px;
}
.business2 .technology_list li{
  width: 345px; height: auto;
  padding: 43px 40px;
  background: #fff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.07);
}
.business2 .technology_list .title_area{}
.business2 .technology_list .title{
  font-size: 20px; color: #2E2E2E; font-weight: bold; text-align: left;
}
.business2 .technology_list .sub_title{
  font-size: 15px; color: #D50E62; margin-top: 10px;
}
.business2 .technology_list .text{
  line-height: 1.5; font-size: 16px; color: #2E2E2E;
  margin-top: 25px;
}

.business2 .technology_banner{
  width: 100%; height: 550px;
  overflow: hidden;
}
.business2 .technology_banner img{
  width: auto;
  height: 100%;
  object-fit: cover;
}

/* service */
.business2 .service{
  width: 1094px;
  margin: 0 auto;
  padding: 239px 0 150px; 
}
.business2 .service .description{}
.business2 .service .description .title{
  font-size: 34px; color: #2E2E2E;
  text-align: left;
}
.business2 .service .description .red{
  color: #D50E62;
  margin-top: 13px;
}
.business2 .service .description .text{
  line-height: 1.67; font-size: 15px; color: #2E2E2E;
  margin-top: 50px; text-align: left;
}
.business2 .service .list_box{
  display: flex; flex-wrap: wrap; justify-content: center;
  margin-top: 100px;
}
.business2 .service .list_box li{
  display: flex; align-items: center; justify-content: center;
  width: 171.7px; height: 171.7px;
  font-size: 20px; color: #2E2E2E; font-weight: bold; text-align: center;
  background: #fff; border: 2px solid #EAEAEA;
  border-radius: 50%; overflow: hidden;
}
.business2 .service .list_box li:not(:last-child){
  margin-right: 25px;
}

/* highlight */
.business2 .highlight{
  width: 1094px; margin: 0 auto;
}
.business2 .highlight_list{
  display: flex; justify-content: space-between;
  width: 100%;
}
.business2 .highlight_list .list{
  position: relative;
  width: 131px; height: 240px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s;
}
.business2 .highlight_list .list::before{
  content: '';
  position: absolute;
  top: 0; left: 0; z-index: 1;
  display: block;
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.2);
}
.business2 .highlight_list .text_box{
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
  z-index: 2;
  width: 100%;
  padding: 0 40px;
  opacity: 0;
  transition: all 0.7s;
}
.business2 .highlight_list .title{
  line-height: 1.5; font-size: 24px; color: #fff; text-align: left;
}
.business2 .highlight_list .title b{color: #fff;}
.business2 .highlight_list .text{
  line-height: 1.5; font-size: 15px; color: #fff;
  margin-top: 30px; text-align: left;
}

.business2 .highlight_list .img_box{
  width: 100%; height: 100%;
}
.business2 .highlight_list .img_box img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right;
}

.business2 .highlight_list .list.on{
  width: 701px;
}

.business2 .highlight_list .list.on::before{
  background: rgba(0, 0, 0, 0.5);
}
.business2 .highlight_list .list.on .text_box{
  opacity: 1;
}

/* ============= business 3 ============= */
/* creativity */
.business3 .creativity{
  width: 1094px; margin: 0 auto;
  padding: 90px 0 205px;
}
.business3 .creativity .title{
  line-height: 1.75; font-size: 16px; color: #2E2E2E; text-align: left; font-weight: 400;
}
.business3 .creativity .area{
  margin-top: 110px;
}
.business3 .creativity .box{
  display: flex; justify-content: space-between;
}
.business3 .creativity .box:not(:last-child){
  margin-bottom: 80px;
}
.business3 .creativity .main_title{
  max-width: 396px;
  line-height: 1.57; font-size: 28px; color: #2E2E2E; font-weight: bold;
}
.business3 .creativity .list_box{
  width: 683px; height: auto;
  padding: 30px;
  background: #FAFAFA;
}
.business3 .creativity .list_box li:not(:last-child){
  margin-bottom: 30px;
}
.business3 .creativity .sub_title{
  font-size: 20px; color: #D50E62; font-weight: bold;
}
.business3 .creativity .text{
  font-size: 15px; color: #2E2E2E;
  margin-top: 8px;
}

/* about us */
.business3 .about_us{
  width: 1094px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 205px;
}
.business3 .about_us .img_box{
  width: 500px; height: 500px;
}
.business3 .about_us .img_box img{
  width: 100%; height: 100%;
}
.business3 .about_us .text_box{
  width: 594px;
  padding: 0 70px;
}
.business3 .about_us .title{
  line-height: 1.5; font-size: 28px; color: #2E2E2E; font-weight: bold; text-align: left;
}
.business3 .about_us .text{
  line-height: 1.5; font-size: 18px; color: #2E2E2E;
  margin-top: 50px;
}
.business3 .about_us .list_box{
  margin-top: 70px;
}
.business3 .about_us .list{
  font-size: 16px; color: #2E2E2E; font-weight: 500; line-height: 1.33;
}
.business3 .about_us .list:not(:last-child){
  margin-bottom: 13px;
}

/* sub banner */
.business3 .sub_banner{
  position: relative;
  width: 100%; height: 350px;
}
.business3 .sub_banner .img_box{
  width: 100%; height: 100%;
}
.business3 .sub_banner .img_box img{
  width: 100%; height: 100%;
}
.business3 .sub_banner .img_box::before{
  content: '';
  position: absolute; top: 0; left: 0; z-index: 1;
  display: block;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.business3 .sub_banner .title{
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  font-size: 32px; color: #fff; font-weight: bold;
}

/* service */
.business3 .service{}
.business3 .service .top{
  background: #FAFAFA;
  padding: 70px 0 181px;
}
.business3 .service .top .inner{
  width: 1094px; margin: 0 auto;
}
.business3 .service .top .title_box .title{
  font-size: 38px; color: #2E2E2E; text-align: left;
}
.business3 .service .top .title_box .fw_bold{
  display: inline-flex; align-items: center;
}
.business3 .service .top .title_box .fw_bold span{
  display: inline-flex; align-items: center;
  font-weight: bold;
}
.business3 .service .top .title_box .fw_bold span:not(:last-child)::after{
  content: ''; display: inline-block;
  width: 90px; height: 3px;
  background: #D50E62;
  margin: 0 20px;
}

.business3 .service .top .text_box{
  display: flex; justify-content: space-between;
  margin-top: 50px;
}
.business3 .service .top .text_box .box{
  width: 518px;
}
.business3 .service .top .text_box .title{
  font-size: 22px; color: #2E2E2E; font-weight: bold; text-align: left;
}
.business3 .service .top .text_box .text{
  line-height: 1.5; font-size: 15px; color: #2E2E2E;
  margin-top: 20px;
}

.business3 .service .bottom{
  width: 1094px; margin: -131px auto 0;
  display: flex; justify-content: flex-end; align-items: flex-end;
}
.business3 .service .bottom .title{
  line-height: 1.5; font-size: 30px;
  color: #2E2E2E; font-weight: bold;
  text-align: right;
  margin-right: 50px;
  margin-bottom: 44px;
}
.business3 .service .bottom .img_box{
  width: 518px; height: 310px;
}
.business3 .service .bottom .img_box img{
  width: 100%; height: 100%;
}

/* details */
.business3 .details{
  width: 1094px; margin: 0 auto;
  color: #2E2E2E;
  padding: 186px 0 150px;
}
.business3 .details .title{
  font-size: 32px; font-weight: bold; text-align: left;
}
.business3 .details .text{
  line-height: 1.67; font-size: 15px;
  margin-top: 32px;
}


@media(max-width: 1350px) {
  /* ============= business 1 ============= */
  /* service */
  .business1 .service .title_box{
    width: calc(100vw * (1094 / 1350)); padding: calc(100vw * (91 / 1350)) 0 calc(100vw * (174 / 1350));
  }
  .business1 .service .title_box .title{
    font-size: calc(100vw * (38 / 1350));
  }
  .business1 .service .title_box .fw_bold{
    margin-top: calc(100vw * (11 / 1350));
  }
  .business1 .service .title_box .fw_bold span:not(:last-child)::after{
    width: calc(100vw * (80 / 1350)); height: calc(100vw * (3 / 1350));
    margin: 0 calc(100vw * (20 / 1350));
  }
  .business1 .service .title_box .description{
    font-size: calc(100vw * (15 / 1350));
    margin-top: calc(100vw * (45 / 1350));
  }
  .business1 .service_list{
    top: calc(100vw * (-64 / 1350));
    width: calc(100vw * (872 / 1350));
  }
  .business1 .service_list li{
    width: calc(100vw * (206 / 1350)); height: calc(100vw * (304 / 1350));
    padding: calc(100vw * (40 / 1350)) 0 calc(100vw * (58 / 1350));
  }
  .business1 .service_list li:not(:last-child){margin-right: calc(100vw * (16 / 1350));}
  .business1 .service_list .num{
    font-size: calc(100vw * (40 / 1350));
  }
  .business1 .service_list .num::after{
    width: calc(100vw * (40 / 1350));
    margin: calc(100vw * (16 / 1350)) auto 0;
  }
  .business1 .service_list .text_box{
    height: calc(100vw * (132 / 1350));
    margin-top: calc(100vw * (10 / 1350));
  }
  .business1 .service_list .text_box .text{
    height: calc(100vw * (38 / 1350));
    font-size: calc(100vw * (16 / 1350));
  }
  .business1 .service_list .text_box .icon.icon1{width: calc(100vw * (73 / 1350));}
  .business1 .service_list .text_box .icon.icon2{width: calc(100vw * (70 / 1350));}
  .business1 .service_list .text_box .icon.icon3{width: calc(100vw * (78 / 1350));}
  .business1 .service_list .text_box .icon.icon4{width: calc(100vw * (78 / 1350));}

  .business1 .service .service_banner{
    height: calc(100vw * (398 / 1350));
  }

  /* company info */
  .business1 .company_info{
    padding: calc(100vw * (180 / 1350)) 0 calc(100vw * (230 / 1350));
  }
  .business1 .company_info .list_area{
    width: calc(100vw * (1094 / 1350));
  }
  .business1 .company_info .list_area .list:not(:last-child){margin-bottom: calc(100vw * (160 / 1350));}

  .business1 .company_info .list_area .list .title::before{
    margin-bottom: calc(100vw * (41 / 1350));
  }
  .business1 .company_info .list_area .list:nth-child(1) .title::before,
  .business1 .company_info .list_area .list:nth-child(3) .title::before{
    width: calc(100vw * (80 / 1350));
  }
  .business1 .company_info .list_area .list:nth-child(2) .title::before{
    width: calc(100vw * (75 / 1350)); height: calc(100vw * (75 / 1350));
  }

  .business1 .company_info .list_area .list:nth-child(1) .num{left: calc(100vw * (-20 / 1350));}
  .business1 .company_info .list_area .list:nth-child(2) .num,
  .business1 .company_info .list_area .list:nth-child(3) .num{right: calc(100vw * (-20 / 1350));}

  .business1 .company_info .list_area .list:nth-child(2) .text_box{
    margin-left: calc(100vw * (160 / 1350));
}
  .business1 .company_info .title{
    font-size: calc(100vw * (32 / 1350));
  }
  .business1 .company_info .text{
    font-size: calc(100vw * (15 / 1350));
    margin-top: calc(100vw * (45 / 1350));
  }
  .business1 .company_info .img_box{
    width: calc(100vw * (380 / 1350)); height: calc(100vw * (443 / 1350));
  }
  .business1 .company_info .img_box .num{
    font-size: calc(100vw * (176 / 1350));
  }

  /* sub banner */
  .business1 .sub_banner{
    height: calc(100vw * (422 / 1350));
  }
  .business1 .sub_banner .text_box{
    width: calc(100vw * (1094 / 1350));
  }
  .business1 .sub_banner .text_box .title{
    font-size: calc(100vw * (36 / 1350));
  }
  .business1 .sub_banner .text_box .text{
    font-size: calc(100vw * (15 / 1350));
    margin-top: calc(100vw * (50 / 1350));
  }

  /* solution */
  .business1 .solution{
    width: calc(100vw * (1094 / 1350));
    padding: calc(100vw * (156 / 1350)) 0 calc(100vw * (140 / 1350));
  }
  .business1 .solution h1{
    font-size: calc(100vw * (38 / 1350));
  }
  .business1 .solution .info_box{margin-top: calc(100vw * (51 / 1350));}
  .business1 .solution .info_box .list{
    padding: calc(100vw * (40 / 1350)) 0;
  }
  .business1 .solution .info_box .title{
    font-size: calc(100vw * (28 / 1350));
  }
  .business1 .solution .info_box .text{
    font-size: calc(100vw * (16 / 1350));
    margin-top: calc(100vw * (20 / 1350));
  }
  
  /* ============= business 2 ============= */
  .business2{
    padding-bottom: calc(100vw * (170 / 1350));
  }
  /* about us */
  .business2 .about_us{
    width: calc(100vw * (1094 / 1350));
    padding: calc(100vw * (91 / 1350)) 0 calc(100vw * (85 / 1350));
  }
  .business2 .about_us .title{
    font-size: calc(100vw * (38 / 1350));
  }
  .business2 .about_us .title span{
    margin-top: calc(100vw * (16 / 1350));
  }
  .business2 .about_us .text_area{
    margin-top: calc(100vw * (100 / 1350));
  }
  .business2 .about_us .text_box{
    width: calc(100vw * (497 / 1350));
    padding-bottom: calc(100vw * (65 / 1350));
    margin-bottom: calc(100vw * (85 / 1350));
  }
  .business2 .about_us .sub_title{
    font-size: calc(100vw * (24 / 1350));
  }
  .business2 .about_us .redB{
    margin-bottom: calc(100vw * (12 / 1350));
  }
  .business2 .about_us .text{
    font-size: calc(100vw * (15 / 1350));
    margin-top: calc(100vw * (40 / 1350));
  }

  /* technology */
  .business2 .technology .inner{
    top: calc(100vw * (105 / 1350));
    width: calc(100vw * (1094 / 1350));
  }
  .business2 .technology .description .title{
    font-size: calc(100vw * (36 / 1350));
  }
  .business2 .technology .description .text{
    font-size: calc(100vw * (28 / 1350));
  }
  .business2 .technology .description .text:not(:last-child){
    margin-bottom: calc(100vw * (31 / 1350));
  }

  .business2 .technology_list{
    margin-top: calc(100vw * (100 / 1350));
  }
  .business2 .technology_list li{
    width: calc(100vw * (345 / 1350));
    padding: calc(100vw * (43 / 1350)) calc(100vw * (40 / 1350));
  }
  .business2 .technology_list .title{
    font-size: calc(100vw * (20 / 1350));
  }
  .business2 .technology_list .sub_title{
    font-size: calc(100vw * (15 / 1350)); margin-top: calc(100vw * (10 / 1350));
  }
  .business2 .technology_list .text{
    font-size: calc(100vw * (16 / 1350));
    margin-top: calc(100vw * (34 / 1350));
  }

  .business2 .technology_banner{
    height: calc(100vw * (550 / 1350));
  }

  /* service */
  .business2 .service{
    width: calc(100vw * (1094 / 1350));
    padding: calc(100vw * (239 / 1350)) 0 calc(100vw * (150 / 1350)); 
  }
  .business2 .service .description .title{
    font-size: calc(100vw * (34 / 1350));
  }
  .business2 .service .description .red{
    margin-top: calc(100vw * (13 / 1350));
  }
  .business2 .service .description .text{
    font-size: calc(100vw * (15 / 1350));
    margin-top: calc(100vw * (50 / 1350));
  }
  .business2 .service .list_box{
    margin-top: calc(100vw * (100 / 1350));
  }
  .business2 .service .list_box li{
    width: calc(100vw * (171.7 / 1350)); height: calc(100vw * (171.7 / 1350));
    font-size: calc(100vw * (20 / 1350));
  }
  .business2 .service .list_box li:not(:last-child){
    margin-right: calc(100vw * (25 / 1350));
  }

  /* highlight */
  .business2 .highlight{
    width: calc(100vw * (1094 / 1350));
  }
  .business2 .highlight_list .list{
    width: calc(100vw * (131 / 1350)); height: calc(100vw * (240 / 1350));
  }
  .business2 .highlight_list .text_box{
    padding: 0 calc(100vw * (40 / 1350));
  }
  .business2 .highlight_list .title{
    font-size: calc(100vw * (24 / 1350));
  }
  .business2 .highlight_list .text{
    font-size: calc(100vw * (15 / 1350));
    margin-top: calc(100vw * (30 / 1350));
  }
  .business2 .highlight_list .list.on{
    width: calc(100vw * (701 / 1350));
  }

  /* ============= business 3 ============= */
  /* creativity */
  .business3 .creativity{
    width: calc(100vw * (1094 / 1350));
    padding: calc(100vw * (90 / 1350)) 0 calc(100vw * (205 / 1350));
  }
  .business3 .creativity .title{
    font-size: calc(100vw * (16 / 1350));
  }
  .business3 .creativity .area{
    margin-top: calc(100vw * (110 / 1350));
  }
  .business3 .creativity .box:not(:last-child){
    margin-bottom: calc(100vw * (80 / 1350));
  }
  .business3 .creativity .main_title{
    max-width: calc(100vw * (396 / 1350));
    font-size: calc(100vw * (28 / 1350));
  }
  .business3 .creativity .list_box{
    width: calc(100vw * (683 / 1350));
    padding: calc(100vw * (30 / 1350));
  }
  .business3 .creativity .list_box li:not(:last-child){
    margin-bottom: calc(100vw * (30 / 1350));
  }
  .business3 .creativity .sub_title{
    font-size: calc(100vw * (20 / 1350));
  }
  .business3 .creativity .text{
    font-size: calc(100vw * (15 / 1350));
    margin-top: calc(100vw * (8 / 1350));
  }
  
  /* about us */
  .business3 .about_us{
    width: calc(100vw * (1094 / 1350));
    padding-bottom: calc(100vw * (205 / 1350));
  }
  .business3 .about_us .img_box{
    width: calc(100vw * (500 / 1350)); height: calc(100vw * (500 / 1350));
  }
  .business3 .about_us .text_box{
    width: calc(100vw * (594 / 1350));
    padding: 0 calc(100vw * (70 / 1350));
  }
  .business3 .about_us .title{
    font-size: calc(100vw * (28 / 1350));
  }
  .business3 .about_us .text{
    font-size: calc(100vw * (18 / 1350));
    margin-top: calc(100vw * (50 / 1350));
  }
  .business3 .about_us .list_box{
    margin-top: calc(100vw * (70 / 1350));
  }
  .business3 .about_us .list{
    font-size: calc(100vw * (18 / 1350));
  }
  .business3 .about_us .list:not(:last-child){
    margin-bottom: calc(100vw * (13 / 1350));
  }
  
  /* sub banner */
  .business3 .sub_banner{
    height: calc(100vw * (350 / 1350));
  }
  .business3 .sub_banner .title{
    font-size: calc(100vw * (32 / 1350));
  }
  
  /* service */
  .business3 .service .top{
    padding: calc(100vw * (70 / 1350)) 0 calc(100vw * (181 / 1350));
  }
  .business3 .service .top .inner{
    width: calc(100vw * (1094 / 1350));
  }
  .business3 .service .top .title_box .title{
    font-size: calc(100vw * (38 / 1350));
  }
  .business3 .service .top .title_box .fw_bold span:not(:last-child)::after{
    width: calc(100vw * (90 / 1350)); height: calc(100vw * (3 / 1350));
    margin: 0 calc(100vw * (20 / 1350));
  }
  
  .business3 .service .top .text_box{
    margin-top: calc(100vw * (50 / 1350));
  }
  .business3 .service .top .text_box .box{
    width: calc(100vw * (518 / 1350));
  }
  .business3 .service .top .text_box .title{
    font-size: calc(100vw * (22 / 1350));
  }
  .business3 .service .top .text_box .text{
    font-size: calc(100vw * (15 / 1350));
    margin-top: calc(100vw * (20 / 1350));
  }
  
  .business3 .service .bottom{
    width: calc(100vw * (1094 / 1350)); margin: calc(100vw * (-131 / 1350)) auto 0;
  }
  .business3 .service .bottom .title{
    font-size: calc(100vw * (30 / 1350));
    margin-right: calc(100vw * (50 / 1350));
    margin-bottom: calc(100vw * (44 / 1350));
  }
  .business3 .service .bottom .img_box{
    width: calc(100vw * (518 / 1350)); height: calc(100vw * (310 / 1350));
  }
  
  /* details */
  .business3 .details{
    width: calc(100vw * (1094 / 1350));
    padding: calc(100vw * (186 / 1350)) 0 calc(100vw * (150 / 1350));
  }
  .business3 .details .title{
    font-size: calc(100vw * (32 / 1350));
  }
  .business3 .details .text{
    font-size: calc(100vw * (15 / 1350));
    margin-top: calc(100vw * (32 / 1350));
  }


}



@media(max-width: 1024px) {
  /* ============= business 1 ============= */
  /* service */
  .business1 .service .title_box{
    width: calc(100vw * (378 / 428)); padding: calc(100vw * (51 / 428)) 0 calc(100vw * (193 / 428));
  }
  .business1 .service .title_box .title{
    font-size: calc(100vw * (27 / 428));
  }
  .business1 .service .title_box .fw_bold{
    margin-top: calc(100vw * (6 / 428));
  }
  .business1 .service .title_box .fw_bold span:not(:last-child)::after{
    width: calc(100vw * (55 / 428)); height: calc(100vw * (2 / 428));
    margin: 0 calc(100vw * (15 / 428));
  }
  .business1 .service .title_box .description{
    font-size: calc(100vw * (15 / 428));
    margin-top: calc(100vw * (30 / 428));
  }
  .business1 .service_list{
    top: calc(100vw * (-113 / 428));
    width: calc(100vw * (378 / 428));
    justify-content: space-between;
  }
  .business1 .service_list li{
    width: calc(100vw * (182 / 428)); height: calc(100vw * (268 / 428));
    padding: calc(100vw * (33 / 428)) 0;
  }
  .business1 .service_list li:not(:last-child){margin-right: 0;}
  .business1 .service_list li:nth-last-child(-n+2){margin-top: calc(100vw * (14 / 428));}
  .business1 .service_list .num{
    font-size: calc(100vw * (40 / 428));
  }
  .business1 .service_list .num::after{
    width: calc(100vw * (40 / 428));
    margin: calc(100vw * (16 / 428)) auto 0;
  }
  .business1 .service_list .text_box{
    height: calc(100vw * (132 / 428));
    margin-top: calc(100vw * (10 / 428));
  }
  .business1 .service_list .text_box .text{
    height: calc(100vw * (38 / 428));
    font-size: calc(100vw * (16 / 428));
  }
  .business1 .service_list .text_box .icon.icon1{width: calc(100vw * (73 / 428));}
  .business1 .service_list .text_box .icon.icon2{width: calc(100vw * (70 / 428));}
  .business1 .service_list .text_box .icon.icon3{width: calc(100vw * (78 / 428));}
  .business1 .service_list .text_box .icon.icon4{width: calc(100vw * (78 / 428));}

  .business1 .service .service_banner{
    height: calc(100vw * (500 / 428));
  }

  /* company info */
  .business1 .company_info{
    padding: calc(100vw * (213 / 428)) 0 calc(100vw * (110 / 428));
  }
  .business1 .company_info .list_area{
    width: calc(100vw * (378/ 428));
  }
  .business1 .company_info .list_area .list{
    position: relative;
    flex-direction: column;
  }
  .business1 .company_info .list_area .list:not(:last-child){margin-bottom: calc(100vw * (219 / 428));}

  .business1 .company_info .list_area .list .title::before{
    position: absolute;
    margin-bottom: 0;
  }
  .business1 .company_info .list_area .list:nth-child(1) .title::before,
  .business1 .company_info .list_area .list:nth-child(3) .title::before{
    top: calc(100vw * (-26 / 428));
    width: calc(100vw * (55 / 428));
  }
  .business1 .company_info .list_area .list:nth-child(2) .title::before{
    top: calc(100vw * (-55 / 428));
    width: calc(100vw * (30 / 428)); height: calc(100vw * (30 / 428));
  }

  .business1 .company_info .list_area .list:nth-child(1) .num{left: calc(100vw * (-10 / 428));}
  .business1 .company_info .list_area .list:nth-child(2) .num,
  .business1 .company_info .list_area .list:nth-child(3) .num{right: calc(100vw * (-10 / 428));}

  .business1 .company_info .list_area .list:nth-child(2) .text_box{
    margin-left: 0;
}

  .business1 .company_info .title{
    position: relative;
    width: calc(100vw * (183 / 428));
    font-size: calc(100vw * (21 / 428));
    word-break: keep-all;
  }
  .business1 .company_info .list_area .list:nth-child(2) .title{margin-left: auto;}
  .business1 .company_info .title br{display: none;}
  .business1 .company_info .text{
    font-size: calc(100vw * (15 / 428));
    margin-top: calc(100vw * (35 / 428));
  }
  .business1 .company_info .text br{display: none;}
  .business1 .company_info .list_area .list:nth-child(2) .img_box{
    right: auto; left: 0;
  }
  .business1 .company_info .img_box{
    position: absolute; top: calc(100vw * (-144 / 428)); right: 0; flex-shrink: 1;
    width: calc(100vw * (172 / 428)); height: calc(100vw * (202 / 428));
  }
  .business1 .company_info .img_box .num{
    font-size: calc(100vw * (91 / 428));
  }

  /* sub banner */
  .business1 .sub_banner{
    height: calc(100vw * (422 / 428));
  }
  .business1 .sub_banner .text_box{
    width: calc(100vw * (378/ 428));
    text-align: center;
  }
  .business1 .sub_banner .text_box .title{
    font-size: calc(100vw * (25 / 428));
  }
  .business1 .sub_banner .text_box .text{
    font-size: calc(100vw * (15 / 428));
    margin-top: calc(100vw * (40 / 428));
  }

  /* solution */
  .business1 .solution{
    width: calc(100vw * (378/ 428));
    padding: calc(100vw * (86 / 428)) 0 calc(100vw * (85 / 428));
  }
  .business1 .solution h1{
    font-size: calc(100vw * (27 / 428));
  }
  .business1 .solution h1 .mb_br{display: block;}
  .business1 .solution .info_box{margin-top: calc(100vw * (15 / 428));}
  .business1 .solution .info_box .list{
    padding: calc(100vw * (35 / 428)) 0;
  }
  .business1 .solution .info_box .title{
    font-size: calc(100vw * (23 / 428));
  }
  .business1 .solution .info_box .text{
    font-size: calc(100vw * (15 / 428));
    margin-top: calc(100vw * (20 / 428));
  }
  .business1 .solution .info_box .text br{display: none;}
  
  /* ============= business 2 ============= */
  .business2{
    padding-bottom: calc(100vw * (120 / 428));
  }
  /* about us */
  .business2 .about_us{
    width: calc(100vw * (378 / 428));
    padding: calc(100vw * (51 / 428)) 0 calc(100vw * (55 / 428));
  }
  .business2 .about_us .title{
    font-size: calc(100vw * (27 / 428));
  }
  .business2 .about_us .title span{
    margin-top: calc(100vw * (6 / 428));
  }
  .business2 .about_us .text_area{
    margin-top: calc(100vw * (60 / 428));
  }
  .business2 .about_us .text_box{
    width: 100%;
    padding-bottom: calc(100vw * (55 / 428));
    margin-bottom: calc(100vw * (45 / 428));
  }
  .business2 .about_us .sub_title{
    font-size: calc(100vw * (20 / 428));
  }
  .business2 .about_us .redB{
    margin-bottom: calc(100vw * (5 / 428));
  }
  .business2 .about_us .text{
    font-size: calc(100vw * (15 / 428));
    margin-top: calc(100vw * (35 / 428));
  }

  /* technology */
  .business2 .technology .inner{
    top: calc(100vw * (73 / 428));
    width: 100%;
    overflow: hidden;
  }
  .business2 .technology .description{
    display: block;
    padding: 0 calc(100vw * (25 / 428));
  }
  .business2 .technology .description .title{
    font-size: calc(100vw * (28 / 428));
  }
  .business2 .technology .description .text_box{
    margin-top: calc(100vw * (40 / 428));
  }
  .business2 .technology .description .text{
    font-size: calc(100vw * (18 / 428));
  }
  .business2 .technology .description .text:not(:last-child){
    margin-bottom: calc(100vw * (25 / 428));
  }

  .business2 .technology_list{
    margin-top: calc(100vw * (70 / 428));
  }
  .business2 .technology_list li{
    width: 100%;
    padding: calc(100vw * (40 / 428));
  }
  .business2 .technology_list .title{
    font-size: calc(100vw * (20 / 428));
  }
  .business2 .technology_list .sub_title{
    font-size: calc(100vw * (15 / 428)); margin-top: calc(100vw * (10 / 428));
  }
  .business2 .technology_list .text{
    font-size: calc(100vw * (15 / 428));
    margin-top: calc(100vw * (30 / 428));
  }

  .business2 .technology_banner{
    height: calc(100vw * (550 / 428));
  }

  /* service */
  .business2 .service{
    width: calc(100vw * (378 / 428));
    padding: calc(100vw * (186 / 428)) 0 calc(100vw * (120 / 428)); 
  }
  .business2 .service .description .title{
    font-size: calc(100vw * (27 / 428));
  }
  .business2 .service .description .red{
    margin-top: calc(100vw * (6 / 428));
  }
  .business2 .service .description .text{
    font-size: calc(100vw * (15 / 428));
    margin-top: calc(100vw * (40 / 428));
  }
  .business2 .service .list_box{
    margin-top: calc(100vw * (50 / 428));
  }
  .business2 .service .list_box li{
    width: calc(100vw * (116 / 428)); height: calc(100vw * (116 / 428));
    font-size: calc(100vw * (15 / 428));
    margin-bottom: calc(100vw * (15 / 428));
  }
  .business2 .service .list_box li:nth-child(3){margin-right: 0 !important;}
  .business2 .service .list_box li:not(:last-child){
    margin-right: calc(100vw * (15 / 428));
  }

  /* highlight */
  .business2 .highlight{
    width: 100%;
  }
  .business2 .highlight_list{
    flex-direction: column;
  }
  .business2 .highlight_list .list{
    width: 100%; height: calc(100vw * (60 / 428));
  }
  .business2 .highlight_list .text_box{
    padding: 0 calc(100vw * (25 / 428));
  }
  .business2 .highlight_list .title{
    font-size: calc(100vw * (24 / 428));
  }
  .business2 .highlight_list .text{
    font-size: calc(100vw * (15 / 428));
    margin-top: calc(100vw * (30 / 428));
  }
  .business2 .highlight_list .list.on{
    width: 100%;
    height: calc(100vw * (257 / 428));
  }
  .business2 .highlight_list .img_box img{
    object-position: bottom;
  }


  /* ============= business 3 ============= */
  /* creativity */
  .business3 .creativity{
    width: calc(100vw * (378 / 428));
    padding: calc(100vw * (43 / 428)) 0 calc(100vw * (100 / 428));
  }
  .business3 .creativity .title{
    font-size: calc(100vw * (15 / 428));
  }
  .business3 .creativity .area{
    margin-top: calc(100vw * (60 / 428));
  }
  .business3 .creativity .box{
    display: block;
  }
  .business3 .creativity .box:not(:last-child){
    margin-bottom: calc(100vw * (65 / 428));
  }
  .business3 .creativity .main_title{
    max-width: 100%;
    font-size: calc(100vw * (23 / 428));
  }
  .business3 .creativity .main_title br{display: none;}
  .business3 .creativity .list_box{
    width: 100%;
    padding: calc(100vw * (30 / 428)) calc(100vw * (25 / 428));
    margin-top: calc(100vw * (20 / 428));
  }
  .business3 .creativity .list_box li:not(:last-child){
    margin-bottom: calc(100vw * (25 / 428));
  }
  .business3 .creativity .sub_title{
    font-size: calc(100vw * (18 / 428));
  }
  .business3 .creativity .text{
    font-size: calc(100vw * (15 / 428));
    margin-top: calc(100vw * (10 / 428));
  }
  
  /* about us */
  .business3 .about_us{
    width: calc(100vw * (378 / 428));
    display: block;
    padding-bottom: calc(100vw * (90 / 428));
  }
  .business3 .about_us .img_box{
    width: calc(100vw * (378 / 428)); height: calc(100vw * (300 / 428));
  }
  .business3 .about_us .text_box{
    width: 100%;
    padding: calc(100vw * (30 / 428)) 0 0;
  }
  .business3 .about_us .title{
    font-size: calc(100vw * (22 / 428));
  }
  .business3 .about_us .text{
    font-size: calc(100vw * (15 / 428));
    margin-top: calc(100vw * (20 / 428));
  }
  .business3 .about_us .list_box{
    margin-top: calc(100vw * (45 / 428));
  }
  .business3 .about_us .list{
    font-size: calc(100vw * (17 / 428));
  }
  .business3 .about_us .list:not(:last-child){
    margin-bottom: calc(100vw * (10 / 428));
  }
  
  /* sub banner */
  .business3 .sub_banner{
    height: calc(100vw * (154 / 428));
  }
  .business3 .sub_banner .title{
    font-size: calc(100vw * (24 / 428));
  }
  
  /* service */
  .business3 .service .top{
    padding: calc(100vw * (51 / 428)) 0 calc(100vw * (119 / 428));
  }
  .business3 .service .top .inner{
    width: calc(100vw * (378 / 428));
  }
  .business3 .service .top .title_box .title{
    font-size: calc(100vw * (27 / 428));
  }
  .business3 .service .top .title_box .fw_bold span:not(:last-child)::after{
    width: calc(100vw * (55 / 428)); height: calc(100vw * (2 / 428));
    margin: 0 calc(100vw * (15 / 428));
  }
  
  .business3 .service .top .text_box{
    display: block;
    margin-top: calc(100vw * (50 / 428));
  }
  .business3 .service .top .text_box .box{
    width: 100%;
  }
  .business3 .service .top .text_box .box:not(:last-child){
    margin-bottom: calc(100vw * (35 / 428));
  }
  .business3 .service .top .text_box .title{
    font-size: calc(100vw * (20 / 428));
  }
  .business3 .service .top .text_box .text{
    font-size: calc(100vw * (15 / 428));
    margin-top: calc(100vw * (15 / 428));
  }
  
  .business3 .service .bottom{
    flex-direction: column-reverse;
    width: calc(100vw * (358 / 428)); margin: calc(100vw * (-59 / 428)) auto 0;
  }
  .business3 .service .bottom .title{
    font-size: calc(100vw * (20 / 428));
    margin-top: calc(100vw * (20 / 428));
    margin-right: 0;
    margin-bottom: 0;
  }
  .business3 .service .bottom .img_box{
    width: calc(100vw * (358 / 428)); height: calc(100vw * (220 / 428));
  }
  
  /* details */
  .business3 .details{
    width: calc(100vw * (378 / 428));
    padding: calc(100vw * (95 / 428)) 0 calc(100vw * (100 / 428));
  }
  .business3 .details .title{
    font-size: calc(100vw * (23 / 428));
  }
  .business3 .details .text{
    font-size: calc(100vw * (15 / 428));
    margin-top: calc(100vw * (20 / 428));
  }

}