@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: #9abdff

}

.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;

}