/*-------Header-------*/
        /* fix header menu bs4 to bs5 */
        @media (min-width: 1200px){
            .container.header__container {
                max-width: 1140px;
            }
        }  
        .header-space{ height: 66px; }
        .header-space-frs{ height: 71px; }
        @media (max-width:991px){
            .header-space{ height: 66px; }
        }        
        @media (max-width:767px){
            .header-space{ height: 56px; }
        }    
          

        header { padding-top: 8px; min-height: 50px;background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); position: fixed; font-family: "微軟正黑體";
            top: 0;right: 0;left: 0;z-index: 1030; line-height: 1.5; }
            header:after{clear: both;content: "";display: inline-block;width: 100%;height: 8px;
            position: absolute;    left: 0;    top: 0;    background: #0098D1;
            background: -moz-linear-gradient(left, #0098D1 5%, #01b6b2 95%);
            background: -webkit-linear-gradient(left, #0098D1 5%,#01b6b2 95%);
            background: linear-gradient(to right, #0098D1 5%,#01b6b2 95%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0098D1', endColorstr='#01b6b2',GradientType=1 );
            }
            header ul{ margin: 0;padding: 0; }
            .m-nav-open{
                display: none;
                width:100%;
                height:100%;
                bottom: 0;
                background: rgba(0,0,0,0.7);
                overflow: hidden;
                position: fixed;
                z-index: 100;
    
            }
            header .header__container{
                padding-left: 0;
                padding-right: 0;
                background-color: #fff;
            }
    
            .header__container{ padding-top: 0px;   }
            .navbar__list{ justify-content: flex-end; font-size: 17px;}
            .navbar__btn,
            .navbar__btn:hover{ color: #fff; }
    
            .nav-member-icon{ display: inline-block; vertical-align: middle; width: 20px; height: 20px; 
                background: url("https://www.fubon.com/life/direct/system/home/images/member_icon.png") no-repeat; }
    
            .header .navbar-light .navbar-toggler-icon{ 
                background-image:url("https://www.fubon.com/life/direct/system/home/images/hamburger.svg");
                background-size: auto;
                background-position-y: initial;
            }
    
            /*Header-LOGO*/
            .header .navbar{ align-items: flex-start; }
            .logo{ padding-top: 5px; display: flex;}
            .logo h1{display: inline-block; margin-bottom: 0; font-weight: normal; line-height: 1.5; font-size: 100%; }
            .main-logo {margin: 0; padding: 0; }
            .main-logo img { max-width: 140px; height: auto; vertical-align: baseline; }
            .main-logo__text{ display: inline-block; font-size: 16px; padding-left: 5%; padding-top: 12px; vertical-align: top; }
            /* .sub-logo{ margin-top: -14px; margin-right: 0; padding: 0;  vertical-align: top; } */
    
            @media(max-width:767px){
                .main-logo__text{ padding-top: 6px;padding-left: 6%; }
                .main-logo img { max-width: 110px;}
            }
    
    
            /*Header-立即購買*/
            .applyBox__btn-count {color: #fff;  background-color: #ff4200;	}
            .applyBox__btn-more { color: #fff; background-color: #419283;	}
            .applyBox__btn-blue {color: #fff;  background-color: #2c7ec2;	}
            .applyBox__btn__txt--yellow { color: #ffed21; }
    
            .applyBox__btn-count:hover,
            .applyBox__btn-more:hover,
            .applyBox__btn-blue:hover{ color: #fff; }
    
            /*Header-分享*/
            .nav-item__fb,
            .nav-item__line,
            .nav-item__mail{display: inline-block; width: 100%; width: 30px;height: 30px; text-indent: -9999px; background-image: url('../images/share_button_2.png'); background-repeat: no-repeat;  background-size: 90px 60px; }
            .nav-item__fb{ background-position:-30px 0; }
            .nav-item__line{ background-position: 0 0}
            .nav-item__mail{ background-position:-60px 0 }
            .nav-item__fb:hover{ background-position:-30px -30px; }
            .nav-item__line:hover{background-position: 0 -30px }
            .nav-item__mail:hover{ background-position:-60px -30px }
    
            /*Header-選單RWD*/
            @media (max-width: 767px){
                .header .navbar-brand{ line-height: 1; }
                .header .navbar{ padding:5px 0.5rem;  }
                
                .main-logo{ /*margin-right: 12px;*/ width: 110px; }
                /* .sub-logo{ margin-top: 3px; padding-left: 12px; }
                .sub-logo img{ height: 24px;} */
            }  
    
            @media (min-width: 992px){
                /* .header {min-height: 65px;} */
                .header__container{ padding-top: 5px; }
            }
    
            @media (max-width: 991px){
                .headerSpace{ padding-top: 65px;  }
                .header__container{ max-width: none; }
                .navbar__list{ padding-top: 20px;  /*margin: 6px -1rem 0;border-top: 1px solid #c9c9c9;  */}
                .navbar__btn{ position: absolute; top:10px; right:70px;}
            }
    
            @media (max-width: 767px){
                .headerSpace{ padding-top: 56px;  }
                .navbar__btn.navbar__btn{ font-size: 13px; padding: 5px; }
            }       
    
            /* nav-menu */
            @keyframes fadeIn{
                0% { opacity: 0; }
                100% { opacity: 1; }
            }
            @-webkit-keyframes fadeIn{
                0% { opacity: 0; }
                100% { opacity: 1; }
            }
            @-moz-keyframes fadeIn{
                0% { opacity: 0; }
                100% { opacity: 1; }
            }
    
            .header__container .navbar{ position: static; }
    
            .nav-menu{text-align: right;}
            .nav-menu a{color: #333;}
    
            .nav-menu > li{display: inline-block;margin: 0 20px;}
            .nav-menu > li a.nav-link {
                display: block;
                font-size: 100%;
                font-weight: bold;
                padding: 10px 0;
                cursor: pointer;
            }
    
            @media (max-width:1200px){
                .nav-menu > li{margin: 0 8px;}
            }
            @media (min-width:992px){
                .nav-menu a:hover{text-decoration:none;color:#0098D1;background: #fff;    border-color: #0098d1;}
            }
    
            .sec-nav{display: none;padding: 30px 0;width: 100%;min-height: 100px;position: absolute;left: 0;top: 100%;z-index: 20;
                border-top: 1px solid #00b6b1;box-shadow: 0px 5px 8px -3px rgba(0, 0, 0, 0.3);background-color: #fff;}
            .nav-menu > li:nth-child(2) .sec-nav{padding: 30px 0 95px 0;}
            .nav-menu > li:nth-child(2) .sec-nav .sec-nav-container {max-width: 1080px;}
            .nav-menu > li:nth-child(2) .sec-nav .sec-nav-container > div  {
                padding: 0 5px 0 15px;
            }
    
            .sec-nav-container{display: flex; justify-content: space-between;margin: 0 auto;/*overflow: hidden;*/max-width: 850px; position: relative; }
            /* .sec-nav-container--lg{ max-width: 850px; } */
            .sec-nav-container>div{ border-left: 1px solid #DDD;  padding: 0 15px; }
            .sec-nav-container>div:first-child{border-right: 0px;}
    
            .sec-nav-container__btn{ position: absolute; top: auto; left: 0; z-index: 1; /*! white-space: nowrap; */  display: block;width: 100%;bottom: -60px;}
            .sec-nav-container__btn .btn{ padding-left: 20px; padding-right: 20px; }
    
            @media (min-width:992px) and (max-width:1199px){
                .sec-nav-container{ flex-wrap: wrap; }
                .sec-nav-container__btn{ position: static; width: 100%; padding-top: 20px; }
            }
    
            @media (max-width:991px){
                .sec-nav-container__btn{ position: static; padding: 20px 15px; text-align: center;  display: block; }
            }
    
    
            .sec-nav ul li{display: block;width: 100%;text-align: left;margin:3px 0px; font-size: 16px; }
            .sec-nav .name{display:block;font-size: 100%;color: #00b6b1;text-align: left;width:100%;}
            .sec-nav ul li a.nav-link{font-size: 90%;padding: 0;height: 28px;font-weight: normal;}
            .navbar-light .navbar-nav .nav-link { color:#333; }
            .sec-nav ul li a.nav-link:hover{text-decoration: underline;color: #337ab7;}
    
            .navbar button[aria-expanded=true] .navbar-toggler-icon{ display: none; }
            .navbar button[aria-expanded=false] .navbar-close{ display: none; }
            .navbar button[aria-expanded=true] .navbar-close{ display: inline-block; padding-top: 10px; padding-bottom: 4px;}
            .navbar-close{font-size: 20px; }
    
            @media (min-width:992px){
                .nav-menu > li a.nav-link.nav-item__btn,
                .nav-item__btn{ display: inline-block; border-radius: 5px; border: 1px solid #ccc; padding:6px 15px; font-size: 16px; line-height: 20px; }
                .nav-item__btn img{ vertical-align: top; }

                .nav-menu > li.nav-item-straight .sec-nav{ padding-top: 30px; padding-bottom: 30px; }    
                .nav-menu > li > a.nav-link:hover .nav-member-icon{ background-position:0 -20px }
                .nav-menu > li > a.nav-link:hover,
                .nav-menu > li > a.nav-link.menu-active{color: #0098D1 !important;text-decoration: none;border-bottom: 5px solid #0098D1;}    
                .nav-menu > li:hover .sec-nav{display: block!important;}  
                .nav-menu > li a.nav-link{ border-bottom: 5px solid #fff; }
    
                .nav-menu > li a.nav-link.nav-item__btn,
                .nav-item__btn{ display: inline-block; border-radius: 5px; border: 1px solid #ccc; padding:6px 15px; font-size: 16px; line-height: 20px; }
                .nav-item__btn img{ vertical-align: top; }
    
                .sec-nav{ animation-name: fadeIn;animation-duration: 1s; display: none !important; }
                .sec-nav-container>div{ flex: 1; }
                .nav-item-straight .sec-nav-container{ display: block;  }
                
                .nav-item-small,
                .nav-item-straight{ position: relative; }
                .nav-item-small .sec-nav,
                .nav-item-straight .sec-nav{ width: auto; right: -50px; left: -50px;  }
            }                      
            @media (max-width:991px){
                .nav-menu > li > a.nav-link.menu-active{color: #0098D1; padding-left: 20px; } 
                .nav-menu > li > a.nav-link.menu-active::before{ content: ''; display: inline-block; width: 5px; height: 40px; position: absolute; 
                    top: 50%;  left: -16px; z-index: 1; transform:translateY(-50%); background:#0098D1;  }
    
                .nav-menu > li a.nav-link{ padding: 20px 10px; border-bottom: 1px solid #ccc; position: relative; }
                .nav-menu > li:last-child a.nav-link{ border-bottom:none; }
                .nav-menu > li a.nav-link:after{content:'＞'; position: absolute; right: 0; top: 50%; transform: translateY(-50%) scaleX(0.5); 
                z-index: 1;font-size: 40px;color: #bbb; font-weight: normal;} 
                .nav-menu > li a.nav-link.no-arrow:after{content:''; } 
    
                .navbar-logout-btn{ padding-top:60px; }
                .navbar-logout-btn a.nav-link:after{ display: none; }
    
                .sec-nav{ padding: 7px 0 15px; position:fixed; top:8px; bottom:0; border:none;overflow: auto;-webkit-overflow-scrolling: touch;}
                .sec-nav-container{ display: block; }
                .sec-nav-container>div { width: auto; border-right: none; padding-top: 20px; padding-bottom: 20px; border:none; border-bottom:1px solid #ddd;  }
                .sec-nav ul li{ padding: 5px 0 5px 17px; }
                .sec-nav ul li.name{ padding-left: 0; }
    
                .sec-nav .btn-link{ color: inherit;}
                .sec-nav .btn-link:hover{ text-decoration: none; }
    
                .sec-nav .btn-link.navbar-close{ padding-left: 19px; padding-right: 19px; color: rgba(0,0,0,.5); }
                .js-navbar-back svg,.sec-nav-container__btn .btn svg{position:relative;top:-2px;}
                .navbar button[aria-expanded=true] .navbar-toggler-icon-new {
                    display: none;
                }
            } 
    
            @media (min-width:768px) and (max-width:991px){
                .nav-menu > li > a.nav-link.menu-active::before{  left: -24px; }
            }
    
            

        .sub-logo {margin-top: 0; margin-bottom: 0; padding: 0; display: flex;line-height: 1; border: none;  }
        .sub-logo__text{ margin-left: 14px; padding: 0 0 0 12px;  border-left: 2px solid #f5f5f5; align-self: center;}
        
        @media (min-width: 768px){
            .sub-logo {margin-top: 0; margin-bottom: 0; font-size: 1.125rem;}
        }
        
        @media (max-width: 767px){
            .sub-logo { font-size: 1rem; }
        }  
        @media (max-width: 374px){
            .sub-logo { font-size: 0.8rem; }
            .sub-logo__text { margin-left: 10px; padding: 0 0 0 8px; }
        }