.main .heading { font-family:'RobotoCondensed';}
.main .heading span{font-family:'RobotoCondensed';}

.main-visual { width: 100%; height: 100vh; position: relative; }
.main-visual-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.main-visual-img img { width: 100%; height: 100%; object-fit: cover; }
.main-visual .intro { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4.2vw; font-weight: 600; z-index: 2; overflow: hidden;  mix-blend-mode: screen;}
.main-visual .intro.black { mix-blend-mode: normal;}
/* .main-visual .intro { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4.2vw; font-weight: 600; z-index: 2; background: #fff; overflow: hidden; background: url(/images/main/main-visual.jpg) no-repeat center/cover;} */
.main-visual .intro .text { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; background-color: #fff;}
.main-visual .intro .text p { overflow: hidden; flex-shrink: 0;}
.main-visual .intro .text.text2 { mix-blend-mode: normal; mix-blend-mode: screen; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-visual .intro span { flex-shrink: 0; font-family:'RobotoCondensed';}
.main-visual .swiper-container { width: 100%; height: 100%; position: relative;}
.main-visual .swiper { width: 100%; height: 100%;}
.main-visual .swiper-slide { display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; text-align: center;}
.main-visual .swiper-slide .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1;}
.main-visual .swiper-slide .bg > div,
.main-visual .swiper-slide .bg > div img,
.main-visual .swiper-slide .bg > div video { width: 100%; height: 100%; object-fit: cover;}
.main-visual .swiper-slide .bg:before{content:''; width:100%; height:100%; background: rgba(0,0,0,0.2); position:absolute; left:0; top:0; z-index:1;}
.main-visual .swiper-slide .heading { font-size: 80px; font-weight: 600; margin-bottom: 20px; line-height: 1.2;font-family:'RobotoCondensed';}
.main-visual .swiper-slide .desc { font-size: 24px; font-weight: 700; font-weight: bold; margin-bottom: 40px; color: #fff;}
.main-visual .swiper-slide .read-more { border: 1px solid #fff; background: rgba(255,255,255,.1); color: #fff; margin: 0 auto;  }
.main-visual .swiper-slide .read-more:hover{color: #000;}
.main-visual .swiper-slide .read-more .dot { background: #fff; width: 5px; height: 5px; border-radius: 50%;}
.main-visual .swiper-pagination { bottom: 50px !important;}
.main-visual .swiper-pagination-bullet { width: 3px; height: 30px; border-radius: 0; background-color: rgba(255,255,255,.2); opacity: 1 !important; margin: 0 5px !important;}
.main-visual .swiper-pagination-bullet-active { background-color: #fff;}
.main-visual .scroll-down { position: absolute; right: 5%; bottom: 60px; z-index: 1; writing-mode: vertical-rl; text-orientation: sideways; display: flex; justify-content: center; align-items: center; gap: 10px; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.1rem; z-index: 2; font-family:'RobotoCondensed';}
.main-visual .scroll-down i { animation: bounce 2s infinite; }


@keyframes bounce {
  0%, 100% { transform: translateY(0);}
  50% { transform: translateY(10px);}
}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .main-visual .swiper-slide .heading { font-size: 50px;}
}

@media screen and (max-width: 768px) {
  .main-visual .intro{font-size: 4.5vw;}
  .main-visual .intro .text{gap:3px;}
  .main-visual .swiper-slide .visual-text { padding: 0 2.5%;}
  .main-visual .swiper-slide .heading { font-size: 36px; margin-bottom: 10px;}
  .main-visual .swiper-slide .desc { font-size: 18px; margin-bottom: 30px;}
  .main-visual .swiper-pagination-bullet { height: 20px;}
  .main-visual .scroll-down{bottom:30px; font-size: 12px;}
}

.main-global { position: relative; height: 300vh; padding: 160px 0 78px;}
.main-global .sticky { --backPosition-bottom: -100%; top: 100px; height: 100vh;}
.main-global .sticky::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/main/global-bg.png) no-repeat bottom var(--backPosition-bottom) center/ 100% auto;}
.main-global .global-header { margin-bottom: 80px;}
.main-global .global-header .heading{font-size: 80px;}
.main-global .global-header .heading,
.main-global .global-header .heading-desc { overflow: hidden;}
.main-global .global-header .read-more { margin-top: 30px;}
.main-global .global-list { position: relative; max-width: 1000px; margin-left: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); justify-content: flex-end; gap: 21px;}
.main-global .global-list::before { content: ""; grid-column: 1;}
.main-global .global-list li { border: 1px solid #e8e8e8; backdrop-filter: blur(10px); background: rgba(255,255,255,.5); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06); border-radius: 100px; padding: 31px 5px; text-align: center;}
.main-global .global-list li .label { font-weight: 500; margin-bottom: 5px; color: #151515;  font-family:'RobotoCondensed';}
.main-global .count-area { position: relative; height: 80px; }
.main-global .number_motion { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; margin-left: 0; display: flex; align-items: flex-end; justify-content: center; font-weight: 700; font-size: inherit;}
.main-global .number_motion .year { overflow: hidden; height: 100%; display: flex; align-items: flex-start; font-size: 80px; font-weight: 700; line-height: 1; }
.main-global .number_motion .year span { line-height: 1; font-size: inherit; }
.main-global .number_motion .year span + span{margin-left:-4px;}
.main-global .number_motion .text { margin-bottom: 8px;}
.main-global .rolling-container {  position: absolute;  top: 0px;  left: 0;  width: 100%;  overflow: hidden; z-index: -1;}
.main-global .rolling-wrap {  display: flex;  width: max-content; font-weight: 700;  font-size: 400px; color: rgba(0, 1, 37, 0.03); line-height: 1; font-family:'RobotoCondensed';}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .main-global .global-header { margin-bottom: 0;}
}

@media screen and (max-width: 768px) {
  .main-global { height: 200vh; padding: 60px 0 0 ;}
  .main-global .sticky{height:80vh;} 
  .main-global .global-header {  }
  .main-global .rolling-wrap { font-size: 200px;}
  .main-global .count-area { height: 30px;}
  .main-global .global-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px;}
  .main-global .global-list li { padding: 20px 5px;}
  .main-global .number_motion .text { margin-bottom: 3px; margin-left: 3px;}
  :lang(en) .main-global .number_motion .text {margin-bottom: 0;}
  .main-global .number_motion .year { font-size: 30px;}
  .main-global .global-header .heading{font-size: 40px;}
  .main-global .global-header .heading-desc{margin-top: 15px;}
  .main-global .sticky::before{background-size:140% auto; height:80%;}
}


/* main-business */
.main-business { height: 1500vh;}
.main-business .business-area { margin: 0;}
.main-business .sticky { height: 100vh;}
.main-business .swiper { position: relative; width: 100%;}
.main-business .area1 { display: flex; align-items: center; justify-content: start; position: relative; height: inherit;}
.main-business .area1 .area-header { width: 100%; height: 100%; padding-top: 160px; text-align: center;}
.main-business .area1 .area-header .heading{font-size: 80px; }
.main-business .area1 .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; z-index: 1;}
.main-business .area1 .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/main/business-bg.jpg) no-repeat center/cover;}
.main-business .area1 .bg2 { --gradient-stop: 200%;  position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 1, 37, 0.2), rgba(0, 1, 37, 0.2)), linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 var(--gradient-stop));}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .main-business .area1 .text { font-size: 28px;}
}

@media screen and (max-width: 768px) {
  .main-business { height: 800vh;}
  .main-business .area1 .text { font-size: 22px; width: 100%; padding: 0 5%;}
  .main-business .area1 .area-header{padding-top: 120px;}
  .main-business .area1 .area-header .heading{font-size: 40px;}
}

.main-business .area2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-business .area2 .container { width: 100%;  height: 100%;  overflow: hidden;  position: relative; }
.main-business .area2 .guide-circle { width: 200%; aspect-ratio: 1/1;  position: absolute;  top: 50%;  left: 50%;  transform: translateX(-50%);  border-radius: 50%; }
.main-business .area2 .guide-circle article { position: absolute; width: 19%; height: 428px; transform-origin: center; background-repeat: no-repeat; background-size: cover; background-position: center;}
.main-business .area2 .guide-circle article:nth-child(1) { background-image: url(/images/main/circle-bg1.jpg);}
.main-business .area2 .guide-circle article:nth-child(2) { background-image: url(/images/main/circle-bg2.jpg);}
.main-business .area2 .guide-circle article:nth-child(3) { background-image: url(/images/main/circle-bg3.jpg);}
.main-business .area2 .guide-circle article:nth-child(4) { background-image: url(/images/main/circle-bg4.jpg);}
.main-business .area2 .guide-circle article .text { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); display: flex; align-items: flex-start; opacity: 0; visibility: hidden; transition: all 0.5s ease;}
.main-business .area2 .guide-circle article .text * { color: rgba(255,255,255,.5); white-space: nowrap; font-family:'RobotoCondensed';}
.main-business .area2 .guide-circle article .text .sbj { font-size: 80px; font-weight: 700; line-height: 1; white-space: nowrap;}
.main-business .area2 .guide-circle article .text .num { font-size: 20px; font-weight: 700; position: absolute; left: 0; top: -10px; transform: translateX(-100%);}
.main-business .area2 .guide-circle article.active .text { opacity: 1; visibility: visible; transform: translate(-50%, 50%);}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .main-business .area2 .guide-circle article .text .num{font-size: 14px;}
  .main-business .area2 .guide-circle article .text .sbj { font-size: 40px;}
}

@media screen and (max-width: 768px) {
  .main-business .area2 .guide-circle { width: 300%;}
  .main-business .area2 .guide-circle article { width: 25%; height: 350px;}
}

.main-business .area3 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.1); backdrop-filter: blur(20px);}
.main-business .area3 .area-header { padding-top: 130px; color: #fff; text-align: center; margin-bottom: 18px;}
.main-business .area3 .area-btns { border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 60px; padding: 0 5%; }
.main-business .area3 .area-btns .swiper-wrapper { justify-content: center;}
.main-business .area3 .area-btns .swiper-slide { width: auto; padding: 12px 0; font-size: 22px; font-weight: 600; color: rgba(255,255,255,.3); cursor: pointer;font-family:'RobotoCondensed';}
.main-business .area3 .area-btns .swiper-slide.active { color: #fff; border-bottom: 2px solid #fff;  }
.main-business .area3 .area-content { overflow: hidden;}
.main-business .area3 .content-item { display: none;}
.main-business .area3 .content-item.active { display: block;}
.main-business .area3 .content-item .swiper { overflow: visible;}
.main-business .area3 .content-item .swiper-slide { width: 100%; height: 500px; background: #fff;}
.main-business .area3 .content-item .swiper-slide a { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 40px; position: relative;}
.main-business .area3 .content-item .swiper-slide a .label { font-size: 20px; font-weight: 600;  margin-bottom: 20px; transition: all 0.3s ease; }
.main-business .area3 .content-item .swiper-slide a .img-box { width: 140px; height: 83px; }
.main-business .area3 .content-item .swiper-slide a .img-box img { object-fit: cover; width: 100%; height: 100%; transform:scale(1.01);}
.main-business .area3 .content-item .swiper-slide a .sbj { margin-bottom: 10px;  transition: all 0.3s ease; }
.main-business .area3 .content-item .swiper-slide a .desc {   transition: all 0.3s ease;}
@media (hover: hover) and (pointer: fine) {
  .main-business .area3 .content-item .swiper-slide a:hover { color: #fff;}
  .main-business .area3 .content-item .swiper-slide a:hover .desc { color: #fff;}
  .main-business .area3 .content-item .swiper-slide a:hover .img-box { position:absolute; left:0; top:0; width: 100%; height: 100%; object-fit:cover; z-index:-1; overflow:hidden;}
  .main-business .area3 .content-item .swiper-slide a:hover .img-box:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); z-index:1;  }
}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .main-business .area3 .content-item .swiper-slide a { padding: 30px;}
}

@media screen and (max-width: 768px) {
  
  .main-business .area3 .area-header { padding-top: 120px;}
  .main-business .area3 .area-btns{margin-bottom: 30px;}
  .main-business .area3 .area-btns .swiper-wrapper { justify-content: flex-start; gap: 0;}
  .main-business .area3 .content-item .swiper-slide { height: 300px;} 
  .main-business .area3 .area-btns .swiper-slide{font-size: 16px;}
  .main-business .area3 .content-item .swiper-slide a{padding:24px;}
  .main-business .area3 .content-item .swiper-slide a .img-box{width: 80px; height:50px;}
  .main-business .area3 .content-item .swiper-slide a .label{font-size: 16px; margin-bottom: 10px; display:block; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis;}
  .main-business .area3 .content-item .swiper-slide a .sbj{font-size: 24px; margin-bottom: 6px;}
}

/* main-news */
.main-news {position: relative; padding: 160px 0;}
.main-news::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; max-width:765px; height: 100%; background: url(/images/main/news-bg.png) no-repeat left bottom 20%  / contain; z-index: -1;}
.main-news .news-header { padding-bottom: 30px; border-bottom: 1px solid #E8E8E8;}
.main-news .news-header .heading{font-size: 80px;}
.main-news .news-content { position: relative;} 
.main-news .news-content .inner { display: flex;}
.main-news .news-content .inner > div { flex: 1 0 0; padding-top: 50px;}
.main-news .news-content .inner .left { position: sticky; top: 0; height: max-content; }
.main-news .news-content .inner .left .text { font-size: 22px; font-weight: 500; margin-bottom: 40px;}
.main-news .news-content .inner .right { flex: 0 0 52%;}
.main-news .news-content .inner .right .news-list { display: flex; flex-wrap:wrap; gap: 40px;}
.main-news .news-content .inner .right .news-list article{width:calc(50% - 20px);}
.main-news .news-content .inner .right .news-list figure { margin-bottom: 20px; padding-bottom: 120%;}
.main-news .news-content .inner .right .news-list figure img{transition:all ease .35s;}
.main-news .news-content .inner .right .news-list a:hover figure img{transform:scale(1.05);}
.main-news .news-content .inner .right .news-list .sbj { font-size: 22px; font-weight: 600; margin-bottom: 22px; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word; }
.main-news .news-content .inner .right .news-list .year { font-size: 16px; color: #999; }
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .main-news .news-content .inner { flex-wrap: wrap;}
  .main-news .news-content .inner .right { flex: 0 0 100%;}
}

@media screen and (max-width: 768px) {
  .main-news { padding: 80px 0 120px;}
  .main-news .news-content .inner > div { padding-top: 30px;}
  .main-news .news-content .inner .left { position: static;}
  .main-news .news-content .inner .left .text { font-size: 18px; margin-bottom: 20px;}
  .main-news .news-content .inner .right .news-list { flex-direction:column;;}
  .main-news .news-content .inner .right .news-list article{width: 100%;}
  .main-news .news-content .inner .right .news-list figure { padding-bottom: 70%;}
  .main-news .news-content .inner .right .news-list .sbj { font-size: 18px; margin-bottom: 10px;}
  .main-news .news-header .heading{font-size: 40px;}
  .main-news::before{background-position:left bottom -10%; opacity:.5;}
}