header{position:relative;width:100%; z-index:99999999; background-image: linear-gradient(45deg, #ffffff, #3b4a6b);}
body.hightfix { height:100vh; overflow:hidden;}
header.hightfix2 {height:100vh;overflow-y:scroll; background:#fff;}

.logo{width: 250px; position: absolute;z-index:123;padding:0 10px;left: 15px;}
.logo a{color:#6DDB07;}
.logo a h1 { text-indent:-99999px; display:inline-block; width:1px; height:1px;display: none;}
.logo a img {width: 100%;}
nav{position:relative;}
#cssmenu {margin: 0 auto;padding: 15px 15px 15px 250px;}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile{border:0;list-style:none;line-height:1.2;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display: flex;align-items: center;justify-content: flex-end;}
#cssmenu ul.wauto { width:calc(100% - 320px); display:inline-block; padding:20px 0 0;}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu > ul { text-align:right;display: flex;justify-content: flex-end;flex-wrap: wrap;width: 70%;padding: 0 20px 0 0;}
#cssmenu > ul > li{ /*float:left;*/ display:inline-block; vertical-align:top; padding:0;}
#cssmenu > ul > li > a{font-size:16px;font-family: "Noto Sans", sans-serif; letter-spacing:1px;text-decoration:none;color:#211715;font-weight:500; padding:5px 10px;position: relative;}
#cssmenu > ul > li > a::after{content:"";width: 1px;height: 16px;background-color: #C8C5C4;position: absolute;right: 0;top:50%;transform: translateY(-50%);}
#cssmenu > ul > li:last-child>a::after{display: none;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#333;}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{}
/*
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:19px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:16px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
*/
#cssmenu > ul > li.has-sub > a:before{ content:''; display: block; width:8px; height:8px; border-style: solid; border-width: 0 1px 1px 0; border-color: transparent #fff #fff transparent; position:absolute; top:13px; right:14px;display: none;
-webkit-transform: rotate(45deg); transform: rotate(45deg);
-webkit-transition: border .2s; transition: border .2s;
}

#cssmenu > ul > li + a:after{ display:none;}
#cssmenu > ul > li + a:before{ display:none;}

#cssmenu ul ul{position:absolute;left:-9999px;display: inline-block;text-align: left;}
#cssmenu ul ul li{-webkit-transition:all .25s ease;-ms-transition:all .25s ease; transition:all .25s ease; background: #fff; text-align:left; border: 2px #EEEEEE solid;border-radius: 5px;overflow: hidden;}
#cssmenu ul ul li+li{margin-top: -2px;}
/* #cssmenu ul ul li:hover { background-color: #3B4A6B; color:#fff;} */

#cssmenu li:hover > ul{left: -60px; z-index:5;}
#cssmenu li:hover > ul > li{/*height:35px*/}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{
	justify-content: center;
	border: 1px solid #fff;
    padding: 8px 10px;
    min-width: 120px;
    text-decoration: none;
    font-weight: 400;
    color: #201714;
    font-size: 14px;
	text-align: center;
}
#cssmenu ul ul li:hover a { color:#EE7445;background-color: transparent;}

#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a{border-bottom:0}
/*
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
*/
#cssmenu ul ul li.has-sub > a:before{ content:''; display: block; width:8px; height:8px; border-style: solid; border-width: 0 1px 1px 0; border-color: transparent #ccc #ccc transparent; position:absolute; top:13px; right:14px;
-webkit-transform: rotate(-45deg); transform: rotate(-45deg);
-webkit-transition: border .2s; transition: border .2s;
}

#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li a { color:#343a40; font-size:13px;}
#cssmenu ul li.has-sub ul li.has-sub ul li:hover a { color:#fff;}

#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333;}


/**/

.me_tp_features{width: 270px;display: flex;}
.me_tp_features a {font-size:14px;color: #000;}
.me_tp_features a i.fa{margin:0 3px;}
.me_tp_features a.tp_btn_cart{width: 40px;position: absolute;right: 300px;top: 8px;}
.me_tp_features a.tp_btn_notice {}
.me_tp_features a.tp_btn_apply{width: 100px;margin:0 5px;border-radius: 50px;background-color: #CA1A24;padding: 5px;font-size: 16px;color: #FFF;font-weight: bold;text-align: center;text-decoration: none;display: none;}

/*Sreach*/
.box_search {width: 150px;position:relative;}
/*.shop_search_txt { background:#fff; color:#666; border:none; border-radius:20px; padding:6px 60px 6px 10px; position:absolute; top:0; right:0; z-index:1; font-size:15px; height:19px;}*/
.shop_search_btn { background:#263E4C; color:#fff; font-size:14px; font-weight: 500; line-height: 120%; letter-spacing: 0.02em;text-indent: 0.02em;text-align: center; border:none; position:absolute; top:0; right:-1px; z-index:5; padding: 5px 5px; cursor:pointer;width: 50px; height: 100%;border-radius: 5px;}

.box_search input[type=text] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box; 	
	background: url(../images/search-icon.png) no-repeat 9px center #fff;
	border: solid 1px #DDDDDD;
	padding: 7px 15px 7px 15px;
	border-radius: 10em;
	transition: all .5s;
	outline:none;
	width: 120px;
	border-radius: 5px;
}
.box_search input::placeholder {
	color:#CCCCCC;
	font-size: 14px;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: 0.02em;
}
/*.box_search input[type=text]:focus { color:#e63917; width:160px;}*/


@media screen and (max-width:1200px){
#cssmenu ul.wauto { width:100%; text-align:center;}

#cssmenu > ul > li { display:inline-block; float:none; padding:0 3px;}
}

@media screen and (max-width: 1000px){

	.logo{position: static;}
	#cssmenu{padding: 15px;flex-wrap: wrap;justify-content: center;}
	#cssmenu > ul{width: 100%;padding: 0;margin: 5px auto;text-align: center;justify-content: center;}


}

@media screen and (max-width:768px){
header { position: relative; background-image: linear-gradient(45deg, #ffffff, #3b4a6b);top: 0;left: 0;}
.logo { position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none; position:static; height:auto; padding: 0 0 7px 0;}
.logo2{display:none}
.logo a img { max-width:190px;}
.me_tp_features a.tp_btn_apply{width: 80px;padding: 3px 5px;font-size: 14px;position: absolute;right: 45px;top: 33px;}
.shop_search_btn{top: 3px;}
.box_search input[type=text]{top: 5px;}

nav{ width:100%;}
#cssmenu{ width:100%;justify-content: flex-start;}
#cssmenu li:hover > ul{left: 0;}
#cssmenu ul.wauto {}
#cssmenu ul li{ width:100%; border-top:1px solid #f0f0f0;}
#cssmenu ul li a { color:#3a4660;}
#cssmenu > ul { text-align:left; margin:0; padding: 15px 0;}
#cssmenu > ul > li{float:none;}
#cssmenu > ul > li.has-sub > a {}
#cssmenu > ul > li:hover > a { background:#BDD0F2; color:#000; padding:10px 30px 15px 10px;}
#cssmenu ul ul { position:relative;left:0;width:100%;margin:0;text-align:left; border:none;}
#cssmenu ul ul li { border-left:6px #d9dadf solid; background:none;}
#cssmenu ul ul li:hover{}
#cssmenu ul ul li a { color:#3a4660;}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a{color:#fff}
#cssmenu ul ul ul { position:relative;left:0;width:100%;margin:0;text-align:left; border:none;}
#cssmenu ul ul ul li { border-left:6px #96a1b7 solid;}
#cssmenu ul ul ul li a { border:none; border-left:1px #fff solid;}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile{display:block; color:#ddd;font-size:12px;font-weight:700}

.button{width:55px;height:46px;position:absolute;right:0;top: 7px;cursor:pointer;z-index: 12399994; border-radius:5px;}
.button:after { content:''; position:absolute;top:22px;right:20px;display:block;height:10px;width:20px;border-top:2px solid #000;border-bottom:2px solid #000;}
.button.menu-opened:after { top:23px;border:0;height:2px;width:19px;background:#211715;
-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);
-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;}

.button:before { content:''; position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#000;
-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;}
.button.menu-opened:before{top:23px;background:#343a40;width:19px;
-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}

#cssmenu .submenu-button { position:absolute;z-index:99;right:0;top:0;display:block;height:40px;width:100%;cursor:pointer}
#cssmenu .submenu-button:before { content:''; position:absolute; top:12px; right:20px; display:block; width:8px; height:8px; border-style: solid; border-width: 0 1px 1px 0; border-color: transparent #ccc #ccc transparent;
-webkit-transform: rotate(45deg); transform: rotate(45deg);
-webkit-transition: border .2s; transition: border .2s;}

#cssmenu .submenu-button:before { border-color: transparent #343a40 #343a40 transparent;}
#cssmenu .submenu-button.submenu-opened:before { border-color: transparent #fff #fff transparent;}
#cssmenu > ul > li:hover > .submenu-button.submenu-opened:before { border-color: transparent #fff #fff transparent;}

#cssmenu .submenu-button.submenu-opened + a{background-color: #EE7445; color:white;}

#cssmenu ul ul ul li.active a{border-left:none}

#cssmenu ul ul li a {
    color: #EE7445;
    max-width: 100%;
    width: 100%;
    text-align: right;
    justify-content: flex-end;
}

#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}

#cssmenu > ul.wautot.open > li { }
#cssmenu > ul.wautot.open > li > ul.dropdown-menu {}
#cssmenu > ul.wautot.open > li > ul.dropdown-menu.open { background:#f0f0f0;}
#cssmenu > ul.wautot.open > li > ul.dropdown-menu li {}
#cssmenu > ul.wautot.open > li > ul.dropdown-menu.open > li > ul.dropdown-menu.open { background:#b4bccf;}
#cssmenu > ul.wautot.open > li > ul.dropdown-menu.open > li {}


.me_tp_features { position:static;}
.me_tp_features a.tp_btn_cart {
    position: absolute;
    right: 40px;
    top: 22px;
}
.shop_search_txt {}
.search_box { margin:10px 0 0 0;}
.box_search { width:100%;}
.box_search input[type=text] { width:90%; right:5%; margin:0; box-sizing:border-box; padding:14px 10px 14px 32px;}
.box_search input[type=text]:focus { width:90%;}
.shop_search_btn { right:5%;}

#content { padding:84px 0 0 0;}

}
@media screen and (max-width:640px){
.logo a{ display:block;text-align: left;padding: 0 0 0 5px;}
}

@media screen and (max-width:400px){
.logo a img{max-width: 150px;}
}


/* 選單調整 */
header {
	box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
}

#cssmenu {
	padding: 20px 170px 20px 0;
	;
	max-width: 1710px;
	width: 95%;
	margin: auto;
}

.logo {
	max-width: 225px;
	width: 100%;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	padding: 0;
}

.logo a {
	display: block;
	padding: 0;
}

#cssmenu>ul {
	padding: 0;
	max-width: 820px;
	width: 100%;
	margin: 16px 0;
}

.me_tp_features {
	width: fit-content;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

header {
	/* background-color: #BDD0F2; */
	background-image: none;
}

@media screen and (max-width: 1450px) {

	/*header*/
	.nav ul li a {
		font-size: 16px;
		background-position: left center;
	}
}

@media screen and (max-width: 1350px) {
	#cssmenu>ul {
		max-width: 600px;
	}

	#cssmenu>ul>li:nth-of-type(6)>a {
		padding-right: 0;
	}

	#cssmenu>ul>li:nth-of-type(6)>a::after {
		display: none;
	}

	#cssmenu>ul>li:last-child>a {
		padding-right: 0;
	}

	#cssmenu>ul:after {
		display: none;
	}
}

@media (max-width:1000px) {
	#cssmenu {
		padding: 20px 0;
	}

	#cssmenu>ul {
		margin: 0;
		max-width: 100%;
	}

	.logo {
		transform: unset;
		height: auto;
		margin-bottom: 20px;
	}

	.me_tp_features {
		position: static;
		transform: unset;
		margin-top: 20px;
	}
}

@media(max-width:768px) {

	.nav ul li a {
		padding: 10px;
		text-align: center;
		background-color: #BBB;
		border-bottom: 1px solid #FFF;
	}

	.box_search {
		display: none;
	}

	.button {
		top: 25px;
		right: -19px;
	}

	#cssmenu>ul {
		position: relative;
		top: 21px;
	}

	#cssmenu>ul>li:nth-of-type(n)>a {
		padding: 5px 10px;
	}

	#cssmenu>ul>li:nth-of-type(n)>a::after {
		display: block;
	}

	#cssmenu>ul>li:nth-of-type(2)>a,
	#cssmenu>ul>li:nth-of-type(6)>a {
		padding-right: 25px;
	}

	#cssmenu .submenu-button:before {
		border-color: transparent #211715 #211715 transparent;
	}

	#cssmenu .submenu-button:before {
		top: 10px;
		right: 12px;
	}

	#cssmenu ul li a {
		color: #211715;
	}

	#cssmenu>ul>li:hover>a {
		background: #EE7445;
		color: white;
	}

	#cssmenu>ul>li:hover>.submenu-button:before {
		border-color: transparent #fff #fff transparent;
	}

	#cssmenu ul ul li a {
		color: #EE7445;
	}

	#cssmenu>ul.wautot.open>li>ul.dropdown-menu.open>li:hover a {
		background-color: #EE7445;
	}

	header {
		background-color: #ffffff;
		overflow: hidden;
	}

	.box_search {
		width: 100%;
	}

	.logo {
		padding: 0;
		margin: 0;
	}

	.me_tp_features a.tp_btn_apply {
		width: 90px;
		padding: 7px 5px;
		font-size: 15px;
		position: absolute;
		right: 45px;
		top: 15px;
	}
}

@media (max-width:400px) {
	#cssmenu {
		width: 90%;
	}

	.button {
		top: 18px;
	}
}


