:root {--deep-blue: #08265a; --deep-gold: #85652f; --green: #099e96; --text: #222; --gold: #ddb575; --gray:#bbbbbb; --white: #ffffff;}
input,button,select,textarea{ outline:none;font-family:"Microsoft JhengHei", 'Helvetica','arial','sans-serif';resize:none;border:0;color:#595757;font-size:14px}
i,em{ font-style:normal;}
input[type="button"], input[type="submit"], input[type="reset"],input[type="text"],input[type="email"],input[type="tel"] {-webkit-appearance: none;padding: 12px 12px;margin:0;font-weight:normal; display: block;}
ul,li,dl,dt,dd,p { padding: 0; margin: 0; list-style:none;}
h1,h2,h3,h4,h5 { padding: 0; margin: 0; font-weight:normal}
img {border:0px; height:auto; padding:0; display:inline-block; vertical-align:middle; max-width:100%;transition:all .5s; -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s;}
/*字体大小*/
* { box-sizing: border-box; margin: 0; padding: 0;}
body { font-family: "Microsoft JhengHei", 'Helvetica', Arial, sans-serif; font-size:14px; color: var(--text); background: #f5f9fc; line-height: 1.8;}
a { text-decoration: none; color: inherit;}
.flex{display: flex;}
.w-img { width: 50px; display: block;}
.w-font {width:calc(100% - 50px);}

header { position: sticky; top: 0; z-index: 20; background:var(--white); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(23,61,53,0.12);}
.nav { display: flex; justify-content: space-between; align-items: center; height: 90px;}
.brand {display: flex; align-items: center; gap:15px;}
.brand .logo{background: url(../images/logo.png) no-repeat; background-size: 100%; width:180px; height:45px; display: block;}
.brand .logo2{background: url(../images/logo2.png) no-repeat; background-size: 100%; width:65px; height:65px; display: block;}
.brand em {width: 1px; height: 45px; background: #b6cbdb;}

.menubtn { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 22px; cursor: pointer; background: transparent; border: none; z-index: 110;}
.menubtn span { width: 100%; height: 2px; background-color: var(--deep-blue); border-radius: 2px; transition: all 0.3s ease-in-out;}
.nav-menu{display: flex; align-items: center; gap:40px;}
.nav-menu ul { display: flex; gap: 40px; list-style: none;}
.nav-menu ul li a {text-align: center; text-decoration: none; display: block; line-height: 1.4; font-size: 16px; font-weight: 500; color: var(--deep-blue); transition: color 0.2s ease; padding:8px 0 5px; border-bottom: 2px solid transparent; }
.nav-menu ul li a:hover,.nav-menu ul li.on,.nav-menu ul li.on a { color: var(--deep-blue); border-bottom-color: var(--deep-blue);}
.menubtn { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 22px; cursor: pointer; background: transparent; border: none; z-index: 110;}
.menubtn span { width: 100%; height: 2px; background-color: var(--deep-blue); border-radius: 2px; transition: all 0.3s ease-in-out; }
.nav-menu .lang{display: flex; gap:8px;}
.nav-menu .lang .active{background-color: #08265a; border: 1px solid #08265a; color:#fff;}
.nav-menu .lang a{border: 1px solid #cbdde8; background-color: #fff; color:#08265a; border-radius: 4px; padding:1px 9px; display: block;}
.container { max-width: clamp(75rem, 90vw, 87.75rem); margin:0px auto;}

.yewulist {display: grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
.yewulist .item a {display: block;position: relative;overflow: hidden;border-radius: 10px;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease;}
.yewulist .item .pic {overflow: hidden;position: relative;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease;}
.yewulist .item .pic::after {content: '';width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: linear-gradient(0deg, #03275d99 0%, #03275d26 60%, transparent);z-index: 2;}
.yewulist .item .pic img {display: block;width: 100%;height: auto;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease;}
.yewulist .item .txt {position: absolute;left: 30px;right:25px;bottom: 25px;z-index: 1;color: #fff;z-index: 10;}
.yewulist .item a:hover .pic {transform: scale(1.05);}
.yewulist .item a:hover .pic::after {opacity: .7;}

.jiantou {position: absolute;right: 30px;bottom: 25px;z-index: 10;} 
.jiantou i {width: 40px;height: 40px;border-radius: 100%;display: block;position: relative;overflow: hidden;border: 2px solid #fff;}
.jiantou i::before,.jiantou i::after {content: '';width: 20px;height: 20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background: url('../images/rjt003.svg') center no-repeat;background-size: 80%;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease;}
.jiantou  i::after {margin-left: -32px;}
.yewulist .item a:hover .jiantou i::before {margin-left: 32px;}
.yewulist .item a:hover .jiantou i::after {margin-left: 0px;}

.mainitem{display:flex; flex-direction: column; gap:60px;}
.mainitem .itemlist{display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.mainitem .itemlist:nth-child(2n) {flex-direction: row-reverse;}
.mainitem .itemlist-lt{width:48%;}
.mainitem .itemlist-lt.contact-img{border-radius: 30px 0 50px 0; overflow: hidden; width: 45%;}
.mainitem .itemlist-rt{width:48%;}

.pt-40{padding-top:40px;}
.pt-30{padding-top:25px;}
.pt-20{padding-top:15px;}
.pt-10{padding-top:10px;}
.text-base{font-size:16px;}
.text-xl{font-size:20px;}
.text-xxl{font-size:30px;}
.text-3xl{font-size:36px;}
.text-4xl{font-size:48px;}
.py-30{padding:30px 0;}
.py-80{padding:80px 0;}
.pb-80{padding-bottom:80px;}

.aboutcon{display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap;}
.aboutcon .aboutcon-lt{width:520px; padding:10px 0;}
.aboutcon .aboutcon-rt{width:calc(100% - 520px);}
.aboutcon p{padding:10px 0;}
.vision{background-color: var(--deep-blue); min-height: 500px; display: flex; align-items: center; text-align: center;}
.text-gold{color:var(--gold);}
.text-white{color:var(--white);}
.text-gray{color:var(--gray);}
.text-green{color:var(--green)}
.text-blue{color:var(--deep-blue)}
.line-base{line-height: 1.5;}

.gold-line{height: 1px; background-color: var(--gold); width:80px; margin: 0px auto 30px;}
.max-80{max-width:80%; margin:0 auto; line-height: 1.8;}
@media screen and (max-width: 1280px) {
    .container { max-width: 92%;}
}
.banner{overflow: hidden; width:100%;position: relative;}
.banner:before {content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(0deg, #03275daa 0%, #03275d26 100%, transparent); z-index: 0; position: absolute; top: 0; left: 0;}
.banner img {width: 100%;}
.pc-img { display: block; margin: 0 auto;}
.mob-img { display: none; margin: 0 auto;}

.banner .container{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%;}
.hero {position: absolute; left:0; top:50%; transform: translateY(-50%); text-align: center; width: 100%; z-index: 1;}
h1 { line-height: 1.2; color: var(--white); margin-bottom: 20px;}
.hero h1{/*font-family: "Times New Roman", Georgia, serif;*/ font-weight: bold; animation: bannertexttop 1s ease both 400ms;}
.tagline { color: var(--white); animation: bannertextdow 1s ease both 600ms;}
.subcopy { max-width: 800px; color: var(--white); animation: bannertextdowbig 1s ease both 800ms;}
@keyframes bannertextright {0% {transform: translateX(-80px);opacity: 0;}100% {transform: translateX(0);opacity: 1;}}
@keyframes bannertextdow {0% {transform: translateY(40px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}}
@keyframes bannertextdowbig {0% {transform: translateY(60px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}}
@keyframes bannertexttop {0% {transform: translateY(-40px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}}

.nybanner{height:22.6565vh;position:relative;overflow:hidden;}
.nybanner:before {content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(0deg, #03275daa 0%, #03275d26 100%, transparent); z-index: 0; position: absolute; top: 0; left: 0;}
.nybanner img{width:100%;height:100%;object-fit:cover}

.btn { padding: 10px 35px; margin-top: 30px; border-radius: 999px; transition: all 0.2s ease; display: inline-block; line-height: 1.4; cursor: pointer;}
.btn-primary {color: var(--text); border:1px solid var(--deep-blue);}
.btn-secondary { border: 1px solid var(--gray); color: var(--gray);}
.btn:hover { transform: translateY(-2px);}
.btn.btn-primary:hover{background-color: var(--white); color:var(--deep-blue);}
.btn.btn-secondary:hover{border:1px solid var(--white); color:var(--white);}

footer { background: var(--deep-blue); color: rgba(255,255,255,0.72); padding:25px 0;}
.copyright {display: flex; justify-content: space-between;}
.copyright-lt a{text-decoration: underline;}
@media (max-width: 1024px) {
.container { max-width: 100%; margin:0 3%;}
.nav { height: 60px;}
.brand {display: flex; align-items: center; gap:10px;}
.brand .logo{width:140px; height:35px;}
.brand .logo2{width:35px; height:35px;}
.brand em {height: 35px;}

.nav-menu .lang{gap:20px;}
.nav-menu .lang a{padding:3px 15px;}

.nav-menu{flex-direction: column;}
.menubtn {display: flex;}
.nav-menu {position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; background: rgba(248, 245, 239, 0.98); backdrop-filter: blur(20px); transition: left 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1); z-index: 105;}
.nav-menu ul{flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding-top:100px;}
.nav-menu.active {left: 0;}
.nav-menu li a { font-weight: 500; color: #173d35; padding: 12px; display: inline-block;}
.menubtn.active span:nth-child(1) {transform: translateY(10px) rotate(45deg);}
.menubtn.active span:nth-child(2) {opacity: 0;}
.menubtn.active span:nth-child(3) {transform: translateY(-10px) rotate(-45deg);}
.pc-img { display: none;}
.mob-img { display: block;}
.hero { grid-template-columns: 1fr;}

.yewulist {display: grid; grid-template-columns:repeat(1, 1fr); gap:15px;}
.yewulist .item .txt {position: absolute;left: 15px;right:15px;bottom: 15px;}
.jiantou {position: absolute;right: 15px;bottom: 15px;z-index: 10;} 
.w-img { width: 35px; display: block;}
.w-img img{width:22px;}
.w-font {width:calc(100% - 35px);}
.mainitem{display:flex; flex-direction: column; gap:20px;}
.mainitem .itemlist{ flex-direction: column;}
.mainitem .itemlist:nth-child(2n) { flex-direction: column;}
.mainitem .itemlist-lt{width:100%; border-radius: 6px; overflow: hidden;}
.mainitem .itemlist-lt.contact-img{border-radius: 0; overflow: hidden; width: 100%; padding-bottom:20px;}
.mainitem .itemlist-rt{width:100%; padding-top:20px;}
.pt-40{padding-top:20px;}
.pt-30{padding-top:15px;}
.pt-20{padding-top:10px;}
.pt-10{padding-top:10px;}
.text-base{font-size:14px;}
.text-xl{font-size:16px;}
.text-xxl{font-size:16px;}
.text-3xl{font-size:18px;}
.text-4xl{font-size:22px;}
.itemlist-rt .text-xxl{font-size:18px;}
.aboutcon{flex-direction: column;}
.aboutcon .aboutcon-lt{width:100%; padding:10px 0;}
.aboutcon .aboutcon-rt{width:100%;}
.aboutcon p{padding:8px 0;}
.vision{min-height: auto; justify-content: center; padding:40px 0;}
.py-30{padding:15px 0;}
.py-80{padding:20px 0;}
.pb-80{padding-bottom:25px;}
.gold-line{width:50px; margin: 0px auto 20px;}
.max-80{max-width:100%; margin:0 auto; line-height: 1.8;}
.nybanner{height:16.6565vh;}
.btn { padding: 5px 20px; margin-top: 20px; font-size:14px;}
.jiantou {display: none;}
footer {padding: 20px 0;}
.copyright {text-align: center; flex-direction: column; gap:10px}
.copyright-lt,.copyright-rt{width:100%}
}