*{

box-sizing:border-box;

}



body{

margin:0;

font-family:
"Noto Sans SC",
Arial,
sans-serif;


background:#f7fbff;

color:#24344d;


animation:fade .8s ease;

}

body{
    font-family:
        "PingFang TC",
        "Microsoft JhengHei",
        "Noto Sans TC",
        "Heiti TC",
        sans-serif;
}






/* =========================
        HEADER
        高度100px
========================= */


header{


height:100px;


display:flex;


align-items:center;


justify-content:space-between;


padding:0 8%;


background:white;


box-shadow:

0 5px 18px rgba(0,0,0,.08);


}






/* =========================
        LOGO区域
========================= */


.logo-area{


display:flex;


align-items:center;


gap:18px;


}





.logo-img{


width:90px;


height:90px;


object-fit:contain;


}






/* =========================
        左侧文字优化
========================= */


.title-box{


display:flex;


flex-direction:column;


justify-content:center;


}




/* 国家名称 */

.title-box h1{


margin:0;


font-size:18px;


font-weight:600;


line-height:1.2;


color:#304b70;


white-space:nowrap;


}




/* 性别平权委员会 */


.title-box h2{


margin:3px 0;


font-size:25px;


font-weight:900;


line-height:1.2;


color:#164578;


white-space:nowrap;


}





/* 英文 */

.title-box p{


margin:0;


font-size:12px;


letter-spacing:.5px;


color:#777;


white-space:nowrap;


}







/* =========================
        NAV菜单
========================= */


nav{


display:flex;


align-items:center;


}



nav a{


margin-left:18px;


text-decoration:none;


font-size:15px;


font-weight:600;


color:#24476f;


position:relative;


transition:.3s;


}




nav a:hover{


color:#f48fb1;


}





nav a::after{


content:"";


position:absolute;


bottom:-6px;


left:0;


width:0;


height:2px;


background:#f48fb1;


transition:.3s;


}





nav a:hover::after{


width:100%;


}







/* =========================
        HERO
========================= */


.hero{


height:520px;


display:flex;


align-items:center;


padding-left:10%;


color:white;




background:


linear-gradient(

40deg,

rgba(20,70,135,.9),

rgba(244,143,177,.55)

),



url("images/gender-equality-bg.jpg");



background-size:cover;


background-position:center;


animation:

heroMove 18s infinite alternate;


}






.hero-text{


max-width:650px;


animation:

slide .9s ease;


}






.hero h2{


font-size:52px;


line-height:1.25;


margin:0 0 20px;


letter-spacing:2px;


}





.hero p{


font-size:19px;


line-height:1.7;


}





button{


padding:

13px 34px;


border:none;


border-radius:30px;


margin-top:18px;


margin-right:10px;


font-weight:bold;


cursor:pointer;


transition:.3s;


}





button:hover{


transform:translateY(-4px);


}




button.pink{


background:#f48fb1;


color:white;


}