* {/*全局設定*/
    margin: 0 0;/*删除边框*/
    box-sizing: border-box; /* 讓 padding 和 border 包含在 width 內 */
    
}
body{
    /*font-weight: bold;*/
    background-color: rgb(241, 241, 241);
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 確保 body 至少佔滿整個視窗高度 */
}

a{
    color: rgb(36, 105, 253);
}

html[lang="zh_tw"] body {/*這個是自動選擇字體*/
    font-family: 'zh-tw', sans-serif;
}
html[lang="zh_cn"] body {
    font-family: 'zh_cn', sans-serif;
}
html[lang="en_us"] body {
    font-family: 'zh-tw', sans-serif;
}
html[lang="ja_jp"] body {
    font-family: 'ja-jp', sans-serif;
}

.center_PG{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/*调用毛玻璃div  （class="DivStyle-Glass"）*/
.DivStyle-Glass{
    backdrop-filter: blur(5px); /*毛玻璃效果*/
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
    border-radius: 30px;
    background-color: #ffffff28;
    word-wrap: break-word;
}
header {
    width: 85%;
    padding: 30px 0;
    margin: 20px auto;
    position: sticky;
    top: 20px;
    z-index: 100;

    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    transition:
    backdrop-filter 220ms ease,
    border-radius 220ms ease,
    margin 220ms ease,
    width 220ms ease,
    top 220ms ease;

    
}
.header a{
    margin: 0 8px;
}
body.scrolling-down header {
    width: 100%;
    margin: 0 auto;
    top: 0;
    border-radius: 0 0 30px 30px;
    backdrop-filter: blur(10px);
}


#mouth, #context {
    position: absolute;
    z-index: 1000;
    pointer-events: none; /* 讓鼠標可以穿透 */
}
#mouth {
    opacity: 0;
    width: 25px;
    height: 25px;

}
.mouth-show{
    animation: show_mouth 2s ease-out;
}
@keyframes show_mouth {
    0%{
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
#context { background: rgba(0,0,255,0.5); }

/*字體全局設定*/
@font-face {
    font-family: 'zh-tw';
    src: url('/fonts/jf-openhuninn-2.1.woff2') format('truetype'); /* 路徑根據實際情況調整 */
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'zh_cn';
    src: url('/fonts/SmileySans-Oblique.woff2') format('truetype'); /* 路徑根據實際情況調整 */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ja-jp';
    src: url('/fonts/FGMediumHankaku.ttf') format('truetype'); /* 路徑根據實際情況調整 */
    font-weight: normal;
    font-style: normal;
}


/*
#link_animate {/*這個是點擊外部鏈接的動畫遮罩樣式和動畫部分
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(255, 255, 255);
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
z-index: 9999;
}

#link_animate.active {
opacity: 1;
}
*/



#link_animate {/*這個是點擊外部鏈接的動畫遮罩樣式和動畫部分*/
    position: fixed;
    width: 1px;
    height: 1px;
    left: 0;
    top: 0;
    border-radius: 50%;
    opacity: 0;
    background-color: white;
    transition: all 0.6s ease;
    z-index: 9999;/* 確保遮罩在最上層 */
  }

  #link_animate.active {
    transform: scale(10000);
    opacity: 1;
}




.little-icon {/*小图标*/
    margin: 5px 5px;
    width: 24px;
}

.port{
    margin: auto 10%;
    padding: 20px;
    width: 80% !important;

}


/*====================控件样式================================*/
/*按钮样式   (<a href="#" class="button1")*/
.button{
    border: 2px solid black;
    padding: 10px 10px;
    border-radius: 20px;
    color: black;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    transition: 0.5s;
    background-color: #ffffff00;
}
.button:hover{
    background-color: #0b26364d;
}
.button:active {
    transform: scale(0.8);
  }

/*按钮样式1   (<a href="#" class="button1")*/
.button1{
    border: 2px solid #0b2636;
    background-color: #0b2636;
    padding: 10px 10px;
    border-radius: 20px;
    color: white;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    transition: 0.5s;
}
.button1:hover{
    background-color: #0a476a;
}
.button1:active {
    transform: scale(0.8);
  }


/*链接文本1   (<a href="#" class="LinkText1")*/
.LinkText1{
    color: black;
}





/* 輸入框樣式 */
input[type="text"] {
    padding: 10px;
    border: 2px solid #0b2636;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(5px); /* 毛玻璃效果 */
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5); /* 陰影效果 */
    width: 250px;
}

/* 輸入框獲得焦點時的樣式 */
input[type="text"]:focus {
    background-color: rgba(11, 38, 54, 1); /* 焦點時背景更深 */
    outline: none; /* 去掉邊框 */
    transform: scale(1.05); /* 放大效果 */
}

/* 輸入框的placeholder樣式 */
input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.7); /* 淡白色的placeholder */
    font-weight: normal;
}



/* 当长宽比小于1:1时，使用另一种排版 */
@media (max-aspect-ratio: 1/1){
    .little-icon {/*小图标*/
    margin: 5px 5px;
}
}




/*動畫部分*/
/*================================================*/