@charset "utf-8";
/**color**/

/* CSS Document */
header { width: 100%; height: 100px; position: fixed; top: 0; left: 0; z-index: 999; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s; padding: 0px 3%;}

/****/
.header_icon_area{ width: 100%; margin: auto; position: relative; display: flex; flex-flow: row wrap; align-items: flex-end; justify-content: space-between; transition: padding-top 0.3s;}



.header-area .logo_area{flex: 1 auto;}
.header-area .logo{ max-width: 300px; text-align: center; margin-top: 35px;}
.header-area .logo img{ height: 35px; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s;}
.header-area .logo span{ display: block;}

/****/
.nav-container { width: 62%; margin:0px 0px 0px auto; -moz-transition: margin-top 0.3s; transition: margin-top 0.3s;}
.header_other_link { z-index: 3; display: flex; position: relative;}
.cart .bi { color: var(--bi_color); font-size: 28px; transition: all 0.4s ease-out 0s;}
.lang_icon .bi { color: var(--bi_color); font-size: 30px; transition: all 0.4s ease-out 0s; line-height: 30px;}
.cart .bi:hover, .lang_icon .bi:hover { opacity: 0.5;}


/****/
.search{width: 60px;}
.cart { width: 68px; line-height: 30px; position: relative; cursor: pointer; top: -3px;}
.lang_icon { width: 35px; line-height: 30px; position: relative; cursor: pointer;top: -5px;}
.lang_icon_photo{ cursor:pointer;}

.lang-list{ position: absolute;	display: none; width: 120px; top:55px; right: -30px;}
.lang-list a{ font-size: 90%; display: block; background: var(--list_area); text-align: center; color: var(--list_link); padding:12px 15px 6px 15px; line-height: 20px; border-bottom: 1px solid var(--list_link); }
.lang-list a:hover, .lang-list a:focus{	text-decoration: none; color: var(--list_active); background-color: var(--list_active_bg);}

.cart span{	position: absolute;  display: block; width: 22px; height: 22px; border-radius: 100%; background: #050505; line-height: 24px; text-align: center; font-size: 13px; color: #fff; top: 0px; right:30px; font-weight: 500;}

.nav-mobile{ display: none; width: 50px; height: 50px; position: relative;}
.nav-mobile a{ display: block;	padding-top: 25px;}
span.menu_style{ position: absolute; color: #352617; font-size: 14px; font-weight: 500; bottom: 2px; left: 4px;	line-height: initial;}


/****/

/****/
header.shrink { height: 85px; background-color: #ffffff; box-shadow: 0 0 13px rgba(0, 0, 0, 0.3);}


/****/


/****/
@media all and (max-width: 1536px) {
	header{padding: 0px 2%;}
	.header-area .logo{ max-width: 160px; margin-top: 20px;}
	.header-area .logo img{ height: 60px;}
	header.shrink .logo img { height: 50px;}

}
@media all and (max-width: 1280px){	
	.search{ width: 50px;}
	.cart{ width: 60px;}
	.cart span{ right: 22px;}
}
@media all and (max-width: 1024px){
	header{ padding: 0px 1.5%;}
	.header-area .logo{ max-width: 130px;}
	.header-area .logo img{ height: 50px;}
	.search{ width: 40px;}
	.cart{ width: 50px;}
	.cart span{ right: 15px;}
}
@media all and (max-width: 991px){
	header{ height: 80px;}
	header.shrink{ height: 80px;}
	.header-area .logo{ margin-top: 0px!important;}
	.header_other_link{ margin-top: 25px;}
	header.shrink .header_other_link{ margin-top: 25px;}

	.lang_icon .bi{ font-size: 28px;}
	strong.menu_style{ display: block; position: absolute; color: var(--list_active); font-size:80%; font-weight: 400; bottom: -8px; line-height: initial; right: 0px; left: 0px; margin: auto; text-align: center;}
	.header_icon_area{ align-items: center;}
	.nav-mobile { display: block; }
	.header_icon_area{ width: 100%;}
	.lang_icon{border-radius: 10px;}
}
@media all and (max-width: 768px){
	.open-btn { margin-top: 0px; }
}

@media all and (max-width: 540px){
	.header_other_link{ padding-left: 3%;}
}
@media all and (max-width: 393px) {
	header{ height: 70px;}
	header.shrink{ height: 70px;}
	.header_other_link{margin-top: 17px;}
	header.shrink .header_other_link{margin-top: 17px;}

}
@media all and (max-width: 320px){
	.header-area .logo { max-width: 100px;}

}
@media all and (max-width:280px){
	header{ height: 60px;}
	header.shrink{ height: 60px;}
	.header-area .logo img, header.shrink .logo img{ height: 30px;}

}
@media all and (max-width:240px){
	.header-area .logo { max-width: 65px;}
	.search{ width: 35px;}
	.cart{ width: 40px;}
	.cart span{right: 5px;}
}