@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
*{ padding:0; margin:0; font-family:'Noto Sans TC', sans-serif; font-weight: 100; font-size:16px; text-decoration: none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
*:focus{ outline:none; }

.header{ position:fixed; top:0; left:0; right:0; margin:auto; z-index:1000; background: /*rgba(24,161,198,0.9)*/rgba(68,146,201,0.9); }
.header .mar>img{ width:170px; display:block; font-size:0; max-width:100%; }

.header .mar{ max-width:1280px; margin:auto; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; }
.header .mar .logo{ width:170px; display:block; font-size:0; }
.header .mar .logo img{ max-width:100%; }
.header .mar .menubtn{ display:none; }
.header .mar .right .ranges{ display:flex; flex-wrap:wrap; justify-content:flex-end; height:100%; align-content:flex-start; }
.header .mar .right .closebtn{ display:none; }
.header .mar .menus{ display:flex; }
.header .mar .menus .grids{ margin:0 0 0 20px; position:relative; }
.header .mar .menus .grids .h1_link{ display:block; font-size:1.125rem; color:#fff; line-height:36px; }
.header .mar .menus .grids .h1_link.h_user{ display: flex; align-items: center; }
.header .mar .menus .grids .h1_link.h_user img{ width: 36px; height: 36px; }
.header .mar .menus .grids .h1_link.h_user span{ color: #000; margin-left: 5px; font-size: 1.125rem; }
.header .mar .menus .grids .du{ display:none; transition: top 0.5s; position:absolute; top:/*36*/45px; right:50%; padding: 15px 10px 0px 10px; transform:translateX(50%); -webkit-transform:translateX(50%); -moz-transform:translateX(50%); background: rgba(0,96,163,0.7); }
/*.header.bg .mar .menus .grids .du { top: 45px; }*/
.header/*.bg*/ .mar .menus .grids .du::after { position: absolute; content: ""; top: -10px; left: 0; right: 0; height: 10px; opacity: 0; }
/*.header .mar .menus .grids .du:before{ content:""; display:block; width:0; height:0; border-style:solid; border-width:5px 4px 0 4px; border-color:#fff transparent transparent transparent; position:absolute; top:3px; left:0; right:0; margin:auto; }*/
.header .mar .menus .grids .du .list{ font-size:1.125rem; text-align:center; white-space:nowrap; color:#fff; padding:10px 5px; display:block; border-bottom: 1px solid #7cb0d5; }
.header .mar .menus .grids .du .list:last-child{ border:none; }
.header .mar .menus .grids.lastmember{ position:absolute; right:10px; bottom:15px; }
.header .mar .topmenu{ display:flex; width:100%; justify-content: flex-end; min-height: 1.5rem; }
.header .mar .topmenu .grids{ display:block; color:#fff; margin:0 0 0 20px; }
.header .mar .bill_home_btn img{ width:185px;}

.footer{ position:relative; }
.footer .bigimg{ width:317px; position:absolute; bottom:90px; left:0; right:0; margin:auto; z-index:2; }
.footer .bigimg img{ width:100%; }
.footer .bluebg{ background:#1a75c0; padding:60px 20px 20px 20px; position:relative; z-index:1; }

.footer .bluebg .links{ display:flex;  justify-content:center; }
.footer .bluebg .links a{ color:#fff; font-size:1rem; font-weight:bold; text-decoration:none; padding:0 14px; }
.footer .bluebg .text{ width:100%; text-align:center; font-size:0.875rem; color:#fff; padding:15px 0 0 0; }

#main{ padding-top: 59px !important; }

.h_user_mb{ display: inline-block; }

/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/
@media screen and (min-width:1024px){
    .header .mar .topmenu .grids:hover{ color: #fce37b; }
    .header .mar .menus .grids:hover .h1_link{ color: #fce37b; }
    .header .mar .menus .grids:hover .du{ display:block; }
    .header .mar .menus .grids.grids_arrow:hover::before{ content:""; display:block; width:0; height:0; border-style:solid; border-width:5px 4px 0 4px; border-color:#fff transparent transparent transparent; position:absolute; top:48px; left:0; right:0; margin:auto; z-index: 1; }
    .header .mar .menus .grids .du .list:hover{ color: #fce37b; }

    #main{ padding-top: 80px !important; }
    
    .h_user_mb{ display: none; }
}

/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1023px){
.header .mar{ display:block; }
.header .mar .menubtn{ display:block; position:absolute; right:15px; bottom:0; top:0; margin:auto; width:30px; height:18px; cursor:pointer; }	
.header .mar .menubtn:before{ content:""; display:block; background:#fff; width:100%; height:2px; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; }
.header .mar .menubtn:after{ content:""; display:block; background:#fff; width:100%; height:2px; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; }
.header .mar .menubtn span{ display:block; background:#fff; width:100%; height:2px; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; margin:6px 0; }
.header .mar .logo{ position:relative; z-index:50; }

.header .mar .right{ display:none; position:absolute; top:0; left:0; right:0; margin:auto; height:100vh; background:#fff; align-content: flex-start; padding:80px 0 0 0; }
.header .mar .right .ranges{ overflow: auto; padding-bottom: 15px; }
.header .mar .right .closebtn{ display:block; position:absolute; top:12px; right:15px; width:30px; height:30px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); }
.header .mar .right .closebtn:before{ content:""; display:block; width:30px; height:2px; background:#777; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; }
.header .mar .right .closebtn:after{ content:""; display:block; width:2px; height:30px; background:#777; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; }
.header .mar .menus{ width:100%; order:1; display:block; }
.header .mar .menus .grids{ margin:0 20px; border-top:1px solid #ccc; padding:15px 0; }
.header .mar .menus .grids .h1_link{ color:#777; font-size:0.938rem; line-height:normal; margin-bottom:3px; }
.header .mar .menus .grids .du{ background:#fff; display:block; position:static; transform:none; -webkit-transform:none; -moz-transform:none; padding:0; }
.header .mar .menus .grids .du .list{ color:#000; border:none; text-align:left; padding:7px 0 0 0; }
.header .mar .menus .grids .du .list br{ display:none; }
.header .mar .menus .grids.sty{ border-top:none; padding:0 0 10px 0; }
.header .mar .menus .grids.sty .h1_link{ font-size:1.125rem; color:#000; }
.header .mar .menus .grids.lastmember{ position:static; }
.header .mar .topmenu{ order:2; display:block; margin:0 20px; border-top:1px solid #ccc; }
.header .mar .topmenu .grids{ color:#000; margin:20px 0 0 0; font-size:0.938rem; color:#777; }

.header .mar .bill_home_btn{ position:fixed; top:5px; right:5px;}

.h_user{ display: none; }
}

/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767px){
.header .mar{ display:block; }
.header .mar .menubtn{ display:block; position:absolute; right:15px; bottom:0; top:0; margin:auto; width:30px; height:18px; cursor:pointer; }	
.header .mar .menubtn:before{ content:""; display:block; background:#fff; width:100%; height:2px; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; }
.header .mar .menubtn:after{ content:""; display:block; background:#fff; width:100%; height:2px; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; }
.header .mar .menubtn span{ display:block; background:#fff; width:100%; height:2px; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; margin:6px 0; }
.header .mar .logo{ position:relative; z-index:50; }

.header .mar .right{ display:none; position:absolute; top:0; left:0; right:0; margin:auto; height:100vh; background:#fff; align-content: flex-start; padding:80px 0 0 0; }
.header .mar .right .ranges{ overflow: auto; padding-bottom: 15px; }
.header .mar .right .closebtn{ display:block; position:absolute; top:12px; right:15px; width:30px; height:30px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); }
.header .mar .right .closebtn:before{ content:""; display:block; width:30px; height:2px; background:#777; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; }
.header .mar .right .closebtn:after{ content:""; display:block; width:2px; height:30px; background:#777; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; }
.header .mar .menus{ width:100%; order:1; display:block; }
.header .mar .menus .grids{ margin:0 20px; border-top:1px solid #ccc; padding:15px 0; }
.header .mar .menus .grids .h1_link{ color:#777; font-size:0.938rem; line-height:normal; margin-bottom:3px; }
.header .mar .menus .grids .du{ background:#fff; display:block; position:static; transform:none; -webkit-transform:none; -moz-transform:none; padding:0; }
.header .mar .menus .grids .du .list{ color:#000; border:none; text-align:left; padding:7px 0 0 0; }
.header .mar .menus .grids .du .list br{ display:none; }
.header .mar .menus .grids.sty{ border-top:none; padding:0 0 10px 0; }
.header .mar .menus .grids.sty .h1_link{ font-size:1.125rem; color:#000; }
.header .mar .menus .grids.lastmember{ position:static; }
.header .mar .topmenu{ order:2; display:block; margin:0 20px; border-top:1px solid #ccc; }
.header .mar .topmenu .grids{ color:#000; margin:20px 0 0 0; font-size:0.938rem; color:#777; }

.header .mar .bill_home_btn{ position:fixed; top:11px; right:5px;}
.header .mar .bill_home_btn img{ width:143px;}

.h_user{ display: none; }
}