@charset "utf-8";
body.fixed{ overflow:hidden; }
header{ background:#f7f7f7; position:relative; z-index:99;}
header .header_container{ position:relative; /*padding:1.5rem 0;*/ text-align:left; top:0; width:100%; background:#f7f7f7; }
header .header_container.fixed{ position:fixed; }
header .header_container:before ,header .header_container:after{ content:''; display:block; width:100%;}
header .header_container:before{ background:#006341; height:10px; }
header .header_container:after{ position:absolute; background:#1e1e1e; height:3px; opacity:.15;}
header .header_container .container{ padding:1.5rem 20px; }

header .logo a{ width:100%; }
header .logo a:before{ content:''; display:block; background:url('../images/logo.png'); background-size:cover; padding-top:100%;}
header .blank{ display:inline-block; }
header .container .utility_list{ position:absolute;}
header .container .utility_list ul{display:flex;}
header .container .utility_list ul li a:before,
header .secon_nav a:before{ background:url('../images/header_utility_list.svg') top left no-repeat; background-size:400%; margin:0 2px;}
header .submenu .menu_content{ display:none;}

/*25週年*/
/*header .blank nav > ul > li:nth-of-type(8) a:nth-of-type(1){ display:flex; align-items:center; }
header .blank nav > ul > li:nth-of-type(8) a:nth-of-type(1):before{ content:''; width:38px; height:38px; background:url(../images/th25_logo.png); background-size:cover; border-radius:50%; display: inline-block; margin-right:6px; }
*/

@media (max-width:768px){
header .logo{ width:50px; }
header .blank{ width:100%; position:fixed; left:0; transition:background .3s; pointer-events:none;}
header .blank nav,
header .submenu{ position:fixed; background:#f7f7f7; width:320px; max-width:calc(100% - 100px);  padding:20px; right:0; transform:translateX(100%);  transition:transform .6s cubic-bezier(0, 0, 0.19, 0.99); }
header .blank,
header .blank nav,
header .submenu{ height:calc(100% - 94px); top:94px; }
header nav a{ padding:1em 0; font-size:1.8rem; width:100%; }
header .container .utility_list{ bottom:0; right:0;}
header .container .utility_list ul{flex-direction:row-reverse;}
header .container .utility_list ul li{ margin:0 1rem; }
header .container .utility_list ul li a{ padding:.25rem; }
header .container .utility_list ul li a:before{ content:''; display:inline-block; width:2.5rem; height:2.5rem; } 
header .container .utility_list ul li.store a:before{ background-position:33.3% 100%; } 
header .container .utility_list ul li.recruit{ display:none; }
header .container .utility_list ul li.navToggle{ width:3rem; height:5rem; box-sizing:border-box; padding:.25rem .25rem 2.25rem; transition:background .6s;}
header .container .utility_list ul li.navToggle span ,header .container .utility_list ul li.navToggle span:before ,header .container .utility_list ul li.navToggle span:after{ display:block; width:100%; background:#2a8a15; height:1px;}
header .container .utility_list ul li.navToggle span{ position:relative; top:50%; transition:background .3s .3s;}
header .container .utility_list ul li.navToggle span:before ,header .container .utility_list ul li.navToggle span:after{ content:''; position:absolute;}
header .container .utility_list ul li.navToggle span:before{ top:-.6em;  transition:background .2s .5s,transform .1s .3s ,top .3s .7s;}
header .container .utility_list ul li.navToggle span:after{ bottom:-.6em; transition:background .2s .5s,transform .1s .3s ,bottom .3s .7s;}
header .container .utility_list ul li.navToggle.on span{ background:transparent; transition:background .3s;}
header .container .utility_list ul li.navToggle.on span:before{ top:0; transform:rotate(45deg); transition:top .2s .1s,transform .2s .4s; }
header .container .utility_list ul li.navToggle.on span:after{ bottom:0; transform:rotate(-45deg);  transition:bottom .2s .1s,transform .2s .4s; }
header nav ul li.th20 a{ width:calc(140px + 1em); padding:9px 1em; }
header nav ul li.th20 a:before{ background-position:100% 0; }
header .secon_nav{ font-size:1.6rem; border-top:solid 1px rgba(30,30,30,.2); padding-top:16px; margin-top:16px; opacity:.7; }
header .secon_nav a{ font-size:inherit; }
header .secon_nav .recruit:hover{ opacity:.7; }
header .secon_nav .recruit:before{ content:''; display:inline-block;  width:1.8rem; height:1.8rem; vertical-align:bottom; background-position:100% 100%; } 
header .secon_nav .recruit:after{ content:'夥伴招募'; }
header .submenu{ z-index:99; }
header .submenu .menu_content{ display:none; text-align:left;}
header .submenu .menu_content.active{ display:block; }
header .submenu .menu_content .btn_back{ font-size:1.8rem; font-weight:700; border-bottom:solid 1px rgba(30,30,30,.2); margin-bottom:.6em; padding-bottom:.8em; display:block; }
header .submenu .menu_content .btn_back:before{ content:''; width:1em; height:1em; background:url(../images/icon_left.svg) left bottom no-repeat; background-size:auto 65%; display:inline-block; vertical-align:baseline; } 
header .submenu .menu_content a{ width:100%; padding:1em 0; }
header .submenu .menu_content h1{ font-size:1.8rem; }
header .submenu .menu_content h2{ display:none; }
header .submenu .menu_content ul{ margin-left:1em; }
header .blank nav li{ position:relative }
header .blank nav li .btn_submenu{ position:absolute; top:0; left:0; height:100%; display:block; z-index:2; background:transparent;}
header .blank nav li .btn_submenu:after{ content:''; display:inline-block; width:1em; height:1em; background:url(../images/icon_left.svg) left center no-repeat; background-size:auto 75%; right:0; transform:rotate(180deg); position:absolute;}
header .blank.active{ background:#00000061; pointer-events:auto; }
header .blank.active nav,
header .submenu.active{ transform:translateX(0); }
header .submenu.active{ box-shadow:inset 0 3px #1e1e1e1e; }
/*門市、星禮程、線上門市,不顯示子選單*/
header .blank nav > ul > li:nth-of-type(3) .btn_submenu,
header .submenu .menu_content:nth-of-type(3) .btn_back,
header .blank nav > ul > li:nth-of-type(4) .btn_submenu,
header .submenu .menu_content:nth-of-type(4) .btn_back,
header .blank nav > ul > li:nth-of-type(7) .btn_submenu,
header .blank nav > ul > li:nth-of-type(8) .btn_submenu{ opacity:0; pointer-events:none; }


}
@media (min-width:769px){
header .header_container{ padding-bottom:0;}
header .header_container .container{ padding-bottom:0; }
header .logo{ width:62px; }
header .logo ,header nav{display:inline-block;}
header nav{ margin-left:2.6rem; }
header nav ul{ display:flex; }
header nav ul li a{ padding:1em 1em 1.2em; font-size:1.5rem; font-weight:400; letter-spacing:.1em;}
header nav ul li.on a{ background:#1e1e1e; color:#fff;}
header nav ul li.th20 a{ width:calc(130px + 1em); padding:10px 1em 15px; }
header .container .utility_list{ top:1.5em; right:20px; font-size:1.5rem; } 
header .container .utility_list ul{flex-direction:row; align-items:flex-center;}
header .container .utility_list ul li{ margin-left:2rem; }
header .container .utility_list ul li.store a:hover{ opacity:.7; }
header .container .utility_list ul li.store a:before{ content:''; display:inline-block;  width:1.8rem; height:1.8rem; vertical-align:bottom; background-position:33.3% 0; } 
header .container .utility_list ul li.store a:after{ content:'門市查詢'; }
header .container .utility_list ul li.recruit a:hover{ opacity:.7; }
header .container .utility_list ul li.recruit a:before{ content:''; display:inline-block;  width:1.8rem; height:1.8rem; vertical-align:bottom; background-position:100% 0; } 
header .container .utility_list ul li.recruit a:after{ content:'夥伴招募'; }
header .submenu{ position:absolute; left:0; width:100%; background:#1e1e1e;}
header .submenu .menu_content{ position:relative; max-width:1320px; padding:0 3rem; margin:0 auto; text-align:left; }
header .submenu .menu_content:before{ content:''; display:block; position:absolute; height:100%; position:absolute; right:0; width:calc(100%/5); background:url(../images/pattern_stars.png) right 0; }
header .submenu .menu_content.on{ display:flex;}
header .submenu .menu_content ul{ width:calc(100%/5*4); margin:1rem;}
header .submenu .menu_content ul li{ display:inline-flex; flex-wrap:wrap; flex-direction:column; width:calc(100%/4 - 4rem); box-sizing:border-box; margin:1.5rem; vertical-align:top; align-content:flex-start;}
header .submenu .menu_content ul li h1{ font-size:1.5rem; color:#fff; margin-bottom:.4em;}
header .submenu .menu_content ul li h2{ font-size:1.5rem; color:rgba(255,255,255,.7); margin-bottom:.2em;}
header .submenu .menu_content ul li h2 a{ font-weight:normal; }
header .for-mobile{ position:absolute; pointer-events:none; opacity:0; }
header .blank nav li .btn_submenu{ display:none; }
header .submenu .menu_content:nth-of-type(3) .btn_back,
header .submenu .menu_content:nth-of-type(4) .btn_back{ opacity:0; pointer-events:none; }

/*header .blank nav > ul > li:nth-of-type(8) a:nth-of-type(1){ padding:5px 1em 5px .5em; }*/


}