@charset "utf-8";
@import url('https://font.sec.miui.com/font/css?family=MiSans:200,300,400,450,500,600,650,700:Chinese_Simplify,Latin&display=swap');
@import url("swiper-bundle.css");
@import url("../iconfont/iconfont.css");

/* 
    Author:Kelp;
    Date:2026-05-27;
*/

:root{
	--vi-color:#104532;	/*--VI色--*/
}

@font-face{
    font-family: "DIN Medium";
    src:url('../fonts/DIN-Medium.woff') format('woff');
    font-style: normal;
}

/*-- reset --*/
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size:13px;}
html *{outline:0;-webkit-text-size-adjust:none;box-sizing:border-box; }
body{font:300 1.6rem/1.25 "MiSans","Arial Narrow",HELVETICA;overflow-x:hidden;background-color:#fff}
body,div,span,a,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;box-sizing:border-box}
h1,h2,h3,h4,h5,h6{font-family:"MiSans";font-weight:600;}
a{text-decoration:none}
a:focus{outline:none};
a:hover{color:var(--vi-subcolor);text-decoration:none}
img{height:auto;border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word;}
em,b{font-style:normal;}
i{font-style:normal;}
table{border-collapse:collapse;border-spacing:0}
table th,table td{padding:5px;}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none;}
caption,th{text-align:left}
q:before,q:after{content:''}
abbr,acronym{border:0}
p{word-spacing:-1.5px}
li{list-style:none;}
sup{vertical-align:baseline}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;outline:none;font-style:inherit;font-weight:inherit}
input,button,textarea,select{font-size:100%}
input,select{vertical-align:middle}
select,input,button,textarea,button{font:100% "MiSans","Arial Narrow",HELVETICA}
table{font-size:14px;width:100%;border-collapse:collapse}
pre,code,kbd,samp,tt{font-family:monospace;font-size:100%;line-height:100%}
*:before,*:after{box-sizing:border-box;}
.container{margin: 0 auto; width: 80%;}
@media(max-width:2560px){
html{font-size: 11px;}
}
@media(max-width:1920px){
html{font-size: 10px;}
}
@media(max-width:1600px){
html{font-size: 9px;}
}
@media(max-width:1500px){
html{font-size: 8px;}
}
/*-- end reset --*/

/*-- header --*/
.header{position: absolute; z-index: 999; top: 0; left: 0;padding: 3.8rem 4.4rem; width: 100%; display: flex; align-items: center; justify-content: space-between; transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1);}
.header .logo{flex: none; width: 30rem;}
.header .logo img{display: block; width: 100%;}
.header .nav{flex: none;}
.header .nav .nav-list{display: flex; gap: 6rem;}
.header .nav .nav-list li{position: relative; font-size: 1.8rem;}
.header .nav .nav-list li::after{display: block; position: absolute; left: 0; top: 0; width: 3.6rem; height: .2rem; content: ""; opacity: 0; background-color: #fff; transform: scaleY(0); transform-origin:0 100%; transition: all .25s cubic-bezier(1, 0, 0, 1);}
.header .nav .nav-list li>a{display: block; padding: 1rem 0; color: #fff;}
.header .nav .nav-list li:hover::after,.header .nav .nav-list li.cur::after{top: 100%; opacity: 1; transform: scaleY(1) translateY(-100%);}
.header.affix{position: fixed; padding: 1.5rem 4.4rem; background-image:linear-gradient(rgba(0,0,0,.55) 10%, rgba(0,0,0,.15)) ; backdrop-filter: blur(5px);}
.nav-toggle{display: none;}
/*-- end header --*/

/*-- dropDown --*/
.dropDown{position: absolute; top: 100%; left: 0; min-width: 100%; overflow: hidden; background: rgba(0,0,0,.15); backdrop-filter: blur(5px); clip-path: inset(0 0 100% 0); opacity: 0; transition: all .5s;}
.dropDown a{display: block; padding: 1rem 1.5rem; font-size: 1.6rem; white-space: nowrap; color: #fff; transition: all .5s;}
.dropDown a:hover{background-color: var(--vi-color);}
.active .dropDown{clip-path: inset(0 0 0 0); opacity: 1;} 
/*-- end dropDown --*/

/*-- contact --*/
.contact{padding: 20rem 0; overflow: hidden; background: url('../images/common/contact_us_bg.jpg') center / cover;}
.contact-title{display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; clip-path: inset(0 0 100% 0); transition: all 1s;}
.contact-title h2{font-size: 4.8rem; font-weight: 700; color: #fff;}
.contact-title em{display: block; font-size:5.6rem; color: #fff; font-weight: 700;}
.contact-inner{padding-top: 2rem; overflow: hidden;}
.contact-inner .liner{width: 100%; height: 2px; background-image: linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,0) );}
.contact.active .contact-title{clip-path: inset(0 0 0 0);}
/*-- end contact --*/

/*-- footer --*/
.footer{padding: 17.5rem 0; overflow: hidden; background-color: var(--vi-color);}
.footer-logo{width: 30rem;}
.footer-logo img{display: block; width: 100%;}

.footer-menu{padding: 10rem 0; display: flex; flex-wrap: wrap; overflow: hidden; border-bottom: rgba(255,255,255,.1) solid 1px;}
.footer-menu .item{margin: 0 auto;}
.footer-menu .item h3{font-size: 2.4rem;}
.footer-menu .item h3 a{color: #fff;}
.footer-menu .item h3 a:hover{opacity: .9;}
.footer-menu .item .list{margin-top: 3rem;}
.footer-menu .item .list li{margin-bottom: 2rem; font-size: 2.2rem; font-weight: 300;}
.footer-menu .item .list li a{color: #fff; opacity: .8;}
.footer-menu .item .list li a:hover{opacity: 1;}
.footer-menu .item:first-child{margin-left: 0;}
.footer-menu .item:last-child{margin-right: 0;}

.footer-contact{padding-top: 10rem; display: flex; justify-content: space-between; overflow: hidden;}
.footer-contact .qrcode-wrap{display: flex; gap: 5rem;}
.footer-contact .qrcode-wrap .item{width: 10rem;}
.footer-contact .qrcode-wrap .item i{display: block; width: 10rem; height: 10rem; background-color: #fff; overflow: hidden;}
.footer-contact .qrcode-wrap .item i img{display: block; width: 100%;}
.footer-contact .qrcode-wrap .item p{margin-top: 2rem; color: #fff; text-align: center;}
.footer-contact .info-wrap{display: flex; flex-direction: column; gap: 5rem;}
.footer-contact .info-wrap .item{display: flex; gap: 4rem; color: #fff;}
.footer-contact .info-wrap .item .icon{display: flex; align-items: center; justify-content: center; width: 5.6rem; height: 5.6rem;}
.footer-contact .info-wrap .item .iconfont{display: block; font-size: 5rem;}
.footer-contact .info-wrap .item .text{overflow: hidden;}
.footer-contact .info-wrap .item .text span{display: block; margin-bottom: .5rem; font-size: 1.4rem; opacity: .8;}
.footer-contact .info-wrap .item .text em{display: block; font-size: 3.2rem;}
.footer-contact .info-wrap .item .text p{font-size: 1.8rem; opacity: .8;}
/*-- end footer --*/

/*-- player-wrap --*/
.player-wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.75); backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 1000;}
.player-inner{position: relative; max-width: 90%; max-height: 90%; background-color: #fff;}
.player-inner video {display: block; max-width: 100%; max-width: 100%; }
.player-inner .close{position: absolute; top: 1.5rem; right: 1.5rem; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; font-size: 1.4rem; color: #fff; cursor: pointer; background-color: rgba(255, 255, 255, 0.25); border-radius: 50%;}
.player-inner .close:hover{background-color: var(--vi-color);}
/*-- end player-wrap --*/

/*-- section-title --*/
.section-title{position: relative; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; clip-path: inset(0 0 100% 0); transition: all 1s;}
.section-title::after{display: block; position: absolute; left: 0; bottom: 0; width: 8rem; height: 1px; content: ""; background-color: var(--vi-color);}
.section-title h2{font-size: 4.8rem; font-weight: 700; color: #222;}
.section-title em{display: block; padding-bottom: 2rem; font-size:5.6rem; color: var(--vi-color); font-weight: 700; text-transform: uppercase}
section.active .section-title{clip-path: inset(0 0 0 0);}
/*-- end section-title --*/

/*--mask--*/
.mask{position: fixed; z-index: 999; left: 0; top: 0; inset: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.8);}

.modal-wrap{position: fixed; z-index: 1000; top: 30%; left: 50%; padding: 3rem; width: 52rem; overflow: hidden; transform: translateX(-50%); border-radius: 0.5rem; background-color: #fff;}
.modal-title{padding-bottom: 2rem; text-align: center; font-size: 2.4rem; font-weight: 600; color: #222; overflow: hidden; border-bottom: #e5e5e5 solid 1px;}
.modal-content{padding: 2rem 0; text-align: center; font-size: 1.8rem; color: #666; overflow: hidden;}
.modal-footer{display: flex; padding-top: 2rem; font-size: 1.8rem; overflow: hidden; border-top: #e5e5e5 solid 1px;}
.modal-footer a{display: block; flex: 1; text-align: center; cursor: pointer; border-right: #e5e5e5 solid 1px;}
.modal-footer a:last-child{border-right: 0;}
.modal-footer a.button-confirm{color: var(--vi-color);}
.modal-footer a.button-cancel{color: #666;}

.toast-wrap{position: fixed; z-index: 1000; top: 30%; left: 50%; padding: 3rem; width: 52rem; overflow: hidden; transform: translateX(-50%); border-radius: 0.5rem; background-color: #fff;}
.toast-title{padding-bottom: 2rem; text-align: center; font-size: 2.4rem; font-weight: 600; color: #222; overflow: hidden; border-bottom: #e5e5e5 solid 1px;}
.toast-content{padding-top: 2rem; text-align: center; font-size: 1.8rem; color: #666; overflow: hidden;}
/*--end mask--*/

@media(max-width:1200px){
.container{width: 88%;}
.header{position: relative; padding: 2.6rem 3rem;}
.header .nav .nav-list{gap: 3rem;}
}

@media(max-width:768px){
html{font-size: 10px;}
body{font-size: 1.5rem; line-height: 1.5;}
body.nav-open{overflow: hidden;}
.container{width: 92%;}

.header{padding: 1.2rem 1.6rem; background: rgba(16,69,50,.92); backdrop-filter: blur(8px);}
.header.affix{padding: 1.2rem 1.6rem; background: rgba(16,69,50,.92);}
.header .logo{width: 17rem;}
.header .nav{position: fixed; z-index: 1000; top: 0; right: 0; width: min(82vw, 34rem); height: 100vh; padding: 7.4rem 2rem 3rem; overflow-y: auto; background: var(--vi-color); box-shadow: -1rem 0 3rem rgba(0,0,0,.2); transform: translateX(100%); transition: transform .35s ease;}
.header.open .nav{transform: translateX(0);}
.header .nav .nav-list{display: flex; flex-direction: column; gap: 0;}
.header .nav .nav-list li{font-size: 1.7rem; border-bottom: rgba(255,255,255,.14) solid 1px;}
.header .nav .nav-list li::after{display: none;}
.header .nav .nav-list li>a{padding: 1.5rem 0; color: #fff;}
.dropDown{position: static; min-width: 0; max-height: 0; background: transparent; backdrop-filter: none; clip-path: none; opacity: 1; transition: max-height .3s ease;}
.dropDown a{padding: .9rem 1.2rem; font-size: 1.4rem; color: rgba(255,255,255,.76); white-space: normal;}
.dropDown a:hover{background-color: rgba(255,255,255,.08);}
.active .dropDown{max-height: 60rem;}

.nav-toggle{position: relative; z-index: 1001; display: flex; flex-direction: column; justify-content: center; gap: .55rem; width: 4.4rem; height: 4.4rem; border: 0; padding: 0; cursor: pointer; background: transparent;}
.nav-toggle span{display: block; width: 2.4rem; height: 2px; margin: 0 auto; background-color: #fff; transition: transform .3s ease, opacity .3s ease;}
.header.open .nav-toggle span:nth-child(1){transform: translateY(.75rem) rotate(45deg);}
.header.open .nav-toggle span:nth-child(2){opacity: 0;}
.header.open .nav-toggle span:nth-child(3){transform: translateY(-.75rem) rotate(-45deg);}

.section-title,.contact-title{display: block; clip-path: none;}
.section-title::after{width: 5rem;}
.section-title h2,.contact-title h2{font-size: 2.8rem;}
.section-title em,.contact-title em{padding-bottom: 1.2rem; font-size: 3rem; line-height: 1.2;}

.contact{padding: 8rem 0;}
.footer{padding: 6rem 0;}
.footer-logo{width: 18rem;}
.footer-menu{display: grid; grid-template-columns: 1fr; padding: 5rem 0;}
.footer-menu .item{margin: 0;}
.footer-menu .item h3{position: relative; padding: 1.4rem 3rem 1.4rem 0; font-size: 1.8rem; cursor: pointer; border-bottom: rgba(255,255,255,.14) solid 1px;}
.footer-menu .item h3::after{display: block; position: absolute; right: 0; top: 50%; content: "+"; font-size: 2.2rem; line-height: 1; color: #fff; transform: translateY(-50%) rotate(0); transition: transform .3s ease;}
.footer-menu .item.active h3::after{transform: translateY(-50%) rotate(45deg);}
.footer-menu .item .list{max-height: 0; margin-top: 0; overflow: hidden; transition: max-height .35s ease;}
.footer-menu .item.active .list{margin-top: 1.6rem;}
.footer-menu .item .list li{margin-bottom: 1rem; font-size: 1.4rem; line-height: 1.45;}
.footer-contact{display: block; padding-top: 4rem;}
.footer-contact .qrcode-wrap{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem;}
.footer-contact .qrcode-wrap .item{width: auto;}
.footer-contact .qrcode-wrap .item i{width: 100%; height: auto; aspect-ratio: 1;}
.footer-contact .qrcode-wrap .item p{margin-top: .8rem; font-size: 1.2rem;}
.footer-contact .info-wrap{gap: 2.4rem; margin-top: 4rem;}
.footer-contact .info-wrap .item{gap: 1.5rem;}
.footer-contact .info-wrap .item .icon{width: 3.8rem; height: 3.8rem;}
.footer-contact .info-wrap .item .iconfont{font-size: 3.4rem;}
.footer-contact .info-wrap .item .text em{font-size: 2.2rem;}
.footer-contact .info-wrap .item .text p{font-size: 1.5rem; line-height: 1.6;}

.player-inner{max-width: 94%; max-height: 84%;}
.modal-wrap,.toast-wrap{top: 24%; width: 90%; padding: 2rem;}
.modal-title,.toast-title{font-size: 2rem;}
.modal-content,.toast-content,.modal-footer{font-size: 1.6rem;}
}