body{
   margin: 0px;
   padding: 0;
}

.header .header_fixed_area{
   height: 70px;
   width: 100%;
   position: fixed;
   background-color: rgb(66, 154, 198);
}
.header_title{
   width: 300px;
   margin: 15px auto;
   text-align: center;
   font-size: 30px;
   font-weight: bold;
}
.header .header_left_button img{
   height: 50px;
   width: 50px;
   margin-left: 30px;
   margin-top: 10px;
   float: left;
}
.header .header_right_burron img{
   height: 40px;
   width: 40px;
   margin-right: 30px;
   margin-top: -55px;
   float: right;
   /*position: absolute;
   right: 10px;*/
}
.user_log_in_bar {
   display: none;
}
.user_log_in_bar ul{
   list-style-type:none;
   position: absolute;
   z-index: 15;
   right: 50px;
   top:35px;
}
.user_log_in_bar ul li{
   margin-bottom: 5px;
   background-color: rgb(222, 222, 222);
   padding: 5px 13px;
}
.user_log_in_bar ul li:hover{
   background-color: rgb(228, 239, 240);
}
.user_log_in_bar ul li a{
   text-decoration: none;
   color: black;
}
.user_log_out_bar{  /*登入後才會用到*/

   display: none;
}
.user_log_out_bar ul{  /*登入後才會用到*/
   list-style-type:none;
   position: fixed;
   z-index: 15;
   right: 50px;
   top:35px;
}
.user_log_out_bar ul li{
   margin-bottom: 5px;
   background-color: rgb(222, 222, 222);
   padding: 5px 13px;
}
.user_log_out_bar ul li:hover{
   background-color: rgb(228, 239, 240);
}
.user_log_out_bar ul li a{  /*登入後才會用到*/
   text-decoration: none;
   color: black;
}
.user_log_out_bar ul li:hover{
   background-color: rgb(228, 239, 240);
}
.user_log_out_bar ul li a{  /*登入後才會用到*/
   text-decoration: none;
   color: black;
}

.black_opacity_background{
   height: 100%;
   width: 100%;
   position: fixed;
   top: 0px;
   background: rgba(0,0,0,0.5);
   z-index: 3;
   display: none;
}




/************以下開始為製作漢堡選單的相關CSS設定************/
.hamburger_menu{
   margin-top: 70px;
   position: absolute;
   z-index: 10;
   width: 250px;
   margin-left: -260px;
   box-shadow: 2px 2px 10px rgb(46, 46, 46);
}
.hamburger_menu_user_img_area{
   width: 250px;
   height: 150px;
}
.hamburger_menu_user_img_area .default_user_img{
   width: 250px;
   height: 150px;
   position: relative;
   top: -20px;
}
.hamburger_menu .hamburger_menu_user_img_area a img{ /*使用者照片又上角的叉叉按鈕*/
   width: 10px;
   height: 10px;
   float: right;
   position: relative;
   right: 10px;
   top: 10px;
   z-index: 15;
}
.hamburger_menu .hamburger_menu_user_img_area span a{ /* 文字「登入享有更多功能」 的位置設定 */
   position: relative;
   right: -60px;
   top: 130px;
   z-index: 15;
   color: rgba(187, 175, 67, 0.81);
}
.hamburger_menu .hamburger_menu_user_img_area div a{ /* 文字「(使用者名稱)」 的位置設定 */
   position: relative;
   right: -80px;
   top: 130px;
   z-index: 15;
   color: rgba(187, 175, 67, 0.81);
}
.hamburger_menu ul{ /* 取消ul預設的內縮及樣式 */
   margin: 0;
   padding: 0;
   list-style: none;
}
.hamburger_sliding_menu{
   border: #ccc 1px solid;
   width: 250px;
   font-size: 20px;
   line-height: 30px;
   letter-spacing: 3px;
}
.hamburger_sliding_menu li{
   /*position: relative;目前沒有用
   white-space: nowrap;*/
   border-right: #ccc 1px solid;
   border-bottom: #ccc 1px solid;
}
.hamburger_sliding_menu a{
   background-color: #fff;
   color: #333;
   display: block;
   padding: 0 30px;
   text-decoration: none;
   line-height: 40px;
}
.hamburger_sliding_menu a:hover{ /* 滑鼠滑入按鈕變色 */
   background-color: #2bb6a6;
   color: #fff;
}
.hamburger_sliding_menu li:hover > a{ /* 滑鼠移入次選單上層按鈕保持變色 */
   background-color: #2bb6a6;
   color: #fff;
}
.hamburger_sliding_menu ul{  /*次選單的設定*/
   border: #ccc 1px solid;
   position: fixed;
   z-index: 10;
   left: 170px;
   top: 220px;
   display: none;
}
.hamburger_sliding_menu li:hover > ul{
   display: block;
}
.hamburger_sliding_menu ul li{
   border-bottom: #ccc 1px solid;
}
.hamburger_sliding_menu ul li:last-child{
   border-bottom: none;
}

.hamburger_triangle_icon{ /*三角形小圖示*/
   height: 10px;
   width: 10px;
}
/************漢堡選單CSS設定結束************/




/************9個icon的設定************/

.nine_icons_area{
   width: 400px;
   height: 500px;
   position: absolute;
   top: 80px;
   left: 50%;
   z-index: -1;
   margin-left: -200px;

   font-family: SimHei,Microsoft YaHei;
}
.nine_icons_area img{
   width: 100px;
}
.mind{
   width: 30px;
   height: 30px;

   position: absolute;
   right: 0;
   top: 60px;

   border-radius: 30px; /*要做成正圓形，只要這個的數值和height一樣即可*/
   background-color: rgb(214, 38, 38);

   line-height: 30px; /*讓字在圓形正中央*/
   text-align: center;
   color: white;
}
.icon_text{
   width: 100px;
   position: absolute;
   left: 50%;
   margin-left: -50px;
   text-align: center;

   color: black;
}

.icon_1{
   position: absolute;
   left: 0;
}

.icon_2{
   position: absolute;
   left: 50%;
   margin-left: -50px;
}
.icon_3{
   position: absolute;
   right: 0;
}
.icon_4{
   position: absolute;
   left: 0;
   top: 150px;
}
.icon_5{
   position: absolute;
   left: 50%;
   top: 150px;
   margin-left: -50px;
}
.icon_6{
   position: absolute;
   right: 0;
   top: 150px;
}
.icon_7{
   position: absolute;
   left: 0;
   top: 300px;
}
.icon_8{
   position: absolute;
   left: 50%;
   top: 300px;
   margin-left: -50px;
}
.icon_9{
   position: absolute;
   right: 0;
   top: 300px;
}

/************9個icon的設定結束************/
.push_div
{
 //  height: 600px;
}

footer{
   background-color: rgb(143, 150, 154);
   height: 20px;
   width: 100% ;
   position: fixed;
   bottom: 0;


   font-size: 14px;
   text-align: center;
   line-height: 20px;
 //  margin-bottom: -10px; /* 留給footer空白位子擺上去才不會擋到*/
}
footer a{
  color: rgb(223, 238, 238);
}







.appear{   /*讓js引入此class來使隱藏的東西跑出來*/
   display:block ;
}
.disappear{
   display: none ;  /*讓js引入此class來隱藏東西*/
}

@media screen and (max-width: 750px){
   
}
@media screen and (max-width: 600px){
   }

@media screen and (max-width: 450px){
   .header_title{
      width: 280px;
      margin: 20px auto;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
   }
   .header .header_left_button img{
      height: 30px;
      width: 30px;
      margin-left: 25px;
      margin-top: 20px;
      float: left;
   }
   .header .header_right_burron img{
      height: 25px;
      width: 25px;
      margin-right: 25px;
      margin-top: -50px;
      float: right;
      /*position: absolute;
      right: 10px;*/
   }
    

   .hamburger_sliding_menu{
      border: #ccc 1px solid;
      width: 250px;
      font-size: 16px;
      line-height: 10px;
      letter-spacing: 1px;
   }
   .hamburger_sliding_menu a{
      background-color: #fff;
      color: #333;
      display: block;
      padding: 0 20px;
      text-decoration: none;
   }
   .hamburger_sliding_menu ul{  /*次選單的設定*/
      border: #ccc 1px solid;
      position: fixed;
      z-index: 10;
      left: 140px;
      top: 220px;
      display: none;
   }



   /************9個icon的設定************/

   .nine_icons_area{
      width: 80%;
      height: auto;
      position: absolute;
      left: 50%;
      z-index: -1;
      margin-left: -40%;

      font-family: SimHei,Microsoft YaHei;
   }
   .nine_icons_area img{
      width: 70px;
   }
   .mind{
      width: 20px;
      height: 20px;

      position: absolute;
      right: 0;
      top: 40px;

      border-radius: 20px;
      background-color: rgb(214, 38, 38);

      line-height: 20px;
      color: white;
      font-size: 11px;
   }
   .icon_text{
      width: 70px;
      position: absolute;
      left: 50%;
      margin-left: -35px;
   }

   .icon_1{
      position: absolute;
      left: 0;
   }

   .icon_2{
      position: absolute;
      left: 50%;
      margin-left: -35px;
   }
   .icon_3{
      position: absolute;
      right: 0;
   }
   .icon_4{
      position: absolute;
      left: 0;
      top: 120px; /*7/18凌晨新加的*/
   }
   .icon_5{
      position: absolute;
      left: 50%;
      margin-left: -35px;
      top: 120px; /*7/18凌晨新加的*/
   }
   .icon_6{
      position: absolute;
      right: 0;
      top: 120px; /*7/18凌晨新加的*/
   }
   .icon_7{
      position: absolute;
      left: 0;
      top: 240px; /*7/18凌晨新加的*/
   }
   .icon_8{
      position: absolute;
      left: 50%;
      margin-left: -35px;
      top: 240px; /*7/18凌晨新加的*/
   }
   .icon_9{
      position: absolute;
      right: 0;
      top: 240px; /*7/18凌晨新加的*/
   }

   /************9個icon的設定結束************/

}
/*Sam's CSS*/
input.sign_up_q1_others_input
{
   width: 0px;
   display: none;

}
.birth_day
{
    display: inline-block;
    width: 40px;
}
/*Sam's CSS END*/