@charset "utf-8";

/* CSS Document */
header { width: 100%; height: 98px; line-height: 98px; background: #000000b2; border-bottom: 1px solid #fff; position: fixed; top: 0; left: 0; z-index: 1040; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}

/****/
.header_icon_area{ width: 100%; margin: auto; position: relative; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; }

.header-area .logo_area{/*flex: 1 auto;*/}
.header-area .logo{ padding: 0px 50px; background-color:var(--white); }
.header-area .logo img{ height: 56px; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s;}


/****/

.header_other_link { z-index: 3; position: absolute; right: 3%; top: 35px; display: flex; transition: all 0.4s ease-out 0s;}
.header_other_link .bi { color: var(--white); font-size: 24px; transition: all 0.4s ease-out 0s;}
.header_other_link .bi:hover { opacity: 0.5;}


/****/
.search, .lang_icon, .cart{ width: 50px; margin-right: 2px; line-height: 42px; position: relative; cursor: pointer;}
.lang_icon, .cart{ width: 50px;	line-height: 42px; position: relative;}
.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: #fff; text-align: center; color: var(--red); padding:12px 15px 6px 15px; line-height: 20px; border-bottom: 1px solid #2c2c2c; }
.lang-list a:hover, .lang-list a:focus{	text-decoration: none; color: #2c2c2c;}

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

.nav-mobile{ display: none; width: 50px; padding-top: 5px; position: relative;}
.nav-mobile a{ display: block; text-align: left;}
.bi-justify-left::before { content: "\f449"; font-size: 130%;}
strong.menu_style{ display: none;}


/****/

/****/
header.shrink { height: 90px; line-height: 90px; background-color: #000; box-shadow: 0px 0px 10px #ccc;}
header.shrink .lang-list{ top: 35px;}
header.shrink .header_other_link{ top: 20px;}
/****/


/****/

@media all and (max-width: 1024px){
	.search, .lang_icon, .cart{ width: 40px;}
	.cart span{ right: 5px;}
	.header-area .logo{padding: 0px 20px;}
	.header_other_link{ right: 1%;}
}
@media all and (max-width: 991px){
	header, header.shrink { height: 75px; line-height: 75px;}
	.header-area .logo img{ height: 55px;}
	header.shrink .header-area .logo img{ height: 45px;}
	
	.header_other_link{top: 10px;}
	header.shrink .header_other_link{ top: 10px;}
	.header_other_link .bi{font-size: 32px;}
	.search, .lang_icon, .cart { width: 50px;}
	#mobile{ }
	#mobile .btn{ padding: 2px 0px; position: relative;}
	strong.menu_style{ display: block; position: absolute; font-size:70%; font-weight: 400; line-height: initial; right: 0px; left: 0px; margin: auto; text-align: center; bottom: -5px; letter-spacing: -1px;}
	.header-area .logo { text-align: left; padding-left: 20px;}
	.nav-mobile { display: block; }
	.header_icon_area{ width: 100%; }	
}
@media all and (max-width: 767px){
	
	


}
@media all and (max-width: 414px){



}
@media all and (max-width: 390px){

}
@media all and (max-width: 360px){

}


@media all and (max-width: 320px){


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

	


}