.botm{
    font-size: 20px;
    color: #5c6c7d;
    font-weight: bold;
    text-decoration: none;
    display: inline-block; 
    cursor: pointer;
    background-color: #f3f4f7;
    padding-left: 10px;
    padding-right: 10px;
    height: 60px;
    border-radius: 30px;
    margin-right: 10px;
    line-height: 60px;
    text-align: center;
 
    justify-content: center; 
    align-items: center; 
    transition: background-color 0.3s ease, color 0.3s ease;
}
.botm:hover {
    background-color: #cfcbc9;
    color: #fdfdfd;
    cursor: pointer;
  }
.head{
    h1{color: #f5fbf9;text-decoration: none;display: inline;margin:0; padding-left: 10px;line-height: 100px;} 
    background-color:#1d2347;
    border: 0;
    height: 100px;
    width: 100%;
    position: fixed;
    top: 0%;
    /*adding: 25px;*/
    /*line-height: 40px;*/
    z-index: 1;
    left: 0;
    right: 0;
    margin: auto;
    img{height: 65px; position: relative;right: -5px; top: 5px;}
    
}

.page{
    h1{color: #f5fbf9;text-decoration: none;display: inline;margin:0; padding-left: 10px;line-height: 100px;} 
    background-color:#1d2347;
    border: 0;
    height: 100px;
    width: 100%;
    /*adding: 25px;*/
    /*line-height: 40px;*/
    left: 0;
    right: 0;
    margin: auto;
    img{height: 65px; position: relative;right: -5px; top: 5px;}
}
.foot{
    h2{
        font-size: 25px;
        margin-left: 20px;
        color: #f5fbf9;
        text-decoration: none;
        display: block;
        line-height: 50px;} 
    background-color:#1d2347;
    border: 0;
    height: 50px;
    width: 100%;
    /*adding: 25px;*/
    /*line-height: 40px;*/
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
}
.UD{
    width: 300px;
    border: 1.5px solid #015EDF;
    padding: 35px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 70px;
    margin-bottom: 40px;
    border-radius: 7px;
    p{color: #433E38; font-size: 120%;text-align:left;font-family: 'Courier New', Courier, monospace;}
    img{width: 70px;margin-left: 115px;margin-top: -70px;}
    h2{text-align: center;}
}
h1{font-size: 50px;}

.QA{
    margin-left: auto;
    margin-right: auto;
    height: auto;
    width: 230px;
    border: 3px solid;
    border-color: black;
    border-radius: 25px;
    padding: 13px;
    p{margin: 0;font-size: 25px;}
    
}
.product{
    font-size: 35px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    margin-top: 10%;
    margin-bottom: 40px;
    img{
        width: 30%;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }
    
    span{
        margin-left:0;
        background-color: #f3f4f7;
        width: 60%;
        height: auto;
        border-radius: 30px;
        text-align: center;
        display: inline-block;
        p{font-size: 28px;width: 80%;   margin-left: auto;margin-right:auto;margin-top: 30px;}
        a{
            margin-top: auto;
            
            font-size: 20px;
            color: #2f5972;
            font-weight: bold;
            text-decoration: none;
            display:block; 
            cursor: pointer;
            background-color: #ede9e9;
            width: 140px;
            height: 60px;
            border-radius: 30px;
            margin-right: auto;
            margin-left: auto;
            line-height: 60px;
            text-align: center;
            justify-content: center; 
            align-items: center; 
            transition: background-color 0.3s ease, color 0.3s ease;
            margin-bottom: 10px;
        }
}
}

.product span a:hover {
    background-color: #d1d1d1; /* 按鈕 hover 時的背景顏色 */
    color: #1c384a; /* 按鈕 hover 時的文字顏色 */
  }

.info{
    div{width: 100%;height: auto;margin-top: 150px;}
    span{margin: 50px auto 30px 20px; font-size:40px;display: block;}

}
.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    overflow: hidden;
}

.logo-title {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.logo {
  width: 170px;
  /*z-index: 2;*/
  transition: transform 1s ease;
}

.title {
  font-size: 70px;
  font-weight: bold;
  margin-left: -20px; /* 確保靠近 logo */
  opacity: 0;
  transform: translateX(-50px); /* 從 logo 左邊往右滑出 */
  transition: all 1s ease;
  /*z-index: 1;*/
}

.slogan {
  margin-top: 20px;
  font-size: 40px;
  color: #333;
  opacity: 0;
  transform: translateY(-20px); /* 從上方滑下來 */
  transition: all 1s ease;
}

.menu{
    height: 40px;
    text-align: center;
    
    margin-top: 100px;
    display: flex;
    background-color:#F5F4F5;
    font-size: 30px;
    font-weight: bold;
    div{flex: 1;
        border-left: 3px solid #BCC1C8;
        color: #1d2347;}
    a{text-decoration: none #545863} 
}
.rubber{
    height: auto;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 50px;
    display: flex;
    font-size: 30px;
    div{flex: 1; margin-top: auto;margin-bottom: auto;}
}