/* ========== Homepage-Only CSS ========== */

/* Hero Banner / Swiper */
.ptop{margin-top: 145px;}
.swiper-container.ptop {
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
}

.slider a{display: block;position: relative;overflow: hidden;}
.slider span{display: block;position: relative;overflow: hidden;}
.slider .banner{width: 100%;vertical-align: top; aspect-ratio: 1200 / 400; object-fit: cover;}
.slider .detail{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;position: absolute;left: 0;top: 0;background: rgba(0,0,0,.2);bottom: 0;}
.slider .detail .title{font-size: 36px;color: #ffffff; font-weight:600}
.slider .detail .word{font-size: 14px;color: #eaeaea;padding-top: 20px;line-height: 1.6;width:650px;text-align: center; font-weight:500}
.slider .detail img{width: 50px;height: 50px;vertical-align: top;margin-top: 30px;}

.swiper-pagination1 .swiper-pagination-bullet{background: #ffffff;opacity: 1;}
.swiper-pagination1 .swiper-pagination-bullet-active{background: #e51f26;width: 60px;border-radius: 8px;}

/* Future / Innovation Section */
.future .wrapper{display: grid;grid-template-columns: calc(33.3% - 20px) calc(33.3% - 20px) calc(33.3% - 20px);grid-column-gap: 30px;grid-row-gap: 30px;}
.futureitem {position: relative;cursor: pointer;}
.futureitem .title h2{font-size: 26px;color: #000; font-weight:600}
.futureitem .detail{font-size: 14px;color: #555;margin: 20px 0;height: 105px;}
.futureitem .hoverimg{width: 100%; height: 227px;}
.futureitem .hoverimg img{width: 100%; vertical-align: top;}
.futureitem .adv{width:58px;height:58px;position: absolute;left: 50%;bottom: -19px;transform: translateX(-50%);border-radius: 50%;background: url("../images/more1.png") no-repeat center top;background-size: 100% 100%;}

/* Wisdom / Product Search Section */
.wisdom{background: #f2f2f2;}
.wisdom .teb{display: flex;align-items: center;justify-content: center;margin-bottom: 30px;}
.wisdom .teb .tebitem{width: 50%;height: 70px;display: flex;align-items: center;justify-content: center;font-size: 14px;color: #000000;cursor: pointer;border-top: 2px solid #e7e7e7;background: #e7e7e7;}
.wisdom .teb .tebitem.active{border-top: 5px solid #e60013;background: #f2f2f2; font-size:16px; font-weight:700}
.wisdom .tebbox{display: grid;grid-template-columns: 24% 24% 24% 24%;grid-column-gap: 1.333%;grid-row-gap: 2.66%;}
.wisdom .tebbox .boxitem{padding: 0px;box-sizing: border-box;background: #fff;position: relative;cursor: pointer;display: flex;align-items: center;justify-content: center;}
.wisdom .tebbox .boxitem.sec{grid-column-start:3;grid-column-end:5;}
.wisdom .tebbox .boxitem .title{font-size: 14px;color: #4a4a4a;position: relative;z-index: 2;text-align: center;padding-top: 0px; line-height:40px}
.wisdom .tebbox .boxitem a>img{width: 100%; height: auto; aspect-ratio: 414 / 233; object-fit: cover; vertical-align: top;}
.wisdom .tebbox .boxitem .maskbox{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: #e7e7e7;padding: 10px;box-sizing: border-box;display: flex;align-items: center;justify-content: flex-start;flex-direction: column;z-index: 2;opacity: 0;transition: all .4s;}
.wisdom .tebbox .boxitem:hover .maskbox{opacity: 1;}
.wisdom .tebbox .boxitem .maskbox .title{font-size: 14px;color: #000;font-weight: 600; line-height:30px}
.wisdom .tebbox .boxitem .maskbox .detail{font-size: 12px;color: #4a4a4a; padding:8px 0; text-align: center;height: 100px; border-top:2px solid #ccc}
.wisdom .tebbox .boxitem .maskbox img{width: 40px;height: 40px;vertical-align: top;border-radius: 50%;}
.wisdom .tebbox.posite .boxitem .title1{position: absolute;text-align: center; letter-spacing: 1px; left: 0; right: 0; top: 0; bottom: 0;
 background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; font-size: 14px;color: #fff;padding-top: 10px; font-weight:600}

/* Parallax Banner */
.advbox{position: relative;overflow: hidden;width: 100%;padding: 180px 0;}
.advbox .mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.advbox p{font-size: 32px;color: #fff;text-align: center; font-weight:700; text-shadow: 0 2px 8px rgba(0,0,0,.5)}
.advbox a {
  font-size: 14px;
  color: #fff;
  background: rgba(0,0,0,.35);
  border: 1px solid #fff;
  width: 120px;
  text-align: center;
  line-height: 35px;
  margin-top: 30px;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* Solution / Application Industry */
.solution .wrap{display: grid;grid-template-columns: 25% 25% 25% 25%;}
.solution .wrap .soluitem{position: relative;overflow: hidden;cursor: pointer;}
.solution .wrap .soluitem .hoverimg{overflow: hidden; aspect-ratio: 1 / 1;}
.solution .wrap .soluitem .hoverimg img{vertical-align: top; width: 100%; height: 100%; object-fit: cover;}
.solution .wrap .soluitem h3{position: absolute;
    font-size: 26px;
	font-weight:600;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;}
.morebox{padding: 20px 0;text-align: center;font-size: 14px;color: #4a4a4a;display: block;cursor: pointer;}
.morebox p{margin-bottom: 5px;}

/* News Section */
.productwrap{display: flex;justify-content: space-between;}
.productitem{width: 48%;position: relative;cursor: pointer;}
.productitem .newsimg{width: 100%;overflow: hidden; aspect-ratio: 570 / 310;}
.productitem .newsimg img{width: 100%;vertical-align: top; height: 100%; object-fit: cover;}
.productitem .newsdetail{position: absolute;bottom: 0;left: 0;right: 0;padding:16px 10px;background: rgba(0,0,0,.5);font-size: 20px;color: #fff;}
.newswrap{padding: 10px 50px;}
.newswrap .newitem{display: flex;align-items: center;justify-content: space-between;padding:20px 0;font-size: 14px;color: #555;cursor: pointer;}
.newswrap .newitem:hover h4{color: #c70000;}
.newmore{text-align: center;}
.newmore a{font-size: 14px;color: #c70000;cursor: pointer;font-weight:600}
.newmore a:hover{color: #c70000;}