* {box-sizing: border-box}
html {font-size: 20px}

.w3-T {font-family: "Tangerine", serif}
.w3-L {font-family: "Lobster", serif}
.w3-C {font-family: "Comic Sans MS", cursive, sans-serif}
.w3-A {font-family: "Allerta Stencil", Sans-serif}


.hpmeback {position: relative; z-index: 1} /* Ensure content is above the overlay */
.homeback::before {content: "";
          position: fixed; top: 0; left: 0; width: 100%; height: 100%;/* Make it fixed to cover the entire viewport */
          background-image: url("media/homeback.jpg");
          opacity: 0.2; background-size: cover; background-position: center; z-index: -1}

.favback {position: relative; z-index: 1} /* Ensure content is above the overlay */
.favback::before {content: "";
          position: fixed; top: 0; left: 0; width: 100%; height: 100%;/* Make it fixed to cover the entire viewport */
          background-image: url("media/favback.jpg");
          opacity: 0.2; background-size: cover; background-position: center; z-index: -1}
 
.trback {position: relative; z-index: 1} /* Ensure content is above the overlay */
.trback::before {content: "";
          position: fixed; top: 0; left: 0; width: 100%; height: 100%;/* Make it fixed to cover the entire viewport */
          background-image: url("media/trustback.jpg");
          opacity: 0.2; background-size: contain; background-position: center; z-index: -1}


h1{text-align:center; font-size:7em; transform: scaley(3); margin:2em auto 1em}
h2{text-align:center; font-size:4em; color:red; margin:0 auto 0}
h3{text-align:center; font-size:2em}
h4{text-align:center; font-style:italic; font-size:1.5em} /*; text-decoration: underline wavy green*/


.buthome {height:4em; width: 10em;
        border:1px solid black; border-radius:50%;
        font-size:1.5em;
        text-align: center;
        margin:0 2em;
        transition-duration:0.4s;
        cursor:pointer}

.butbac {height:4em; width:10em;
        border:1px solid black; border-radius:50%;
        font-size:0.7em;
        text-align: center;
        transition-duration:0.4s;
        cursor:pointer}

.button-container {display: flex;
  justify-content: center}
   
.buttonfam {position: relative}

.buttonpa {height:3em; width: 8em;
        border:1px solid black; border-radius:50%;
        font-size:1.2em;
        text-align: center;
        margin:0 1em;
        transition-duration:0.4s;
        cursor:pointer}

.butfave {height:4em; width: 10em;
        border:1px solid black; border-radius:50%;
        font-size:1.2em;
        text-align: center;
        margin:0 1em;
        transition-duration:0.4s;
        cursor:pointer}

.buttondrop0 {display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%)}

.buttondrop {display: flex;
        justify-content: center;
        height: 1.5em;width:4em;
        border: 1px solid;border-radius: 50%; /* Add missing value */
        font-size: 1em;
        text-align: center;
        cursor: pointer}

.button100{background-color:yellow; width:100%}

.buttonjz {display: block; margin: 0 auto} /* This centers the button horizontally */
  
.buttondown {height:3em; width: 8em;
        border:1px solid black; border-radius:50%;
        font-size:1.2em;
        text-align: center;
        margin-left: 20%}

 
 /*highlight highlight  highlight   highlight*/
.hilicenter{text-align:center} /*no thumbar*/

.butHL{height: 1.5em; width: 1.5em; /*no thumbar*/
       margin: 4% auto;
       text-align:center}


 /* HL图像 */
.imvdHL {display:flex; margin:4% auto; width:40em;height:40em; overflow: hidden} /* Hide overflowing parts of the image */
.imvdHL:hover{opacity:0.5}
.imvdHLnew {position:relative; z-index: 1; display:flex; margin:0 auto; width:60em; height:45em; overflow:hidden}

/*animation  animation  animation  animation  animation  animation  animation  */
.w3-animate-top {animation-duration: 5s !important;
  animation-timing-function: steps(5, jump-start) !important} /* 改变速度曲线为先慢后快再慢 */
.w3-animate-bottom {animation-duration: 5s !important;
  animation-timing-function: ease, step-start !important} /* 改变速度曲线为先慢后快再慢 */
.w3-animate-left {animation-duration: s !important;
  animation-timing-function: steps(5, end) !important} /* 改变速度曲线为先慢后快再慢 */
.w3-animate-riht {animation-duration: 8s !important;
  animation-timing-function: steps(5, jump-start) !important} /* 改变速度曲线为先慢后快再慢 */
.w3-animate-opacity {animation-duration: 5s !important;
  animation-timing-function: ease !important} /* 改变速度曲线为先慢后快再慢 */
.w3-animate-zoom {animation-duration: 3s !important;
  animation-timing-function: steps(3, jump-both) !important} /* 改变速度曲线为先慢后快再慢 */
.w3-animate-fading {animation-duration: 5s !important;
  animation-timing-function: ease-in-out !important} /* 改变速度曲线为先慢后快再慢 */



.rotate {animation: spin 120s linear infinite}
@keyframes spin {from {transform: rotate(0deg)}
                   to {transform: rotate(360deg)}}

.thumb {display: flex; justify-content: center; width: 100%; height: auto; margin-top:2%}
.thumb img, .thumb video {width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; cursor: pointer;}

.fdthumb{display: block; position: absolute; top: 5%; left: 25%;
         width:60em; height:45em;
         z-index: 1000; }
/*fdthumb img, .fdthumb video {width:100%; height: auto}*/

.close {position: absolute;
        top: 15px; right: 35px;
        color: red; font-size: 40px; font-weight: bold;
        cursor: pointer;}
 


/* 图像居中 漂流瓶*/
.tgvmcen{display: none; /*click display or close*/
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border-radius:50%;  width:50em;  height:50em;
    z-index: 1000;
    } 

.tgpdfcen{display: none; /*click display or close*/
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border-radius:50%; width:32em; height:32em;
    z-index: 1000;
    } 

    
.multi-container { display: flex; 使用flex布局让子元素并排显示 */
    justify-content: center; /* 子元素之间有间隔 */
    position: fixed; top: 50%; left: 30%;
    }

.multi-item {display: none; /*click display or close*/
    transform: translate(-50%, -50%);
    border-radius:50%;  width:30em;  height:30em;
    z-index: 1000;
    } 


.plpp{font-style:italic; font-size:1.5em; margin:1em 4em}

p.b1{display: none}
div:hover p.b1{display: block}

input.b2{height:300px;width:400px}


.container {display: flex;justify-content: center;align-items: center;height: 50vh} /* Adjust the height as needed */

.containermedia {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden}

.containermedia img, .containermedia video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures the entire media is visible within the container */
}





/*adbook adbook adbook adbook adbook adbook */
.adtable {width: 70%; /* 容器宽度 */
            height: 60vh;/* 容器高度 */
            overflow-y: auto; /* 垂直方向自动显示滚动条 */
            margin: 1em auto;
            position: relative;
             }

table{width: 100%; border-collapse: collapse;}

th, td {border: 1px solid #ccc; padding: 3px; text-align:center; max-width:5em; border-collapse: collapse;} 
 
thead { position: sticky; /* Make the header sticky */
            top: 0; /* Stick to the top */
            z-index: 10; /* Ensure it stays above other content */
            }

.adcell {max-width: 100%;  /* 必须设置宽度或最大宽度 */
            overflow: hidden;   /* 必须设置溢出隐藏 */
            white-space: nowrap;  /* 必须设置为单行显示 */
           text-overflow: ellipsis;   /* 显示省略号 */
           }
 
/*national flags*/  
.flagrow {display: flex; gap: 10px; justify-content: center; align-items: center; margin-top:2em; margin-bottom:0}
.flag {width: 50px; height: 30px;}

/*Mobile Responsiveness*/
@media (max-width: 600px) {
    table {
        display: block;
        overflow-x: auto;
    }
}

    
/*display alert content*/
  .displayalert {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.displayalertl-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
  
    
/*
.shrink-word {display: inline-block;
        transform: scaleX(0.7); Adjust the scale factor as needed 
        transform-origin: center} Ensure scaling starts from the left side 
        
        h5{text-align:center; font-size:1.2em}
       h6{text-align:center; font-style:italic; font-size:1em} /*; text-decoration: underline wavy green
*/