.main .Tit {font-size: 4.375rem; line-height: 1.1; font-family: var(--pointfont); font-weight: 900; text-transform: uppercase;}

.ZT_Btn {pointer-events: auto; cursor: pointer; background: var(--pointcolor); width: fit-content; border: 1.5px solid var(--pointcolor); padding: 1rem 2rem; position: relative; display: flex; align-items: center; gap: 1rem; border-radius: 50px; overflow: hidden; color: #fff; transition: color 0.3s ease;}
.ZT_Btn span {position: relative; z-index: 2; font-size: 1.375rem; text-transform: uppercase; font-family: var(--pointfont); font-weight: 700;}
.ZT_Btn:hover span {color: #fff;}
.ZT_Btn::before {content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: #000; transition: transform 0.3s cubic-bezier(0.3, 0, 0.2, 1), top 0.5s cubic-bezier(0.3, 0, 0.2, 1); z-index: 1;}
.ZT_Btn:hover::before {top: 0;}

.ZT_Btn.Wh {background-color: transparent; color:var(--pointcolor)}
.ZT_Btn.Wh::before {background-color: var(--pointcolor);}


.DotBtn {display: flex; align-items: center; gap:1rem; position: absolute; right:2rem; bottom:2rem; color:var(--pointcolor); font-weight: 600;}
.DotBtn .Dot {width: 3.25rem; height: 3.25rem; border-radius: 50%; background-color: var(--pointcolor); display: flex; align-items: center; justify-content: center;}
.DotBtn .Dot > img {width: .75rem;}

.main .Inner {max-width: 1700px; margin: auto;}
@media(max-width:1720px) {
    .main .Inner {width: 95%;}
}


/* visual */
#visual {position: relative; height: 100vh; background: var(--pointcolor); overflow: hidden;}
#visual .visual-inner {position: relative; width: 100%; height: 100%;}
#visual .TitBox {position: absolute; top: 20rem; left: 4rem; transform: translateY(-50%); z-index: 10;}
#visual .Tit {margin: 0; font-size: 4.5vw; font-weight: 900; line-height: 1.1; color: #fff; text-transform: uppercase;}
#visual .zetec {width: 18rem;margin-top: 20px;}
#visual .video-wrap {position: absolute; right: 4rem; bottom: 4rem; width: 600px; height: 338px; overflow: hidden; z-index: 3; transform-origin: top left;}
#visual .visualPlayer {width: 100%; height: 100%; object-fit: cover; display: block; }


@media (max-width: 1024px) {
    #visual {position: relative; width: 100%; height: 100vh; overflow: hidden; padding: 0;}
    #visual .visual-inner {position: relative; width: 100%; height: 100%;}
    #visual .video-wrap {position: absolute; right: 3rem; bottom: 3rem; max-width: 78vw; width: 100%; height: auto; aspect-ratio: 600 / 338; overflow: hidden; border-radius: 0.75rem; z-index: 3; transform-origin: top left;}
}
@media (max-width: 500px) {
    #visual .video-wrap {bottom:5rem;}
}

#main_Desc {background-color: #fff; z-index: 3; position: relative;}


/* product */
#product {padding-top: 4rem;}
#product .TitFelx {display: flex; gap:2rem; align-items: flex-end; justify-content: space-between;}

#product .productTab ul {display: flex; align-items: center; gap:2rem; width: 100%; border-top:2px solid var(--pointcolor); margin-top: 2rem;}
#product .productTab ul li a {padding: 1.2rem 2rem 2rem; font-size: 1.125rem; letter-spacing: 0; display: block; color:var(--pointcolor); font-weight: 800; opacity: .5; position: relative;}
#product .productTab ul li.active a:after {content:''; width: .5rem; height: .5rem; border-radius: 50%; background-color: var(--pointcolor); position: absolute; bottom:1rem; left: 50%; transform: translateX(-50%);}
#product .productTab ul li.active a {opacity: 1;}

#product .product_wrapper {display: flex; position: relative; gap:20px; width: 100%; overflow: hidden;}
#product .productSlide1 {width: 50%;flex-shrink: 0; overflow: hidden;}
#product .productSlide2 {width: 25%;flex-shrink: 0; overflow: hidden;}
#product .productSlide3 {width: 25%;flex-shrink: 0; overflow: hidden;}
#product .swiper-slide {background-color: #f5f5f5;}
#product .bg {height: 40.625rem; width: 100%; background: no-repeat center / contain;}

#product .TxtBox {position: absolute; top:0; left: 0; width: 100%; height: 100%; font-size: 1.125rem;}
#product .TabTit {font-weight: 700; color:var(--pointcolor); position: absolute; left: 2rem; top:2rem;}

#product .productSlide2 .TxtBox, #product .productSlide3 .TxtBox {display: none;}

#product .productSlide .bg.bg-1 {background-image:url('/img/main/product_cmm01.jpg')}
#product .productSlide .bg.bg-2 {background-image:url('/img/main/product_cmm02.jpg')}
#product .productSlide .bg.bg-3 {background-image:url('/img/main/product_cmm03.jpg')}
#product .productSlide .bg.bg-4 {background-image:url('/img/main/product_cmm04.jpg')}
#product .productSlide .bg.bg-5 {background-image:url('/img/main/product_cmm05.jpg')}
#product .productSlide .bg.bg-6 {background-image:url('/img/main/product_cmm06.jpg')}
#product .productSlide .bg.bg-7 {background-image:url('/img/main/product_cmm07.jpg')}

#product .productSlide .bg.bg-8 {background-image:url('/img/main/product_X-ray01.jpg')}
#product .productSlide .bg.bg-9 {background-image:url('/img/main/product_X-ray02.jpg')}

#product .productSlide .bg.bg-10 {background-image:url('/img/main/product_microscope01.jpg')}
#product .productSlide .bg.bg-11 {background-image:url('/img/main/product_microscope02.jpg')}

#product .Line {width: 100%; height: 2px; background-color: var(--pointcolor); margin-top: 1rem;}

@media(max-width:768px) {
    #product .TitFelx {flex-direction: column; align-items: flex-start;}

    #product .productSlide1 {width: 70%;}
    #product .productSlide2 {width: 30%;}
    #product .productSlide3 {display: none;}
}
@media(max-width:500px) {
    #product .productSlide1 {width: 100%;}
    #product .productSlide2 {display: none;}
}

/* services */
#services {padding: 7rem 0;}
#services .Inner {display: flex; gap: 4rem 2rem;}

#services .TxtBox {width: 45%;}
#services .DescBox {width: 55%;}
#services .ZT_Btn {margin-top: 7.5rem;}

#services .box {color:var(--pointcolor); aspect-ratio: 1 / 1; position: relative; border:2px solid var(--pointcolor); padding: 3rem; border-radius: 1.875rem; transition:.3s}
#services .box.on {background-color: var(--pointcolor); color:#fff; transition:.3s}
#services .box.on .servicesSvg {filter: invert(1) brightness(5);}

#services .box .Dot {background-color: var(--pointcolor);}
#services .box.on .Dot {background-color: #fff;}
#services .box .Dot > img {filter: invert(1) brightness(5); transform: rotate(180deg); transition: .3s;}
#services .box.on .Dot > img {filter: none; transform: rotate(0deg); transition: .3s;}

#services .DescTit {font-weight: 800; text-transform: uppercase; font-size: 1.375rem;}
#services .box .Line {width: 0; height: 1px; background-color: var(--pointcolor); margin: 1rem 0; transition: .3s;}
#services .box.on .Line {width: 100%; background-color: #fff; transition: .3s;}
@media(max-width:990px) {
    #services .Inner {flex-direction: column;}
    #services .ZT_Btn {margin-top: 2.5rem;}
    #services .TxtBox, #services .DescBox {width: 100%;}
    #services .flexList {--x-gap:1rem; --y-gap:1rem;}
    #services .box {padding: 3rem 1.5rem;}
    #services .box .servicesSvg {width: 1.4375rem;}
}
@media(max-width:500px) {
    #services .box {aspect-ratio: 20 / 27;}
}




/* online */
#online {background-color: var(--pointcolor); padding: 3.125rem 0;}
#online .Inner {display: flex; align-items: center; gap:4rem 2rem;}

#online .onlineSwiper {overflow:hidden;position:relative;max-width:960px; width: 100%; height: 50rem; padding: 0;}
#online .onlineSwiper .swiper-slide {height:100%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .3s}
#online .onlineSwiper .swiper-slide-active {transform:skew(0)}
#online .bg {position:absolute;left:0;top:0;width:100%;height:100%;background: 40% no-repeat;background-size:cover}
#online .bg.bg-1 {background-image:url('/img/main/online01.jpg')}
#online .bg.bg-2 {background-image:url('/img/main/online02.jpg')}

#online .ZT_Btn {max-width: 19.125rem; width: 100%; justify-content: center;}
#online .ZT_Btn::before {background-color: #1b1b5f;}

#online .ZT_Btn.On {border-color:#fff;}
#online .ZT_Btn.On2 {border-color:#fff; background-color: rgba(255,255,255,.1);}

@media(max-width:768px) {
    #online .Inner {flex-direction: column;}
    #online .TxtBox {order:-1; justify-content: flex-start;}
    #online .onlineSwiper {aspect-ratio: 96 / 80; height: auto;}
}


footer  {border-top:1px solid #000;}
footer .footerLogo {margin: 4rem auto; width: 16.875rem;}
footer .TxtBox {background-color: #000; padding: 5rem 0 6rem; line-height: 1.6; letter-spacing: 0;}
footer .Inner {max-width: 1700px; margin: auto;}
footer .box.Left span {padding: 0 1rem;}

footer .box.Right {text-align: right; display: flex; flex-direction: column;} 
footer .admin {margin-left: auto; width: 1.5rem; opacity: .6;}
footer .admin:hover {opacity: 1;}
footer a {color:#fff;}

@media(max-width:1720px) {
    footer .Inner  {width: 95%;}
}
@media(max-width:768px) {
    footer .box.Right {text-align: left; gap:.5rem;} 
    footer .admin {margin-left: 0; order:2;}
    footer .footerLogo {width: 14rem;}
}