*{ box-sizing: border-box; }
body.no_scroll{
    position: fixed;
    width: 100%; 
    height: 100%;
    overflow: hidden;
}

.headers{ 
    width: 100%; padding:0 0 0 5%; background-color: #fff; transition: top .5s linear; 
    top:-100%; }
.headers .header_container{ 
    width: 100%;
    padding:20px 0;
    position: relative;
 }

.headers .header_container .logo_area{border:0px #c00 solid;}
.headers .header_container .logo_area > a > .logo{width: 100%; max-width: 250px; min-width: 180px;}
.headers .header_container .logo_area > a > .logo > img{width: calc(100% * 0.45); display: block; height:auto}
.headers .header_container .menu_area{border:0px #c00 solid; flex:1; gap:10px}
.headers .header_container .menu_area > ul.company{ background-color: var(--menubackground); margin: 0; padding: 0 5% 0 3%; list-style: none; gap:30px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
/*.menu_area > ul.company > li{}*/
.headers .header_container .menu_area > ul.company > li > a{ 
    color:white; text-decoration: none; padding:3px 10px; display:inline-block;
    font-size:14pt; font-family: 'Noto Sans TC', '微軟正黑體'; font-weight: 400; }
.headers .header_container .menu_area > ul.company > li > a:hover{ color:var(--yellow)}
.headers .header_container .menu_area > ul.company > li > a.hover{color:var(--yellow)}
.headers .header_container .menu_area > ul.products{ margin: 0; padding: 0; padding-right: 5%; list-style: none; gap:50px; }
/*.menu_area > ul.products > li{}*/
.headers .header_container .menu_area > ul.products > li > a{ 
    color: var(--black); text-decoration: none; padding:3px 10px; display:inline-block; 
    font-size:14pt; font-family: 'Noto Sans TC', '微軟正黑體'; font-weight: 500;}
.headers .header_container .menu_area > ul.products > li > a:hover{color:var(--menubackground)}
.headers .header_container .menu_area > ul.products > li > a.hover{color:var(--menubackground)}

.headers .mobile_menu{ 
    border:1px var(--menubackground) solid; border-radius: 10px; width: 45px; height:40px; position:absolute; 
    right:5%; top:50%; transform: translateY(-50%); background-color: #fff; display: none; z-index: 2;
}
.headers .mobile_menu > span{ 
    display: block; width:70%; height:2px; 
    background-color: var(--menubackground);
    transition: all .2s linear;
 }
.headers .mobile_menu > span:nth-child(1){ position: absolute; left:50%; top:25%; transform: translate(-50%,-50%);}
.headers .mobile_menu > span:nth-child(2){ position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);}
.headers .mobile_menu > span:nth-child(3){ position: absolute; left:50%; top:75%; transform: translate(-50%,-50%);}

.headers .mobile_menu.hover > span:nth-child(1){transform: translate(-50%,-50%) rotate(45deg); top:50%}
.headers .mobile_menu.hover > span:nth-child(2){opacity: 0;}
.headers .mobile_menu.hover > span:nth-child(3){transform: translate(-50%,-50%) rotate(-45deg);top:50%}


/**/
.headers.scroll{ position: fixed; z-index: 2; top:0%; box-shadow: 0 0 9px rgba(0,0,0,.3); }
.headers.scroll .header_container{padding:10px 0;}
.headers.scroll .header_container .logo_area > a > .logo > img{
    width: calc(80% * 0.4); height:auto; display: block;}
.headers.scroll .header_container .menu_area{gap:8px}
.headers_sub{ 
    width: 100%; display:none;
}
.headers_sub.scroll{ 
    width: 100%; display:block;
}

#mobile_menu_interface{
    display:block; position: fixed; top:0; left:0; width: 100%; max-width: 960px; height:100vh; padding:0px;
    border:0px #c00 solid; z-index: 3; background-color: #fff; overflow-y: auto; transition: all .3s linear;
    opacity: 0; left:-100%
}

#mobile_menu_interface.hover{ opacity: 1; left: 0; }

#mobile_menu_interface > .mobile_menu_container{
    border:0px #c00 solid; width: 100%; position: relative;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
    padding:20px 0;
    gap:0px;
}

#mobile_menu_interface > .mobile_menu_container .mobile_menu_close{ 
    display: flex; width: 45px; height:45px; border:0px #c00 solid;
    position: absolute; right:30px; top:20px; z-index: 1;
}
#mobile_menu_interface > .mobile_menu_container .mobile_menu_close > span{
    position: absolute; width: 80%; height:2px; 
    background-color: var(--menubackground); top:50%;
}
#mobile_menu_interface > .mobile_menu_container .mobile_menu_close > span:nth-child(1){ 
    transform: translate(-50%,-50%) rotate(45deg); left: 50%; }
#mobile_menu_interface > .mobile_menu_container .mobile_menu_close > span:nth-child(2){ 
    transform: translate(-50%,-50%) rotate(-45deg); left:50% }

.mobile_headers{display: block;padding:0 30px;}
.mobile_headers > img{width: 100%; display: block;}



ul.mobile_company,
ul.mobile_products,
ul.mobile_contact{
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%;
    list-style: none; padding: 0; margin: 0px 0;
}
ul.mobile_company{background-color: var(--menubackground); margin-top:20px}
ul.mobile_company > li{ border-bottom: 1px #fff solid; width: 100%;}
ul.mobile_company > li:hover{ background-color: var(--drakGreen);}
ul.mobile_company > li a, 
ul.mobile_products > li a{ font-size:14pt; width: 100%; padding:10px 40px; display: block; }
ul.mobile_company > li a{
    color:#fff
}
ul.mobile_products > li{ border-bottom: 1px var(--coffee) solid; width: 100%;}
ul.mobile_products > li:hover{ background-color: var(--lightGray); }
ul.mobile_products > li a{
    color:var(--coffee)
}

/*
ul.mobile_company > li:last-child, 
ul.mobile_products > li:last-child{border: 0;}
*/
ul.mobile_contact{margin:20px 0}
ul.mobile_contact > li{
    width: 100%; padding:10px 40px;font-size:14pt;color:var(--black);
    display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;
    gap:8px; line-height: 1.5;
}
ul.mobile_contact > li img{ width: 25px; height: auto; padding: 0;}
ul.mobile_contact > li span{padding: 0;}
ul.mobile_contact > li a{ color: var(--drakGreen); text-decoration: underline;padding: 0;}



@media screen and ( max-width:959px ){
    .headers > .header_container > .menu_area {
        display: none;
    }
    .headers .mobile_menu{display: flex;}

    .headers .header_container .logo_area > a > .logo > img{
        width: 30%; height: auto;
    }
    .headers.scroll .header_container .logo_area > a > .logo > img{
        width: 30%; height: auto;
    }
    .headers .header_container{ padding:10px 0}
    
}

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