@charset "utf-8";



@import url('iconfont.css');



:root {



--color:#0342be;



--hometitlefont:36px;



--fontcolor:#000000;



--fontbold5:500;



--fontbold6:600;



--fontbold7:700;



--borderradius:5px;



--fontfamily:"Lato", "Open Sans", "Roboto", "Poppins", "Oswald", "Noto Sans", "Montserrat", sans-serif



}



@media (max-width:1366px) {



:root {



--hometitlefont:30px



}



}



@media (max-width:768px) {



:root {



--hometitlefont:24px



}



}



body::-webkit-scrollbar-track {



box-shadow:inset 0 0 5px rgba(0,0,0,.1);



border-radius:10px;



background:rgba(122,122,122,.1)



}



body::-webkit-scrollbar-thumb {



box-shadow:inset 0 0 5px rgba(0,0,0,.2);



background:#989898



}



body::-webkit-scrollbar {



width:8px;



height:1px



}



img.lazy {



	display: inline-block;



	opacity: 0



}



img.lazy, img.tst {



	transition: opacity .6s, transform .3s ease



}



img.loaded {



	opacity: 1



}



img:not([src]) {



	visibility: hidden;



	position: absolute



}



.lazy-load {



	width: 30px;



	height: 30px;



	display: inline-block;



	padding: 0px;



	border-radius: 100%;



	border: 3px solid;



	border-top-color: #000;



	border-bottom-color: rgba(0,0,0,.1);



	border-left-color: #000;



	border-right-color: rgba(0,0,0,.1);



	position: absolute;



	left: 50%;



	top: 50%;



	animation: loading-animation 1s ease-in-out infinite;



	transform: translate(-50%, -50%);



	opacity: 0.5



}



@keyframes loading-animation {



from {



transform:translate(-50%, -50%) rotate(0)



}



to {



	transform: translate(-50%, -50%) rotate(360deg)



}



}



.lazy-wrap {



	display: block;



	position: relative;



	overflow: hidden



}



.lazy-wrap::after {



	content: "";



	display: block;



	padding-bottom: 50%



}



.lazy-wrap.lazy-loaded .lazy-load {



	-webkit-animation: none;



	animation: none;



	display: none



}



.lazy-wrap.lazy-loaded::after {



	padding-bottom: 0px



}



*, html, body, h1, h2, h3, h4, h5, h6, table, th, td, ol, ul, li, dl, dt, dd, div, p {



	padding: 0px;



	margin: 0px;



	box-sizing: border-box



}



html {



	-webkit-text-size-adjust: none;



	-webkit-tap-highlight-color: transparent;



	background: #EEE;



	overflow-x: hidden



}



body {



	font-family: var(--fontfamily);



	max-width: 100%;



	margin: 0px auto;



	font-size: 16px;



	line-height: 1.6;



	overflow-x: hidden;



	background: #FFF;



	color: var(--fontcolor);



	padding-top: 40px



}



h1, h2, h3, h4, h5, h6 {



	text-transform: capitalize;



	font-weight: var(--fontbold5)



}



img {



	vertical-align: bottom;



	max-width: 100%;



	height: auto



}



a {



	text-decoration: none;



	color: inherit



}



li, ol, ul {



	list-style: none



}



iframe, video {



	max-width: 100%;



	outline: 0;



	border: none;



	vertical-align: bottom



}



@media(max-width:768px) {



iframe, video {



	min-height: 240px;



	height: auto



}



}



header {



	position: fixed;



	width: 100%;



	top: 0px;



	left: 50%;



	transform: translateX(-50%);



	z-index: 100000



}



header.is-active .head-top {



	height: 0px;



	opacity: 0;



	visibility: hidden



}



header.is-active .head-info {



	background: #000000d9



}



.hidden {



	overflow: hidden



}



.l-wrap {



	width: 100%;



	max-width: 1700px;



	padding: 0px 70px;



	margin: 0px auto



}



.line1 {



	display: -webkit-box;



	-webkit-box-orient: vertical;



	-webkit-line-clamp: 1;



	overflow: hidden



}



.line2 {



	display: -webkit-box;



	-webkit-box-orient: vertical;



	-webkit-line-clamp: 2;



	overflow: hidden



}



.line3 {



	display: -webkit-box;



	-webkit-box-orient: vertical;



	-webkit-line-clamp: 3;



	overflow: hidden



}



.line4 {



	display: -webkit-box;



	-webkit-box-orient: vertical;



	-webkit-line-clamp: 4;



	overflow: hidden



}



.line5 {



	display: -webkit-box;



	-webkit-box-orient: vertical;



	-webkit-line-clamp: 4;



	overflow: hidden



}



.head-top {



	background: #0f1623;



	height: 40px;



	transition: all .1s linear



}



.head-top .l-wrap {



	height: 100%;



	display: flex;



	align-items: center;



	justify-content: space-between



}



.head-share {



	height: 100%



}



.head-share ul {



	display: flex;



	align-items: center;



	list-style: none;



	padding: 0px;



	height: 100%



}



.head-share ul li {



	margin-right: 10px



}



.head-share ul li a {



	color: #FFF;



	transition: all .1s linear;



	border-radius: 50%;



	display: inline-flex;



	align-items: center;



	justify-content: center;



	width: 30px;



	height: 30px



}



.head-share ul li a:hover {



	background: #284b91;



	color: #FFF



}



.head-share ul li a em {



	font-size: 18px



}



.head-link {



	display: flex;



	flex-wrap: wrap;



	align-items: center;



	margin-left: auto;



	margin-right: 0px



}



.head-link .item {



	display: flex;



	align-items: center;



	color: #999;



	margin-right: 30px



}



.head-link .item a {



	color: #999



}



.head-link .item a:hover {



	color: #284b91



}



.head-link em {



	color: #FFF;



	margin-right: 5px;



	font-size: 18px



}



.head-info {



	transition: all .1s linear;



	height: 100px;



	border-bottom: 1px solid rgba(255,255,255,.2)



}



.head-info .l-wrap {



	height: 100%;



	display: flex;



	align-items: center;



	justify-content: space-between



}



.head-info .head-nav {



	height: 100%;



	display: flex;



	align-items: center



}



.head-info .head-logo {



	height: 100%



}



.head-info .head-logo a {



	height: 100%;



	display: flex;



	align-items: center



}



.head-info .head-logo a img {



	width: auto;



	height: 100%;



	max-height: 60px



}



.head-info .head-logo a span {



	color: #FFF;



	margin-left: 10px;



	font-size: 20px;



	font-weight: var(--fontbold5)



}



.head-info .nav-ul {



	display: flex;



	align-items: center;



	list-style: none;



	height: 100%



}



.head-info .nav-ul>li {



	margin: 0px 10px;



	height: 100%;



	display: flex;



	align-items: center;



	justify-content: center;



	position: relative;



	white-space: nowrap



}



.head-info .nav-ul>li a {



	display: inline-flex;



	align-items: center;



	justify-content: center;



	height: 100%;



	font-size: 18px;



	font-weight: var(--fontbold5);



	color: #fff;



	padding: 0px 10px;



	text-transform: capitalize



}



.head-info .nav-ul>li a.inmenu_1 {



	color: #003aa7



}



.head-info .nav-ul>li a em {



	margin-left: 5px



}



.head-info .nav-ul>li ul {



	list-style: none;



	background: #000000d9;



	min-width: 220px;



	padding: 0px;



	margin: 0px;



	padding: 5px 0px



}



.head-info .nav-ul>li>.submenu {



	position: absolute;



	left: 0px;



	top: 100%



}



.head-info .nav-ul>li>.submenu>li {



	position: relative



}



.head-info .nav-ul>li>.submenu>li>a {



	padding-right: 40px



}



.head-info .nav-ul>li>.submenu a {



	padding: 8px 10px;



	display: inline-block;



	width: 100%;



	transition: all .1s linear;



	cursor: pointer



}



.head-info .nav-ul>li>.submenu em {



	color: #FFF;



	position: absolute;



	right: 10px;



	top: 50%;



	transform: translateY(-50%);



	cursor: pointer



}



.head-info .nav-ul>li>.submenu ul {



	position: absolute;



	left: 100%;



	top: 0px;



	display: none



}



.head-info .search-box {



	height: 100%;



	position: relative



}



.head-info .head-search {



	height: 100%;



	display: inline-flex;



	align-items: center



}



.head-info .head-search button {



	background: 0 0;



	outline: 0;



	border: none;



	color: #FFF;



	cursor: pointer;



	height: 100%;



	padding-left: 15px



}



.head-info .head-search button em {



	font-weight: var(--fontbold5);



	font-size: 26px



}



.head-info .search-input {



	position: absolute;



	top: 100%;



	right: 0px;



	background: #FFF;



	display: flex;



	align-items: center;



	justify-content: center;



	box-shadow: 2px 2px 4px rgba(0,0,0,.2);



	opacity: 0;



	transform: rotateX(90deg);



	visibility: hidden



}



.head-info .search-input input {



	width: 200px;



	height: 40px;



	padding-left: 10px;



	font-size: 16px;



	border: none;



	outline: 0



}



.head-info .search-input button {



	width: 40px;



	height: 40px;



	border: none;



	outline: 0;



	display: inline-flex;



	align-items: center;



	justify-content: center;



	cursor: pointer;



	transition: all .1s linear



}



.head-info .search-input button em {



	font-size: 22px;



	color: #adc9ff;



	font-weight: var(--fontbold5)



}



.head-info .search-input.active {



	transition: opacity .3s, transform .3s;



	visibility: visible;



	opacity: 1;



	transform: rotateX(0);



	transform-origin: top



}



@media (min-width:1024px) {



.head-info .nav-ul>li .submenu {



	transform-origin: top;



	transform: scaleY(0);



	opacity: 0;



	transition: all .3s ease-in-out



}



.head-info .nav-ul>li:hover>a {



	color: #adc9ff



}



.head-info .nav-ul>li:hover .submenu {



	transform: scaleY(1);



	opacity: 1



}



.head-info .nav-ul>li:hover .submenu li:hover>a {



	background: #adc9ff



}



.head-info .nav-ul>li:hover .submenu li:hover ul {



	display: block



}



}



.m-menu {



	display: none



}



footer {



	background: #272727;



	color: #dbdbdb



}



footer ul {



	list-style: none;



	padding: 0px



}



footer a:hover {



	color: #FFF



}



footer .foot-main {



	display: flex;



	flex-wrap: wrap;



	justify-content: space-between;



	align-items: flex-start;



	padding: 50px 0px



}



footer .foot-main .foot-item {



	width: 20%



}



footer .foot-main .foot-contact {



	width: 30%



}



footer .foot-logo img {



	width: auto;



	max-height: 60px



}



footer .foot-text {



	margin-top: 20px



}



footer .foot-share {



	margin-top: 20px



}



footer .foot-share ul {



	display: flex;



	flex-wrap: wrap



}



footer .foot-share ul a {



	margin-right: 10px;



	width: 32px;



	height: 32px;



	background: #3C3C3C;



	color: #f6f9ff;



	display: inline-flex;



	align-items: center;



	justify-content: center;



	transition: all .1s linear;



	border-radius: var(--borderradius)



}



footer .foot-share ul a:hover {



	background: #284b91;



	color: #FFF



}



footer .foot-share ul a em {



	font-size: 20px;



	font-weight: var(--fontbold7)



}



footer .foot-title {



	font-size: 24px;



	margin-bottom: 15px



}



footer .foot-list a {



	display: inline-block;



	padding: 4px 0px;



	text-transform: capitalize;



	color: #999



}



footer .foot-list a:hover {



	color: #FFF



}



footer .foot-list a em {



	font-weight: var(--fontbold5);



	transform: rotate(90deg);



	margin-right: 5px



}



footer .foot-touch .foot-inner {



	display: flex;



	margin-bottom: 10px



}



footer .foot-touch .foot-inner .icon {



	width: 30px



}



footer .foot-touch .foot-inner .icon em {



	font-size: 30px;



	font-weight: var(--fontbold5);



	color: #adc9ff



}



footer .foot-touch .foot-inner .content {



	flex: 1;



	padding-left: 10px



}



footer .foot-touch .foot-inner .content a {



	color: #999



}



footer .foot-touch .foot-inner .content .title {



	font-size: 18px



}



footer .foot-touch .foot-inner .content .info {



	color: #999



}



footer .copyright {



	display: flex;



	flex-wrap: wrap;



	justify-content: space-between;



	align-items: center;



	color: #999;



	font-size: 14px;



	padding: 20px 0px;



	border-top: 1px solid #434343



}



footer .copyright a {



	font-size: 14px;



	margin-left: 10px



}



footer .gotop {



	width: 50px;



	height: 50px;



	border-radius: 50%;



	background: #284b91;



	display: flex;



	justify-content: center;



	align-items: center;



	font-weight: 600;



	cursor: pointer;



	transition: all .1s linear;



	color: #FFF;



	transform: rotate(180deg);



	opacity: 0;



	visibility: hidden;



	transform: rotate(180deg) translateY(-10px)



}



footer .gotop.act {



	opacity: 1;



	visibility: inherit;



	transform: rotate(180deg) translateY(0)



}



footer .gotop em {



	font-weight: 300;



	font-size: 20px



}



footer .gotop:hover {



	opacity: .9



}



.bottom-btn {



	background: #FCFCFCFB;



	display: none;



	align-items: center;



	position: fixed;



	bottom: 0px;



	left: 0px;



	width: 100%;



	z-index: 999;



	box-shadow: 1px 2px 10px rgba(0,0,0,.1);



	transform: translateY(100%);



	transition: all .2s linear;



	padding-bottom: constant(safe-area-inset-bottom);



	padding-bottom: env(safe-area-inset-bottom)



}



.bottom-btn.bottom-btn-hide {



	transform: translateY(0)



}



.bottom-btn.bottom-btn-keep {



	transform: translateY(0)!important



}



.bottom-btn .btn-item {



	width: 25%;



	height: 55px;



	color: #222;



	transition: all .2s linear;



	position: relative



}



.bottom-btn .btn-item em, .bottom-btn .btn-item i {



	font-size: 20px;



	line-height: 1



}



.bottom-btn .btn-item a, .bottom-btn .btn-item div {



	width: 100%;



	height: 100%;



	display: flex;



	flex-direction: column;



	align-items: center;



	justify-content: center;



	color: #333;



	text-transform: capitalize



}



.bottom-btn .btn-item a p, .bottom-btn .btn-item div {



	font-size: 12px;



	text-transform: capitalize



}



.mobile-bottom-bag {



	display: none



}



.rfixed {



	position: fixed;



	bottom: calc(150px + constant(safe-area-inset-bottom));



	bottom: calc(150px + env(safe-area-inset-bottom));



	right: 35px;



	z-index: 99



}



.compare-panel {



	width: 280px;



	background: #FFF;



	position: fixed;



	z-index: 1000;



	bottom: 0px;



	right: 0px;



	box-shadow: -1px -1px 3px #CCC;



	display: none;



	transition: bottom .2s



}



.compare-t {



	background-color: #284b91;



	font-size: 14px;



	color: #FFF;



	display: flex;



	align-items: center;



	padding: 6px 10px;



	cursor: pointer



}



.compare-close {



	position: relative;



	width: 24px;



	height: 24px;



	background: 0 0;



	cursor: pointer;



	border: none



}



.compare-close::after, .compare-close::before {



	content: "";



	display: block;



	width: 10px;



	height: 2px;



	background-color: #FFF;



	position: absolute;



	top: 50%;



	border-radius: 2px



}



.compare-close::before {



	transform: rotate(45deg);



	left: 4px



}



.compare-close::after {



	transform: rotate(-45deg);



	right: 4px



}



.compare-tit {



	text-align: center;



	flex: 1;



	line-height: 1.5



}



.compare-checked {



	color: #FFF;



	margin: 0px 4px



}



#productChache_list {



	padding: 0px 10px;



	height: 220px;



	overflow-y: auto



}



#productChache_list::-webkit-scrollbar {



width:4px



}



#productChache_list::-webkit-scrollbar-track {



border-radius:0;



background-color:rgba(0,0,0,.05)



}



#productChache_list::-webkit-scrollbar-thumb {



border-radius:10px;



background-color:rgba(0,0,0,.15)



}



.selected-item {



	position: relative;



	border-bottom: 1px solid #efefef;



	padding: 10px 0;



	display: flex;



	align-items: center



}



.item-clear {



	position: relative;



	width: 20px;



	height: 20px;



	background-color: transparent;



	cursor: pointer;



	outline: 0;



	border: none



}



.item-clear::after, .item-clear::before {



	content: "";



	display: block;



	position: absolute;



	width: 70%;



	height: 2px;



	background-color: #333;



	border-radius: 2px;



	top: 50%;



	margin-top: -1px



}



.item-clear::before {



	transform: rotate(45deg);



	left: 3px



}



.item-clear::after {



	transform: rotate(-45deg);



	left: 3px



}



.item-content {



	flex: 1;



	display: flex;



	align-items: center



}



.item-img {



	width: 50px;



	height: 50px;



	background: #FFF;



	border: 1px solid #efefef;



	display: flex;



	align-items: center;



	justify-content: center



}



.item-img img {



	max-width: 100%;



	max-height: 100%



}



.item-c {



	width: calc(100% - 50px);



	padding: 0px 10px;



	font-size: 12px



}



.item-title {



	max-height: 34px;



	word-break: break-word;



	display: block;



	display: -webkit-box;



	text-overflow: ellipsis;



	overflow: hidden;



	-webkit-line-clamp: 2;



	-webkit-box-orient: vertical;



	line-height: 1.3;



	color: var(--fontcolor)



}



.item-price {



	color: #284b91



}



.compare-b {



	padding: 20px 10px;



	display: flex;



	justify-content: space-between



}



.compare-b * {



	display: block;



	width: 80px;



	text-align: center;



	font-size: 12px;



	white-space: nowrap;



	overflow: hidden;



	text-overflow: ellipsis;



	line-height: 30px;



	border-radius: 2px;



	padding: 0px 2px



}



.clear-all {



	color: var(--fontcolor);



	background-color: #ededed;



	cursor: pointer;



	border: none



}



.compare-inquire, .compare-inquire:hover {



	color: #FFF;



	background-color: #284b91



}



.compare-b .orderNow {



	margin: 0px;



	background: #f66f08;



	color: #FFF;



	line-height: 30px;



	padding: 0px 2px;



	border: none;



	border-radius: 2px;



	font-size: 12px;



	cursor: pointer;



	display: block;



	width: 80px



}



.rfixed-sc {



	width: 50px;



	height: 50px;



	background: #284b91;



	border-radius: 50%;



	text-align: center;



	line-height: 50px;



	color: #FFF;



	position: relative;



	margin-bottom: 10px;



	cursor: pointer;



	display: none



}



.rfixed-sc em {



	font-size: 20px



}



.rfixed-scnum {



	position: absolute;



	right: 6px;



	top: 4px;



	width: 16px;



	height: 16px;



	background: #E00;



	border-radius: 50%;



	text-align: center;



	font-size: 12px;



	color: #FFF;



	transform: scale(.9);



	line-height: 16px



}



@media (max-width:768px) {



.compare-panel {



	width: 100%;



	bottom: calc(55px + constant(safe-area-inset-bottom));



	bottom: calc(55px + env(safe-area-inset-bottom))



}



.rfixed-scnum {



	right: 26px



}



}



.lang {



	z-index: 99999;



	text-align: left;



	position: relative



}



.lang-icon {



	display: flex;



	align-items: center;



	width: 100%;



	height: 30px;



	border: none;



	cursor: pointer;



	font-size: 14px;



	user-select: none;



	white-space: nowrap



}



.lang-icon span {



	position: relative;



	padding-right: 18px;



	color: #CACACA;



	margin-left: 5px



}



.lang-icon span::before {



	content: "";



	position: absolute;



	right: 4px;



	top: 11px;



	width: 8px;



	height: 1px;



	background: #CACACA;



	transform: rotate(50deg)



}



.lang-icon span::after {



	content: "";



	position: absolute;



	right: 0px;



	top: 11px;



	width: 8px;



	height: 1px;



	background: #CACACA;



	transform: rotate(-50deg)



}



.lang-drop {



	position: absolute;



	top: calc(100% + 26px);



	right: 50%;



	transform: translateX(50%);



	background: #FFF;



	border: 1px solid #EBEEF5;



	border-radius: 4px;



	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);



	z-index: 9999;



	visibility: hidden;



	opacity: 0;



	transition: opacity .3s, top .3s



}



.lang-drop.lang-flex {



	transform: translateX(20%)



}



.lang-drop.lang-flex .lang-arrow {



	left: 80%



}



.lang-drop.active {



	visibility: visible;



	opacity: 1;



	top: calc(100% + 7px)



}



.lang-arrow {



	display: block;



	width: 10px;



	height: 10px;



	background-color: #FFF;



	border-top: 1px solid #EBEEF5;



	border-left: 1px solid #EBEEF5;



	transform: translateX(-50%) rotate(45deg);



	position: absolute;



	top: -6px;



	left: 50%



}



.lang-wrap {



	list-style: none;



	width: 340px;



	padding: 8px 0px;



	box-sizing: border-box



}



.lang-flex .lang-wrap {



	width: 340px;



	display: flex;



	flex-wrap: wrap;



	padding: 8px



}



.lang-wrap li {



	width: 30%;



	box-sizing: border-box;



	transition: background-color .3s



}



.lang-flex .lang-wrap li {



	width: 33%;



	padding: 0px



}



.lang-wrap li.lang-active, .lang-wrap li:hover {



	background-color: #EEE



}



.lang-wrap li a {



	display: block;



	color: var(--fontcolor);



	font-size: 12px;



	padding: 8px;



	text-decoration: none;



	white-space: nowrap;



	text-overflow: ellipsis;



	overflow: hidden



}



.lang-wrap li img {



	display: inline-block;



	width: 24px;



	height: 16px;



	vertical-align: -.25em;



	margin-right: 4px



}



@media (max-width:1024px) {



body {



	padding-top: 55px



}



.head-info .nav-ul>li>.submenu em {



	display: none;



}



.lang {



	margin-left: auto;



	margin-right: 20px;



	transition: all .2s linear



}



.lang-icon img {



	width: 32px



}



.lang-icon span {



	display: none



}



.lang-drop {



	display: none



}



.lang-drop.active {



	display: block



}



}



.toast-title {



	font-weight: 700



}



.toast-message {



	-ms-word-wrap: break-word;



	word-wrap: break-word



}



.toast-message a, .toast-message label {



	color: #FFF



}



.toast-message a:hover {



	color: #CCC;



	text-decoration: none



}



.toast-close-button {



	position: relative;



	right: -.3em;



	top: -.3em;



	float: right;



	font-size: 20px;



	font-weight: 700;



	color: #FFF;



	-webkit-text-shadow: 0 1px 0 #FFF;



	text-shadow: 0 1px 0 #FFF;



	opacity: .8;



	line-height: 1



}



.toast-close-button:focus, .toast-close-button:hover {



	color: var(--fontcolor);



	text-decoration: none;



	cursor: pointer;



	opacity: .4



}



.rtl .toast-close-button {



	left: -.3em;



	float: left;



	right: .3em



}



button.toast-close-button {



	padding: 0px;



	cursor: pointer;



	background: 0 0;



	border: 0;



	-webkit-appearance: none



}



.toast-center-center {



	top: 40%;



	right: 0px;



	width: 100%;



	transform: translateY(-50%)



}



.toast-top-center {



	top: 20%;



	right: 0px;



	width: 100%



}



.toast-bottom-center {



	bottom: 0px;



	right: 0px;



	width: 100%



}



.toast-top-full-width {



	top: 0px;



	right: 0px;



	width: 100%



}



.toast-bottom-full-width {



	bottom: 0px;



	right: 0px;



	width: 100%



}



.toast-top-left {



	top: 12px;



	left: 12px



}



.toast-top-right {



	top: 12px;



	right: 12px



}



.toast-bottom-right {



	right: 12px;



	bottom: 12px



}



.toast-bottom-left {



	bottom: 12px;



	left: 12px



}



#toast-container {



	position: fixed;



	z-index: 999999;



	pointer-events: none



}



#toast-container * {



	-moz-box-sizing: border-box;



	-webkit-box-sizing: border-box;



	box-sizing: border-box



}



#toast-container>div {



	font-size: 16px;



	position: relative;



	pointer-events: auto;



	overflow: hidden;



	margin: 0px 0px 6px;



	padding: 15px 15px 15px 50px;



	width: 300px;



	-moz-border-radius: 3px;



	-webkit-border-radius: 3px;



	border-radius: 3px;



	background-position: 15px center;



	background-repeat: no-repeat;



	-moz-box-shadow: 0 0 12px #999;



	-webkit-box-shadow: 0 0 12px #999;



	box-shadow: 0 0 12px #999;



	color: #FFF;



	opacity: .9



}



#toast-container>div.rtl {



	direction: rtl;



	padding: 15px 50px 15px 15px;



	background-position: right 15px center



}



#toast-container>div:hover {



	-moz-box-shadow: 0 0 12px var(--fontcolor);



	-webkit-box-shadow: 0 0 12px var(--fontcolor);



	box-shadow: 0 0 12px var(--fontcolor);



	opacity: 1;



	cursor: pointer



}



#toast-container>.toast-info {



	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important



}



#toast-container>.toast-error {



	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important



}



#toast-container>.toast-success {



	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important



}



#toast-container>.toast-warning {



	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important



}



#toast-container.toast-bottom-center>div, #toast-container.toast-center-center>div, #toast-container.toast-top-center>div {



	width: 300px;



	margin-left: auto;



	margin-right: auto



}



#toast-container.toast-bottom-full-width>div, #toast-container.toast-top-full-width>div {



	width: 96%;



	margin-left: auto;



	margin-right: auto



}



.toast {



	background-color: #030303



}



.toast-success {



	background-color: #51a351



}



.toast-error {



	background-color: #bd362f



}



.toast-info {



	background-color: #2f96b4



}



.toast-warning {



	background-color: #f89406



}



.toast-progress {



	position: absolute;



	left: 0px;



	bottom: 0px;



	height: 4px;



	background-color: var(--fontcolor);



	opacity: .4



}



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



#toast-container>div {



	padding: 8px 8px 8px 50px;



	width: 11em



}



#toast-container>div.rtl {



	padding: 8px 50px 8px 8px



}



#toast-container .toast-close-button {



	right: -.2em;



	top: -.2em



}



#toast-container .rtl .toast-close-button {



	left: -.2em;



	right: .2em



}



}



@media all and (min-width:241px) and (max-width:480px) {



#toast-container>div {



	padding: 8px 8px 8px 50px;



	width: 18em



}



#toast-container>div.rtl {



	padding: 8px 50px 8px 8px



}



#toast-container .toast-close-button {



	right: -.2em;



	top: -.2em



}



#toast-container .rtl .toast-close-button {



	left: -.2em;



	right: .2em



}



}



@media all and (min-width:481px) and (max-width:768px) {



#toast-container>div {



	padding: 15px 15px 15px 50px;



	width: 25em



}



#toast-container>div.rtl {



	padding: 15px 50px 15px 15px



}



}



@media (max-width:768px) {



#toast-container>div {



	font-size: 15px;



	opacity: 1



}



}



@media (max-width:415px) {



#toast-container>div {



	font-size: 13px



}



}



.icon-videoplay {



	position: absolute;



	left: 50%;



	top: 50%;



	transform: translate(-52%, -50%);



	background: rgba(0,0,0,.5);



	color: #FFF;



	width: 35px;



	height: 35px;



	display: flex;



	align-items: center;



	justify-content: center;



	border-radius: 50%;



	font-size: 18px;



	z-index: 1;



	display: none



}



img.lazy.loaded+.icon-videoplay {



	display: flex



}



@media (max-width:1366px) {



.head-info {



	height: 80px



}



.head-info .nav-ul>li {



	margin: 0px



}



.head-info .nav-ul>li a {



	font-size: 16px



}



}



@media (max-width:1024px) {



.l-wrap {



	padding: 0px 15px



}



.head-link {



	padding: 15px;



	border-top: 1px solid #EEE



}



.head-link .item {



	width: 100%;



	color: #333;



	font-size: 17px



}



.head-link em {



	font-size: 22px



}



.head-top {



	display: none



}



header.is-active .head-info {



	background: #284b91



}



.head-info {



	background: #000000;



	height: 55px



}



.head-info .head-logo a img {



	max-height: 50px



}



.head-info .head-logo a span {



	display: none



}



.head-info .search-box {



	width: 100%;



	height: auto;



	background: #FFF;



	z-index: 2



}



.head-info .search-box .head-search {



	display: none



}



.head-info .search-box .search-input {



	display: flex;



	position: static;



	opacity: 1;



	transform: none;



	visibility: inherit;



	box-shadow: none;



	width: 90%;



	margin: 10px auto;



	border: 1px solid #EEE;



	border-radius: 4px



}



.head-info .search-box .search-input input {



	flex: 1;



	padding-left: 20px;



	height: 45px



}



.head-info .search-box .search-input button {



	width: 45px;



	height: 45px



}



.head-info .head-nav {



	position: fixed;



	left: 100%;



	top: 55px;



	width: 85%;



	height: calc(100vh - 55px);



	background: #FFF;



	transition: all .15s linear;



	opacity: 0;



	visibility: hidden;



	z-index: 2



}



.head-info .head-nav.head-nav-act {



	display: flex;



	flex-direction: column-reverse;



	justify-content: flex-end;



	left: 15%;



	opacity: 1;



	visibility: inherit



}



.head-info .head-nav .opacity {



	width: 100%;



	height: 100vh;



	position: fixed;



	left: 0px;



	top: 55px;



	background: rgba(0,0,0,.7);



	z-index: 1



}



.head-info .head-nav .nav-ul {



	display: block;



	width: 100%;



	height: calc(100vh - 111px);



	padding: 0px;



	padding-bottom: 100px;



	overflow-y: scroll;



	background: #FFF;



	z-index: 2



}



.head-info .head-nav .nav-ul>li {



	height: auto;



	display: block



}



.head-info .head-nav .nav-ul>li.cur>a {



	color: #284b91



}



.head-info .head-nav .nav-ul>li.cur>em {



	transform: rotate(0);



	color: #284b91



}



.head-info .head-nav .nav-ul>li a {



	color: var(--fontcolor);



	font-size: 18px;



	display: block;



	width: 100%;



	padding: 10px 20px;



	font-weight: normal;



	padding-right: 50px;



	text-align: left



}



.head-info .head-nav .nav-ul>li a.inmenu_1, .head-info .head-nav .nav-ul>li a.inmenu_1+em {



	color: #284b91



}



.head-info .head-nav .nav-ul>li>em {



	transform: rotate(-90deg);



	position: absolute;



	right: 10px;



	top: 6px;



	font-size: 20px;



	width: 40px;



	height: 40px;



	display: inline-flex;



	align-items: center;



	justify-content: center;



	z-index: 1;



	transition: all .1s linear



}



.head-info .head-nav .nav-ul>li>.submenu {



	display: none;



	opacity: 1;



	visibility: inherit;



	position: static;



	transform: none;



	box-shadow: none;



	transition: none;



	padding-left: 20px;



	min-width: inherit;



	background: 0 0



}



.head-info .head-nav .nav-ul>li>.submenu a {



	font-weight: var(--fontbold5);



	white-space: pre-wrap;



	padding: 8px 20px



}



.head-info .head-nav .nav-ul>li .submenu ul a {



	font-size: 16px



}



.head-info .head-nav .nav-ul>li>.submenu ul {



	display: block;



	position: static;



	background: none;



	padding: 0px 20px



}



.m-menu {



	display: block;



	position: relative;



	width: 30px;



	height: 40px;



	cursor: pointer



}



.m-menu span {



	position: absolute;



	background: #FFF;



	height: 3px;



	border-radius: 4px;



	left: 0px;



	transition: all .2s linear



}



.m-menu span:nth-child(1) {



	width: 30px;



	top: 25%



}



.m-menu span:nth-child(2) {



	width: 22px;



	top: 48%



}



.m-menu span:nth-child(3) {



	width: 26px;



	top: 73%



}



.m-menu.act span {



	top: 48%;



	width: 32px



}



.m-menu.act span:nth-child(1) {



	transform: rotate(45deg)



}



.m-menu.act span:nth-child(2) {



	width: 0px



}



.m-menu.act span:nth-child(3) {



	transform: rotate(-45deg)



}



footer .foot-main .foot-item {



	width: 33%!important



}



.foot-logo, .foot-text {



	display: none



}



footer .foot-share {



	margin-top: 0px



}



footer {



	margin-bottom: calc(55px + constant(safe-area-inset-bottom));



	margin-bottom: calc(55px + env(safe-area-inset-bottom))



}



.bottom-btn {



	display: flex



}



footer .gotop {



	display: none;



}



.bottom-btn .btn-item {



	width: 20%;



	position: relative;



}



.bottom-btn .btn-item .gotop {



	display: flex;



	width: 35px;



	height: 35px;



	position: absolute;



	left: 50%;



	top: 50%;



	transform: translate(-50%, -50%) rotate(180deg);



	color: #fff;



	opacity: 1;



	visibility: inherit;



}



.bottom-btn .btn-item .gotop em {



	font-size: 16px;



}



}



@media (max-width:768px) {



.icon-videoplay {



	width: 30px;



	height: 30px



}



footer .foot-main .foot-item {



	width: 100%!important;



	margin-bottom: 30px



}



footer .foot-main .foot-item:last-child {



	margin-bottom: 0px



}



footer .foot-list {



	display: flex;



	flex-wrap: wrap;



	justify-content: space-between



}



footer .foot-list li {



	width: 50%



}



footer .foot-list a {



	padding: 5px 0px



}



footer .foot-title {



	margin-bottom: 5px



}



footer .gotop {



	width: 40px;



	height: 40px



}



.rfixed {



	bottom: calc(140px + constant(safe-area-inset-bottom));



	bottom: calc(140px + env(safe-area-inset-bottom));



	right: 24px



}



}



@media (max-width:450px) {



.head-info .head-logo a img {



	max-height: 45px



}



footer .foot-main {



	padding: 50px 0px 20px



}



}



/*分页*/



.mypages {



	clear: both;



	margin: 20px 0px 20px 0px;



	text-align: center;



	height: 40px;



	line-height: 40px;



}



.mypages ul {



	display: inline-block;



	margin: 0 auto;



}



.mypages li {



	padding: 0 15px;



	line-height: 30px;



	display: inline-block;



	font-size: 14px;



	border: 1px solid #ddd;



	border-radius: 5px;



	margin: 0 3px;



	float: left;



	background-color: #FFF;



	cursor: pointer;



}



.page-num {



	padding: 0 15px;



	line-height: 30px;



	display: inline-block;



	font-size: 14px;



	border: 1px solid #ddd;



	border-radius: 5px;



	margin: 0 3px;



	float: left;



	background-color: #FFF;



	cursor: pointer;



}



.page-num-current, .page-num-current a, .page-num-current a:hover {



	color: #fff;



	background-color: #0342be;



}