@charset "utf-8";

/* basic */
#wrapper, #header, #footer{width: 100%;}

#container{/* font-size: 12pt; */}

.normalbtn{display: block;}
.smallbtn{display: none;}

/* RWD basic */
.innerblock{width: 960px;}

/* 導覽列 */
#nav{height:168px;}
.logo{width:150px; height:168px; background: url(../images/img_b_logo.jpg)no-repeat;}
.navblock{margin-top:50px; overflow:hidden;}
/* .navbtn{background: #4C9BA2; text-align:center; max-width:auto; min-width:194px; padding: 10px; font-size: 28pt; color: #FFF; font-weight: 300; margin-right: 10px;} */
/* .navbtn{background: #e3e3e3; color: #4C9BA2; text-align:center; width:280px; padding: 10px; font-size: 28pt; font-weight: 300; margin-right: 10px;} */
.navbtn{background: #e3e3e3; color: #4C9BA2; text-align:center; width:200px; padding:10px 5px; font-size: 21pt; font-weight: 300; margin-right: 10px;}
.phonebtn{/* width:194px; */width:170px;}
/* .navbtn:last-child{margin-right:0;} */
.navbtn:hover{background: #4C9BA2; color: #FFF;}
.navbtn-visited{background: #4C9BA2; color: #fff;}

/* 手機漢堡按鈕 */
.hamburger {
  display: none;
  width: 30px;
  height: 22px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1001;
}

.hamburger span {
  display: block;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* 展開後變 X */
.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* RWD 手機版 */
@media screen and (max-width: 768px) {
  #nav {
    position: relative;
    text-align: left;
    background-color: #e3e3e3; /* ← 改成你的導覽列顏色 */
  }

  /* 顯示漢堡按鈕 */
  .hamburger {
    display: flex;
  }

  /* 導覽選單預設關閉 */
  .navblock {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    background: #e3e3e3;/* ← 導覽列背景色 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 0 0 0; /* 預留 X 的空間 */
  }

  .navblock a {
    width: 100%;
  }

  .navblock .navbtn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 15px 20px;
    border-radius: 0;
  }

  /* 展開時顯示 */
  .navblock.active {
    display: flex;
  }

  /* X 按鈕與背景同色 */
  .hamburger.active {
    padding: 10px;
    border-radius: 5px;
  }
  /* 讓整個導覽列底色一致（包含LOGO區） */
  #nav {
    background-color: #fff; /* ← 改成你的導覽列顏色 */
  }

  /* 移除桌面右浮動 */
  .fr {
    float: none;
  }
}

/* BANNER */
#header{background-image:url(../images/img_header_bg.jpg); border-bottom: #4C9BA2 5px solid; height: 470px;}     
.pcblock{background: url(../images/img_main_pc.jpg)center no-repeat; height:100%;}
.spblock{background: url(../images/img_main_sp.jpg)center no-repeat; height:100%;}

/* 最新消息 */
.news_objtitle{width:100%; height:93px; background:url(../images/img_title_news.png)center no-repeat;}

.newsdate{color: #4C9BA2; margin-right: 20px;}
.newstitle{color: #666666;}

.list{width: 771px; margin: 20px auto 50px auto; font-size: 12pt;}
.list li{padding:20px; border-bottom: #DDD 1px dashed; cursor: pointer;}
.list li:hover{background: #ededed;}

.newsMore{margin-top: 10px;}
.newsMore a{color: #4C9BA2;}
.newsMore a:hover{text-decoration: underline;}

/* 捐血車地點 */
.localon{display: block;}
.localoff{display: none;}
.local_objtitle{width:100%; height:93px; background:url(../images/img_title_local.png)center no-repeat;}
.localinfo{width: 768px; padding: 20px 0; margin-top: 50px; margin-bottom: 20px; font-size: 14pt;}
.localinfo li{padding: 10px 0; border-bottom: #e3e3e3 1px dashed;}
.localmap{width: 100%; padding-bottom: 50px;}
.localmap>iframe{width: 100%; height:300px;}

/* 下方區塊 */
#footer{background-color: #4c9ba2; color: #FFF; padding-top: 10px; padding-bottom:10px; overflow: visible; font-size: 12pt;}
#footer .subnav{margin-bottom: 55px;}
#footer .subnav .di{padding: 0 3px;}
#footer .subnav a{color: #FFF;}
#footer .subnav a:hover{text-decoration:underline;}

.copyright a{color: #176668; /* margin:0 10px; */}
.copyright a:hover{text-decoration:underline; color: #FFF;}
.copyright .line{margin:0 10px;}


/* list.php END
----------------------------------------------------------------------------------------*/

/* PC & pad */
@media screen and (max-width:960px) {
    .logo{/* margin-left:20px; */}
    .navbtn:last-child{margin-right:10px;}
    /* .navbtn:last-child{margin-right:20px;} */
}

/* PC & pad */
@media screen and (max-width:768px) {
    .chara1, .chara2{display: none;}
    
    .innerblock{width:100%;}

    .logo{float:none; background-position:0; margin:0 auto; width:200px; background: url(../images/img_sp_logo.jpg)no-repeat;}

    #nav{height:200px;}
    .navbtn:last-child{margin-right:0;}
    .navblock{width:100%; margin-bottom:20px; margin-top:0;}

    #header{height:350px;}
    .pcblock{background-position:bottom; background-size:cover; height:100%;}
    
    .localinfo{width: 95%; margin-top: 20px;}
    .localmap{padding-bottom:0;}
}

/* 以下開始瀏覽裝置為智慧型手機
------------------------------------------------- */

/* iphone6 plus Landscape */
@media screen and (max-width:736px) {
    #nav{height:240px;}
    .navbtn{font-size: 21pt;}
    .navbtn{width:210px;}
    .phonebtn{width:140px;}
    
    .list{width:100%; font-size:16pt;}
    
    #footer{font-size:14pt;}
}

/* iphone6 Landscape */
@media screen and (max-width:667px) {
    #nav{height:200px;}
    /* .navbtn{font-size: 18pt;}
    .navbtn, .phonebtn{width:180px;} */
    .navbtn{float:left; font-size: 18pt; margin-left: 11px;}
    .navbtn, .phonebtn{width:100px;}
    .navbtn{padding-right:17px; padding-left: 17px;}
    .phonebtn{padding-top:25px; padding-bottom: 25px;}
    .b-l-btn{width:150px;}
}

/* iphone6 Landscape */
@media screen and (max-width:640px) {
    .navbtn{width:100px;}
    .phonebtn{width:110px;}
    .b-l-btn{width:90px; padding-top:10px; padding-bottom: 10px;}
}

/* iphone5 Landscape */
@media screen and (max-width:568px) {
    .chara1, .chara2{display: none;}
    .on{display: none;}
    .off{display: block;}
    /* #footer .on{display: block;}
    #footer .off{display: none;} */

    /* #nav{height:225px;} */
    /* .navbtn, .phonebtn{width:155px;}
    .navbtn{float:left; font-size: 24pt;}
    .navbtn:first-child{margin-left:10px;}
    .phonebtn{padding:31px 10px;} */
    .navbtn{width:110px;}
    .phonebtn{width: 123px;}
    .navbtn{float:left; font-size: 18pt;}
    .navbtn:first-child{margin-left:10px;}
    .phonebtn{padding:26px 0px;}
    
    .b-l-btn{padding: 10px 0;}
    
    .normalbtn{display: none;}
    .smallbtn{display: block;}
    
    #header{height:403px;}
    .spblock{background-position:bottom; background-size:cover; height:100%;}
}

/* iphone6 plus */
@media screen and (max-width:414px) {
    #footer .on{display: none;}
    #footer .off{display: block;}
    
    #nav{width:auto; height:200px; text-align:center;}
    .navblock{width:100%;}
    /* .navbtn{min-width:auto; font-size: 14pt;} */
    /* .navbtn, .phonebtn{width:110px;}
    .navbtn{font-size: 16pt; margin-right:5px;}
    .navbtn:first-child{margin-left:7px;}
    .navbtn:last-child{margin-right:0;}
    .phonebtn{padding:24px 10px;} */
    .navbtn{width:110px;}
    .phonebtn{width:70px;}
    .b-l-btn{width:90px;}
    
    .navbtn{font-size: 18pt; margin-right:5px;}
    .navbtn:first-child{margin-left:0;}
    .navbtn:last-child{margin-right:0;}
    
    .navbtn{padding:20px 0px;}
    .phonebtn{padding:20px 6px;}

    #header{height:391px;}
    .spblock{background-position:bottom; background-size:cover; height:100%;}

    /* .list{width:100%; font-size:16pt;} */
    .list li{padding:10px 0 10px 10px;}
    .list .newstitle{display:block;}

    #footer{/* font-size:14pt; */ text-align:left;}
    #footer .subnav{margin-bottom:15px;}
    #footer .subnav .di{display: inherit; margin-bottom:15px;}
    .copyright{margin-right:0px; padding-left:10px; width:70%;}
    
    .localinfo{width: 85%; margin-top: 0;}
    .localon{display: none;}
    .localoff{display: block;}
}

/* iphone6 */
@media screen and (max-width:375px) {
    
    #nav{height:200px;}
    
    /* .navbtn, .phonebtn{width:97px;} */
    .navbtn{font-size: 14pt; margin-right:4px; float:left;}
    .navbtn, .phonebtn{/* width:77px; */width:85px;}
    .navbtn{padding:10px 0px;}
    .phonebtn{/* padding:23px 10px; */padding:22px 0px;}
    
    .b-l-btn{padding: 10px 0;}
    
    .normalbtn{display: none;}
    .smallbtn{display: block;}
    
    #header{height:355px;}
}

/* smartphone */
@media screen and (max-width:360px) {
    /* .navbtn, .phonebtn{width:92px;} */
    .navbtn, .phonebtn{width:81px;}
}

/* iphone5 */
@media screen and (max-width:320px) {
    #nav{height:240px;}
    /* .navbtn{max-width:90px; min-width:auto; font-size: 14pt; margin-right:5px; float:left;}  */
    .navbtn{font-size: 12pt; margin-right:4px;}
    .navbtn, .phonebtn{/* width:77px; */width:69px; padding: 10px 5px;}
    .b-l-btn{width:69px;}
    
    .phonebtn{/* padding:23px 10px; */padding:20px 0px;}
    
    .b-l-btn{padding: 10px 0;}
    
    #header{height:320px;}
    .copyright{width:90%;}
}