/*
======================================
华道出海官网 V3.1
HUADAO OVERSEAS TECHNOLOGY
Enterprise Website Style System
======================================
*/


/* ==========================
基础设置
========================== */


*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

font-family:

"Microsoft YaHei",
"PingFang SC",
Arial,
sans-serif;


color:#152437;

background:#fff;

line-height:1.6;

}



img{

width:100%;

display:block;

}



a{

text-decoration:none;

color:inherit;

cursor:pointer;

}




.container{

width:1200px;

max-width:90%;

margin:auto;

}





:root{


--main-blue:#06192d;


--dark-blue:#0b2744;


--light-blue:#123c61;


--orange:#f39a20;


--orange-light:#ffb84a;


--gray:#68788c;


--light-bg:#f5f7fa;


--border:#e8edf3;


}





/* ==========================
Header
========================== */


.header{


position:fixed;

top:0;

left:0;

width:100%;


height:86px;


background:

rgba(6,25,45,.96);


z-index:999;


}



.nav-container{


height:86px;


display:flex;


align-items:center;


justify-content:space-between;


}




.logo{


display:flex;


flex-direction:column;


}



.logo-cn{


font-size:28px;


font-weight:900;


color:#fff;


letter-spacing:2px;


}



.logo-en{


font-size:12px;


letter-spacing:4px;


color:#b9c8d8;


}





.nav{


display:flex;


gap:45px;


align-items:center;


}



.nav a{


color:#dce6ef;


font-size:16px;


transition:.3s;


position:relative;


}



.nav a:hover{


color:#fff;


}




.nav a::after{


content:"";


position:absolute;


height:2px;


width:0;


background:var(--orange);


bottom:-10px;


left:50%;


transform:translateX(-50%);


transition:.3s;


}



.nav a:hover::after{


width:100%;


}



.language{


color:#fff;


font-size:14px;


border:1px solid rgba(255,255,255,.3);


padding:6px 14px;


border-radius:20px;


}






/* ==========================
Hero 首屏
========================== */



.hero{


min-height:850px;


padding-top:86px;


background:


linear-gradient(

120deg,

#06192d,

#0d3153

);



position:relative;


overflow:hidden;


color:white;


}



.hero::before{


content:"";


position:absolute;


right:-200px;


top:100px;


width:600px;


height:600px;


background:


radial-gradient(

circle,

rgba(243,154,32,.25),

transparent 65%

);


}




.hero-container{


height:760px;


display:flex;


align-items:center;


justify-content:space-between;


}




.hero-left{


width:58%;


}



.hero-tag{


color:var(--orange);


font-size:16px;


letter-spacing:6px;


margin-bottom:35px;


}



.hero h1{


font-size:70px;


font-weight:900;


line-height:1.15;


letter-spacing:2px;


margin-bottom:35px;


}




.hero-desc{


font-size:20px;


color:#d1dce8;


line-height:2;


max-width:650px;


}





.hero-buttons{


display:flex;


gap:20px;


margin-top:45px;


}



.btn-primary{


display:inline-block;


background:var(--orange);


padding:16px 38px;


border-radius:6px;


color:white;


font-weight:bold;


transition:.3s;


}



.btn-primary:hover{


background:#ffad35;


transform:translateY(-3px);


}





.btn-secondary{


display:inline-block;


border:

1px solid rgba(255,255,255,.5);


padding:16px 38px;


border-radius:6px;


color:white;


transition:.3s;


}



.btn-secondary:hover{


background:white;


color:#06192d;


}







/* ==========================
Hero右侧信息卡
========================== */


.hero-right{


width:35%;


}




.hero-panel{


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.18);


border-radius:24px;


padding:35px;


backdrop-filter:blur(12px);


}



.panel-item{


padding:25px 0;


border-bottom:

1px solid rgba(255,255,255,.15);


}



.panel-item:last-child{


border:none;


}




.panel-number{


font-size:36px;


font-weight:900;


color:var(--orange);


}



.panel-item h3{


font-size:24px;


margin:8px 0;


}



.panel-item p{


color:#c6d4e2;


}







/* ==========================
数据区域
========================== */


.stats{


background:#09233d;


color:white;


}



.stats-grid{


display:grid;


grid-template-columns:repeat(4,1fr);


}



.stat-item{


padding:40px;


text-align:center;


border-right:

1px solid rgba(255,255,255,.15);


}



.stat-item:last-child{


border:none;


}



.stat-item h2{


font-size:48px;


color:var(--orange);


font-weight:900;


}



.stat-item p{


margin-top:10px;


color:#c8d5e3;


}
/* ==========================
通用标题
========================== */


.section-title{


text-align:center;


margin-bottom:60px;


}



.section-title span{


font-size:14px;


letter-spacing:5px;


color:var(--orange);


font-weight:bold;


}



.section-title h2{


margin-top:15px;


font-size:42px;


font-weight:900;


color:#152437;


}



.section-title p{


margin-top:20px;


font-size:18px;


color:var(--gray);


}





/* ==========================
市场模块
========================== */


.market{


padding:100px 0;


background:white;


}




.market-grid{


display:grid;


grid-template-columns:repeat(2,1fr);


gap:40px;


}




.market-card{


background:white;


border-radius:20px;


overflow:hidden;


box-shadow:

0 15px 40px rgba(0,0,0,.08);


transition:.35s;


}




.market-card:hover{


transform:translateY(-10px);


box-shadow:

0 25px 50px rgba(0,0,0,.12);


}




.market-card img{


height:320px;


object-fit:cover;


}




.market-content{


padding:35px;


}



.country{


font-size:22px;


font-weight:bold;


color:var(--orange);


margin-bottom:15px;


}




.market-content h3{


font-size:30px;


margin-bottom:15px;


}



.market-content p{


font-size:16px;


line-height:1.9;


color:var(--gray);


}




.market-content a{


display:inline-block;


margin-top:20px;


color:var(--orange);


font-weight:bold;


}







/* ==========================
解决方案
========================== */



.solution{


padding:100px 0;


background:#f5f7fa;


}




.solution-grid{


display:grid;


grid-template-columns:repeat(4,1fr);


gap:25px;


}




.solution-card{


background:white;


padding:35px;


border-radius:18px;


border:1px solid #edf1f5;


transition:.3s;


}



.solution-card:hover{


transform:translateY(-8px);


box-shadow:

0 15px 35px rgba(0,0,0,.08);


}




.solution-card .icon{


width:55px;


height:55px;


display:flex;


align-items:center;


justify-content:center;


background:

rgba(243,154,32,.15);


color:var(--orange);


border-radius:12px;


font-weight:900;


font-size:22px;


margin-bottom:25px;


}




.solution-card h3{


font-size:24px;


margin-bottom:15px;


}



.solution-card p{


color:var(--gray);


line-height:1.8;


}







/* ==========================
企业体系
========================== */


.company{


padding:100px 0;


background:white;


}





.company-wrapper{


display:grid;


grid-template-columns:1fr 1fr;


gap:70px;


align-items:center;


}



.company-image img{


height:500px;


object-fit:cover;


border-radius:20px;


}




.company-content h2{


font-size:45px;


line-height:1.3;


margin-bottom:30px;


}




.section-tag{


color:var(--orange);


letter-spacing:4px;


font-size:14px;


margin-bottom:20px;


}



.company-content p{


font-size:18px;


color:var(--gray);


line-height:2;


margin-bottom:15px;


}




.company-list{


margin-top:35px;


}



.company-list div{


display:flex;


align-items:center;


gap:20px;


margin-bottom:20px;


}



.company-list strong{


font-size:28px;


color:var(--orange);


}



.company-list span{


font-size:18px;


}






/* ==========================
商业链路体系
========================== */


.system{


padding:100px 0;


background:#f5f7fa;


}




.system-grid{


display:flex;


align-items:center;


justify-content:center;


gap:30px;


}




.system-card{


background:white;


padding:40px;


width:300px;


text-align:center;


border-radius:18px;


box-shadow:

0 10px 30px rgba(0,0,0,.06);


}



.system-card h3{


font-size:25px;


margin-bottom:20px;


}




.system-card p{


color:var(--gray);


line-height:2;


}



.system-line{


font-size:40px;


color:var(--orange);


}






/* ==========================
案例模块
========================== */


.case{


padding:100px 0;


background:white;


}




.case-grid{


display:grid;


grid-template-columns:repeat(3,1fr);


gap:30px;


}




.case-card{


background:white;


border-radius:18px;


overflow:hidden;


box-shadow:

0 10px 30px rgba(0,0,0,.08);


transition:.3s;


}



.case-card:hover{


transform:translateY(-8px);


}



.case-card img{


height:240px;


object-fit:cover;


}




.case-content{


padding:30px;


}




.case-content h3{


font-size:24px;


margin-bottom:15px;


}



.case-content p{


color:var(---gray);


line-height:1.8;


}
/* ==========================
拉美研究院
========================== */


.research{


padding:100px 0;


background:#f5f7fa;


}




.news-grid{


display:grid;


grid-template-columns:repeat(3,1fr);


gap:30px;


}




.news-card{


background:white;


border-radius:18px;


overflow:hidden;


transition:.3s;


box-shadow:

0 10px 30px rgba(0,0,0,.06);


}



.news-card:hover{


transform:translateY(-8px);


}




.news-image{


height:220px;


overflow:hidden;


}




.news-image img{


height:100%;


object-fit:cover;


}




.news-content{


padding:30px;


}




.news-tag{


color:var(--orange);


font-size:14px;


font-weight:bold;


margin-bottom:15px;


}




.news-content h3{


font-size:22px;


line-height:1.5;


margin-bottom:15px;


}



.news-content p{


color:var(--gray);


line-height:1.8;


}




.news-content a{


display:inline-block;


margin-top:20px;


color:var(--orange);


font-weight:bold;


}








/* ==========================
信任体系
========================== */


.trust{


padding:100px 0;


background:white;


}



.trust-grid{


display:grid;


grid-template-columns:repeat(4,1fr);


gap:30px;


}



.trust-item{


padding:40px 30px;


background:#f8fafc;


border-radius:18px;


transition:.3s;


}



.trust-item:hover{


background:white;


box-shadow:

0 15px 35px rgba(0,0,0,.08);


transform:translateY(-5px);


}




.trust-number{


font-size:42px;


font-weight:900;


color:var(--orange);


}




.trust-item h3{


font-size:24px;


margin:20px 0;


}



.trust-item p{


color:var(--gray);


line-height:1.8;


}







/* ==========================
联系我们
========================== */


.contact{


padding:100px 0;


background:


linear-gradient(

135deg,

#06192d,

#123c61

);


}




.contact-box{


text-align:center;


color:white;


}



.contact-box h2{


font-size:45px;


font-weight:900;


margin-bottom:20px;


}




.contact-box p{


font-size:20px;


color:#c8d5e3;


margin-bottom:40px;


}




.contact-buttons{


display:flex;


justify-content:center;


gap:20px;


}








/* ==========================
Footer
========================== */


.footer{


background:#04111f;


color:#b9c7d6;


padding:70px 0 30px;


}




.footer-grid{


display:grid;


grid-template-columns:2fr 1fr 1fr 1fr;


gap:40px;


}




.footer-brand .logo-cn{


color:white;


}




.footer-brand p{


margin-top:20px;


line-height:1.8;


}




.footer-column{


display:flex;


flex-direction:column;


gap:15px;


}



.footer-column h4{


color:white;


font-size:18px;


margin-bottom:10px;


}



.footer-column a{


color:#b9c7d6;


}



.footer-column a:hover{


color:var(--orange);


}




.footer-bottom{


margin-top:50px;


padding-top:25px;


border-top:

1px solid rgba(255,255,255,.15);


text-align:center;


font-size:14px;


}







/* ==========================
动画效果
========================== */


@keyframes fadeUp{


from{


opacity:0;


transform:translateY(30px);


}



to{


opacity:1;


transform:translateY(0);


}


}



.hero-left,
.hero-right,
.market-card,
.solution-card,
.case-card{


animation:fadeUp .8s ease;


}







/* ==========================
移动端适配
========================== */


@media(max-width:900px){



.container{


max-width:90%;


}




.header{


height:70px;


}




.nav{


display:none;


}




.language{


display:none;


}




.hero{


padding-top:70px;


}




.hero-container{


height:auto;


display:flex;


flex-direction:column;


padding:80px 0;


}



.hero-left,
.hero-right{


width:100%;


}




.hero h1{


font-size:40px;


}



.hero-desc{


font-size:16px;


}



.hero-buttons{


flex-direction:column;


}



.stats-grid{


grid-template-columns:repeat(2,1fr);


}



.stat-item{


padding:25px;


}



.market-grid,
.solution-grid,
.case-grid,
.news-grid,
.trust-grid,
.company-wrapper,
.footer-grid{


grid-template-columns:1fr;


}



.company-image img{


height:300px;


}



.system-grid{


flex-direction:column;


}



.system-line{


transform:rotate(90deg);


}



.contact-box h2{


font-size:32px;


}




}